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
52 lines
2.4 KiB
Markdown
52 lines
2.4 KiB
Markdown
# Phase 6: Add Widget Inline ("+" Buttons)
|
|
|
|
**Status:** ⬜ Not Started
|
|
**Parent plan:** [PLAN.md](./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` — new
|
|
- `src/lib/components/widget/WidgetTypePicker.svelte` — new, type selection grid
|
|
- `src/lib/components/board/AddSectionDivider.svelte` — new
|
|
- `src/lib/components/board/AddSectionForm.svelte` — new, inline section creation
|
|
- `src/lib/components/widget/WidgetGrid.svelte` — append AddWidgetButton in edit mode
|
|
- `src/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)
|
|
|
|
## Handoff to Next Phase
|
|
<!-- Filled in after completing this phase -->
|