[PixPMusic]

Problem

Android's segmented-control tracks use the screen fill and disappear on standalone surfaces in dark themes. A quieter treatment works well inside grouped cards, while Grove, Ocean, Ember, and Iris need clearer selected fills in Android light mode.

The missing tracks trace to #20163, which flattened the track on October 15. Julius's earlier contrast fix #18506 improved theme surfaces and actions; #20721 subsequently gave iOS tinted tracks and prominent-action selections. Android retained the older colors. The recent Usage refactor #25227 changed refresh dimming, not these palettes.

Change

• Dark standalone controls use the theme accent at 10% for the track and 32% for the selected pill over the screen surface, keeping the selection visible without a full-strength primary fill. T3 Code uses a charcoal selected pill similar to desktop; the card variant also uses this brighter highlight in T3 Code dark. Other dark cards retain their sunken screen/secondary fills. All six light themes have visible tinted card tracks and screen-colored selected pills.
• Use the card variant in the scheduled-task Schedule card and Android's raised snooze dialog. The native component catalog shows both variants. Usage and the standalone PR/review controls keep the default treatment.
• Material You standalone tints use its system primary; palette generation is unchanged.
• Android light selections use the existing secondary or thread-selection fill, whichever separates better from the track, with its matching foreground. This strengthens Grove, Ocean, Ember, and Iris while preserving T3 Chat's pink fill. No new palette colors are introduced.
• Card controls use the shared flat renderer on both platforms so UIKit cannot add a gray layer over their sunken track. Standalone iOS controls retain the native renderer. Both renderers share the color resolver, which targets at least 4.5:1 label contrast, with 7:1 for inactive standalone dark labels.

Scope and approval

Alex reported the invisible tracks and requested the fix, both native platforms, all themes, and before/after screenshots. After reviewing with Julius, she requested card/standalone treatments, stronger Android light selections, a clearer T3 Code dark-card highlight, and muted dark standalone selections across all themes. Evidence is organized one theme per image, with Android before/after and iOS before/after. This stays within that existing control's visual treatment. Web/desktop, contracts, providers, navigation behavior, and docs need no changes.

Verification

• vp run check:changed passes formatting, lint, knip, mobile/scripts typechecks, and 24 related tests. The four focused theme suites also pass (38 tests).
• A numeric audit covers all 48 built-in theme/appearance/variant/platform combinations and confirms readable label pairs. The Material You correction preserves all 48 outputs from 5517c99. Its four Android appearance/variant combinations also pass using the captured native palette.
• Native pixel comparisons against 5c70db3 confirm all 12 built-in light panels and the other 10 dark-card panels are unchanged. All 52 crops in the new comparison images preserve the original capture pixels without rescaling.
• Android 17 fold emulator: seven themes, both appearances, before/after; tapped card and standalone selections and confirmed the controlled value changes.
• iPadOS 27: six themes, both appearances, before/after; tapped the flat card and native standalone controls in both directions and confirmed their selected values. This pass used accessibility selectors throughout.
• Captured the actual Usage route in Grove dark on both platforms; Android reproduces the reported missing-track state at base. Both sessions and test servers were closed, and Android’s emulator process exit was verified before booting iPad. Devices ran sequentially within the shared three-device limit. Physical devices, a separate iPhone, and the live Schedule editor were not exercised.

The figures compare the unmodified base control implementations at 417bc79711 with this PR’s appearance. The six built-in theme images were captured at 5517c99dbf and remain exact for current 0478d4d715: all 48 built-in color combinations are unchanged. Material You was recaptured on both sides at 0478d4d715, using the same native client and identical recorded system-palette values. The previous Material You comparison mixed palette values from different test runs and has been replaced.

Each built-in theme image has Android before · Android after · iOS before · iOS after columns. Light is the top row; dark is the bottom row. Each column shows standalone controls above a grouped-card sample, using production components in a temporary native fixture. Crops retain their original pixels without rescaling; click a PNG to zoom. Fixture code and evidence assets are excluded from the branch.

T3 Code

T3 Chat

Grove

Ocean

Ember

Iris

Material You

