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/NewBoardDialog.tsx
+++ b/src/components/boards/NewBoardDialog.tsx
@@ -0,0 +1,173 @@
+import { useState } from "react";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+  DialogFooter,
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { createBoard } from "@/lib/board-factory";
+import { saveBoard } from "@/lib/storage";
+import { useAppStore } from "@/stores/app-store";
+import { useBoardStore } from "@/stores/board-store";
+
+const PRESET_COLORS = [
+  "#6366f1", // indigo
+  "#8b5cf6", // violet
+  "#ec4899", // pink
+  "#f43f5e", // rose
+  "#f97316", // orange
+  "#eab308", // yellow
+  "#22c55e", // green
+  "#06b6d4", // cyan
+];
+
+type Template = "blank" | "kanban" | "sprint";
+
+interface NewBoardDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}
+
+export function NewBoardDialog({ open, onOpenChange }: NewBoardDialogProps) {
+  const [title, setTitle] = useState("");
+  const [color, setColor] = useState(PRESET_COLORS[0]);
+  const [template, setTemplate] = useState<Template>("blank");
+  const [creating, setCreating] = useState(false);
+
+  const refreshBoards = useAppStore((s) => s.refreshBoards);
+  const setView = useAppStore((s) => s.setView);
+  const addRecentBoard = useAppStore((s) => s.addRecentBoard);
+  const openBoard = useBoardStore((s) => s.openBoard);
+
+  async function handleCreate() {
+    const trimmed = title.trim();
+    if (!trimmed || creating) return;
+
+    setCreating(true);
+    try {
+      const board = createBoard(trimmed, color, template);
+      await saveBoard(board);
+      await refreshBoards();
+      await openBoard(board.id);
+      setView({ type: "board", boardId: board.id });
+      addRecentBoard(board.id);
+      onOpenChange(false);
+      resetForm();
+    } finally {
+      setCreating(false);
+    }
+  }
+
+  function resetForm() {
+    setTitle("");
+    setColor(PRESET_COLORS[0]);
+    setTemplate("blank");
+  }
+
+  function handleKeyDown(e: React.KeyboardEvent) {
+    if (e.key === "Enter" && title.trim()) {
+      handleCreate();
+    }
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="bg-pylon-surface sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle className="font-heading text-pylon-text">
+            New Board
+          </DialogTitle>
+          <DialogDescription className="text-pylon-text-secondary">
+            Create a new board to organize your work.
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="flex flex-col gap-4">
+          {/* Title input */}
+          <div>
+            <label
+              htmlFor="board-title"
+              className="mb-1.5 block font-mono text-xs uppercase tracking-widest text-pylon-text-secondary"
+            >
+              Title
+            </label>
+            <Input
+              id="board-title"
+              placeholder="My Board"
+              value={title}
+              onChange={(e) => setTitle(e.target.value)}
+              onKeyDown={handleKeyDown}
+              autoFocus
+              className="bg-pylon-bg text-pylon-text"
+            />
+          </div>
+
+          {/* Color picker */}
+          <div>
+            <label className="mb-1.5 block font-mono text-xs uppercase tracking-widest text-pylon-text-secondary">
+              Color
+            </label>
+            <div className="flex gap-2">
+              {PRESET_COLORS.map((c) => (
+                <button
+                  key={c}
+                  type="button"
+                  onClick={() => setColor(c)}
+                  className="size-8 rounded-full transition-transform hover:scale-110"
+                  style={{
+                    backgroundColor: c,
+                    outline:
+                      color === c ? "2px solid currentColor" : "none",
+                    outlineOffset: "2px",
+                  }}
+                  aria-label={`Color ${c}`}
+                />
+              ))}
+            </div>
+          </div>
+
+          {/* Template selector */}
+          <div>
+            <label className="mb-1.5 block font-mono text-xs uppercase tracking-widest text-pylon-text-secondary">
+              Template
+            </label>
+            <div className="flex gap-2">
+              {(["blank", "kanban", "sprint"] as const).map((t) => (
+                <Button
+                  key={t}
+                  type="button"
+                  variant={template === t ? "default" : "outline"}
+                  size="sm"
+                  onClick={() => setTemplate(t)}
+                  className="capitalize"
+                >
+                  {t}
+                </Button>
+              ))}
+            </div>
+          </div>
+        </div>
+
+        <DialogFooter>
+          <Button
+            variant="ghost"
+            onClick={() => onOpenChange(false)}
+            className="text-pylon-text-secondary"
+          >
+            Cancel
+          </Button>
+          <Button
+            onClick={handleCreate}
+            disabled={!title.trim() || creating}
+          >
+            Create
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}