stack/docs/scratchpads/468-kanban-page.md

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