web-app-launcher/plans/mvp-web-app-launcher/phase-5-board-widgets.md

Phase 5: Board, Section & Widget System

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