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
2.4 KiB
2.4 KiB
Phase 6: Add Widget Inline ("+" Buttons)
Status: ⬜ Not Started Parent plan: PLAN.md Domain: frontend
Objective
Add prominent "+" buttons for adding widgets to sections and adding new sections, all inline on the board view.
Tasks
- Create
src/lib/components/widget/AddWidgetButton.svelte— the "+" button shown at end of widget grid - Create
src/lib/components/board/AddSectionDivider.svelte— subtle divider between sections with "+" button - Widget type picker: grid of icons with labels (App, Bookmark, Note, Embed, Status, Clock, etc.)
- Clicking a type opens the config panel from Phase 4 for the new widget
- New widget appears immediately in grid as a skeleton/placeholder while being configured
- "Add Section" shows minimal inline form: title input + optional icon + confirm button
- New section appears immediately in the board with empty widget grid
- All additions tracked in edit mode changeset (temporary IDs until batch save)
- "Add Section" button also available from the floating toolbar (Phase 2)
Files to Modify/Create
src/lib/components/widget/AddWidgetButton.svelte— newsrc/lib/components/widget/WidgetTypePicker.svelte— new, type selection gridsrc/lib/components/board/AddSectionDivider.svelte— newsrc/lib/components/board/AddSectionForm.svelte— new, inline section creationsrc/lib/components/widget/WidgetGrid.svelte— append AddWidgetButton in edit modesrc/lib/components/board/Board.svelte— insert AddSectionDivider between sections
Acceptance Criteria
- "+" button visible at end of each section's widget grid in edit mode
- "+" section divider visible between sections in edit mode
- Type picker shows all available widget types with icons
- Selecting a type opens config panel for new widget
- New widgets/sections appear immediately (optimistic)
- Hidden when not in edit mode
Notes
- Use temporary client-side IDs (e.g.,
temp-${crypto.randomUUID()}) for new items - Widget type icons should use lucide-svelte icons matching each type
- Empty sections should still show the "+" add widget button
Review Checklist
- All tasks completed
- Code follows project conventions
- No unintended side effects
- Build passes
- Tests pass (new + existing)