From e137f0de2e14da929ec8d7d844c7404aa930f306 Mon Sep 17 00:00:00 2001
From: Jiang Bohan <bhjiang@outlook.com>
Date: Thu, 9 Apr 2026 16:09:31 +0800
Subject: [PATCH] fix(projects): add distinct colored dots for each project
 status

Each project status now displays a unique colored dot indicator in both
the status dropdown trigger and menu items. Previously all statuses
showed the same color, making them indistinguishable.
---
 packages/core/projects/config.ts                     | 12 ++++++------
 .../views/projects/components/project-detail.tsx     |  4 ++--
 packages/views/projects/components/projects-page.tsx |  4 ++--
 3 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/packages/core/projects/config.ts b/packages/core/projects/config.ts
index 040a73a15..2bb424488 100644
--- a/packages/core/projects/config.ts
+++ b/packages/core/projects/config.ts
@@ -10,11 +10,11 @@ export const PROJECT_STATUS_ORDER: ProjectStatus[] = [
 
 export const PROJECT_STATUS_CONFIG: Record<
   ProjectStatus,
-  { label: string; color: string; badgeBg: string; badgeText: string }
+  { label: string; color: string; dotColor: string; badgeBg: string; badgeText: string }
 > = {
-  planned: { label: "Planned", color: "text-muted-foreground", badgeBg: "bg-muted", badgeText: "text-muted-foreground" },
-  in_progress: { label: "In Progress", color: "text-warning", badgeBg: "bg-warning", badgeText: "text-white" },
-  paused: { label: "Paused", color: "text-muted-foreground", badgeBg: "bg-muted", badgeText: "text-muted-foreground" },
-  completed: { label: "Completed", color: "text-info", badgeBg: "bg-info", badgeText: "text-white" },
-  cancelled: { label: "Cancelled", color: "text-muted-foreground", badgeBg: "bg-muted", badgeText: "text-muted-foreground" },
+  planned: { label: "Planned", color: "text-muted-foreground", dotColor: "bg-muted-foreground", badgeBg: "bg-muted", badgeText: "text-muted-foreground" },
+  in_progress: { label: "In Progress", color: "text-warning", dotColor: "bg-warning", badgeBg: "bg-warning", badgeText: "text-white" },
+  paused: { label: "Paused", color: "text-muted-foreground", dotColor: "bg-muted-foreground", badgeBg: "bg-muted", badgeText: "text-muted-foreground" },
+  completed: { label: "Completed", color: "text-info", dotColor: "bg-info", badgeBg: "bg-info", badgeText: "text-white" },
+  cancelled: { label: "Cancelled", color: "text-destructive", dotColor: "bg-destructive", badgeBg: "bg-muted", badgeText: "text-muted-foreground" },
 };
diff --git a/packages/views/projects/components/project-detail.tsx b/packages/views/projects/components/project-detail.tsx
index d53c36cb2..1f3f4eaec 100644
--- a/packages/views/projects/components/project-detail.tsx
+++ b/packages/views/projects/components/project-detail.tsx
@@ -347,7 +347,7 @@ export function ProjectDetail({ projectId }: { projectId: string }) {
                   <DropdownMenuTrigger
                     render={
                       <PropertyPill>
-                        <span className={cn("size-2 rounded-full", statusCfg.color.replace("text-", "bg-"))} />
+                        <span className={cn("size-2 rounded-full", statusCfg.dotColor)} />
                         <span>{statusCfg.label}</span>
                       </PropertyPill>
                     }
@@ -355,7 +355,7 @@ export function ProjectDetail({ projectId }: { projectId: string }) {
                   <DropdownMenuContent align="start" className="w-44">
                     {PROJECT_STATUS_ORDER.map((s) => (
                       <DropdownMenuItem key={s} onClick={() => handleUpdateField({ status: s as ProjectStatus })}>
-                        <span className={cn("size-2 rounded-full", PROJECT_STATUS_CONFIG[s].color.replace("text-", "bg-"))} />
+                        <span className={cn("size-2 rounded-full", PROJECT_STATUS_CONFIG[s].dotColor)} />
                         <span>{PROJECT_STATUS_CONFIG[s].label}</span>
                         {s === project.status && <Check className="ml-auto h-3.5 w-3.5" />}
                       </DropdownMenuItem>
diff --git a/packages/views/projects/components/projects-page.tsx b/packages/views/projects/components/projects-page.tsx
index 843ff6da6..db7d38e88 100644
--- a/packages/views/projects/components/projects-page.tsx
+++ b/packages/views/projects/components/projects-page.tsx
@@ -264,7 +264,7 @@ function CreateProjectDialog({ open, onOpenChange }: { open: boolean; onOpenChan
             <DropdownMenuTrigger
               render={
                 <PillButton>
-                  <span className={cn("size-2 rounded-full", PROJECT_STATUS_CONFIG[status].color.replace("text-", "bg-"))} />
+                  <span className={cn("size-2 rounded-full", PROJECT_STATUS_CONFIG[status].dotColor)} />
                   <span>{PROJECT_STATUS_CONFIG[status].label}</span>
                 </PillButton>
               }
@@ -272,7 +272,7 @@ function CreateProjectDialog({ open, onOpenChange }: { open: boolean; onOpenChan
             <DropdownMenuContent align="start" className="w-44">
               {PROJECT_STATUS_ORDER.map((s) => (
                 <DropdownMenuItem key={s} onClick={() => setStatus(s)}>
-                  <span className={cn("size-2 rounded-full", PROJECT_STATUS_CONFIG[s].color.replace("text-", "bg-"))} />
+                  <span className={cn("size-2 rounded-full", PROJECT_STATUS_CONFIG[s].dotColor)} />
                   <span>{PROJECT_STATUS_CONFIG[s].label}</span>
                 </DropdownMenuItem>
               ))}