feat(web): customize diff colors and markers

[SunkenInTime]

<!--
Thank you for contributing to T3 Code! Please note that only maintainers have merge access. Your PR will be reviewed by the team.

Important: We generally do not accept PRs that add new features, new providers, or introduce significant architectural changes without prior discussion.
For those ideas, please open an issue or proposal first so we can align on scope and approach.
-->

What Changed

• Added Typography settings for red/green or orange/blue diff colors and bar or classic +/- line indicators.
• Applied the selected appearance to the main diff panel, pull request review diffs, and inline review comment diffs.
• Persisted both choices in unified settings with backward-compatible defaults, reset behavior, settings search, and concise user documentation.

Why

Diff colors and line indicators were fixed in the renderer, so users could not choose a more distinguishable palette or familiar patch markers. These settings keep the existing red/green bars as the default while offering accessible orange/blue colors and classic markers everywhere web/desktop diffs render.

UI Changes

Before

After

Checklist

• This PR is small and focused
• I explained what changed and why
• I included before/after screenshots for any UI changes
• I included a video for animation/interaction changes (not applicable; no motion or timing changes)

Verification:

• vp run --filter @t3tools/web typecheck
• git diff --check
• Live web pass for both selectors and the shared diff preview

Generated with GPT-5.6-sol in the Codex harness.

Note

Add user-configurable diff color scheme and marker style to appearance settings

• Adds two new ClientSettings fields: diffColorScheme ("red-green" | "orange-blue", default "red-green") and diffIndicatorStyle ("bars" | "classic", default "bars").
• Adds a DiffAppearanceRows settings UI section with live preview in both advanced and simplified font settings panels.
• Applies the selected color scheme globally via DiffAppearanceSync on document.documentElement using CSS custom properties --t3-diff-addition-color and --t3-diff-deletion-color.
• Updates DIFF_SURFACE_THEME_UNSAFE_CSS and diff stat components (DiffStatLabel, PullRequestDiffStat) to derive colors from these custom properties.
• Adds "Diff colors" and "Diff markers" entries to the settings search index.

^{Macroscope summarized b0c6753.}

---

Note

Low Risk
Display-only client settings with backward-compatible defaults; no auth, data, or API contract changes beyond optional settings fields.

Overview
Users can pick diff colors (red/green vs orange/blue) and diff markers (bars vs classic +/−) from Settings → Appearance. Both values live on ClientSettings with defaults red-green and bars, plus reset, search entries, and short user docs.

Rendering: getDiffColorSchemeClassName sets --t3-diff-addition-color / --t3-diff-deletion-color; DIFF_SURFACE_THEME_UNSAFE_CSS maps those into Pierre’s addition/deletion tints. StyledDiffCodeView and new StyledFileDiff read useClientSettings() for scheme class names and diffIndicators. DiffAppearanceSync applies the scheme classes on document.documentElement so stats outside shadow roots match. DiffStatLabel, PR diff stats, and timeline review diffs (now StyledFileDiff) use the same tokens.

Settings UX: DiffAppearanceRows hosts the two selects with DiffPreview (renamed from CodeFontPreview) that SSR-preloads a patch keyed by theme + indicator style; diff preview moved out of the monospace font row into dedicated diff appearance rows.

^{Reviewed by Cursor Bugbot for commit b0c6753. Bugbot is set up for automated code reviews on this repo. Configure here.}

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro Plus

Run ID: e99f5cce-02a2-4c5d-9032-2b689592b24a

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

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

[macroscopeapp]

Two consistency findings on the new diff appearance settings. Everything else (palette class plumbing, StyledFileDiff extraction, settings routing/search wiring) looks consistent with the existing patterns.

^{Posted via Macroscope — UI Consistency}

[macroscopeapp]

Two consistency findings in the new Appearance diff settings UI (apps/web/src/components/settings/SettingsPanels.tsx). Everything on the diff-rendering side (StyledDiffCodeView.tsx, diffRendering.ts) reads consistently: the palette is routed through --t3-diff-* with --success/--destructive fallbacks, so FilePreviewPanel's reuse of DIFF_SURFACE_THEME_UNSAFE_CSS is unaffected, and diffIndicators: "bars" keeps the existing [data-indicators="bars"] selected-line rules matching.

^{Posted via Macroscope — UI Consistency}

[macroscopeapp]

Reviewed the diff-appearance settings UI and the shared diff surface wrapper. The palette plumbing (getDiffColorSchemeClassName → --t3-diff-* → --diffs-*-base/tint overrides) is now owned in one place and StyledFileDiff reuses it, which resolves the earlier duplication and base-color concerns. Two findings remain on the new Appearance tiles' Toggle class string.

^{Posted via Macroscope — UI Consistency}

[macroscopeapp]

Approvability

Verdict: Not approved

Macroscope's review found this PR not approvable — This PR introduces new user-facing settings for diff color schemes and indicator styles, constituting new capability rather than a minor adjustment. The review comments about UI consistency appear addressed in the final commit.

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

Dismissing prior approval to re-evaluate af66c02

[macroscopeapp]

Two new Appearance selects and the standalone diff preview don't follow the settings row conventions in this file. Details inline.

^{Posted via Macroscope — UI Consistency}

Dismissing prior approval to re-evaluate 13f3b9f

[macroscopeapp]

UI consistency review of the diff appearance settings. Three findings: a preview that no longer sits with the setting it demonstrates, diff-panel chrome that stays red/green when the orange/blue palette is selected, and the new StyledFileDiff wrapper landing without a focused test for its forwarding contract. The Select controls now match the shared settings-row pattern (w-full sm:w-40, SettingsRow children slot), so earlier findings on those look resolved.

^{Posted via Macroscope — UI Consistency}

[macroscopeapp]

One finding: the new diff palette stops at the diff surface, so the app-side +/- counts rendered directly above it keep the red/green colors. Details inline.

^{Posted via Macroscope — UI Consistency}

[macroscopeapp]

One consistency gap in the new diff-palette contract, plus a small dead prop. Details inline.

^{Posted via Macroscope — UI Consistency}

[cursor]

Cursor Bugbot has reviewed your changes using high effort and found 1 potential issue.

^{❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.}

^{Reviewed by Cursor Bugbot for commit 0c1e164. Configure here.}

[SunkenInTime]

@macroscope-app review

[macroscopeapp]

Sorry, I'm unable to act on this request because you do not have permissions within this repository.