web-app-launcher/plans/phase-2-enhanced-features/phase-2-dnd.md

Phase 2: Drag-and-Drop Reordering

Status: ⬜ Not Started Parent plan: 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