web-app-launcher/plans/phase-2-enhanced-features/phase-4-widgets.md

Phase 3: Additional Widget Types

Status: ⬜ Not Started Parent plan: 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