lhumina_code/hero_whiteboard

Fork 0

kanban improvements #220

New issue

Open

opened 2026-05-28 04:52:24 +00:00 by despiegk · 2 comments

despiegk commented

2026-05-28 04:52:24 +00:00

Owner

there is title & description now
in main view we limit size of what we can show, we need intelligent way to cut markdown in something which can be shown, e.g. lenght of sentences, lenght of page for description, otherwise its no longer nice, this needs to be in line to the size of the kanban, if we scale it up we have more space
make it easy to click open description maybe even jjust hovering over it, pops it out so we see the full description
check we can easily drag dop elements over swimlanes
allow deadline on item and show in other color
allow tags, very simple, and show small

basically work heavily on visualization of kanban and usability

make sure all of features are in openrpc

- there is title & description now - in main view we limit size of what we can show, we need intelligent way to cut markdown in something which can be shown, e.g. lenght of sentences, lenght of page for description, otherwise its no longer nice, this needs to be in line to the size of the kanban, if we scale it up we have more space - make it easy to click open description maybe even jjust hovering over it, pops it out so we see the full description - check we can easily drag dop elements over swimlanes - allow deadline on item and show in other color - allow tags, very simple, and show small basically work heavily on visualization of kanban and usability make sure all of features are in openrpc

despiegk commented

2026-05-28 04:59:17 +00:00

Author

Owner

Implementation Spec for Issue #220 — Kanban improvements

Objective

Substantially improve the kanban board's visualization and usability. The card (the item dragged on the board) becomes a structured "story" with a title, a rich markdown description (can be large), simple tags, and a deadline. The current inline title-only edit is replaced by a dedicated story editor modal. On the board itself, the description is intelligently truncated to fit the card and scales with card/column size. Deadlines render in a status-aware color, tags render small. Cross-column drag-and-drop is verified/hardened so all fields move with the card. Every new field is reflected in OpenRPC.

Requirements

Replace the weak inline edit with a proper story editor: a centered modal overlay with Title, a large markdown Description editor (textarea + live preview tabs), simple Tags, and a Deadline picker. Opens on card click.
Intelligent markdown truncation of the description in the card body, cutting on sentence/word boundaries, scaled to card/column size (bigger card = more text shown).
Verify and harden drag-and-drop of cards across columns/swimlanes; description/deadline/tags must survive the move.
Per-item deadline, shown in a distinct color (overdue = red, due-soon = amber, otherwise neutral).
Simple per-item tags (array of strings), shown small as chips.
All new card fields reflected in openrpc.json (KanbanCard schema + card.add / card.update params, with merge semantics).

Card data model (stored in BoardObject.data.columns[].cards[] — free JSON, no SQL migration)

text: string (existing) — card title.
description: string (new) — markdown body, may be large; default empty.
deadline: string (new) — ISO YYYY-MM-DD or empty.
tags: string[] (new) — short labels; default empty.

Files to Modify/Create

