Display info notification when switching to find-relevant-files mode and add info icon support to modals

- when switched to 'find relevant files' prompt type, show auto closing modal : 'Context temporarily cleared, make rough selection on the file tree'.
- add support for info icon

Author: robertpiosik

apps/editor/src/views/panel/frontend/Panel.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react'
+import { useState, useEffect, useRef } from 'react'
 import { Main } from './Main'
 import { Button as UiButton } from '@ui/components/editor/common/Button'
 import { Page as UiPage } from '@ui/components/editor/panel/Page'
@@ -155,6 +155,30 @@ export const Panel = () => {
   const { viewing_donations, set_viewing_donations, ...donations_state } =
     use_latest_donations()
 
+  const prev_web_prompt_type = useRef(web_prompt_type)
+  const prev_api_prompt_type = useRef(api_prompt_type)
+
+  useEffect(() => {
+    const switched_web =
+      web_prompt_type == 'find-relevant-files' &&
+      prev_web_prompt_type.current != 'find-relevant-files' &&
+      prev_web_prompt_type.current !== undefined
+    const switched_api =
+      api_prompt_type == 'find-relevant-files' &&
+      prev_api_prompt_type.current != 'find-relevant-files' &&
+      prev_api_prompt_type.current !== undefined
+
+    if (switched_web || switched_api) {
+      set_auto_closing_modal_data({
+        title:
+          'Context temporarily cleared, make rough selection on the file tree',
+        type: 'info'
+      })
+    }
+    prev_web_prompt_type.current = web_prompt_type
+    prev_api_prompt_type.current = api_prompt_type
+  }, [web_prompt_type, api_prompt_type])
+
   if (
     ask_about_context_instructions === undefined ||
     edit_context_instructions === undefined ||

apps/editor/src/views/panel/frontend/hooks/use-modal-manager.ts

@@ -27,7 +27,8 @@ export const use_modal_manager = () => {
   >({})
 
   const [auto_closing_modal_data, set_auto_closing_modal_data] = useState<
-    { title: string; type: 'success' | 'warning' | 'error' } | undefined
+    | { title: string; type: 'success' | 'warning' | 'error' | 'info' }
+    | undefined
   >()
 
   const [

packages/ui/src/components/editor/panel/modals/Modal/Modal.module.scss

@@ -39,6 +39,10 @@
   &--error {
     color: var(--cwc-text-color-red);
   }
+
+  &--info {
+    color: var(--vscode-notificationsInfoIcon-foreground);
+  }
 }
 
 .title {

packages/ui/src/components/editor/panel/modals/Modal/Modal.tsx

@@ -3,7 +3,7 @@ import cn from 'classnames'
 import { Scrollable } from '../../Scrollable'
 import styles from './Modal.module.scss'
 
-export type ModalIconType = 'success' | 'warning' | 'error'
+export type ModalIconType = 'success' | 'warning' | 'error' | 'info'
 
 type Props = {
   title?: string
@@ -54,9 +54,11 @@ export const Modal: React.FC<Props> = (props) => {
               'codicon-check': props.icon == 'success',
               'codicon-warning': props.icon == 'warning',
               'codicon-error': props.icon == 'error',
+              'codicon-info': props.icon == 'info',
               [styles['icon--success']]: props.icon == 'success',
               [styles['icon--warning']]: props.icon == 'warning',
-              [styles['icon--error']]: props.icon == 'error'
+              [styles['icon--error']]: props.icon == 'error',
+              [styles['icon--info']]: props.icon == 'info'
             })}
           />
         )}