feat: add board view with columns, headers, and inline card creation

2026-02-15 18:49:10 +02:00
parent fbff4bc855
commit a68b6c7b8c
4 changed files with 369 additions and 0 deletions
--- a/src/components/board/BoardView.tsx
+++ b/src/components/board/BoardView.tsx
@@ -0,0 +1,102 @@
+import { useState, useRef, useEffect } from "react";
+import { Plus } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { useBoardStore } from "@/stores/board-store";
+import { KanbanColumn } from "@/components/board/KanbanColumn";
+
+export function BoardView() {
+  const board = useBoardStore((s) => s.board);
+  const addColumn = useBoardStore((s) => s.addColumn);
+
+  const [addingColumn, setAddingColumn] = useState(false);
+  const [newColumnTitle, setNewColumnTitle] = useState("");
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    if (addingColumn && inputRef.current) {
+      inputRef.current.focus();
+    }
+  }, [addingColumn]);
+
+  function handleAddColumn() {
+    const trimmed = newColumnTitle.trim();
+    if (trimmed) {
+      addColumn(trimmed);
+      setNewColumnTitle("");
+      // Keep the input open for quick successive adds
+      inputRef.current?.focus();
+    }
+  }
+
+  function handleKeyDown(e: React.KeyboardEvent) {
+    if (e.key === "Enter") {
+      handleAddColumn();
+    } else if (e.key === "Escape") {
+      setAddingColumn(false);
+      setNewColumnTitle("");
+    }
+  }
+
+  if (!board) {
+    return (
+      <div className="flex h-full items-center justify-center text-pylon-text-secondary">
+        <span className="font-mono text-sm">Loading board...</span>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex h-full gap-6 overflow-x-auto p-6">
+      {board.columns.map((column) => (
+        <KanbanColumn key={column.id} column={column} />
+      ))}
+
+      {/* Add column button / inline input */}
+      <div className="shrink-0">
+        {addingColumn ? (
+          <div className="flex w-[280px] flex-col gap-2 rounded-lg bg-pylon-column p-3">
+            <input
+              ref={inputRef}
+              value={newColumnTitle}
+              onChange={(e) => setNewColumnTitle(e.target.value)}
+              onKeyDown={handleKeyDown}
+              onBlur={() => {
+                if (!newColumnTitle.trim()) {
+                  setAddingColumn(false);
+                }
+              }}
+              placeholder="Column title..."
+              className="h-8 rounded-md bg-pylon-surface px-3 text-sm text-pylon-text outline-none placeholder:text-pylon-text-secondary focus:ring-1 focus:ring-pylon-accent"
+            />
+            <div className="flex gap-2">
+              <Button size="sm" onClick={handleAddColumn}>
+                Add
+              </Button>
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={() => {
+                  setAddingColumn(false);
+                  setNewColumnTitle("");
+                }}
+                className="text-pylon-text-secondary"
+              >
+                Cancel
+              </Button>
+            </div>
+          </div>
+        ) : (
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={() => setAddingColumn(true)}
+            className="h-10 w-[280px] justify-start border border-dashed border-pylon-text-secondary/30 text-pylon-text-secondary hover:border-pylon-text-secondary/60 hover:text-pylon-text"
+          >
+            <Plus className="size-4" />
+            Add column
+          </Button>
+        )}
+      </div>
+    </div>
+  );
+}