♻️(frontend) move keyboard shortcut registration to a leaf

Move the keyboard shortcut registration down into the
SettingsDialogProvider leaf component, so shortcut-related
re-renders no longer bubble up and re-render the whole
Videoconference component.

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

@@ -1,6 +1,6 @@
 import { isWeb } from '@livekit/components-core'
 import { Track } from 'livekit-client'
-import React, { useCallback, useState } from 'react'
+import React, { useState } from 'react'
 import {
   ConnectionStateToast,
   RoomAudioRenderer,
@@ -13,9 +13,6 @@ import { ScreenShareErrorModal } from '../components/ScreenShareErrorModal'
 import { ConnectionObserver } from '../components/ConnectionObserver'
 import { useRoomPageTitle } from '../hooks/useRoomPageTitle'
 import { useNoiseReduction } from '../hooks/useNoiseReduction'
-import { useRegisterKeyboardShortcut } from '@/features/shortcuts/useRegisterKeyboardShortcut'
-import { useSettingsDialog } from '@/features/settings'
-import { SettingsDialogExtendedKey } from '@/features/settings/type'
 import { useVideoResolutionSubscription } from '../hooks/useVideoResolutionSubscription'
 import { useSyncLiveKitMetadata } from '../hooks/useSyncLiveKitMetadata'
 import { SettingsDialogProvider } from '@/features/settings/components/SettingsDialogProvider'
@@ -54,19 +51,9 @@ export interface VideoConferenceProps extends React.HTMLAttributes<HTMLDivElemen
  * @public
  */
 export function VideoConference({ ...props }: VideoConferenceProps) {
-  const { toggleSettingsDialog } = useSettingsDialog()
-
   useRoomPageTitle()
   useVideoResolutionSubscription()
   useSyncLiveKitMetadata()
-
-  useRegisterKeyboardShortcut({
-    id: 'open-shortcuts',
-    handler: useCallback(() => {
-      toggleSettingsDialog(SettingsDialogExtendedKey.SHORTCUTS)
-    }, [toggleSettingsDialog]),
-  })
-
   useNoiseReduction()
 
   const { isOpen: isPictureInPictureOpen } = usePictureInPicture()

src/frontend/src/features/settings/components/SettingsDialogProvider.tsx

@@ -1,10 +1,25 @@
 import { SettingsDialogExtended } from './SettingsDialogExtended'
 import { useSnapshot } from 'valtio'
 import { settingsStore } from '@/stores/settings'
+import {
+  SettingsDialogExtendedKey,
+  useSettingsDialog,
+} from '@/features/settings'
+import { useRegisterKeyboardShortcut } from '@/features/shortcuts/useRegisterKeyboardShortcut'
+import { useCallback } from 'react'
 
 export const SettingsDialogProvider = () => {
   const { areSettingsOpen, defaultSelectedTab } = useSnapshot(settingsStore)
 
+  const { toggleSettingsDialog } = useSettingsDialog()
+
+  useRegisterKeyboardShortcut({
+    id: 'open-shortcuts',
+    handler: useCallback(() => {
+      toggleSettingsDialog(SettingsDialogExtendedKey.SHORTCUTS)
+    }, [toggleSettingsDialog]),
+  })
+
   return (
     <SettingsDialogExtended
       isOpen={areSettingsOpen}