Show compact PR number badges in mobile thread rows (#3827)

Co-authored-by: codex <codex@users.noreply.github.com>

Author: juliusmarminge

apps/mobile/src/features/threads/thread-list-items.tsx

@@ -6,8 +6,9 @@ import type {
 import type { MenuAction } from "@react-native-menu/menu";
 import { SymbolView } from "expo-symbols";
 import { memo, useCallback, useMemo, type ComponentProps } from "react";
-import { Pressable, useWindowDimensions, View } from "react-native";
+import { Pressable, useColorScheme, useWindowDimensions, View } from "react-native";
 import type { SwipeableMethods } from "react-native-gesture-handler/ReanimatedSwipeable";
+import Svg, { Circle, Path } from "react-native-svg";
 
 import { AppText as Text } from "../../components/AppText";
 import { ControlPillMenu } from "../../components/ControlPill";
@@ -16,7 +17,7 @@ import { cn } from "../../lib/cn";
 import { relativeTime } from "../../lib/time";
 import { useThemeColor } from "../../lib/useThemeColor";
 import type { PendingNewTask } from "../../state/use-pending-new-tasks";
-import { useThreadPr } from "../../state/use-thread-pr";
+import { useThreadPr, type ThreadPr } from "../../state/use-thread-pr";
 import type { HomeGroupDisplayAction } from "../home/homeListItems";
 import { ThreadSwipeable } from "../home/thread-swipe-actions";
 import { resolveThreadStatus } from "./threadPresentation";
@@ -33,6 +34,41 @@ export type ThreadListVariant = "compact" | "sidebar";
 export const THREAD_LIST_COMPACT_INSET = 20;
 const SIDEBAR_ROW_RADIUS = 12;
 
+function pullRequestTintColor(
+  state: ThreadPr["state"],
+  colorScheme: ReturnType<typeof useColorScheme>,
+) {
+  const dark = colorScheme === "dark";
+  switch (state) {
+    case "open":
+      return dark ? "#34d399" : "#059669";
+    case "merged":
+      return dark ? "#a78bfa" : "#7c3aed";
+    case "closed":
+      return dark ? "#a1a1aa" : "#71717a";
+  }
+}
+
+function PullRequestIcon(props: { readonly size: number; readonly color: string }) {
+  return (
+    <Svg
+      width={props.size}
+      height={props.size}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke={props.color}
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <Circle cx={18} cy={18} r={3} />
+      <Circle cx={6} cy={6} r={3} />
+      <Path d="M13 6h3a2 2 0 0 1 2 2v7" />
+      <Path d="M6 9v12" />
+    </Svg>
+  );
+}
+
 /* ─── Project group header ───────────────────────────────────────────── */
 
 export const ThreadListGroupHeader = memo(function ThreadListGroupHeader(props: {
@@ -394,6 +430,7 @@ export const ThreadListRow = memo(function ThreadListRow(props: {
   >["simultaneousWithExternalGesture"];
 }) {
   const { width: windowWidth } = useWindowDimensions();
+  const colorScheme = useColorScheme();
   const compact = props.variant === "compact";
   const selected = props.selected === true;
   // Recycling-safe: resets when the list container is reused for another
@@ -479,13 +516,22 @@ export const ThreadListRow = memo(function ThreadListRow(props: {
           </>
         ) : null}
         {pr !== null ? (
-          <Text
-            className={`${compact ? "text-sm" : "text-xs"} font-t3-medium ${
-              selected ? "text-white" : pr.textClassName
-            }`}
+          <View
+            accessibilityLabel={pr.accessibilityLabel}
+            className="flex-row items-center gap-0.5"
           >
-            {pr.label}
-          </Text>
+            <PullRequestIcon
+              size={compact ? 13 : 11}
+              color={selected ? "#ffffff" : pullRequestTintColor(pr.state, colorScheme)}
+            />
+            <Text
+              className={`${compact ? "text-sm" : "text-xs"} font-t3-medium ${
+                selected ? "text-white" : pr.textClassName
+              }`}
+            >
+              {pr.label}
+            </Text>
+          </View>
         ) : null}
       </View>
     ) : null;

apps/mobile/src/state/thread-pr-presentation.ts

@@ -0,0 +1,36 @@
+import type { VcsStatusResult } from "@t3tools/contracts";
+import { resolveChangeRequestPresentation } from "@t3tools/shared/sourceControl";
+
+export type ThreadPr = NonNullable<VcsStatusResult["pr"]>;
+
+export interface ThreadPrPresentation {
+  readonly number: number;
+  readonly state: ThreadPr["state"];
+  readonly url: string;
+  /** Compact desktop-style label, e.g. "#3774". */
+  readonly label: string;
+  /** Full, provider-aware label for assistive technologies. */
+  readonly accessibilityLabel: string;
+  readonly textClassName: string;
+}
+
+const PR_STATE_TEXT_CLASS: Record<ThreadPr["state"], string> = {
+  open: "text-emerald-600 dark:text-emerald-400",
+  merged: "text-violet-600 dark:text-violet-400",
+  closed: "text-zinc-500 dark:text-zinc-400",
+};
+
+export function presentThreadPr(
+  pr: ThreadPr,
+  provider: VcsStatusResult["sourceControlProvider"] | null | undefined,
+): ThreadPrPresentation {
+  const presentation = resolveChangeRequestPresentation(provider);
+  return {
+    number: pr.number,
+    state: pr.state,
+    url: pr.url,
+    label: `#${pr.number}`,
+    accessibilityLabel: `#${pr.number} ${presentation.longName} ${pr.state}`,
+    textClassName: PR_STATE_TEXT_CLASS[pr.state],
+  };
+}

apps/mobile/src/state/use-thread-pr.test.ts

@@ -0,0 +1,36 @@
+import type { VcsStatusResult } from "@t3tools/contracts";
+import { describe, expect, it } from "vite-plus/test";
+
+import { presentThreadPr } from "./thread-pr-presentation";
+
+const pullRequest: NonNullable<VcsStatusResult["pr"]> = {
+  number: 3774,
+  title: "Desktop-style pull request indicator",
+  url: "https://github.com/t3tools/t3code/pull/3774",
+  baseRef: "main",
+  headRef: "codex/desktop-style-pr-indicator",
+  state: "merged",
+};
+
+describe("presentThreadPr", () => {
+  it("uses the compact desktop-style pull request number label", () => {
+    expect(presentThreadPr(pullRequest, undefined)).toMatchObject({
+      label: "#3774",
+      accessibilityLabel: "#3774 pull request merged",
+      textClassName: "text-violet-600 dark:text-violet-400",
+    });
+  });
+
+  it("uses merge-request terminology for GitLab", () => {
+    expect(
+      presentThreadPr(pullRequest, {
+        kind: "gitlab",
+        name: "GitLab",
+        baseUrl: "https://gitlab.com",
+      }),
+    ).toMatchObject({
+      label: "#3774",
+      accessibilityLabel: "#3774 merge request merged",
+    });
+  });
+});

apps/mobile/src/state/use-thread-pr.ts

@@ -1,40 +1,14 @@
 import type { EnvironmentThreadShell } from "@t3tools/client-runtime/state/shell";
-import type { VcsStatusResult } from "@t3tools/contracts";
-import { resolveChangeRequestPresentation } from "@t3tools/shared/sourceControl";
 
 import { useEnvironmentQuery } from "./query";
+import { presentThreadPr, type ThreadPrPresentation } from "./thread-pr-presentation";
 import { vcsEnvironment } from "./vcs";
 
-export type ThreadPr = NonNullable<VcsStatusResult["pr"]>;
-
-export interface ThreadPrPresentation {
-  readonly number: number;
-  readonly state: ThreadPr["state"];
-  readonly url: string;
-  /** Compact chip label, e.g. "PR open" / "MR merged". */
-  readonly label: string;
-  readonly textClassName: string;
-}
-
-const PR_STATE_TEXT_CLASS: Record<ThreadPr["state"], string> = {
-  open: "text-emerald-600 dark:text-emerald-400",
-  merged: "text-violet-600 dark:text-violet-400",
-  closed: "text-zinc-500 dark:text-zinc-400",
-};
-
-export function presentThreadPr(
-  pr: ThreadPr,
-  provider: VcsStatusResult["sourceControlProvider"] | null | undefined,
-): ThreadPrPresentation {
-  const shortName = resolveChangeRequestPresentation(provider).shortName;
-  return {
-    number: pr.number,
-    state: pr.state,
-    url: pr.url,
-    label: `${shortName} ${pr.state}`,
-    textClassName: PR_STATE_TEXT_CLASS[pr.state],
-  };
-}
+export {
+  presentThreadPr,
+  type ThreadPr,
+  type ThreadPrPresentation,
+} from "./thread-pr-presentation";
 
 /**
  * Live PR status for a thread's branch. Subscriptions are deduplicated per