♻️(frontend) drop useSettingsDialogs hook

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.

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

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')}{' '}

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

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

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()
 

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 (

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

@@ -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,
-  }
-}

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'

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)
+  }
+}