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
3.0 KiB
3.0 KiB
Phase 8: Optimistic Updates & Batch Save
Status: ⬜ Not Started Parent plan: PLAN.md Domain: fullstack
Objective
Implement the changeset accumulation system and a batch API endpoint that persists all edit mode changes in a single transaction.
Tasks
- Design changeset data structure in editMode store:
widgetUpdates: Map<id, configChanges>widgetAdds: Array<{tempId, sectionId, type, config, order}>widgetDeletes: Set<id>widgetMoves: Map<id, {fromSectionId, toSectionId, newOrder}>sectionUpdates: Map<id, changes>sectionAdds: Array<{tempId, title, icon, order}>sectionDeletes: Set<id>sectionReorders: Array<{id, newOrder}>boardUpdates: Partial<BoardProps>
- Create
POST /api/boards/[id]/batch-updateendpoint - Endpoint accepts the full changeset as JSON body
- Server-side: validate all changes, execute in a single Prisma transaction
- Server-side: handle temp IDs → real IDs mapping for new items
- Server-side: authorization check (user must have edit permission)
- Wire "Save All" toolbar button to serialize changeset and call batch endpoint
- On success: clear changeset, reset dirty state, broadcast to other tabs, invalidateAll()
- On failure: show error, keep changeset intact (no data loss)
- Wire "Discard" toolbar button to reset changeset, revert optimistic UI, exit edit mode
- Wire widget delete (from Phase 3 overlay) to add to changeset
- Wire widget config save (from Phase 4) to add to changeset
- Wire section changes (from Phase 5) to add to changeset
- Wire new items (from Phase 6) to add to changeset
- Wire DnD moves (from Phase 7) to add to changeset
Files to Modify/Create
src/lib/stores/editMode.svelte.ts— add changeset state and mutation functionssrc/routes/api/boards/[id]/batch-update/+server.ts— new batch API endpointsrc/lib/components/board/EditToolbar.svelte— wire Save/Discard to real logicsrc/lib/components/widget/WidgetEditOverlay.svelte— wire delete to changesetsrc/lib/components/widget/WidgetConfigPanel.svelte— wire save to changeset- Various components — connect to changeset mutations
Acceptance Criteria
- All changes from Phases 3-7 accumulate in the changeset
- "Save All" sends one HTTP request with all changes
- Server processes all changes in a single transaction
- On success: board reloads with persisted state
- On failure: changes are preserved, error is shown
- "Discard" reverts everything to pre-edit state
- Change count in toolbar updates reactively
Notes
- Batch endpoint must be idempotent-safe (temp IDs prevent double-creates)
- Widget order values must be recalculated during batch save
- Prisma
$transactionfor atomicity - Consider payload size limits for very large boards
Review Checklist
- All tasks completed
- Code follows project conventions
- No unintended side effects
- Build passes
- Tests pass (new + existing)