refactor(mobile): adopt connection choice controls

apps/mobile/src/features/connection/ConnectionsNewRouteScreen.tsx

@@ -1,3 +1,4 @@
+import { ListRow } from "../../components/ui/ListRow";
 import * as Dialog from "../../components/ui/Dialog";
 import { ScreenScrollView as ScrollView } from "../../components/ui/ScreenScrollView";
 import { useAuth } from "@clerk/expo";
@@ -385,26 +386,12 @@ function T3ConnectSection() {
           showHeader={false}
         />
       ) : (
-        <Pressable
-          accessibilityRole="button"
+        <ListRow
+          label="Sign in to T3 Connect"
+          description="Reach your machines from anywhere, no network setup."
           disabled={!isLoaded}
           onPress={() => navigation.navigate("SettingsSheet", { screen: "SettingsAuth" })}
-          className="min-h-13 flex-row items-center gap-3 rounded-[26px] border-continuous bg-grouped-card px-4 active:opacity-70"
-        >
-          <View className="min-w-0 flex-1 py-3">
-            <Text className="text-base text-foreground">Sign in to T3 Connect</Text>
-            <Text className="text-sm text-foreground-muted">
-              Reach your machines from anywhere, no network setup.
-            </Text>
-          </View>
-          <SymbolView
-            name="chevron.right"
-            size={14}
-            tintColorClassName="accent-chevron"
-            type="monochrome"
-            weight="semibold"
-          />
-        </Pressable>
+        />
       )}
     </View>
   );

apps/mobile/src/features/connection/GitHubRoutingSettings.tsx

@@ -1,3 +1,4 @@
+import { ListChoiceRow } from "../../components/ui/ListChoiceRow";
 import * as Dialog from "../../components/ui/Dialog";
 import { useAtomValue } from "@effect/atom-react";
 import {
@@ -76,12 +77,12 @@ export function GitHubRoutingSettings() {
               </Pressable>
               {expanded === environmentId
                 ? options.map((option) => (
-                    <Pressable
+                    <ListChoiceRow
                       key={option.value}
-                      accessibilityRole="radio"
-                      accessibilityState={{ checked: selected === option.value, disabled }}
+                      label={option.label}
+                      description={option.description}
+                      selected={selected === option.value}
                       disabled={disabled}
-                      className="flex-row items-center gap-4 p-4 disabled:opacity-50"
                       onPress={() => {
                         setSaving(true);
                         void update({ environmentId, permission: option.value }).then((result) => {
@@ -93,22 +94,7 @@ export function GitHubRoutingSettings() {
                             );
                         });
                       }}
-                    >
-                      <View className="min-w-0 flex-1 gap-1">
-                        <Text className="text-base text-foreground">{option.label}</Text>
-                        <Text className="text-sm leading-normal text-foreground-muted">
-                          {option.description}
-                        </Text>
-                      </View>
-                      {selected === option.value ? (
-                        <SymbolView
-                          name="checkmark"
-                          size={18}
-                          tintColorClassName="accent-icon"
-                          weight="semibold"
-                        />
-                      ) : null}
-                    </Pressable>
+                    />
                   ))
                 : null}
             </View>

apps/mobile/src/features/usage/UsageRouteScreen.tsx

@@ -1,3 +1,4 @@
+import { Button } from "../../components/ui/Button";
 import { AppActivityIndicator } from "../../components/ui/AppActivityIndicator";
 import { ChatGptUsageSummary } from "./ChatGptUsageSummary";
 import { ScreenScrollView as ScrollView } from "../../components/ui/ScreenScrollView";
@@ -427,16 +428,15 @@ function CursorEnableAction({
     if (result._tag === "Success") onEnabled();
   };
   return (
-    <Pressable
-      accessibilityRole="button"
+    <Button
+      label={buttonText}
+      tone="primary"
       accessibilityLabel={`Enable Cursor usage from ${label}`}
       accessibilityHint={CURSOR_KEYCHAIN_COPY}
       disabled={pending}
       onPress={() => void enable()}
-      className="rounded-full bg-primary px-4 py-2"
-    >
-      <Text className="text-sm font-medium text-primary-foreground">{buttonText}</Text>
-    </Pressable>
+      loading={pending}
+    />
   );
 }