merge: fix/ux-leaf-b-edit-dialogs into integration/ux-28-gaps

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

@@ -1,10 +1,27 @@
 "use client";
 
 import { useState, useEffect, useCallback } from "react";
-import { Plus, CheckCircle2, Circle, MoreHorizontal, Flame, Filter } from "lucide-react";
+import { Plus, CheckCircle2, Circle, MoreHorizontal, Flame, Filter, Pencil, Trash2 } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
+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 { HabitCreateDialog } from "@/components/habits/habit-create-dialog";
+import { HabitEditDialog } from "@/components/habits/habit-edit-dialog";
 import { HabitCompletionDialog } from "@/components/habits/habit-completion-dialog";
 import { HabitCalendarHeatmap } from "@/components/habits/habit-calendar-heatmap";
 import { toast } from "sonner";
@@ -36,7 +53,10 @@ export default function HabitsPage() {
   const [domainId, setDomainId] = useState<string | null>(null);
   const [domains, setDomains] = useState<{ id: string; name: string }[]>([]);
   const [createOpen, setCreateOpen] = useState(false);
+  const [editHabit, setEditHabit] = useState<Habit | null>(null);
   const [completionHabit, setCompletionHabit] = useState<Habit | null>(null);
+  const [deleteHabit, setDeleteHabit] = useState<Habit | null>(null);
+  const [deleting, setDeleting] = useState(false);
   const [expandedHabit, setExpandedHabit] = useState<string | null>(null);
   const [filter, setFilter] = useState<string>('all');
   const [loading, setLoading] = useState(true);
@@ -188,13 +208,26 @@ export default function HabitsPage() {
                     <Flame className="h-4 w-4 text-orange-500" aria-hidden="true" />
                     <span className="font-semibold">{habit.streakCount}</span>
                   </div>
-                  <button
+                  <DropdownMenu>
-                    onClick={() => setCompletionHabit(habit)}
+                    <DropdownMenuTrigger asChild>
-                    className="rounded-md p-1 text-muted-foreground hover:text-foreground hover:bg-accent transition-colors"
+                      <button
-                    aria-label={`Log ${habit.name} with details`}
+                        className="rounded-md p-1 text-muted-foreground hover:text-foreground hover:bg-accent transition-colors"
-                  >
+                        aria-label={`Options for ${habit.name}`}
-                    <MoreHorizontal className="h-4 w-4" />
+                      >
-                  </button>
+                        <MoreHorizontal className="h-4 w-4" />
+                      </button>
+                    </DropdownMenuTrigger>
+                    <DropdownMenuContent align="end">
+                      <DropdownMenuItem onClick={() => setEditHabit(habit)}>
+                        <Pencil className="mr-2 h-4 w-4" />
+                        Edit
+                      </DropdownMenuItem>
+                      <DropdownMenuItem onClick={() => setDeleteHabit(habit)}>
+                        <Trash2 className="mr-2 h-4 w-4" />
+                        Delete
+                      </DropdownMenuItem>
+                    </DropdownMenuContent>
+                  </DropdownMenu>
                   <button
                     onClick={() => setExpandedHabit(expandedHabit === habit.id ? null : habit.id)}
                     className="rounded-md p-1 text-muted-foreground hover:text-foreground hover:bg-accent transition-colors"
@@ -221,6 +254,16 @@ export default function HabitsPage() {
         onCreated={fetchHabits}
       />
 
+      {editHabit && (
+        <HabitEditDialog
+          open={!!editHabit}
+          onOpenChange={(open) => { if (!open) setEditHabit(null); }}
+          habit={editHabit}
+          domainId={domainId || ''}
+          onUpdated={fetchHabits}
+        />
+      )}
+
       {completionHabit && (
         <HabitCompletionDialog
           open={!!completionHabit}
@@ -232,6 +275,42 @@ export default function HabitsPage() {
           }}
         />
       )}
+
+      <AlertDialog open={!!deleteHabit} onOpenChange={(open) => { if (!open) setDeleteHabit(null); }}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Delete Habit</AlertDialogTitle>
+            <AlertDialogDescription>
+              Are you sure you want to delete &quot;{deleteHabit?.name}&quot;? This action cannot be undone.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>Cancel</AlertDialogCancel>
+            <AlertDialogAction
+              disabled={deleting}
+              onClick={async () => {
+                if (!deleteHabit || !domainId) return;
+                setDeleting(true);
+                try {
+                  const res = await fetch(`/api/domains/${domainId}/habits/${deleteHabit.id}`, {
+                    method: 'DELETE',
+                  });
+                  if (!res.ok) throw new Error('Failed to delete');
+                  toast.success('Habit deleted');
+                  setDeleteHabit(null);
+                  fetchHabits();
+                } catch {
+                  toast.error('Failed to delete habit');
+                } finally {
+                  setDeleting(false);
+                }
+              }}
+            >
+              {deleting ? 'Deleting...' : 'Delete'}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
     </div>
   );
 }

apps/web/app/(dashboard)/projects/[id]/page.tsx

@@ -2,10 +2,26 @@
 
 import { useState, useEffect, useCallback } from "react";
 import { useParams } from "next/navigation";
