From 85ba1fd26070e97fad334eedd07176ed66311a70 Mon Sep 17 00:00:00 2001
From: Julius Marminge <julius0216@outlook.com>
Date: Mon, 19 Oct 2026 14:24:17 -0700
Subject: [PATCH] refactor(mobile): consolidate shared action button renderers

---
 .../src/components/ui/Button.android.tsx      |  2 +-
 apps/mobile/src/components/ui/Button.tsx      |  3 +-
 .../features/projects/AddProjectScreen.tsx    | 15 +----
 .../features/threads/PendingApprovalCard.tsx  |  4 +-
 .../features/threads/PendingUserInputCard.tsx |  6 +-
 .../features/threads/ProviderSubagentBar.tsx  |  4 +-
 .../features/threads/RequestActionButton.tsx  | 44 --------------
 .../features/threads/SecretRequestCard.tsx    |  6 +-
 .../threads/ThreadCreationFailedCard.tsx      |  4 +-
 .../threads/git/gitSheetComponents.tsx        | 60 ++-----------------
 10 files changed, 21 insertions(+), 127 deletions(-)
 delete mode 100644 apps/mobile/src/features/threads/RequestActionButton.tsx

diff --git a/apps/mobile/src/components/ui/Button.android.tsx b/apps/mobile/src/components/ui/Button.android.tsx
index af8ce1aba1a2..ac917427d1c6 100644
--- a/apps/mobile/src/components/ui/Button.android.tsx
+++ b/apps/mobile/src/components/ui/Button.android.tsx
@@ -49,7 +49,7 @@ export function Button(props: ButtonProps) {
     <View
       accessible
       accessibilityRole="button"
-      accessibilityLabel={props.label}
+      accessibilityLabel={props.accessibilityLabel ?? props.label}
       accessibilityHint={props.accessibilityHint}
       accessibilityState={{
         disabled: Boolean(props.disabled || props.loading),
diff --git a/apps/mobile/src/components/ui/Button.tsx b/apps/mobile/src/components/ui/Button.tsx
index 4536ad93c9f8..05c6e0085245 100644
--- a/apps/mobile/src/components/ui/Button.tsx
+++ b/apps/mobile/src/components/ui/Button.tsx
@@ -6,6 +6,7 @@ import { cn } from "../../lib/cn";
 
 export interface ButtonProps {
   readonly label: string;
+  readonly accessibilityLabel?: string;
   readonly icon?: AppSymbolName;
   readonly onPress: () => void;
   readonly disabled?: boolean;
@@ -29,7 +30,7 @@ export function Button(props: ButtonProps) {
   return (
     <Pressable
       accessibilityRole="button"
-      accessibilityLabel={props.label}
+      accessibilityLabel={props.accessibilityLabel ?? props.label}
       accessibilityHint={props.accessibilityHint}
       accessibilityState={{ disabled, busy: Boolean(props.loading) }}
       disabled={disabled}
diff --git a/apps/mobile/src/features/projects/AddProjectScreen.tsx b/apps/mobile/src/features/projects/AddProjectScreen.tsx
index eb05271e89eb..6aef54306547 100644
--- a/apps/mobile/src/features/projects/AddProjectScreen.tsx
+++ b/apps/mobile/src/features/projects/AddProjectScreen.tsx
@@ -262,20 +262,7 @@ function PrimaryActionButton(props: {
   readonly loading?: boolean;
   readonly onPress: () => void;
 }) {
-  if (Platform.OS === "android") return <Button {...props} tone="primary" fullWidth />;
-  return (
-    <Pressable
-      disabled={props.disabled}
-      onPress={props.onPress}
-      className="h-12 items-center justify-center rounded-full bg-primary active:opacity-70 disabled:opacity-45"
-    >
-      {props.loading ? (
-        <AppActivityIndicator colorClassName={String("accent-primary-foreground")} />
-      ) : (
-        <Text className="text-base font-t3-bold text-primary-foreground">{props.label}</Text>
-      )}
-    </Pressable>
-  );
+  return <Button {...props} tone="primary" fullWidth />;
 }
 
 function ProjectPathInput(props: {
diff --git a/apps/mobile/src/features/threads/PendingApprovalCard.tsx b/apps/mobile/src/features/threads/PendingApprovalCard.tsx
index e4897761d4b6..3037ee422bdd 100644
--- a/apps/mobile/src/features/threads/PendingApprovalCard.tsx
+++ b/apps/mobile/src/features/threads/PendingApprovalCard.tsx
@@ -1,4 +1,4 @@
-import { RequestActionButton } from "./RequestActionButton";
+import { Button } from "../../components/ui/Button";
 import type {
   ProviderApprovalDecision,
   ProviderApprovalOption,
@@ -55,7 +55,7 @@ export function PendingApprovalCard(props: PendingApprovalCardProps) {
       ) : null}
       <View className="flex-row flex-wrap gap-2.5">
         {options.map((option) => (
-          <RequestActionButton
+          <Button
             key={option.decision}
             label={option.label}
             tone={
diff --git a/apps/mobile/src/features/threads/PendingUserInputCard.tsx b/apps/mobile/src/features/threads/PendingUserInputCard.tsx
index 0df28161bc07..c20ad4cc1af8 100644
--- a/apps/mobile/src/features/threads/PendingUserInputCard.tsx
+++ b/apps/mobile/src/features/threads/PendingUserInputCard.tsx
@@ -1,4 +1,4 @@
-import { RequestActionButton } from "./RequestActionButton";
+import { Button } from "../../components/ui/Button";
 import { QuestionAttachments } from "./QuestionAttachments";
 import type { RuntimeRequestId } from "@t3tools/contracts";
 import type { ThreadUserInputQuestion } from "@t3tools/client-runtime/state/thread-requests";
@@ -304,9 +304,9 @@ export function PendingUserInputCard(props: PendingUserInputCardProps) {
           );
         })}
       </ScrollView>
-      <RequestActionButton
+      <Button
         label="Submit answers"
-        size="large"
+        fullWidth
         tone={props.answers ? "primary" : "secondary"}
         disabled={!props.canOperateThread || responseDisabled || props.answers === null}
         onPress={() => void props.onSubmit()}
diff --git a/apps/mobile/src/features/threads/ProviderSubagentBar.tsx b/apps/mobile/src/features/threads/ProviderSubagentBar.tsx
index 15d19d45e880..16d16c219e08 100644
--- a/apps/mobile/src/features/threads/ProviderSubagentBar.tsx
+++ b/apps/mobile/src/features/threads/ProviderSubagentBar.tsx
@@ -7,7 +7,7 @@ import { View } from "react-native";
 
 import { AppText as Text } from "../../components/ui/AppText";
 import { ProviderIcon } from "../../components/ProviderIcon";
-import { RequestActionButton } from "./RequestActionButton";
+import { Button } from "../../components/ui/Button";
 import { useVisibleSecondClock } from "./use-visible-second-clock";
 
 export function ProviderSubagentBar(props: {
@@ -60,7 +60,7 @@ export function ProviderSubagentBar(props: {
         </Text>
       </View>
       {props.onOpenParent ? (
-        <RequestActionButton label="Open parent" tone="secondary" onPress={props.onOpenParent} />
+        <Button label="Open parent" tone="secondary" onPress={props.onOpenParent} />
       ) : null}
     </View>
   );
diff --git a/apps/mobile/src/features/threads/RequestActionButton.tsx b/apps/mobile/src/features/threads/RequestActionButton.tsx
deleted file mode 100644
index 3177d50c26b4..000000000000
--- a/apps/mobile/src/features/threads/RequestActionButton.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import type { ComponentProps } from "react";
-import { Pressable } from "react-native";
-
-import { AppText as Text } from "../../components/ui/AppText";
-import { cn } from "../../lib/cn";
-
-export function RequestActionButton({
-  label,
-  tone = "primary",
-  size = "default",
-  disabled,
-  ...props
-}: Omit<ComponentProps<typeof Pressable>, "children" | "className" | "style"> & {
-  label: string;
-  tone?: "primary" | "secondary" | "danger";
-  size?: "default" | "large";
-}) {
-  return (
-    <Pressable
-      {...props}
-      accessibilityRole="button"
-      accessibilityState={{ ...props.accessibilityState, disabled: Boolean(disabled) }}
-      disabled={disabled}
-      className={cn(
-        "items-center justify-center active:opacity-70 disabled:opacity-50",
-        size === "large" ? "rounded-2xl px-4 py-3.5" : "rounded-[14px] px-3.5 py-3",
-        tone === "primary" ? "bg-primary" : tone === "danger" ? "bg-danger" : "bg-subtle-strong",
-      )}
-    >
-      <Text
-        className={cn(
-          "text-sm",
-          tone === "primary"
-            ? "font-t3-extrabold text-primary-foreground"
-            : tone === "danger"
-              ? "font-t3-bold text-danger-foreground"
-              : "font-t3-bold text-foreground",
-        )}
-      >
-        {label}
-      </Text>
-    </Pressable>
-  );
-}
diff --git a/apps/mobile/src/features/threads/SecretRequestCard.tsx b/apps/mobile/src/features/threads/SecretRequestCard.tsx
index 7b67287fb923..3d705b297ce9 100644
--- a/apps/mobile/src/features/threads/SecretRequestCard.tsx
+++ b/apps/mobile/src/features/threads/SecretRequestCard.tsx
@@ -18,7 +18,7 @@ import { SymbolView, type AppSymbolName } from "../../components/ui/AppSymbol";
 import { AppText as Text, AppTextInput as TextInput } from "../../components/ui/AppText";
 import { serverEnvironment } from "../../state/server";
 import { useAtomCommand } from "../../state/use-atom-command";
-import { RequestActionButton } from "./RequestActionButton";
+import { Button } from "../../components/ui/Button";
 
 const LOCK_SYMBOL: AppSymbolName = { ios: "lock", android: "lock" };
 const PRIVATE_SYMBOL: AppSymbolName = { ios: "checkmark.shield", android: "lock" };
@@ -128,8 +128,10 @@ function PendingSecretRequestForm(props: {
           {error}
         </Text>
       ) : null}
-      <RequestActionButton
+      <Button
         label="Save securely"
+        tone="primary"
+        fullWidth
         disabled={submitting || secret.trim().length === 0}
         onPress={() => void send({ type: "save", secret })}
       />
diff --git a/apps/mobile/src/features/threads/ThreadCreationFailedCard.tsx b/apps/mobile/src/features/threads/ThreadCreationFailedCard.tsx
index fac6f28a3a75..141519800eee 100644
--- a/apps/mobile/src/features/threads/ThreadCreationFailedCard.tsx
+++ b/apps/mobile/src/features/threads/ThreadCreationFailedCard.tsx
@@ -1,4 +1,4 @@
-import { RequestActionButton } from "./RequestActionButton";
+import { Button } from "../../components/ui/Button";
 import { View } from "react-native";
 
 import { AppText as Text } from "../../components/ui/AppText";
@@ -19,7 +19,7 @@ export function ThreadCreationFailedCard(props: {
         Your prompt was kept in the project draft.
       </Text>
       <View className="flex-row">
-        <RequestActionButton label="Edit task" onPress={props.onEditTask} />
+        <Button label="Edit task" tone="primary" onPress={props.onEditTask} />
       </View>
     </View>
   );
diff --git a/apps/mobile/src/features/threads/git/gitSheetComponents.tsx b/apps/mobile/src/features/threads/git/gitSheetComponents.tsx
index 9196c9889716..310aa6993b5f 100644
--- a/apps/mobile/src/features/threads/git/gitSheetComponents.tsx
+++ b/apps/mobile/src/features/threads/git/gitSheetComponents.tsx
@@ -1,9 +1,7 @@
 import { SymbolView } from "../../../components/ui/AppSymbol";
 import type { ComponentProps } from "react";
-import { Platform, Pressable, View } from "react-native";
-import { AppText as Text } from "../../../components/ui/AppText";
+import { View } from "react-native";
 import { Button } from "../../../components/ui/Button";
-import { cn } from "../../../lib/cn";
 
 export function SheetActionButton(props: {
   readonly icon: ComponentProps<typeof SymbolView>["name"];
@@ -12,60 +10,10 @@ export function SheetActionButton(props: {
   readonly tone?: "primary" | "secondary" | "danger";
   readonly onPress: () => void;
 }) {
-  if (Platform.OS === "android")
-    return (
-      <View className="flex-1">
-        <Button
-          label={props.label}
-          icon={props.icon}
-          tone={props.tone}
-          disabled={props.disabled}
-          onPress={props.onPress}
-          fullWidth
-        />
-      </View>
-    );
-  const tone = props.tone ?? "secondary";
-  const textColorClassName =
-    tone === "primary"
-      ? "accent-primary-foreground"
-      : tone === "danger"
-        ? "accent-danger-foreground"
-        : "accent-secondary-foreground";
-
   return (
-    <Pressable
-      className={cn(
-        "min-h-[48px] flex-1 items-center justify-center rounded-[18px] px-3 py-3 disabled:opacity-[0.45]",
-        tone === "primary" ? "bg-primary" : tone === "danger" ? "bg-danger" : "bg-secondary",
-        tone !== "primary" &&
-          (tone === "danger" ? "border border-danger-border" : "border border-secondary-border"),
-      )}
-      accessibilityRole="button"
-      disabled={props.disabled}
-      onPress={props.onPress}
-    >
-      <View className="max-w-full flex-row items-center justify-center gap-1.5">
-        <SymbolView
-          name={props.icon}
-          size={16}
-          tintColorClassName={textColorClassName}
-          type="monochrome"
-        />
-        <Text
-          className={cn(
-            "shrink text-center text-xs font-t3-bold tracking-[0.9px] uppercase",
-            tone === "primary"
-              ? "text-primary-foreground"
-              : tone === "danger"
-                ? "text-danger-foreground"
-                : "text-secondary-foreground",
-          )}
-        >
-          {props.label}
-        </Text>
-      </View>
-    </Pressable>
+    <View className="flex-1">
+      <Button {...props} fullWidth />
+    </View>
   );
 }