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

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>
+  );
+}