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.

Screenshots

Settings toggle (off by default)

Auto assign unique(if available) colors

Manually change the colors from a pre-defined list

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
Medium risk: touches core sidebar rendering and client settings persistence, which could introduce UI regressions or unexpected re-renders, but changes are local-only and not security-sensitive.

Overview
Adds a new opt-in client setting, sidebarProjectColorizing, plus persisted sidebarProjectColorOverrides, to tint each sidebar project row and let users pick/clear a per-project color from a palette.

Implements stable auto-color assignment with collision avoidance in new sidebarProjectColors.ts, wires the computed color identities through Sidebar.tsx (row tint/padding, clickable color-dot menu, hides the thread-list border when colorizing is enabled), and updates Settings → General to toggle/reset both the flag and any saved overrides.

Updates settings contracts (SidebarProjectColor literals + schema/patch fields) and adjusts desktop/web persistence test fixtures; adds unit tests for the color-map builder.

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

Note

Add sidebar project color settings with per-project color overrides

Adds sidebarProjectColorizing (boolean) and sidebarProjectColorOverrides (record) to ClientSettingsSchema in settings.ts, with defaults of disabled and empty.
Implements buildSidebarProjectColorMap in sidebarProjectColors.ts using FNV-1a hashing for stable auto-color assignment and a two-pass algorithm that respects user overrides.
Adds a ProjectColorDot component to Sidebar.tsx that renders a palette picker per project row, applying tint classes and hiding thread list borders when a color is active.
Adds a toggle and reset control for sidebar project colors in the General settings panel in SettingsPanels.tsx.

^{Macroscope summarized d540b27.}

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: 6bf41679-157f-40ff-a287-fd808f72721f

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.}

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

Approvability

Verdict: Needs human review

This PR introduces a new user-facing feature (sidebar project colors with interactive color picker) rather than a bug fix or mechanical change. New features with new components and visual behavior warrant human review to validate the design and implementation choices.

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

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

screenshots pls

AfzalH · 2026-05-01T09:12:18Z

screenshots pls

Added to the description.

Dismissing prior approval to re-evaluate 3de7f17

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 61b70df. Configure here.}

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 <noreply@anthropic.com>

`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 <noreply@anthropic.com>

The per-row reset for "Sidebar project colors" only cleared the toggle, but `changedSettingLabels` also flags the row as changed when overrides exist. That mismatch left orphaned overrides reachable only via a full settings reset. Show the per-row reset whenever either the toggle or the overrides are non-default, and clear both fields together so the row's two pieces of state always reset in lockstep.

The cloud badge for remote-only projects moves from `right-1.5` to `right-7` on `max-sm` and stays visible even on hover, so the color dot's fixed `right-7` position landed on top of it. Shift the dot one slot further left (`max-sm:right-12`) only when a cloud badge is present, so non-remote projects keep the natural position.

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 previously approved these changes Apr 28, 2026

View reviewed changes

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

AfzalH force-pushed the t3code/repo-first-look branch from a421492 to ddb5b9f Compare May 1, 2026 09:14

cursor Bot reviewed May 1, 2026

View reviewed changes

Comment thread apps/web/src/components/settings/SettingsPanels.tsx

cursor Bot reviewed May 1, 2026

View reviewed changes

Comment thread apps/web/src/components/Sidebar.tsx

This comment was marked as off-topic.

Sign in to view

AfzalH force-pushed the t3code/repo-first-look branch 3 times, most recently from 289c780 to 61b70df Compare May 6, 2026 12:50

cursor Bot reviewed May 6, 2026

View reviewed changes

Comment thread apps/web/src/components/settings/SettingsPanels.tsx

AfzalH and others added 4 commits May 12, 2026 13:59

AfzalH force-pushed the t3code/repo-first-look branch from 61b70df to d540b27 Compare May 12, 2026 12:02

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 4 commits into
pingdotgg: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!

Uh oh!

macroscopeapp Bot commented Apr 28, 2026 •

edited

Loading

Uh oh!

juliusmarminge commented Apr 30, 2026

Uh oh!

AfzalH commented May 1, 2026 •

edited

Loading

Uh oh!

Uh oh!

Uh oh!

This comment was marked as off-topic.

Uh oh!

cursor Bot left a comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 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

Screenshots

Settings toggle (off by default)

Auto assign unique(if available) colors

Manually change the colors from a pre-defined list

UX details

Files

Test plan

Add sidebar project color settings with per-project color overrides

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!

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!

AfzalH commented May 1, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Uh oh!

This comment was marked as off-topic.

Uh oh!

cursor Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 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

AfzalH commented May 1, 2026 •

edited

Loading