Extract alt pressed tracking into shared use-alt-pressed hook and reuse it across keyboard shortcut handlers

- when using a keyboard shortcut, keycaps should hide immediately when they take effect, e.g. cmd+2 change 'target' but keycaps are hidden only after releasing the shortcut
- simplify hiding keycaps by hiding them whenever two keys are pressed
- alt triggers our keycaps, it's great. what's not gret is that when a complete shortcut is pressed e.g. alt+X, and X released, the keycap re-appears because 'alt' is pressed. it's unexpected, alt should be required to be pressed again to trigger re-apparance of keycaps.
- extract shared logic from 'use keyboard shortcuts' to `apps/editor/src/views/prompt/frontend/hooks`
- once alt+x is ussed, keycap doesn't dissapear
- once keycaps outside of the prompt field are used e.g. alt+x, keycaps from the prompt field doesn't dissapear until next alt press but should.

├── apps
│   └── editor
│       └── src
│           └── views
│               └── prompt
│                   └── frontend
│                       ├── Home
│                       │   ├── Home.tsx
│                       │   └── hooks
│                       │       └── use-keyboard-shortcuts.ts
│                       ├── Main
│                       │   └── MainView
│                       │       ├── MainView.tsx
│                       │       ├── components
│                       │       │   ├── Header
│                       │       │   │   └── Header.tsx
│                       │       │   └── PromptAttachments
│                       │       │       └── PromptAttachments.tsx
│                       │       └── hooks
│                       │           └── use-keyboard-shortcuts.ts
│                       └── hooks
│                           ├── use-alt-pressed.ts
│                           ├── use-is-landscape.ts
│                           └── use-modal-manager.ts
└── packages
    └── ui
        └── src
            └── components
                └── editor
                    ├── common
                    │   └── prompts
                    │       └── PromptField
                    │           ├── PromptField.tsx
                    │           ├── components
                    │           │   └── Footer
                    │           │       ├── Footer.module.scss
                    │           │       └── Footer.tsx
                    │           └── hooks
                    │               └── use-keyboard-shortcuts.ts
                    └── prompt-view
                        ├── KeycapWrapper
                        │   ├── KeycapWrapper.module.scss
                        │   ├── KeycapWrapper.tsx
                        │   └── index.ts
                        ├── StatusBar
                        │   └── StatusBar.tsx
                        └── TargetButton
                            ├── TargetButton.module.scss
                            └── TargetButton.tsx

Author: robertpiosik

apps/editor/src/views/prompt/frontend/Home/hooks/use-keyboard-shortcuts.ts

