Files
alexei.dolgolyov a6b09aae9c feat(inline-edit): add WYSIWYG inline dashboard editing mode
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
2026-04-03 00:01:29 +03:00

1.8 KiB

Phase 5: Section Inline Editing

Status: Not Started Parent plan: PLAN.md Domain: frontend

Objective

Make section headers editable inline in edit mode — title, icon, card size, expand default, delete.

Tasks

  • Modify SectionHeader.svelte to show edit controls when edit mode is active
  • Pencil icon on section header — click to toggle inline editing of title and icon
  • Inline title editing: click title text to replace with input field, Enter to confirm, Escape to cancel
  • Icon picker for section icon (reuse AppIconPicker or simplified version)
  • Card size dropdown override (compact/medium/large/inherit)
  • Toggle for isExpandedByDefault
  • Delete section button with confirmation ("Delete section 'X' and its N widgets?")
  • Drag handle for section reordering (left side of header, visible only in edit mode)
  • All changes stored in edit mode changeset

Files to Modify/Create

  • src/lib/components/section/SectionHeader.svelte — add edit controls
  • src/lib/components/section/Section.svelte — pass edit mode state
  • src/lib/components/section/SectionEditControls.svelte — new, extracted edit controls

Acceptance Criteria

  • Section title is editable inline in edit mode
  • Section icon is changeable via picker
  • Card size override works
  • Delete shows confirmation with widget count
  • Changes accumulate in changeset (not persisted until Save)
  • Controls hidden when not in edit mode

Notes

  • Section drag-and-drop reorder is handled further in Phase 7
  • Delete confirmation should show actual widget count from current state

Review Checklist

  • All tasks completed
  • Code follows project conventions
  • No unintended side effects
  • Build passes
  • Tests pass (new + existing)

Handoff to Next Phase