Repository navigation
feat(mobile): distinguish section tabs from value pickers - #29381
jakeleventhal wants to merge 5 commits into
Conversation
github-actions
Bot
added
vouch:trusted
![macroscopeapp[bot]](https://avatars.githubusercontent.com/in/900172?s=60&v=4){kind=small}
ApprovabilityVerdict: Needs Human Approval Macroscope's review found this PR requires human approval — This replaces mobile section selectors with scrollable tabs and adjusts value-picker colors. Tabs.tsx:31 introduces a lint suppression for the selected-tab scrolling effect, which requires human review. You can add or adjust custom eligibility rules. Learn more. |
|
No actionable comments were generated in the recent review.
 |
| Layer / File(s) | Summary |
|---|---|
Tabs component and selected-state styling apps/mobile/src/components/ui/Tabs.tsx, apps/mobile/src/components/ui/segmentedControlColors.ts |
Adds typed tab options and an animated selection indicator with reduced-motion handling and liquid-glass or grouped-card styling. Updates segmented-control selected colors and overlay alpha. |
Screen selector adoption apps/mobile/src/features/development/ComponentCatalogScreen.tsx, apps/mobile/src/features/pull-requests/PullRequestRouteScreen.tsx, apps/mobile/src/features/usage/UsageRouteScreen.tsx |
Replaces page and section selectors with Tabs. The usage screen uses Tabs on wide and narrow layouts; its window-range control remains a segmented control. |
Estimated code review effort: 3 (Moderate) | ~20 minutes
Change: Feature
Suggested reviewers: juliusmarminge
Merge Risk: 
b45ad
-
The changed mobile selectors preserve their existing behavior, and no merge-blocking defect was established.
Pre-merge checks: 
-
Check name Status Explanation Title check The title clearly and concisely describes the main change: separating mobile section tabs from value pickers. Description check The description provides the problem, proposed change, scope, verification results, evidence, and known limitations. It does not use the template's exact Problem, Change, and Verification headings, an… Linked Issues check Check skipped because no linked issues were found for this pull request. Out of Scope Changes check Check skipped because no linked issues were found for this pull request. Full details: Description check
-
Explanation
The description provides the problem, proposed change, scope, verification results, evidence, and known limitations. It does not use the template's exact Problem, Change, and Verification headings, and it states that explicit maintainer approval is still pending, but the required information is otherwise substantially present.
-
Finishing Touches
-
Generate unit tests (beta)
-
- Create a new PR
-
- Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts
Usage-based review receipt
- Mode: Continue automatically
- Reviewed files: 1
- Charged: $0.25
- View usage details
Note
This review was completed with usage-based billing: files reviewed beyond your plan's included limits are billed at $0.25/file. View usage-based billing.
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Dismissing prior approval to re-evaluate f489f69
Dismissing prior approval to re-evaluate b45ad99
Replacement for #26679. GitHub rejected reopening the original after its authorized rebase/force-push:
state cannot be changed. The t3/redesign-mobile-tab-selectors branch was force-pushed or recreated.This preserves the original final implementation and latest evidence for reconsideration.Mobile PR and Usage navigation currently uses the same full-width segmented tracks as value pickers. Overview / Guide / Activity changes the section being viewed; Cost / Tokens / Limits does the same. A time range or review verdict selects a value within that section. Giving both the same treatment makes those different actions harder to distinguish.
This adds label-only navigation tabs with a sliding glass selection pill to PR sections, Usage sections, and the component catalog. Value pickers retain segmented tracks, with the original PR's selected-color adjustments and final dark-card contrast correction preserved. These are presentation changes within the existing screens; they do not change provider behavior, wire contracts, or navigation destinations.
Scope and reconsideration
Revival requested explicitly by Jake to reconsider the closure explanation (closure event
34685595668). Jake disputes the closure: the problem is already defined as the lack of a visual distinction between section navigation and value selection, and the screenshots and recordings demonstrate the proposed distinction. This is an intentional navigation treatment, and no upstream maintainer approval is claimed. Maintainer acceptance of the direction and scope remains for review.Current upstream still uses segmented controls for these navigation tabs. #26041 already fixed the separate floating UIKit lens defect; this PR does not claim that defect remains. The rebase preserves its iOS visible-pane mounting guard. The follow-up accessibility fix makes the tab row horizontally scrollable, increases tab touch height to at least 44px, and updates the hidden-pane spacer to 44px.
#19703 also contains this glass-tabs renderer. This PR owns the standalone navigation treatment; that overlapping PR should reuse the same final renderer rather than introduce a divergent copy. The value-picker color changes are retained from this PR's original final scope; they are not claimed to be a technical prerequisite for tabs.
Current verification
f489f69cd66addresses both CodeRabbit findings: horizontally scrollable tabs retain access to enlarged labels, and 44px tab targets match the hidden-pane spacer.vp run check:changed HEAD --concurrency 2passed before committing: format, lint, both Knip passes, mobile/scripts typechecks, and 7 compiler cases. Device-panel verification was authorized, but the selected iOS simulator returnedDEVICE_IN_USEfor another session after the advised retry. That session was left untouched, and the disposable native-client build, backend and Metro were stopped. No fresh UI proof was obtained; historical captures below predate this adjustment.97e9791d4c79876efbc778a14477358b1ee65d46, onto upstreamac8dce0cc3abd8a337f2d806b5082a6834b9b81a.vp test run apps/mobile/src/lib/mobileTheme.test.ts apps/mobile/src/lib/mobileThemeRuntime.test.ts apps/mobile/src/features/pull-requests/pullRequestActivityFilter.test.ts: 3 files, 27 tests passed. These cover theme/runtime behavior and existing activity filtering; they do not constitute device UI proof.vp run check:changed upstream/main: passed formatting, lint, both knip passes, affected mobile/scripts typechecks, and React compiler checks for the five changed files (10 compiler cases passed).git diff --checkpassed.ae2d9a4removed count badges, the count API/accessibility text, and the double-counting calculation;97e9791restored dark-card secondary selection colors. Those fixes survive the rebase.Prior evidence retained
The October 28 captures compare baseline
886d8f6with the count-free redesign atae2d9a4, on the same iPhone Duo simulator running iOS 27.1 with Iris light/dark appearances. PR tabs, Usage tabs/time ranges, and review-verdict selection were exercised; no review or generated guide was submitted. Captures are cropped to the controls at the same scale, without color enhancement or personal usage totals. iOS snooze uses a separate native picker.The count-free Iris assets below supersede the earlier grayscale/count-badge evidence. The later dark-card comparison supersedes conflicting card contrast in the earlier captures. Prior CI run 40777702764 succeeded on
97e9791; it does not validate the rebased head. Macroscope approved the prior final head; that historical review is not approval of this rebase.Prior Iris light: native before / after
Prior Iris dark: native before / after
Prior dark card contrast follow-up
The final pre-rebase fix at
97e9791retained the existing secondary selection color on dark cards. The earlier verification covered T3 Chat, Grove, Ocean, Ember, and Iris; this native Iris dark capture supersedes any conflicting earlier card-contrast evidence.vp run check:changedpassed at that prior head.Prior replacement interaction recordings
These replace the earlier grayscale recordings, including those that showed an Activity count.
All Iris evidence assets.
Follow-up
b45ad99920c899b84b5f8149f279982f0c53a855keeps the initially selected or newly selected section tab visible by scrolling the native viewport to its measured frame. This fixes the offscreen initial Limits selection at enlarged text sizes. The shared renderer is synchronized with the other revival, retaining #29412’s trailing-content API.vp run check:changed HEAD --concurrency 2passed before committing: format, lint, both Knip passes, mobile/scripts typechecks and six compiler cases. Device capture remains blocked by the occupied simulator session; prior recordings do not demonstrate this follow-up.Original implementation: Claude Opus 5.5 through Claude Agent. Count removal and final contrast correction: GPT-6.1 Sol through Codex. Revival, rebase, and validation: GPT-6.1 Sol through Codex.