@@ -1,50 +1,23 @@
-import { useEffect, useState, useRef } from 'react'
+import { useEffect } from 'react'
+import { use_alt_pressed } from '@/views/prompt/frontend/hooks/use-alt-pressed'
 
 export const use_keyboard_shortcuts = (params: {
   is_active: boolean
   on_chatbots_click: () => void
   on_api_calls_click: () => void
   on_cli_calls_click: () => void
 }) => {
-  const [is_alt_pressed, set_is_alt_pressed] = useState(false)
-  const alt_interrupted_ref = useRef(false)
-  const left_alt_pressed_ref = useRef(false)
-
-  const update_alt_pressed = (val: boolean) => {
-    set_is_alt_pressed(val)
-  }
+  const { is_alt_pressed, pressed_keys_ref } = use_alt_pressed({
+    is_active: params.is_active
+  })
 
   useEffect(() => {
-    if (!params.is_active) {
-      update_alt_pressed(false)
-      return
-    }
+    if (!params.is_active) return
 
     const handle_key_down = (event: KeyboardEvent) => {
-      if (event.code === 'AltLeft') {
-        left_alt_pressed_ref.current = true
-      }
-
-      if (
-        event.code === 'AltLeft' &&
-        !event.shiftKey &&
-        !event.ctrlKey &&
-        !event.metaKey
-      ) {
-        if (!alt_interrupted_ref.current) {
-          update_alt_pressed(true)
-        }
-      } else {
-        if (event.altKey) {
-          alt_interrupted_ref.current = true
-        }
-
-        update_alt_pressed(false)
-      }
-
       if (
         event.altKey &&
-        left_alt_pressed_ref.current &&
+        pressed_keys_ref.current.has('AltLeft') &&
         !event.shiftKey &&
         !event.metaKey &&
         !event.ctrlKey
@@ -62,41 +35,9 @@ export const use_keyboard_shortcuts = (params: {
       }
     }
 
-    const handle_key_up = (event: KeyboardEvent) => {
-      if (event.code === 'AltLeft') {
-        left_alt_pressed_ref.current = false
-      }
-
-      if (!event.altKey) {
-        alt_interrupted_ref.current = false
-      } else if (event.code !== 'AltLeft') {
-        alt_interrupted_ref.current = true
-      }
-      update_alt_pressed(
-        event.altKey &&
-          left_alt_pressed_ref.current &&
-          !alt_interrupted_ref.current &&
-          !event.shiftKey &&
-          !event.ctrlKey &&
-          !event.metaKey
-      )
-    }
-
-    const handle_blur = () => {
-      left_alt_pressed_ref.current = false
-      update_alt_pressed(false)
-      alt_interrupted_ref.current = false
-    }
-
     window.addEventListener('keydown', handle_key_down)
-    window.addEventListener('keyup', handle_key_up)
-    window.addEventListener('blur', handle_blur)
 
-    return () => {
-      window.removeEventListener('keydown', handle_key_down)
-      window.removeEventListener('keyup', handle_key_up)
-      window.removeEventListener('blur', handle_blur)
-    }
+    return () => window.removeEventListener('keydown', handle_key_down)
   }, [
     params.is_active,
     params.on_chatbots_click,

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

@@ -1,4 +1,5 @@
-import { useEffect, useState, useRef } from 'react'
+import { useEffect } from 'react'
+import { use_alt_pressed } from '@/views/prompt/frontend/hooks/use-alt-pressed'
 import { Target } from '@shared/types/target'
 import {
   ApiPromptType,
@@ -15,39 +16,10 @@ export const use_keyboard_shortcuts = (params: {
   on_agentic_search?: () => void
   is_disabled: boolean
 }) => {
-  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 left_alt_pressed_ref = useRef(false)
-
-  const update_alt_pressed = (val: boolean) => {
-    is_alt_pressed_raw_ref.current = val
-    set_is_alt_pressed(val)
-  }
+  const { is_alt_pressed, pressed_keys_ref } = use_alt_pressed()
 
   useEffect(() => {
     const handle_key_down = (event: KeyboardEvent) => {
-      if (event.code === 'AltLeft') {
-        left_alt_pressed_ref.current = true
-      }
-
-      if (
-        event.code === 'AltLeft' &&
-        !event.shiftKey &&
-        !event.ctrlKey &&
-        !event.metaKey
-      ) {
-        if (!alt_interrupted_ref.current) {
-          update_alt_pressed(true)
-        }
-      } else {
-        if (event.altKey) {
-          alt_interrupted_ref.current = true
-        }
-
-        update_alt_pressed(false)
-      }
-
       if (params.is_disabled) return
 
       if (
@@ -61,32 +33,6 @@ export const use_keyboard_shortcuts = (params: {
       }
     }
 
-    const handle_key_up = (event: KeyboardEvent) => {
-      if (event.code === 'AltLeft') {
-        left_alt_pressed_ref.current = false
-      }
-
-      if (!event.altKey) {
-        alt_interrupted_ref.current = false
-      } else if (event.code !== 'AltLeft') {
-        alt_interrupted_ref.current = true
-      }
-      update_alt_pressed(
-        event.altKey &&
-          left_alt_pressed_ref.current &&
-          !alt_interrupted_ref.current &&
-          !event.shiftKey &&
-          !event.ctrlKey &&
-          !event.metaKey
-      )
-    }
-
-    const handle_blur = () => {
-      left_alt_pressed_ref.current = false
-      update_alt_pressed(false)
-      alt_interrupted_ref.current = false
-    }
-
     const handle_mouse_up = (event: MouseEvent) => {
       if (params.is_disabled) return
 
@@ -96,14 +42,10 @@ export const use_keyboard_shortcuts = (params: {
     }
 
     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)
     }
   }, [params.is_disabled, params.on_show_home])
@@ -114,7 +56,7 @@ export const use_keyboard_shortcuts = (params: {
 
       if (
         !event.altKey ||
-        !left_alt_pressed_ref.current ||
+        !pressed_keys_ref.current.has('AltLeft') ||
         event.shiftKey ||
         event.metaKey ||
         event.ctrlKey

apps/editor/src/views/prompt/frontend/hooks/use-alt-pressed.ts

@@ -0,0 +1,60 @@
+import { useEffect, useRef, useState } from 'react'
+
+export const use_alt_pressed = (params?: { is_active?: boolean }) => {
+  const is_active = params?.is_active ?? true
+  const [is_alt_pressed, set_is_alt_pressed] = useState(false)
+  const pressed_keys_ref = useRef(new Set<string>())
+  const is_alt_consumed_ref = useRef(false)
+
+  useEffect(() => {
+    if (!is_active) {
+      set_is_alt_pressed(false)
+      return
+    }
+
+    const handle_key_down = (event: KeyboardEvent) => {
+      pressed_keys_ref.current.add(event.code)
+
+      if (pressed_keys_ref.current.size > 1) {
+        is_alt_consumed_ref.current = true
+        set_is_alt_pressed(false)
+      } else if (event.code === 'AltLeft') {
+        is_alt_consumed_ref.current = false
+        set_is_alt_pressed(true)
+      }
+    }
+
+    const handle_key_up = (event: KeyboardEvent) => {
+      pressed_keys_ref.current.delete(event.code)
+      if (event.code === 'AltLeft') {
+        is_alt_consumed_ref.current = false
+      }
+
+      if (pressed_keys_ref.current.size > 1 || is_alt_consumed_ref.current) {
+        set_is_alt_pressed(false)
+      } else if (pressed_keys_ref.current.has('AltLeft')) {
+        set_is_alt_pressed(true)
+      } else {
+        set_is_alt_pressed(false)
+      }
+    }
+
+    const handle_blur = () => {
+      pressed_keys_ref.current.clear()
+      is_alt_consumed_ref.current = false
+      set_is_alt_pressed(false)
+    }
+
+    window.addEventListener('keydown', handle_key_down, true)
+    window.addEventListener('keyup', handle_key_up, true)
+    window.addEventListener('blur', handle_blur)
+
+    return () => {
+      window.removeEventListener('keydown', handle_key_down, true)
+      window.removeEventListener('keyup', handle_key_up, true)
+      window.removeEventListener('blur', handle_blur)
+    }
+  }, [is_active])
+
+  return { is_alt_pressed, pressed_keys_ref }
+}