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/ColumnHeader.tsx
+++ b/src/components/board/ColumnHeader.tsx
@@ -0,0 +1,142 @@
+import { useState, useRef, useEffect } from "react";
+import { MoreHorizontal } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { useBoardStore } from "@/stores/board-store";
+import type { Column, ColumnWidth } from "@/types/board";
+
+interface ColumnHeaderProps {
+  column: Column;
+  cardCount: number;
+}
+
+export function ColumnHeader({ column, cardCount }: ColumnHeaderProps) {
+  const [editing, setEditing] = useState(false);
+  const [editValue, setEditValue] = useState(column.title);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const updateColumnTitle = useBoardStore((s) => s.updateColumnTitle);
+  const deleteColumn = useBoardStore((s) => s.deleteColumn);
+  const setColumnWidth = useBoardStore((s) => s.setColumnWidth);
+
+  useEffect(() => {
+    if (editing && inputRef.current) {
+      inputRef.current.focus();
+      inputRef.current.select();
+    }
+  }, [editing]);
+
+  function commitRename() {
+    const trimmed = editValue.trim();
+    if (trimmed && trimmed !== column.title) {
+      updateColumnTitle(column.id, trimmed);
+    } else {
+      setEditValue(column.title);
+    }
+    setEditing(false);
+  }
+
+  function handleKeyDown(e: React.KeyboardEvent) {
+    if (e.key === "Enter") {
+      commitRename();
+    } else if (e.key === "Escape") {
+      setEditValue(column.title);
+      setEditing(false);
+    }
+  }
+
+  function handleWidthChange(width: ColumnWidth) {
+    setColumnWidth(column.id, width);
+  }
+
+  return (
+    <div className="flex items-center justify-between border-b border-border px-3 pb-2 pt-3">
+      <div className="flex items-center gap-2 overflow-hidden">
+        {editing ? (
+          <input
+            ref={inputRef}
+            value={editValue}
+            onChange={(e) => setEditValue(e.target.value)}
+            onBlur={commitRename}
+            onKeyDown={handleKeyDown}
+            className="h-5 w-full bg-transparent font-mono text-xs font-semibold uppercase tracking-widest text-pylon-text-secondary outline-none"
+          />
+        ) : (
+          <span
+            className="cursor-default truncate font-mono text-xs font-semibold uppercase tracking-widest text-pylon-text-secondary"
+            onDoubleClick={() => {
+              setEditValue(column.title);
+              setEditing(true);
+            }}
+          >
+            {column.title}
+          </span>
+        )}
+        <span className="shrink-0 font-mono text-xs text-pylon-text-secondary">
+          {cardCount}
+        </span>
+      </div>
+
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button
+            variant="ghost"
+            size="icon-xs"
+            className="shrink-0 text-pylon-text-secondary opacity-0 transition-opacity group-hover/column:opacity-100 hover:text-pylon-text"
+          >
+            <MoreHorizontal className="size-3.5" />
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end">
+          <DropdownMenuItem
+            onClick={() => {
+              setEditValue(column.title);
+              setEditing(true);
+            }}
+          >
+            Rename
+          </DropdownMenuItem>
+          <DropdownMenuSub>
+            <DropdownMenuSubTrigger>Width</DropdownMenuSubTrigger>
+            <DropdownMenuSubContent>
+              <DropdownMenuItem onClick={() => handleWidthChange("narrow")}>
+                Narrow
+                {column.width === "narrow" && (
+                  <span className="ml-auto text-pylon-accent">*</span>
+                )}
+              </DropdownMenuItem>
+              <DropdownMenuItem onClick={() => handleWidthChange("standard")}>
+                Standard
+                {column.width === "standard" && (
+                  <span className="ml-auto text-pylon-accent">*</span>
+                )}
+              </DropdownMenuItem>
+              <DropdownMenuItem onClick={() => handleWidthChange("wide")}>
+                Wide
+                {column.width === "wide" && (
+                  <span className="ml-auto text-pylon-accent">*</span>
+                )}
+              </DropdownMenuItem>
+            </DropdownMenuSubContent>
+          </DropdownMenuSub>
+          <DropdownMenuSeparator />
+          <DropdownMenuItem
+            variant="destructive"
+            onClick={() => deleteColumn(column.id)}
+          >
+            Delete
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
+  );
+}