added tags and tag manager

src/components/TaskCard.tsx

@@ -1,7 +1,9 @@
 import { type Component, createMemo } from "solid-js";
-import { type Task, toggleTask, calculateUrgencyFromDate, setActiveTaskId } from "@/store";
+import { type Task, toggleTask, calculateUrgencyFromDate, setActiveTaskId, store } from "@/store";
 import { cn } from "@/lib/utils";
 import { CheckCircle2, Circle, Clock, ArrowUpCircle } from "lucide-solid";
+import { Badge } from "@/components/ui/badge";
+import { For } from "solid-js";
 
 export const TaskCard: Component<{ task: Task }> = (props) => {
     const urgencyLevel = createMemo(() => calculateUrgencyFromDate(props.task.dueDate));
@@ -52,6 +54,20 @@ export const TaskCard: Component<{ task: Task }> = (props) => {
                         <span>P{props.task.priority}</span>
                     </div>
 
+                    {/* Tags */}
+                    {props.task.tags && props.task.tags.length > 0 && (
+                        <div class="flex items-center gap-1">
+                            <For each={props.task.tags}>
+                                {(tag) => (
+                                    <Badge variant="secondary" class="h-5 px-1.5 text-[10px] gap-1 bg-muted/50 border-border/50">
+                                        <div class={cn("w-1.5 h-1.5 rounded-full", (store.tagDefinitions?.[tag] ?? 5) > 5 ? "bg-green-500" : (store.tagDefinitions?.[tag] ?? 5) < 5 ? "bg-red-500" : "bg-gray-400")} />
+                                        {tag}
+                                    </Badge>
+                                )}
+                            </For>
+                        </div>
+                    )}
+
                     {/* Due Date + Urgency Slide-out */}
                     <div class="relative group/date flex items-center h-6 cursor-help">
                         {/* Due Date - Static Layer on Top */}