Refactor Escape key handling to consistently close the main view when the prompt field is not focused, and update the header button tooltip to reflect the Esc shortcut

Author: robertpiosik

packages/ui/src/components/editor/panel/PromptField/PromptField.tsx

@@ -318,6 +318,10 @@ export const PromptField: React.FC<PromptFieldProps> = (props) => {
           [styles['container__inner--selecting']]: is_text_selecting
         })}
         onKeyDown={(e) => {
+          if (e.key == 'Escape' && !e.ctrlKey && !e.metaKey) {
+            e.stopPropagation()
+            return
+          }
           if (e.key == 'f' && (e.ctrlKey || e.metaKey)) {
             e.stopPropagation()
             props.on_search_click()

packages/vscode/src/views/panel/frontend/Main/MainView/MainView.tsx

@@ -1,3 +1,4 @@
+import { useEffect } from 'react'
 import styles from './MainView.module.scss'
 import { Configurations as UiConfigurations } from '@ui/components/editor/panel/Configurations'
 import { Presets as UiPresets } from '@ui/components/editor/panel/Presets'
@@ -96,6 +97,25 @@ type Props = {
 }
 
 export const MainView: React.FC<Props> = (props) => {
+  useEffect(() => {
+    const handle_key_down = (e: KeyboardEvent) => {
+      if (
+        e.key == 'Escape' &&
+        !e.metaKey &&
+        !e.ctrlKey &&
+        !e.altKey &&
+        !e.shiftKey
+      ) {
+        props.on_show_home()
+      }
+    }
+
+    window.addEventListener('keydown', handle_key_down)
+    return () => {
+      window.removeEventListener('keydown', handle_key_down)
+    }
+  }, [])
+
   const is_in_code_completions_prompt_type =
     (props.mode == MODE.WEB && props.web_prompt_type == 'code-completions') ||
     (props.mode == MODE.API && props.api_prompt_type == 'code-completions')

packages/vscode/src/views/panel/frontend/Main/MainView/components/Header/Header.tsx

@@ -41,7 +41,7 @@ export const Header: React.FC<Props> = (props) => {
     mode: props.mode,
     handle_heading_click,
     on_web_prompt_type_change: props.on_web_prompt_type_change,
-    on_api_prompt_type_change: props.on_api_prompt_type_change,
+    on_api_prompt_type_change: props.on_api_prompt_type_change
   })
 
   const calculate_dropdown_max_width = () => {
@@ -77,7 +77,7 @@ export const Header: React.FC<Props> = (props) => {
         <UiIconButton
           codicon_icon="chevron-left"
           on_click={props.on_show_home}
-          title="Return"
+          title="Return (Esc)"
         />
         <button
           className={styles['header__left__toggler']}
@@ -92,35 +92,43 @@ export const Header: React.FC<Props> = (props) => {
         <div className={styles.header__right__dropdown}>
           {props.mode == MODE.WEB && (
             <UiDropdown
-              options={Object.entries(web_mode_labels).map(([value, label]) => ({
-                value: value as WebPromptType,
-                label,
-                shortcut: `${is_mac ? '⇧⌥' : 'Shift+Alt+'}${label.charAt(0)}`,
-              }))}
+              options={Object.entries(web_mode_labels).map(
+                ([value, label]) => ({
+                  value: value as WebPromptType,
+                  label,
+                  shortcut: `${is_mac ? '⇧⌥' : 'Shift+Alt+'}${label.charAt(0)}`
+                })
+              )}
               selected_value={props.web_prompt_type}
               on_change={props.on_web_prompt_type_change}
               max_width={dropdown_max_width}
               menu_max_width="calc(100vw - 52px)"
               info={is_narrow_viewport ? undefined : 'prompt type'}
               title={
-                is_mac ? 'Change prompt type (⇧⌥)' : 'Change prompt type (Shift+Alt)'
+                is_mac
+                  ? 'Change prompt type (⇧⌥)'
+                  : 'Change prompt type (Shift+Alt)'
               }
             />
           )}
           {props.mode == MODE.API && (
             <UiDropdown
-              options={Object.entries(api_mode_labels).map(([value, label]) => ({
-                value: value as ApiPromptType,
-                label,
-                shortcut: `${is_mac ? '⇧⌥' : 'Shift+Alt+'}${label.charAt(0)}`,
-              }))}
+              options={Object.entries(api_mode_labels).map(
+                ([value, label]) => ({
+                  value: value as ApiPromptType,
+                  label,
+                  shortcut: `${is_mac ? '⇧⌥' : 'Shift+Alt+'}${label.charAt(0)}`
+                })
+              )}
               selected_value={props.api_prompt_type}
               on_change={props.on_api_prompt_type_change}
               max_width={dropdown_max_width}
               menu_max_width="calc(100vw - 60px)"
               info={is_narrow_viewport ? undefined : 'prompt type'}
               title={
-                is_mac ? 'Change prompt type (⇧⌥)' : 'Change prompt type (Shift+Alt)'
+                is_mac
+                  ? 'Change prompt type (⇧⌥)'
+                  : 'Change prompt type (Shift+Alt)'
               }
             />
           )}