From 9ddab4e5a51407a1b6c0e3ba2f2a01c4ac144228 Mon Sep 17 00:00:00 2001
From: bot-hermes <bot-hermes@buzzbee.dev>
Date: Tue, 28 Jul 2026 15:02:01 +0000
Subject: [PATCH] fix: round 3 UI gaps - habit edit dialog, domain edit, empty
 states, domain name resolution

---
 .../app/(dashboard)/projects/[id]/page.tsx    |  39 +++-
 apps/web/app/(dashboard)/reports/page.tsx     |  18 +-
 apps/web/components/habits/habit-card.tsx     | 214 ++++++++++++++----
 .../components/settings/settings-domains.tsx  | 117 +++++++++-
 .../components/tasks/tasks-kanban-view.tsx    |   8 +
 apps/web/components/tasks/tasks-list-view.tsx |   8 +
 6 files changed, 341 insertions(+), 63 deletions(-)

diff --git a/apps/web/app/(dashboard)/projects/[id]/page.tsx b/apps/web/app/(dashboard)/projects/[id]/page.tsx
index a9def7d..de3cfe2 100644
--- a/apps/web/app/(dashboard)/projects/[id]/page.tsx
+++ b/apps/web/app/(dashboard)/projects/[id]/page.tsx
@@ -48,9 +48,11 @@ export default function ProjectDetailPage() {
   const [tasks, setTasks] = useState<Task[]>([]);
   const [milestones, setMilestones] = useState<Milestone[]>([]);
   const [loading, setLoading] = useState(true);
+  const [domainMap, setDomainMap] = useState<Map<string, string>>(new Map());
 
   useEffect(() => {
     if (projectId) {
+      fetchDomains();
       fetchProject();
       fetchTasks();
       fetchMilestones();
@@ -58,6 +60,18 @@ export default function ProjectDetailPage() {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [projectId]);
 
+  async function fetchDomains() {
+    try {
+      const res = await fetch('/api/domains?sort=sort_order');
+      if (res.ok) {
+        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 fetchProject() {
     try {
       const response = await fetch(`/api/projects/${projectId}`);
@@ -138,17 +152,20 @@ export default function ProjectDetailPage() {
               <p className="mt-1 text-muted-foreground">{project.description}</p>
             )}
           </div>
-          <Badge
-            variant={
-              project.status === 'active'
-                ? 'default'
-                : project.status === 'paused'
-                  ? 'secondary'
-                  : 'outline'
-            }
-          >
-            {project.status}
-          </Badge>
+          <div className="flex items-center gap-2">
+            <Badge
+              variant={
+                project.status === 'active'
+                  ? 'default'
+                  : project.status === 'paused'
+                    ? 'secondary'
+                    : 'outline'
+              }
+            >
+              {project.status}
+            </Badge>
+            <Badge variant="outline">{domainMap.get(project.domain) || project.domain}</Badge>
+          </div>
         </div>
 
         {/* Project stats */}
diff --git a/apps/web/app/(dashboard)/reports/page.tsx b/apps/web/app/(dashboard)/reports/page.tsx
index 098bd10..28e0ee3 100644
--- a/apps/web/app/(dashboard)/reports/page.tsx
+++ b/apps/web/app/(dashboard)/reports/page.tsx
@@ -64,6 +64,7 @@ export default function ReportsPage() {
   const [showTemplates, setShowTemplates] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const [saveStatus, setSaveStatus] = useState<'Saved' | 'Saving' | 'Failed'>('Saved');
+  const [domainMap, setDomainMap] = useState<Map<string, string>>(new Map());
   const [reportToDelete, setReportToDelete] = useState<Report | null>(null);
   const [deleting, setDeleting] = useState(false);
   const pendingSave = useRef<{ id: string; updates: Partial<Report> } | null>(null);
@@ -72,11 +73,24 @@ export default function ReportsPage() {
 
   useEffect(() => {
     fetchReports();
+    fetchDomains();
     return () => {
       if (saveTimer.current) clearTimeout(saveTimer.current);
     };
   }, []);
 
+  async function fetchDomains() {
+    try {
+      const res = await fetch('/api/domains?sort=sort_order');
+      if (res.ok) {
+        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 fetchReports() {
     setLoading(true);
     setError(null);
@@ -284,7 +298,7 @@ export default function ReportsPage() {
                             {report.report_type}
                           </Badge>
                           <Badge variant="outline" className="text-xs">
-                            {report.domain}
+                            {domainMap.get(report.domain) || report.domain}
                           </Badge>
                         </div>
                       </div>
@@ -328,7 +342,7 @@ export default function ReportsPage() {
                 </div>
                 <div className="mt-2 flex gap-2">
                   <Badge variant="outline">{selectedReport.report_type}</Badge>
-                  <Badge variant="outline">{selectedReport.domain}</Badge>
+                  <Badge variant="outline">{domainMap.get(selectedReport.domain) || selectedReport.domain}</Badge>
                   {selectedReport.date_range_start && selectedReport.date_range_end && (
                     <Badge variant="outline" className="gap-1">
                       <Clock className="h-3 w-3" />
diff --git a/apps/web/components/habits/habit-card.tsx b/apps/web/components/habits/habit-card.tsx
index 509299b..224e09e 100644
--- a/apps/web/components/habits/habit-card.tsx
+++ b/apps/web/components/habits/habit-card.tsx
@@ -4,8 +4,13 @@ import { useEffect, useState } from "react";
 import { Card, CardContent } from "@/components/ui/card";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
+import { Label } from "@/components/ui/label";
 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 { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
 import { MoreHorizontal, Pencil, Trash2, Flame } from "lucide-react";
 import { toast } from "sonner";
 
@@ -19,16 +24,39 @@ interface Habit {
   streak?: number;
 }
 
+interface Domain {
+  id: string;
+  name: string;
+  color: string;
+}
+
 export function HabitCard() {
   const [habits, setHabits] = useState<Habit[]>([]);
   const [domainMap, setDomainMap] = useState<Map<string, string>>(new Map());
+  const [domains, setDomains] = useState<Domain[]>([]);
   const [loading, setLoading] = useState(true);
   const [deleteId, setDeleteId] = useState<string | null>(null);
   const [deleting, setDeleting] = useState(false);
   const [editing, setEditing] = useState<Habit | null>(null);
+  const [editName, setEditName] = useState("");
+  const [editDescription, setEditDescription] = useState("");
+  const [editDomain, setEditDomain] = useState("");
+  const [editFrequency, setEditFrequency] = useState("daily");
+  const [editDifficulty, setEditDifficulty] = useState("medium");
+  const [saving, setSaving] = useState(false);
 
   useEffect(() => { fetchHabits(); fetchDomains(); }, []);
 
+  useEffect(() => {
+    if (editing) {
+      setEditName(editing.name);
+      setEditDescription(editing.description || "");
+      setEditDomain(editing.domain);
+      setEditFrequency(editing.frequency || "daily");
+      setEditDifficulty(editing.difficulty || "medium");
+    }
+  }, [editing]);
+
   async function fetchHabits() {
     try {
       const res = await fetch("/api/habits?sort=-created");
@@ -42,16 +70,18 @@ export function HabitCard() {
     try {
       const res = await fetch("/api/domains?sort=sort_order");
       const data = await res.json();
+      const items = data.items || [];
       const map = new Map<string, string>();
-      for (const d of data.items || []) map.set(d.id, d.name);
+      for (const d of items) map.set(d.id, d.name);
       setDomainMap(map);
+      setDomains(items);
     } catch {}
   }
 
   async function handleDelete(id: string) {
     setDeleting(true);
     try {
-      const res = await fetch(`/api/habits/${id}`, { method: "DELETE" });
+      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));
@@ -59,50 +89,156 @@ export function HabitCard() {
     finally { setDeleting(false); setDeleteId(null); }
   }
 
+  async function handleSave() {
+    if (!editing || !editName.trim()) return;
+    setSaving(true);
+    try {
+      const res = await fetch("/api/habits/" + editing.id, {
+        method: "PATCH",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          name: editName.trim(),
+          description: editDescription || undefined,
+          domain: editDomain,
+          frequency: editFrequency,
+          difficulty: editDifficulty,
+        }),
+      });
+      if (!res.ok) throw new Error();
+      toast.success("Habit updated");
+      setEditing(null);
+      await fetchHabits();
+    } catch {
+      toast.error("Unable to update habit");
+    } finally {
+      setSaving(false);
+    }
+  }
+
   if (loading) return <p className="text-muted-foreground">Loading habits...</p>;
 
   return (
     <>
-      <div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
-        {habits.map((habit) => (
-          <Card key={habit.id} className="hover:shadow-md transition-shadow">
-            <CardContent className="p-4">
-              <div className="flex items-start justify-between">
-                <div className="flex-1">
-                  <div className="flex items-center gap-2">
-                    <span className="font-medium">{habit.name}</span>
-                    {habit.streak && habit.streak > 0 && (
-                      <span className="flex items-center gap-1 text-sm text-orange-500">
-                        <Flame className="h-4 w-4" /> {habit.streak}
-                      </span>
-                    )}
-                  </div>
-                  <div className="mt-2 flex items-center gap-2 flex-wrap">
-                    <Badge variant="outline" className="text-xs">{domainMap.get(habit.domain) || habit.domain}</Badge>
-                    {habit.frequency && <Badge variant="secondary" className="text-xs">{habit.frequency}</Badge>}
-                    {habit.difficulty && <Badge variant="secondary" className="text-xs">{habit.difficulty}</Badge>}
+      {habits.length === 0 ? (
+        <div className="py-12 text-center">
+          <p className="text-muted-foreground">No habits yet. Create your first habit to get started!</p>
+        </div>
+      ) : (
+        <div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
+          {habits.map((habit) => (
+            <Card key={habit.id} className="hover:shadow-md transition-shadow">
+              <CardContent className="p-4">
+                <div className="flex items-start justify-between">
+                  <div className="flex-1">
+                    <div className="flex items-center gap-2">
+                      <span className="font-medium">{habit.name}</span>
+                      {habit.streak && habit.streak > 0 && (
+                        <span className="flex items-center gap-1 text-sm text-orange-500">
+                          <Flame className="h-4 w-4" /> {habit.streak}
+                        </span>
+                      )}
+                    </div>
+                    <div className="mt-2 flex items-center gap-2 flex-wrap">
+                      <Badge variant="outline" className="text-xs">{domainMap.get(habit.domain) || habit.domain}</Badge>
+                      {habit.frequency && <Badge variant="secondary" className="text-xs">{habit.frequency}</Badge>}
+                      {habit.difficulty && <Badge variant="secondary" className="text-xs">{habit.difficulty}</Badge>}
+                    </div>
                   </div>
+                  <DropdownMenu>
+                    <DropdownMenuTrigger asChild>
+                      <Button variant="ghost" size="icon" className="h-8 w-8 shrink-0">
+                        <MoreHorizontal className="h-4 w-4" />
+                      </Button>
+                    </DropdownMenuTrigger>
+                    <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>
-                <DropdownMenu>
-                  <DropdownMenuTrigger asChild>
-                    <Button variant="ghost" size="icon" className="h-8 w-8 shrink-0">
-                      <MoreHorizontal className="h-4 w-4" />
-                    </Button>
-                  </DropdownMenuTrigger>
-                  <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>
+              </CardContent>
+            </Card>
+          ))}
+        </div>
+      )}
+
+      {/* Edit Habit Dialog */}
+      <Dialog open={!!editing} onOpenChange={(o) => !o && setEditing(null)}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Edit habit</DialogTitle>
+            <DialogDescription>Update your habit details.</DialogDescription>
+          </DialogHeader>
+          <div className="space-y-4">
+            <div className="space-y-2">
+              <Label htmlFor="edit-habit-name">Name</Label>
+              <Input id="edit-habit-name" value={editName} onChange={(e) => setEditName(e.target.value)} autoFocus required />
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="edit-habit-description">Description</Label>
+              <Textarea id="edit-habit-description" value={editDescription} onChange={(e) => setEditDescription(e.target.value)} />
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="edit-habit-domain">Domain</Label>
+              {domains.length > 0 ? (
+                <Select value={editDomain} onValueChange={setEditDomain}>
+                  <SelectTrigger id="edit-habit-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.</p>
+              )}
+            </div>
+            <div className="grid grid-cols-2 gap-4">
+              <div className="space-y-2">
+                <Label htmlFor="edit-habit-frequency">Frequency</Label>
+                <Select value={editFrequency} onValueChange={setEditFrequency}>
+                  <SelectTrigger id="edit-habit-frequency">
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="daily">Daily</SelectItem>
+                    <SelectItem value="weekly">Weekly</SelectItem>
+                    <SelectItem value="custom">Custom</SelectItem>
+                  </SelectContent>
+                </Select>
               </div>
-            </CardContent>
-          </Card>
-        ))}
-      </div>
+              <div className="space-y-2">
+                <Label htmlFor="edit-habit-difficulty">Difficulty</Label>
+                <Select value={editDifficulty} onValueChange={setEditDifficulty}>
+                  <SelectTrigger id="edit-habit-difficulty">
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="easy">Easy</SelectItem>
+                    <SelectItem value="medium">Medium</SelectItem>
+                    <SelectItem value="hard">Hard</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+            </div>
+          </div>
+          <DialogFooter>
+            <Button type="button" variant="outline" onClick={() => setEditing(null)}>Cancel</Button>
+            <Button onClick={handleSave} disabled={saving || !editName.trim()}>
+              {saving ? "Saving..." : "Save"}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
 
       <AlertDialog open={!!deleteId} onOpenChange={(o) => !o && setDeleteId(null)}>
         <AlertDialogContent>
diff --git a/apps/web/components/settings/settings-domains.tsx b/apps/web/components/settings/settings-domains.tsx
index 991a506..fe60472 100644
--- a/apps/web/components/settings/settings-domains.tsx
+++ b/apps/web/components/settings/settings-domains.tsx
@@ -1,10 +1,19 @@
 'use client';
 
 import { useEffect, useState } from 'react';
-import { Plus, Trash2 } from 'lucide-react';
+import { Plus, Trash2, Pencil } from 'lucide-react';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
 import {
   AlertDialog,
   AlertDialogAction,
@@ -34,11 +43,22 @@ export function SettingsDomains() {
   const [domainToDelete, setDomainToDelete] = useState<Domain | null>(null);
   const [error, setError] = useState<string | null>(null);
   const [status, setStatus] = useState<string | null>(null);
+  const [editing, setEditing] = useState<Domain | null>(null);
+  const [editName, setEditName] = useState('');
+  const [editColor, setEditColor] = useState('#3b82f6');
+  const [saving, setSaving] = useState(false);
 
   useEffect(() => {
     fetchDomains();
   }, []);
 
+  useEffect(() => {
+    if (editing) {
+      setEditName(editing.name);
+      setEditColor(editing.color || '#3b82f6');
+    }
+  }, [editing]);
+
   async function fetchDomains() {
     setLoading(true);
     setError(null);
@@ -91,7 +111,7 @@ export function SettingsDomains() {
     setError(null);
     setStatus(null);
     try {
-      const response = await fetch(`/api/domains/${domainToDelete.id}`, { method: 'DELETE' });
+      const response = await fetch('/api/domains/' + domainToDelete.id, { method: 'DELETE' });
       if (!response.ok) throw new Error('Unable to delete domain.');
       setDomainToDelete(null);
       setStatus('Domain deleted successfully.');
@@ -104,6 +124,32 @@ export function SettingsDomains() {
     }
   }
 
+  async function handleEditSave() {
+    if (!editing || !editName.trim()) return;
+    setSaving(true);
+    setError(null);
+    setStatus(null);
+    try {
+      const response = await fetch('/api/domains/' + editing.id, {
+        method: 'PATCH',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          name: editName.trim(),
+          color: editColor,
+        }),
+      });
+      if (!response.ok) throw new Error('Unable to update domain.');
+      setEditing(null);
+      setStatus('Domain updated successfully.');
+      await fetchDomains();
+    } catch (error) {
+      console.error('Failed to update domain:', error);
+      setError('Unable to update domain. Please try again.');
+    } finally {
+      setSaving(false);
+    }
+  }
+
   return (
     <Card>
       <CardHeader>
@@ -132,15 +178,25 @@ export function SettingsDomains() {
                   />
                   <span className="font-medium">{domain.name}</span>
                 </div>
-                <Button
-                  variant="ghost"
-                  size="icon"
-                  onClick={() => setDomainToDelete(domain)}
-                  aria-label={`Delete domain: ${domain.name}`}
-                  disabled={deletingId === domain.id}
-                >
-                  <Trash2 className="h-4 w-4 text-destructive" aria-hidden="true" />
-                </Button>
+                <div className="flex items-center gap-1">
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    onClick={() => setEditing(domain)}
+                    aria-label={'Edit domain: ' + domain.name}
+                  >
+                    <Pencil className="h-4 w-4" aria-hidden="true" />
+                  </Button>
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    onClick={() => setDomainToDelete(domain)}
+                    aria-label={'Delete domain: ' + domain.name}
+                    disabled={deletingId === domain.id}
+                  >
+                    <Trash2 className="h-4 w-4 text-destructive" aria-hidden="true" />
+                  </Button>
+                </div>
               </div>
             ))
           )}
@@ -175,6 +231,45 @@ export function SettingsDomains() {
             {creating ? 'Adding...' : 'Add'}
           </Button>
         </div>
+
+        {/* Edit Domain Dialog */}
+        <Dialog open={!!editing} onOpenChange={(o) => !o && setEditing(null)}>
+          <DialogContent>
+            <DialogHeader>
+              <DialogTitle>Edit domain</DialogTitle>
+              <DialogDescription>Update the domain name and color.</DialogDescription>
+            </DialogHeader>
+            <div className="space-y-4">
+              <div className="space-y-2">
+                <Label htmlFor="edit-domain-name">Name</Label>
+                <Input
+                  id="edit-domain-name"
+                  value={editName}
+                  onChange={(e) => setEditName(e.target.value)}
+                  autoFocus
+                  required
+                />
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="edit-domain-color">Color</Label>
+                <input
+                  id="edit-domain-color"
+                  type="color"
+                  value={editColor}
+                  onChange={(e) => setEditColor(e.target.value)}
+                  className="h-10 w-10 cursor-pointer rounded border"
+                />
+              </div>
+            </div>
+            <DialogFooter>
+              <Button type="button" variant="outline" onClick={() => setEditing(null)}>Cancel</Button>
+              <Button onClick={handleEditSave} disabled={saving || !editName.trim()}>
+                {saving ? 'Saving...' : 'Save'}
+              </Button>
+            </DialogFooter>
+          </DialogContent>
+        </Dialog>
+
         <AlertDialog open={!!domainToDelete} onOpenChange={(open) => !open && setDomainToDelete(null)}>
           <AlertDialogContent>
             <AlertDialogHeader>
diff --git a/apps/web/components/tasks/tasks-kanban-view.tsx b/apps/web/components/tasks/tasks-kanban-view.tsx
index 3b49255..76246c7 100644
--- a/apps/web/components/tasks/tasks-kanban-view.tsx
+++ b/apps/web/components/tasks/tasks-kanban-view.tsx
@@ -296,6 +296,14 @@ export function TasksKanbanView() {
     return <p className="text-muted-foreground">Loading tasks...</p>;
   }
 
+  if (tasks.length === 0) {
+    return (
+      <div className="py-12 text-center">
+        <p className="text-muted-foreground">No tasks yet. Create your first task to get started!</p>
+      </div>
+    );
+  }
+
   return (
     <>
       <DndContext
diff --git a/apps/web/components/tasks/tasks-list-view.tsx b/apps/web/components/tasks/tasks-list-view.tsx
index a50bca0..de53dd0 100644
--- a/apps/web/components/tasks/tasks-list-view.tsx
+++ b/apps/web/components/tasks/tasks-list-view.tsx
@@ -110,6 +110,14 @@ export function TasksListView() {
     return <p className="text-muted-foreground">Loading tasks...</p>;
   }
 
+  if (tasks.length === 0) {
+    return (
+      <div className="py-12 text-center">
+        <p className="text-muted-foreground">No tasks yet. Create your first task to get started!</p>
+      </div>
+    );
+  }
+
   return (
     <>
       <ScrollArea className="w-full">