From abc80c80a73fdda78600184276da9e36cca89703 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 choice rows in settings
 (#18516)

---
 apps/mobile/src/components/ListChoiceRow.tsx  | 60 +++++++++++++++++++
 .../MaterialRadioIndicator.android.tsx        |  5 +-
 .../settings/components/SettingsChoiceRow.tsx | 42 +------------
 3 files changed, 64 insertions(+), 43 deletions(-)
 create mode 100644 apps/mobile/src/components/ListChoiceRow.tsx

diff --git a/apps/mobile/src/components/ListChoiceRow.tsx b/apps/mobile/src/components/ListChoiceRow.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..ceb63f9a7e536241227e85260dae9e5bfa7d60ca
--- /dev/null
+++ b/apps/mobile/src/components/ListChoiceRow.tsx
@@ -0,0 +1,60 @@
+import { Platform, View } from "react-native";
+import { useResolveClassNames } from "uniwind";
+
+import { cn } from "../lib/cn";
+import { SymbolView } from "./AppSymbol";
+import { ListRowLayout } from "./ListRowLayout";
+import { MaterialRadioIndicator } from "./MaterialRadioIndicator";
+import { RowPressable } from "./RowPressable";
+
+export function ListChoiceRow(props: {
+  readonly label: string;
+  readonly description?: string;
+  readonly selected: boolean;
+  readonly separated?: boolean;
+  readonly disabled?: boolean;
+  readonly onPress: () => void;
+}) {
+  const rippleStyle = useResolveClassNames("bg-subtle-strong");
+  return (
+    <RowPressable
+      accessibilityRole="radio"
+      accessibilityLabel={props.label}
+      accessibilityHint={props.description}
+      accessibilityState={{ checked: props.selected, disabled: Boolean(props.disabled) }}
+      disabled={props.disabled}
+      onPress={props.onPress}
+      android_ripple={{ color: rippleStyle.backgroundColor }}
+      unstable_pressDelay={Platform.OS === "android" ? 50 : undefined}
+      className={cn(
+        props.selected ? "bg-subtle" : "bg-grouped-card",
+        props.separated && "border-t border-border-subtle",
+      )}
+    >
+      <ListRowLayout
+        label={props.label}
+        description={props.description}
+        disabled={props.disabled}
+        accessory={
+          <View
+            accessibilityElementsHidden
+            importantForAccessibility="no-hide-descendants"
+            className="size-6 items-center justify-center"
+          >
+            {Platform.OS === "android" ? (
+              <MaterialRadioIndicator selected={props.selected} />
+            ) : props.selected ? (
+              <SymbolView
+                name="checkmark"
+                size={18}
+                tintColorClassName="accent-primary-text"
+                type="monochrome"
+                weight="semibold"
+              />
+            ) : null}
+          </View>
+        }
+      />
+    </RowPressable>
+  );
+}
diff --git a/apps/mobile/src/components/MaterialRadioIndicator.android.tsx b/apps/mobile/src/components/MaterialRadioIndicator.android.tsx
index 2484dc4536ba717c49085a8e38880b3131e2efb8..6573501ac2988e6f09416771cd0827360bdf5c29 100644
--- a/apps/mobile/src/components/MaterialRadioIndicator.android.tsx
+++ b/apps/mobile/src/components/MaterialRadioIndicator.android.tsx
@@ -22,7 +22,8 @@ export function MaterialRadioIndicator({ selected }: { readonly selected: boolea
             height: 20,
             borderRadius: 10,
             borderWidth: 2,
-            borderColor: themeVariables[selected ? "--color-primary" : "--color-foreground-muted"],
+            borderColor:
+              themeVariables[selected ? "--color-primary-text" : "--color-foreground-muted"],
             alignItems: "center",
             justifyContent: "center",
           }}
@@ -33,7 +34,7 @@ export function MaterialRadioIndicator({ selected }: { readonly selected: boolea
                 width: 10,
                 height: 10,
                 borderRadius: 5,
-                backgroundColor: themeVariables["--color-primary"],
+                backgroundColor: themeVariables["--color-primary-text"],
               }}
             />
           ) : null}
diff --git a/apps/mobile/src/features/settings/components/SettingsChoiceRow.tsx b/apps/mobile/src/features/settings/components/SettingsChoiceRow.tsx
index 47574fc10499d46dbc37d513db1f7dcc7bc22c6c..cafd69fee6ce197c494c4773305f4b7e39a3fc1c 100644
--- a/apps/mobile/src/features/settings/components/SettingsChoiceRow.tsx
+++ b/apps/mobile/src/features/settings/components/SettingsChoiceRow.tsx
@@ -1,41 +1 @@
-import { Pressable, View } from "react-native";
-
-import { AppText as Text } from "../../../components/AppText";
-import { SymbolView } from "../../../components/AppSymbol";
-
-export function SettingsChoiceRow(props: {
-  readonly label: string;
-  readonly description: string;
-  readonly selected: boolean;
-  readonly separated: boolean;
-  readonly disabled: boolean;
-  readonly onPress: () => void;
-}) {
-  return (
-    <Pressable
-      accessibilityRole="radio"
-      accessibilityState={{ checked: props.selected, disabled: props.disabled }}
-      className={
-        props.separated
-          ? "flex-row items-center gap-4 border-t border-border-subtle p-4 active:opacity-70"
-          : "flex-row items-center gap-4 p-4 active:opacity-70"
-      }
-      disabled={props.disabled}
-      onPress={props.onPress}
-    >
-      <View className="min-w-0 flex-1 gap-1">
-        <Text className="text-lg text-foreground android:text-base">{props.label}</Text>
-        <Text className="text-sm leading-normal text-foreground-muted">{props.description}</Text>
-      </View>
-      {props.selected ? (
-        <SymbolView
-          name="checkmark"
-          size={18}
-          tintColorClassName="accent-icon"
-          type="monochrome"
-          weight="semibold"
-        />
-      ) : null}
-    </Pressable>
-  );
-}
+export { ListChoiceRow as SettingsChoiceRow } from "../../../components/ListChoiceRow";
-- 
2.54.0