feat(web): add kanban board page with drag-and-drop (#478)
Some checks failed
ci/woodpecker/push/web Pipeline failed
ci/woodpecker/push/orchestrator Pipeline was successful
ci/woodpecker/push/api Pipeline was successful

Co-authored-by: Jason Woltje <jason@diversecanvas.com>
Co-committed-by: Jason Woltje <jason@diversecanvas.com>
This commit was merged in pull request #478.
This commit is contained in:
2026-02-23 04:26:25 +00:00
committed by jason.woltje
parent ee2ddfc8b8
commit 172ed1d40f
5 changed files with 566 additions and 5 deletions

View File

@@ -0,0 +1,35 @@
# PG-PAGE-003: Kanban Board Page
## Task
Build Kanban board page with drag-and-drop columns mapped to TaskStatus.
## Issue
Refs #468
## Files Changed
- `apps/web/src/app/(authenticated)/kanban/page.tsx` (new)
- `apps/web/src/lib/api/tasks.ts` (added `updateTask`)
- `package.json` / `pnpm-lock.yaml` (added `@hello-pangea/dnd`)
## Design Decisions
- Used `@hello-pangea/dnd` (maintained fork of react-beautiful-dnd) for drag-and-drop
- 5 columns mapped to TaskStatus enum: NOT_STARTED, IN_PROGRESS, PAUSED, COMPLETED, ARCHIVED
- Optimistic update pattern: move card immediately, revert by re-fetching on API failure
- Priority badge always shown (field is non-optional in Task type)
- Column count badge uses `color-mix()` for transparent accent backgrounds
- Horizontal scroll on mobile with `overflow-x: auto` and `min-width: 280px` per column
## Verification
- Lint: clean (my files pass, pre-existing errors in runner-jobs.ts not my scope)
- Build: `next build` succeeds, `/kanban` route present in output
- TypeScript: no type errors
- Design tokens: all colors from CSS custom properties, no hardcoded colors
## Status
Complete