-import { Plus, ArrowLeft, GripVertical, MoreHorizontal } from "lucide-react";
+import { Plus, ArrowLeft, GripVertical, MoreHorizontal, Pencil, Trash2 } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
 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 { SectionDialog } from "@/components/projects/section-dialog";
 import Link from "next/link";
 import { toast } from "sonner";
@@ -65,6 +81,9 @@ export default function ProjectDetailPage() {
   const [domainId, setDomainId] = useState<string | null>(null);
   const [loading, setLoading] = useState(true);
   const [sectionDialogOpen, setSectionDialogOpen] = useState(false);
+  const [editSection, setEditSection] = useState<Section | null>(null);
+  const [deleteSection, setDeleteSection] = useState<Section | null>(null);
+  const [deletingSection, setDeletingSection] = useState(false);
   const [draggedTaskId, setDraggedTaskId] = useState<string | null>(null);
 
   // Extract domainId from the project data
@@ -239,9 +258,31 @@ export default function ProjectDetailPage() {
                   <Badge variant="outline" className="text-xs">Milestone</Badge>
                 )}
               </div>
-              <span className="text-xs text-muted-foreground">
+              <div className="flex items-center gap-1">
-                {(tasksBySection.get(section.id) || []).length}
+                <span className="text-xs text-muted-foreground">
-              </span>
+                  {(tasksBySection.get(section.id) || []).length}
+                </span>
+                <DropdownMenu>
+                  <DropdownMenuTrigger asChild>
+                    <button
+                      className="rounded-md p-1 text-muted-foreground hover:text-foreground hover:bg-accent transition-colors"
+                      aria-label={`Options for ${section.name}`}
+                    >
+                      <MoreHorizontal className="h-3.5 w-3.5" />
+                    </button>
+                  </DropdownMenuTrigger>
+                  <DropdownMenuContent align="end">
+                    <DropdownMenuItem onClick={() => setEditSection(section)}>
+                      <Pencil className="mr-2 h-4 w-4" />
+                      Edit
+                    </DropdownMenuItem>
+                    <DropdownMenuItem onClick={() => setDeleteSection(section)}>
+                      <Trash2 className="mr-2 h-4 w-4" />
+                      Delete
+                    </DropdownMenuItem>
+                  </DropdownMenuContent>
+                </DropdownMenu>
+              </div>
             </div>
             <div
               className="space-y-2 min-h-[100px]"
@@ -297,6 +338,53 @@ export default function ProjectDetailPage() {
         domainId={domainId || ''}
         onCreated={fetchProject}
       />
+
+      {editSection && (
+        <SectionDialog
+          open={!!editSection}
+          onOpenChange={(open) => { if (!open) setEditSection(null); }}
+          projectId={projectId}
+          domainId={domainId || ''}
+          onCreated={fetchProject}
+          existingSection={editSection}
+        />
+      )}
+
+      <AlertDialog open={!!deleteSection} onOpenChange={(open) => { if (!open) setDeleteSection(null); }}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Delete Section</AlertDialogTitle>
+            <AlertDialogDescription>
+              Are you sure you want to delete &quot;{deleteSection?.name}&quot;? This action cannot be undone. Tasks in this section will become unassigned.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>Cancel</AlertDialogCancel>
+            <AlertDialogAction
+              disabled={deletingSection}
+              onClick={async () => {
+                if (!deleteSection || !domainId) return;
+                setDeletingSection(true);
+                try {
+                  const res = await fetch(`/api/domains/${domainId}/projects/${projectId}/sections/${deleteSection.id}`, {
+                    method: 'DELETE',
+                  });
+                  if (!res.ok) throw new Error('Failed to delete');
+                  toast.success('Section deleted');
+                  setDeleteSection(null);
+                  fetchProject();
+                } catch {
+                  toast.error('Failed to delete section');
+                } finally {
+                  setDeletingSection(false);
+                }
+              }}
+            >
+              {deletingSection ? 'Deleting...' : 'Delete'}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
     </div>
   );
 }

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

@@ -1,12 +1,29 @@
 "use client";
 
 import { useState, useEffect, useCallback } from "react";
-import { Plus, FolderKanban, ExternalLink } from "lucide-react";
+import { Plus, FolderKanban, ExternalLink, MoreHorizontal, Pencil, Archive } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
 import { Progress } from "@/components/ui/progress";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+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 { ProjectCreateDialog } from "@/components/projects/project-create-dialog";
+import { ProjectEditDialog } from "@/components/projects/project-edit-dialog";
 import Link from "next/link";
 import { toast } from "sonner";
 
