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

@@ -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" },
 };

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>

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