feat(inline-edit): add WYSIWYG inline dashboard editing mode
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
This commit is contained in:
@@ -0,0 +1,59 @@
|
||||
# Feature Context: Inline Dashboard Editing
|
||||
|
||||
## Configuration
|
||||
- **Development mode:** Automated
|
||||
- **Execution mode:** Direct
|
||||
- **Strategy:** Big Bang
|
||||
- **Build:** `npm run build`
|
||||
- **Test:** `npm run test`
|
||||
- **Lint:** `npm run lint`
|
||||
- **Dev server:** `npm run dev` (port: 5173)
|
||||
|
||||
## Current State
|
||||
Starting fresh. The board view page (`/boards/[boardId]`) is read-only.
|
||||
The edit page (`/boards/[boardId]/edit`) is a separate form-based page.
|
||||
|
||||
## Key Architecture Notes
|
||||
- SvelteKit 2 + Svelte 5 (runes: $state, $derived, $props)
|
||||
- Prisma ORM with SQLite
|
||||
- Tailwind CSS v4
|
||||
- `svelte-dnd-action` for drag-and-drop
|
||||
- `lucide-svelte` for icons
|
||||
- `bits-ui` for UI primitives
|
||||
- Widget configs stored as JSON strings in `Widget.config`
|
||||
- Each widget type has Zod validation in `src/lib/utils/validators.ts`
|
||||
- Existing form actions on edit page: ?/updateBoard, ?/addSection, ?/deleteSection, ?/updateSection, ?/addWidget, ?/deleteWidget
|
||||
- Board view components: Board.svelte → Section.svelte → WidgetGrid.svelte → WidgetRenderer.svelte → [TypeWidget].svelte
|
||||
|
||||
## Temporary Workarounds
|
||||
(none yet)
|
||||
|
||||
## Cross-Phase Dependencies
|
||||
- Phase 3 (widget overlay) depends on Phase 1 (edit mode state)
|
||||
- Phase 4 (config panels) depends on Phase 3 (overlay triggers)
|
||||
- Phase 6 (add widget) depends on Phase 4 (config panel infrastructure)
|
||||
- Phase 7 (DnD) depends on Phase 1 (edit mode gate)
|
||||
- Phase 8 (batch save) depends on Phases 1-7 (all accumulated changes)
|
||||
- Phase 9 (board properties) depends on Phase 2 (toolbar trigger)
|
||||
- Phase 10 (migration) depends on all previous phases
|
||||
|
||||
## Deferred Work
|
||||
(none yet)
|
||||
|
||||
## Failed Approaches
|
||||
(none yet)
|
||||
|
||||
## Review Findings Log
|
||||
(none yet)
|
||||
|
||||
## Phase Execution Log
|
||||
| Phase | Agent Used | Test Writer | Parallel | Notes |
|
||||
|-------|-----------|-------------|----------|-------|
|
||||
| — | — | — | — | — |
|
||||
|
||||
## Environment & Runtime Notes
|
||||
- Windows 10, Git Bash
|
||||
- Node.js project with Vite dev server
|
||||
|
||||
## Implementation Notes
|
||||
(none yet)
|
||||
Reference in New Issue
Block a user