crates/hero_whiteboard_server/src/handlers/kanban.rs — card_add and card_update accept optional description, deadline, tags; card_update becomes a partial merge (only provided fields change); defensive validation; new unit tests.
crates/hero_whiteboard_server/openrpc.json — extend KanbanCard schema and kanban.card.add / kanban.card.update params with the new fields; document merge semantics. (Confine edits to kanban regions; file has unrelated uncommitted edits.)
crates/hero_whiteboard_admin/static/web/js/whiteboard/markdown.js — add truncateForPreview(markdown, maxChars) helper (sentence/word-boundary cut, trailing …); export it.
crates/hero_whiteboard_admin/static/web/js/whiteboard/kanban.js — render title + truncated description + tag chips + deadline badge on the Konva card; open the story editor modal on card click; harden cross-column DnD; preserve new fields on all mutations.
crates/hero_whiteboard_admin/static/web/js/whiteboard/kanban_editor.js (NEW) — the story editor modal: title input, tags editor, deadline picker, markdown textarea with Write/Preview tabs (live preview via WhiteboardMarkdown.toHtml), Save/Cancel; integrates with WhiteboardHistory snapshot + persist.
crates/hero_whiteboard_admin/static/web/css/whiteboard.css — story editor modal styles (centered overlay, dimmed backdrop) and card chip/badge styles.
crates/hero_whiteboard_admin/templates/* (whichever loads the kanban JS) — add a <script> tag for the new kanban_editor.js.
SPECIFICATIONS.md — document the new card shape and deadline color thresholds.

Implementation Plan

Step 1: Extend the card data model on the server

Files: crates/hero_whiteboard_server/src/handlers/kanban.rs

card_add: read optional description (string), deadline (string), tags (string array) in addition to required text; include them in the pushed card object when present.
card_update: make text, description, deadline, tags all optional; write each to the existing card only when provided (merge, mirroring column_update).
validate_columns: still require card["text"] to be a string; when present, validate description is string, deadline is string, tags is an array of strings.
Add unit tests: partial card_update preserves other fields; card_add with all fields; card_move preserves description/deadline/tags.
Dependencies: none.

Step 2: Update the OpenRPC schema

Files: crates/hero_whiteboard_server/openrpc.json

Extend KanbanCard schema: add description (string), deadline (string), tags (array of string) with descriptions.
kanban.card.add params: add optional description, deadline, tags.
kanban.card.update params: make text optional; add optional description, deadline, tags; update method description to state partial/merge semantics.
Note in kanban.card.move description that all card fields move with the card.
Keep edits confined to kanban regions to avoid clobbering unrelated uncommitted diffs.
Dependencies: field names must match Step 1.

Step 3: Markdown truncation helper

Files: crates/hero_whiteboard_admin/static/web/js/whiteboard/markdown.js

Add truncateForPreview(markdown, maxChars): strip heavy block syntax (code fences, images), cut at the last sentence boundary (. ! ?) at/under maxChars, else last word boundary, append … when truncated; keep light inline markdown. Export in the public API object.
Dependencies: none (parallel with Steps 1–2).

Files: crates/hero_whiteboard_admin/static/web/js/whiteboard/kanban_editor.js, crates/hero_whiteboard_admin/static/web/css/whiteboard.css, the kanban template

Build a centered modal overlay with dimmed backdrop: Title input, Tags editor (add/remove small chips), Deadline date input, and a large Description markdown editor with Write/Preview tabs (live preview rendered via WhiteboardMarkdown.toHtml). Footer: Cancel / Save. Esc cancels, Cmd/Ctrl+Enter saves.
Expose WhiteboardKanbanEditor.open(card, onSave) (or similar). On save it calls back with the edited {text, description, deadline, tags}; kanban.js wires that to snapshot + mutate + persist.
Add modal CSS (overlay, backdrop, tabs, chips). Add the <script> include for kanban_editor.js to the template that already loads kanban.js/markdown.js.
Dependencies: Step 3 (preview reuses markdown renderer).

Step 5: Render structured card body and open the editor on click

Files: crates/hero_whiteboard_admin/static/web/js/whiteboard/kanban.js

Treat card as title (text) + optional description/tags/deadline. Compute card height to fit: title + truncated description block + tag chip row + deadline badge. Derive description char budget from column width and zoom so larger cards show more (uses truncateForPreview).
Render: bold title; truncated description (Konva text); small tag chips (rounded rect + ~9px text, clipped to width); deadline badge pill colored by threshold const DEADLINE_SOON_DAYS = 2 (overdue red #dc3545, soon amber #f59e0b, else neutral).
Replace the inline title editor: clicking a card opens WhiteboardKanbanEditor.open(...); on save do WhiteboardHistory.snapshotBefore, apply fields, renderKanban, persistKanbanMutation. (Keep a lightweight path for the existing menu actions.)
Dependencies: Steps 3 and 4.

Step 6: Harden cross-column drag-and-drop

Files: crates/hero_whiteboard_admin/static/web/js/whiteboard/kanban.js

Verify the existing cardGroup dragstart/dragend logic still computes target column (pointer X) and insert index (Y) correctly with the new variable-height cards (reads _colLayout). Re-test intra-column reorder and cross-column moves with tall description/tag/deadline cards.
Confirm the spliced whole-card object carries all fields (it does). Ensure opening the editor (click) does not start a drag.
Dependencies: Step 5 (variable heights).

Step 7: Documentation

Files: SPECIFICATIONS.md

Document the card shape { text, description?, deadline?, tags? }, deadline color thresholds, and tag format.
Dependencies: Steps 1–6.

Acceptance Criteria

Clicking a card opens a centered story-editor modal with Title, a large markdown Description editor (Write/Preview), Tags, and a Deadline picker; Save persists, Cancel/Esc discards.
A card round-trips description (markdown), deadline (ISO date), and tags (string array) through kanban.card.add / kanban.card.update, sync save/load, and server persistence.
The card body shows the title plus an intelligently truncated description (sentence/word-boundary cut with …), and shows more text when the card/column is larger.
Dragging a card across columns moves it and retains description/deadline/tags; intra-column reorder still works with variable-height cards.
A deadline shows a small dated badge: red when overdue, amber when due within the threshold, neutral otherwise.
Tags show as small chips fitted to card width.
openrpc.json KanbanCard schema and card.add / card.update params include description, deadline, tags; card.update documents merge semantics.
cargo test -p hero_whiteboard_server passes including new kanban tests.

Notes

The mindmap (mindmap.js + .mm-note-* CSS) is the closest existing reference for canvas markdown rendering and a DOM markdown popup; reuse its patterns for consistency, but the kanban editor is a larger centered modal (not the small note popup).
Kanban is rendered with Konva (canvas), so truncation/tags/deadline are drawn as Konva shapes/text with height measurement; the story editor is a DOM overlay.
Sync (sync.js) deep-clones the whole columns array both directions, so new card fields persist with no sync.js changes; server card_move moves whole card objects, so fields travel automatically.
Deadline thresholds: daysUntil < 0 → red #dc3545; 0..=DEADLINE_SOON_DAYS (2) → amber #f59e0b; else neutral. Single const at top of kanban.js.
Tags kept deliberately minimal (string[]), small chips.
openrpc.json, mindmap.rs, and some templates already have unrelated uncommitted changes on development; confine kanban edits to kanban regions.

## Implementation Spec for Issue #220 — Kanban improvements ### Objective Substantially improve the kanban board's visualization and usability. The card (the item dragged on the board) becomes a structured "story" with a title, a rich markdown description (can be large), simple tags, and a deadline. The current inline title-only edit is replaced by a dedicated **story editor modal**. On the board itself, the description is intelligently truncated to fit the card and scales with card/column size. Deadlines render in a status-aware color, tags render small. Cross-column drag-and-drop is verified/hardened so all fields move with the card. Every new field is reflected in OpenRPC. ### Requirements - Replace the weak inline edit with a proper **story editor**: a centered modal overlay with Title, a large markdown Description editor (textarea + live preview tabs), simple Tags, and a Deadline picker. Opens on card click. - Intelligent markdown truncation of the description in the card body, cutting on sentence/word boundaries, scaled to card/column size (bigger card = more text shown). - Verify and harden drag-and-drop of cards across columns/swimlanes; description/deadline/tags must survive the move. - Per-item `deadline`, shown in a distinct color (overdue = red, due-soon = amber, otherwise neutral). - Simple per-item `tags` (array of strings), shown small as chips. - All new card fields reflected in `openrpc.json` (KanbanCard schema + card.add / card.update params, with merge semantics). ### Card data model (stored in BoardObject.data.columns[].cards[] — free JSON, no SQL migration) - `text: string` (existing) — card title. - `description: string` (new) — markdown body, may be large; default empty. - `deadline: string` (new) — ISO `YYYY-MM-DD` or empty. - `tags: string[]` (new) — short labels; default empty. ### Files to Modify/Create - `crates/hero_whiteboard_server/src/handlers/kanban.rs` — `card_add` and `card_update` accept optional `description`, `deadline`, `tags`; `card_update` becomes a partial merge (only provided fields change); defensive validation; new unit tests. - `crates/hero_whiteboard_server/openrpc.json` — extend `KanbanCard` schema and `kanban.card.add` / `kanban.card.update` params with the new fields; document merge semantics. (Confine edits to kanban regions; file has unrelated uncommitted edits.) - `crates/hero_whiteboard_admin/static/web/js/whiteboard/markdown.js` — add `truncateForPreview(markdown, maxChars)` helper (sentence/word-boundary cut, trailing …); export it. - `crates/hero_whiteboard_admin/static/web/js/whiteboard/kanban.js` — render title + truncated description + tag chips + deadline badge on the Konva card; open the story editor modal on card click; harden cross-column DnD; preserve new fields on all mutations. - `crates/hero_whiteboard_admin/static/web/js/whiteboard/kanban_editor.js` (NEW) — the story editor modal: title input, tags editor, deadline picker, markdown textarea with Write/Preview tabs (live preview via WhiteboardMarkdown.toHtml), Save/Cancel; integrates with WhiteboardHistory snapshot + persist. - `crates/hero_whiteboard_admin/static/web/css/whiteboard.css` — story editor modal styles (centered overlay, dimmed backdrop) and card chip/badge styles. - `crates/hero_whiteboard_admin/templates/*` (whichever loads the kanban JS) — add a `<script>` tag for the new `kanban_editor.js`. - `SPECIFICATIONS.md` — document the new card shape and deadline color thresholds. ### Implementation Plan #### Step 1: Extend the card data model on the server Files: `crates/hero_whiteboard_server/src/handlers/kanban.rs` - `card_add`: read optional `description` (string), `deadline` (string), `tags` (string array) in addition to required `text`; include them in the pushed card object when present. - `card_update`: make `text`, `description`, `deadline`, `tags` all optional; write each to the existing card only when provided (merge, mirroring `column_update`). - `validate_columns`: still require `card["text"]` to be a string; when present, validate `description` is string, `deadline` is string, `tags` is an array of strings. - Add unit tests: partial `card_update` preserves other fields; `card_add` with all fields; `card_move` preserves `description`/`deadline`/`tags`. Dependencies: none. #### Step 2: Update the OpenRPC schema Files: `crates/hero_whiteboard_server/openrpc.json` - Extend `KanbanCard` schema: add `description` (string), `deadline` (string), `tags` (array of string) with descriptions. - `kanban.card.add` params: add optional `description`, `deadline`, `tags`. - `kanban.card.update` params: make `text` optional; add optional `description`, `deadline`, `tags`; update method description to state partial/merge semantics. - Note in `kanban.card.move` description that all card fields move with the card. - Keep edits confined to kanban regions to avoid clobbering unrelated uncommitted diffs. Dependencies: field names must match Step 1. #### Step 3: Markdown truncation helper Files: `crates/hero_whiteboard_admin/static/web/js/whiteboard/markdown.js` - Add `truncateForPreview(markdown, maxChars)`: strip heavy block syntax (code fences, images), cut at the last sentence boundary (. ! ?) at/under maxChars, else last word boundary, append … when truncated; keep light inline markdown. Export in the public API object. Dependencies: none (parallel with Steps 1–2). #### Step 4: Story editor modal (NEW) Files: `crates/hero_whiteboard_admin/static/web/js/whiteboard/kanban_editor.js`, `crates/hero_whiteboard_admin/static/web/css/whiteboard.css`, the kanban template - Build a centered modal overlay with dimmed backdrop: Title input, Tags editor (add/remove small chips), Deadline date input, and a large Description markdown editor with Write/Preview tabs (live preview rendered via `WhiteboardMarkdown.toHtml`). Footer: Cancel / Save. Esc cancels, Cmd/Ctrl+Enter saves. - Expose `WhiteboardKanbanEditor.open(card, onSave)` (or similar). On save it calls back with the edited `{text, description, deadline, tags}`; kanban.js wires that to snapshot + mutate + persist. - Add modal CSS (overlay, backdrop, tabs, chips). Add the `<script>` include for kanban_editor.js to the template that already loads kanban.js/markdown.js. Dependencies: Step 3 (preview reuses markdown renderer). #### Step 5: Render structured card body and open the editor on click Files: `crates/hero_whiteboard_admin/static/web/js/whiteboard/kanban.js` - Treat card as title (`text`) + optional `description`/`tags`/`deadline`. Compute card height to fit: title + truncated description block + tag chip row + deadline badge. Derive description char budget from column width and zoom so larger cards show more (uses `truncateForPreview`). - Render: bold title; truncated description (Konva text); small tag chips (rounded rect + ~9px text, clipped to width); deadline badge pill colored by threshold const `DEADLINE_SOON_DAYS = 2` (overdue red #dc3545, soon amber #f59e0b, else neutral). - Replace the inline title editor: clicking a card opens `WhiteboardKanbanEditor.open(...)`; on save do `WhiteboardHistory.snapshotBefore`, apply fields, `renderKanban`, `persistKanbanMutation`. (Keep a lightweight path for the existing menu actions.) Dependencies: Steps 3 and 4. #### Step 6: Harden cross-column drag-and-drop Files: `crates/hero_whiteboard_admin/static/web/js/whiteboard/kanban.js` - Verify the existing `cardGroup` dragstart/dragend logic still computes target column (pointer X) and insert index (Y) correctly with the new variable-height cards (reads `_colLayout`). Re-test intra-column reorder and cross-column moves with tall description/tag/deadline cards. - Confirm the spliced whole-card object carries all fields (it does). Ensure opening the editor (click) does not start a drag. Dependencies: Step 5 (variable heights). #### Step 7: Documentation Files: `SPECIFICATIONS.md` - Document the card shape `{ text, description?, deadline?, tags? }`, deadline color thresholds, and tag format. Dependencies: Steps 1–6. ### Acceptance Criteria - [ ] Clicking a card opens a centered story-editor modal with Title, a large markdown Description editor (Write/Preview), Tags, and a Deadline picker; Save persists, Cancel/Esc discards. - [ ] A card round-trips `description` (markdown), `deadline` (ISO date), and `tags` (string array) through `kanban.card.add` / `kanban.card.update`, sync save/load, and server persistence. - [ ] The card body shows the title plus an intelligently truncated description (sentence/word-boundary cut with …), and shows more text when the card/column is larger. - [ ] Dragging a card across columns moves it and retains description/deadline/tags; intra-column reorder still works with variable-height cards. - [ ] A deadline shows a small dated badge: red when overdue, amber when due within the threshold, neutral otherwise. - [ ] Tags show as small chips fitted to card width. - [ ] `openrpc.json` KanbanCard schema and card.add / card.update params include `description`, `deadline`, `tags`; card.update documents merge semantics. - [ ] `cargo test -p hero_whiteboard_server` passes including new kanban tests. ### Notes - The mindmap (`mindmap.js` + `.mm-note-*` CSS) is the closest existing reference for canvas markdown rendering and a DOM markdown popup; reuse its patterns for consistency, but the kanban editor is a larger centered modal (not the small note popup). - Kanban is rendered with Konva (canvas), so truncation/tags/deadline are drawn as Konva shapes/text with height measurement; the story editor is a DOM overlay. - Sync (`sync.js`) deep-clones the whole columns array both directions, so new card fields persist with no sync.js changes; server `card_move` moves whole card objects, so fields travel automatically. - Deadline thresholds: daysUntil < 0 → red #dc3545; 0..=DEADLINE_SOON_DAYS (2) → amber #f59e0b; else neutral. Single const at top of kanban.js. - Tags kept deliberately minimal (string[]), small chips. - `openrpc.json`, `mindmap.rs`, and some templates already have unrelated uncommitted changes on `development`; confine kanban edits to kanban regions.

despiegk commented

2026-05-28 10:02:26 +00:00

Author

Owner

Test Results

Total: 28
Passed: 28
Failed: 0

cargo test -p hero_whiteboard_server (finished in 2m 45s build + 0.20s run).

New kanban handler tests for #220:

card_add_stores_description_deadline_and_tags — passed
card_update_partial_preserves_other_fields — passed
card_move_preserves_rich_fields — passed

All pre-existing kanban, mindmap, and object handler tests continue to pass.

Frontend JS syntax check (node --check) on kanban.js, kanban_editor.js, markdown.js: passed.

## Test Results - Total: 28 - Passed: 28 - Failed: 0 `cargo test -p hero_whiteboard_server` (finished in 2m 45s build + 0.20s run). New kanban handler tests for #220: - `card_add_stores_description_deadline_and_tags` — passed - `card_update_partial_preserves_other_fields` — passed - `card_move_preserves_rich_fields` — passed All pre-existing kanban, mindmap, and object handler tests continue to pass. Frontend JS syntax check (`node --check`) on kanban.js, kanban_editor.js, markdown.js: passed.