refactor(mobile): share settings choice row defaults

apps/mobile/src/features/settings/SettingsFollowUpRouteScreen.tsx

@@ -1,15 +1,15 @@
 import { useAtomSet, useAtomValue } from "@effect/atom-react";
 import { useNavigation } from "@react-navigation/native";
 import { AsyncResult } from "effect/unstable/reactivity";
-import { Platform, Pressable, ScrollView, View } from "react-native";
+import { Platform, ScrollView, View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 
 import { AndroidScreenHeader } from "../../components/AndroidScreenHeader";
 import { AppText as Text } from "../../components/AppText";
-import { SymbolView } from "../../components/AppSymbol";
 import { NativeStackScreenOptions } from "../../native/StackHeader";
 import { DEFAULT_FOLLOW_UP_BEHAVIOR, type FollowUpBehavior } from "../../lib/followUpBehavior";
 import { mobilePreferencesAtom, updateMobilePreferencesAtom } from "../../state/preferences";
+import { SettingsChoiceRow } from "./components/SettingsChoiceRow";
 import { SettingsSection } from "./components/SettingsSection";
 
 const FOLLOW_UP_OPTIONS: ReadonlyArray<{
@@ -56,37 +56,15 @@ export function SettingsFollowUpRouteScreen() {
       >
         <SettingsSection title="While the agent is running">
           {FOLLOW_UP_OPTIONS.map((option, index) => (
-            <Pressable
+            <SettingsChoiceRow
               key={option.behavior}
-              accessibilityRole="radio"
-              accessibilityState={{
-                checked: selectedBehavior === option.behavior,
-                disabled: !preferencesReady,
-              }}
+              label={option.label}
+              description={option.description}
+              selected={selectedBehavior === option.behavior}
+              separated={index > 0}
               disabled={!preferencesReady}
               onPress={() => savePreferences({ followUpBehavior: option.behavior })}
-              className={
-                index === 0
-                  ? "flex-row items-center gap-4 p-4"
-                  : "flex-row items-center gap-4 border-t border-border-subtle p-4"
-              }
-            >
-              <View className="min-w-0 flex-1 gap-1">
-                <Text className="text-lg text-foreground">{option.label}</Text>
-                <Text className="text-sm leading-normal text-foreground-muted">
-                  {option.description}
-                </Text>
-              </View>
-              {selectedBehavior === option.behavior ? (
-                <SymbolView
-                  name="checkmark"
-                  size={18}
-                  tintColorClassName={"accent-icon"}
-                  type="monochrome"
-                  weight="semibold"
-                />
-              ) : null}
-            </Pressable>
+            />
           ))}
         </SettingsSection>
         <Text className="px-2 text-sm text-foreground-muted">

apps/mobile/src/features/settings/SettingsKeyboardRouteScreen.tsx

@@ -1,18 +1,18 @@
 import { useAtomSet, useAtomValue } from "@effect/atom-react";
 import { useNavigation } from "@react-navigation/native";
 import { AsyncResult } from "effect/unstable/reactivity";
-import { Platform, Pressable, ScrollView, View } from "react-native";
+import { Platform, ScrollView, View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 
 import { AndroidScreenHeader } from "../../components/AndroidScreenHeader";
 import { AppText as Text } from "../../components/AppText";
-import { SymbolView } from "../../components/AppSymbol";
 import { NativeStackScreenOptions } from "../../native/StackHeader";
 import {
   DEFAULT_COMPOSER_ENTER_BEHAVIOR,
   type ComposerEnterBehavior,
 } from "../../lib/composerEnterBehavior";
 import { mobilePreferencesAtom, updateMobilePreferencesAtom } from "../../state/preferences";
+import { SettingsChoiceRow } from "./components/SettingsChoiceRow";
 import { SettingsSection } from "./components/SettingsSection";
 
 const ENTER_BEHAVIOR_OPTIONS: ReadonlyArray<{
@@ -59,37 +59,15 @@ export function SettingsKeyboardRouteScreen() {
       >
         <SettingsSection title="Return key">
           {ENTER_BEHAVIOR_OPTIONS.map((option, index) => (
-            <Pressable
+            <SettingsChoiceRow
               key={option.behavior}
-              accessibilityRole="radio"
-              accessibilityState={{
-                checked: selectedBehavior === option.behavior,
-                disabled: !preferencesReady,
-              }}
+              label={option.label}
+              description={option.description}
+              selected={selectedBehavior === option.behavior}
+              separated={index > 0}
               disabled={!preferencesReady}
               onPress={() => savePreferences({ composerEnterBehavior: option.behavior })}
-              className={
-                index === 0
-                  ? "flex-row items-center gap-4 p-4"
-                  : "flex-row items-center gap-4 border-t border-border-subtle p-4"
-              }
-            >
-              <View className="min-w-0 flex-1 gap-1">
-                <Text className="text-lg text-foreground">{option.label}</Text>
-                <Text className="text-sm leading-normal text-foreground-muted">
-                  {option.description}
-                </Text>
-              </View>
-              {selectedBehavior === option.behavior ? (
-                <SymbolView
-                  name="checkmark"
-                  size={18}
-                  tintColorClassName={"accent-icon"}
-                  type="monochrome"
-                  weight="semibold"
-                />
-              ) : null}
-            </Pressable>
+            />
           ))}
         </SettingsSection>
         <Text className="px-2 text-sm text-foreground-muted">

apps/mobile/src/features/settings/SettingsProjectGroupingRouteScreen.tsx

@@ -2,17 +2,15 @@ import { ScreenScrollView as ScrollView } from "../../components/ScreenScrollVie
 import { useAtomSet, useAtomValue } from "@effect/atom-react";
 import type { SidebarProjectGroupingMode } from "@t3tools/contracts";
 import { AsyncResult } from "effect/unstable/reactivity";
-import { Pressable, View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 
-import { AppText as Text } from "../../components/AppText";
-import { SymbolView } from "../../components/AppSymbol";
 import { SettingsScreen } from "./components/SettingsScreen";
 import {
   mobileProjectGroupingModePatch,
   resolveMobileProjectGroupingSettings,
 } from "../../state/project-grouping";
 import { mobilePreferencesAtom, updateMobilePreferencesAtom } from "../../state/preferences";
+import { SettingsChoiceRow } from "./components/SettingsChoiceRow";
 import { SettingsSection } from "./components/SettingsSection";
 
 const GROUPING_OPTIONS: ReadonlyArray<{
@@ -57,37 +55,15 @@ export function SettingsProjectGroupingRouteScreen() {
       >
         <SettingsSection title="Project grouping">
           {GROUPING_OPTIONS.map((option, index) => (
-            <Pressable
+            <SettingsChoiceRow
               key={option.mode}
-              accessibilityRole="radio"
-              accessibilityState={{
-                checked: selectedMode === option.mode,
-                disabled: !preferencesReady,
-              }}
+              label={option.label}
+              description={option.description}
+              selected={selectedMode === option.mode}
+              separated={index > 0}
               disabled={!preferencesReady}
               onPress={() => savePreferences(mobileProjectGroupingModePatch(option.mode))}
-              className={
-                index === 0
-                  ? "flex-row items-center gap-4 p-4"
-                  : "flex-row items-center gap-4 border-t border-border-subtle p-4"
-              }
-            >
-              <View className="min-w-0 flex-1 gap-1">
-                <Text className="text-lg text-foreground">{option.label}</Text>
-                <Text className="text-sm leading-normal text-foreground-muted">
-                  {option.description}
-                </Text>
-              </View>
-              {selectedMode === option.mode ? (
-                <SymbolView
-                  name="checkmark"
-                  size={18}
-                  tintColorClassName={"accent-icon"}
-                  type="monochrome"
-                  weight="semibold"
-                />
-              ) : null}
-            </Pressable>
+            />
           ))}
         </SettingsSection>
       </ScrollView>

apps/mobile/src/features/settings/SettingsServerControlsRouteScreen.tsx

@@ -10,7 +10,7 @@ import {
   type ProjectScopedServerSettingKey,
 } from "@t3tools/contracts";
 import { useRef, useState, type ComponentProps } from "react";
-import { Platform, Pressable, View } from "react-native";
+import { Pressable, View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 
 import { RUNTIME_MODE_CHOICES } from "../threads/thread-settings-options";
@@ -21,6 +21,7 @@ import {
   AndroidSettingsEnvironmentFilter,
   SettingsEnvironmentFilterHeader,
 } from "./components/SettingsEnvironmentFilterHeader";
+import { SettingsChoiceRow } from "./components/SettingsChoiceRow";
 import { SettingsSection } from "./components/SettingsSection";
 import { SettingsSwitchRow } from "./components/SettingsSwitchRow";
 import { SettingsProjectOverridesSection } from "./components/SettingsProjectOverridesSection";
@@ -219,7 +220,7 @@ function ServerSettingsDetail(props: { readonly page: SettingsPage }) {
                     }
                   >
                     {WORKSPACE_CHOICES.map((choice, index) => (
-                      <ChoiceRow
+                      <SettingsChoiceRow
                         key={choice.mode}
                         label={choice.label}
                         description={choice.description}
@@ -239,7 +240,7 @@ function ServerSettingsDetail(props: { readonly page: SettingsPage }) {
                     }
                   >
                     {RUNTIME_MODE_CHOICES.map((choice, index) => (
-                      <ChoiceRow
+                      <SettingsChoiceRow
                         key={choice.mode}
                         label={choice.label}
                         description={choice.description}
@@ -289,7 +290,7 @@ function ServerSettingsDetail(props: { readonly page: SettingsPage }) {
                     }
                   >
                     {STREAMING_CHOICES.map((choice, index) => (
-                      <ChoiceRow
+                      <SettingsChoiceRow
                         key={choice.mode}
                         label={choice.label}
                         description={choice.description}
@@ -353,49 +354,6 @@ function ServerSettingsDetail(props: { readonly page: SettingsPage }) {
   );
 }
 
-function ChoiceRow(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={
-            Platform.OS === "android" ? "text-base text-foreground" : "text-lg text-foreground"
-          }
-        >
-          {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>
-  );
-}
-
 function MixedValuesLabel(props: { readonly projectSelected: boolean }) {
   return (
     <Text

apps/mobile/src/features/settings/components/SettingsChoiceRow.tsx

@@ -0,0 +1,41 @@
+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>
+  );
+}