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

Phase 2: Drag-and-Drop Reordering

Status: Done 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 6

Review Checklist

• All tasks completed
• Code follows project conventions
• No unintended side effects
• Build passes
• Tests pass (new + existing)

Handoff to Next Phase

Phase 2 DnD is complete. Key additions:

• svelte-dnd-action installed and integrated with Svelte 5 (use:dndzone, onconsider/onfinalize event pattern)
• Board editor (/boards/[boardId]/edit) now uses DraggableBoard > DraggableSection > DraggableWidget component hierarchy
• Sections support drag-and-drop reordering with grip-dot handles; widgets support reordering within and across sections
• Two new PUT API endpoints: /api/boards/[id]/reorder (section order) and /api/boards/[id]/sections/[sid]/reorder (widget order)
• boardService.ts extended with reorderSections(), reorderWidgets(), and moveWidget() — all using $transaction for atomicity
• Edit page uses invalidateAll() for server actions (add/delete) while DnD reorder uses optimistic fetch calls
• Drop zones use dashed borders; drag handles use grip-dot SVG icons with hover opacity transitions
• No changes to auth, admin, or view-mode components