refactor(mobile): share settings action rows

apps/mobile/src/components/ListActionRow.tsx

@@ -0,0 +1,42 @@
+import { Platform } from "react-native";
+import { useResolveClassNames } from "uniwind";
+
+import { AppActivityIndicator } from "./AppActivityIndicator";
+import { ListRowLayout, type ListRowContentProps } from "./ListRowLayout";
+import { RowPressable } from "./RowPressable";
+
+export function ListActionRow(
+  props: ListRowContentProps & {
+    readonly tone?: "default" | "danger";
+    readonly loading?: boolean;
+    readonly onPress: () => void;
+  },
+) {
+  const rippleStyle = useResolveClassNames("bg-subtle-strong");
+  const disabled = Boolean(props.disabled || props.loading);
+  return (
+    <RowPressable
+      accessibilityRole="button"
+      accessibilityLabel={props.label}
+      accessibilityHint={props.description}
+      accessibilityState={{ disabled, busy: Boolean(props.loading) }}
+      disabled={disabled}
+      onPress={props.onPress}
+      android_ripple={{ color: rippleStyle.backgroundColor }}
+      unstable_pressDelay={Platform.OS === "android" ? 50 : undefined}
+      className="bg-grouped-card"
+    >
+      <ListRowLayout
+        {...props}
+        disabled={disabled}
+        accessory={
+          props.loading ? (
+            <AppActivityIndicator
+              colorClassName={props.tone === "danger" ? "accent-danger-foreground" : "accent-icon"}
+            />
+          ) : undefined
+        }
+      />
+    </RowPressable>
+  );
+}

apps/mobile/src/components/ListRowLayout.tsx

@@ -21,7 +21,8 @@ export function ListRowLayout({
   detail,
   disabled,
   accessory,
-}: ListRowContentProps & { readonly accessory?: ReactNode }) {
+  tone = "default",
+}: ListRowContentProps & { readonly accessory?: ReactNode; readonly tone?: "default" | "danger" }) {
   const { fontScale } = useWindowDimensions();
   // Leave the label room to wrap at accessibility text sizes.
   const stackDetail = fontScale >= 1.5;
@@ -38,14 +39,20 @@ export function ListRowLayout({
           <SymbolView
             name={icon}
             size={Platform.OS === "android" ? 24 : 22}
-            tintColorClassName="accent-icon"
+            tintColorClassName={tone === "danger" ? "accent-danger-foreground" : "accent-icon"}
             type="monochrome"
             weight="regular"
           />
         </View>
       ) : null}
       <View className="min-w-0 flex-1 gap-1">
-        <AppText className="text-base text-foreground">{label}</AppText>
+        <AppText
+          className={
+            tone === "danger" ? "text-base text-danger-foreground" : "text-base text-foreground"
+          }
+        >
+          {label}
+        </AppText>
         {description ? (
           <AppText className="text-sm text-foreground-muted">{description}</AppText>
         ) : null}

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

@@ -1,60 +1 @@
-import type { ComponentProps } from "react";
-import { Platform, Pressable } from "react-native";
-
-import { AppActivityIndicator } from "../../../components/AppActivityIndicator";
-import { SymbolView } from "../../../components/AppSymbol";
-import { AppText as Text } from "../../../components/AppText";
-import { MaterialListRow } from "../../../components/MaterialListRow";
-import { cn } from "../../../lib/cn";
-
-export function SettingsActionRow(props: {
-  readonly icon: ComponentProps<typeof SymbolView>["name"];
-  readonly label: string;
-  readonly tone?: "default" | "danger";
-  readonly disabled?: boolean;
-  readonly loading?: boolean;
-  readonly onPress: () => void;
-}) {
-  const danger = props.tone === "danger";
-  const textClassName = danger ? "tabular-nums text-danger-foreground" : "text-foreground";
-  const iconColorClassName = danger ? "accent-danger-foreground" : "accent-icon";
-  const icon = (
-    <SymbolView
-      name={props.icon}
-      size={Platform.OS === "android" ? 24 : 22}
-      tintColorClassName={iconColorClassName}
-      type="monochrome"
-      weight="regular"
-    />
-  );
-  const spinner = props.loading ? (
-    <AppActivityIndicator colorClassName={iconColorClassName} />
-  ) : null;
-
-  if (Platform.OS === "android") {
-    return (
-      <MaterialListRow
-        className="bg-grouped-card"
-        title={props.label}
-        titleClassName={textClassName}
-        leading={icon}
-        trailing={spinner}
-        disabled={props.disabled}
-        onPress={props.onPress}
-      />
-    );
-  }
-
-  return (
-    <Pressable
-      accessibilityRole="button"
-      disabled={props.disabled}
-      onPress={props.onPress}
-      className="flex-row items-center gap-4 p-4 disabled:opacity-40"
-    >
-      {icon}
-      <Text className={cn("flex-1 text-lg", textClassName)}>{props.label}</Text>
-      {spinner}
-    </Pressable>
-  );
-}
+export { ListActionRow as SettingsActionRow } from "../../../components/ListActionRow";