chore: add plan files for Phase 2 enhanced features

2026-03-24 22:44:31 +03:00
parent c4754f23a5
commit ae114ab9ce
8 changed files with 407 additions and 0 deletions
@@ -0,0 +1,55 @@
+# 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. -->