Step 5 - card details

2 min read

Slide-in task panel

Create a slide-in task panel component that opens from the right when a card is clicked (and closes on Escape / backdrop click). It edits one task: a markdown textarea for the full text with an Edit/Preview toggle (add a small shared renderMarkdown utility - headings, bold, italic, lists, links; sanitize the HTML), a color picker rendering the 9 palette swatches (writes the color key, shows as the card's stripe), a due date input with a clear button, and an author line ("Added by {authorName}"). Save explicitly with a Save button plus Ctrl/Cmd+Enter; keep unsaved-changes state visible.

On the board card face, show a calendar chip with the due date, styled red when overdue (compare against local midnight). Support deep-linking: /kanban/:projectId?task={taskId} opens the panel for that card on load - emails and cross-links will rely on this. Make the panel a standalone component that takes projectId + taskId inputs, so it can later be reused by other screens.

Board tags and filtering

Add board-wide tags. Tags live on the board doc as {id, name, color}[]. Build a "Manage tags" dialog: create (new tags auto-cycle through the 9-color palette), rename, recolor, delete - deleting a tag must strip its id from every card's tagIds in one writeBatch. In the task panel, show all board tags as toggle chips writing tagIds on the card. On the card face, render small colored tag chips.

Add a filter bar above the board: multi-select tag chips with OR semantics (a card shows if it has ANY selected tag), plus a "Clear filters" affordance and a count of hidden cards. Filtering happens client-side over the already-streamed tasks. Verify drag and drop still persists correct order while filters are active (this is why the drop handler maps rendered indices onto the full arrays).

Discussion

0 comments

No comments yet. Start the discussion.