feat(web): add kanban board page with drag-and-drop #478

jason.woltje · 2026-02-23T04:26:11Z

jason.woltje commented

2026-02-23 04:26:11 +00:00

Summary

Add kanban board page at /kanban with 5 drag-and-drop status columns (To Do, In Progress, Paused, Done, Archived)
Install @hello-pangea/dnd (maintained fork of react-beautiful-dnd) for drag-and-drop
Add updateTask() to tasks API client for PATCH operations
Optimistic status updates with API revert on failure

Details

Columns mapped to TaskStatus enum with color-coded accent borders
Task cards show title, priority badge (High/Medium/Low), and truncated description
Loading (MosaicSpinner), error with retry, and empty states
Responsive: horizontal scroll with min-width 280px per column
All styling uses CSS design tokens (no hardcoded colors)

Test Plan

Verify /kanban page loads without errors
Verify tasks are grouped by status into correct columns
Verify drag-and-drop moves tasks between columns
Verify optimistic update reverts on API failure
Verify light/dark theme support
Verify responsive layout at mobile breakpoints

Refs #468

## Summary - Add kanban board page at /kanban with 5 drag-and-drop status columns (To Do, In Progress, Paused, Done, Archived) - Install @hello-pangea/dnd (maintained fork of react-beautiful-dnd) for drag-and-drop - Add updateTask() to tasks API client for PATCH operations - Optimistic status updates with API revert on failure ## Details - Columns mapped to TaskStatus enum with color-coded accent borders - Task cards show title, priority badge (High/Medium/Low), and truncated description - Loading (MosaicSpinner), error with retry, and empty states - Responsive: horizontal scroll with min-width 280px per column - All styling uses CSS design tokens (no hardcoded colors) ## Test Plan - [ ] Verify /kanban page loads without errors - [ ] Verify tasks are grouped by status into correct columns - [ ] Verify drag-and-drop moves tasks between columns - [ ] Verify optimistic update reverts on API failure - [ ] Verify light/dark theme support - [ ] Verify responsive layout at mobile breakpoints Refs #468

jason.woltje added 1 commit 2026-02-23 04:26:11 +00:00

feat(web): add kanban board page with drag-and-drop

ci/woodpecker/push/orchestrator Pipeline was successful

Details

ci/woodpecker/push/web Pipeline failed

Details

ci/woodpecker/push/api Pipeline was successful

Details

0b1b587c3c

- Add kanban board page at /kanban with 5 status columns
  (To Do, In Progress, Paused, Done, Archived)
- Use @hello-pangea/dnd for drag-and-drop between columns
- Optimistic status update on drop with API revert on failure
- Add updateTask() to tasks API client
- Task cards show title, priority badge, and truncated description
- Column headers with colored accent borders and task count badges
- Responsive: horizontal scroll with min-width 280px per column
- Loading (MosaicSpinner), error, and empty states
- All design tokens from CSS custom properties

Refs #468

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

jason.woltje merged commit 172ed1d40f into main

2026-02-23 04:26:26 +00:00

jason.woltje referenced this issue from a commit

2026-02-23 04:26:27 +00:00

feat(web): add kanban board page with drag-and-drop (#478)

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: mosaic/stack#478