mosaic/stack
1
0
Fork 0
Code Issues 10 Pull Requests Actions Packages Projects Releases 2 Wiki Activity
Files
0b1b587c3c152662a026718b310068bfe6198528
stack/docs/scratchpads/468-kanban-page.md
Jason Woltje 0b1b587c3c
Some checks failed
ci/woodpecker/push/orchestrator Pipeline was successful
Details
ci/woodpecker/push/web Pipeline failed
Details
ci/woodpecker/push/api Pipeline was successful
Details
feat(web): add kanban board page with drag-and-drop 
- 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>
2026-02-22 22:25:14 -06:00

1.1 KiB
Raw Blame History

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

Reference in New Issue View Git Blame Copy Permalink