chore: add plan files for Phase 2 enhanced features

2026-03-24 22:44:31 +03:00
parent c4754f23a5
commit ae114ab9ce
8 changed files with 407 additions and 0 deletions
@@ -0,0 +1,64 @@
+# Phase 3: Additional Widget Types
+
+**Status:** ⬜ Not Started
+**Parent plan:** [PLAN.md](./PLAN.md)
+**Domain:** fullstack
+
+## Objective
+Add four new widget types: Bookmark, Note, Embed, and Status. Extend the widget system with type-specific rendering and configuration.
+
+## Tasks
+
+- [ ] Task 1: Update `src/lib/utils/constants.ts` — ensure WidgetType enum has BOOKMARK, NOTE, EMBED, STATUS
+- [ ] Task 2: Update `src/lib/utils/validators.ts` — add Zod schemas for each widget type's config
+- [ ] Task 3: Create `src/lib/components/widget/BookmarkWidget.svelte` — URL + label + optional icon, no healthcheck
+- [ ] Task 4: Create `src/lib/components/widget/NoteWidget.svelte` — markdown/rich text display with edit mode
+- [ ] Task 5: Create `src/lib/components/widget/EmbedWidget.svelte` — iframe embed with configurable URL and height
+- [ ] Task 6: Create `src/lib/components/widget/StatusWidget.svelte` — aggregated status of multiple apps (green/red/yellow summary)
+- [ ] Task 7: Create `src/lib/components/widget/WidgetRenderer.svelte` — universal widget renderer that switches by type
+- [ ] Task 8: Update `src/lib/components/widget/WidgetGrid.svelte` — use WidgetRenderer instead of hardcoded AppWidget
+- [ ] Task 9: Update board editor — add widget type selector when adding widgets
+- [ ] Task 10: Update `src/routes/boards/[boardId]/edit/+page.svelte` — type-specific config forms for each widget type
+- [ ] Task 11: Update `src/routes/boards/[boardId]/edit/+page.server.ts` — handle different widget types in create action
+- [ ] Task 12: Install `marked` or `markdown-it` for Note widget markdown rendering
+
+## Files to Modify/Create
+- `src/lib/utils/constants.ts` — MODIFY
+- `src/lib/utils/validators.ts` — MODIFY
+- `src/lib/components/widget/BookmarkWidget.svelte` — NEW
+- `src/lib/components/widget/NoteWidget.svelte` — NEW
+- `src/lib/components/widget/EmbedWidget.svelte` — NEW
+- `src/lib/components/widget/StatusWidget.svelte` — NEW
+- `src/lib/components/widget/WidgetRenderer.svelte` — NEW
+- `src/lib/components/widget/WidgetGrid.svelte` — MODIFY
+- `src/routes/boards/[boardId]/edit/+page.svelte` — MODIFY
+- `src/routes/boards/[boardId]/edit/+page.server.ts` — MODIFY
+
+## Acceptance Criteria
+- All four widget types render correctly in the board view
+- Each widget type has a type-specific config form in the board editor
+- Bookmark: displays URL with label and optional icon, opens in new tab
+- Note: renders markdown content, supports inline editing
+- Embed: renders iframe with configurable URL, shows loading state
+- Status: shows aggregate health of selected apps (count online/offline/total)
+- WidgetRenderer correctly dispatches to the right component by type
+
+## Notes
+- Widget config JSON structure per type:
+  - APP: `{ appId: string }`
+  - BOOKMARK: `{ url: string, label: string, icon?: string, description?: string }`
+  - NOTE: `{ content: string, format: 'markdown' | 'text' }`
+  - EMBED: `{ url: string, height: number, sandbox?: string }`
+  - STATUS: `{ appIds: string[], label?: string }`
+- Embed widget should use sandbox attribute for security
+- ⚠️ Big Bang: may need integration fixes in Phase 5
+
+## 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 by the implementation agent after completing this phase. -->