refactor(mobile): adopt shared controls and add component catalog

[juliusmarminge]

Design-system progress

API adoption and Pen rendering are tracked separately. This is cumulative through this PR, not a claim that all native renderers are finished.

Pen component	After this PR
Host / native theme	Later in stack
List / Section / Row	Shared RN rows; native Form / ListItems left
Toggle	Native switches; Android checkmark treatment left
Segmented	Later in stack
Menu	Later in stack
Sheet	Later in stack
Dialog	Later in stack
SearchField	Later in stack
Button / IconButton	Later in stack
Chip	Shared RN chip; native Android variants left
Toast	Later in stack
FAB	Later in stack
Toolbar	Later in stack
AppBar	Later in stack
Picker / Slider / Stepper	Partial; iOS native slider and picker family left
Progress / EmptyState	Later in stack
Typography / shapes / motion	Later in stack
Split / list-detail / rail	Deferred broader layout work

Custom Appearance cards stay. Segmented controls stay native. Composer, thread-row and task-tray redesigns remain deferred.

Shared chips, form controls, and feedback notices need consistent theme behavior and a development catalog for verifying them. This preserves the already-reviewed implementations and their production adoption, while leaving the segmented-control change in a separate PR above this one.

The original four PRs were merged into the old segmented-control base during restacking. This replacement keeps their changes available to land first: #18534, #18535, #18536, and #18538.

Verification: native iOS and Android captures below; 53 focused tests pass on the full stack, and dependency checks pass before the segmented-control layer. The full-stack tree is unchanged by the reorder.

Filters and pull-request metadata each repeated chip markup. Add Chip for themed compact labels and filter triggers, and use it in thread/PR filters and both loaded/loading PR label lists. Keep native menu behavior and iOS glass. Selected filter triggers also expose their selected accessibility state.

Validation: mobile typecheck and 53 dependency/theme tests pass. Targeted lint has only existing warnings in PullRequestRouteScreen. Inspected native iOS and Android filters, selected an environment through the iOS native menu, then reset it. Visual changes are intentionally small. Before is left, after is right.

Model: GPT-6.1. Harness: Codex.

Font sliders and the auto-settle number picker were feature-owned controls. Extract SliderRow and NumberField, then keep small settings adapters that supply their domain bounds and labels. Preserve the native Android slider/stepper, native iOS picker, and existing iOS slider gestures.

Centralize palette access for native controls in useControlTheme; the shared buttons and switch also use it. Tighten the component-to-feature dependency ceiling from 32 to 30.

Validation: mobile typecheck and 53 dependency/theme tests pass. Targeted lint reports existing gesture/Reanimated compiler warnings in the moved slider implementation. Native iOS slider changed from 16 to 17 and back to 16; opened and cancelled the iOS numeric picker; incremented and restored the Android number. These checks use the isolated test environment. Before is left, after is right. Numeric controls and Android sliders preserve their appearance. The iOS slider thumb now uses the theme accent so it stays visible on tinted dark cards.

Model: GPT-6.1. Harness: Codex.

Inline errors and the dismissible composer error duplicated their message, dismissal, and accessibility presentation. Add Notice and adopt it in both. Keep error text selection and Android live regions, centralize VoiceOver announcements, and use the shared glass treatment for floating iOS feedback with a solid themed Android fallback.

Validation: mobile typecheck, targeted lint, and 53 dependency/theme tests pass. Native screenshots show an invalid-folder failure on iOS and Android, without creating a project. Before is left, after is right. Floating composer before/after captures below use the production component in the development catalog. Its error icon stays red.

Model: GPT-6.1. Harness: Codex.

Mobile's shared controls need one repeatable place to check themes, selection, disabled/loading states, and native presentation. Add a development-only t3code-dev://dev/components catalog that uses the production components with local example state. It includes theme and light/dark switching, forms, lists, buttons, chips, notices, sheets, menus, dialogs, the floating create action, and progress. Search keeps its existing autofocus default, with an opt-out for this inline example.

The stack adopts shared action rows, buttons, segmented controls, chips, sliders, numeric fields, and notices in production screens. Existing native menu, sheet, dialog, search, header/toolbar, FAB, switch, and progress components remain the shared implementations for their current callers; this does not replace native presentation with a separate widget framework.

Validation: mobile typecheck and 53 dependency/theme tests pass. Captured the real iOS and Android clients in all six built-in themes, light and dark, plus Material You on Android. The catalog changes local example state; theme previews update the device's appearance preferences.

Model: GPT-6.1. Harness: Codex.

[macroscopeapp]

Approvability

Verdict: Not approved

Macroscope's review found this PR not approvable — This PR combines several new shared mobile controls with production adoption across filters, notices, settings inputs, sliders, and native theming, alongside a substantial development catalog route. Although the catalog is development-only and many extractions preserve existing behavior, the cross-cutting UI and accessibility changes are broader than a small mechanical refactor.

No code changes detected at ff0bfd1. Prior analysis still applies.

^{You can add or adjust custom eligibility rules. Learn more.}

[github-actions]

Thread transfer impact

✅ Thread transfer remains within every enforced ceiling.

ℹ️ No successful main baseline artifact is available yet. This run establishes the initial measurement.

Provider	Metric	Main baseline	This PR	Impact	PR ceiling
Codex	Total thread wire	—	5.0 KiB	—	6.8 KiB	✅
Codex	Thread snapshot wire	—	3.8 KiB	—	4.9 KiB	✅
Codex	Live turn WebSocket wire	—	1.2 KiB	—	2.0 KiB	✅
Codex	Live turn WebSocket decoded	—	20.9 KiB	—	29.3 KiB	✅
Codex	Live turn messages	—	2	—	8	✅
Claude	Total thread wire	—	5.0 KiB	—	6.8 KiB	✅
Claude	Thread snapshot wire	—	3.8 KiB	—	4.9 KiB	✅
Claude	Live turn WebSocket wire	—	1.2 KiB	—	2.0 KiB	✅
Claude	Live turn WebSocket decoded	—	21.2 KiB	—	29.3 KiB	✅
Claude	Live turn messages	—	2	—	8	✅

