Add appearance preference previews

[morgmart]

Summary

• Replace the Link previews and Thread layout dropdowns with the shared segmented control from Add font size and conversation density preferences #5644.
• Pair each setting with a real, inert preview: production Compact/Rich link cards and a simplified Focus/Split thread diagram.
• Keep scrub previews local to Settings so only a completed selection updates the saved preference and real app behavior.
• Keep each setting and preview responsive as one grouped unit, with focused light/dark and narrow/wide coverage.

Dependency

• Stacked on Add font size and conversation density preferences #5644, which provides the typography/density foundation, shared SegmentedControl, and responsive SettingsOptionRow.
• After Add font size and conversation density preferences #5644 merges, this PR should be retargeted/rebased onto main.

Validation

• pnpm typecheck
• pnpm check:px-text
• pnpm check:file-sizes
• pnpm exec playwright test tests/e2e/appearance-previews.spec.ts --project=smoke (3 passed)
• Focused existing Appearance coverage (2 passed)
• Pre-push desktop checks, typecheck, tests, and Tauri checks

[morgmart]

Rich link preview — dark, narrow

The grouped setting stacks responsively; illustration details use the active semantic foreground token.

Focus thread layout — dark, narrow

The overlaid thread and channel surfaces use semantic background and muted tokens for quieter dark-mode depth.

Compact link preview — light, wide

The compact card uses soft semantic background shapes against the Buzz gradient.

Split thread layout — light, wide

The split diagram preserves the side-by-side relationship and shared visual language.

[jedwards27]

:bot: Jude’s code review agent

Verdict: COMMENT — code clear; do not merge until required exact-head CI is rerun successfully
Reviewed: 93114c9c65138397de39729fde0a816eb9f314ab..bb13eac0164ca3b3ba2460f0b378c73fd74e8290 (exact head bb13eac0164ca3b3ba2460f0b378c73fd74e8290)
Risk: low code risk; merge-gate risk remains because required Desktop jobs were cancelled

Behavior/contracts traced

• The segmented control separates transient scrub preview from committed selection. Cancellation on blur, pointer cancel/lost capture, and unmount clears transient state; durable preference setters remain behind onValueChange (desktop/src/shared/ui/segmented-control.tsx:72-101,138-156,202-208; desktop/src/features/settings/AppearanceSettingsControls.tsx:340-374,605-649).
• Existing device-local, best-effort persistence and global thread-view scope are unchanged (desktop/src/shared/lib/linkPreviewStylePreference.ts:40-47; desktop/src/shared/lib/threadViewModePreference.ts:11-14,61-73). No relay, tenancy, auth, IPC, or native persistence boundary changes.
• The extracted presentation component preserves the production wrapper’s media URL rewrite and saved-preference behavior (desktop/src/shared/ui/link-preview-attachment.tsx:24-85). Rich-card expansion still defaults on in production and is disabled only in the inert Settings sample (desktop/src/shared/ui/rich-link-preview-attachment.tsx:235-263,335-349; AppearanceSettingsControls.tsx:316-333).
• The sample uses static data and an inline SVG, adds no network/native image work, and is excluded from interaction/accessibility traversal with aria-hidden plus inert (AppearanceSettingsControls.tsx:256-335). Native buttons in a labelled fieldset, aria-pressed, visible focus, reduced-motion handling, and normal keyboard activation preserve the accessibility contract (segmented-control.tsx:81-101,103-215).
• Stacked-base risk was separated from the PR’s own single-commit delta: the commit changes 8 Desktop files (+550/-174); unrelated mobile changes appear only in the misleading sibling-branch two-dot comparison. The shared SegmentedControl matches merged PR #5644 commit 7e2651791.

Findings: No material code, product/UI, interaction, responsive, accessibility, persistence, security, or integration defect found.

Validation at clean matching HEAD

• just desktop-typecheck — PASS.
• just desktop-test — PASS, 5,037/5,037.
• pnpm -C desktop build:e2e — PASS.
• pnpm -C desktop exec playwright test tests/e2e/appearance-previews.spec.ts --project=smoke — PASS, 3/3. Coverage includes transient preview without persistence, blur rollback, committed selection persistence, inert focus exclusion, expand-control suppression, and narrow geometry.
• Four generated exact-artifact screenshots were inspected across dark/light, narrow/wide, and all preview modes: controls remained grouped; labels/descriptions were readable; previews were unclipped; selected states were distinct.
• Fresh review preflight found the exact remote head unchanged and no unresolved review threads.

Merge-gate blocker
GitHub run 32219145771 at this head is cancelled: Desktop Core, Desktop Smoke E2E shard 3, and Desktop E2E Integration shard 1/2 were cancelled, causing the aggregate Desktop checks to fail. Passing sibling shards, macOS build, and local exact-head evidence indicate no reproduced code failure, but they do not turn incomplete required CI green. Rerun the cancelled required jobs before merge.

Residual risk: No native Tauri window or Windows/Linux rendering pass was run. This frontend-only change has strong mock-bridge E2E and visual evidence, but platform-native rendering remains unverified.

[jedwards27]

:bot: Jude’s code review agent

Verdict: APPROVE
Reviewed: 93114c9c65138397de39729fde0a816eb9f314ab..bb13eac0164ca3b3ba2460f0b378c73fd74e8290 (exact head bb13eac0164ca3b3ba2460f0b378c73fd74e8290)
Risk: medium — user-visible settings controls and a shared interaction primitive, bounded to Desktop renderer state

The prior code review remains clear at the unchanged exact head. No material systems/integration, persistence, security, product/UI, interaction, responsive, or accessibility defect was found. The change preserves commit-only preference updates while transient pointer scrubbing remains local; cancellation clears transient state; existing device-local persistence, production media rewriting, and saved-preference behavior remain unchanged. The inert sample adds no relay, IPC, native persistence, tenancy, auth, or network boundary.

Exact-head local validation previously passed:

• just desktop-typecheck
• just desktop-test — 5,037/5,037
• pnpm -C desktop build:e2e
• pnpm -C desktop exec playwright test tests/e2e/appearance-previews.spec.ts --project=smoke — 3/3, covering transient preview without persistence, rollback, committed selection, inert focus exclusion, expand-control suppression, and responsive geometry

The former merge-gate caveat is resolved. GitHub workflow run 32219145771, attempt 2, completed successfully at this exact head. The previously cancelled Desktop Core, Desktop Smoke E2E (3), and Desktop E2E Integration (1/2) jobs now pass; aggregate Desktop and Desktop E2E Integration checks pass; gh pr checks 6193 --required exits 0.

Evidence provenance was rechecked: the retained attestation pins both initial and final HEAD to bb13eac..., and its run began after the commit was created. The retained build and Playwright logs are reopenable. Four screenshots were inspected during the original exact-head review but were not retained, so they are not being presented here as independently reopenable artifacts.

Residual risk: no native Tauri-window or Windows/Linux rendering pass was run. For this frontend-only change, exact-head mock-bridge E2E, local full Desktop tests, macOS build CI, and successful Desktop integration CI provide proportionate evidence.