task status implementation

src/components/TaskDetail.tsx

@@ -4,11 +4,12 @@ import { type Task, removeTask, restoreTask, updateTask, saveTaskAsTemplate, sha
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
 import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
 import { ArrowUpCircle, Clock, Calendar, Type, Trash2, X, Copy, MoreHorizontal, Gauge, Share2, UserMinus, GitBranch, Tag, Settings } from "lucide-solid";
+import { StatusCircle } from "./StatusCircle";
 import { calculateDateFromUrgency, calculateUrgencyFromDate } from "@/store";
 import { Button } from "./ui/button";
 import { TagPicker } from "./TagPicker";
 import { Badge } from "./ui/badge";
-import { PRIORITY_OPTIONS, URGENCY_OPTIONS, SIZE_OPTIONS } from "@/lib/constants";
+import { PRIORITY_OPTIONS, URGENCY_OPTIONS, SIZE_OPTIONS, STATUS_OPTIONS } from "@/lib/constants";
 import { store } from "@/store";
 import { cn } from "@/lib/utils";
 import { toast } from "solid-sonner";
@@ -72,6 +73,14 @@ export const TaskDetail: Component<TaskDetailProps> = (props) => {
         }
     };
 
+    const updateStatus = (val: any) => {
+        const value = typeof val === 'object' ? val.value : val;
+        const s = parseInt(value);
+        if (!isNaN(s)) {
+            updateTask(props.task.id, { status: s });
+        }
+    };
+
     const updateUrgency = (val: any) => {
         const value = typeof val === 'object' ? val.value : val;
         const u = parseInt(value);
@@ -119,29 +128,57 @@ export const TaskDetail: Component<TaskDetailProps> = (props) => {
             >
                 {/* Header Area */}
                 <div class="px-6 pt-6 pb-2 shrink-0">
-                    <textarea
-                        id="task-detail-title"
-                        name="task-title"
-                        value={title()}
-                        onInput={(e) => {
-                            updateTitle(e.currentTarget.value);
-                            // Auto-resize
-                            e.currentTarget.style.height = 'auto';
-                            e.currentTarget.style.height = e.currentTarget.scrollHeight + 'px';
-                        }}
-                        ref={(el) => {
-                            setTimeout(() => {
-                                el.style.height = 'auto';
-                                el.style.height = el.scrollHeight + 'px';
-                            }, 0);
-                        }}
-                        rows={1}
-                        class="text-xl sm:text-2xl font-bold bg-transparent border-none focus:outline-none focus:ring-0 w-full placeholder:text-muted-foreground/50 resize-none overflow-hidden leading-tight"
-                        placeholder="Untitled Task"
-                    />
+                    <div class="flex items-start gap-4">
+                        <div class="shrink-0 mt-0.5">
+                            <Select<any>
+                                value={(props.task.status ?? 0).toString()}
+                                onChange={(val: string | null) => val && updateStatus(val)}
+                                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 px-0 shadow-none focus:ring-0 shrink-0 overflow-hidden flex items-center justify-center [&>svg]:hidden"
+                                    onDoubleClick={(e: MouseEvent) => {
+                                        e.preventDefault();
+                                        e.stopPropagation();
+                                        updateStatus("10");
+                                    }}
+                                >
+                                    <StatusCircle status={props.task.status ?? 0} size={28} />
+                                </SelectTrigger>
+                                <SelectContent />
+                            </Select>
+                        </div>
+
+                        <textarea
+                            id="task-detail-title"
+                            name="task-title"
+                            value={title()}
+                            onInput={(e) => {
+                                updateTitle(e.currentTarget.value);
+                                // Auto-resize
+                                e.currentTarget.style.height = 'auto';
+                                e.currentTarget.style.height = e.currentTarget.scrollHeight + 'px';
+                            }}
+                            ref={(el) => {
+                                setTimeout(() => {
+                                    el.style.height = 'auto';
+                                    el.style.height = el.scrollHeight + 'px';
+                                }, 0);
+                            }}
+                            rows={1}
+                            class="text-xl sm:text-2xl font-bold bg-transparent border-none focus:outline-none focus:ring-0 w-full placeholder:text-muted-foreground/50 resize-none overflow-hidden leading-tight flex-1 min-w-0"
+                            placeholder="Untitled Task"
+                        />
+                    </div>
 
                     {/* Properties Bar */}
                     <div class="flex flex-wrap items-center gap-2 sm:gap-4 mt-2 text-sm">
+
+
                         {/* Priority */}
                         <div class="flex items-center gap-1 group shrink-0">
                             <span class="text-[10px] uppercase font-bold tracking-wider text-muted-foreground/70 hidden sm:inline">Priority</span>