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>
This commit is contained in:
2026-09-04 20:47:17 +01:00
co-authored by Claude Sonnet 5
parent dd7d217e8e
commit acfc35af4c
3 changed files with 31 additions and 2 deletions
+3 -2
View File
@@ -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' }"