🐛(frontend) disable device shortcuts when permissions not granted

Fix bug where device toggling shortcuts remained active despite lacking
permissions, by disabling device-related shortcuts until permissions
are granted.

Prevents confusing user experience where shortcuts appear to work but
have no effect due to missing media permissions.

src/frontend/src/features/rooms/livekit/components/controls/Device/ToggleDevice.tsx

@@ -80,11 +80,16 @@ export const ToggleDevice = <T extends ToggleSource>({
   const cannotUseDevice = useCannotUseDevice(kind)
   const deviceShortcut = useDeviceShortcut(kind)
 
-  useRegisterKeyboardShortcut({ shortcut: deviceShortcut, handler: toggle })
+  useRegisterKeyboardShortcut({
+    shortcut: deviceShortcut,
+    handler: toggle,
+    isDisabled: cannotUseDevice,
+  })
   useLongPress({
     keyCode: kind === 'audioinput' ? 'Space' : undefined,
     onKeyDown,
     onKeyUp,
+    isDisabled: cannotUseDevice,
   })
 
   const toggleLabel = useMemo(() => {

src/frontend/src/features/shortcuts/useLongPress.ts

@@ -5,6 +5,7 @@ export type useLongPressProps = {
   onKeyDown: () => void
   onKeyUp: () => void
   longPressThreshold?: number
+  isDisabled?: boolean
 }
 
 export const useLongPress = ({
@@ -12,10 +13,18 @@ export const useLongPress = ({
   onKeyDown,
   onKeyUp,
   longPressThreshold = 300,
+  isDisabled = false,
 }: useLongPressProps) => {
   const timeoutIdRef = useRef<ReturnType<typeof setTimeout> | null>(null)
 
   useEffect(() => {
+    if (isDisabled) {
+      if (timeoutIdRef.current) {
+        clearTimeout(timeoutIdRef.current)
+        timeoutIdRef.current = null
+      }
+      return
+    }
     const handleKeyDown = (event: KeyboardEvent) => {
       if (event.code != keyCode || timeoutIdRef.current) return
       timeoutIdRef.current = setTimeout(() => {
@@ -38,8 +47,12 @@ export const useLongPress = ({
     return () => {
       window.removeEventListener('keydown', handleKeyDown)
       window.removeEventListener('keyup', handleKeyUp)
+      if (timeoutIdRef.current) {
+        clearTimeout(timeoutIdRef.current)
+        timeoutIdRef.current = null
+      }
     }
-  }, [keyCode, onKeyDown, onKeyUp, longPressThreshold])
+  }, [keyCode, onKeyDown, onKeyUp, longPressThreshold, isDisabled])
 
   return
 }

src/frontend/src/features/shortcuts/useRegisterKeyboardShortcut.ts

@@ -6,14 +6,21 @@ import { Shortcut } from '@/features/shortcuts/types'
 export type useRegisterKeyboardShortcutProps = {
   shortcut?: Shortcut
   handler: () => void
+  isDisabled?: boolean
 }
 
 export const useRegisterKeyboardShortcut = ({
   shortcut,
   handler,
+  isDisabled = false,
 }: useRegisterKeyboardShortcutProps) => {
   useEffect(() => {
     if (!shortcut) return
-    keyboardShortcutsStore.shortcuts.set(formatShortcutKey(shortcut), handler)
+    const formattedKey = formatShortcutKey(shortcut)
-  }, [handler, shortcut])
+    if (isDisabled) {
+      keyboardShortcutsStore.shortcuts.delete(formattedKey)
+    } else {
+      keyboardShortcutsStore.shortcuts.set(formattedKey, handler)
+    }
+  }, [handler, shortcut, isDisabled])
 }