alexei.dolgolyov
a6b09aae9c
Replace the disconnected board edit page with inline editing directly on the board view. Toggle with Ctrl+E or the Edit button. Features: - Edit mode store with changeset accumulation and batch save - Floating toolbar (save, discard, add section, board settings, exit) - Widget hover overlays with edit/delete/drag controls - Type-specific widget config panels for all 14 widget types - Section inline editing (title, icon picker, delete) - "+" buttons for adding widgets and sections inline - Section-level drag-and-drop reordering via svelte-dnd-action - Batch save API endpoint (single Prisma transaction) - Board properties side panel with live theme/wallpaper preview - Modal widget type picker with search filtering - Icon picker component with visual grid and search - Confirmation dialog modal for all destructive actions - HTML format support for Note widget (in addition to markdown/text) - Full i18n support (en + ru) for all new UI strings - Legacy edit page banner linking to new inline mode
49 lines
2.0 KiB
Markdown
49 lines
2.0 KiB
Markdown
# Phase 7: Drag-and-Drop Enhancements
|
|
|
|
**Status:** ⬜ Not Started
|
|
**Parent plan:** [PLAN.md](./PLAN.md)
|
|
**Domain:** frontend
|
|
|
|
## Objective
|
|
Enhance drag-and-drop to support cross-section widget moves, section reordering, and visual drop zone indicators — all gated behind edit mode.
|
|
|
|
## Tasks
|
|
|
|
- [ ] Enable widget drag-and-drop ONLY in edit mode (disable in view mode)
|
|
- [ ] Cross-section widget drag: allow dragging a widget from one section to another
|
|
- [ ] Visual drop zones: highlight target section/position when dragging
|
|
- [ ] Section-level drag-and-drop with visual indicators (reorder sections)
|
|
- [ ] Drag handles only visible in edit mode
|
|
- [ ] Track all reorder/move changes in edit mode changeset
|
|
- [ ] Handle edge cases: dragging to empty sections, dragging last widget out of section
|
|
- [ ] Smooth animations during drag operations
|
|
|
|
## Files to Modify/Create
|
|
- `src/lib/components/widget/WidgetGrid.svelte` — enable DnD only in edit mode, cross-section support
|
|
- `src/lib/components/board/Board.svelte` — section-level DnD in edit mode
|
|
- `src/lib/components/section/Section.svelte` — drop zone indicators
|
|
- `src/lib/components/widget/WidgetEditOverlay.svelte` — drag handle activation
|
|
|
|
## Acceptance Criteria
|
|
- Widgets can be dragged between sections in edit mode
|
|
- Sections can be reordered by dragging in edit mode
|
|
- Drop zones highlight during drag
|
|
- No drag-and-drop functionality in view mode
|
|
- All moves tracked in changeset (not persisted until Save)
|
|
- Animations are smooth
|
|
|
|
## Notes
|
|
- `svelte-dnd-action` supports cross-container DnD via shared `dropTargetStyle`
|
|
- Need to handle `sectionId` changes when widgets move between sections
|
|
- Existing DraggableBoard/DraggableSection are used on edit page — may adapt or replace
|
|
|
|
## 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 after completing this phase -->
|