Baseline: unavailable · PR result: ff0bfd1 · Source CI: success

Scenario and decoded snapshot size

10 historical turns, 5 command tools per turn, 878.9 KiB retained MCP result per historical turn, and a 1.05 MiB retained result in the measured turn.

• Codex decoded thread snapshot: 108.5 KiB
• Claude decoded thread snapshot: 108.8 KiB

Updated in place by a trusted workflow. PR artifacts are strictly validated and never executed.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

• Configuration used: Path: .coderabbit.config.ts
• Review profile: CHILL
• Plan: Team
• Run ID: 961a372a-ac9c-4fb0-92f0-5710ccefbfa8

📥 Commits

Reviewing files that changed from the base of the PR and between 7546df0 and ff0bfd1.

📒 Files selected for processing: 2

• apps/mobile/src/components/Button.android.tsx
• apps/mobile/src/features/pull-requests/PullRequestRouteScreen.tsx

🚧 Files skipped from review as they are similar to previous changes: 1

• apps/mobile/src/features/pull-requests/PullRequestRouteScreen.tsx

Limit details: You’ve used all 10 included reviews currently available. Your 26 included PR review attempts over the past 7 days set your current allowance at 10 reviews per hour.

📝 Walkthrough

The mobile app adds shared Chip, Notice, NumberField, and slider controls, plus a theme hook. Existing settings and screens adopt these components. A development-only route opens a catalog with interactive component examples.

Changes: Mobile shared controls and catalog

Layer / File(s)	Summary
Shared components and theme access apps/mobile/src/components/Chip.tsx, apps/mobile/src/components/Notice.tsx, apps/mobile/src/components/useControlTheme.ts	Chip renders labels with optional symbols, selection styling, and optional glass presentation. Notice supports danger and default tones, optional dismissal, and floating presentation. useControlTheme returns appearance values for controls.
Shared control behavior and platform theming apps/mobile/src/components/SliderRow.tsx, apps/mobile/src/components/SliderRow.android.tsx, apps/mobile/src/components/Button.android.tsx, apps/mobile/src/components/MaterialIconButton.android.tsx, apps/mobile/src/components/MaterialSwitch.android.tsx, apps/mobile/src/components/MaterialSearchField.tsx, apps/mobile/src/features/settings/appearance/components/FontSizeSliderRow.tsx	SliderRow accepts optional endpoint icons, and the font-size settings wrapper supplies them. Android controls use useControlTheme. MaterialSearchField accepts an autoFocus prop that defaults to true.
NumberField and auto-settle settings apps/mobile/src/components/NumberField.tsx, apps/mobile/src/components/NumberField.android.tsx, apps/mobile/src/components/NumberField.ios.tsx, apps/mobile/src/features/settings/components/AutoSettleDaysField.tsx, apps/mobile/src/features/settings/components/AutoSettleDaysField.android.tsx	NumberField provides platform-specific bounded numeric input. AutoSettleDaysField delegates to it and supplies day limits and singular/plural formatting; its separate Android implementation is removed.
Shared components in existing screens apps/mobile/src/components/ErrorBanner.tsx, apps/mobile/src/features/threads/ComposerErrorNotice.tsx, apps/mobile/src/features/workspace/ListFilterMenu.tsx, apps/mobile/src/features/pull-requests/PullRequestOverviewLoading.tsx, apps/mobile/src/features/pull-requests/PullRequestRouteScreen.tsx, apps/mobile/src/dependency-graph.test.ts	Error presentations use Notice. Workspace filters and pull request labels use Chip. The dependency-graph test lowers the allowed component-to-feature edge count from 33 to 31.
Development component catalog apps/mobile/src/features/development/ComponentCatalogScreen.tsx, apps/mobile/src/Stack.tsx	The catalog screen adds Controls, Forms, and Feedback examples with local state. The root stack registers it at dev/components only in development builds.

Priority: ➖ Normal

Estimated code review effort: 3 (Moderate) | ~25 minutes

Change: Feature

Merge Risk: ⚪ Minimal · up to ff0bf

The reviewed changes preserve Android button colors and pull-request label behavior, with no identified merge-blocking risk; proceed with normal checks.

Pre-merge checks: 3 · 1

Failed checks: 1 warning

Check name	Status	Explanation	Resolution
Description check		The description provides extensive change and verification details with UI evidence, but it does not follow the required Problem, Change, and Scope and approval section structure. It also does not pro…	Add the required section headings. State the problem and expected behavior, summarize the implementation under Change, and document the triaged issue or discussion with explicit maintainer approval under Scope and approval. Keep the existin…

Passed checks: 3 passed

Check name	Status	Explanation
Title check		The title clearly summarizes the primary changes: adopting shared mobile controls and adding a component catalog.
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 extensive change and verification details with UI evidence, but it does not follow the required Problem, Change, and Scope and approval section structure. It also does not provide explicit maintainer approval or a triaged issue/discussion link for the stated scope.

Resolution

Add the required section headings. State the problem and expected behavior, summarize the implementation under Change, and document the triaged issue or discussion with explicit maintainer approval under Scope and approval. Keep the existing verification results, limitations, and screenshots under Verification.

• Fix all pre-merge checks with AI

✨ Finishing Touches

📝 Generate docstrings

• Commit to this branch
• Create a new PR

🧪 Generate unit tests (beta)

• Commit to this branch
• 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.

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