alexei.dolgolyov
1c0a7cb850
Phase 4 — New Widget Types: - Clock/Weather, System Stats, RSS/Feed, Calendar, Markdown, Metric/Counter, Link Group, Camera/Stream widgets - Backend services with caching for each data source - Full creation form with dynamic config fields per type Phase 5 — Visual & Styling Enhancements: - Glassmorphism card style (solid/glass/outline) - Board-level themes with per-board hue/saturation - Animated SVG status rings replacing static dots - Card size options (compact/medium/large) - Custom CSS injection (admin + per-board, sanitized) - Wallpaper backgrounds with blur/overlay/parallax Phase 6 — Functional Features: - Favorites bar with drag-and-drop reordering - Recent apps tracking with privacy toggle - Uptime dashboard page (/status, guest-accessible) - Notifications system (Discord/Slack/Telegram/HTTP webhooks) - App tags with filtering in board view - Multi-URL app cards with expandable sub-links - Personal API tokens with scoped permissions - Audit log with retention and admin viewer Phase 7 — Quality of Life: - Onboarding wizard (5-step first-launch setup) - App URL health preview with favicon/title detection - Board templates (4 built-in + custom import/export) - Keyboard shortcut overlay (j/k nav, 1-9 boards, ? help) 212 files changed, 15641 insertions, 980 deletions. Build, lint, type check, and 222 tests all pass.
3.4 KiB
3.4 KiB
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-actionpackage - 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— addreorderSections()andreorderWidgets()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-actionsrc/lib/components/board/DraggableBoard.svelte— NEWsrc/lib/components/section/DraggableSection.svelte— NEWsrc/lib/components/widget/DraggableWidget.svelte— NEWsrc/routes/boards/[boardId]/edit/+page.svelte— MODIFYsrc/routes/api/boards/[id]/reorder/+server.ts— NEWsrc/routes/api/boards/[id]/sections/[sid]/reorder/+server.ts— NEWsrc/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-actionworks 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-actioninstalled and integrated with Svelte 5 (use:dndzone,onconsider/onfinalizeevent pattern)- Board editor (
/boards/[boardId]/edit) now usesDraggableBoard>DraggableSection>DraggableWidgetcomponent 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.tsextended withreorderSections(),reorderWidgets(), andmoveWidget()— all using$transactionfor 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