Show compact PR number badges in mobile thread rows

[juliusmarminge]

Summary

• Add a shared mobile PR presentation helper that formats pull requests as compact #number labels.
• Update mobile thread rows to display a PR icon plus number with state-aware colors.
• Add coverage for compact PR label formatting.

Testing

• vp check
• vp run typecheck
• vp test

---

Note

Low Risk
UI-only mobile list presentation with no auth, data, or API changes; behavior change is limited to how PR text appears on screen.

Overview
Mobile thread list rows now show pull requests like desktop: a PR icon plus #<number> instead of provider-style text such as PR merged.

presentThreadPr moves into thread-pr-presentation.ts. Visible labels are always #number; accessibility still uses provider terms (e.g. merge request on GitLab). State-based Tailwind text classes are unchanged.

ThreadListRow adds an SVG PullRequestIcon, pullRequestTintColor for open/merged/closed in light and dark mode, and wraps the badge in a row with accessibilityLabel. The icon is white when the sidebar row is selected; size follows compact vs sidebar layout.

Tests cover the new label format and GitLab accessibility wording.

^{Reviewed by Cursor Bugbot for commit 7ecb46e. Bugbot is set up for automated code reviews on this repo. Configure here.}

Note

Show compact PR number badges with state-tinted SVG icons in mobile thread list rows

• Adds a PullRequestIcon SVG component and a pullRequestTintColor utility that maps PR state (open/merged/closed) and light/dark color scheme to a hex tint color.
• Replaces the previous provider/state chip label in thread rows with a compact #<number> badge that prepends the new icon, tinted by state and theme (white when selected).
• Extracts PR presentation logic into a new thread-pr-presentation.ts module and re-exports from use-thread-pr.ts.
• Adds an accessibilityLabel field to PR badges combining number, provider-specific terminology ("pull request" vs "merge request"), and state.
• Behavioral Change: presentThreadPr now returns #<number> as the label instead of the previous provider/state chip text; any consumer relying on the old label format will see different output.

^{Macroscope summarized 7ecb46e.}

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: 020ff1df-f468-41a9-b78b-88cb58ba898a

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch feature/mobile-pr-number-indicator

---

_{Comment @coderabbitai help to get the list of available commands.}

[macroscopeapp]

Approvability

Verdict: Approved

This PR makes a minor UI presentation change to how PR badges are displayed in mobile thread rows - changing from text like 'PR open' to compact '#1234' format with an icon. The changes are self-contained, include tests, and don't affect runtime behavior beyond visual display. The open accessibility comment is a valid improvement suggestion but not a blocking issue.

^{You can customize Macroscope's approvability policy. Learn more.}

[macroscopeapp]

🟡 Medium threads/thread-list-items.tsx:519

The PR badge View at line 520 sets accessibilityLabel but is not an accessibility element — in React Native a View without accessible={true} is not exposed to VoiceOver/TalkBack, and its accessibilityLabel is ignored. Since the parent Pressable already announces the thread title, the PR status is never read to screen-reader users. Consider adding accessible and accessibilityRole="text" to the View so the PR information is exposed as a separate element, or fold the PR label into the parent's accessibilityLabel.

🚀 Reply "fix it for me" or copy this AI Prompt for your agent:

In file @apps/mobile/src/features/threads/thread-list-items.tsx around line 519:

The PR badge `View` at line 520 sets `accessibilityLabel` but is not an accessibility element — in React Native a `View` without `accessible={true}` is not exposed to VoiceOver/TalkBack, and its `accessibilityLabel` is ignored. Since the parent `Pressable` already announces the thread title, the PR status is never read to screen-reader users. Consider adding `accessible` and `accessibilityRole="text"` to the `View` so the PR information is exposed as a separate element, or fold the PR label into the parent's `accessibilityLabel`.