Localize header tooltips and improve keyboard shortcut state handling for mode changes

- upon making action either changing mode or edit format, the hint dissapears faster in Header than in Prompt Field
- don't close after 100ms, only after state change
- add missing translations

Author: robertpiosik

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

@@ -65,12 +65,12 @@ export const Header: React.FC<Props> = (props) => {
         <UiIconButton
           codicon_icon="chevron-left"
           on_click={props.on_show_home}
-          title="Return (Esc)"
+          title={`${t('header.return')} (Esc)`}
         />
         <button
           className={styles['header__left__toggler']}
           onClick={handle_heading_click}
-          title={`Change mode (${is_mac ? '⌥Esc' : 'Alt+Esc'})`}
+          title={`${t('header.change-mode')} (${is_mac ? '⌥Esc' : 'Alt+Esc'})`}
         >
           <span>{props.mode == MODE.WEB ? MODE.WEB : MODE.API}</span>
           {is_alt_pressed && (
@@ -100,11 +100,9 @@ export const Header: React.FC<Props> = (props) => {
               }
               menu_max_height={MENU_MAX_HEIGHT}
               info={t('header.prompt-type')}
-              title={
-                is_mac
-                  ? 'Change prompt type (⇧⌥)'
-                  : 'Change prompt type (Shift+Alt)'
-              }
+              title={`${t('header.change-prompt-type')} (${
+                is_mac ? '⇧⌥' : 'Shift+Alt'
+              })`}
               match_button_width
             />
           )}
@@ -124,11 +122,9 @@ export const Header: React.FC<Props> = (props) => {
               }
               menu_max_height={MENU_MAX_HEIGHT}
               info={is_narrow_viewport ? undefined : t('header.prompt-type')}
-              title={
-                is_mac
-                  ? 'Change prompt type (⇧⌥)'
-                  : 'Change prompt type (Shift+Alt)'
-              }
+              title={`${t('header.change-prompt-type')} (${
+                is_mac ? '⇧⌥' : 'Shift+Alt'
+              })`}
               match_button_width
             />
           )}

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