@@ -37,6 +54,9 @@ export default function ProjectsPage() {
   const [domainId, setDomainId] = useState<string | null>(null);
   const [domains, setDomains] = useState<{ id: string; name: string }[]>([]);
   const [createOpen, setCreateOpen] = useState(false);
+  const [editProject, setEditProject] = useState<Project | null>(null);
+  const [archiveProject, setArchiveProject] = useState<Project | null>(null);
+  const [archiving, setArchiving] = useState(false);
   const [loading, setLoading] = useState(true);
 
   // Fetch domains
@@ -116,22 +136,23 @@ export default function ProjectsPage() {
       ) : (
         <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
           {projects.map((project) => (
-            <Link key={project.id} href={`/projects/${project.id}`}>
+            <div key={project.id} className="relative">
-              <Card className="h-full cursor-pointer transition-colors hover:bg-accent/50">
+              <Link href={`/projects/${project.id}`}>
-                <CardHeader className="pb-2">
+                <Card className="h-full cursor-pointer transition-colors hover:bg-accent/50">
-                  <div className="flex items-start justify-between">
+                  <CardHeader className="pb-2">
-                    <div className="flex items-center gap-2">
+                    <div className="flex items-start justify-between">
-                      {project.color && (
+                      <div className="flex items-center gap-2">
-                        <div
+                        {project.color && (
-                          className="h-3 w-3 rounded-full shrink-0"
+                          <div
-                          style={{ backgroundColor: project.color }}
+                            className="h-3 w-3 rounded-full shrink-0"
-                        />
+                            style={{ backgroundColor: project.color }}
-                      )}
+                          />
-                      <CardTitle className="text-base">{project.name}</CardTitle>
+                        )}
+                        <CardTitle className="text-base">{project.name}</CardTitle>
+                      </div>
+                      <ExternalLink className="h-4 w-4 text-muted-foreground shrink-0" aria-hidden="true" />
                     </div>
-                    <ExternalLink className="h-4 w-4 text-muted-foreground shrink-0" aria-hidden="true" />
+                  </CardHeader>
-                  </div>
-                </CardHeader>
                 <CardContent>
                   {project.description && (
                     <p className="mb-3 text-sm text-muted-foreground line-clamp-2">{project.description}</p>
@@ -167,8 +188,32 @@ export default function ProjectsPage() {
                     </div>
                   )}
                 </CardContent>
-              </Card>
+                </Card>
-            </Link>
+              </Link>
+              <div className="absolute right-2 top-2">
+                <DropdownMenu>
+                  <DropdownMenuTrigger asChild>
+                    <button
+                      className="rounded-md p-1 text-muted-foreground hover:text-foreground hover:bg-accent transition-colors"
+                      aria-label={`Options for ${project.name}`}
+                      onClick={(e) => e.stopPropagation()}
+                    >
+                      <MoreHorizontal className="h-4 w-4" />
+                    </button>
+                  </DropdownMenuTrigger>
+                  <DropdownMenuContent align="end">
+                    <DropdownMenuItem onClick={(e) => { e.stopPropagation(); setEditProject(project); }}>
+                      <Pencil className="mr-2 h-4 w-4" />
+                      Edit
+                    </DropdownMenuItem>
+                    <DropdownMenuItem onClick={(e) => { e.stopPropagation(); setArchiveProject(project); }}>
+                      <Archive className="mr-2 h-4 w-4" />
+                      Archive
+                    </DropdownMenuItem>
+                  </DropdownMenuContent>
+                </DropdownMenu>
+              </div>
+            </div>
           ))}
         </div>
       )}
@@ -179,6 +224,54 @@ export default function ProjectsPage() {
         domainId={domainId || ''}
         onCreated={fetchProjects}
       />
+
+      {editProject && (
+        <ProjectEditDialog
+          open={!!editProject}
+          onOpenChange={(open) => { if (!open) setEditProject(null); }}
+          project={editProject}
+          domainId={domainId || ''}
+          onUpdated={fetchProjects}
+        />
+      )}
+
+      <AlertDialog open={!!archiveProject} onOpenChange={(open) => { if (!open) setArchiveProject(null); }}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Archive Project</AlertDialogTitle>
+            <AlertDialogDescription>
+              Are you sure you want to archive &quot;{archiveProject?.name}&quot;? It will be hidden from the active list.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>Cancel</AlertDialogCancel>
+            <AlertDialogAction
+              disabled={archiving}
+              onClick={async () => {
+                if (!archiveProject || !domainId) return;
+                setArchiving(true);
+                try {
+                  const res = await fetch(`/api/domains/${domainId}/projects/${archiveProject.id}`, {
+                    method: 'PATCH',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ status: 'archived' }),
+                  });
+                  if (!res.ok) throw new Error('Failed to archive');
+                  toast.success('Project archived');
+                  setArchiveProject(null);
+                  fetchProjects();
+                } catch {
+                  toast.error('Failed to archive project');
+                } finally {
+                  setArchiving(false);
+                }
+              }}
+            >
+              {archiving ? 'Archiving...' : 'Archive'}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
     </div>
   );
 }

apps/web/components/habits/habit-edit-dialog.tsx

