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
1.9 KiB
1.9 KiB
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-actionfor drag-and-droplucide-sveltefor iconsbits-uifor 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)