Factor out a layout switch view + view model

So it can easily be shown and hidden wholesale.

src/room/LayoutSwitch.tsx

@@ -0,0 +1,43 @@
+/*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE in the repository root for full details.
+*/
+
+import { type FC } from "react";
+import {
+  SpotlightViewIcon,
+  GridIcon,
+} from "@vector-im/compound-design-tokens/assets/web/icons";
+
+import { type LayoutSwitchViewModel } from "../state/LayoutSwitchViewModel";
+import { useBehavior } from "../useBehavior";
+import { useTranslation } from "react-i18next";
+import { Switch } from "@vector-im/compound-web";
+
+interface Props {
+  vm: LayoutSwitchViewModel;
+  className?: string;
+}
+
+export const LayoutSwitch: FC<Props> = ({ vm, className }) => {
+  const { t } = useTranslation();
+  const layout = useBehavior(vm.layout$);
+
+  return (
+    <Switch<"spotlight", "grid">
+      name="layout"
+      aria-label={t("layout_switch_label")}
+      leftLabel={t("layout_spotlight_label")}
+      leftValue="spotlight"
+      leftIcon={SpotlightViewIcon}
+      rightLabel={t("layout_grid_label")}
+      rightValue="grid"
+      rightIcon={GridIcon}
+      className={className}
+      value={layout}
+      onChange={vm.setLayout}
+    />
+  );
+};

src/room/__snapshots__/InCallView.test.tsx.snap

@@ -433,7 +433,7 @@ exports[`InCallView > rendering > renders 1`] = `
       >
         <input
           aria-labelledby="_r_19_"
-          name="layoutMode"
+          name="layout"
           type="radio"
           value="spotlight"
         />
@@ -454,7 +454,7 @@ exports[`InCallView > rendering > renders 1`] = `
         <input
           aria-labelledby="_r_1e_"
           checked=""
-          name="layoutMode"
+          name="layout"
           type="radio"
           value="grid"
         />