add board list home screen with new board dialog and context menu

src/components/boards/BoardList.tsx

@@ -0,0 +1,54 @@
+import { useState } from "react";
+import { Plus } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { useAppStore } from "@/stores/app-store";
+import { BoardCard } from "@/components/boards/BoardCard";
+import { NewBoardDialog } from "@/components/boards/NewBoardDialog";
+
+export function BoardList() {
+  const boards = useAppStore((s) => s.boards);
+  const [dialogOpen, setDialogOpen] = useState(false);
+
+  if (boards.length === 0) {
+    return (
+      <>
+        <div className="flex h-full flex-col items-center justify-center gap-4">
+          <p className="font-mono text-sm text-pylon-text-secondary">
+            Create your first board
+          </p>
+          <Button onClick={() => setDialogOpen(true)}>
+            <Plus className="size-4" />
+            New Board
+          </Button>
+        </div>
+        <NewBoardDialog open={dialogOpen} onOpenChange={setDialogOpen} />
+      </>
+    );
+  }
+
+  return (
+    <>
+      <div className="h-full overflow-y-auto p-6">
+        {/* Heading row */}
+        <div className="mb-4 flex items-center justify-between">
+          <h2 className="font-mono text-xs font-semibold uppercase tracking-widest text-pylon-text-secondary">
+            Your Boards
+          </h2>
+          <Button size="sm" onClick={() => setDialogOpen(true)}>
+            <Plus className="size-4" />
+            New
+          </Button>
+        </div>
+
+        {/* Board grid */}
+        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
+          {boards.map((board) => (
+            <BoardCard key={board.id} board={board} />
+          ))}
+        </div>
+      </div>
+
+      <NewBoardDialog open={dialogOpen} onOpenChange={setDialogOpen} />
+    </>
+  );
+}