feat(clients): pinned threads stand out in the thread list

[MatthewFeroz]

Draft, parked on a fork until the direction is approved. This is an intentional visual change, so per CONTRIBUTING.md it needs maintainer sign-off before going upstream. Discussion is in progress on Discord; the approval link goes here once given.

Pinned threads are hard to pick out in the thread list. The only cue is a small pin drawn in the muted icon grey (2.46:1 on the default light sidebar), so the pinned block reads like any other run of rows.

Pinned rows now use a pin color derived from the theme's focus accent, plus a faint 1px outline where rows are drawn as cards.

Web / desktop (Sidebar.tsx, index.css)

• New --sidebar-pin token: color-mix(in oklab, var(--ring) 40%, var(--contrast-sidebar-foreground)), declared in the sidebar's contrast block so it follows the appearance contrast setting. --primary is deliberately avoided: in custom themes it is the action fill color, and an earlier version using it dropped to about 2.1:1 in T3 Chat dark.
• Pinned rows get ring-1 ring-inset ring-sidebar-pin/20. The outline is hidden while the row is dragged and while a file is dragged over it, and keyboard focus replaces it with the normal 2px focus ring.

Mobile (mobileTheme.ts, row appearance, ThreadListV2Row, Material You mapper)

• New thread-pin / drawer-pin tokens solved with the existing readableTextColor helper against every background the row sits on (rest, pressed, selected). Material You uses the system primary.
• A 1px outline at 20% sits on card-shaped rows: Android everywhere, and the iOS sidebar pane. Flat iOS home rows get the colored pin only, matching their "no tonal containers" design. The outline is a non-interactive overlay, so content doesn't shift.

Verification

• Contrast, computed from the real palette generators (three Codex review rounds):
  • Web: across 140 built-in theme × mode × contrast-setting × row-state combinations, the pin is at least 5.53:1, never below the old pin, and at least 3.04:1 on faded working rows. The outline (1.32–1.75:1) stays fainter than both the focus and file-drop rings.
  • Mobile: every built-in pin is at least 3:1 (at least 4.5:1 across rest/hover/selected) and keeps its hue.
• Focused checks: web lint (0 errors), format, web typecheck, sidebar tests (369 passed) and theme tests (147 passed). Mobile typecheck, lint, Uniwind generator drift check, and mobile theme, row and Material You tests all pass, including a new Material You pin test.
• Before/after screenshots: web light + dark, iOS and Android (to attach, captured with neutral showcase data)

Known limits

• Custom web themes: a theme whose focus color nearly matches the sidebar can still give a low-contrast pin, since CSS can't solve contrast. In those themes the focus ring has the same problem. A generated-theme sweep found 24% of inputs below 3:1, down from 100% with the old grey pin.
• Settled rows: a pinned thread that is settled keeps the dimmed pin at rest, because settled rows recede on purpose. The outline still shows.
• Not changed: the legacy sidebar and sidebar search results show no pin state today, and stay that way. Mobile snoozed and settled rows don't show pins, which was already the case before this change.
• Forced colors: in forced-colors mode the outline (a box-shadow) disappears; the pin glyph remains.

Implemented with Claude Opus 5.5 in Claude Code (T3 Code); reviewed by GPT-6.1-Sol (xhigh) in Codex.

🤖 Generated with Claude Code