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
2026-04-03 00:01:29 +03:00
parent d8f89c65dc
commit a6b09aae9c
35 changed files with 3148 additions and 51 deletions
@@ -0,0 +1,54 @@
+# Phase 9: Board Properties Quick Panel
+
+**Status:** ⬜ Not Started
+**Parent plan:** [PLAN.md](./PLAN.md)
+**Domain:** frontend
+
+## Objective
+Create a side panel / modal accessible from the edit toolbar's gear icon for editing board-level properties with live preview.
+
+## Tasks
+
+- [ ] Create `src/lib/components/board/BoardPropertiesPanel.svelte`
+- [ ] Panel opens from toolbar gear icon as a slide-out side panel (right side)
+- [ ] Board properties: name, description, icon
+- [ ] Theme settings: themeHue slider (0-360), themeSaturation slider (0-100)
+- [ ] Background type selector: mesh, particles, aurora, wallpaper, none
+- [ ] Wallpaper settings: upload, URL input, blur slider, overlay opacity slider
+- [ ] Card size selector: compact, medium, large
+- [ ] Custom CSS editor (textarea or code editor)
+- [ ] Guest access toggle
+- [ ] All changes preview live on the board behind the panel
+- [ ] Changes stored in edit mode changeset (boardUpdates)
+- [ ] Close panel button, Escape to close
+- [ ] Panel has its own scroll if content overflows
+
+## Files to Modify/Create
+- `src/lib/components/board/BoardPropertiesPanel.svelte` — new
+- `src/lib/components/board/EditToolbar.svelte` — wire gear icon to open panel
+- `src/routes/boards/[boardId]/+page.svelte` — mount panel, apply live preview overrides
+- `src/lib/components/board/BoardThemeProvider.svelte` — support preview overrides
+
+## Acceptance Criteria
+- Gear icon opens the properties panel
+- All board-level settings are editable
+- Changes preview live on the board
+- Wallpaper upload works with live preview
+- Theme sliders update board colors in real-time
+- Changes accumulate in changeset
+- Panel closes on button click or Escape
+
+## Notes
+- Live preview means overriding BoardThemeProvider props with unsaved values
+- Wallpaper upload may need special handling (uploaded immediately to server, URL stored in changeset)
+- Custom CSS injection should be sandboxed to board scope
+
+## 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 -->