alexei.dolgolyov/web-app-launcher
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity
Files
4326d95bf350ecf9d288b9793af7303243b2eb82
web-app-launcher/plans/mvp-web-app-launcher/phase-5-board-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

5.0 KiB
Raw Blame History

Phase 5: Board, Section & Widget System

Status: ✅ Complete Parent plan: PLAN.md Domain: fullstack

Objective

Build the board/section/widget system — the core UI of the dashboard. Implement CRUD APIs, the board view page with collapsible sections and app widgets in a responsive grid, and the board editor.

Tasks

  • Task 1: Create src/routes/api/boards/+server.ts — GET (list, filtered by permissions), POST
  • Task 2: Create src/routes/api/boards/[id]/+server.ts — GET, PATCH, DELETE
  • Task 3: Create src/routes/api/boards/[id]/sections/+server.ts — GET, POST
  • Task 4: Create src/routes/api/boards/[id]/sections/[sid]/+server.ts — GET, PATCH, DELETE
  • Task 5: Create src/routes/api/boards/[id]/sections/[sid]/widgets/+server.ts — GET, POST, PATCH, DELETE
  • Task 6: Create src/routes/boards/+page.server.ts — load board list
  • Task 7: Create src/routes/boards/+page.svelte — board list page
  • Task 8: Create src/routes/boards/[boardId]/+page.server.ts — load board with sections, widgets, app data
  • Task 9: Create src/routes/boards/[boardId]/+page.svelte — board view page
  • Task 10: Create src/routes/boards/[boardId]/edit/+page.server.ts — board editor data + actions
  • Task 11: Create src/routes/boards/[boardId]/edit/+page.svelte — board editor page
  • Task 12: Create src/lib/components/board/Board.svelte — board container
  • Task 13: Create src/lib/components/board/BoardHeader.svelte — board title, description, actions
  • Task 14: Create src/lib/components/board/BoardCard.svelte — board card for list view
  • Task 15: Create src/lib/components/section/Section.svelte — section container
  • Task 16: Create src/lib/components/section/SectionHeader.svelte — section title with collapse toggle
  • Task 17: Create src/lib/components/section/SectionCollapsible.svelte — collapsible wrapper
  • Task 18: Create src/lib/components/widget/AppWidget.svelte — app widget displaying icon, name, status
  • Task 19: Create src/lib/components/widget/WidgetContainer.svelte — generic widget wrapper
  • Task 20: Create src/lib/components/widget/WidgetGrid.svelte — responsive grid layout for widgets

Files to Modify/Create

  • src/routes/api/boards/+server.ts
  • src/routes/api/boards/[id]/+server.ts
  • src/routes/api/boards/[id]/sections/+server.ts
  • src/routes/api/boards/[id]/sections/[sid]/+server.ts
  • src/routes/api/boards/[id]/sections/[sid]/widgets/+server.ts
  • src/routes/boards/+page.server.ts
  • src/routes/boards/+page.svelte
  • src/routes/boards/[boardId]/+page.server.ts
  • src/routes/boards/[boardId]/+page.svelte
  • src/routes/boards/[boardId]/edit/+page.server.ts
  • src/routes/boards/[boardId]/edit/+page.svelte
  • src/lib/components/board/*.svelte
  • src/lib/components/section/*.svelte
  • src/lib/components/widget/*.svelte

Acceptance Criteria

  • Boards can be created, listed, viewed, edited, deleted
  • Sections within boards support CRUD and ordering
  • Widgets within sections support CRUD and ordering
  • Board view renders sections with collapsible behavior
  • App widgets show icon, name, status dot, and link to app URL
  • Responsive grid adapts to screen size
  • Default board is accessible from root page

Notes

  • MVP supports only AppWidget type; schema should have type field for future widget types
  • Widget config is JSON: { appId: string } for AppWidget
  • Section collapse uses Svelte slide transition
  • Board editor is a form-based editor (drag-and-drop is post-MVP Phase 2)
  • Permission filtering on board list uses permissionService
  • Big Bang: functional but minimally styled until Phase 7

Review Checklist

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

Handoff to Next Phase

Phase 5 is complete. All board, section, and widget CRUD APIs are implemented with permission-based filtering (admin sees all, regular users see permitted boards, guests see guest-accessible boards only). The board view page loads the full board hierarchy (board -> sections -> widgets -> app + status) via boardService.findBoardById. The board editor provides form-based management of board properties, sections (add/delete), and widgets (add app widgets from a dropdown, remove). All Svelte components use runes mode and follow existing patterns:

  • Board.svelte renders sections in order
  • Section.svelte uses SectionHeader (chevron toggle) + SectionCollapsible (Svelte slide transition)
  • WidgetGrid.svelte uses a responsive CSS grid (2/3/4 cols)
  • AppWidget.svelte displays app icon, name, and health status badge (reuses AppHealthBadge)
  • BoardCard.svelte shows board summary with section count, default/guest badges

Key files for Phase 6 (Admin Panel):

  • Board API routes at /api/boards/** are ready for admin operations
  • Permission checking via permissionService.checkPermission() is integrated into all write operations
  • Board editor at /boards/[boardId]/edit is functional for admin use
Reference in New Issue View Git Blame Copy Permalink