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
60 lines
1.9 KiB
Markdown
60 lines
1.9 KiB
Markdown
# 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)
|