@@ -0,0 +1,374 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { Button } from '@/components/ui/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from '@/components/ui/alert-dialog';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Textarea } from '@/components/ui/textarea';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { Switch } from '@/components/ui/switch';
+import { toast } from 'sonner';
+
+interface Habit {
+  id: string;
+  name: string;
+  description: string | null;
+  domainId: string;
+  frequency: 'daily' | 'weekly' | 'custom';
+  difficulty: 'easy' | 'medium' | 'hard';
+  goalPerPeriod: number;
+  unit: string | null;
+  active: boolean;
+  moodTracking: boolean;
+  tags: { id: string; name: string; color: string | null }[];
+}
+
+interface HabitEditDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  habit: Habit;
+  domainId: string;
+  onUpdated: () => void;
+}
+
+export function HabitEditDialog({
+  open,
+  onOpenChange,
+  habit,
+  domainId,
+  onUpdated,
+}: HabitEditDialogProps) {
+  const [name, setName] = useState('');
+  const [description, setDescription] = useState('');
+  const [frequency, setFrequency] = useState<'daily' | 'weekly' | 'custom'>('daily');
+  const [difficulty, setDifficulty] = useState<'easy' | 'medium' | 'hard'>('medium');
+  const [goalPerPeriod, setGoalPerPeriod] = useState('1');
+  const [unit, setUnit] = useState('');
+  const [reminderTime, setReminderTime] = useState('');
+  const [moodTracking, setMoodTracking] = useState(false);
+  const [active, setActive] = useState(true);
+  const [submitting, setSubmitting] = useState(false);
+  const [error, setError] = useState('');
+  const [deleteOpen, setDeleteOpen] = useState(false);
+  const [deleting, setDeleting] = useState(false);
+
+  const [availableTags, setAvailableTags] = useState<{ id: string; name: string; color: string | null }[]>([]);
+  const [selectedTagIds, setSelectedTagIds] = useState<string[]>([]);
+
+  useEffect(() => {
+    if (open && habit) {
+      setName(habit.name);
+      setDescription(habit.description || '');
+      setFrequency(habit.frequency);
+      setDifficulty(habit.difficulty);
+      setGoalPerPeriod(String(habit.goalPerPeriod));
+      setUnit(habit.unit || '');
+      setReminderTime('');
+      setMoodTracking(habit.moodTracking);
+      setActive(habit.active);
+      setSelectedTagIds(habit.tags.map(t => t.id));
+      setError('');
+
+      fetch(`/api/domains/${domainId}/tags`)
+        .then(res => res.json())
+        .then(data => setAvailableTags(data.items || []))
+        .catch(() => {});
+    }
+  }, [open, habit, domainId]);
+
+  function toggleTag(tagId: string) {
+    setSelectedTagIds(prev =>
+      prev.includes(tagId) ? prev.filter(id => id !== tagId) : [...prev, tagId]
+    );
+  }
+
+  async function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    if (!domainId) {
+      setError('No domain selected');
+      return;
+    }
+    setSubmitting(true);
+    setError('');
+
+    const body: Record<string, unknown> = {
+      name,
+      frequency,
+      difficulty,
+      goalPerPeriod: parseInt(goalPerPeriod, 10) || 1,
+      moodTracking,
+      active,
+    };
+    if (description) body.description = description;
+    if (unit) body.unit = unit;
+    if (reminderTime) body.reminderTime = reminderTime;
+
+    try {
+      const response = await fetch(`/api/domains/${domainId}/habits/${habit.id}`, {
+        method: 'PATCH',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(body),
+      });
+
+      if (!response.ok) {
+        const err = await response.json();
+        throw new Error(err.error?.message || 'Unable to update habit');
+      }
+
+      // Sync tags
+      const currentTagIds = habit.tags.map(t => t.id);
+      const toRemove = currentTagIds.filter(id => !selectedTagIds.includes(id));
+      const toAdd = selectedTagIds.filter(id => !currentTagIds.includes(id));
+
+      await Promise.all([
+        ...toRemove.map(tagId =>
+          fetch(`/api/domains/${domainId}/habits/${habit.id}/tags`, {
+            method: 'DELETE',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ tagId }),
+          })
+        ),
+        ...toAdd.map(tagId =>
+          fetch(`/api/domains/${domainId}/habits/${habit.id}/tags`, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ tagId }),
+          })
+        ),
+      ]);
+
+      toast.success('Habit updated');
+      onOpenChange(false);
+      onUpdated();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Unable to update habit');
+    } finally {
+      setSubmitting(false);
+    }
+  }
+
+  async function handleDelete() {
+    setDeleting(true);
+    try {
+      const response = await fetch(`/api/domains/${domainId}/habits/${habit.id}`, {
+        method: 'DELETE',
+      });
+
+      if (!response.ok) {
+        const err = await response.json();
+        throw new Error(err.error?.message || 'Unable to delete habit');
+      }
+
+      toast.success('Habit deleted');
+      setDeleteOpen(false);
+      onOpenChange(false);
+      onUpdated();
+    } catch (err) {
+      toast.error(err instanceof Error ? err.message : 'Unable to delete habit');
+    } finally {
+      setDeleting(false);
+    }
+  }
+
+  return (
+    <>
+      <Dialog open={open} onOpenChange={onOpenChange}>
+        <DialogContent className="sm:max-w-[500px]">
+          <DialogHeader>
+            <DialogTitle>Edit Habit</DialogTitle>
+            <DialogDescription>Update your habit details.</DialogDescription>
+          </DialogHeader>
+          <form className="space-y-4" onSubmit={handleSubmit}>
+            <div className="space-y-2">
+              <Label htmlFor="edit-habit-name">Name *</Label>
+              <Input
+                id="edit-habit-name"
+                value={name}
+                onChange={(e) => setName(e.target.value)}
+                placeholder="e.g. Morning meditation"
+                autoFocus
+                required
+              />
+            </div>
+
+            <div className="space-y-2">
+              <Label htmlFor="edit-habit-description">Description</Label>
+              <Textarea
+                id="edit-habit-description"
+                value={description}
+                onChange={(e) => setDescription(e.target.value)}
+                placeholder="Optional details..."
+                rows={2}
+              />
+            </div>
+
+            <div className="grid grid-cols-2 gap-4">
+              <div className="space-y-2">
+                <Label htmlFor="edit-habit-frequency">Frequency</Label>
+                <Select value={frequency} onValueChange={(v) => setFrequency(v as any)}>
+                  <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>
+
+              <div className="space-y-2">
+                <Label htmlFor="edit-habit-difficulty">Difficulty</Label>
+                <Select value={difficulty} onValueChange={(v) => setDifficulty(v as any)}>
+                  <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 className="grid grid-cols-2 gap-4">
+              <div className="space-y-2">
+                <Label htmlFor="edit-habit-goal">Goal per period</Label>
+                <Input
+                  id="edit-habit-goal"
+                  type="number"
+                  min={1}
+                  value={goalPerPeriod}
+                  onChange={(e) => setGoalPerPeriod(e.target.value)}
+                />
+              </div>
+
+              <div className="space-y-2">
+                <Label htmlFor="edit-habit-unit">Unit (optional)</Label>
+                <Input
+                  id="edit-habit-unit"
+                  value={unit}
+                  onChange={(e) => setUnit(e.target.value)}
+                  placeholder="e.g. minutes, pages"
+                />
+              </div>
+            </div>
+
+            <div className="space-y-2">
+              <Label htmlFor="edit-habit-reminder">Reminder time (optional)</Label>
+              <Input
+                id="edit-habit-reminder"
+                type="time"
+                value={reminderTime}
+                onChange={(e) => setReminderTime(e.target.value)}
+              />
+            </div>
+
+            <div className="flex items-center gap-2">
+              <Switch
+                id="edit-habit-active"
+                checked={active}
+                onCheckedChange={setActive}
+              />
+              <Label htmlFor="edit-habit-active">Active</Label>
+            </div>
+
+            <div className="flex items-center gap-2">
+              <Switch
+                id="edit-habit-mood"
+                checked={moodTracking}
+                onCheckedChange={setMoodTracking}
+              />
+              <Label htmlFor="edit-habit-mood">Enable mood tracking</Label>
+            </div>
+
+            {availableTags.length > 0 && (
+              <div className="space-y-2">
+                <Label>Tags</Label>
+                <div className="flex flex-wrap gap-2">
+                  {availableTags.map((tag) => (
+                    <button
+                      key={tag.id}
+                      type="button"
+                      onClick={() => toggleTag(tag.id)}
+                      className={`inline-flex items-center rounded-full px-3 py-1 text-xs font-medium transition-colors ${
+                        selectedTagIds.includes(tag.id)
+                          ? 'ring-2 ring-primary ring-offset-1'
+                          : 'opacity-60 hover:opacity-100'
+                      }`}
+                      style={{ backgroundColor: tag.color || '#e2e8f0', color: '#1e293b' }}
+                    >
+                      {tag.name}
+                    </button>
+                  ))}
+                </div>
+              </div>
+            )}
+
+            {error && <p className="text-sm text-destructive" role="alert">{error}</p>}
+
+            <DialogFooter className="flex items-center justify-between sm:justify-between">
+              <Button
+                type="button"
+                variant="destructive"
+                onClick={() => setDeleteOpen(true)}
+              >
+                Delete
+              </Button>
+              <div className="flex gap-2">
+                <Button type="button" variant="outline" onClick={() => onOpenChange(false)}>
+                  Cancel
+                </Button>
+                <Button type="submit" disabled={submitting || !name || !domainId}>
+                  {submitting ? 'Saving...' : 'Save'}
+                </Button>
+              </div>
+            </DialogFooter>
+          </form>
+        </DialogContent>
+      </Dialog>
+
+      <AlertDialog open={deleteOpen} onOpenChange={setDeleteOpen}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Delete Habit</AlertDialogTitle>
+            <AlertDialogDescription>
+              Are you sure you want to delete &quot;{habit.name}&quot;? This action cannot be undone.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>Cancel</AlertDialogCancel>
+            <AlertDialogAction onClick={handleDelete} disabled={deleting}>
+              {deleting ? 'Deleting...' : 'Delete'}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </>
+  );
+}

