feat: add board list home screen with new board dialog and context menu

2026-02-15 18:48:59 +02:00
parent d369ae6644
commit fbff4bc855
4 changed files with 376 additions and 9 deletions
--- a/src/components/boards/BoardCard.tsx
+++ b/src/components/boards/BoardCard.tsx
@@ -0,0 +1,146 @@
+import { useState } from "react";
+import { formatDistanceToNow } from "date-fns";
+import { Trash2, Copy } from "lucide-react";
+import {
+  ContextMenu,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuTrigger,
+  ContextMenuSeparator,
+} from "@/components/ui/context-menu";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+  DialogFooter,
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import type { BoardMeta } from "@/types/board";
+import { useAppStore } from "@/stores/app-store";
+import { useBoardStore } from "@/stores/board-store";
+import { deleteBoard, loadBoard, saveBoard } from "@/lib/storage";
+
+interface BoardCardProps {
+  board: BoardMeta;
+}
+
+export function BoardCard({ board }: BoardCardProps) {
+  const [confirmDelete, setConfirmDelete] = useState(false);
+
+  const setView = useAppStore((s) => s.setView);
+  const addRecentBoard = useAppStore((s) => s.addRecentBoard);
+  const refreshBoards = useAppStore((s) => s.refreshBoards);
+  const openBoard = useBoardStore((s) => s.openBoard);
+
+  const relativeTime = formatDistanceToNow(new Date(board.updatedAt), {
+    addSuffix: true,
+  });
+
+  async function handleOpen() {
+    await openBoard(board.id);
+    setView({ type: "board", boardId: board.id });
+    addRecentBoard(board.id);
+  }
+
+  async function handleDelete() {
+    await deleteBoard(board.id);
+    await refreshBoards();
+    setConfirmDelete(false);
+  }
+
+  async function handleDuplicate() {
+    const original = await loadBoard(board.id);
+    const { ulid } = await import("ulid");
+    const ts = new Date().toISOString();
+    const duplicated = {
+      ...original,
+      id: ulid(),
+      title: `${original.title} (copy)`,
+      createdAt: ts,
+      updatedAt: ts,
+    };
+    await saveBoard(duplicated);
+    await refreshBoards();
+  }
+
+  return (
+    <>
+      <ContextMenu>
+        <ContextMenuTrigger asChild>
+          <button
+            onClick={handleOpen}
+            className="group flex w-full flex-col rounded-lg bg-pylon-surface shadow-sm transition-all duration-200 hover:-translate-y-0.5 hover:shadow-md text-left"
+          >
+            {/* Color accent stripe */}
+            <div
+              className="h-1 w-full rounded-t-lg"
+              style={{ backgroundColor: board.color }}
+            />
+
+            <div className="flex flex-col gap-2 p-4">
+              {/* Board title */}
+              <h3 className="font-heading text-lg text-pylon-text">
+                {board.title}
+              </h3>
+
+              {/* Stats line */}
+              <p className="font-mono text-xs text-pylon-text-secondary">
+                {board.cardCount} card{board.cardCount !== 1 ? "s" : ""} &middot;{" "}
+                {board.columnCount} column{board.columnCount !== 1 ? "s" : ""}
+              </p>
+
+              {/* Relative time */}
+              <p className="font-mono text-xs text-pylon-text-secondary">
+                {relativeTime}
+              </p>
+            </div>
+          </button>
+        </ContextMenuTrigger>
+
+        <ContextMenuContent>
+          <ContextMenuItem onClick={handleDuplicate}>
+            <Copy className="size-4" />
+            Duplicate
+          </ContextMenuItem>
+          <ContextMenuSeparator />
+          <ContextMenuItem
+            variant="destructive"
+            onClick={() => setConfirmDelete(true)}
+          >
+            <Trash2 className="size-4" />
+            Delete
+          </ContextMenuItem>
+        </ContextMenuContent>
+      </ContextMenu>
+
+      {/* Delete confirmation dialog */}
+      <Dialog open={confirmDelete} onOpenChange={setConfirmDelete}>
+        <DialogContent className="bg-pylon-surface sm:max-w-sm">
+          <DialogHeader>
+            <DialogTitle className="font-heading text-pylon-text">
+              Delete Board
+            </DialogTitle>
+            <DialogDescription className="text-pylon-text-secondary">
+              Are you sure you want to delete &ldquo;{board.title}&rdquo;? This
+              action cannot be undone.
+            </DialogDescription>
+          </DialogHeader>
+          <DialogFooter>
+            <Button
+              variant="ghost"
+              onClick={() => setConfirmDelete(false)}
+              className="text-pylon-text-secondary"
+            >
+              Cancel
+            </Button>
+            <Button variant="destructive" onClick={handleDelete}>
+              Delete
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+}