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
64 lines
2.7 KiB
Markdown
64 lines
2.7 KiB
Markdown
# Phase 4: Inline Widget Configuration Panels
|
|
|
|
**Status:** ⬜ Not Started
|
|
**Parent plan:** [PLAN.md](./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 router
|
|
- `src/lib/components/widget/config/` — new directory for type-specific config forms
|
|
- `src/lib/components/widget/WidgetEditOverlay.svelte` — wire pencil to open config panel
|
|
- `src/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.ts` for 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)
|
|
|
|
## Handoff to Next Phase
|
|
<!-- Filled in after completing this phase -->
|