apps/web/components/projects/project-edit-dialog.tsx

@@ -0,0 +1,254 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { Button } from '@/components/ui/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from '@/components/ui/alert-dialog';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Textarea } from '@/components/ui/textarea';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { toast } from 'sonner';
+
+interface Project {
+  id: string;
+  name: string;
+  description: string | null;
+  status: 'active' | 'paused' | 'completed' | 'archived';
+  domainId: string;
+  color: string | null;
+  icon: string | null;
+  targetDate: string | null;
+}
+
+interface ProjectEditDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  project: Project;
+  domainId: string;
+  onUpdated: () => void;
+}
+
+export function ProjectEditDialog({
+  open,
+  onOpenChange,
+  project,
+  domainId,
+  onUpdated,
+}: ProjectEditDialogProps) {
+  const [name, setName] = useState('');
+  const [description, setDescription] = useState('');
+  const [status, setStatus] = useState<'active' | 'paused' | 'completed' | 'archived'>('active');
+  const [color, setColor] = useState('');
+  const [targetDate, setTargetDate] = useState('');
+  const [submitting, setSubmitting] = useState(false);
+  const [error, setError] = useState('');
+  const [archiveOpen, setArchiveOpen] = useState(false);
+  const [archiving, setArchiving] = useState(false);
+
+  useEffect(() => {
+    if (open && project) {
+      setName(project.name);
+      setDescription(project.description || '');
+      setStatus(project.status);
+      setColor(project.color || '');
+      setTargetDate(project.targetDate ? project.targetDate.split('T')[0] : '');
+      setError('');
+    }
+  }, [open, project]);
+
+  async function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    if (!domainId) {
+      setError('No domain selected');
+      return;
+    }
+    setSubmitting(true);
+    setError('');
+
+    const body: Record<string, unknown> = { name, status };
+    if (description) body.description = description;
+    if (color) body.color = color;
+    if (targetDate) body.targetDate = new Date(targetDate).toISOString();
+
+    try {
+      const response = await fetch(`/api/domains/${domainId}/projects/${project.id}`, {
+        method: 'PATCH',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(body),
+      });
+
+      if (!response.ok) {
+        const err = await response.json();
+        throw new Error(err.error?.message || 'Unable to update project');
+      }
+
+      toast.success('Project updated');
+      onOpenChange(false);
+      onUpdated();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Unable to update project');
+    } finally {
+      setSubmitting(false);
+    }
+  }
+
+  async function handleArchive() {
+    setArchiving(true);
+    try {
+      const response = await fetch(`/api/domains/${domainId}/projects/${project.id}`, {
+        method: 'PATCH',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ status: 'archived' }),
+      });
+
+      if (!response.ok) {
+        const err = await response.json();
+        throw new Error(err.error?.message || 'Unable to archive project');
+      }
+
+      toast.success('Project archived');
+      setArchiveOpen(false);
+      onOpenChange(false);
+      onUpdated();
+    } catch (err) {
+      toast.error(err instanceof Error ? err.message : 'Unable to archive project');
+    } finally {
+      setArchiving(false);
+    }
+  }
+
+  return (
+    <>
+      <Dialog open={open} onOpenChange={onOpenChange}>
+        <DialogContent className="sm:max-w-[500px]">
+          <DialogHeader>
+            <DialogTitle>Edit Project</DialogTitle>
+            <DialogDescription>Update your project details.</DialogDescription>
+          </DialogHeader>
+          <form className="space-y-4" onSubmit={handleSubmit}>
+            <div className="space-y-2">
+              <Label htmlFor="edit-project-name">Name *</Label>
+              <Input
+                id="edit-project-name"
+                value={name}
+                onChange={(e) => setName(e.target.value)}
+                placeholder="Project name"
+                autoFocus
+                required
+              />
+            </div>
+
+            <div className="space-y-2">
+              <Label htmlFor="edit-project-description">Description</Label>
+              <Textarea
+                id="edit-project-description"
+                value={description}
+                onChange={(e) => setDescription(e.target.value)}
+                placeholder="Optional description..."
+                rows={2}
+              />
+            </div>
+
+            <div className="grid grid-cols-2 gap-4">
+              <div className="space-y-2">
+                <Label htmlFor="edit-project-status">Status</Label>
+                <Select value={status} onValueChange={(v) => setStatus(v as any)}>
+                  <SelectTrigger id="edit-project-status">
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="active">Active</SelectItem>
+                    <SelectItem value="paused">Paused</SelectItem>
+                    <SelectItem value="completed">Completed</SelectItem>
+                    <SelectItem value="archived">Archived</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+
+              <div className="space-y-2">
+                <Label htmlFor="edit-project-color">Color</Label>
+                <Input
+                  id="edit-project-color"
+                  type="color"
+                  value={color}
+                  onChange={(e) => setColor(e.target.value)}
+                  className="h-10"
+                />
+              </div>
+            </div>
+
+            <div className="space-y-2">
+              <Label htmlFor="edit-project-target-date">Target date</Label>
+              <Input
+                id="edit-project-target-date"
+                type="date"
+                value={targetDate}
+                onChange={(e) => setTargetDate(e.target.value)}
+              />
+            </div>
+
+            {error && <p className="text-sm text-destructive" role="alert">{error}</p>}
+
+            <DialogFooter className="flex items-center justify-between sm:justify-between">
+              <Button
+                type="button"
+                variant="destructive"
+                onClick={() => setArchiveOpen(true)}
+              >
+                Archive
+              </Button>
+              <div className="flex gap-2">
+                <Button type="button" variant="outline" onClick={() => onOpenChange(false)}>
+                  Cancel
+                </Button>
+                <Button type="submit" disabled={submitting || !name || !domainId}>
+                  {submitting ? 'Saving...' : 'Save'}
+                </Button>
+              </div>
+            </DialogFooter>
+          </form>
+        </DialogContent>
+      </Dialog>
+
+      <AlertDialog open={archiveOpen} onOpenChange={setArchiveOpen}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Archive Project</AlertDialogTitle>
+            <AlertDialogDescription>
+              Are you sure you want to archive &quot;{project.name}&quot;? It will be hidden from the active list.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>Cancel</AlertDialogCancel>
+            <AlertDialogAction onClick={handleArchive} disabled={archiving}>
+              {archiving ? 'Archiving...' : 'Archive'}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </>
+  );
+}

