tag colors and tag list tracking fix

src/components/TaskDetail.tsx

@@ -12,6 +12,8 @@ import { store } from "@/store";
 import { cn } from "@/lib/utils";
 import { toast } from "solid-sonner";
 import { lazy, Suspense } from "solid-js";
+import { useTheme } from "./ThemeProvider";
+import { getThemeAdjustedColor } from "@/lib/colors";
 
 const TaskEditor = lazy(() => import("./TaskEditor").then(m => ({ default: m.TaskEditor })));
 
@@ -22,6 +24,7 @@ interface TaskDetailProps {
 }
 
 export const TaskDetail: Component<TaskDetailProps> = (props) => {
+    const { resolvedTheme } = useTheme();
     // Local state for immediate feedback, synced with props
     const [title, setTitle] = createSignal(props.task.title);
     const [editorInstance, setEditorInstance] = createSignal<any>(null);
@@ -247,10 +250,32 @@ export const TaskDetail: Component<TaskDetailProps> = (props) => {
                                             <Badge
                                                 variant="secondary"
                                                 class="h-7 px-2 text-xs gap-1.5 bg-muted/30 border-border/50 hover:bg-destructive/10 hover:border-destructive/30 cursor-pointer group/tag transition-all whitespace-nowrap shrink-0"
+                                                style={{
+                                                    "background-color": (() => {
+                                                        const def = store.tagDefinitions.find(d => d.name === tag);
+                                                        const color = getThemeAdjustedColor(def?.color, def?.theme, resolvedTheme());
+                                                        return color ? `${color}15` : undefined;
+                                                    })(),
+                                                    "border-color": (() => {
+                                                        const def = store.tagDefinitions.find(d => d.name === tag);
+                                                        const color = getThemeAdjustedColor(def?.color, def?.theme, resolvedTheme());
+                                                        return color ? `${color}30` : undefined;
+                                                    })(),
+                                                    "color": (() => {
+                                                        const def = store.tagDefinitions.find(d => d.name === tag);
+                                                        return getThemeAdjustedColor(def?.color, def?.theme, resolvedTheme()) || "inherit";
+                                                    })()
+                                                }}
                                                 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")} />
+                                                <div
+                                                    class="w-1.5 h-1.5 rounded-full"
+                                                    style={{
+                                                        "background-color": (store.tagDefinitions.find(d => d.name === tag)?.value ?? 5) > 5 ? "#22c55e" : (store.tagDefinitions.find(d => d.name === tag)?.value ?? 5) < 5 ? "#ef4444" : "#94a3b8"
+                                                    }}
+                                                />
                                                 {tag}
+                                                <X size={12} class="opacity-0 group-hover/tag:opacity-50 transition-opacity" />
                                             </Badge>
                                         )}
                                     </For>