♻️(frontend) extract toggle device component

Encapsulate toggle logic in a dedicated component.
Prepare the introduction of the push to talk feature.

src/frontend/src/features/rooms/livekit/components/controls/SelectToggleDevice.tsx

@@ -5,7 +5,7 @@ import {
   UseTrackToggleProps,
 } from '@livekit/components-react'
 import { HStack } from '@/styled-system/jsx'
-import { Button, Menu, MenuList, ToggleButton } from '@/primitives'
+import { Button, Menu, MenuList } from '@/primitives'
 import {
   RemixiconComponentType,
   RiArrowDownSLine,
@@ -16,11 +16,9 @@ import {
 } from '@remixicon/react'
 import { Track } from 'livekit-client'
 
-import { useMemo } from 'react'
-
-import { appendShortcutLabel } from '@/features/shortcuts/utils'
 import { Shortcut } from '@/features/shortcuts/types'
-import { useRegisterKeyboardShortcut } from '@/features/shortcuts/useRegisterKeyboardShortcut'
+
+import { ToggleDevice } from '@/features/rooms/livekit/components/controls/ToggleDevice.tsx'
 
 export type ToggleSource = Exclude<
   Track.Source,
@@ -29,7 +27,7 @@ export type ToggleSource = Exclude<
 
 type SelectToggleSource = Exclude<ToggleSource, Track.Source.ScreenShare>
 
-type SelectToggleDeviceConfig = {
+export type SelectToggleDeviceConfig = {
   kind: MediaDeviceKind
   iconOn: RemixiconComponentType
   iconOff: RemixiconComponentType
@@ -75,40 +73,17 @@ export const SelectToggleDevice = <T extends ToggleSource>({
   if (!config) {
     throw new Error('Invalid source')
   }
-
   const { t } = useTranslation('rooms', { keyPrefix: 'join' })
-  const { toggle, enabled } = useTrackToggle(props)
+  const trackProps = useTrackToggle(props)
-
-  const { kind, iconOn, iconOff } = config
 
   const { devices, activeDeviceId, setActiveMediaDevice } =
-    useMediaDeviceSelect({ kind })
+    useMediaDeviceSelect({ kind: config.kind })
 
-  useRegisterKeyboardShortcut({ shortcut: config.shortcut, handler: toggle })
+  const selectLabel = t('choose', { keyPrefix: `join.${config.kind}` })
-
-  const toggleLabel = useMemo(() => {
-    const label = t(enabled ? 'disable' : 'enable', {
-      keyPrefix: `join.${kind}`,
-    })
-    return config.shortcut ? appendShortcutLabel(label, config.shortcut) : label
-  }, [enabled, kind, config.shortcut, t])
-
-  const selectLabel = t('choose', { keyPrefix: `join.${kind}` })
-  const Icon = enabled ? iconOn : iconOff
 
   return (
     <HStack gap={0}>
-      <ToggleButton
+      <ToggleDevice {...trackProps} config={config} />
-        isSelected={enabled}
-        variant={enabled ? undefined : 'danger'}
-        toggledStyles={false}
-        onPress={() => toggle()}
-        aria-label={toggleLabel}
-        tooltip={toggleLabel}
-        groupPosition="left"
-      >
-        <Icon />
-      </ToggleButton>
       <Menu>
         <Button
           tooltip={selectLabel}

src/frontend/src/features/rooms/livekit/components/controls/ToggleDevice.tsx

@@ -0,0 +1,47 @@
+import { ToggleButton } from '@/primitives'
+import { useRegisterKeyboardShortcut } from '@/features/shortcuts/useRegisterKeyboardShortcut'
+import { useMemo } from 'react'
+import { appendShortcutLabel } from '@/features/shortcuts/utils'
+import { useTranslation } from 'react-i18next'
+import { SelectToggleDeviceConfig } from './SelectToggleDevice'
+
+export type ToggleDeviceProps = {
+  enabled: boolean
+  toggle: () => void
+  config: SelectToggleDeviceConfig
+}
+
+export const ToggleDevice = ({
+  config,
+  enabled,
+  toggle,
+}: ToggleDeviceProps) => {
+  const { t } = useTranslation('rooms', { keyPrefix: 'join' })
+
+  const { kind, shortcut, iconOn, iconOff } = config
+
+  useRegisterKeyboardShortcut({ shortcut, handler: toggle })
+
+  const toggleLabel = useMemo(() => {
+    const label = t(enabled ? 'disable' : 'enable', {
+      keyPrefix: `join.${kind}`,
+    })
+    return shortcut ? appendShortcutLabel(label, shortcut) : label
+  }, [enabled, kind, shortcut, t])
+
+  const Icon = enabled ? iconOn : iconOff
+
+  return (
+    <ToggleButton
+      isSelected={enabled}
+      variant={enabled ? undefined : 'danger'}
+      toggledStyles={false}
+      onPress={() => toggle()}
+      aria-label={toggleLabel}
+      tooltip={toggleLabel}
+      groupPosition="left"
+    >
+      <Icon />
+    </ToggleButton>
+  )
+}