fixup! ♿️(frontend) shortcuts table: semantic structure and kbd badge

Author: Ovgodd

src/frontend/src/features/rooms/livekit/prefabs/VideoConference.tsx

@@ -32,7 +32,7 @@ import { ScreenShareErrorModal } from '../components/ScreenShareErrorModal'
 import { useConnectionObserver } from '../hooks/useConnectionObserver'
 import { useNoiseReduction } from '../hooks/useNoiseReduction'
 import { useRegisterKeyboardShortcut } from '@/features/shortcuts/useRegisterKeyboardShortcut'
-import { settingsStore } from '@/stores/settings'
+import { useSettingsDialog } from '@/features/settings'
 import { SettingsDialogExtendedKey } from '@/features/settings/type'
 import { useVideoResolutionSubscription } from '../hooks/useVideoResolutionSubscription'
 import { SettingsDialogProvider } from '@/features/settings/components/SettingsDialogProvider'
@@ -100,6 +100,7 @@ export function VideoConference({ ...props }: VideoConferenceProps) {
   const { t: tRooms } = useTranslation('rooms')
   const room = useRoomContext()
   const announce = useScreenReaderAnnounce()
+  const { toggleSettingsDialog } = useSettingsDialog()
 
   const getAnnouncementName = useCallback(
     (participant?: Participant | null) => {
@@ -117,9 +118,8 @@ export function VideoConference({ ...props }: VideoConferenceProps) {
   useRegisterKeyboardShortcut({
     id: 'open-shortcuts',
     handler: useCallback(() => {
-      settingsStore.defaultSelectedTab = SettingsDialogExtendedKey.SHORTCUTS
-      settingsStore.areSettingsOpen = true
-    }, []),
+      toggleSettingsDialog(SettingsDialogExtendedKey.SHORTCUTS)
+    }, [toggleSettingsDialog]),
   })
 
   const tracks = useTracks(

src/frontend/src/features/settings/hook/useSettingsDialog.ts

@@ -14,7 +14,25 @@ export const useSettingsDialog = () => {
     settingsStore.areSettingsOpen = true
   }
 
+  const closeSettingsDialog = () => {
+    settingsStore.areSettingsOpen = false
+  }
+
+  const toggleSettingsDialog = (
+    defaultSelectedTab?: SettingsDialogExtendedKey
+  ) => {
+    if (areSettingsOpen) {
+      closeSettingsDialog()
+    } else {
+      if (defaultSelectedTab)
+        settingsStore.defaultSelectedTab = defaultSelectedTab
+      settingsStore.areSettingsOpen = true
+    }
+  }
+
   return {
     openSettingsDialog,
+    closeSettingsDialog,
+    toggleSettingsDialog,
   }
 }