use previous device selection logic

locales/en/app.json

@@ -204,7 +204,6 @@
       "change_device_button": "Change audio device",
       "default": "Default",
       "default_named": "Default <2>({{name}})</2>",
-      "default_numbered": "Default {{n}}",
       "handset": "Handset",
       "loudspeaker": "Loudspeaker",
       "microphone": "Microphone",

src/components/MediaMuteAndSwitchButton.tsx

@@ -114,14 +114,19 @@ export const MediaMuteAndSwitchButton: FC<MediaMuteAndSwitchButtonProps> = ({
 
   let IconOptions: ComponentType<React.SVGAttributes<SVGElement>> | undefined;
   let optionsButtonLabel: string;
+  let numberedLabel: (number: number) => string;
   switch (iconsAndLabels) {
     case "video":
       IconOptions = VideoCallIcon;
       optionsButtonLabel = t("settings.devices.camera");
+      numberedLabel = (n): string =>
+        t("settings.devices.microphone_numbered", { n });
       break;
     case "audio":
       IconOptions = MicOnIcon;
       optionsButtonLabel = t("settings.devices.microphone");
+      numberedLabel = (n): string =>
+        t("settings.devices.camera_numbered", { n });
       break;
   }
   return (
@@ -154,16 +159,15 @@ export const MediaMuteAndSwitchButton: FC<MediaMuteAndSwitchButtonProps> = ({
         }
       >
         {options?.map(({ label, id }) => {
-          const labelText = ((): string => {
-            switch (label.type) {
-              case "name":
-                return label.name;
-              case "number":
-                return t("settings.devices.default_numbered", {
-                  n: label.number,
-                });
-            }
-          })();
+          let labelText: string;
+          switch (label.type) {
+            case "name":
+              labelText = label.name;
+              break;
+            case "number":
+              labelText = numberedLabel(label.number);
+              break;
+          }
           return (
             <MenuItem
               hideChevron

src/settings/DeviceSelection.tsx

@@ -5,7 +5,14 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 
-import { type ChangeEvent, type FC, useCallback, useId } from "react";
+import {
+  type ChangeEvent,
+  type FC,
+  type ReactElement,
+  type ReactNode,
+  useCallback,
+  useId,
+} from "react";
 import {
   Heading,
   InlineField,
@@ -13,8 +20,8 @@ import {
   RadioControl,
   Separator,
 } from "@vector-im/compound-web";
+import { Trans, useTranslation } from "react-i18next";
 import { useObservableEagerState } from "observable-hooks";
-import { useTranslation } from "react-i18next";
 
 import {
   type AudioOutputDeviceLabel,
@@ -30,11 +37,15 @@ interface Props {
   numberedLabel: (number: number) => string;
 }
 
-export const DeviceSelection: FC<Props> = ({ device, title }) => {
+export const DeviceSelection: FC<Props> = ({
+  device,
+  title,
+  numberedLabel,
+}) => {
+  const { t } = useTranslation();
   const groupId = useId();
   const available = useObservableEagerState(device.available$);
   const selectedId = useObservableEagerState(device.selected$)?.id;
-  const { t } = useTranslation();
   const onChange = useCallback(
     (e: ChangeEvent<HTMLInputElement>) => {
       device.select(e.target.value);
@@ -59,24 +70,38 @@ export const DeviceSelection: FC<Props> = ({ device, title }) => {
       <Separator className={styles.separator} />
       <div className={styles.options}>
         {[...available].map(([id, label]) => {
-          const labelText = ((): string => {
-            switch (label.type) {
-              case "name":
-                return label.name;
-              case "number":
-                return t("settings.devices.default_numbered", {
-                  n: label.number,
-                });
-              case "default":
-                return label.name === null
-                  ? t("settings.devices.default")
-                  : t("settings.devices.default_named", label.name);
-              case "speaker":
-                return t("settings.devices.loudspeaker");
-              case "earpiece":
-                return t("settings.devices.handset");
-            }
-          })();
+          let labelText: ReactNode;
+          switch (label.type) {
+            case "name":
+              labelText = label.name;
+              break;
+            case "number":
+              labelText = numberedLabel(label.number);
+              break;
+            case "default":
+              labelText =
+                label.name === null ? (
+                  t("settings.devices.default")
+                ) : (
+                  <Trans
+                    i18nKey="settings.devices.default_named"
+                    name={label.name}
+                  >
+                    Default{" "}
+                    <span className={styles.secondary}>
+                      ({{ name: label.name } as unknown as ReactElement})
+                    </span>
+                  </Trans>
+                );
+              break;
+            case "speaker":
+              labelText = t("settings.devices.loudspeaker");
+              break;
+            case "earpiece":
+              labelText = t("settings.devices.handset");
+              break;
+          }
+
           return (
             <InlineField
               key={id}