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

2026-07-29 20:31:22 +00:00
parent bc15b31e8b 888bd6393e
commit 7e2fe93d64
7 changed files with 1093 additions and 107 deletions
@@ -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
-                    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={() => 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>
  );
 }
@@ -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">
-                {(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
+                      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>
  );
 }
@@ -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}`}>
-              <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="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>
+                  </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>
-            </Link>
+                </Card>
+              </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>
  );
 }