From 37fd56b43f421e25b53af29b5e9feee74f9d5a4e Mon Sep 17 00:00:00 2001
From: Your Name <you@example.com>
Date: Sun, 15 Feb 2026 20:33:16 +0200
Subject: [PATCH] feat: upgrade empty states with welcome message and column
 placeholders

---
 src/components/board/KanbanColumn.tsx |  5 +++++
 src/components/boards/BoardList.tsx   | 20 +++++++++++++-------
 2 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/src/components/board/KanbanColumn.tsx b/src/components/board/KanbanColumn.tsx
index 5b158b1..b38677e 100644
--- a/src/components/board/KanbanColumn.tsx
+++ b/src/components/board/KanbanColumn.tsx
@@ -99,6 +99,11 @@ export function KanbanColumn({ column, onCardClick }: KanbanColumnProps) {
                 </li>
               );
             })}
+            {column.cardIds.length === 0 && (
+              <li className="flex min-h-[60px] items-center justify-center rounded-md border border-dashed border-pylon-text-secondary/20 text-xs text-pylon-text-secondary/50">
+                Drop or add a card
+              </li>
+            )}
           </ul>
         </ScrollArea>
       </SortableContext>
diff --git a/src/components/boards/BoardList.tsx b/src/components/boards/BoardList.tsx
index b915344..6d0b5ce 100644
--- a/src/components/boards/BoardList.tsx
+++ b/src/components/boards/BoardList.tsx
@@ -24,14 +24,20 @@ export function BoardList() {
   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>
-          <div className="flex items-center gap-2">
-            <Button onClick={() => setDialogOpen(true)}>
+        <div className="flex h-full flex-col items-center justify-center gap-6">
+          <div className="text-center">
+            <h2 className="font-heading text-2xl text-pylon-text">
+              Welcome to OpenPylon
+            </h2>
+            <p className="mt-2 max-w-sm text-sm text-pylon-text-secondary">
+              A local-first Kanban board that keeps your data on your machine.
+              Create your first board to get started.
+            </p>
+          </div>
+          <div className="flex items-center gap-3">
+            <Button size="lg" onClick={() => setDialogOpen(true)}>
               <Plus className="size-4" />
-              New Board
+              Create Board
             </Button>
             <ImportExportButtons />
           </div>