# 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 -->