Skip to content

feat(desktop): add project color mode functionality #1305

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
Ipriyankrajai wants to merge 3 commits into from
Closed

feat(desktop): add project color mode functionality #1305

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
b91f5a2
feat(desktop): add project color mode functionality
Ipriyankrajai Feb 8, 2026
e780c2b
fix: cr comment
Ipriyankrajai Feb 8, 2026
8dcfbc2
fix: nit cmt
Ipriyankrajai Feb 8, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions apps/desktop/src/lib/trpc/routers/projects/projects.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import { access } from "node:fs/promises";
import { basename, join } from "node:path";
import {
BRANCH_PREFIX_MODES,
PROJECT_COLOR_MODES,
projects,
type SelectProject,
settings,
Expand Down Expand Up @@ -781,6 +782,7 @@ export const createProjectsRouter = (getWindow: () => BrowserWindow | null) => {
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(),
}),
}),
)
Expand Down Expand Up @@ -810,6 +812,9 @@ export const createProjectsRouter = (getWindow: () => BrowserWindow | null) => {
...(input.patch.hideImage !== undefined && {
hideImage: input.patch.hideImage,
}),
...(input.patch.colorMode !== undefined && {
colorMode: input.patch.colorMode,
}),
lastOpenedAt: Date.now(),
})
.where(eq(projects.id, input.id))
Expand Down
4 changes: 4 additions & 0 deletions apps/desktop/src/lib/trpc/routers/workspaces/procedures/query.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,9 @@
import type { ProjectColorMode } from "@superset/local-db";
import { projects, workspaces, worktrees } from "@superset/local-db";
import { TRPCError } from "@trpc/server";
import { eq, isNotNull, isNull } from "drizzle-orm";
import { localDb } from "main/lib/local-db";
import { PROJECT_COLOR_MODE_DEFAULT } from "shared/constants/project-colors";
import { z } from "zod";
import { publicProcedure, router } from "../../..";
import { getWorkspace } from "../utils/db-helpers";
Expand Down Expand Up @@ -156,6 +158,7 @@ export const createQueryProcedures = () => {
id: string;
name: string;
color: string;
colorMode: ProjectColorMode;
tabOrder: number;
githubOwner: string | null;
mainRepoPath: string;
Expand Down Expand Up @@ -185,6 +188,7 @@ export const createQueryProcedures = () => {
id: project.id,
name: project.name,
color: project.color,
colorMode: project.colorMode ?? PROJECT_COLOR_MODE_DEFAULT,
// biome-ignore lint/style/noNonNullAssertion: filter guarantees tabOrder is not null
tabOrder: project.tabOrder!,
githubOwner: project.githubOwner ?? null,
Expand Down
117 changes: 78 additions & 39 deletions ..._authenticated/settings/project/$projectId/components/ProjectSettings/ProjectSettings.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import type { BranchPrefixMode } from "@superset/local-db";
import type { BranchPrefixMode, ProjectColorMode } from "@superset/local-db";
import { Input } from "@superset/ui/input";
import { Label } from "@superset/ui/label";
import {
Expand All @@ -16,6 +16,8 @@ import { HiOutlineCog6Tooth, HiOutlinePaintBrush } from "react-icons/hi2";
import { electronTrpc } from "renderer/lib/electron-trpc";
import {
PROJECT_COLOR_DEFAULT,
PROJECT_COLOR_MODE_DEFAULT,
PROJECT_COLOR_MODE_LABELS,
PROJECT_COLORS,
} from "shared/constants/project-colors";
import { resolveBranchPrefix, sanitizeSegment } from "shared/utils/branch";
Expand Down Expand Up @@ -214,49 +216,86 @@ export function ProjectSettings({ projectId }: ProjectSettingsProps) {
title="Appearance"
description="Customize this project's sidebar look."
>
<div className="flex items-center justify-between">
<div className="flex items-center gap-2">
{PROJECT_COLORS.map((color) => {
const isDefault = color.value === PROJECT_COLOR_DEFAULT;
const isSelected = project.color === color.value;
return (
<button
key={color.value}
type="button"
title={color.name}
onClick={() =>
updateProject.mutate({
id: projectId,
patch: { color: color.value },
})
}
className={cn(
"size-6 rounded-full border-2 transition-transform hover:scale-110",
isSelected
? "border-foreground scale-110"
: "border-transparent",
isDefault && "bg-muted",
)}
style={
isDefault ? undefined : { backgroundColor: color.value }
}
/>
);
})}
<div className="space-y-3">
<div className="flex items-center justify-between">
<div className="flex items-center gap-2">
{PROJECT_COLORS.map((color) => {
const isDefault = color.value === PROJECT_COLOR_DEFAULT;
const isSelected = project.color === color.value;
return (
<button
key={color.value}
type="button"
title={color.name}
onClick={() =>
updateProject.mutate({
id: projectId,
patch: { color: color.value },
})
}
className={cn(
"size-6 rounded-full border-2 transition-transform hover:scale-110",
isSelected
? "border-foreground scale-110"
: "border-transparent",
isDefault && "bg-muted",
)}
style={
isDefault ? undefined : { backgroundColor: color.value }
}
/>
);
})}
</div>
<div className="flex items-center gap-2">
<Label className="text-sm text-muted-foreground">
Hide Image
</Label>
<Switch
checked={project.hideImage ?? false}
onCheckedChange={(checked) =>
updateProject.mutate({
id: projectId,
patch: { hideImage: checked },
})
}
/>
</div>
</div>
<div className="flex items-center gap-2">
<Label className="text-sm text-muted-foreground">
Hide Image
</Label>
<Switch
checked={project.hideImage ?? false}
onCheckedChange={(checked) =>

<div className="flex items-center justify-between">
<div className="space-y-0.5">
<Label className="text-sm font-medium">Color Style</Label>
<p className="text-xs text-muted-foreground">
Apply the project color to the badge border or background.
</p>
</div>
<Select
value={project.colorMode ?? PROJECT_COLOR_MODE_DEFAULT}
onValueChange={(value: string) =>
updateProject.mutate({
id: projectId,
patch: { hideImage: checked },
patch: { colorMode: value as ProjectColorMode },
})
}
/>
disabled={updateProject.isPending}
>
<SelectTrigger className="w-[140px]">
<SelectValue />
</SelectTrigger>
<SelectContent>
{(
Object.entries(PROJECT_COLOR_MODE_LABELS) as [
ProjectColorMode,
string,
][]
).map(([value, label]) => (
<SelectItem key={value} value={value}>
{label}
</SelectItem>
))}
</SelectContent>
</Select>
</div>
</div>
</SettingsSection>
Expand Down
29 changes: 29 additions & 0 deletions ...op/src/renderer/screens/main/components/WorkspaceSidebar/ProjectSection/ProjectHeader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import type { ProjectColorMode } from "@superset/local-db";
import {
ContextMenu,
ContextMenuContent,
Expand Down Expand Up @@ -29,6 +30,7 @@ import { navigateToWorkspace } from "renderer/routes/_authenticated/_dashboard/u
import { useProjectRename } from "renderer/screens/main/hooks/useProjectRename";
import {
PROJECT_COLOR_DEFAULT,
PROJECT_COLOR_MODE_LABELS,
PROJECT_COLORS,
} from "shared/constants/project-colors";
import { STROKE_WIDTH } from "../constants";
Expand All @@ -40,6 +42,7 @@ interface ProjectHeaderProps {
projectId: string;
projectName: string;
projectColor: string;
colorMode: ProjectColorMode;
githubOwner: string | null;
mainRepoPath: string;
hideImage: boolean;
Expand All @@ -56,6 +59,7 @@ export function ProjectHeader({
projectId,
projectName,
projectColor,
colorMode,
githubOwner,
mainRepoPath,
hideImage,
Expand Down Expand Up @@ -150,6 +154,10 @@ export function ProjectHeader({
updateProject.mutate({ id: projectId, patch: { hideImage: !hideImage } });
};

const handleColorModeChange = (mode: ProjectColorMode) => {
updateProject.mutate({ id: projectId, patch: { colorMode: mode } });
};

// Color picker submenu used in both collapsed and expanded context menus
const colorPickerSubmenu = (
<ContextMenuSub>
Expand Down Expand Up @@ -180,6 +188,24 @@ export function ProjectHeader({
</ContextMenuItem>
);
})}
<ContextMenuSeparator />
{(
Object.entries(PROJECT_COLOR_MODE_LABELS) as [
ProjectColorMode,
string,
][]
).map(([mode, label]) => (
<ContextMenuItem
key={mode}
onSelect={() => handleColorModeChange(mode)}
className="flex items-center gap-2"
>
<span>{label}</span>
{colorMode === mode && (
<span className="ml-auto text-xs text-muted-foreground">✓</span>
)}
</ContextMenuItem>
))}
</ContextMenuSubContent>
</ContextMenuSub>
);
Expand All @@ -204,6 +230,7 @@ export function ProjectHeader({
projectId={projectId}
projectName={projectName}
projectColor={projectColor}
colorMode={colorMode}
githubOwner={githubOwner}
/>
</button>
Expand Down Expand Up @@ -277,6 +304,7 @@ export function ProjectHeader({
projectId={projectId}
projectName={projectName}
projectColor={projectColor}
colorMode={colorMode}
githubOwner={githubOwner}
hideImage={hideImage}
/>
Expand All @@ -299,6 +327,7 @@ export function ProjectHeader({
projectId={projectId}
projectName={projectName}
projectColor={projectColor}
colorMode={colorMode}
githubOwner={githubOwner}
hideImage={hideImage}
/>
Expand Down
5 changes: 5 additions & 0 deletions ...p/src/renderer/screens/main/components/WorkspaceSidebar/ProjectSection/ProjectSection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import type { ProjectColorMode } from "@superset/local-db";
import { toast } from "@superset/ui/sonner";
import { cn } from "@superset/ui/utils";
import { AnimatePresence, motion } from "framer-motion";
Expand Down Expand Up @@ -26,6 +27,7 @@ interface ProjectSectionProps {
projectId: string;
projectName: string;
projectColor: string;
colorMode: ProjectColorMode;
githubOwner: string | null;
mainRepoPath: string;
hideImage: boolean;
Expand All @@ -42,6 +44,7 @@ export function ProjectSection({
projectId,
projectName,
projectColor,
colorMode,
githubOwner,
mainRepoPath,
hideImage,
Expand Down Expand Up @@ -140,6 +143,7 @@ export function ProjectSection({
projectId={projectId}
projectName={projectName}
projectColor={projectColor}
colorMode={colorMode}
githubOwner={githubOwner}
mainRepoPath={mainRepoPath}
hideImage={hideImage}
Expand Down Expand Up @@ -197,6 +201,7 @@ export function ProjectSection({
projectId={projectId}
projectName={projectName}
projectColor={projectColor}
colorMode={colorMode}
githubOwner={githubOwner}
mainRepoPath={mainRepoPath}
hideImage={hideImage}
Expand Down
Loading