feat(kanban): inline task CRUD + column management + drop undo #112

Merged

zaelgohary merged 7 commits from fix/kanban_round2 into development 2026-04-22 08:38:50 +00:00

Conversation 0 Commits 7 Files changed 7 +653 -49

zaelgohary commented 2026-04-21 21:57:55 +00:00

Member

Copy link

Summary

Kanban was drag-drop-only: users had to leave the board to add, edit, or delete tasks, and there was no way to manage swimlanes through the UI. This branch adds per-column inline CRUD, column add/remove, and a drop-undo banner; fixes a drop-target highlight that burnt in on every traversed column; adds drag-autoscroll so tasks can reach off-viewport columns; and opens a task detail dialog when a card is clicked.

Related Issues

Closes #113
Closes #114
Closes #120
Closes #126

Changes

• archipelagos/productivity/kanban/src/services/kanban_service.rs
  • create_task(project_sid, swimlane, title), delete_task(sid) (tolerates the SDK invalid type: boolean response on delete), save_project(project)
• archipelagos/productivity/kanban/src/views/kanban_card.rs
  • optional on_delete prop renders a trash button; tags keyed by enumerate index
  • optional on_click prop raises the full Task to the board so it can open a detail dialog
• archipelagos/productivity/kanban/src/views/kanban_column.rs
  • optional on_add_task / on_delete_task / on_remove_swimlane / on_task_click props
  • inline "+ Add task" quick-form (Enter submits, Esc cancels)
  • × button in the column header when removal is allowed
  • drop-target hover driven by a board-level drag_hover: Signal<Option<String>> so only one column is highlighted at a time
  • literal colors on both branches of border/background style to avoid a Dioxus 0.7 inline-style diff quirk that drops literal ↔ var() transitions
• archipelagos/productivity/kanban/src/views/board_view.rs
  • wire create/delete-task + add/remove swimlane with ConfirmDialog guards
  • new AddColumnRail component at the far right of the board
  • drop-undo banner capturing the previous swimlane so a misdrop can be reverted
  • window-level dragend/drop listener clears drag_hover, installed via use_hook + use_drop so navigating between projects does not leak listeners firing on freed signals
  • drag-autoscroll on the board scroll container: onmounted captures the element ref, ondragover sets a direction signal when the cursor is within 100px of an edge, and a setInterval(16ms) tick scrolls the container ±10px per frame so motion continues while the cursor is held still at the edge
  • task detail Dialog wired to a detail_task: Signal<Option<Task>> that opens on card click and closes on overlay click
• archipelagos/productivity/kanban/src/views/inline_quick_form.rs (new)
  • shared single-input form with Enter-submit / Esc-cancel, used by the quick-add-task and add-column rail
• archipelagos/productivity/kanban/Cargo.toml
  • adds chrono workspace dep for the detail dialog's date formatting

Test Results

• cargo check --workspace: pass
• cargo test --workspace: pass
• cargo clippy --workspace -- -D warnings: pass
• cargo fmt --check on changed files: pass
• dx build --package hero_os_app --web --features web: pass, deployed to the shared test instance
• Playwright specs in hero_os tests/e2e/kanban.spec.ts cover parallel fan-out, drag-highlight, autoscroll, and card-click flows

UI-heavy change — also covered by manual verification below.

Manual verification

• On a project board, click "+ Add task" under a column → type title → Enter creates the card in that column
• Esc while typing cancels the quick-form
• Click the trash icon on a card → ConfirmDialog appears, Delete removes the card
• Click the × in a column header → ConfirmDialog appears, confirm removes the column
• "+ Add column" rail at the far right → type a name → Enter appends a new empty column
• Drag a task to a different column → "Moved task to . Undo / Dismiss" banner appears → Undo reverts the move
• Drag a task across several columns → only the column currently under the cursor shows the dashed-blue drop-target border; previously traversed columns return to the default border
• On a board wider than the viewport, drag a task near the right edge → the board auto-scrolls right, revealing off-screen columns; holding the cursor still at the edge continues scrolling; dragging back near the left edge scrolls left
• Click a card body (not the trash icon) → a dialog opens with the task title, description, status, swimlane, priority, due date, and tags; click the overlay outside the dialog to close
• Regression: existing drag-drop still works, empty columns still show the "Drop tasks here" placeholder

