Update mode toggle shortcut to Alt+Esc and add a visual indicator

- ctrl+esc/cmd+esc should be replaced with alt/option+esc. make sure prompt field properly ignore this shortcut and don't de-focus when focused.
- in `apps/editor/src/views/panel/frontend/Main/MainView/components/Header/Header.tsx`, over the [Fragment], show red rectangle with text 'esc' when alt/option is pressed.
- the 'esc' should be shown positioned absolutely on top of the toggler
- when alt is pressed, keep showing the mode

Author: robertpiosik

apps/editor/src/views/panel/frontend/Main/MainView/components/Header/Header.module.scss

@@ -28,6 +28,7 @@
       line-height: 1;
       white-space: nowrap;
       letter-spacing: 1px;
+      position: relative;
 
       &:focus {
         outline: none;
@@ -36,6 +37,21 @@
       &:hover {
         background-color: var(--vscode-toolbar-hoverBackground);
       }
+
+      &__esc {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        background-color: var(--vscode-sideBar-background);
+        color: var(--vscode-foreground);
+        border: 1px solid var(--cwc-border-color-dimmed);
+        padding: 2px 4px 3px 4px;
+        border-radius: 4px;
+        font-size: 11px;
+        font-family: var(--vscode-font-family);
+        letter-spacing: normal;
+      }
     }
   }
 

apps/editor/src/views/panel/frontend/Main/MainView/components/Header/Header.tsx

@@ -42,7 +42,7 @@ export const Header: React.FC<Props> = (props) => {
     }
   }, [props.mode, props.on_mode_change])
 
-  use_keyboard_shortcuts({
+  const { is_alt_pressed } = use_keyboard_shortcuts({
     mode: props.mode,
     handle_heading_click,
     on_web_prompt_type_change: props.on_web_prompt_type_change,
@@ -62,9 +62,12 @@ export const Header: React.FC<Props> = (props) => {
         <button
           className={styles['header__left__toggler']}
           onClick={handle_heading_click}
-          title={`Change mode (${is_mac ? '⌘Esc' : 'Ctrl+Esc'})`}
+          title={`Change mode (${is_mac ? '⌥Esc' : 'Alt+Esc'})`}
         >
-          {props.mode == MODE.WEB ? MODE.WEB : MODE.API}
+          <span>
+            {props.mode == MODE.WEB ? MODE.WEB : MODE.API}
+          </span>
+          {is_alt_pressed && <span className={styles['header__left__toggler__esc']}>esc</span>}
         </button>
       </div>
 

apps/editor/src/views/panel/frontend/Main/MainView/components/Header/hooks/use-keyboard-shortcuts.ts

@@ -1,4 +1,4 @@
-import { useEffect } from 'react'
+import { useEffect, useState } from 'react'
 import { use_is_mac } from '@shared/hooks'
 import { MODE, Mode } from '@/views/panel/types/main-view-mode'
 import { ApiPromptType, WebPromptType } from '@shared/types/prompt-types'
@@ -25,9 +25,12 @@ export const use_keyboard_shortcuts = ({
   is_disabled
 }: UseKeyboardShortcutsParams) => {
   const is_mac = use_is_mac()
+  const [is_alt_pressed, set_is_alt_pressed] = useState(false)
 
   useEffect(() => {
     const handle_key_down = (event: KeyboardEvent) => {
+      if (event.key == 'Alt') set_is_alt_pressed(true)
+
       if (is_disabled) return
 
       if (
@@ -40,13 +43,24 @@ export const use_keyboard_shortcuts = ({
         on_show_home()
       } else if (
         event.key == 'Escape' &&
-        ((is_mac && event.metaKey) || (!is_mac && event.ctrlKey))
+        event.altKey &&
+        !event.metaKey &&
+        !event.ctrlKey &&
+        !event.shiftKey
       ) {
         event.preventDefault()
         handle_heading_click()
       }
     }
 
+    const handle_key_up = (event: KeyboardEvent) => {
+      if (event.key == 'Alt') set_is_alt_pressed(false)
+    }
+
+    const handle_blur = () => {
+      set_is_alt_pressed(false)
+    }
+
     const handle_mouse_up = (event: MouseEvent) => {
       if (is_disabled) return
 
@@ -56,10 +70,14 @@ export const use_keyboard_shortcuts = ({
     }
 
     window.addEventListener('keydown', handle_key_down)
+    window.addEventListener('keyup', handle_key_up)
+    window.addEventListener('blur', handle_blur)
     window.addEventListener('mouseup', handle_mouse_up)
 
     return () => {
       window.removeEventListener('keydown', handle_key_down)
+      window.removeEventListener('keyup', handle_key_up)
+      window.removeEventListener('blur', handle_blur)
       window.removeEventListener('mouseup', handle_mouse_up)
     }
   }, [is_disabled, on_show_home, is_mac, handle_heading_click])
@@ -103,4 +121,6 @@ export const use_keyboard_shortcuts = ({
       window.removeEventListener('keydown', handle_key_down)
     }
   }, [mode, on_web_prompt_type_change, on_api_prompt_type_change, is_disabled])
+
+  return { is_alt_pressed }
 }

packages/ui/src/components/editor/panel/prompts/PromptField/hooks/use-handlers/handle-key-down.ts

@@ -508,6 +508,7 @@ export const create_handle_key_down = (
     }
 
     if (key == 'Escape') {
+      if (e.altKey) return
       handle_escape_key()
       return
     }

packages/ui/src/components/editor/panel/prompts/PromptField/hooks/use-keyboard-shortcuts.ts

@@ -112,7 +112,7 @@ export const use_keyboard_shortcuts = (
   const handle_container_key_down = (
     e: React.KeyboardEvent<HTMLDivElement>
   ) => {
-    if (e.key == 'Escape' && !e.ctrlKey && !e.metaKey) {
+    if (e.key == 'Escape' && !e.ctrlKey && !e.metaKey && !e.altKey) {
       if (props.is_recording) {
         props.on_recording_finished()
       }