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/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
-              id={`${type}-domain`}
-              value={domain}
-              onChange={(event) => setDomain(event.target.value)}
-              required
-            />
+            {domains.length > 0 ? (
+              <Select value={domain} onValueChange={setDomain}>
+                <SelectTrigger id={`${type}-domain`}>
+                  <SelectValue placeholder="Select a domain" />
+                </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>
@@ -120,4 +167,4 @@ export function CreateItemDialog({
       </DialogContent>
     </Dialog>
   );
-}
+}