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

Phase 3: Additional Widget Types

Status: Done 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 for Note widget markdown rendering

Files to Modify/Create

• src/lib/utils/constants.ts — MODIFY (already had all types)
• src/lib/utils/validators.ts — MODIFY
• src/lib/types/widget.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/lib/components/board/Board.svelte — MODIFY
• src/lib/components/board/DraggableBoard.svelte — MODIFY
• src/lib/components/section/Section.svelte — MODIFY
• src/lib/components/section/DraggableSection.svelte — MODIFY
• src/routes/boards/[boardId]/+page.svelte — MODIFY
• src/routes/boards/[boardId]/+page.server.ts — 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 strategy: may need integration fixes in Phase 6

Review Checklist

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

Handoff to Next Phase

• Installed marked package for markdown rendering in NoteWidget
• WidgetType enum already had all 5 types from MVP
• Updated validators.ts with per-type config Zod schemas (appWidgetConfigSchema, bookmarkWidgetConfigSchema, noteWidgetConfigSchema, embedWidgetConfigSchema, statusWidgetConfigSchema)
• Created 4 new widget components: BookmarkWidget, NoteWidget, EmbedWidget, StatusWidget
• Created WidgetRenderer as the universal type-switch component
• Updated WidgetGrid to use WidgetRenderer; note/embed/status widgets span full width
• Updated DraggableSection with widget type selector dropdown and type-specific config forms
• Updated board view page server to load all apps (needed by StatusWidget)
• Plumbed allApps prop through Board -> Section -> WidgetGrid -> WidgetRenderer -> StatusWidget
• Edit page handleAddWidget now sends JSON widget data; server action parses configJson field
• onAddWidget callback signature changed from (sectionId, appId) to (sectionId, widgetDataJson) throughout DraggableBoard/DraggableSection