@@ -18,23 +18,59 @@ export const use_keyboard_shortcuts = (params: {
   const is_mac = use_is_mac()
   const [is_alt_pressed, set_is_alt_pressed] = useState(false)
   const alt_interrupted_ref = useRef(false)
+  const is_alt_pressed_raw_ref = useRef(false)
+  const pending_mode_ref = useRef<Mode | null>(null)
+
+  const update_alt_pressed = (val: boolean) => {
+    is_alt_pressed_raw_ref.current = val
+    if (pending_mode_ref.current) {
+      if (val) set_is_alt_pressed(true)
+    } else {
+      set_is_alt_pressed(val)
+    }
+  }
+
+  useEffect(() => {
+    if (pending_mode_ref.current === params.mode) {
+      pending_mode_ref.current = null
+      set_is_alt_pressed(is_alt_pressed_raw_ref.current)
+    }
+  }, [params.mode])
 
   useEffect(() => {
     const handle_key_down = (event: KeyboardEvent) => {
+      let next_mode: Mode | undefined
+
+      if (
+        event.key == 'Escape' &&
+        event.altKey &&
+        !event.metaKey &&
+        !event.ctrlKey &&
+        !event.shiftKey
+      ) {
+        next_mode = params.mode === MODE.WEB ? MODE.API : MODE.WEB
+      }
+
       if (
         event.key == 'Alt' &&
         !event.shiftKey &&
         !event.ctrlKey &&
         !event.metaKey
       ) {
         if (!alt_interrupted_ref.current) {
-          set_is_alt_pressed(true)
+          update_alt_pressed(true)
         }
       } else {
         if (event.altKey) {
           alt_interrupted_ref.current = true
         }
-        set_is_alt_pressed(false)
+
+        if (next_mode && params.mode !== next_mode) {
+          pending_mode_ref.current = next_mode
+          update_alt_pressed(false)
+        } else {
+          update_alt_pressed(false)
+        }
       }
 
       if (params.is_disabled) return
@@ -47,13 +83,7 @@ export const use_keyboard_shortcuts = (params: {
         !event.shiftKey
       ) {
         params.on_show_home()
-      } else if (
-        event.key == 'Escape' &&
-        event.altKey &&
-        !event.metaKey &&
-        !event.ctrlKey &&
-        !event.shiftKey
-      ) {
+      } else if (next_mode) {
         event.preventDefault()
         params.handle_heading_click()
       }
@@ -65,7 +95,7 @@ export const use_keyboard_shortcuts = (params: {
       } else if (event.key != 'Alt') {
         alt_interrupted_ref.current = true
       }
-      set_is_alt_pressed(
+      update_alt_pressed(
         event.altKey &&
           !alt_interrupted_ref.current &&
           !event.shiftKey &&
@@ -75,7 +105,7 @@ export const use_keyboard_shortcuts = (params: {
     }
 
     const handle_blur = () => {
-      set_is_alt_pressed(false)
+      update_alt_pressed(false)
       alt_interrupted_ref.current = false
     }
 
@@ -102,7 +132,8 @@ export const use_keyboard_shortcuts = (params: {
     params.is_disabled,
     params.on_show_home,
     is_mac,
-    params.handle_heading_click
+    params.handle_heading_click,
+    params.mode
   ])
 
   useEffect(() => {

apps/editor/src/views/prompt/frontend/i18n/translations/header.ts

@@ -17,6 +17,60 @@ export const header = {
     hu: 'Prompt típusok',
     bg: 'Типове промптове'
   },
+  'header.return': {
+    en: 'Return',
+    pl: 'Powrót',
+    'zh-cn': '返回',
+    ja: '戻る',
+    'zh-tw': '返回',
+    de: 'Zurück',
+    es: 'Volver',
+    fr: 'Retour',
+    'pt-br': 'Retornar',
+    ru: 'Назад',
+    ko: '돌아가기',
+    it: 'Ritorno',
+    tr: 'Geri Dön',
+    cs: 'Návrat',
+    hu: 'Vissza',
+    bg: 'Връщане'
+  },
+  'header.change-mode': {
+    en: 'Change mode',
+    pl: 'Zmień tryb',
+    'zh-cn': '更改模式',
+    ja: 'モード変更',
+    'zh-tw': '更改模式',
+    de: 'Modus ändern',
+    es: 'Cambiar modo',
+    fr: 'Changer de mode',
+    'pt-br': 'Alterar modo',
+    ru: 'Изменить режим',
+    ko: '모드 변경',
+    it: 'Cambia modalità',
+    tr: 'Modu değiştir',
+    cs: 'Změnit režim',
+    hu: 'Mód megváltoztatása',
+    bg: 'Промяна на режима'
+  },
+  'header.change-prompt-type': {
+    en: 'Change prompt type',
+    pl: 'Zmień typ promptu',
+    'zh-cn': '更改提示类型',
+    ja: 'プロンプトの種類を変更',
+    'zh-tw': '更改提示類型',
+    de: 'Prompt-Typ ändern',
+    es: 'Cambiar tipo de prompt',
+    fr: 'Changer le type de prompt',
+    'pt-br': 'Alterar tipo de prompt',
+    ru: 'Изменить тип промпта',
+    ko: '프롬프트 유형 변경',
+    it: 'Cambia tipo di prompt',
+    tr: 'Prompt türünü değiştir',
+    cs: 'Změnit typ promptu',
+    hu: 'Prompt típusának megváltoztatása',
+    bg: 'Промяна на типа промпт'
+  },
   'header.buy-me-a-coffee': {
     en: 'Buy Me A Coffee',
     pl: 'Postaw autorowi kawę',

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

@@ -66,12 +66,6 @@ export const use_keyboard_shortcuts = (
         if (format && props.edit_format !== format) {
           pending_edit_format_ref.current = format
           update_alt_pressed(false)
-          setTimeout(() => {
-            if (pending_edit_format_ref.current === format) {
-              pending_edit_format_ref.current = null
-              set_is_alt_pressed(is_alt_pressed_raw_ref.current)
-            }
-          }, 100)
         } else {
           update_alt_pressed(false)
         }