added tags and tag manager

src/components/TaskDetail.tsx

@@ -1,10 +1,14 @@
-import { type Component, createEffect, createSignal } from "solid-js";
+import { type Component, createEffect, createSignal, For } from "solid-js";
 import { Sheet, SheetContent } from "@/components/ui/sheet";
 import { type Task, removeTask, restoreTask, updateTask } from "@/store";
 import { Select, SelectContent, SelectItem, SelectTrigger } from "@/components/ui/select";
 import { ArrowUpCircle, Clock, Calendar, Type, Trash2 } from "lucide-solid";
 import { calculateDateFromUrgency, calculateUrgencyFromDate } from "@/store";
 import { Button } from "./ui/button";
+import { TagPicker } from "./TagPicker";
+import { Badge } from "./ui/badge";
+import { store } from "@/store";
+import { cn } from "@/lib/utils";
 import { toast } from "solid-sonner";
 import { lazy, Suspense } from "solid-js";
 
@@ -61,6 +65,10 @@ export const TaskDetail: Component<TaskDetailProps> = (props) => {
         }
     };
 
+    const updateTags = (tags: string[]) => {
+        updateTask(props.task.id, { tags });
+    };
+
     const onDateInputChange = (e: Event) => {
         const val = (e.currentTarget as HTMLInputElement).value;
         if (val) {
@@ -106,7 +114,7 @@ export const TaskDetail: Component<TaskDetailProps> = (props) => {
                             <Select
                                 value={props.task.priority.toString()}
                                 onChange={(val: string | null) => val && updatePriority(val)}
-                                options={["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"]}
+                                options={["10", "9", "8", "7", "6", "5", "4", "3", "2", "1"]}
                                 placeholder="Priority"
                                 itemComponent={(props: any) => <SelectItem item={props.item}>{props.item.rawValue}</SelectItem>}
                             >
@@ -138,6 +146,7 @@ export const TaskDetail: Component<TaskDetailProps> = (props) => {
                                 </SelectTrigger>
                                 <SelectContent />
                             </Select>
+
                         </div>
 
                         {/* Commands Shortcut */}
@@ -202,6 +211,31 @@ export const TaskDetail: Component<TaskDetailProps> = (props) => {
                         </div>
                     </div>
 
+                    {/* Tags Row */}
+                    <div class="flex items-center gap-2 mt-4 overflow-x-auto no-scrollbar pb-1">
+                        <span class="text-[10px] uppercase font-bold tracking-wider text-muted-foreground/70 shrink-0">Tags</span>
+                        <div class="flex items-center gap-1.5 min-w-0">
+                            <TagPicker
+                                selectedTags={props.task.tags || []}
+                                onTagsChange={updateTags}
+                            />
+                            <div class="flex items-center gap-1.5 flex-nowrap overflow-x-auto no-scrollbar">
+                                <For each={props.task.tags || []}>
+                                    {(tag) => (
+                                        <Badge
+                                            variant="secondary"
+                                            class="h-7 px-2 text-xs gap-1 bg-muted/40 border-border/50 hover:bg-destructive/10 hover:border-destructive/30 cursor-pointer group/tag transition-all whitespace-nowrap"
+                                            onClick={() => updateTags((props.task.tags || []).filter(t => t !== tag))}
+                                        >
+                                            <div class={cn("w-1.5 h-1.5 rounded-full transition-colors group-hover/tag:bg-destructive", (store.tagDefinitions?.[tag] ?? 5) > 5 ? "bg-green-500" : (store.tagDefinitions?.[tag] ?? 5) < 5 ? "bg-red-500" : "bg-gray-400")} />
+                                            {tag}
+                                        </Badge>
+                                    )}
+                                </For>
+                            </div>
+                        </div>
+                    </div>
+
                     <div class="h-px w-full bg-border mt-4" />
                 </div>
 
@@ -216,6 +250,6 @@ export const TaskDetail: Component<TaskDetailProps> = (props) => {
                     </Suspense>
                 </div>
             </SheetContent>
-        </Sheet>
+        </Sheet >
     );
 };