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
69 lines
3.0 KiB
Markdown
69 lines
3.0 KiB
Markdown
# Phase 8: Optimistic Updates & Batch Save
|
|
|
|
**Status:** ⬜ Not Started
|
|
**Parent plan:** [PLAN.md](./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-update` endpoint
|
|
- [ ] 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 functions
|
|
- `src/routes/api/boards/[id]/batch-update/+server.ts` — new batch API endpoint
|
|
- `src/lib/components/board/EditToolbar.svelte` — wire Save/Discard to real logic
|
|
- `src/lib/components/widget/WidgetEditOverlay.svelte` — wire delete to changeset
|
|
- `src/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 `$transaction` for 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)
|
|
|
|
## Handoff to Next Phase
|
|
<!-- Filled in after completing this phase -->
|