feat(desktop): add project color mode functionality#1305
Conversation
- Introduced a new `colorMode` property for projects, allowing users to choose between "border" and "background" styles. - Updated project settings UI to include color mode selection. - Modified project-related components to support and display the selected color mode. - Added database migration to include the new `color_mode` column in the projects table. - Enhanced project thumbnail rendering based on the selected color mode. This feature improves the customization options for project appearances in the application.
📝 WalkthroughWalkthroughAdds a per-project Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant UI as Desktop UI
participant TRPC as TRPC Router
participant DB as Local DB
User->>UI: change color style (border/background)
UI->>TRPC: patch project { colorMode }
TRPC->>DB: persist color_mode update
DB-->>TRPC: ack
TRPC-->>UI: updated project payload (includes colorMode)
UI->>UI: re-render ProjectThumbnail / Header / Sidebar with new colorMode
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~22 minutes Possibly related PRs
Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing touches
🧪 Generate unit tests (beta)
No actionable comments were generated in the recent 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. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Fix all issues with AI agents
In
`@apps/desktop/src/renderer/screens/main/components/WorkspaceSidebar/ProjectSection/ProjectSection.tsx`:
- Line 29: Replace the inline union type for the colorMode prop with the shared
ProjectColorMode type: add an import for ProjectColorMode from
"@superset/local-db" at the top of ProjectSection.tsx and change the prop
declaration (currently colorMode: "border" | "background") to use
ProjectColorMode; update any related prop usages in ProjectSection /
ProjectHeader to ensure they accept the imported type.
🧹 Nitpick comments (10)
apps/desktop/src/lib/trpc/routers/workspaces/procedures/query.ts (2)
152-164: Use theProjectColorModetype instead of inline literal union.Line 159 duplicates the type definition as
"border" | "background". Import and useProjectColorModefrom@superset/local-dbto stay DRY and ensure the type updates automatically if new modes are added.♻️ Proposed fix
Add to imports at line 1:
import { projects, workspaces, worktrees, type ProjectColorMode } from "@superset/local-db";Then update line 159:
- colorMode: "border" | "background"; + colorMode: ProjectColorMode;
183-197: Hardcoded"border"fallback — use the named constant.Line 189 uses a hardcoded
"border"string as the fallback forcolorMode. Import and usePROJECT_COLOR_MODE_DEFAULTfrom the shared constants to keep the default value centralized.♻️ Proposed fix
Add to imports:
import { PROJECT_COLOR_MODE_DEFAULT } from "@shared/constants/project-colors";Then:
- colorMode: project.colorMode ?? "border", + colorMode: project.colorMode ?? PROJECT_COLOR_MODE_DEFAULT,As per coding guidelines, "Extract hardcoded magic numbers, strings, and enums to named constants at module top instead of leaving them inline in logic."
apps/desktop/src/shared/constants/project-colors.ts (1)
19-25: UsePROJECT_COLOR_MODE_DEFAULTconstant instead of hardcoding "border" fallbacks.
PROJECT_COLOR_MODE_DEFAULTis defined in this file, but the fallback inapps/desktop/src/lib/trpc/routers/workspaces/procedures/query.ts:189hardcodes?? "border"instead of using the constant. Additionally, similar hardcoded fallbacks appear inProjectThumbnail.tsx:59andProjectSettings.tsx:276. Import and usePROJECT_COLOR_MODE_DEFAULTacross these locations to maintain the default in one place and align with the guideline to extract hardcoded strings to named constants.apps/desktop/src/lib/trpc/routers/projects/projects.ts (2)
782-786: Inconsistent indentation for patch fields.Lines 782–785 are indented one level less than the sibling fields
nameandcolor(lines 774–781) insidez.object({...}). Same issue on lines 812–817 in the.set()call. Functionally harmless, but visually misleading.🔧 Suggested fix
- branchPrefixMode: z.enum(BRANCH_PREFIX_MODES).nullable().optional(), - branchPrefixCustom: z.string().nullable().optional(), - hideImage: z.boolean().optional(), - colorMode: z.enum(PROJECT_COLOR_MODES).nullable().optional(), + branchPrefixMode: z.enum(BRANCH_PREFIX_MODES).nullable().optional(), + branchPrefixCustom: z.string().nullable().optional(), + hideImage: z.boolean().optional(), + colorMode: z.enum(PROJECT_COLOR_MODES).nullable().optional(),
812-817: Same indentation inconsistency in the.set()call.These spread entries are indented one level less than their siblings on lines 802–811.
🔧 Suggested fix
- ...(input.patch.hideImage !== undefined && { - hideImage: input.patch.hideImage, - }), - ...(input.patch.colorMode !== undefined && { - colorMode: input.patch.colorMode, - }), + ...(input.patch.hideImage !== undefined && { + hideImage: input.patch.hideImage, + }), + ...(input.patch.colorMode !== undefined && { + colorMode: input.patch.colorMode, + }),apps/desktop/src/renderer/routes/_authenticated/settings/project/$projectId/components/ProjectSettings/ProjectSettings.tsx (1)
276-276: UsePROJECT_COLOR_MODE_DEFAULTinstead of the hardcoded"border".A
PROJECT_COLOR_MODE_DEFAULTconstant already exists inshared/constants/project-colors.ts. Using the magic string here diverges from that single source of truth.🔧 Suggested fix
Update the import:
import { PROJECT_COLOR_DEFAULT, + PROJECT_COLOR_MODE_DEFAULT, PROJECT_COLOR_MODE_LABELS, PROJECT_COLORS, } from "shared/constants/project-colors";Then:
- value={project.colorMode ?? "border"} + value={project.colorMode ?? PROJECT_COLOR_MODE_DEFAULT}As per coding guidelines, "Extract hardcoded magic numbers, strings, and enums to named constants at module top instead of leaving them inline in logic".
apps/desktop/src/renderer/screens/main/components/WorkspaceSidebar/ProjectSection/ProjectThumbnail/ProjectThumbnail.tsx (4)
59-59: UsePROJECT_COLOR_MODE_DEFAULTfor the default value.
PROJECT_COLOR_MODE_DEFAULTis already imported-adjacent (the file imports fromshared/constants/project-colors). Hardcoding"border"here duplicates the default.🔧 Suggested fix
Update the import:
-import { PROJECT_COLOR_DEFAULT } from "shared/constants/project-colors"; +import { PROJECT_COLOR_DEFAULT, PROJECT_COLOR_MODE_DEFAULT } from "shared/constants/project-colors";- colorMode = "border", + colorMode = PROJECT_COLOR_MODE_DEFAULT,As per coding guidelines, "Extract hardcoded magic numbers, strings, and enums to named constants at module top instead of leaving them inline in logic".
38-53: Consider extracting color utility functions to a shared module.
getRelativeLuminanceandgetContrastTextColorare general-purpose color utilities. If contrast-based text coloring is needed elsewhere (e.g., other badge or label components), these would benefit from living in a shared utility file. Fine to keep co-located for now if this is the only consumer.Also, the luminance threshold
0.4(line 50) and alpha values (0.85,0.95) are magic numbers — consider naming them for clarity.
86-91:getBorderStyleis called once — a plain expression would be simpler.The function is immediately invoked once and assigned. A conditional expression or simple ternary would reduce indirection.
🔧 Suggested simplification
- const getBorderStyle = () => { - if (isBackground || !hasCustomColor) return undefined; - return { borderColor: hexToRgba(projectColor, 0.6) }; - }; - - const borderStyle = getBorderStyle(); + const borderStyle = + !isBackground && hasCustomColor + ? { borderColor: hexToRgba(projectColor, 0.6) } + : undefined;
115-132: Same note:getFallbackStyleis invoked once — inline or ternary would be simpler.Similar to
getBorderStyle, this function is created and immediately called. Consider inlining for readability.
|
Closing this as we have remove image |
1 participant
colorModeproperty for projects, allowing users to choose between "border" and "background" styles.color_modecolumn in the projects table.Fixes #1185
Screen.Recording.2026-02-08.at.6.33.19.PM.mov
Summary by CodeRabbit
New Features
Refactor
Removed