apps/web/components/projects/section-dialog.tsx

@@ -10,6 +10,16 @@ import {
   DialogHeader,
   DialogTitle,
 } from '@/components/ui/dialog';
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from '@/components/ui/alert-dialog';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import {
@@ -21,12 +31,23 @@ import {
 } from '@/components/ui/select';
 import { toast } from 'sonner';
 
+interface Section {
+  id: string;
+  name: string;
+  projectId: string;
+  kind: 'section' | 'milestone';
+  status: 'planned' | 'in_progress' | 'complete';
+  targetDate: string | null;
+  sortOrder: number;
+}
+
 interface SectionDialogProps {
   open: boolean;
   onOpenChange: (open: boolean) => void;
   projectId: string;
   domainId: string;
   onCreated: () => void;
+  existingSection?: Section;
 }
 
 export function SectionDialog({
@@ -35,23 +56,34 @@ export function SectionDialog({
   projectId,
   domainId,
   onCreated,
+  existingSection,
 }: SectionDialogProps) {
+  const isEdit = !!existingSection;
   const [name, setName] = useState('');
   const [kind, setKind] = useState<'section' | 'milestone'>('section');
   const [status, setStatus] = useState<'planned' | 'in_progress' | 'complete'>('planned');
   const [targetDate, setTargetDate] = useState('');
   const [submitting, setSubmitting] = useState(false);
   const [error, setError] = useState('');
+  const [deleteOpen, setDeleteOpen] = useState(false);
+  const [deleting, setDeleting] = useState(false);
 
   useEffect(() => {
     if (open) {
-      setName('');
+      if (existingSection) {
-      setKind('section');
+        setName(existingSection.name);
-      setStatus('planned');
+        setKind(existingSection.kind);
-      setTargetDate('');
+        setStatus(existingSection.status);
+        setTargetDate(existingSection.targetDate ? existingSection.targetDate.split('T')[0] : '');
+      } else {
+        setName('');
+        setKind('section');
+        setStatus('planned');
+        setTargetDate('');
+      }
       setError('');
     }
-  }, [open]);
+  }, [open, existingSection]);
 
   async function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
     event.preventDefault();
@@ -66,98 +98,164 @@ export function SectionDialog({
     if (targetDate) body.targetDate = new Date(targetDate).toISOString();
 
     try {
-      const response = await fetch(`/api/domains/${domainId}/projects/${projectId}/sections`, {
+      let response: Response;
-        method: 'POST',
+
-        headers: { 'Content-Type': 'application/json' },
+      if (isEdit && existingSection) {
-        body: JSON.stringify(body),
+        response = await fetch(`/api/domains/${domainId}/projects/${projectId}/sections/${existingSection.id}`, {
-      });
+          method: 'PATCH',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify(body),
+        });
+      } else {
+        response = await fetch(`/api/domains/${domainId}/projects/${projectId}/sections`, {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify(body),
+        });
+      }
 
       if (!response.ok) {
         const err = await response.json();
-        throw new Error(err.error?.message || 'Unable to create section');
+        throw new Error(err.error?.message || `Unable to ${isEdit ? 'update' : 'create'} section`);
       }
 
-      toast.success('Section created');
+      toast.success(isEdit ? 'Section updated' : 'Section created');
       onOpenChange(false);
       onCreated();
     } catch (err) {
-      setError(err instanceof Error ? err.message : 'Unable to create section');
+      setError(err instanceof Error ? err.message : `Unable to ${isEdit ? 'update' : 'create'} section`);
     } finally {
       setSubmitting(false);
     }
   }
 
+  async function handleDelete() {
+    if (!existingSection) return;
+    setDeleting(true);
+    try {
+      const response = await fetch(`/api/domains/${domainId}/projects/${projectId}/sections/${existingSection.id}`, {
+        method: 'DELETE',
+      });
+
+      if (!response.ok) {
+        const err = await response.json();
+        throw new Error(err.error?.message || 'Unable to delete section');
+      }
+
+      toast.success('Section deleted');
+      setDeleteOpen(false);
+      onOpenChange(false);
+      onCreated();
+    } catch (err) {
+      toast.error(err instanceof Error ? err.message : 'Unable to delete section');
+    } finally {
+      setDeleting(false);
+    }
+  }
+
   return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
+    <>
-      <DialogContent className="sm:max-w-[450px]">
+      <Dialog open={open} onOpenChange={onOpenChange}>
-        <DialogHeader>
+        <DialogContent className="sm:max-w-[450px]">
-          <DialogTitle>New Section</DialogTitle>
+          <DialogHeader>
-          <DialogDescription>Add a section or milestone to organize tasks.</DialogDescription>
+            <DialogTitle>{isEdit ? 'Edit Section' : 'New Section'}</DialogTitle>
-        </DialogHeader>
+            <DialogDescription>
-        <form className="space-y-4" onSubmit={handleSubmit}>
+              {isEdit ? 'Update this section or milestone.' : 'Add a section or milestone to organize tasks.'}
-          <div className="space-y-2">
+            </DialogDescription>
-            <Label htmlFor="section-name">Name *</Label>
+          </DialogHeader>
-            <Input
+          <form className="space-y-4" onSubmit={handleSubmit}>
-              id="section-name"
-              value={name}
-              onChange={(e) => setName(e.target.value)}
-              placeholder="e.g. Backend, Design, Launch"
-              autoFocus
-              required
-            />
-          </div>
-
-          <div className="grid grid-cols-2 gap-4">
             <div className="space-y-2">
-              <Label htmlFor="section-kind">Kind</Label>
+              <Label htmlFor="section-name">Name *</Label>
-              <Select value={kind} onValueChange={(v) => setKind(v as any)}>
+              <Input
-                <SelectTrigger id="section-kind">
+                id="section-name"
-                  <SelectValue />
+                value={name}
-                </SelectTrigger>
+                onChange={(e) => setName(e.target.value)}
-                <SelectContent>
+                placeholder="e.g. Backend, Design, Launch"
-                  <SelectItem value="section">Section</SelectItem>
+                autoFocus
-                  <SelectItem value="milestone">Milestone</SelectItem>
+                required
-                </SelectContent>
+              />
-              </Select>
+            </div>
+
+            <div className="grid grid-cols-2 gap-4">
+              <div className="space-y-2">
+                <Label htmlFor="section-kind">Kind</Label>
+                <Select value={kind} onValueChange={(v) => setKind(v as any)}>
+                  <SelectTrigger id="section-kind">
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="section">Section</SelectItem>
+                    <SelectItem value="milestone">Milestone</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+
+              <div className="space-y-2">
+                <Label htmlFor="section-status">Status</Label>
+                <Select value={status} onValueChange={(v) => setStatus(v as any)}>
+                  <SelectTrigger id="section-status">
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="planned">Planned</SelectItem>
+                    <SelectItem value="in_progress">In Progress</SelectItem>
+                    <SelectItem value="complete">Complete</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
             </div>
 
             <div className="space-y-2">
-              <Label htmlFor="section-status">Status</Label>
+              <Label htmlFor="section-target-date">Target date</Label>
-              <Select value={status} onValueChange={(v) => setStatus(v as any)}>
+              <Input
-                <SelectTrigger id="section-status">
+                id="section-target-date"
-                  <SelectValue />
+                type="date"
-                </SelectTrigger>
+                value={targetDate}
-                <SelectContent>
+                onChange={(e) => setTargetDate(e.target.value)}
-                  <SelectItem value="planned">Planned</SelectItem>
+              />
-                  <SelectItem value="in_progress">In Progress</SelectItem>
-                  <SelectItem value="complete">Complete</SelectItem>
-                </SelectContent>
-              </Select>
             </div>
-          </div>
 
-          <div className="space-y-2">
+            {error && <p className="text-sm text-destructive" role="alert">{error}</p>}
-            <Label htmlFor="section-target-date">Target date</Label>
-            <Input
-              id="section-target-date"
-              type="date"
-              value={targetDate}
-              onChange={(e) => setTargetDate(e.target.value)}
-            />
-          </div>
 
-          {error && <p className="text-sm text-destructive" role="alert">{error}</p>}
+            <DialogFooter className="flex items-center justify-between sm:justify-between">
+              {isEdit && (
+                <Button
+                  type="button"
+                  variant="destructive"
+                  onClick={() => setDeleteOpen(true)}
+                >
+                  Delete
+                </Button>
+              )}
+              <div className="flex gap-2">
+                <Button type="button" variant="outline" onClick={() => onOpenChange(false)}>
+                  Cancel
+                </Button>
+                <Button type="submit" disabled={submitting || !name}>
+                  {submitting ? (isEdit ? 'Saving...' : 'Creating...') : (isEdit ? 'Save' : 'Create Section')}
+                </Button>
+              </div>
+            </DialogFooter>
+          </form>
+        </DialogContent>
+      </Dialog>
 
-          <DialogFooter>
+      <AlertDialog open={deleteOpen} onOpenChange={setDeleteOpen}>
-            <Button type="button" variant="outline" onClick={() => onOpenChange(false)}>
+        <AlertDialogContent>
-              Cancel
+          <AlertDialogHeader>
-            </Button>
+            <AlertDialogTitle>Delete Section</AlertDialogTitle>
-            <Button type="submit" disabled={submitting || !name}>
+            <AlertDialogDescription>
-              {submitting ? 'Creating...' : 'Create Section'}
+              Are you sure you want to delete &quot;{existingSection?.name}&quot;? This action cannot be undone.
-            </Button>
+            </AlertDialogDescription>
-          </DialogFooter>
+          </AlertDialogHeader>
-        </form>
+          <AlertDialogFooter>
-      </DialogContent>
+            <AlertDialogCancel>Cancel</AlertDialogCancel>
-    </Dialog>
+            <AlertDialogAction onClick={handleDelete} disabled={deleting}>
+              {deleting ? 'Deleting...' : 'Delete'}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </>
   );
 }