task status implementation

src/components/TaskCard.tsx

@@ -1,11 +1,13 @@
-import { type Component, createMemo } from "solid-js";
-import { type Task, toggleTask, calculateUrgencyFromDate, setActiveTaskId, store, copyTask } from "@/store";
+import { type Component, createMemo, For } from "solid-js";
+import { type Task, calculateUrgencyFromDate, setActiveTaskId, store, copyTask, updateTask } from "@/store";
 import { cn } from "@/lib/utils";
-import { CheckCircle2, Circle, Clock, ArrowUpCircle, Copy, Users2 } from "lucide-solid";
+import { Clock, ArrowUpCircle, Copy, Users2 } from "lucide-solid";
 import { Badge } from "@/components/ui/badge";
-import { For } from "solid-js";
 import { useTheme } from "./ThemeProvider";
 import { getThemeAdjustedColor } from "@/lib/colors";
+import { Select, SelectContent, SelectItem, SelectTrigger } from "@/components/ui/select";
+import { STATUS_OPTIONS } from "@/lib/constants";
+import { StatusCircle } from "./StatusCircle";
 
 export const TaskCard: Component<{ task: Task }> = (props) => {
     const { resolvedTheme } = useTheme();
@@ -32,16 +34,36 @@ export const TaskCard: Component<{ task: Task }> = (props) => {
             )}
             onClick={() => setActiveTaskId(props.task.id)}
         >
-            <button
-                onClick={(e) => { e.stopPropagation(); toggleTask(props.task.id); }}
-                class="mr-3 sm:mr-4 text-muted-foreground hover:text-primary transition-colors shrink-0"
-            >
-                {props.task.completed ? (
-                    <CheckCircle2 class="text-green-500" size={22} />
-                ) : (
-                    <Circle size={22} />
-                )}
-            </button>
+            {/* Status Dropdown */}
+            <div class="mr-2 sm:mr-3 shrink-0" onClick={(e) => e.stopPropagation()}>
+                <Select<any>
+                    value={(props.task.status ?? 0).toString()}
+                    onChange={(val: any) => {
+                        const value = typeof val === 'object' ? val?.value : val;
+                        if (value) {
+                            const s = parseInt(value);
+                            if (!isNaN(s)) updateTask(props.task.id, { status: s });
+                        }
+                    }}
+                    options={STATUS_OPTIONS}
+                    optionValue="value"
+                    optionTextValue="label"
+                    placeholder="Status"
+                    itemComponent={(props: any) => <SelectItem item={props.item}>{props.item.rawValue.label}</SelectItem>}
+                >
+                    <SelectTrigger
+                        class="h-9 w-9 p-0 bg-transparent border-transparent hover:bg-muted/50 data-[expanded]:bg-muted/50 shadow-none focus:ring-0 shrink-0 overflow-hidden flex items-center justify-center [&>svg]:hidden"
+                        onDoubleClick={(e: MouseEvent) => {
+                            e.preventDefault();
+                            e.stopPropagation();
+                            updateTask(props.task.id, { status: 10 });
+                        }}
+                    >
+                        <StatusCircle status={props.task.status ?? 0} size={26} />
+                    </SelectTrigger>
+                    <SelectContent />
+                </Select>
+            </div>
 
             <div class="flex-1 min-w-0 flex flex-col">
                 <h3 class={cn(