fix: resolve 15+ UX issues across the full app

- CreateItemDialog: shared Zustand store for dialog state
- TopBar: use store instead of router.push navigation
- TaskDetailPanel: dynamic domain fetch from /api/domains
- TodayTasksWidget: domain name resolution from UUIDs
- ProjectProgressWidget: fetch real progress, default to 0
- Calendar page: domain filter fetches from API dynamically
- Habits page: edit/delete dropdown with AlertDialog
- Projects page: domain name display + delete button
- Notes page: domain picker on creation, names in list
- Settings domains: add color picker input
- Tasks list view: MoreHorizontal wired to edit/delete
- HabitCard: domain resolution + edit/delete dropdown
- PocketBase compat: add JSDoc migration comment

apps/web/components/tasks/task-detail-panel.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import { toast } from 'sonner';
 import {
   Sheet,
@@ -60,6 +60,11 @@ export function TaskDetailPanel({
   const [status, setStatus] = useState(task.status);
   const [priority, setPriority] = useState(task.priority);
   const [domain, setDomain] = useState(task.domain);
+  const [domains, setDomains] = useState<{id: string; name: string}[]>([]);
+
+  useEffect(() => {
+    fetch('/api/domains?sort=sort_order').then(r => r.json()).then(data => setDomains(data.items || [])).catch(() => {});
+  }, []);
   const [dueDate, setDueDate] = useState(task.due_date || '');
   const [saving, setSaving] = useState(false);
   const [deleteOpen, setDeleteOpen] = useState(false);
@@ -185,9 +190,9 @@ export function TaskDetailPanel({
                   <SelectValue />
                 </SelectTrigger>
                 <SelectContent>
-                  <SelectItem value="personal">Personal</SelectItem>
-                  <SelectItem value="work">Work</SelectItem>
-                  <SelectItem value="ots">OTS</SelectItem>
+                  {domains.map((d) => (
+                    <SelectItem key={d.id} value={d.id}>{d.name}</SelectItem>
+                  ))}
                 </SelectContent>
               </Select>
             </div>

apps/web/components/tasks/tasks-kanban-view.tsx

@@ -40,6 +40,12 @@ interface Task {
   tags: string[];
 }
 
+interface Domain {
+  id: string;
+  name: string;
+  color: string;
+}
+
 const columns = [
   { id: 'todo', title: 'To Do', color: 'bg-slate-500' },
   { id: 'in_progress', title: 'In Progress', color: 'bg-blue-500' },
@@ -48,10 +54,12 @@ const columns = [
 
 function DraggableTask({
   task,
+  domainName,
   onClick,
   onStatusChange
 }: {
   task: Task;
+  domainName: string;
   onClick: () => void;
   onStatusChange: (task: Task, status: Task['status']) => void;
 }) {
@@ -127,9 +135,11 @@ function DraggableTask({
             >
               {task.priority}
             </Badge>
-            <Badge variant="outline" className="text-xs">
-              {task.domain}
-            </Badge>
+            {domainName && (
+              <Badge variant="outline" className="text-xs">
+                {domainName}
+              </Badge>
+            )}
             {task.due_date && (
               <span className="flex items-center gap-1 text-xs text-muted-foreground">
                 <Calendar className="h-3 w-3" />
@@ -148,6 +158,7 @@ function DroppableColumn({
   title,
   color,
   tasks,
+  domainMap,
   onTaskClick,
   onStatusChange
 }: {
@@ -155,6 +166,7 @@ function DroppableColumn({
   title: string;
   color: string;
   tasks: Task[];
+  domainMap: Map<string, string>;
   onTaskClick: (task: Task) => void;
   onStatusChange: (task: Task, status: Task['status']) => void;
 }) {
@@ -179,6 +191,7 @@ function DroppableColumn({
           <DraggableTask
             key={task.id}
             task={task}
+            domainName={domainMap.get(task.domain) || task.domain}
             onClick={() => onTaskClick(task)}
             onStatusChange={onStatusChange}
           />
@@ -190,6 +203,7 @@ function DroppableColumn({
 
 export function TasksKanbanView() {
   const [tasks, setTasks] = useState<Task[]>([]);
+  const [domainMap, setDomainMap] = useState<Map<string, string>>(new Map());
   const [loading, setLoading] = useState(true);
   const [activeTask, setActiveTask] = useState<Task | null>(null);
   const [selectedTask, setSelectedTask] = useState<Task | null>(null);
@@ -202,6 +216,7 @@ export function TasksKanbanView() {
 
   useEffect(() => {
     fetchTasks();
+    fetchDomains();
   }, []);
 
   async function fetchTasks() {
@@ -220,6 +235,21 @@ export function TasksKanbanView() {
     }
   }
 
+  async function fetchDomains() {
+    try {
+      const response = await fetch('/api/domains?sort=sort_order');
+      if (!response.ok) return;
+      const data = await response.json();
+      const map = new Map<string, string>();
+      for (const d of data.items || []) {
+        map.set(d.id, d.name);
+      }
+      setDomainMap(map);
+    } catch {
+      // Non-critical — domains will show as raw IDs
+    }
+  }
+
   async function handleDragEnd(event: DragEndEvent) {
     const { active, over } = event;
     if (!over) {
@@ -282,6 +312,7 @@ export function TasksKanbanView() {
               title={column.title}
               color={column.color}
               tasks={tasks.filter((t) => t.status === column.id)}
+              domainMap={domainMap}
               onTaskClick={setSelectedTask}
               onStatusChange={updateTaskStatus}
             />
@@ -308,4 +339,4 @@ export function TasksKanbanView() {
       )}
     </>
   );
-}
+}

apps/web/components/tasks/tasks-list-view.tsx

@@ -16,6 +16,22 @@ import { ScrollArea, ScrollBar } from '@/components/ui/scroll-area';
 import { Calendar, MoreHorizontal } from 'lucide-react';
 import { toast } from 'sonner';
 import { TaskDetailPanel } from './task-detail-panel';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from '@/components/ui/alert-dialog';
 
 interface Task {
   id: string;
@@ -33,6 +49,8 @@ export function TasksListView() {
   const [tasks, setTasks] = useState<Task[]>([]);
   const [loading, setLoading] = useState(true);
   const [selectedTask, setSelectedTask] = useState<Task | null>(null);
+  const [deleteId, setDeleteId] = useState<string | null>(null);
+  const [deleting, setDeleting] = useState(false);
 
   useEffect(() => {
     fetchTasks();
@@ -156,6 +174,32 @@ export function TasksListView() {
         <ScrollBar orientation="horizontal" />
       </ScrollArea>
 
+      <AlertDialog open={!!deleteId} onOpenChange={(o) => !o && setDeleteId(null)}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Delete task?</AlertDialogTitle>
+            <AlertDialogDescription>This cannot be undone.</AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel disabled={deleting}>Cancel</AlertDialogCancel>
+            <AlertDialogAction onClick={async () => {
+              if (!deleteId) return;
+              setDeleting(true);
+              try {
+                const res = await fetch("/api/tasks/" + deleteId, { method: 'DELETE' });
+                if (!res.ok) throw new Error();
+                toast.success("Task deleted");
+                setDeleteId(null);
+                fetchTasks();
+              } catch { toast.error("Unable to delete task"); }
+              finally { setDeleting(false); setDeleteId(null); }
+            }} disabled={deleting}>
+              {deleting ? 'Deleting...' : 'Delete'}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+
       {selectedTask && (
         <TaskDetailPanel
           task={selectedTask}