From fcc2f51b85bd1a8d338f6c02c8cfd8437a83df09 Mon Sep 17 00:00:00 2001
From: lebaudantoine <lebaud.antoine131@gmail.com>
Date: Wed, 15 Jul 2026 00:13:14 +0200
Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F(frontend)=20drop=20useSettin?=
 =?UTF-8?q?gsDialogs=20hook?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The useSettingsDialogs hook only encapsulated Valtio store
manipulation that should be declared at the module level. Keeping it
as a hook triggered unnecessary re-renders in components that used
it, subscribing to the store.

Remove the hook and use the store actions directly at the module
level.
---
 .../components/TranscriptSidePanel.tsx        |  4 +-
 .../components/IsIdleDisconnectModal.tsx      |  3 +-
 .../controls/Device/SettingsButton.tsx        |  3 +-
 .../controls/Options/SettingsMenuItem.tsx     |  3 +-
 .../prefabs/ControlBar/MobileControlBar.tsx   |  3 +-
 .../components/SettingsDialogProvider.tsx     |  7 +---
 .../settings/hook/useSettingsDialog.ts        | 38 -------------------
 src/frontend/src/features/settings/index.ts   |  1 -
 src/frontend/src/stores/settings.ts           | 22 +++++++++++
 9 files changed, 29 insertions(+), 55 deletions(-)
 delete mode 100644 src/frontend/src/features/settings/hook/useSettingsDialog.ts

diff --git a/src/frontend/src/features/recording/components/TranscriptSidePanel.tsx b/src/frontend/src/features/recording/components/TranscriptSidePanel.tsx
index 64d24bc7..c748f09d 100644
--- a/src/frontend/src/features/recording/components/TranscriptSidePanel.tsx
+++ b/src/frontend/src/features/recording/components/TranscriptSidePanel.tsx
@@ -23,7 +23,6 @@ import { VStack } from '@/styled-system/jsx'
 import { Checkbox } from '@/primitives/Checkbox.tsx'
 
 import {
-  useSettingsDialog,
   SettingsDialogExtendedKey,
   useTranscriptionLanguage,
 } from '@/features/settings'
@@ -35,6 +34,7 @@ import { useIsMetadataCollectorEnabled } from '../hooks/useMetadataCollectorEnab
 import { useSidePanel } from '@/features/rooms/livekit/hooks/useSidePanel'
 import { useIsAdminOrOwner } from '@/features/rooms/livekit/hooks/useIsAdminOrOwner'
 import { LimitDescription } from './LimitDescription'
