From cc39ec1008ce584e088e79210b69d3359357463b Mon Sep 17 00:00:00 2001
From: Julius Marminge <julius0216@outlook.com>
Date: Thu, 17 Sep 2026 20:29:11 -0700
Subject: [PATCH] fix(mobile): share request action button defaults (#12366)

---
 .../features/threads/PendingApprovalCard.tsx  | 30 +++++--------
 .../features/threads/PendingUserInputCard.tsx | 21 +++------
 .../features/threads/RequestActionButton.tsx  | 45 +++++++++++++++++++
 .../threads/ThreadCreationFailedCard.tsx      | 11 ++---
 4 files changed, 64 insertions(+), 43 deletions(-)
 create mode 100644 apps/mobile/src/features/threads/RequestActionButton.tsx

diff --git a/apps/mobile/src/features/threads/PendingApprovalCard.tsx b/apps/mobile/src/features/threads/PendingApprovalCard.tsx
index 4be6ff611842fdf7419150480f8425877c1d697f..a0fef485e3db975bef6ceed08d3dd7cd49b992b2 100644
--- a/apps/mobile/src/features/threads/PendingApprovalCard.tsx
+++ b/apps/mobile/src/features/threads/PendingApprovalCard.tsx
@@ -1,9 +1,10 @@
+import { RequestActionButton } from "./RequestActionButton";
 import type {
   ApprovalRequestId,
   ProviderApprovalDecision,
   ProviderApprovalOption,
 } from "@t3tools/contracts";
-import { Pressable, View } from "react-native";
+import { View } from "react-native";
 
 import { AppText as Text } from "../../components/AppText";
 import type { PendingApproval } from "../../lib/threadActivity";
@@ -47,30 +48,19 @@ export function PendingApprovalCard(props: PendingApprovalCardProps) {
       ) : null}
       <View className="flex-row flex-wrap gap-2.5">
         {options.map((option) => (
-          <Pressable
+          <RequestActionButton
             key={option.decision}
-            className={`items-center justify-center rounded-[14px] px-3.5 py-3 ${
+            label={option.label}
+            tone={
               option.decision === "accept"
-                ? "bg-primary"
+                ? "primary"
                 : option.decision === "decline"
-                  ? "bg-danger"
-                  : "bg-subtle-strong"
-            }`}
+                  ? "danger"
+                  : "secondary"
+            }
             disabled={props.respondingApprovalId === props.approval.requestId}
             onPress={() => void props.onRespond(props.approval.requestId, option.decision)}
-          >
-            <Text
-              className={`text-sm ${
-                option.decision === "accept"
-                  ? "font-t3-extrabold text-primary-foreground"
-                  : option.decision === "decline"
-                    ? "font-t3-bold text-danger-foreground"
-                    : "font-t3-bold text-foreground"
-              }`}
-            >
-              {option.label}
-            </Text>
-          </Pressable>
+          />
         ))}
       </View>
     </View>
diff --git a/apps/mobile/src/features/threads/PendingUserInputCard.tsx b/apps/mobile/src/features/threads/PendingUserInputCard.tsx
index 80fe6be689bb536cb94a3b353d72c0d320210c37..3730b18aff7a038487a0d7dab4bae2768089e816 100644
--- a/apps/mobile/src/features/threads/PendingUserInputCard.tsx
+++ b/apps/mobile/src/features/threads/PendingUserInputCard.tsx
@@ -1,3 +1,4 @@
+import { RequestActionButton } from "./RequestActionButton";
 import { QuestionAttachments } from "./QuestionAttachments";
 import type { ApprovalRequestId, UserInputQuestion } from "@t3tools/contracts";
 import { useCallback, useRef } from "react";
@@ -321,25 +322,15 @@ export function PendingUserInputCard(props: PendingUserInputCardProps) {
           );
         })}
       </ScrollView>
-      <Pressable
-        className={cn(
-          "items-center justify-center rounded-2xl px-4 py-3.5",
-          props.answers ? "bg-primary" : "bg-subtle-strong",
-        )}
+      <RequestActionButton
+        label="Submit answers"
+        size="large"
+        tone={props.answers ? "primary" : "secondary"}
         disabled={
           props.answers === null || props.respondingUserInputId === props.pendingUserInput.requestId
         }
         onPress={() => void props.onSubmit()}
-      >
-        <Text
-          className={cn(
-            "font-t3-extrabold text-sm",
-            props.answers ? "text-primary-foreground" : "text-foreground-muted",
-          )}
-        >
-          Submit answers
-        </Text>
-      </Pressable>
+      />
       {props.pendingUserInput.dismissible ? (
         <Pressable
           accessibilityRole="button"
diff --git a/apps/mobile/src/features/threads/RequestActionButton.tsx b/apps/mobile/src/features/threads/RequestActionButton.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..a7c94f455d3505c283c31df8432fb58cc925cf04
--- /dev/null
+++ b/apps/mobile/src/features/threads/RequestActionButton.tsx
@@ -0,0 +1,45 @@
+import type { ComponentProps } from "react";
+import { Pressable } from "react-native";
+
+import { AppText as Text } from "../../components/AppText";
+import { cn } from "../../lib/cn";
+
+/** Primary actions in the cards that replace the thread composer. */
+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/ThreadCreationFailedCard.tsx b/apps/mobile/src/features/threads/ThreadCreationFailedCard.tsx
index 71b80e5ccc3b246d51db56d6478549e849176bcc..dce4cb3797b74c187f591a16c0cdffbc916ad6f1 100644
--- a/apps/mobile/src/features/threads/ThreadCreationFailedCard.tsx
+++ b/apps/mobile/src/features/threads/ThreadCreationFailedCard.tsx
@@ -1,4 +1,5 @@
-import { Pressable, View } from "react-native";
+import { RequestActionButton } from "./RequestActionButton";
+import { View } from "react-native";
 
 import { AppText as Text } from "../../components/AppText";
 
@@ -23,13 +24,7 @@ export function ThreadCreationFailedCard(props: {
         Your prompt was kept in the project draft.
       </Text>
       <View className="flex-row">
-        <Pressable
-          accessibilityRole="button"
-          className="items-center justify-center rounded-[14px] bg-blue-500 px-3.5 py-3"
-          onPress={props.onEditTask}
-        >
-          <Text className="text-sm font-t3-extrabold text-white">Edit task</Text>
-        </Pressable>
+        <RequestActionButton label="Edit task" onPress={props.onEditTask} />
       </View>
     </View>
   );
-- 
2.54.0