♻️(frontend) handle proper shortcut object

Created a type to properly manipulate any data related to a
shortcut. Make the code more concise.

src/frontend/src/features/rooms/livekit/components/controls/SelectToggleDevice.tsx

@@ -23,6 +23,7 @@ import {
   formatShortcutKey,
   appendShortcutLabel,
 } from '@/features/shortcuts/utils'
+import { Shortcut } from '@/features/shortcuts/types'
 
 export type ToggleSource = Exclude<
   Track.Source,
@@ -35,7 +36,7 @@ type SelectToggleDeviceConfig = {
   kind: MediaDeviceKind
   iconOn: RemixiconComponentType
   iconOff: RemixiconComponentType
-  shortcutKey?: string
+  shortcut?: Shortcut
 }
 
 type SelectToggleDeviceConfigMap = {
@@ -47,20 +48,25 @@ const selectToggleDeviceConfig: SelectToggleDeviceConfigMap = {
     kind: 'audioinput',
     iconOn: RiMicLine,
     iconOff: RiMicOffLine,
-    shortcutKey: 'd',
+    shortcut: {
+      key: 'd',
+      ctrlKey: true,
+    },
   },
   [Track.Source.Camera]: {
     kind: 'videoinput',
     iconOn: RiVideoOnLine,
     iconOff: RiVideoOffLine,
-    shortcutKey: 'e',
+    shortcut: {
+      key: 'e',
+      ctrlKey: true,
+    },
   },
 }
 
 type SelectToggleDeviceProps<T extends ToggleSource> =
   UseTrackToggleProps<T> & {
     onActiveDeviceChange: (deviceId: string) => void
-    shortcutKey?: string
     source: SelectToggleSource
   }
 
@@ -85,21 +91,19 @@ export const SelectToggleDevice = <T extends ToggleSource>({
     const label = t(enabled ? 'disable' : 'enable', {
       keyPrefix: `join.${kind}`,
     })
-    return config.shortcutKey
+    return config.shortcut ? appendShortcutLabel(label, config.shortcut) : label
-      ? appendShortcutLabel(label, config.shortcutKey, true)
+  }, [enabled, kind, config.shortcut, t])
-      : label
-  }, [enabled, kind, config.shortcutKey, t])
 
   const selectLabel = t('choose', { keyPrefix: `join.${kind}` })
   const Icon = enabled ? iconOn : iconOff
 
   useEffect(() => {
-    if (!config.shortcutKey) return
+    if (!config.shortcut) return
     keyboardShortcutsStore.shortcuts.set(
-      formatShortcutKey(config.shortcutKey, true),
+      formatShortcutKey(config.shortcut),
       () => toggle()
     )
-  }, [toggle, config.shortcutKey])
+  }, [toggle, config.shortcut])
 
   return (
     <HStack gap={0}>

src/frontend/src/features/shortcuts/types.ts

@@ -0,0 +1,4 @@
+export type Shortcut = {
+  key: string
+  ctrlKey?: boolean
+}

src/frontend/src/features/shortcuts/useKeyboardShortcuts.ts

@@ -12,10 +12,10 @@ export const useKeyboardShortcuts = () => {
     // Issues might occur. First draft.
     const onKeyDown = (e: KeyboardEvent) => {
       const { key, metaKey, ctrlKey } = e
-      const shortcutKey = formatShortcutKey(
+      const shortcutKey = formatShortcutKey({
         key,
-        ctrlKey || (isMacintosh() && metaKey)
+        ctrlKey: ctrlKey || (isMacintosh() && metaKey),
-      )
+      })
       const shortcut = shortcutsSnap.shortcuts.get(shortcutKey)
       if (!shortcut) return
       e.preventDefault()

src/frontend/src/features/shortcuts/utils.ts

@@ -1,20 +1,17 @@
 import { isMacintosh } from '@/utils/livekit'
+import { Shortcut } from '@/features/shortcuts/types'
 
 export const CTRL = 'ctrl'
 
-export const formatShortcutKey = (key: string, ctrlKey?: boolean) => {
+export const formatShortcutKey = (shortcut: Shortcut) => {
-  if (ctrlKey) return `${CTRL}+${key.toUpperCase()}`
+  if (shortcut.ctrlKey) return `${CTRL}+${shortcut.key.toUpperCase()}`
-  return key.toUpperCase()
+  return shortcut.key.toUpperCase()
 }
 
-export const appendShortcutLabel = (
+export const appendShortcutLabel = (label: string, shortcut: Shortcut) => {
-  label: string,
+  if (!shortcut.key) return
-  key: string,
+  let formattedKeyLabel = shortcut.key.toLowerCase()
-  ctrlKey?: boolean
+  if (shortcut.ctrlKey) {
-) => {
-  if (!key) return
-  let formattedKeyLabel = key.toLowerCase()
-  if (ctrlKey) {
     formattedKeyLabel = `${isMacintosh() ? '⌘' : 'Ctrl'}+${formattedKeyLabel}`
   }
   return `${label} (${formattedKeyLabel})`