From a68b6c7b8c1c7c2d338b191883a6827b35fbadcb Mon Sep 17 00:00:00 2001
From: Your Name <you@example.com>
Date: Sun, 15 Feb 2026 18:49:10 +0200
Subject: [PATCH] feat: add board view with columns, headers, and inline card
 creation

---
 src/components/board/AddCardInput.tsx |  53 ++++++++++
 src/components/board/BoardView.tsx    | 102 ++++++++++++++++++
 src/components/board/ColumnHeader.tsx | 142 ++++++++++++++++++++++++++
 src/components/board/KanbanColumn.tsx |  72 +++++++++++++
 4 files changed, 369 insertions(+)
 create mode 100644 src/components/board/AddCardInput.tsx
 create mode 100644 src/components/board/BoardView.tsx
 create mode 100644 src/components/board/ColumnHeader.tsx
 create mode 100644 src/components/board/KanbanColumn.tsx

diff --git a/src/components/board/AddCardInput.tsx b/src/components/board/AddCardInput.tsx
new file mode 100644
index 0000000..8a02beb
--- /dev/null
+++ b/src/components/board/AddCardInput.tsx
@@ -0,0 +1,53 @@
+import { useState, useRef, useEffect } from "react";
+import { useBoardStore } from "@/stores/board-store";
+
+interface AddCardInputProps {
+  columnId: string;
+  onClose: () => void;
+}
+
+export function AddCardInput({ columnId, onClose }: AddCardInputProps) {
+  const [value, setValue] = useState("");
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+  const addCard = useBoardStore((s) => s.addCard);
+
+  useEffect(() => {
+    textareaRef.current?.focus();
+  }, []);
+
+  function handleSubmit() {
+    const trimmed = value.trim();
+    if (trimmed) {
+      addCard(columnId, trimmed);
+      setValue("");
+      // Keep the input open for quick multi-add
+      textareaRef.current?.focus();
+    }
+  }
+
+  function handleKeyDown(e: React.KeyboardEvent<HTMLTextAreaElement>) {
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      handleSubmit();
+    } else if (e.key === "Escape") {
+      onClose();
+    }
+  }
+
+  return (
+    <div className="px-2 pb-2">
+      <textarea
+        ref={textareaRef}
+        value={value}
+        onChange={(e) => setValue(e.target.value)}
+        onKeyDown={handleKeyDown}
+        onBlur={() => {
+          if (!value.trim()) onClose();
+        }}
+        placeholder="Card title..."
+        rows={2}
+        className="w-full resize-none rounded-lg bg-pylon-surface p-3 text-sm text-pylon-text shadow-sm outline-none placeholder:text-pylon-text-secondary focus:ring-1 focus:ring-pylon-accent"
+      />
+    </div>
+  );
+}
diff --git a/src/components/board/BoardView.tsx b/src/components/board/BoardView.tsx
new file mode 100644
index 0000000..46e75fd
--- /dev/null
+++ 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>
+  );
+}
diff --git a/src/components/board/ColumnHeader.tsx b/src/components/board/ColumnHeader.tsx
new file mode 100644
index 0000000..4205263
--- /dev/null
+++ 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>
+  );
+}
diff --git a/src/components/board/KanbanColumn.tsx b/src/components/board/KanbanColumn.tsx
new file mode 100644
index 0000000..d80a651
--- /dev/null
+++ b/src/components/board/KanbanColumn.tsx
@@ -0,0 +1,72 @@
+import { useState } from "react";
+import { Plus } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { ColumnHeader } from "@/components/board/ColumnHeader";
+import { AddCardInput } from "@/components/board/AddCardInput";
+import { CardThumbnail } from "@/components/board/CardThumbnail";
+import { useBoardStore } from "@/stores/board-store";
+import type { Column } from "@/types/board";
+
+const WIDTH_MAP = {
+  narrow: 180,
+  standard: 280,
+  wide: 360,
+} as const;
+
+interface KanbanColumnProps {
+  column: Column;
+}
+
+export function KanbanColumn({ column }: KanbanColumnProps) {
+  const [showAddCard, setShowAddCard] = useState(false);
+  const board = useBoardStore((s) => s.board);
+
+  const width = WIDTH_MAP[column.width];
+
+  return (
+    <div
+      className="group/column flex shrink-0 flex-col rounded-lg bg-pylon-column"
+      style={{ width }}
+    >
+      <ColumnHeader column={column} cardCount={column.cardIds.length} />
+
+      {/* Card list */}
+      <ScrollArea className="flex-1 overflow-y-auto">
+        <div className="flex flex-col gap-2 p-2">
+          {column.cardIds.map((cardId) => {
+            const card = board?.cards[cardId];
+            if (!card) return null;
+            return (
+              <CardThumbnail
+                key={cardId}
+                card={card}
+                boardLabels={board?.labels ?? []}
+              />
+            );
+          })}
+        </div>
+      </ScrollArea>
+
+      {/* Add card section */}
+      {showAddCard ? (
+        <AddCardInput
+          columnId={column.id}
+          onClose={() => setShowAddCard(false)}
+        />
+      ) : (
+        <div className="p-2">
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={() => setShowAddCard(true)}
+            className="w-full justify-start text-pylon-text-secondary hover:text-pylon-text"
+          >
+            <Plus className="size-4" />
+            Add card
+          </Button>
+        </div>
+      )}
+    </div>
+  );
+}