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/app/(dashboard)/calendar/page.tsx

@@ -41,11 +41,23 @@ export default function CalendarPage() {
   const [showProjects, setShowProjects] = useState(true);
   const [showMilestones, setShowMilestones] = useState(true);
   const [selectedDomains, setSelectedDomains] = useState<string[]>([]);
+  const [domainOptions, setDomainOptions] = useState<{id: string; name: string}[]>([]);
 
   useEffect(() => {
     fetchEvents();
+    fetchDomains();
   }, []);
 
+  async function fetchDomains() {
+    try {
+      const res = await fetch('/api/domains?sort=sort_order');
+      if (res.ok) {
+        const data = await res.json();
+        setDomainOptions(data.items || []);
+      }
+    } catch {}
+  }
+
   async function fetchEvents() {
     setLoading(true);
     setError(null);

apps/web/app/(dashboard)/habits/page.tsx

@@ -1,197 +1,29 @@
-'use client';
+"use client";
 
-import { useEffect, useState, Suspense } from 'react';
+import { useState } from "react";
-import { Flame, Plus } from 'lucide-react';
+import { Plus } from "lucide-react";
-import dynamic from 'next/dynamic';
+import { Button } from "@/components/ui/button";
-import { Button } from '@/components/ui/button';
+import { HabitCard } from "@/components/habits/habit-card";
-import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { CreateItemDialog } from "@/components/create-item-dialog";
-import { HabitCard } from '@/components/habits/habit-card';
+import { useCreateDialogStore } from "@/lib/stores/use-create-dialog-store";
-import { HabitCompletionDialog } from '@/components/habits/habit-completion-dialog';
-import type { Habit } from '@project-e/shared';
-import { CreateItemDialog } from '@/components/create-item-dialog';
-import { toast } from 'sonner';
-
-// Lazy load react-calendar-heatmap (~15KB)
-const HabitHeatmap = dynamic(
-  () => import('@/components/habits/habit-heatmap').then((m) => m.HabitHeatmap),
-  {
-    ssr: false,
-    loading: () => (
-      <div className="h-[150px] animate-pulse rounded-lg bg-muted/30" />
-    ),
-  }
-);
-
-/** Extended habit with server-computed fields */
-interface HabitWithMeta extends Habit {
-  logged_today: boolean;
-}
 
 export default function HabitsPage() {
-  const [habits, setHabits] = useState<HabitWithMeta[]>([]);
+  const [refreshKey, setRefreshKey] = useState(0);
-  const [loading, setLoading] = useState(true);
+  const { open, openCreate, closeCreate } = useCreateDialogStore();
-  const [error, setError] = useState<string | null>(null);
-  const [selectedHabit, setSelectedHabit] = useState<HabitWithMeta | null>(null);
-  const [completionDialogOpen, setCompletionDialogOpen] = useState(false);
-  const [createOpen, setCreateOpen] = useState(false);
-
-  useEffect(() => {
-    fetchHabits();
-  }, []);
-
-  useEffect(() => {
-    if (new URLSearchParams(window.location.search).get('new') === 'true') setCreateOpen(true);
-  }, []);
-
-  function handleCreateOpenChange(open: boolean) {
-    setCreateOpen(open);
-    if (!open && new URLSearchParams(window.location.search).get('new') === 'true') {
-      window.history.replaceState(null, '', '/habits');
-    }
-  }
-
-  async function fetchHabits() {
-    try {
-      setError(null);
-      const response = await fetch('/api/habits');
-      if (!response.ok) throw new Error('Unable to load habits.');
-      const data = await response.json();
-      setHabits(data.items || []);
-    } catch (error) {
-      console.error('Failed to fetch habits:', error);
-      setError('Unable to load habits. Please try again.');
-    } finally {
-      setLoading(false);
-    }
-  }
-
-  function handleComplete(habit: HabitWithMeta) {
-    if (habit.completion_mode === 'quick') {
-      logHabitCompletion(habit.id, {});
-    } else {
-      setSelectedHabit(habit);
-      setCompletionDialogOpen(true);
-    }
-  }
-
-  async function logHabitCompletion(
-    habitId: string,
-    data: { mood?: number; value?: number; notes?: string }
-  ) {
-    try {
-      const response = await fetch(`/api/habits/${habitId}/logs`, {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify(data),
-      });
-      if (!response.ok) throw new Error('Unable to save habit completion.');
-      fetchHabits();
-      setCompletionDialogOpen(false);
-      toast.success('Habit completed.');
-    } catch (error) {
-      console.error('Failed to log habit:', error);
-      toast.error('Unable to save habit completion. Please try again.');
-    }
-  }
-
-  const completedCount = habits.filter((h) => h.logged_today).length;
-  const completionRate =
-    habits.length > 0 ? Math.round((completedCount / habits.length) * 100) : 0;
-
-  if (loading) {
-    return <p role="status" className="text-muted-foreground">Loading habits...</p>;
-  }
 
   return (
     <div>
       <div className="mb-6 flex items-center justify-between">
         <div>
           <h1 className="text-2xl font-bold">Habits</h1>
-          <p className="mt-1 text-muted-foreground">
+          <p className="mt-1 text-muted-foreground">Build consistency, one day at a time.</p>
-            Small actions, visible momentum.
-          </p>
         </div>
-        <Button onClick={() => setCreateOpen(true)}>
+        <Button onClick={() => openCreate("habit")}>
-          <Plus className="mr-2 h-4 w-4" aria-hidden="true" />
+          <Plus className="mr-2 h-4 w-4" aria-hidden="true" /> New habit
-          New habit
         </Button>
       </div>
-
+      <HabitCard key={refreshKey} />
-      {error && (
+      <CreateItemDialog type="habit" open={open} onOpenChange={(o) => (o ? openCreate("habit") : closeCreate())} onCreated={() => setRefreshKey((k) => k + 1)} />
-        <div role="alert" className="mb-6 flex items-center justify-between gap-4 rounded-lg border border-destructive/30 bg-destructive/10 p-4 text-sm text-destructive">
-          <span>{error}</span>
-          <Button variant="outline" size="sm" onClick={fetchHabits}>Retry</Button>
-        </div>
-      )}
-
-      {/* Summary banner */}
-      <Card className="mb-6">
-        <CardContent className="flex items-center justify-between p-6">
-          <div>
-            <p className="text-sm text-muted-foreground">Today&apos;s progress</p>
-            <p className="text-2xl font-bold">
-              {completedCount} / {habits.length} habits
-            </p>
-          </div>
-          <div className="text-right">
-            <p className="text-sm text-muted-foreground">Completion rate</p>
-            <p className="text-2xl font-bold">{completionRate}%</p>
-          </div>
-        </CardContent>
-      </Card>
-
-      {/* Habit cards grid */}
-      <div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
-        {habits.length === 0 && !error ? (
-          <Card className="md:col-span-2 lg:col-span-3">
-            <CardContent className="py-10 text-center">
-              <p className="text-muted-foreground">No habits yet. Start with one small action.</p>
-              <Button className="mt-4" onClick={() => setCreateOpen(true)}>Create a habit</Button>
-            </CardContent>
-          </Card>
-        ) : habits.map((habit) => (
-          <HabitCard
-            key={habit.id}
-            habit={habit}
-            onComplete={() => handleComplete(habit)}
-          />
-        ))}
-      </div>
-
-      {/* Heatmap section */}
-      <Card className="mt-8">
-        <CardHeader>
-          <CardTitle className="flex items-center gap-2">
-            <Flame className="h-5 w-5 text-orange-500" aria-hidden="true" />
-            Consistency Overview
-          </CardTitle>
-        </CardHeader>
-        <CardContent>
-          <Suspense
-            fallback={
-              <div className="h-[150px] animate-pulse rounded-lg bg-muted/30" />
-            }
-          >
-            <HabitHeatmap habits={habits} />
-          </Suspense>
-        </CardContent>
-      </Card>
-
-      {/* Completion dialog */}
-      {selectedHabit && (
-        <HabitCompletionDialog
-          habit={selectedHabit}
-          open={completionDialogOpen}
-          onOpenChange={setCompletionDialogOpen}
-          onSubmit={(data) => logHabitCompletion(selectedHabit.id, data)}
-        />
-      )}
-      <CreateItemDialog
-        type="habit"
-        open={createOpen}
-        onOpenChange={handleCreateOpenChange}
-        onCreated={fetchHabits}
-      />
     </div>
   );
 }

apps/web/app/(dashboard)/notes/page.tsx

@@ -65,6 +65,8 @@ interface Backlink {
 export default function NotesPage() {
   const [notes, setNotes] = useState<Note[]>([]);
   const [selectedNote, setSelectedNote] = useState<Note | null>(null);
+  const [domainForCreate, setDomainForCreate] = useState('personal');
+  const [domainOptions, setDomainOptions] = useState<{id: string; name: string}[]>([]);
   const [backlinks, setBacklinks] = useState<Backlink[]>([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
@@ -99,6 +101,17 @@ export default function NotesPage() {
     }
   }, [selectedNote]);
 
+  async function fetchDomains() {
+    try {
+      const res = await fetch('/api/domains?sort=sort_order');
+      if (res.ok) {
+        const data = await res.json();
+        setDomainOptions(data.items || []);
+        if (data.items?.length > 0) setDomainForCreate(data.items[0].id);
+      }
+    } catch {}
+  }
+
   async function fetchNotes() {
     setLoading(true);
     setError(null);
@@ -141,7 +154,7 @@ export default function NotesPage() {
         body: JSON.stringify({
           title: 'Untitled note',
           content: '',
-          domain: 'personal',
+          domain: domainForCreate,
         }),
       });
       if (!response.ok) throw new Error('Unable to create note.');
@@ -304,7 +317,7 @@ export default function NotesPage() {
                             {new Date(note.updated).toLocaleDateString()}
                           </p>
                           <Badge variant="outline" className="mt-1 text-xs">
-                            {note.domain}
+                            {domainOptions.find(d => d.id === note.domain)?.name || note.domain}
                           </Badge>
                         </div>
                       </div>

apps/web/app/(dashboard)/projects/page.tsx

@@ -1,205 +1,102 @@
-'use client';
+"use client";
 
-import { useEffect, useState } from 'react';
+import { useEffect, useState } from "react";
-import { Plus, FolderKanban } from 'lucide-react';
+import { Trash2 } from "lucide-react";
-import { Button } from '@/components/ui/button';
+import { Button } from "@/components/ui/button";
-import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Card, CardContent } from "@/components/ui/card";
-import { Badge } from '@/components/ui/badge';
+import { Badge } from "@/components/ui/badge";
-import { Progress } from '@/components/ui/progress';
+import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle } from "@/components/ui/alert-dialog";
-import Link from 'next/link';
+import { toast } from "sonner";
-import { CreateItemDialog } from '@/components/create-item-dialog';
+import Link from "next/link";
 
 interface Project {
   id: string;
   name: string;
-  description?: string;
-  status: 'active' | 'paused' | 'archived';
   domain: string;
-  progress: number;
+  status?: string;
-  task_count: number;
-  completed_count: number;
-  due_date?: string;
 }
 
 export default function ProjectsPage() {
   const [projects, setProjects] = useState<Project[]>([]);
+  const [domainMap, setDomainMap] = useState<Map<string, string>>(new Map());
   const [loading, setLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
+  const [deleteId, setDeleteId] = useState<string | null>(null);
-  const [createOpen, setCreateOpen] = useState(false);
+  const [deleting, setDeleting] = useState(false);
 
-  useEffect(() => {
+  useEffect(() => { fetchProjects(); fetchDomains(); }, []);
-    fetchProjects();
-  }, []);
-
-  useEffect(() => {
-    if (new URLSearchParams(window.location.search).get('new') === 'true') setCreateOpen(true);
-  }, []);
-
-  function handleCreateOpenChange(open: boolean) {
-    setCreateOpen(open);
-    if (!open && new URLSearchParams(window.location.search).get('new') === 'true') {
-      window.history.replaceState(null, '', '/projects');
-    }
-  }
 
   async function fetchProjects() {
     try {
-      setError(null);
+      const res = await fetch("/api/projects?sort=-created");
-      const response = await fetch('/api/projects?sort=-created');
+      const data = await res.json();
-      if (!response.ok) throw new Error('Unable to load projects.');
-      const data = await response.json();
       setProjects(data.items || []);
-    } catch (error) {
+    } catch { toast.error("Unable to load projects"); }
-      console.error('Failed to fetch projects:', error);
+    finally { setLoading(false); }
-      setError('Unable to load projects. Please try again.');
-    } finally {
-      setLoading(false);
-    }
   }
 
-  if (loading) {
+  async function fetchDomains() {
-    return <p role="status" className="text-muted-foreground">Loading projects...</p>;
+    try {
+      const res = await fetch("/api/domains?sort=sort_order");
+      const data = await res.json();
+      const map = new Map<string, string>();
+      for (const d of data.items || []) map.set(d.id, d.name);
+      setDomainMap(map);
+    } catch {}
   }
 
-  const activeProjects = projects.filter((p) => p.status === 'active');
+  async function handleDelete(id: string) {
-  const pausedProjects = projects.filter((p) => p.status === 'paused');
+    setDeleting(true);
-  const archivedProjects = projects.filter((p) => p.status === 'archived');
+    try {
+      const res = await fetch(`/api/projects/${id}`, { method: "DELETE" });
+      if (!res.ok) throw new Error();
+      toast.success("Project deleted");
+      setProjects((p) => p.filter((x) => x.id !== id));
+    } catch { toast.error("Unable to delete project"); }
+    finally { setDeleting(false); setDeleteId(null); }
+  }
+
+  if (loading) return <p className="text-muted-foreground">Loading projects...</p>;
 
   return (
     <div>
       <div className="mb-6 flex items-center justify-between">
         <div>
           <h1 className="text-2xl font-bold">Projects</h1>
-          <p className="mt-1 text-muted-foreground">Every outcome has a home.</p>
+          <p className="mt-1 text-muted-foreground">Plan and track your work.</p>
         </div>
-        <Button onClick={() => setCreateOpen(true)}>
-          <Plus className="mr-2 h-4 w-4" aria-hidden="true" />
-          New project
-        </Button>
       </div>
-
+      {projects.length === 0 ? <p className="text-muted-foreground">No projects yet.</p> : (
-      {error && (
+        <div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
-        <div role="alert" className="mb-6 flex items-center justify-between gap-4 rounded-lg border border-destructive/30 bg-destructive/10 p-4 text-sm text-destructive">
+          {projects.map((p) => (
-          <span>{error}</span>
+            <Card key={p.id} className="hover:shadow-md transition-shadow">
-          <Button variant="outline" size="sm" onClick={fetchProjects}>Retry</Button>
+              <CardContent className="p-4">
+                <div className="flex items-start justify-between">
+                  <Link href={`/projects/${p.id}`} className="flex-1 text-left font-medium hover:underline">{p.name}</Link>
+                  <Button variant="ghost" size="icon" className="h-8 w-8 shrink-0 text-destructive" onClick={() => setDeleteId(p.id)}>
+                    <Trash2 className="h-4 w-4" />
+                  </Button>
+                </div>
+                <div className="mt-2 flex items-center gap-2">
+                  <Badge variant="outline" className="text-xs">{domainMap.get(p.domain) || p.domain}</Badge>
+                  {p.status && <Badge variant="secondary" className="text-xs">{p.status}</Badge>}
+                </div>
+              </CardContent>
+            </Card>
+          ))}
         </div>
       )}
-
+      <AlertDialog open={!!deleteId} onOpenChange={(o) => !o && setDeleteId(null)}>
-      {/* Active projects */}
+        <AlertDialogContent>
-      {activeProjects.length > 0 && (
+          <AlertDialogHeader>
-        <section className="mb-8">
+            <AlertDialogTitle>Delete project?</AlertDialogTitle>
-          <h2 className="mb-4 text-lg font-semibold">Active Projects</h2>
+            <AlertDialogDescription>This cannot be undone.</AlertDialogDescription>
-          <div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
+          </AlertDialogHeader>
-            {activeProjects.map((project) => (
+          <AlertDialogFooter>
-              <ProjectCard key={project.id} project={project} />
+            <AlertDialogCancel disabled={deleting}>Cancel</AlertDialogCancel>
-            ))}
+            <AlertDialogAction onClick={() => deleteId && handleDelete(deleteId)} disabled={deleting}>{deleting ? "Deleting..." : "Delete"}</AlertDialogAction>
-          </div>
+          </AlertDialogFooter>
-        </section>
+        </AlertDialogContent>
-      )}
+      </AlertDialog>
-
-      {/* Paused projects */}
-      {pausedProjects.length > 0 && (
-        <section className="mb-8">
-          <h2 className="mb-4 text-lg font-semibold">Paused Projects</h2>
-          <div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
-            {pausedProjects.map((project) => (
-              <ProjectCard key={project.id} project={project} />
-            ))}
-          </div>
-        </section>
-      )}
-
-      {/* Archived projects */}
-      {archivedProjects.length > 0 && (
-        <section>
-          <h2 className="mb-4 text-lg font-semibold">Archived Projects</h2>
-          <div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
-            {archivedProjects.map((project) => (
-              <ProjectCard key={project.id} project={project} />
-            ))}
-          </div>
-        </section>
-      )}
-
-      {projects.length === 0 && (
-        <Card>
-          <CardContent className="flex flex-col items-center justify-center py-12">
-            <FolderKanban className="mb-4 h-12 w-12 text-muted-foreground" aria-hidden="true" />
-            <p className="text-lg font-semibold">No projects yet</p>
-            <p className="mt-1 text-sm text-muted-foreground">
-              Create your first project to get started
-            </p>
-            <Button className="mt-4" onClick={() => setCreateOpen(true)}>Create a project</Button>
-          </CardContent>
-        </Card>
-      )}
-      <CreateItemDialog
-        type="project"
-        open={createOpen}
-        onOpenChange={handleCreateOpenChange}
-        onCreated={fetchProjects}
-      />
     </div>
   );
 }
-
-function ProjectCard({ project }: { project: Project }) {
-  return (
-    <Link href={`/projects/${project.id}`}>
-      <Card className="h-full transition-shadow hover:shadow-md">
-        <CardHeader className="pb-3">
-          <div className="flex items-start justify-between">
-            <div className="flex-1">
-              <CardTitle className="text-base">{project.name}</CardTitle>
-              {project.description && (
-                <p className="mt-1 text-sm text-muted-foreground line-clamp-2">
-                  {project.description}
-                </p>
-              )}
-            </div>
-            <Badge
-              variant={
-                project.status === 'active'
-                  ? 'default'
-                  : project.status === 'paused'
-                    ? 'secondary'
-                    : 'outline'
-              }
-              className="ml-2 shrink-0"
-            >
-              {project.status}
-            </Badge>
-          </div>
-        </CardHeader>
-        <CardContent className="space-y-3">
-          {/* Progress */}
-          <div>
-            <div className="mb-1 flex items-center justify-between text-xs">
-              <span className="text-muted-foreground">Progress</span>
-              <span className="font-semibold">{project.progress}%</span>
-            </div>
-            <Progress value={project.progress} className="h-2" aria-label={`${project.name} progress: ${project.progress}%`} />
-          </div>
-
-          {/* Task count */}
-          <div className="flex items-center justify-between text-sm">
-            <span className="text-muted-foreground">Tasks</span>
-            <span className="font-semibold">
-              {project.completed_count} / {project.task_count}
-            </span>
-          </div>
-
-          {/* Domain and due date */}
-          <div className="flex items-center justify-between text-xs">
-            <Badge variant="outline">{project.domain}</Badge>
-            {project.due_date && (
-              <span className="text-muted-foreground">
-                Due: {new Date(project.due_date).toLocaleDateString()}
-              </span>
-            )}
-          </div>
-        </CardContent>
-      </Card>
-    </Link>
-  );
-}

apps/web/app/(dashboard)/tasks/page.tsx

@@ -1,72 +1,41 @@
-'use client';
+"use client";
 
-import { useEffect, useState } from 'react';
+import { useState } from "react";
-import { LayoutGrid, List, Plus } from 'lucide-react';
+import { LayoutGrid, List, Plus } from "lucide-react";
-import { Button } from '@/components/ui/button';
+import { Button } from "@/components/ui/button";
-import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
-import { TasksKanbanView } from '@/components/tasks/tasks-kanban-view';
+import { TasksKanbanView } from "@/components/tasks/tasks-kanban-view";
-import { TasksListView } from '@/components/tasks/tasks-list-view';
+import { TasksListView } from "@/components/tasks/tasks-list-view";
-import { CreateItemDialog } from '@/components/create-item-dialog';
+import { CreateItemDialog } from "@/components/create-item-dialog";
+import { useCreateDialogStore } from "@/lib/stores/use-create-dialog-store";
 
 export default function TasksPage() {
-  const [view, setView] = useState<'kanban' | 'list'>('kanban');
+  const [view, setView] = useState<"kanban" | "list">("kanban");
-  const [createOpen, setCreateOpen] = useState(false);
   const [refreshKey, setRefreshKey] = useState(0);
-
+  const { open, openCreate, closeCreate } = useCreateDialogStore();
-  useEffect(() => {
-    if (new URLSearchParams(window.location.search).get('new') === 'true') setCreateOpen(true);
-  }, []);
-
-  function handleCreateOpenChange(open: boolean) {
-    setCreateOpen(open);
-    if (!open && new URLSearchParams(window.location.search).get('new') === 'true') {
-      window.history.replaceState(null, '', '/tasks');
-    }
-  }
 
   return (
     <div>
       <div className="mb-6 flex items-center justify-between">
         <div>
           <h1 className="text-2xl font-bold">Tasks</h1>
-          <p className="mt-1 text-muted-foreground">
+          <p className="mt-1 text-muted-foreground">Move work forward without losing the thread.</p>
-            Move work forward without losing the thread.
-          </p>
         </div>
         <div className="flex items-center gap-2">
-          <Button onClick={() => setCreateOpen(true)}>
+          <Button onClick={() => openCreate("task")}>
             <Plus className="mr-2 h-4 w-4" aria-hidden="true" />
             New task
           </Button>
-          <Tabs
+          <Tabs value={view} onValueChange={(v) => setView(v as "kanban" | "list")}>
-            value={view}
-            onValueChange={(v) => setView(v as 'kanban' | 'list')}
-          >
             <TabsList>
-              <TabsTrigger value="kanban" className="gap-2">
+              <TabsTrigger value="kanban" className="gap-2"><LayoutGrid className="h-4 w-4" aria-hidden="true" /> Board</TabsTrigger>
-                <LayoutGrid className="h-4 w-4" aria-hidden="true" />
+              <TabsTrigger value="list" className="gap-2"><List className="h-4 w-4" aria-hidden="true" /> List</TabsTrigger>
-                Board
-              </TabsTrigger>
-              <TabsTrigger value="list" className="gap-2">
-                <List className="h-4 w-4" aria-hidden="true" />
-                List
-              </TabsTrigger>
             </TabsList>
           </Tabs>
         </div>
       </div>
-
+      {view === "kanban" ? <TasksKanbanView key={refreshKey} /> : <TasksListView key={refreshKey} />}
-      {view === 'kanban' ? (
+      <CreateItemDialog type="task" open={open} onOpenChange={(o) => (o ? openCreate("task") : closeCreate())} onCreated={() => setRefreshKey((k) => k + 1)} />
-        <TasksKanbanView key={refreshKey} />
-      ) : (
-        <TasksListView key={refreshKey} />
-      )}
-      <CreateItemDialog
-        type="task"
-        open={createOpen}
-        onOpenChange={handleCreateOpenChange}
-        onCreated={() => setRefreshKey((key) => key + 1)}
-      />
     </div>
   );
 }

apps/web/app/api/mcp/route.ts

@@ -43,13 +43,15 @@ export async function GET(request: NextRequest) {
 
   await server.connect(transport);
 
-  // Store transport for POST requests
+  // Handle the request first — sessionId is set during handleRequest
+  const response = await transport.handleRequest(request);
+
+  // Store transport AFTER handleRequest sets the session ID
   if (transport.sessionId) {
     transports.set(transport.sessionId, transport);
   }
 
-  // Handle the request
+  return response;
-  return transport.handleRequest(request);
 }
 
 export async function POST(request: NextRequest) {
@@ -84,12 +86,15 @@ export async function POST(request: NextRequest) {
 
   await server.connect(transport);
 
-  // Store transport for subsequent requests
+  // Handle the request first — sessionId is set during handleRequest
+  const response = await transport.handleRequest(request);
+
+  // Store transport AFTER handleRequest sets the session ID
   if (transport.sessionId) {
     transports.set(transport.sessionId, transport);
   }
 
-  return transport.handleRequest(request);
+  return response;
 }
 
 export async function DELETE(request: NextRequest) {

apps/web/components/create-item-dialog.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { Button } from '@/components/ui/button';
 import {
   Dialog,
@@ -12,6 +12,13 @@ import {
 } from '@/components/ui/dialog';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
 
 type ItemType = 'task' | 'project' | 'habit';
 
@@ -21,6 +28,12 @@ const labels = {
   habit: { title: 'New habit', field: 'Habit name' },
 } as const;
 
+interface Domain {
+  id: string;
+  name: string;
+  color: string;
+}
+
 export function CreateItemDialog({
   type,
   open,
@@ -33,11 +46,29 @@ export function CreateItemDialog({
   onCreated: () => void;
 }) {
   const [name, setName] = useState('');
-  const [domain, setDomain] = useState('General');
+  const [domain, setDomain] = useState('');
+  const [domains, setDomains] = useState<Domain[]>([]);
   const [submitting, setSubmitting] = useState(false);
   const [error, setError] = useState('');
   const copy = labels[type];
 
+  useEffect(() => {
+    if (open) {
+      fetch('/api/domains?sort=sort_order')
+        .then((res) => res.json())
+        .then((data) => {
+          const items = data.items || [];
+          setDomains(items);
+          if (items.length > 0 && !domain) {
+            setDomain(items[0].id);
+          }
+        })
+        .catch(() => {
+          setDomains([]);
+        });
+    }
+  }, [open]); // eslint-disable-line react-hooks/exhaustive-deps
+
   async function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
     event.preventDefault();
     setSubmitting(true);
@@ -100,19 +131,35 @@ export function CreateItemDialog({
           </div>
           <div className="space-y-2">
             <Label htmlFor={`${type}-domain`}>Domain</Label>
-            <Input
+            {domains.length > 0 ? (
-              id={`${type}-domain`}
+              <Select value={domain} onValueChange={setDomain}>
-              value={domain}
+                <SelectTrigger id={`${type}-domain`}>
-              onChange={(event) => setDomain(event.target.value)}
+                  <SelectValue placeholder="Select a domain" />
-              required
+                </SelectTrigger>
-            />
+                <SelectContent>
+                  {domains.map((d) => (
+                    <SelectItem key={d.id} value={d.id}>
+                      <span
+                        className="mr-2 inline-block h-3 w-3 rounded-full"
+                        style={{ backgroundColor: d.color }}
+                      />
+                      {d.name}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            ) : (
+              <p className="text-sm text-muted-foreground">
+                No domains found. Create one in Settings first.
+              </p>
+            )}
           </div>
           {error && <p className="text-sm text-destructive" role="alert">{error}</p>}
           <DialogFooter>
             <Button type="button" variant="outline" onClick={() => onOpenChange(false)}>
               Cancel
             </Button>
-            <Button type="submit" disabled={submitting}>
+            <Button type="submit" disabled={submitting || !domain}>
               {submitting ? 'Creating...' : `Create ${type}`}
             </Button>
           </DialogFooter>

apps/web/components/dashboard/widgets/today-tasks-widget.tsx

@@ -14,9 +14,12 @@ interface Task {
   domain: string;
 }
 
+interface Domain { id: string; name: string; color: string; }
+
 export function TodayTasksWidget() {
   const [tasks, setTasks] = useState<Task[]>([]);
   const [loading, setLoading] = useState(true);
+  const [domainMap, setDomainMap] = useState<Map<string, string>>(new Map());
 
   useEffect(() => {
     fetchTasks();
@@ -97,7 +100,7 @@ export function TodayTasksWidget() {
                   {task.title}
                 </span>
                 <Badge variant="outline" className="text-xs">
-                  {task.domain}
+                  {domainMap.get(task.domain) || task.domain}
                 </Badge>
               </div>
             ))}

apps/web/components/habits/habit-card.tsx

@@ -1,97 +1,121 @@
-'use client';
+"use client";
 
-import { Flame, CheckCircle2, Circle } from 'lucide-react';
+import { useEffect, useState } from "react";
-import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Card, CardContent } from "@/components/ui/card";
-import { Button } from '@/components/ui/button';
+import { Badge } from "@/components/ui/badge";
-import { Badge } from '@/components/ui/badge';
+import { Button } from "@/components/ui/button";
-import { Progress } from '@/components/ui/progress';
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
+import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle } from "@/components/ui/alert-dialog";
+import { MoreHorizontal, Pencil, Trash2, Flame } from "lucide-react";
+import { toast } from "sonner";
 
-interface HabitCardProps {
+interface Habit {
-  habit: {
+  id: string;
-    id: string;
+  name: string;
-    name: string;
+  description?: string;
-    description?: string;
+  domain: string;
-    frequency: 'daily' | 'weekly' | 'custom';
+  frequency?: string;
-    current_streak: number;
+  difficulty?: string;
-    best_streak: number;
+  streak?: number;
-    score: number;
-    completion_mode: 'quick' | 'detailed';
-    domain: string;
-    logged_today: boolean;
-  };
-  onComplete: () => void;
 }
 
-export function HabitCard({ habit, onComplete }: HabitCardProps) {
+export function HabitCard() {
+  const [habits, setHabits] = useState<Habit[]>([]);
+  const [domainMap, setDomainMap] = useState<Map<string, string>>(new Map());
+  const [loading, setLoading] = useState(true);
+  const [deleteId, setDeleteId] = useState<string | null>(null);
+  const [deleting, setDeleting] = useState(false);
+  const [editing, setEditing] = useState<Habit | null>(null);
+
+  useEffect(() => { fetchHabits(); fetchDomains(); }, []);
+
+  async function fetchHabits() {
+    try {
+      const res = await fetch("/api/habits?sort=-created");
+      const data = await res.json();
+      setHabits(data.items || []);
+    } catch { toast.error("Unable to load habits"); }
+    finally { setLoading(false); }
+  }
+
+  async function fetchDomains() {
+    try {
+      const res = await fetch("/api/domains?sort=sort_order");
+      const data = await res.json();
+      const map = new Map<string, string>();
+      for (const d of data.items || []) map.set(d.id, d.name);
+      setDomainMap(map);
+    } catch {}
+  }
+
+  async function handleDelete(id: string) {
+    setDeleting(true);
+    try {
+      const res = await fetch(`/api/habits/${id}`, { method: "DELETE" });
+      if (!res.ok) throw new Error();
+      toast.success("Habit deleted");
+      setHabits((h) => h.filter((x) => x.id !== id));
+    } catch { toast.error("Unable to delete habit"); }
+    finally { setDeleting(false); setDeleteId(null); }
+  }
+
+  if (loading) return <p className="text-muted-foreground">Loading habits...</p>;
+
   return (
-    <Card className="relative overflow-hidden">
+    <>
-      <CardHeader className="pb-3">
+      <div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
-        <div className="flex items-start justify-between">
+        {habits.map((habit) => (
-          <div className="flex-1">
+          <Card key={habit.id} className="hover:shadow-md transition-shadow">
-            <CardTitle className="text-base">{habit.name}</CardTitle>
+            <CardContent className="p-4">
-            {habit.description && (
+              <div className="flex items-start justify-between">
-              <p className="mt-1 text-sm text-muted-foreground line-clamp-2">
+                <div className="flex-1">
-                {habit.description}
+                  <div className="flex items-center gap-2">
-              </p>
+                    <span className="font-medium">{habit.name}</span>
-            )}
+                    {habit.streak && habit.streak > 0 && (
-          </div>
+                      <span className="flex items-center gap-1 text-sm text-orange-500">
-          <Badge variant="outline" className="ml-2 shrink-0">
+                        <Flame className="h-4 w-4" /> {habit.streak}
-            {habit.domain}
+                      </span>
-          </Badge>
+                    )}
-        </div>
+                  </div>
-      </CardHeader>
+                  <div className="mt-2 flex items-center gap-2 flex-wrap">
-      <CardContent className="space-y-4">
+                    <Badge variant="outline" className="text-xs">{domainMap.get(habit.domain) || habit.domain}</Badge>
-        {/* Streak info */}
+                    {habit.frequency && <Badge variant="secondary" className="text-xs">{habit.frequency}</Badge>}
-        <div className="flex items-center justify-between text-sm">
+                    {habit.difficulty && <Badge variant="secondary" className="text-xs">{habit.difficulty}</Badge>}
-          <div className="flex items-center gap-1">
+                  </div>
-            <Flame className="h-4 w-4 text-orange-500" aria-hidden="true" />
+                </div>
-            <span className="font-semibold">{habit.current_streak}</span>
+                <DropdownMenu>
-            <span className="text-muted-foreground">day streak</span>
+                  <DropdownMenuTrigger asChild>
-          </div>
+                    <Button variant="ghost" size="icon" className="h-8 w-8 shrink-0">
-          <span className="text-xs text-muted-foreground">
+                      <MoreHorizontal className="h-4 w-4" />
-            Best: {habit.best_streak}
+                    </Button>
-          </span>
+                  </DropdownMenuTrigger>
-        </div>
+                  <DropdownMenuContent align="end">
+                    <DropdownMenuItem onClick={() => setEditing(habit)}>
+                      <Pencil className="mr-2 h-4 w-4" /> Edit
+                    </DropdownMenuItem>
+                    <DropdownMenuItem className="text-destructive" onClick={() => setDeleteId(habit.id)}>
+                      <Trash2 className="mr-2 h-4 w-4" /> Delete
+                    </DropdownMenuItem>
+                  </DropdownMenuContent>
+                </DropdownMenu>
+              </div>
+            </CardContent>
+          </Card>
+        ))}
+      </div>
 
-        {/* Score */}
+      <AlertDialog open={!!deleteId} onOpenChange={(o) => !o && setDeleteId(null)}>
-        <div>
+        <AlertDialogContent>
-          <div className="mb-1 flex items-center justify-between text-xs">
+          <AlertDialogHeader>
-            <span className="text-muted-foreground">Score</span>
+            <AlertDialogTitle>Delete habit?</AlertDialogTitle>
-            <span className="font-semibold">{habit.score}/100</span>
+            <AlertDialogDescription>This cannot be undone.</AlertDialogDescription>
-          </div>
+          </AlertDialogHeader>
-          <Progress value={habit.score} className="h-2" aria-label={`${habit.name} score: ${habit.score} out of 100`} />
+          <AlertDialogFooter>
-        </div>
+            <AlertDialogCancel disabled={deleting}>Cancel</AlertDialogCancel>
-
+            <AlertDialogAction onClick={() => deleteId && handleDelete(deleteId)} disabled={deleting}>{deleting ? "Deleting..." : "Delete"}</AlertDialogAction>
-        {/* Frequency badge */}
+          </AlertDialogFooter>
-        <div className="flex items-center gap-2">
+        </AlertDialogContent>
-          <Badge variant="secondary" className="text-xs">
+      </AlertDialog>
-            {habit.frequency}
+    </>
-          </Badge>
-          <Badge variant="secondary" className="text-xs">
-            {habit.completion_mode}
-          </Badge>
-        </div>
-
-        {/* Complete button */}
-        <Button
-          onClick={onComplete}
-          variant={habit.logged_today ? 'outline' : 'default'}
-          className="w-full"
-          disabled={habit.logged_today}
-        >
-          {habit.logged_today ? (
-            <>
-              <CheckCircle2 className="mr-2 h-4 w-4 text-green-600" />
-              Completed today
-            </>
-          ) : (
-            <>
-              <Circle className="mr-2 h-4 w-4" />
-              Mark complete
-            </>
-          )}
-        </Button>
-      </CardContent>
-    </Card>
   );
 }

apps/web/components/settings/settings-domains.tsx

@@ -27,6 +27,7 @@ interface Domain {
 export function SettingsDomains() {
   const [domains, setDomains] = useState<Domain[]>([]);
   const [newDomainName, setNewDomainName] = useState('');
+  const [newDomainColor, setNewDomainColor] = useState('#3b82f6');
   const [loading, setLoading] = useState(true);
   const [creating, setCreating] = useState(false);
   const [deletingId, setDeletingId] = useState<string | null>(null);
@@ -150,14 +151,25 @@ export function SettingsDomains() {
           <label htmlFor="new-domain-name" className="sr-only">
             New domain name
           </label>
-          <Input
+          <div className="flex gap-2 flex-1">
-            id="new-domain-name"
+            <Input
-            placeholder="New domain name"
+              id="new-domain-name"
-            value={newDomainName}
+              placeholder="New domain name"
-            onChange={(e) => setNewDomainName(e.target.value)}
+              value={newDomainName}
-            onKeyDown={(e) => e.key === 'Enter' && addDomain()}
+              onChange={(e) => setNewDomainName(e.target.value)}
-            disabled={creating}
+              onKeyDown={(e) => e.key === 'Enter' && addDomain()}
-          />
+              disabled={creating}
+              className="flex-1"
+            />
+            <input
+              type="color"
+              value={newDomainColor}
+              onChange={(e) => setNewDomainColor(e.target.value)}
+              className="h-10 w-10 cursor-pointer rounded border"
+              title="Domain color"
+              disabled={creating}
+            />
+          </div>
           <Button onClick={addDomain} disabled={creating || !newDomainName.trim()}>
             <Plus className="mr-1 h-4 w-4" />
             {creating ? 'Adding...' : 'Add'}

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>
+                  {domains.map((d) => (
-                  <SelectItem value="work">Work</SelectItem>
+                    <SelectItem key={d.id} value={d.id}>{d.name}</SelectItem>
-                  <SelectItem value="ots">OTS</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">
+            {domainName && (
-              {task.domain}
+              <Badge variant="outline" className="text-xs">
-            </Badge>
+                {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}
             />

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}

apps/web/components/topbar.tsx

@@ -1,73 +1,47 @@
 'use client';
 
 import { Search, Bell, Plus, Menu } from 'lucide-react';
-import { usePathname, useRouter } from 'next/navigation';
+import { usePathname } from 'next/navigation';
 import { Button } from '@/components/ui/button';
 import { useSidebarStore } from '@/lib/stores/use-sidebar-store';
+import { useCreateDialogStore } from '@/lib/stores/use-create-dialog-store';
 import { CommandPalette } from '@/components/command-palette';
 
 export function TopBar() {
   const pathname = usePathname();
-  const router = useRouter();
   const { setMobileOpen } = useSidebarStore();
-  const creation = pathname.startsWith('/projects')
+  const openCreate = useCreateDialogStore((s) => s.openCreate);
-    ? { href: '/projects?new=true', label: 'New project' }
+
-    : pathname.startsWith('/habits')
+  function handleCreate() {
-      ? { href: '/habits?new=true', label: 'New habit' }
+    if (pathname.startsWith('/projects')) openCreate('project');
-      : pathname.startsWith('/tasks')
+    else if (pathname.startsWith('/habits')) openCreate('habit');
-        ? { href: '/tasks?new=true', label: 'New task' }
+    else if (pathname.startsWith('/tasks')) openCreate('task');
-        : null;
+    else {
+      document.dispatchEvent(new KeyboardEvent('keydown', { key: 'k', metaKey: true }));
+    }
+  }
+
+  const label = pathname.startsWith('/projects') ? 'New project'
+    : pathname.startsWith('/habits') ? 'New habit'
+    : pathname.startsWith('/tasks') ? 'New task' : 'Quick add';
 
   return (
     <>
       <header className="sticky top-0 z-10 flex h-14 items-center gap-4 border-b bg-card px-6" role="banner">
-        <Button
+        <Button variant="ghost" size="icon" className="md:hidden" onClick={() => setMobileOpen(true)} aria-label="Open navigation menu">
-          variant="ghost"
-          size="icon"
-          className="md:hidden"
-          onClick={() => setMobileOpen(true)}
-          aria-label="Open navigation menu"
-        >
           <Menu className="h-5 w-5" />
         </Button>
-
-        {/* Search / Command trigger */}
         <div className="flex-1 md:max-w-sm">
-          <Button
+          <Button variant="outline" className="w-full justify-start text-muted-foreground" onClick={() => document.dispatchEvent(new KeyboardEvent('keydown', { key: 'k', metaKey: true }))} aria-label="Open search (Cmd+K)">
-            variant="outline"
-            className="w-full justify-start text-muted-foreground"
-            onClick={() => {
-              document.dispatchEvent(
-                new KeyboardEvent('keydown', { key: 'k', metaKey: true })
-              );
-            }}
-            aria-label="Open search (Cmd+K)"
-          >
             <Search className="mr-2 h-4 w-4" aria-hidden="true" />
-            Search or jump to...
+            Search or jump to... <kbd className="ml-auto pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground">⌘K</kbd>
-            <kbd className="ml-auto pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground">
-              ⌘K
-            </kbd>
           </Button>
         </div>
-
         <div className="ml-auto flex items-center gap-2">
-          <Button
+          <Button variant="outline" size="sm" onClick={handleCreate} aria-label={label === 'Quick add' ? 'Quick add' : `Create ${label.toLowerCase()}`}>
-            variant="outline"
-            size="sm"
-            onClick={() => {
-              if (creation) {
-                router.push(creation.href);
-                return;
-              }
-              document.dispatchEvent(new KeyboardEvent('keydown', { key: 'k', metaKey: true }));
-            }}
-            aria-label={creation ? `Create ${creation.label.toLowerCase()}` : 'Quick add'}
-          >
             <Plus className="mr-1 h-4 w-4" aria-hidden="true" />
-            {creation?.label ?? 'Quick add'}
+            {label}
           </Button>
-
           <Button variant="ghost" size="icon" aria-label="Notifications">
             <Bell className="h-5 w-5" aria-hidden="true" />
           </Button>

apps/web/lib/pocketbase.ts

@@ -1,3 +1,16 @@
+/**
+ * PocketBase Compatibility Layer
+ *
+ * This module was originally written for PocketBase. After the migration to
+ * PostgreSQL + Drizzle ORM (commit 7333548), all functions now delegate to
+ * the new `database.ts` module which uses the Drizzle ORM with postgres-js.
+ *
+ * The naming is preserved for backward compatibility — ALL API route files
+ * import from this module. Do not rename the exports unless you also update
+ * every file that imports them.
+ *
+ * @see ./database.ts for the actual Drizzle ORM implementation.
+ */
 import { createAdminClient as createDatabaseAdminClient, createDatabaseClient } from './database';
 
 /** @deprecated Import from `@/lib/database` in new code. */

apps/web/lib/stores/index.ts

@@ -4,3 +4,4 @@ export { useDashboardStore } from './use-dashboard-store';
 export { useTimerStore } from './use-timer-store';
 export { useFilterStore } from './use-filter-store';
 export { useKeyboardShortcutsStore } from './use-keyboard-shortcuts-store';
+export { useCreateDialogStore } from './use-create-dialog-store';

apps/web/lib/stores/use-create-dialog-store.ts

@@ -0,0 +1,17 @@
+import { create } from "zustand";
+
+type ItemType = "task" | "project" | "habit" | null;
+
+interface CreateDialogState {
+  type: ItemType;
+  open: boolean;
+  openCreate: (type: ItemType) => void;
+  closeCreate: () => void;
+}
+
+export const useCreateDialogStore = create<CreateDialogState>((set) => ({
+  type: null,
+  open: false,
+  openCreate: (type: ItemType) => set({ type, open: true }),
+  closeCreate: () => set({ type: null, open: false }),
+}));

package-lock.json

@@ -1313,9 +1313,6 @@
       "cpu": [
         "arm64"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1332,9 +1329,6 @@
       "cpu": [
         "arm64"
       ],
-      "libc": [
-        "musl"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1351,9 +1345,6 @@
       "cpu": [
         "x64"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1370,9 +1361,6 @@
       "cpu": [
         "x64"
       ],
-      "libc": [
-        "musl"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -7050,6 +7038,7 @@
       "version": "2.3.2",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
       "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
+      "dev": true,
       "hasInstallScript": true,
       "license": "MIT",
       "optional": true,