A board of columns with cards that move inside and between columns, and columns that move by their handle — with the pointer or with Alt and the arrow keys. The board reports each move; the page keeps the state.
A block from @tectra-ng/blocks — it comes with tectra-ng, or alone: npm install @tectra-ng/blocks.
A task board built from the slots: a section header with a count, an add button and a menu; task cards with a check, pills, an assignee, a due date and counters; "Add task" in the footer and "Add section" after the last column, both turning into a quick-add field (Enter adds, Esc cancels). Drag cards and sections, or focus a card and press Alt with an arrow key — focusableCards is off because the card takes the focus itself. itemDropped and columnDropped give the new neighbours; moveItem / moveColumn apply them to the state.
txKanbanColumnHeader replaces the title and the count, txKanbanColumnTop adds a block under it — here a quick-add field — and txKanbanEmpty fills an empty column.
Now
Dark mode for invoices
Later
No ideas in Later yet
21 lines
<tx-kanbanlabel="Ideas" [columns]="columns()" [itemId]="noteId"><ng-templatetxKanbanColumnHeaderlet-column><tx-icon [name]="column.id === 'later' ? 'clock' : 'bolt'" /><strong>{{ column.title }}</strong></ng-template><ng-templatetxKanbanColumnToplet-column><inputtxInputfluidplaceholder="Add an idea and press Enter" [attr.aria-label]="'Add to ' + column.title" (keydown.enter)="add(column.id, $event)" /></ng-template><ng-templatetxKanbanCardlet-note><divclass="card">{{ note.text }}</div></ng-template><ng-templatetxKanbanEmptylet-column><divclass="empty">No ideas in {{ column.title }} yet</div></ng-template></tx-kanban>