+import { openSettingsDialog } from '@/stores/settings'
 
 export const TranscriptSidePanel = () => {
   const { data } = useConfig()
@@ -48,8 +48,6 @@ export const TranscriptSidePanel = () => {
   const { selectedLanguageKey, selectedLanguageLabel, isLanguageSetToAuto } =
     useTranscriptionLanguage()
 
-  const { openSettingsDialog } = useSettingsDialog()
-
   const hasTranscriptAccess = useHasRecordingAccess(
     RecordingMode.Transcript,
     FeatureFlags.Transcript
diff --git a/src/frontend/src/features/rooms/livekit/components/IsIdleDisconnectModal.tsx b/src/frontend/src/features/rooms/livekit/components/IsIdleDisconnectModal.tsx
index 707a38fb..259e8f31 100644
--- a/src/frontend/src/features/rooms/livekit/components/IsIdleDisconnectModal.tsx
+++ b/src/frontend/src/features/rooms/livekit/components/IsIdleDisconnectModal.tsx
@@ -7,9 +7,9 @@ import { HStack } from '@/styled-system/jsx'
 import { useEffect, useRef, useState } from 'react'
 import { navigateTo } from '@/navigation/navigateTo'
 import { useScreenReaderAnnounce } from '@/hooks/useScreenReaderAnnounce'
-import { useSettingsDialog } from '@/features/settings/hook/useSettingsDialog'
 import { SettingsDialogExtendedKey } from '@/features/settings/type'
 import { useHumanizeDuration } from '@/hooks/useHumanizeDuration'
+import { openSettingsDialog } from '@/stores/settings'
 
 const IDLE_DISCONNECT_TIMEOUT_MS = 120000 // 2 minutes
 const COUNTDOWN_ANNOUNCEMENT_SECONDS = new Set([90, 60, 30])
@@ -94,7 +94,6 @@ const Description = () => {
 
 const Settings = () => {
   const { t } = useTranslation('rooms', { keyPrefix: 'isIdleDisconnectModal' })
-  const { openSettingsDialog } = useSettingsDialog()
   return (
     <P>
       {t('settingsPrefix')}{' '}
diff --git a/src/frontend/src/features/rooms/livekit/components/controls/Device/SettingsButton.tsx b/src/frontend/src/features/rooms/livekit/components/controls/Device/SettingsButton.tsx
index 7998d709..074e53e6 100644
--- a/src/frontend/src/features/rooms/livekit/components/controls/Device/SettingsButton.tsx
+++ b/src/frontend/src/features/rooms/livekit/components/controls/Device/SettingsButton.tsx
@@ -2,7 +2,7 @@ import { Button } from '@/primitives'
 import { RiSettings3Line } from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
 import { SettingsDialogExtendedKey } from '@/features/settings/type'
-import { useSettingsDialog } from '@/features/settings/hook/useSettingsDialog'
+import { openSettingsDialog } from '@/stores/settings'
 
 export const SettingsButton = ({
   settingTab,
@@ -12,7 +12,6 @@ export const SettingsButton = ({
   onPress?: () => void
 }) => {
   const { t } = useTranslation('rooms', { keyPrefix: 'selectDevice' })
-  const { openSettingsDialog } = useSettingsDialog()
 
   return (
     <Button
diff --git a/src/frontend/src/features/rooms/livekit/components/controls/Options/SettingsMenuItem.tsx b/src/frontend/src/features/rooms/livekit/components/controls/Options/SettingsMenuItem.tsx
index 41e44d64..6e038104 100644
--- a/src/frontend/src/features/rooms/livekit/components/controls/Options/SettingsMenuItem.tsx
+++ b/src/frontend/src/features/rooms/livekit/components/controls/Options/SettingsMenuItem.tsx
@@ -2,11 +2,10 @@ import { RiSettings3Line } from '@remixicon/react'
 import { MenuItem } from 'react-aria-components'
 import { useTranslation } from 'react-i18next'
 import { menuRecipe } from '@/primitives/menuRecipe'
-import { useSettingsDialog } from '@/features/settings/hook/useSettingsDialog'
+import { openSettingsDialog } from '@/stores/settings'
 
 export const SettingsMenuItem = () => {
   const { t } = useTranslation('rooms', { keyPrefix: 'options.items' })
-  const { openSettingsDialog } = useSettingsDialog()
 
   return (
     <MenuItem
diff --git a/src/frontend/src/features/rooms/livekit/prefabs/ControlBar/MobileControlBar.tsx b/src/frontend/src/features/rooms/livekit/prefabs/ControlBar/MobileControlBar.tsx
index 4581480d..663a2039 100644
--- a/src/frontend/src/features/rooms/livekit/prefabs/ControlBar/MobileControlBar.tsx
+++ b/src/frontend/src/features/rooms/livekit/prefabs/ControlBar/MobileControlBar.tsx
@@ -24,7 +24,7 @@ import { CameraSwitchButton } from '../../components/controls/CameraSwitchButton
 import { useConfig } from '@/api/useConfig'
 import { AudioDevicesControl } from '../../components/controls/Device/AudioDevicesControl'
 import { VideoDeviceControl } from '../../components/controls/Device/VideoDeviceControl'
-import { useSettingsDialog } from '@/features/settings/hook/useSettingsDialog'
+import { openSettingsDialog } from '@/stores/settings'
 import { ControlBarRegion } from '@/features/layout/components/ControlBarRegion'
 import { ReactionsToggle } from '@/features/reactions/components/ReactionsToggle'
 
@@ -35,7 +35,6 @@ export function MobileControlBar({
   const [isMenuOpened, setIsMenuOpened] = React.useState(false)
   const browserSupportsScreenSharing = supportsScreenSharing()
   const { toggleEffects } = useSidePanel()
-  const { openSettingsDialog } = useSettingsDialog()
 
   const { data } = useConfig()
 
diff --git a/src/frontend/src/features/settings/components/SettingsDialogProvider.tsx b/src/frontend/src/features/settings/components/SettingsDialogProvider.tsx
index 9b9a8769..275d7c05 100644
--- a/src/frontend/src/features/settings/components/SettingsDialogProvider.tsx
+++ b/src/frontend/src/features/settings/components/SettingsDialogProvider.tsx
@@ -1,9 +1,8 @@
 import { SettingsDialogExtended } from './SettingsDialogExtended'
 import { useSnapshot } from 'valtio'
-import { settingsStore } from '@/stores/settings'
+import { settingsStore, toggleSettingsDialog } from '@/stores/settings'
 import {
   SettingsDialogExtendedKey,
-  useSettingsDialog,
 } from '@/features/settings'
 import { useRegisterKeyboardShortcut } from '@/features/shortcuts/useRegisterKeyboardShortcut'
 import { useCallback } from 'react'
@@ -11,13 +10,11 @@ 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 (
diff --git a/src/frontend/src/features/settings/hook/useSettingsDialog.ts b/src/frontend/src/features/settings/hook/useSettingsDialog.ts
deleted file mode 100644
index a5094839..00000000
--- a/src/frontend/src/features/settings/hook/useSettingsDialog.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-import { useSnapshot } from 'valtio'
-import { settingsStore } from '@/stores/settings'
-import type { SettingsDialogExtendedKey } from '@/features/settings/type'
-
-export const useSettingsDialog = () => {
-  const { areSettingsOpen } = useSnapshot(settingsStore)
-
-  const openSettingsDialog = (
-    defaultSelectedTab?: SettingsDialogExtendedKey
-  ) => {
-    if (areSettingsOpen) return
-    if (defaultSelectedTab)
-      settingsStore.defaultSelectedTab = defaultSelectedTab
-    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,
-  }
-}
diff --git a/src/frontend/src/features/settings/index.ts b/src/frontend/src/features/settings/index.ts
index 6a293ea3..1852280b 100644
--- a/src/frontend/src/features/settings/index.ts
+++ b/src/frontend/src/features/settings/index.ts
@@ -2,6 +2,5 @@ export { SettingsButton } from './components/SettingsButton'
 export { SettingsDialog } from './components/SettingsDialog'
 
 export { useTranscriptionLanguage } from './hook/useTranscriptionLanguage'
-export { useSettingsDialog } from './hook/useSettingsDialog'
 
 export { SettingsDialogExtendedKey } from './type.ts'
diff --git a/src/frontend/src/stores/settings.ts b/src/frontend/src/stores/settings.ts
index fe8c9c1d..d3c8d403 100644
--- a/src/frontend/src/stores/settings.ts
+++ b/src/frontend/src/stores/settings.ts
@@ -10,3 +10,25 @@ export const settingsStore = proxy<State>({
   areSettingsOpen: false,
   defaultSelectedTab: undefined,
 })
+
+export const openSettingsDialog = (
+  defaultSelectedTab?: SettingsDialogExtendedKey
+) => {
+  if (settingsStore.areSettingsOpen) return
+  if (defaultSelectedTab) settingsStore.defaultSelectedTab = defaultSelectedTab
+  settingsStore.areSettingsOpen = true
+}
+
+export const closeSettingsDialog = () => {
+  settingsStore.areSettingsOpen = false
+}
+
+export const toggleSettingsDialog = (
+  defaultSelectedTab?: SettingsDialogExtendedKey
+) => {
+  if (settingsStore.areSettingsOpen) {
+    closeSettingsDialog()
+  } else {
+    openSettingsDialog(defaultSelectedTab)
+  }
+}