56 lines
2.5 KiB
Markdown
56 lines
2.5 KiB
Markdown
# Phase 2: Drag-and-Drop Reordering
|
|
|
|
**Status:** ⬜ Not Started
|
|
**Parent plan:** [PLAN.md](./PLAN.md)
|
|
**Domain:** frontend
|
|
|
|
## Objective
|
|
Add drag-and-drop reordering for sections within boards and widgets within/across sections using svelte-dnd-action.
|
|
|
|
## Tasks
|
|
|
|
- [ ] Task 1: Install `svelte-dnd-action` package
|
|
- [ ] Task 2: Create `src/lib/components/board/DraggableBoard.svelte` — board with draggable sections
|
|
- [ ] Task 3: Create `src/lib/components/section/DraggableSection.svelte` — section with draggable widgets
|
|
- [ ] Task 4: Create `src/lib/components/widget/DraggableWidget.svelte` — draggable widget wrapper
|
|
- [ ] Task 5: Update `src/routes/boards/[boardId]/edit/+page.svelte` — replace static editor with DnD editor
|
|
- [ ] Task 6: Create `src/routes/api/boards/[id]/reorder/+server.ts` — API to persist section order changes
|
|
- [ ] Task 7: Create `src/routes/api/boards/[id]/sections/[sid]/reorder/+server.ts` — API to persist widget order changes
|
|
- [ ] Task 8: Update `src/lib/server/services/boardService.ts` — add `reorderSections()` and `reorderWidgets()` functions
|
|
- [ ] Task 9: Add visual drag handles and drop zone indicators
|
|
- [ ] Task 10: Support moving widgets between sections via cross-section DnD
|
|
|
|
## Files to Modify/Create
|
|
- `package.json` — add svelte-dnd-action
|
|
- `src/lib/components/board/DraggableBoard.svelte` — NEW
|
|
- `src/lib/components/section/DraggableSection.svelte` — NEW
|
|
- `src/lib/components/widget/DraggableWidget.svelte` — NEW
|
|
- `src/routes/boards/[boardId]/edit/+page.svelte` — MODIFY
|
|
- `src/routes/api/boards/[id]/reorder/+server.ts` — NEW
|
|
- `src/routes/api/boards/[id]/sections/[sid]/reorder/+server.ts` — NEW
|
|
- `src/lib/server/services/boardService.ts` — MODIFY
|
|
|
|
## Acceptance Criteria
|
|
- Sections can be reordered via drag-and-drop in the board editor
|
|
- Widgets can be reordered within a section
|
|
- Widgets can be moved between sections
|
|
- Order changes persist via API calls
|
|
- Drag handles are visible and accessible
|
|
- Drop zones are visually indicated during drag
|
|
|
|
## Notes
|
|
- `svelte-dnd-action` works well with Svelte 5
|
|
- Use optimistic updates — reorder in UI immediately, sync to server in background
|
|
- Reorder APIs should accept an array of IDs in the new order
|
|
- ⚠️ Big Bang: may need integration fixes in Phase 5
|
|
|
|
## Review Checklist
|
|
- [ ] All tasks completed
|
|
- [ ] Code follows project conventions
|
|
- [ ] No unintended side effects
|
|
- [ ] Build passes
|
|
- [ ] Tests pass (new + existing)
|
|
|
|
## Handoff to Next Phase
|
|
<!-- Filled in by the implementation agent after completing this phase. -->
|