From 9a2b9a2d4040c7e78c03a95d59b76b92e6bf2957 Mon Sep 17 00:00:00 2001
From: Julius Marminge <julius0216@outlook.com>
Date: Sun, 11 Oct 2026 22:31:14 -0700
Subject: [PATCH] refactor(mobile): share themed toggle rows in settings
 (#18511)

---
 apps/mobile/src/components/ListToggleRow.tsx  | 45 ++++++++++++++++++
 .../components/SettingsControlRow.tsx         | 39 ----------------
 .../settings/components/SettingsSwitchRow.tsx | 46 ++++---------------
 3 files changed, 53 insertions(+), 77 deletions(-)
 create mode 100644 apps/mobile/src/components/ListToggleRow.tsx
 delete mode 100644 apps/mobile/src/features/settings/components/SettingsControlRow.tsx

diff --git a/apps/mobile/src/components/ListToggleRow.tsx b/apps/mobile/src/components/ListToggleRow.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..41d433b9c022a437fa0b4622bcebf4bbcb66cf77
--- /dev/null
+++ b/apps/mobile/src/components/ListToggleRow.tsx
@@ -0,0 +1,45 @@
+import { Pressable } from "react-native";
+
+import { AppText } from "./AppText";
+import { ListRowLayout, type ListRowContentProps } from "./ListRowLayout";
+import { ThemedSwitch } from "./ThemedSwitch";
+
+/** A null value means the selected environments disagree; activation sets them all on. */
+export function ListToggleRow(
+  props: Omit<ListRowContentProps, "detail"> & {
+    readonly value: boolean | null;
+    readonly onValueChange: (value: boolean) => void;
+  },
+) {
+  return (
+    <ListRowLayout
+      icon={props.icon}
+      label={props.label}
+      description={props.description}
+      disabled={props.disabled}
+      accessory={
+        props.value === null ? (
+          <Pressable
+            accessibilityLabel={`Set ${props.label} on for selected environments`}
+            accessibilityRole="button"
+            accessibilityHint={props.description}
+            accessibilityState={{ disabled: Boolean(props.disabled) }}
+            disabled={props.disabled}
+            className="rounded-full bg-subtle px-3 py-2 active:opacity-70"
+            onPress={() => props.onValueChange(true)}
+          >
+            <AppText className="text-sm font-t3-medium text-foreground">Mixed · Set on</AppText>
+          </Pressable>
+        ) : (
+          <ThemedSwitch
+            accessibilityLabel={props.label}
+            accessibilityHint={props.description}
+            disabled={props.disabled}
+            onValueChange={props.onValueChange}
+            value={props.value}
+          />
+        )
+      }
+    />
+  );
+}
diff --git a/apps/mobile/src/features/settings/components/SettingsControlRow.tsx b/apps/mobile/src/features/settings/components/SettingsControlRow.tsx
deleted file mode 100644
index 6f442af1b2fcd148bf496588a694bb997c762e94..0000000000000000000000000000000000000000
--- a/apps/mobile/src/features/settings/components/SettingsControlRow.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import type { ComponentProps, ReactNode } from "react";
-import { Platform, View } from "react-native";
-
-import { SymbolView } from "../../../components/AppSymbol";
-import { AppText as Text } from "../../../components/AppText";
-import { cn } from "../../../lib/cn";
-
-export function SettingsControlRow(props: {
-  readonly disabled?: boolean;
-  readonly icon: ComponentProps<typeof SymbolView>["name"];
-  readonly label: string;
-  readonly subtitle?: string;
-  readonly children: ReactNode;
-}) {
-  return (
-    <View
-      className={cn(
-        "flex-row items-center gap-4 p-4 android:min-h-14 android:py-3",
-        props.subtitle && "android:min-h-18",
-        props.disabled && "opacity-[0.45]",
-      )}
-    >
-      <SymbolView
-        name={props.icon}
-        size={Platform.OS === "android" ? 24 : 22}
-        tintColorClassName="accent-icon"
-        type="monochrome"
-        weight="regular"
-      />
-      <View className="min-w-0 flex-1 android:gap-1">
-        <Text className="text-lg text-foreground android:text-base">{props.label}</Text>
-        {props.subtitle ? (
-          <Text className="text-sm text-foreground-muted">{props.subtitle}</Text>
-        ) : null}
-      </View>
-      {props.children}
-    </View>
-  );
-}
diff --git a/apps/mobile/src/features/settings/components/SettingsSwitchRow.tsx b/apps/mobile/src/features/settings/components/SettingsSwitchRow.tsx
index 3fb95f5699a959c73f48476720505bc77cd9b9d9..156e5e7db3895df439ee3182636e0811c0ec58fb 100644
--- a/apps/mobile/src/features/settings/components/SettingsSwitchRow.tsx
+++ b/apps/mobile/src/features/settings/components/SettingsSwitchRow.tsx
@@ -1,42 +1,12 @@
 import type { ComponentProps } from "react";
-import { Pressable } from "react-native";
 
-import { AppText as Text } from "../../../components/AppText";
-import { ThemedSwitch } from "../../../components/ThemedSwitch";
-import { SettingsControlRow } from "./SettingsControlRow";
+import { ListToggleRow } from "../../../components/ListToggleRow";
 
-export function SettingsSwitchRow(
-  props: Omit<ComponentProps<typeof SettingsControlRow>, "children"> & {
-    readonly value: boolean | null;
-    readonly onValueChange: (value: boolean) => void;
-  },
-) {
-  return (
-    <SettingsControlRow
-      disabled={props.disabled}
-      icon={props.icon}
-      label={props.label}
-      subtitle={props.subtitle}
-    >
-      {props.value === null ? (
-        <Pressable
-          accessibilityLabel={`Set ${props.label} on for selected environments`}
-          accessibilityRole="button"
-          disabled={props.disabled}
-          className="rounded-full bg-subtle px-3 py-2 active:opacity-70"
-          onPress={() => props.onValueChange(true)}
-        >
-          <Text className="text-sm font-t3-medium text-foreground">Mixed · Set on</Text>
-        </Pressable>
-      ) : (
-        <ThemedSwitch
-          style={{ alignSelf: "center" }}
-          accessibilityLabel={props.label}
-          disabled={props.disabled}
-          onValueChange={props.onValueChange}
-          value={props.value}
-        />
-      )}
-    </SettingsControlRow>
-  );
+export function SettingsSwitchRow({
+  subtitle,
+  ...props
+}: Omit<ComponentProps<typeof ListToggleRow>, "description"> & {
+  readonly subtitle?: string;
+}) {
+  return <ListToggleRow {...props} description={subtitle} />;
 }
-- 
2.54.0