alexei.dolgolyov/web-app-launcher
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity
Files
f6599430e579f1632b9f25374be4b1a555c43d1c
web-app-launcher/plans/phase-2-enhanced-features/phase-4-widgets.md
T
alexei.dolgolyov 1c0a7cb850 feat: Phases 4-7 — Full Feature Expansion (26 features) 
Phase 4 — New Widget Types:
- Clock/Weather, System Stats, RSS/Feed, Calendar, Markdown,
  Metric/Counter, Link Group, Camera/Stream widgets
- Backend services with caching for each data source
- Full creation form with dynamic config fields per type

Phase 5 — Visual & Styling Enhancements:
- Glassmorphism card style (solid/glass/outline)
- Board-level themes with per-board hue/saturation
- Animated SVG status rings replacing static dots
- Card size options (compact/medium/large)
- Custom CSS injection (admin + per-board, sanitized)
- Wallpaper backgrounds with blur/overlay/parallax

Phase 6 — Functional Features:
- Favorites bar with drag-and-drop reordering
- Recent apps tracking with privacy toggle
- Uptime dashboard page (/status, guest-accessible)
- Notifications system (Discord/Slack/Telegram/HTTP webhooks)
- App tags with filtering in board view
- Multi-URL app cards with expandable sub-links
- Personal API tokens with scoped permissions
- Audit log with retention and admin viewer

Phase 7 — Quality of Life:
- Onboarding wizard (5-step first-launch setup)
- App URL health preview with favicon/title detection
- Board templates (4 built-in + custom import/export)
- Keyboard shortcut overlay (j/k nav, 1-9 boards, ? help)

212 files changed, 15641 insertions, 980 deletions.
Build, lint, type check, and 222 tests all pass.
2026-03-25 14:18:10 +03:00

4.7 KiB
Raw Blame History

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
Reference in New Issue View Git Blame Copy Permalink