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
51 lines
1.9 KiB
Markdown
51 lines
1.9 KiB
Markdown
# Phase 2: Floating Edit Toolbar
|
|
|
|
**Status:** ⬜ Not Started
|
|
**Parent plan:** [PLAN.md](./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 component
|
|
- `src/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)
|
|
|
|
## Handoff to Next Phase
|
|
<!-- Filled in after completing this phase -->
|