## Summary Kanban was drag-drop-only: users had to leave the board to add, edit, or delete tasks, and there was no way to manage swimlanes through the UI. This branch adds per-column inline CRUD, column add/remove, and a drop-undo banner; fixes a drop-target highlight that burnt in on every traversed column; adds drag-autoscroll so tasks can reach off-viewport columns; and opens a task detail dialog when a card is clicked. ## Related Issues Closes #113 Closes #114 Closes #120 Closes #126 ## Changes - `archipelagos/productivity/kanban/src/services/kanban_service.rs` - `create_task(project_sid, swimlane, title)`, `delete_task(sid)` (tolerates the SDK `invalid type: boolean` response on delete), `save_project(project)` - `archipelagos/productivity/kanban/src/views/kanban_card.rs` - optional `on_delete` prop renders a trash button; tags keyed by enumerate index - optional `on_click` prop raises the full `Task` to the board so it can open a detail dialog - `archipelagos/productivity/kanban/src/views/kanban_column.rs` - optional `on_add_task` / `on_delete_task` / `on_remove_swimlane` / `on_task_click` props - inline "+ Add task" quick-form (Enter submits, Esc cancels) - × button in the column header when removal is allowed - drop-target hover driven by a board-level `drag_hover: Signal<Option<String>>` so only one column is highlighted at a time - literal colors on both branches of border/background style to avoid a Dioxus 0.7 inline-style diff quirk that drops `literal ↔ var()` transitions - `archipelagos/productivity/kanban/src/views/board_view.rs` - wire create/delete-task + add/remove swimlane with `ConfirmDialog` guards - new `AddColumnRail` component at the far right of the board - drop-undo banner capturing the previous swimlane so a misdrop can be reverted - window-level `dragend`/`drop` listener clears `drag_hover`, installed via `use_hook` + `use_drop` so navigating between projects does not leak listeners firing on freed signals - drag-autoscroll on the board scroll container: `onmounted` captures the element ref, `ondragover` sets a direction signal when the cursor is within 100px of an edge, and a `setInterval(16ms)` tick scrolls the container ±10px per frame so motion continues while the cursor is held still at the edge - task detail `Dialog` wired to a `detail_task: Signal<Option<Task>>` that opens on card click and closes on overlay click - `archipelagos/productivity/kanban/src/views/inline_quick_form.rs` (new) - shared single-input form with Enter-submit / Esc-cancel, used by the quick-add-task and add-column rail - `archipelagos/productivity/kanban/Cargo.toml` - adds `chrono` workspace dep for the detail dialog's date formatting ## Test Results - `cargo check --workspace`: pass - `cargo test --workspace`: pass - `cargo clippy --workspace -- -D warnings`: pass - `cargo fmt --check` on changed files: pass - `dx build --package hero_os_app --web --features web`: pass, deployed to the shared test instance - Playwright specs in hero_os `tests/e2e/kanban.spec.ts` cover parallel fan-out, drag-highlight, autoscroll, and card-click flows UI-heavy change — also covered by manual verification below. ## Manual verification - [ ] On a project board, click "+ Add task" under a column → type title → Enter creates the card in that column - [ ] Esc while typing cancels the quick-form - [ ] Click the trash icon on a card → ConfirmDialog appears, Delete removes the card - [ ] Click the × in a column header → ConfirmDialog appears, confirm removes the column - [ ] "+ Add column" rail at the far right → type a name → Enter appends a new empty column - [ ] Drag a task to a different column → "Moved task to <col>. Undo / Dismiss" banner appears → Undo reverts the move - [ ] Drag a task across several columns → only the column currently under the cursor shows the dashed-blue drop-target border; previously traversed columns return to the default border - [ ] On a board wider than the viewport, drag a task near the right edge → the board auto-scrolls right, revealing off-screen columns; holding the cursor still at the edge continues scrolling; dragging back near the left edge scrolls left - [ ] Click a card body (not the trash icon) → a dialog opens with the task title, description, status, swimlane, priority, due date, and tags; click the overlay outside the dialog to close - [ ] Regression: existing drag-drop still works, empty columns still show the "Drop tasks here" placeholder

zaelgohary self-assigned this 2026-04-21 21:57:55 +00:00

