From 80cf70388bbc2dfd9beb3efd2f59b80e24a1af4b Mon Sep 17 00:00:00 2001
From: lebaudantoine <lebaud.antoine131@gmail.com>
Date: Wed, 15 Jul 2026 00:00:46 +0200
Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F(frontend)=20move=20keyboard?=
 =?UTF-8?q?=20shortcut=20registration=20to=20a=20leaf?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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.
---
 .../rooms/livekit/prefabs/VideoConference.tsx     | 15 +--------------
 .../components/SettingsDialogProvider.tsx         | 15 +++++++++++++++
 2 files changed, 16 insertions(+), 14 deletions(-)

diff --git a/src/frontend/src/features/rooms/livekit/prefabs/VideoConference.tsx b/src/frontend/src/features/rooms/livekit/prefabs/VideoConference.tsx
index c0ca4420..954f0857 100644
--- a/src/frontend/src/features/rooms/livekit/prefabs/VideoConference.tsx
+++ b/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()
diff --git a/src/frontend/src/features/settings/components/SettingsDialogProvider.tsx b/src/frontend/src/features/settings/components/SettingsDialogProvider.tsx
index e034d305..9b9a8769 100644
--- a/src/frontend/src/features/settings/components/SettingsDialogProvider.tsx
+++ b/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}