Jason Woltje
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>
36 lines
1.1 KiB
Markdown
36 lines
1.1 KiB
Markdown
# 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
|