From acfc35af4c0f833ffd1fe2ceb47e4033ee300446 Mon Sep 17 00:00:00 2001
From: Aneurin Barker Snook <aneurin@aneur.in>
Date: Fri, 4 Sep 2026 20:47:17 +0100
Subject: [PATCH] Show a dashed drop-area in empty kanban columns and the inbox

.kanban__cards:empty (shared by every status column and the sidebar's
inbox list) gets a dashed border, transparent background, and a
'Drop cards here' hint, echoing the dashboard's 'Create a project'
tile. Pure CSS: both draggables are already always-rendered even when
empty, so an empty one is a genuinely childless element and :empty
just tracks that -- it steps aside on its own once Sortable inserts a
drag-over ghost, and needs no JS empty-state flag.

Drops the sidebar's separate 'Nothing in the inbox.' message, now
redundant with the box itself. Verified the container really is
childless when empty via a DOM dump against a running instance (no
screenshot).

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 web/README.md                     |  8 ++++++++
 web/src/components/AppSidebar.vue |  5 +++--
 web/src/style.css                 | 20 ++++++++++++++++++++
 3 files changed, 31 insertions(+), 2 deletions(-)

diff --git a/web/README.md b/web/README.md
index 0fbfd23..5bfef98 100644
--- a/web/README.md
+++ b/web/README.md
@@ -78,6 +78,14 @@ project view is currently mounted (`route.name === 'project'`), that project's
 cards too -- either side of a drag could have been the inbox. A small form
 under the list adds a card straight to the inbox.
 
+Empty (no cards) is shown as a subtle dashed drop-area rather than blank
+space -- `.kanban__cards:empty` in `style.css`, so it's pure CSS keyed off the
+real DOM child count. Since a card's kanban column/inbox `<draggable>` is
+always rendered even with nothing in it (see above), that container is
+genuinely childless when empty, so the rule applies with no extra markup or
+JS state; it steps aside automatically once Sortable inserts its drag-over
+ghost. The same rule covers every kanban status column too (below).
+
 ## Project detail
 
 `/projects/:id` shows one project. It renders on a **full-width** layout (the
diff --git a/web/src/components/AppSidebar.vue b/web/src/components/AppSidebar.vue
index 79cb48c..721acce 100644
--- a/web/src/components/AppSidebar.vue
+++ b/web/src/components/AppSidebar.vue
@@ -139,8 +139,9 @@ async function onInboxChange(change: ColumnChange) {
 
     <template v-else>
       <!-- Always rendered (even empty) so it stays a valid drop target for a
-           card dragged out of a project's kanban board. -->
-      <p v-if="inbox.cards.length === 0" class="sidebar__note muted">Nothing in the inbox.</p>
+           card dragged out of a project's kanban board -- empty shows a
+           dashed drop-area box (.kanban__cards:empty in style.css) instead
+           of a separate message. -->
       <draggable
         :list="inbox.cards"
         :group="{ name: 'kanban' }"
diff --git a/web/src/style.css b/web/src/style.css
index 882418e..0486333 100644
--- a/web/src/style.css
+++ b/web/src/style.css
@@ -757,6 +757,26 @@ h1 {
   min-height: 3rem;
 }
 
+/* Empty column/inbox: a subtle drop target, styled like the dashboard's
+   "Create a project" tile (dashed border, transparent). :empty tracks the
+   real DOM child count, so this naturally steps aside for Sortable's own
+   ghost placeholder while something is dragged over it. */
+.kanban__cards:empty {
+  border: 1px dashed var(--border);
+  border-radius: 8px;
+}
+
+.kanban__cards:empty::before {
+  content: '⬇ Drop cards here';
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  color: var(--muted);
+  font-size: 0.8rem;
+}
+
 .kanban-card {
   background: var(--surface);
   border: 1px solid var(--border);