Android only: before on the left, after on the right; light above dark. Both sides use the same system palette. Background, card, text, and font-size slider pixels outside the segmented controls are identical. Recorded palette before · after.

Actual Usage route

Grove dark, with the capture toolbar hidden: Android base screen · final screen. iOS controls pane: base · final.

52 full-resolution theme screens, four Usage captures, and baseline source hashes · Comparison layout and source-image hashes.

Model: GPT-6.1 Sol (xhigh reasoning) | Harness: Codex in T3 Code

[macroscopeapp]

Approvability

Verdict: Needs Human Approval

Macroscope's review found this PR requires human approval — This PR adds a card-specific renderer and changes the default color treatment of existing segmented controls across platforms and themes. The resulting product-default appearance change warrants human review.

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

[coderabbitai]

Note

Reviews paused

It looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the reviews.auto_review.auto_pause_after_reviewed_commits setting.

• Last reviewed commit: 0478d4d

Use the following commands to manage reviews:

• @coderabbitai resume to resume automatic reviews.
• @coderabbitai review to trigger a single review.

Use the checkboxes below for quick actions:

• ▶️ Resume reviews
• 🔍 Trigger review

No actionable comments were generated in the recent review.

Recent review info

Run configuration

• Source mode: Auto
• Repository: pingdotgg/t3code
• Branch: main
• File: .coderabbit.config.ts
• Commit: d145077
• Layers: Repository TS config
• Review profile: CHILL
• Plan: Advanced
• Run ID: b5e3c184-71b0-4993-87e7-4794ec977810

Commits

Reviewing files that changed from the base of the PR and between 5517c99 and 0478d4d.

Files selected for processing: 1

• apps/mobile/src/components/ui/segmentedControlColors.ts

Included review availability: This review used your included allowance. Your plan provides up to 10 included reviews per hour; 7 remain after this review.

Walkthrough

The segmented control now uses a shared implementation and supports standalone and card variants. Theme-derived colors account for appearance, variant, and platform. The iOS component delegates card rendering to FlatSegmentedControl, and several screens now use the card variant.

Changes: Segmented control variants

Layer / File(s)	Summary
Shared control and color behavior apps/mobile/src/components/ui/SegmentedControl.shared.tsx, apps/mobile/src/components/ui/SegmentedControl.tsx, apps/mobile/src/components/ui/SegmentedControl.types.ts, apps/mobile/src/components/ui/segmentedControlColors.ts, apps/mobile/src/components/ui/useControlTheme.ts, apps/mobile/src/lib/mobileTheme.ts	The component uses a shared implementation with animated selection, accessibility state, and reduced-motion support. Its props add a variant option. A color helper selects track and text colors by appearance, variant, and platform, using a contrast-ratio helper.
iOS card rendering and shared colors apps/mobile/src/components/ui/SegmentedControl.ios.tsx	The iOS component delegates card variants to FlatSegmentedControl. Other variants use the shared color helper.
Card variant usage in screens apps/mobile/src/features/development/ComponentCatalogScreen.tsx, apps/mobile/src/features/settings/SettingsScheduledTasksRouteScreen.tsx, apps/mobile/src/features/threads/CustomSnoozeSheet.android.tsx	The component catalog adds a card-variant example. The scheduled tasks screen and the three Android custom snooze selectors specify the card variant.

Priority: Normal

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

Change: Bug fix

Suggested labels: 📱 Native Change

Suggested reviewers: juliusmarminge

Merge Risk: Minimal · up to 0478d

The segmented-control styling changes preserve existing interaction behavior and use the intended theme colors.

Pre-merge checks: 4

Check name	Status	Explanation
Title check		The title clearly and concisely describes the main mobile segmented-control readability fix across cards and screens.
Description check		The description includes complete Problem, Change, Scope and approval, and Verification sections. It explains the affected themes and platforms, approval context, focused checks, screenshots, limitati…
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 includes complete Problem, Change, Scope and approval, and Verification sections. It explains the affected themes and platforms, approval context, focused checks, screenshots, limitations, and agent details.

Finishing Touches

🧪 Generate unit tests (beta)

• Create a new PR

• Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

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

Dismissing prior approval to re-evaluate f8d31ea

Dismissing prior approval to re-evaluate 0478d4d