🌐(frontend) refactor device i18n keys for reusability across contexts

Update localization keys for device toggling and selection to be more
generic, enabling translation sharing between join and room contexts.

Eliminates duplicate translations and creates consistent messaging for
device interactions regardless of application context.

src/frontend/src/features/rooms/livekit/components/controls/Device/AudioDevicesControl.tsx

@@ -23,7 +23,7 @@ export const AudioDevicesControl = ({
   hideMenu,
   ...props
 }: AudioDevicesControlProps) => {
-  const { t } = useTranslation('rooms', { keyPrefix: 'join' })
+  const { t } = useTranslation('rooms', { keyPrefix: 'selectDevice' })
 
   const {
     userChoices: { audioDeviceId, audioOutputDeviceId },
@@ -44,8 +44,9 @@ export const AudioDevicesControl = ({
     ...props,
   })
 
-  const cannotUseDevice = useCannotUseDevice('audioinput')
+  const kind = 'audioinput'
-  const selectLabel = t('audioinput.choose')
+  const cannotUseDevice = useCannotUseDevice(kind)
+  const selectLabel = t(`${kind}.choose`)
 
   return (
     <div
@@ -56,7 +57,7 @@ export const AudioDevicesControl = ({
     >
       <ToggleDevice
         {...trackProps}
-        kind="audioinput"
+        kind={kind}
         toggle={trackProps.toggle as () => Promise<void>}
         toggleButtonProps={{
           ...(hideMenu
@@ -95,7 +96,7 @@ export const AudioDevicesControl = ({
             >
               <SelectDevice
                 context="room"
-                kind="audioinput"
+                kind={kind}
                 id={audioDeviceId}
                 onSubmit={saveAudioInputDeviceId}
               />

src/frontend/src/features/rooms/livekit/components/controls/Device/SelectDevice.tsx

@@ -29,7 +29,7 @@ const SelectDevicePermissions = <T extends string | number>({
   onSubmit,
   ...props
 }: SelectDevicePermissionsProps<T>) => {
-  const { t } = useTranslation('rooms', { keyPrefix: 'join' })
+  const { t } = useTranslation('rooms', { keyPrefix: 'selectDevice' })
 
   const deviceIcons = useDeviceIcons(kind)
 
@@ -66,11 +66,7 @@ const SelectDevicePermissions = <T extends string | number>({
       isDisabled={items.length === 0}
       items={items}
       iconComponent={deviceIcons.select}
-      placeholder={
+      placeholder={items.length === 0 ? t('loading') : t('select')}
-        items.length === 0
-          ? t('selectDevice.loading')
-          : t('selectDevice.select')
-      }
       selectedKey={id || activeDeviceId}
       onSelectionChange={(key) => {
         onSubmit?.(key as string)
@@ -87,7 +83,7 @@ export const SelectDevice = ({
   kind,
   context = 'join',
 }: SelectDeviceProps) => {
-  const { t } = useTranslation('rooms', { keyPrefix: 'join' })
+  const { t } = useTranslation('rooms', { keyPrefix: 'selectDevice' })
 
   const contextProps = useMemo<SelectDeviceContext>(() => {
     if (context == 'room') {
@@ -106,7 +102,7 @@ export const SelectDevice = ({
         label=""
         isDisabled={true}
         items={[]}
-        placeholder={t('selectDevice.permissionsNeeded')}
+        placeholder={t('permissionsNeeded')}
         iconComponent={deviceIcons.select}
         {...contextProps}
       />

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

@@ -43,7 +43,7 @@ export const ToggleDevice = <T extends ToggleSource>({
   context = 'room',
   ...props
 }: ToggleDeviceProps<T>) => {
-  const { t } = useTranslation('rooms', { keyPrefix: 'join' })
+  const { t } = useTranslation('rooms', { keyPrefix: 'selectDevice' })
 
   const { variant, errorVariant, toggleButtonProps } =
     useMemo<ToggleDeviceStyleProps>(() => {
@@ -89,7 +89,7 @@ export const ToggleDevice = <T extends ToggleSource>({
 
   const toggleLabel = useMemo(() => {
     const label = t(enabled ? 'disable' : 'enable', {
-      keyPrefix: `join.${kind}`,
+      keyPrefix: `selectDevice.${kind}`,
     })
     return deviceShortcut ? appendShortcutLabel(label, deviceShortcut) : label
   }, [enabled, kind, deviceShortcut, t])

src/frontend/src/features/rooms/livekit/components/controls/Device/VideoDeviceControl.tsx

@@ -24,7 +24,7 @@ export const VideoDeviceControl = ({
   hideMenu,
   ...props
 }: VideoDeviceControlProps) => {
-  const { t } = useTranslation('rooms', { keyPrefix: 'join' })
+  const { t } = useTranslation('rooms', { keyPrefix: 'selectDevice' })
 
   const { userChoices, saveVideoInputDeviceId, saveVideoInputEnabled } =
     usePersistentUserChoices()
@@ -41,7 +41,8 @@ export const VideoDeviceControl = ({
     ...props,
   })
 
-  const cannotUseDevice = useCannotUseDevice('videoinput')
+  const kind = 'videoinput'
+  const cannotUseDevice = useCannotUseDevice(kind)
 
   const toggle = () => {
     /**
@@ -70,7 +71,7 @@ export const VideoDeviceControl = ({
     } as VideoCaptureOptions)
   }
 
-  const selectLabel = t('videoinput.choose')
+  const selectLabel = t(`${kind}.choose`)
 
   return (
     <div
@@ -81,7 +82,7 @@ export const VideoDeviceControl = ({
     >
       <ToggleDevice
         {...trackProps}
-        kind="videoinput"
+        kind={kind}
         toggle={toggle}
         toggleButtonProps={{
           ...(hideMenu
@@ -120,7 +121,7 @@ export const VideoDeviceControl = ({
             >
               <SelectDevice
                 context="room"
-                kind="videoinput"
+                kind={kind}
                 id={userChoices.videoDeviceId}
                 onSubmit={saveVideoInputDeviceId}
               />

src/frontend/src/locales/de/rooms.json

@@ -7,12 +7,10 @@
     "home": "Zur Startseite zurückkehren",
     "back": "Dem Meeting erneut beitreten"
   },
-  "join": {
+  "selectDevice": {
-    "selectDevice": {
+    "loading": "Laden…",
-      "loading": "Laden…",
+    "select": "Wählen Sie einen Wert",
-      "select": "Wählen Sie einen Wert",
+    "permissionsNeeded": "Genehmigung erforderlich",
-      "permissionsNeeded": "Genehmigung erforderlich"
-    },
     "videoinput": {
       "choose": "Kamera auswählen",
       "permissionsNeeded": "Kamera auswählen - genehmigung erforderlich",
@@ -31,7 +29,9 @@
     "audiooutput": {
       "choose": "Lautsprecher auswählen",
       "permissionsNeeded": "Lautsprecher auswählen - genehmigung erforderlich"
-    },
+    }
+  },
+  "join": {
     "effects": {
       "description": "Effekte anwenden",
       "title": "Effekte",

src/frontend/src/locales/en/rooms.json

@@ -7,12 +7,10 @@
     "home": "Return to home",
     "back": "Rejoin the meeting"
   },
-  "join": {
+  "selectDevice": {
-    "selectDevice": {
+    "loading": "Loading…",
-      "loading": "Loading…",
+    "select": "Select a value",
-      "select": "Select a value",
+    "permissionsNeeded": "Permission needed",
-      "permissionsNeeded": "Permission needed"
-    },
     "videoinput": {
       "choose": "Select camera",
       "permissionsNeeded": "Select camera - permission needed",
@@ -31,7 +29,9 @@
     "audiooutput": {
       "choose": "Select speaker",
       "permissionsNeeded": "Select speaker - permission needed"
-    },
+    }
+  },
+  "join": {
     "effects": {
       "description": "Apply effects",
       "title": "Effects",

src/frontend/src/locales/fr/rooms.json

@@ -7,12 +7,10 @@
     "home": "Retourner à l'accueil",
     "back": "Réintégrer la réunion"
   },
-  "join": {
+  "selectDevice": {
-    "selectDevice": {
+    "loading": "Chargement…",
-      "loading": "Chargement…",
+    "select": "Sélectionnez une valeur",
-      "select": "Sélectionnez une valeur",
+    "permissionsNeeded": "Autorisations nécessaires",
-      "permissionsNeeded": "Autorisations nécessaires"
-    },
     "videoinput": {
       "choose": "Choisir la webcam",
       "permissionsNeeded": "Choisir la webcam - autorisations nécessaires",
@@ -31,7 +29,9 @@
     "audiooutput": {
       "choose": "Choisir le haut-parleur",
       "permissionsNeeded": "Choisir le haut-parleur - autorisations nécessaires"
-    },
+    }
+  },
+  "join": {
     "heading": "Rejoindre la réunion ?",
     "effects": {
       "description": "Effets d'arrière plan",

src/frontend/src/locales/nl/rooms.json

@@ -7,12 +7,10 @@
     "home": "Keer terug naar het hoofdscherm",
     "back": "Sluit weer bij de vergadering aan"
   },
-  "join": {
+  "selectDevice": {
-    "selectDevice": {
+    "loading": "Bezig met laden…",
-      "loading": "Bezig met laden…",
+    "select": "Selecteer een waarde",
-      "select": "Selecteer een waarde",
+    "permissionsNeeded": "Toestemming vereist",
-      "permissionsNeeded": "Toestemming vereist"
-    },
     "videoinput": {
       "choose": "Selecteer camera",
       "permissionsNeeded": "Selecteer camera - Toestemming vereist",
@@ -31,7 +29,9 @@
     "audiooutput": {
       "choose": "Selecteer luidspreker",
       "permissionsNeeded": "Selecteer luidspreker - Toestemming vereist"
-    },
+    }
+  },
+  "join": {
     "effects": {
       "description": "Pas effecten toe",
       "title": "Effecten",