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.7 KiB
2.7 KiB
Phase 4: Inline Widget Configuration Panels
Status: ⬜ Not Started Parent plan: PLAN.md Domain: frontend
Objective
Create type-specific configuration panels that open inline when the user clicks the edit (pencil) button on a widget, allowing real-time config editing with live preview.
Tasks
- Create
src/lib/components/widget/WidgetConfigPanel.svelte— container/router for type-specific panels - Create config panel components for each widget type (or a dynamic form approach):
- App: app selector dropdown
- Bookmark: url, label, icon, description
- Note/Markdown: inline content editor
- Embed: url, height, sandbox
- Status: multi-app selector, label
- Clock: timezone, style, weather toggle, coordinates
- System Stats: source url/type, metrics, refresh interval
- RSS: feed url, max items, show summary
- Calendar: iCal URLs, days ahead
- Metric: label, source, value/url/query, unit, refresh
- Link Group: links array editor, collapsible toggle
- Camera: stream url, type, refresh, aspect ratio
- Integration: app selector, endpoint selector, refresh
- Panel opens as a popover/slide-out anchored to the widget
- Pre-populate fields with current widget config
- Live preview: changes update the widget rendering in real-time (optimistic, local state)
- Save/Cancel buttons per panel
- Save stores changes in the edit mode changeset (not persisted until batch save in Phase 8)
- Cancel reverts to original config
- Auto-focus first field when panel opens
- Close panel on Escape key
Files to Modify/Create
src/lib/components/widget/WidgetConfigPanel.svelte— new panel routersrc/lib/components/widget/config/— new directory for type-specific config formssrc/lib/components/widget/WidgetEditOverlay.svelte— wire pencil to open config panelsrc/lib/components/widget/WidgetRenderer.svelte— support config override from edit state
Acceptance Criteria
- Clicking pencil on any widget type opens the correct config panel
- Fields are pre-populated with current values
- Changes preview live on the widget
- Save adds to changeset, Cancel reverts
- Panel closes on Save, Cancel, or Escape
- All 14 widget types have config support
Notes
- Reuse Zod schemas from
src/lib/utils/validators.tsfor field validation - Consider a generic form approach for simple types (key-value pairs) vs custom for complex ones (link_group links array)
- Panel positioning: use a popover that doesn't overflow viewport
Review Checklist
- All tasks completed
- Code follows project conventions
- No unintended side effects
- Build passes
- Tests pass (new + existing)