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,47 @@
|
||||
# Phase 5: Section Inline Editing
|
||||
|
||||
**Status:** ⬜ Not Started
|
||||
**Parent plan:** [PLAN.md](./PLAN.md)
|
||||
**Domain:** frontend
|
||||
|
||||
## Objective
|
||||
Make section headers editable inline in edit mode — title, icon, card size, expand default, delete.
|
||||
|
||||
## Tasks
|
||||
|
||||
- [ ] Modify `SectionHeader.svelte` to show edit controls when edit mode is active
|
||||
- [ ] Pencil icon on section header — click to toggle inline editing of title and icon
|
||||
- [ ] Inline title editing: click title text to replace with input field, Enter to confirm, Escape to cancel
|
||||
- [ ] Icon picker for section icon (reuse `AppIconPicker` or simplified version)
|
||||
- [ ] Card size dropdown override (compact/medium/large/inherit)
|
||||
- [ ] Toggle for `isExpandedByDefault`
|
||||
- [ ] Delete section button with confirmation ("Delete section 'X' and its N widgets?")
|
||||
- [ ] Drag handle for section reordering (left side of header, visible only in edit mode)
|
||||
- [ ] All changes stored in edit mode changeset
|
||||
|
||||
## Files to Modify/Create
|
||||
- `src/lib/components/section/SectionHeader.svelte` — add edit controls
|
||||
- `src/lib/components/section/Section.svelte` — pass edit mode state
|
||||
- `src/lib/components/section/SectionEditControls.svelte` — new, extracted edit controls
|
||||
|
||||
## Acceptance Criteria
|
||||
- Section title is editable inline in edit mode
|
||||
- Section icon is changeable via picker
|
||||
- Card size override works
|
||||
- Delete shows confirmation with widget count
|
||||
- Changes accumulate in changeset (not persisted until Save)
|
||||
- Controls hidden when not in edit mode
|
||||
|
||||
## Notes
|
||||
- Section drag-and-drop reorder is handled further in Phase 7
|
||||
- Delete confirmation should show actual widget count from current state
|
||||
|
||||
## 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