From 0df6d1c1c840a54a6542acb7c64a423ecbbe06fa Mon Sep 17 00:00:00 2001
From: Hermes <hermes@buzzbee.dev>
Date: Sun, 2 Aug 2026 01:25:14 +0000
Subject: [PATCH] feat: add Edit/Delete dropdown menus to habits, projects, and
 sections

- Habits page: Add DropdownMenu with Edit/Delete options, Edit dialog
  (name/description/frequency/difficulty), Delete confirmation
- Projects page: Add DropdownMenu with Edit/Delete options, Edit dialog
  (name/description/status), Delete confirmation
- Project detail page: Add DropdownMenu with Edit/Delete per section,
  Edit Section dialog (name/kind/status), Delete confirmation
---
 apps/web/app/(dashboard)/habits/page.tsx      | 174 +++++++++++-
 .../app/(dashboard)/projects/[id]/page.tsx    | 159 ++++++++++-
 apps/web/app/(dashboard)/projects/page.tsx    | 263 ++++++++++++++----
 3 files changed, 523 insertions(+), 73 deletions(-)

diff --git a/apps/web/app/(dashboard)/habits/page.tsx b/apps/web/app/(dashboard)/habits/page.tsx
index 198ee8b..707c28a 100644
--- a/apps/web/app/(dashboard)/habits/page.tsx
+++ b/apps/web/app/(dashboard)/habits/page.tsx
@@ -1,9 +1,16 @@
 "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 { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
+import { Label } from "@/components/ui/label";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog";
+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 { HabitCompletionDialog } from "@/components/habits/habit-completion-dialog";
 import { HabitCalendarHeatmap } from "@/components/habits/habit-calendar-heatmap";