zaelgohary added 1 commit 2026-04-21 21:57:55 +00:00

feat(kanban): inline task CRUD + column management + drop undo ... fa68cb0d34

- KanbanColumn: + Add task quick-form per column (enter/escape keyboard),
  header × removes the column (with ConfirmDialog on the board)
- KanbanCard: trash button on each card, ConfirmDialog before delete; tags
  now keyed by index (same dup-key class fixed in #101 for other islands)
- BoardView: Add-column rail at the far right, drop-undo banner with
  Undo/Dismiss that reverts the swimlane move
- kanban_service: new create_task, delete_task (SDK #29 tolerant),
  save_project for persisting swimlane add/remove

zaelgohary added 3 commits 2026-04-22 05:31:18 +00:00

simplify(kanban): shared InlineQuickForm, TaskMove struct, drop redundant task_get ... d238d5a95b

Drops auto-dismiss-via-use_effect + sleep_ms helper: that combo tripped a
std::time::SystemTime::now() path on wasm32-unknown-unknown (visible as
time not implemented on this platform + subsequent unreachable traps
during initial render). The Undo / Dismiss buttons cover the UX.

fix(kanban): tighten SDK-29 match + drop dead on_task_click ... d0b7b37cf8

- delete_task: match ClientError::Deserialization variant with
  starts_with prefix instead of substring contains(); stops swallowing
  unrelated errors that happen to contain the phrase
- board/column/card: remove the on_task_click handler (was a dead
  tracing::info!); card is still draggable, clicks do nothing until a
  real navigation hook is wired

merge development d472902bdc

zaelgohary added 1 commit 2026-04-22 06:45:50 +00:00

fix(kanban): drag highlight sticking on columns ... 75b4d482e4

- Lift drop-hover to board-level drag_hover: Option<String> so only one
  column is active at a time; per-column boolean was unreliable because
  dragleave fires when the cursor crosses child nodes.
- Window dragend/drop listener clears the signal; attached once with
  use_hook and detached on unmount with use_drop so navigating between
  projects does not accumulate listeners firing on freed signals.
- Use literal colors on both branches of the column styles: Dioxus 0.7
  inline-style diff drops updates when transitioning literal <-> var().

zaelgohary added 1 commit 2026-04-22 07:04:10 +00:00

fix(kanban): autoscroll board horizontally during drag ... 046d7ecfa7

HTML5 drag-drop does not autoscroll overflowing containers, so columns
outside the viewport were unreachable. Capture the board scroll
container on mount, detect cursor proximity to left/right edges in
ondragover, and drive scrolling from a ~60fps setInterval tick so
motion continues even when the cursor is held still at the edge.

The interval handle is cleared in use_drop. The existing window
dragend/drop listener also resets the scroll direction to idle.

zaelgohary added 1 commit 2026-04-22 07:53:59 +00:00

fix(kanban): open task detail dialog on card click ... d81e485b78

Clicking a KanbanCard did nothing — users had to leave the board to
view a task. Wire an on_click prop on KanbanCard and KanbanColumn that
raises the task to the board, which opens a core Dialog showing the
task description, status, swimlane, priority, due date, and tags.

The dialog closes on overlay click. The card delete button continues
to stop propagation so it does not also open the dialog.

zaelgohary merged commit fc90b8577e into development 2026-04-22 08:38:50 +00:00

zaelgohary deleted branch fix/kanban_round2 2026-04-22 08:38:51 +00:00

zaelgohary referenced this pull request from a commit 2026-04-22 08:38:52 +00:00

Merge pull request 'feat(kanban): inline task CRUD + column management + drop undo' (#112) from fix/kanban_round2 into development

Sign in to join this conversation.

Reviewers

No reviewers

Labels

Clear labels   

prio_critical

  

prio_low

  

type_bug

  

type_contact

  

type_issue

  

type_lead

  

type_question

  

type_story

  

type_task

No labels

prio_critical

prio_low

type_bug

type_contact

type_issue

type_lead

type_question

type_story

type_task

Milestone

Clear milestone

No items

No milestone

Projects

Clear projects

No items

No project

Assignees

Clear assignees

No assignees

zaelgohary

1 participant

Notifications

Subscribe

Due date

The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference

lhumina_code/hero_archipelagos!112

No description provided.