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
1.9 KiB
1.9 KiB
Phase 2: Floating Edit Toolbar
Status: ⬜ Not Started Parent plan: PLAN.md Domain: frontend
Objective
Create a sticky floating toolbar that appears when edit mode is active, providing quick access to common editing actions.
Tasks
- Create
src/lib/components/board/EditToolbar.svelte - Toolbar actions: Save All, Discard, Add Section, Board Settings (gear), Exit Edit Mode
- Show unsaved change count badge on Save button
- Position: fixed at bottom-center of viewport (floating pill shape)
- Entrance animation: slide up from bottom with fade
- Exit animation: slide down with fade
- Responsive: collapses to icon-only on small screens
- Only renders when edit mode is active
- Wire "Exit Edit Mode" to the store's exitEditMode()
- Wire "Add Section" to emit event (handled in Phase 6)
- Wire "Board Settings" to emit event (handled in Phase 9)
- Wire "Save All" to emit event (handled in Phase 8)
- Wire "Discard" to revert all changes and exit edit mode
Files to Modify/Create
src/lib/components/board/EditToolbar.svelte— new componentsrc/routes/boards/[boardId]/+page.svelte— mount toolbar when edit mode active
Acceptance Criteria
- Toolbar appears/disappears smoothly with edit mode toggle
- All buttons are present and visually clear
- Change count badge updates reactively
- Responsive layout works on mobile
- Toolbar doesn't obscure board content (proper z-index, positioning)
Notes
- Use lucide-svelte icons for toolbar buttons
- z-index must be above board content but below modals/dialogs
- "Save" and "Discard" will be wired to real logic in Phase 8
Review Checklist
- All tasks completed
- Code follows project conventions
- No unintended side effects
- Build passes
- Tests pass (new + existing)