Write the mute button once instead of twice per kind

- Both arms of the switch were the same eleven lines of click, disabled, busy
  and enabled wiring; only the component and the test id differed.
- Two copies that had to be kept in sync by hand, for nothing.
- `toggles` becomes an expression rather than a `let` mutated in a switch,
  which makes the optional chaining downstream dead.
- The labels switch stays: i18n extraction needs literal `t("…")` keys, and it
  gives exhaustiveness checking on the union.

src/components/MediaMuteAndSwitchButton.tsx

@@ -256,12 +256,11 @@ export const MediaMuteAndSwitchButton: FC<MediaMuteAndSwitchButtonProps> = ({
     if (menuOpen) devices.requestDeviceNames(); // No-op after the first call
   }, [menuOpen, devices]);
 
-  let button;
+  // The mute control differs between the two only in which button it is and
-  let toggles: { label: string; enabled: boolean; id: string }[] = [];
+  // what it is called; how it behaves is the same, and was worth saying once.
-  switch (iconsAndLabels) {
+  const MuteButton = iconsAndLabels === "audio" ? MicButton : VideoButton;
-    case "video":
+  const button = (
-      button = (
+    <MuteButton
-        <VideoButton
       enabled={enabled ?? false}
       busy={isBusy}
       onClick={(e) => {
@@ -270,35 +269,23 @@ export const MediaMuteAndSwitchButton: FC<MediaMuteAndSwitchButtonProps> = ({
         e.stopPropagation();
       }}
       disabled={isBusy || onMuteClick === undefined}
-          data-testid="incall_videomute"
+      data-testid={
+        iconsAndLabels === "audio" ? "incall_mute" : "incall_videomute"
+      }
     />
   );
-      if (videoBlurToggleClick !== undefined) {
+
-        toggles = [
+  // Only the camera menu carries a toggle, and only when the caller offers one.
+  const toggles =
+    iconsAndLabels === "video" && videoBlurToggleClick !== undefined
+      ? [
           {
             label: t("action.blur_background"),
             enabled: videoBlurEnabled ?? false,
             id: BLUR_ID,
           },
-        ];
+        ]
-      }
+      : [];
-      break;
-    case "audio":
-      button = (
-        <MicButton
-          enabled={enabled ?? false}
-          busy={isBusy}
-          onClick={(e) => {
-            onMuteClick?.();
-            e.preventDefault();
-            e.stopPropagation();
-          }}
-          disabled={isBusy || onMuteClick === undefined}
-          data-testid="incall_mute"
-        />
-      );
-      break;
-  }
 
   let optionsButtonLabel: string;
   let defaultMenuTitle: string;
@@ -518,15 +505,15 @@ export const MediaMuteAndSwitchButton: FC<MediaMuteAndSwitchButtonProps> = ({
             </div>
           </div>
         </div>
-        {(toggles?.length ?? 0) > 0 && <hr />}
+        {toggles.length > 0 && <hr />}
-        {toggles?.map((toggle) => (
+        {toggles.map((toggle) => (
           <ToggleMenuItem
             label={toggle.label}
             onSelect={(e) => {
               videoBlurToggleClick?.();
               e.preventDefault();
             }}
-            checked={toggle.enabled ?? false}
+            checked={toggle.enabled}
             key={toggle.id}
           />
         ))}