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
2.1 KiB
2.1 KiB
Phase 9: Board Properties Quick Panel
Status: ⬜ Not Started Parent plan: 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— newsrc/lib/components/board/EditToolbar.svelte— wire gear icon to open panelsrc/routes/boards/[boardId]/+page.svelte— mount panel, apply live preview overridessrc/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)