feat(inline-edit): add WYSIWYG inline dashboard editing mode
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
This commit is contained in:
@@ -0,0 +1,48 @@
|
||||
# Phase 3: Widget Edit Overlay
|
||||
|
||||
**Status:** ⬜ Not Started
|
||||
**Parent plan:** [PLAN.md](./PLAN.md)
|
||||
**Domain:** frontend
|
||||
|
||||
## Objective
|
||||
Add hover overlays to every widget when in edit mode, showing edit/delete/drag controls without obscuring the widget content.
|
||||
|
||||
## Tasks
|
||||
|
||||
- [ ] Create `src/lib/components/widget/WidgetEditOverlay.svelte`
|
||||
- [ ] Overlay appears on hover over a widget in edit mode
|
||||
- [ ] Controls: pencil icon (top-right), trash icon (top-right, secondary), drag handle (top-left)
|
||||
- [ ] Semi-transparent backdrop on hover (e.g., bg-black/5)
|
||||
- [ ] Pencil click emits `onEdit(widgetId)` event
|
||||
- [ ] Trash click shows inline confirmation ("Delete?" with Yes/No), then emits `onDelete(widgetId)`
|
||||
- [ ] Drag handle integrated with svelte-dnd-action (prepared for Phase 7)
|
||||
- [ ] Wrap each widget in WidgetEditOverlay in `WidgetGrid.svelte` when edit mode is active
|
||||
- [ ] Overlay transitions: fade in on hover, fade out on leave
|
||||
- [ ] Overlay does NOT block widget interaction when not hovered (pointer-events)
|
||||
|
||||
## Files to Modify/Create
|
||||
- `src/lib/components/widget/WidgetEditOverlay.svelte` — new component
|
||||
- `src/lib/components/widget/WidgetGrid.svelte` — wrap widgets conditionally
|
||||
|
||||
## Acceptance Criteria
|
||||
- Hovering over a widget in edit mode shows the overlay
|
||||
- Overlay has pencil, trash, and drag handle controls
|
||||
- Controls are clickable and emit correct events
|
||||
- Overlay does not appear when NOT in edit mode
|
||||
- Widget content remains visible through the overlay
|
||||
|
||||
## Notes
|
||||
- Keep overlay minimal — don't overwhelm the widget visually
|
||||
- Trash confirmation should be inline (not a browser confirm dialog)
|
||||
- The actual edit panel opening (pencil) is Phase 4
|
||||
- The actual delete logic is Phase 8
|
||||
|
||||
## 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 -->
|
||||
Reference in New Issue
Block a user