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.0 KiB
2.0 KiB
Phase 1: Edit Mode State Infrastructure
Status: ⬜ Not Started Parent plan: PLAN.md Domain: frontend
Objective
Create the foundational edit mode state management and toggle mechanism that all subsequent phases build upon.
Tasks
- Create
src/lib/stores/editMode.svelte.tswith state:{ active, boardId, dirty, changeCount } - Export functions:
enterEditMode(boardId),exitEditMode(),markDirty(),resetDirty() - Add "Edit Mode" toggle button to
BoardHeader.svelte(replaces the current "Edit" link to/boards/[id]/edit) - When toggled ON: set edit mode active, show visual indicator (subtle board border glow or tint)
- When toggled OFF: if dirty, show confirmation dialog "Discard unsaved changes?"
- Register keyboard shortcut
Ctrl+E/Cmd+Eto toggle edit mode - Pass edit mode state as Svelte context from board view page
- Add
editModecontext consumer helpers for child components - Visual indicator: board gets a subtle colored top-bar or border when in edit mode
Files to Modify/Create
src/lib/stores/editMode.svelte.ts— new storesrc/lib/components/board/BoardHeader.svelte— replace Edit link with toggle buttonsrc/routes/boards/[boardId]/+page.svelte— provide edit mode context, visual indicators
Acceptance Criteria
- Clicking the toggle enters/exits edit mode
- Ctrl+E toggles edit mode
- Board view page visually indicates edit mode is active
- Child components can read edit mode state via context
- Dirty state tracking works (increments on markDirty, resets on save/discard)
Notes
- Use Svelte 5 runes ($state, $derived) for the store
- The keyboard shortcut must not conflict with existing shortcuts
- Guest users / users without edit permission must NOT see the toggle
Review Checklist
- All tasks completed
- Code follows project conventions
- No unintended side effects
- Build passes
- Tests pass (new + existing)