Add sidebar project colors setting by AfzalH · Pull Request #2381 · pingdotgg/t3code

AfzalH · 2026-04-28T13:34:43Z

Summary

Adds an opt-in Sidebar project colors client setting (Settings → General). When enabled, each visible project group is tinted with a muted hue and gets a clickable color dot in the header.
Auto-colors are picked from a 10-entry palette via FNV-1a hash with collision avoidance: in a typical sidebar, no two adjacent projects share a hue until the palette is exhausted. Explicit overrides claim their slot first; auto-projects are processed in stable identity order so adding/removing a project doesn't reshuffle existing colors.
Per-project picks are persisted in sidebarProjectColorOverrides (record keyed by physical project key, same identity used for grouping overrides). Clicking the color dot opens a swatch popover; "Auto" clears the override.

Why

With the default thin-line guide, adjacent project groups visually blend together. Tinting each group with its own muted hue gives a clearer grouping cue, and lets users tag projects they switch between often with distinguishing colors.

UX details

Tints use very low alpha (bg-{color}-500/8 light / bg-{color}-400/10 dark) — same hue as the dot, just heavily muted.
Dot is rendered as a transparent interior with a saturated colored ring, so its interior shows the row's color and only the border carries the identity.
The vertical thread-list guide line is hidden while colorizing is on (the tint already groups the rows).
Colored block has uniform p-1 padding so it doesn't sit flush against neighbours.
Restore Defaults clears both the toggle and any saved per-project picks.

Files

packages/contracts/src/settings.ts — SidebarProjectColor literal + two new ClientSettings fields (and patch entries).
apps/web/src/sidebarProjectColors.ts (new) — palette, hash, buildSidebarProjectColorMap with collision avoidance.
apps/web/src/sidebarProjectColors.test.ts (new) — 13 unit tests.
apps/web/src/components/Sidebar.tsx — ProjectColorDot component, color identity plumbing, parent-level stable color-select handler.
apps/web/src/components/settings/SettingsPanels.tsx — new SettingsRow + restore-defaults wiring.
apps/desktop/src/clientPersistence.test.ts, apps/web/src/localApi.test.ts — fixture updates for the two new fields.

Test plan

Note: Before/after screenshots and a short interaction video to come — happy to add inline.

🤖 Generated with Claude Code

Note

Medium Risk
Introduces new persisted client settings fields and sidebar rendering paths; risk is mainly around settings decoding/patching compatibility and UI regressions in the sidebar list/drag interactions.

Overview
Adds an opt-in “Sidebar project colors” feature that tints each sidebar project group and shows a clickable color-dot menu to set/clear per-project color overrides.

Extends ClientSettings with sidebarProjectColorizing and sidebarProjectColorOverrides (plus patch support and typed SidebarProjectColor literals), implements deterministic auto-color assignment with override priority in new sidebarProjectColors.ts (with unit tests), and wires the toggle into Settings plus updates persistence/local API fixtures to include the new fields.

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

Note

Add per-project color tinting to the sidebar with a settings toggle

Adds a sidebarProjectColorizing toggle in General Settings and a sidebarProjectColorOverrides record to client settings (via packages/contracts/src/settings.ts).
Implements buildSidebarProjectColorMap using FNV-1a hashing to assign stable, collision-avoiding auto colors from a 10-color Tailwind palette; explicit per-project overrides take priority.
Renders a ProjectColorDot picker next to each project's new-thread button in the sidebar, allowing users to set or clear a color override; selected color is persisted to client settings.
Applies tint classes to both draggable and non-draggable project rows and hides the thread list left border when a tint is active.

^{Macroscope summarized a421492.}

coderabbitai · 2026-04-28T13:34:52Z

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

Run ID: ea8b2248-0ab7-4cd0-afe3-6b496bdc4cc7

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

✨ Finishing Touches

🧪 Generate unit tests (beta)

Create PR with unit tests

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

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

cursor

Cursor Bugbot has reviewed your changes 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 4793eac. Configure here.}

macroscopeapp · 2026-04-28T13:39:20Z

Approvability

Verdict: Approved