@@ -40,6 +47,15 @@ export default function HabitsPage() {
   const [expandedHabit, setExpandedHabit] = useState<string | null>(null);
   const [filter, setFilter] = useState<string>('all');
   const [loading, setLoading] = useState(true);
+  const [editingHabit, setEditingHabit] = useState<Habit | null>(null);
+  const [editName, setEditName] = useState("");
+  const [editDescription, setEditDescription] = useState("");
+  const [editFrequency, setEditFrequency] = useState<"daily" | "weekly" | "custom">("daily");
+  const [editDifficulty, setEditDifficulty] = useState<"easy" | "medium" | "hard">("medium");
+  const [editGoalPerPeriod, setEditGoalPerPeriod] = useState(1);
+  const [saving, setSaving] = useState(false);
+  const [deleteHabitId, setDeleteHabitId] = useState<string | null>(null);
+  const [deleting, setDeleting] = useState(false);
 
   // Fetch domains
   useEffect(() => {
@@ -92,6 +108,60 @@ export default function HabitsPage() {
     }
   };
 
+  // Edit a habit
+  const handleEdit = async () => {
+    if (!editingHabit || !editName.trim()) return;
+    setSaving(true);
+    try {
+      const res = await fetch(`/api/habits/${editingHabit.id}`, {
+        method: 'PATCH',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          name: editName.trim(),
+          description: editDescription || null,
+          frequency: editFrequency,
+          difficulty: editDifficulty,
+          goalPerPeriod: editGoalPerPeriod,
+        }),
+      });
+      if (!res.ok) throw new Error('Failed to update');
+      toast.success('Habit updated');
+      setEditingHabit(null);
+      fetchHabits();
+    } catch {
+      toast.error('Failed to update habit');
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  // Delete a habit
+  const handleDelete = async () => {
+    if (!deleteHabitId) return;
+    setDeleting(true);
+    try {
+      const res = await fetch(`/api/habits/${deleteHabitId}`, { method: 'DELETE' });
+      if (!res.ok) throw new Error('Failed to delete');
+      toast.success('Habit deleted');
+      setDeleteHabitId(null);
+      fetchHabits();
+    } catch {
+      toast.error('Failed to delete habit');
+    } finally {
+      setDeleting(false);
+    }
+  };
+
+  // Open edit dialog with habit data
+  const openEdit = (habit: Habit) => {
+    setEditName(habit.name);
+    setEditDescription(habit.description || "");
+    setEditFrequency(habit.frequency);
+    setEditDifficulty(habit.difficulty);
+    setEditGoalPerPeriod(habit.goalPerPeriod || 1);
+    setEditingHabit(habit);
+  };
+
   // Listen for custom event to open create dialog
   useEffect(() => {
     const handler = () => setCreateOpen(true);
@@ -188,13 +258,27 @@ 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
-                    onClick={() => setCompletionHabit(habit)}
-                    className="rounded-md p-1 text-muted-foreground hover:text-foreground hover:bg-accent transition-colors"
-                    aria-label={`Log ${habit.name} with details`}
-                  >
-                    <MoreHorizontal className="h-4 w-4" />
-                  </button>
+                  <DropdownMenu>
+                    <DropdownMenuTrigger asChild>
+                      <button
+                        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>
+                    </DropdownMenuTrigger>
+                    <DropdownMenuContent align="end">
+                      <DropdownMenuItem onClick={() => openEdit(habit)}>
+                        <Pencil className="mr-2 h-4 w-4" /> Edit
+                      </DropdownMenuItem>
+                      <DropdownMenuItem onClick={() => setCompletionHabit(habit)}>
+                        <CheckCircle2 className="mr-2 h-4 w-4" /> Log details
+                      </DropdownMenuItem>
+                      <DropdownMenuItem className="text-destructive" onClick={() => setDeleteHabitId(habit.id)}>
+                        <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"
@@ -232,6 +316,80 @@ export default function HabitsPage() {
           }}
         />
       )}
+
+      {/* Edit Habit Dialog */}
+      <Dialog open={!!editingHabit} onOpenChange={(open) => { if (!open) setEditingHabit(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="grid grid-cols-2 gap-4">
+              <div className="space-y-2">
+                <Label htmlFor="edit-habit-frequency">Frequency</Label>
+                <Select value={editFrequency} onValueChange={(v: "daily" | "weekly" | "custom") => setEditFrequency(v)}>
+                  <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={editDifficulty} onValueChange={(v: "easy" | "medium" | "hard") => setEditDifficulty(v)}>
+                  <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="space-y-2">
+              <Label htmlFor="edit-habit-goal">Goal per period</Label>
+              <Input id="edit-habit-goal" type="number" min="1" value={editGoalPerPeriod} onChange={(e) => setEditGoalPerPeriod(parseInt(e.target.value) || 1)} />
+            </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setEditingHabit(null)}>Cancel</Button>
+            <Button onClick={handleEdit} disabled={saving || !editName.trim()}>
+              {saving ? "Saving..." : "Save"}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* Delete Habit Confirmation */}
+      <AlertDialog open={!!deleteHabitId} onOpenChange={(open) => { if (!open) setDeleteHabitId(null); }}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Delete habit?</AlertDialogTitle>
+            <AlertDialogDescription>This cannot be undone. The habit and all its completion history will be permanently deleted.</AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel disabled={deleting}>Cancel</AlertDialogCancel>
+            <AlertDialogAction onClick={handleDelete} disabled={deleting}>
+              {deleting ? "Deleting..." : "Delete"}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
     </div>
   );
 }