Adds an opt-in cosmetic feature to colorize sidebar project groups. The setting is off by default, changes are purely visual (Tailwind tint classes), and comprehensive tests are included. No functional behavior changes when the feature is disabled.

^{You can customize Macroscope's approvability policy. Learn more.}

Adds an opt-in "Sidebar project colors" client setting that tints each visible project group with a muted hue and renders a clickable color dot in the project header for picking a custom color. - New `SidebarProjectColor` literal in `@t3tools/contracts/settings`, plus `sidebarProjectColorizing` toggle and `sidebarProjectColorOverrides` record on `ClientSettings` (and the patch shape). - `sidebarProjectColors.ts` owns the palette → Tailwind class mapping, the FNV-1a auto-color hash, and `buildSidebarProjectColorMap`, which spreads auto-colors across the palette so adjacent projects don't share a hue until the palette is exhausted (with explicit overrides claiming their slot first). - Sidebar renders the row tint on the group `<li>`, hides the vertical guide line under the thread list while colorizing is on, and adds uniform padding to the colored block. - The color dot uses a transparent interior with a saturated hue-matched ring so it visually shows the row's color while only the border carries the identity. Click to open a swatch popover; "Auto" clears the override. - Restore Defaults clears both the toggle and any saved per-project picks. Co-Authored-By: Claude Opus 4.7 <[email protected]>

`autoSidebarProjectColor` and `resolveSidebarProjectColor` weren't used by any production caller — `buildSidebarProjectColorMap` re-implemented the same hash + override-fallback logic inline. Cursor Bugbot flagged the duplication risk. - Remove both exports. - Drop the 5 helper-specific tests (their behaviors are still covered by the builder tests: determinism via "preserves color when later-sorted added", override priority via "records the explicit override", auto fallback via "leaves auto entries with undefined override"). - Replace the spread test with a builder-driven version that asserts the full palette gets used across 24 distinct seeds. - Replace the colliding-seed lookup in the walk-past-overrides test with an `autoColorForSeed` helper that drives the builder with a single project, so the test doesn't depend on the now-removed export. Co-Authored-By: Claude Opus 4.7 <[email protected]>

juliusmarminge · 2026-04-30T17:58:57Z

screenshots pls

github-actions Bot added vouch:unvouched PR author is not yet trusted in the VOUCHED list. size:XL 500-999 changed lines (additions + deletions). labels Apr 28, 2026

cursor Bot reviewed Apr 28, 2026

View reviewed changes

Comment thread apps/web/src/sidebarProjectColors.ts Outdated

macroscopeapp Bot approved these changes Apr 28, 2026

View reviewed changes

AfzalH and others added 2 commits April 30, 2026 18:07

AfzalH force-pushed the t3code/repo-first-look branch from 31952ac to a421492 Compare April 30, 2026 16:10

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add sidebar project colors setting#2381

Add sidebar project colors setting#2381
AfzalH wants to merge 2 commits intopingdotgg:mainfrom
AfzalH:t3code/repo-first-look

AfzalH commented Apr 28, 2026 •

edited by macroscopeapp Bot

Loading

Uh oh!

coderabbitai Bot commented Apr 28, 2026 •

edited

Loading

Review skipped

Uh oh!

cursor Bot left a comment

Uh oh!

Uh oh!

macroscopeapp Bot commented Apr 28, 2026 •

edited

Loading

Uh oh!

juliusmarminge commented Apr 30, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

AfzalH commented Apr 28, 2026 • edited by macroscopeapp Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Why

UX details

Files

Test plan

Add per-project color tinting to the sidebar with a settings toggle

Uh oh!

coderabbitai Bot commented Apr 28, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Review skipped

Uh oh!

cursor Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

macroscopeapp Bot commented Apr 28, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Approvability

Uh oh!

juliusmarminge commented Apr 30, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

AfzalH commented Apr 28, 2026 •

edited by macroscopeapp Bot

Loading

coderabbitai Bot commented Apr 28, 2026 •

edited

Loading

macroscopeapp Bot commented Apr 28, 2026 •

edited

Loading