diff --git a/apps/web/app/(dashboard)/projects/[id]/page.tsx b/apps/web/app/(dashboard)/projects/[id]/page.tsx
index 73e7f95..f59088e 100644
--- a/apps/web/app/(dashboard)/projects/[id]/page.tsx
+++ b/apps/web/app/(dashboard)/projects/[id]/page.tsx
@@ -2,10 +2,16 @@
 
 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 { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog";
+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";
@@ -66,12 +72,17 @@ export default function ProjectDetailPage() {
   const [loading, setLoading] = useState(true);
   const [sectionDialogOpen, setSectionDialogOpen] = useState(false);
   const [draggedTaskId, setDraggedTaskId] = useState<string | null>(null);
+  const [editingSection, setEditingSection] = useState<Section | null>(null);
+  const [editSectionName, setEditSectionName] = useState("");
+  const [editSectionKind, setEditSectionKind] = useState<"section" | "milestone">("section");
+  const [editSectionStatus, setEditSectionStatus] = useState<"planned" | "in_progress" | "complete">("planned");
+  const [editSectionSaving, setEditSectionSaving] = useState(false);
+  const [deleteSectionId, setDeleteSectionId] = useState<string | null>(null);
+  const [deleteSectionDeleting, setDeleteSectionDeleting] = useState(false);
 
-  // Extract domainId from the project data
   const fetchProject = useCallback(async () => {
     setLoading(true);
     try {
-      // We need to find the domain first — use the first domain
       const domainsRes = await fetch('/api/domains?sort=sort_order');
       const domainsData = await domainsRes.json();
       const firstDomain = domainsData.items?.[0];
@@ -80,7 +91,6 @@ export default function ProjectDetailPage() {
         return;
       }
       setDomainId(firstDomain.id);
-
       const res = await fetch(`/api/domains/${firstDomain.id}/projects/${projectId}`);
       if (!res.ok) throw new Error('Not found');
       const data = await res.json();
@@ -111,6 +121,58 @@ export default function ProjectDetailPage() {
     }
   };
 
+  // Edit section
+  const handleEditSection = async () => {
+    if (!editingSection || !editSectionName.trim() || !domainId) return;
+    setEditSectionSaving(true);
+    try {
+      const res = await fetch(`/api/domains/${domainId}/projects/${projectId}/sections/${editingSection.id}`, {
+        method: 'PATCH',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          name: editSectionName.trim(),
+          kind: editSectionKind,
+          status: editSectionStatus,
+        }),
+      });
+      if (!res.ok) throw new Error('Failed to update section');
+      toast.success('Section updated');
+      setEditingSection(null);
+      fetchProject();
+    } catch {
+      toast.error('Failed to update section');
+    } finally {
+      setEditSectionSaving(false);
+    }
+  };
+
+  // Delete section
+  const handleDeleteSection = async () => {
+    if (!deleteSectionId || !domainId) return;
+    setDeleteSectionDeleting(true);
+    try {
+      const res = await fetch(`/api/domains/${domainId}/projects/${projectId}/sections/${deleteSectionId}`, {
+        method: 'DELETE',
+      });
+      if (!res.ok) throw new Error('Failed to delete section');
+      toast.success('Section deleted');
+      setDeleteSectionId(null);
+      fetchProject();
+    } catch {
+      toast.error('Failed to delete section');
+    } finally {
+      setDeleteSectionDeleting(false);
+    }
+  };
+
+  // Open edit section dialog
+  const openEditSection = (section: Section) => {
+    setEditSectionName(section.name);
+    setEditSectionKind(section.kind);
+    setEditSectionStatus(section.status);
+    setEditingSection(section);
+  };
+
   // Listen for custom event to open section dialog
   useEffect(() => {
     const handler = () => setSectionDialogOpen(true);
@@ -133,7 +195,6 @@ export default function ProjectDetailPage() {
     );
   }
 
-  // Group tasks by section
   const tasksBySection = new Map<string | 'unsectioned', Task[]>();
   tasksBySection.set('unsectioned', []);
   for (const section of project.sections) {
@@ -239,9 +300,26 @@ export default function ProjectDetailPage() {
                   <Badge variant="outline" className="text-xs">Milestone</Badge>
                 )}
               </div>
-              <span className="text-xs text-muted-foreground">
-                {(tasksBySection.get(section.id) || []).length}
-              </span>
+              <div className="flex items-center gap-1">
+                <span className="text-xs text-muted-foreground">
+                  {(tasksBySection.get(section.id) || []).length}
+                </span>
+                <DropdownMenu>
+                  <DropdownMenuTrigger asChild>
+                    <Button variant="ghost" size="icon" className="h-6 w-6">
+                      <MoreHorizontal className="h-3 w-3" />
+                    </Button>
+                  </DropdownMenuTrigger>
+                  <DropdownMenuContent align="end">
+                    <DropdownMenuItem onClick={() => openEditSection(section)}>
+                      <Pencil className="mr-2 h-4 w-4" /> Edit
+                    </DropdownMenuItem>
+                    <DropdownMenuItem className="text-destructive" onClick={() => setDeleteSectionId(section.id)}>
+                      <Trash2 className="mr-2 h-4 w-4" /> Delete
+                    </DropdownMenuItem>
+                  </DropdownMenuContent>
+                </DropdownMenu>
+              </div>
             </div>
             <div
               className="space-y-2 min-h-[100px]"
@@ -297,6 +375,71 @@ export default function ProjectDetailPage() {
         domainId={domainId || ''}
         onCreated={fetchProject}
       />
+
+      {/* Edit Section Dialog */}
+      <Dialog open={!!editingSection} onOpenChange={(open) => { if (!open) setEditingSection(null); }}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Edit section</DialogTitle>
+            <DialogDescription>Update section details.</DialogDescription>
+          </DialogHeader>
+          <div className="space-y-4">
+            <div className="space-y-2">
+              <Label htmlFor="edit-section-name">Name</Label>
+              <Input id="edit-section-name" value={editSectionName} onChange={(e) => setEditSectionName(e.target.value)} autoFocus required />
+            </div>
+            <div className="grid grid-cols-2 gap-4">
+              <div className="space-y-2">
+                <Label htmlFor="edit-section-kind">Kind</Label>
+                <Select value={editSectionKind} onValueChange={(v: any) => setEditSectionKind(v)}>
+                  <SelectTrigger id="edit-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="edit-section-status">Status</Label>
+                <Select value={editSectionStatus} onValueChange={(v: any) => setEditSectionStatus(v)}>
+                  <SelectTrigger id="edit-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>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setEditingSection(null)}>Cancel</Button>
+            <Button onClick={handleEditSection} disabled={editSectionSaving || !editSectionName.trim()}>
+              {editSectionSaving ? "Saving..." : "Save"}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* Delete Section Confirmation */}
+      <AlertDialog open={!!deleteSectionId} onOpenChange={(open) => { if (!open) setDeleteSectionId(null); }}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Delete section?</AlertDialogTitle>
+            <AlertDialogDescription>This cannot be undone. Tasks in this section will become unassigned.</AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel disabled={deleteSectionDeleting}>Cancel</AlertDialogCancel>
+            <AlertDialogAction onClick={handleDeleteSection} disabled={deleteSectionDeleting}>
+              {deleteSectionDeleting ? "Deleting..." : "Delete"}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
     </div>
   );
 }
diff --git a/apps/web/app/(dashboard)/projects/page.tsx b/apps/web/app/(dashboard)/projects/page.tsx
index 1de2a21..fc2cdbb 100644
--- a/apps/web/app/(dashboard)/projects/page.tsx
+++ b/apps/web/app/(dashboard)/projects/page.tsx
@@ -1,11 +1,18 @@
 "use client";
 
 import { useState, useEffect, useCallback } from "react";
-import { Plus, FolderKanban, ExternalLink } from "lucide-react";
+import { Plus, FolderKanban, ExternalLink, 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 { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
+import { Label } from "@/components/ui/label";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog";
+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 Link from "next/link";
 import { toast } from "sonner";
@@ -14,7 +21,7 @@ interface Project {
   id: string;
   name: string;
   description: string | null;
-  status: 'active' | 'paused' | 'completed' | 'archived';
+  status: "active" | "paused" | "completed" | "archived";
   domainId: string;
   color: string | null;
   icon: string | null;
@@ -38,10 +45,17 @@ export default function ProjectsPage() {
   const [domains, setDomains] = useState<{ id: string; name: string }[]>([]);
   const [createOpen, setCreateOpen] = useState(false);
   const [loading, setLoading] = useState(true);
+  const [editingProject, setEditingProject] = useState<Project | null>(null);
+  const [editName, setEditName] = useState("");
+  const [editDescription, setEditDescription] = useState("");
+  const [editStatus, setEditStatus] = useState<Project["status"]>("active");
+  const [saveSaving, setSaveSaving] = useState(false);
+  const [deleteProjectId, setDeleteProjectId] = useState<string | null>(null);
+  const [deleting, setDeleting] = useState(false);
 
   // Fetch domains
   useEffect(() => {
-    fetch('/api/domains?sort=sort_order')
+    fetch("/api/domains?sort=sort_order")
       .then((res) => res.json())
       .then((data) => {
         const items = data.items || [];
@@ -62,7 +76,7 @@ export default function ProjectsPage() {
       const data = await res.json();
       setProjects(data.items || []);
     } catch {
-      toast.error('Failed to load projects');
+      toast.error("Failed to load projects");
     } finally {
       setLoading(false);
     }
@@ -72,11 +86,70 @@ export default function ProjectsPage() {
     fetchProjects();
   }, [fetchProjects]);
 
+  // Edit a project
+  const handleEdit = async () => {
+    if (!editingProject || !editName.trim()) return;
+    setSaveSaving(true);
+    try {
+      const res = await fetch(`/api/domains/${domainId}/projects/${editingProject.id}`, {
+        method: "PATCH",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          name: editName.trim(),
+          description: editDescription || null,
+          status: editStatus,
+        }),
+      });
+      if (!res.ok) throw new Error("Failed to update");
+      toast.success("Project updated");
+      setEditingProject(null);
+      fetchProjects();
+    } catch {
+      toast.error("Failed to update project");
+    } finally {
+      setSaveSaving(false);
+    }
+  };
+
+  // Delete a project
+  const handleDelete = async () => {
+    if (!deleteProjectId) return;
+    setDeleting(true);
+    try {
+      const res = await fetch(`/api/domains/${domainId}/projects/${deleteProjectId}`, { method: "DELETE" });
+      if (!res.ok) throw new Error("Failed to delete");
+      toast.success("Project deleted");
+      setDeleteProjectId(null);
+      fetchProjects();
+    } catch {
+      toast.error("Failed to delete project");
+    } finally {
+      setDeleting(false);
+    }
+  };
+
+  // Open edit dialog
+  const openEdit = (project: Project, e: React.MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setEditName(project.name);
+    setEditDescription(project.description || "");
+    setEditStatus(project.status);
+    setEditingProject(project);
+  };
+
+  // Open delete confirmation
+  const confirmDelete = (id: string, e: React.MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setDeleteProjectId(id);
+  };
+
   // Listen for custom event to open create dialog
   useEffect(() => {
     const handler = () => setCreateOpen(true);
-    document.addEventListener('open-create-project', handler);
-    return () => document.removeEventListener('open-create-project', handler);
+    document.addEventListener("open-create-project", handler);
+    return () => document.removeEventListener("open-create-project", handler);
   }, []);
 
   return (
@@ -89,7 +162,7 @@ export default function ProjectsPage() {
         <div className="flex items-center gap-2">
           {domains.length > 1 && (
             <select
-              value={domainId || ''}
+              value={domainId || ""}
               onChange={(e) => setDomainId(e.target.value)}
               className="rounded-md border bg-background px-3 py-1.5 text-sm"
               aria-label="Select domain"
@@ -116,59 +189,79 @@ 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}`}>
-              <Card className="h-full cursor-pointer transition-colors hover:bg-accent/50">
-                <CardHeader className="pb-2">
-                  <div className="flex items-start justify-between">
-                    <div className="flex items-center gap-2">
-                      {project.color && (
-                        <div
-                          className="h-3 w-3 rounded-full shrink-0"
-                          style={{ backgroundColor: project.color }}
-                        />
-                      )}
-                      <CardTitle className="text-base">{project.name}</CardTitle>
+            <div key={project.id} className="group relative">
+              <Link href={`/projects/${project.id}`}>
+                <Card className="h-full cursor-pointer transition-colors hover:bg-accent/50">
+                  <CardHeader className="pb-2">
+                    <div className="flex items-start justify-between">
+                      <div className="flex items-center gap-2">
+                        {project.color && (
+                          <div
+                            className="h-3 w-3 rounded-full shrink-0"
+                            style={{ backgroundColor: project.color }}
+                          />
+                        )}
+                        <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" />
-                  </div>
-                </CardHeader>
-                <CardContent>
-                  {project.description && (
-                    <p className="mb-3 text-sm text-muted-foreground line-clamp-2">{project.description}</p>
-                  )}
-                  <div className="mb-3 flex items-center gap-2">
-                    <Badge variant="secondary" className={`text-xs ${statusColors[project.status] || ''}`}>
-                      {project.status}
-                    </Badge>
-                    {project.targetDate && (
-                      <span className="text-xs text-muted-foreground">
-                        Due {new Date(project.targetDate).toLocaleDateString()}
-                      </span>
+                  </CardHeader>
+                  <CardContent>
+                    {project.description && (
+                      <p className="mb-3 text-sm text-muted-foreground line-clamp-2">{project.description}</p>
                     )}
-                  </div>
-                  <div className="space-y-1">
-                    <div className="flex items-center justify-between text-xs text-muted-foreground">
-                      <span>{project.completedCount}/{project.taskCount} tasks</span>
-                      <span>{project.progress}%</span>
-                    </div>
-                    <Progress value={project.progress} className="h-2" />
-                  </div>
-                  {project.tags.length > 0 && (
-                    <div className="mt-3 flex flex-wrap gap-1">
-                      {project.tags.map((tag) => (
-                        <span
-                          key={tag.id}
-                          className="inline-flex items-center rounded-full px-2 py-0.5 text-xs"
-                          style={{ backgroundColor: tag.color || '#e2e8f0', color: '#1e293b' }}
-                        >
-                          {tag.name}
+                    <div className="mb-3 flex items-center gap-2">
+                      <Badge variant="secondary" className={`text-xs ${statusColors[project.status] || ""}`}>
+                        {project.status}
+                      </Badge>
+                      {project.targetDate && (
+                        <span className="text-xs text-muted-foreground">
+                          Due {new Date(project.targetDate).toLocaleDateString()}
                         </span>
-                      ))}
+                      )}
                     </div>
-                  )}
-                </CardContent>
-              </Card>
-            </Link>
+                    <div className="space-y-1">
+                      <div className="flex items-center justify-between text-xs text-muted-foreground">
+                        <span>{project.completedCount}/{project.taskCount} tasks</span>
+                        <span>{project.progress}%</span>
+                      </div>
+                      <Progress value={project.progress} className="h-2" />
+                    </div>
+                    {project.tags.length > 0 && (
+                      <div className="mt-3 flex flex-wrap gap-1">
+                        {project.tags.map((tag) => (
+                          <span
+                            key={tag.id}
+                            className="inline-flex items-center rounded-full px-2 py-0.5 text-xs"
+                            style={{ backgroundColor: tag.color || "#e2e8f0", color: "#1e293b" }}
+                          >
+                            {tag.name}
+                          </span>
+                        ))}
+                      </div>
+                    )}
+                  </CardContent>
+                </Card>
+              </Link>
+              {/* Actions overlay */}
+              <div className="absolute right-2 top-2 z-10 opacity-0 group-hover:opacity-100 transition-opacity">
+                <DropdownMenu>
+                  <DropdownMenuTrigger asChild>
+                    <Button variant="secondary" size="icon" className="h-8 w-8">
+                      <MoreHorizontal className="h-4 w-4" />
+                    </Button>
+                  </DropdownMenuTrigger>
+                  <DropdownMenuContent align="end">
+                    <DropdownMenuItem onClick={(e) => openEdit(project, e)}>
+                      <Pencil className="mr-2 h-4 w-4" /> Edit
+                    </DropdownMenuItem>
+                    <DropdownMenuItem className="text-destructive" onClick={(e) => confirmDelete(project.id, e)}>
+                      <Trash2 className="mr-2 h-4 w-4" /> Delete
+                    </DropdownMenuItem>
+                  </DropdownMenuContent>
+                </DropdownMenu>
+              </div>
+            </div>
           ))}
         </div>
       )}
@@ -176,9 +269,65 @@ export default function ProjectsPage() {
       <ProjectCreateDialog
         open={createOpen}
         onOpenChange={setCreateOpen}
-        domainId={domainId || ''}
+        domainId={domainId || ""}
         onCreated={fetchProjects}
       />
+
+      {/* Edit Project Dialog */}
+      <Dialog open={!!editingProject} onOpenChange={(open) => { if (!open) setEditingProject(null); }}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Edit project</DialogTitle>
+            <DialogDescription>Update project details.</DialogDescription>
+          </DialogHeader>
+          <div className="space-y-4">
+            <div className="space-y-2">
+              <Label htmlFor="edit-project-name">Name</Label>
+              <Input id="edit-project-name" value={editName} onChange={(e) => setEditName(e.target.value)} autoFocus required />
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="edit-project-description">Description</Label>
+              <Textarea id="edit-project-description" value={editDescription} onChange={(e) => setEditDescription(e.target.value)} />
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="edit-project-status">Status</Label>
+              <Select value={editStatus} onValueChange={(v: any) => setEditStatus(v)}>
+                <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>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setEditingProject(null)}>Cancel</Button>
+            <Button onClick={handleEdit} disabled={saveSaving || !editName.trim()}>
+              {saveSaving ? "Saving..." : "Save"}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* Delete Project Confirmation */}
+      <AlertDialog open={!!deleteProjectId} onOpenChange={(open) => { if (!open) setDeleteProjectId(null); }}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Delete project?</AlertDialogTitle>
+            <AlertDialogDescription>This cannot be undone. All sections and tasks will also be deleted.</AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel disabled={deleting}>Cancel</AlertDialogCancel>
+            <AlertDialogAction onClick={handleDelete} disabled={deleting}>
+              {deleting ? "Deleting..." : "Delete"}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
     </div>
   );
 }