alexei.dolgolyov
50e8519220
- Add 6 renderer components: StatCard, Gauge, List, Progress, AlertBanner, Chart - Add IntegrationWidget container with auto-refresh, loading, error states - Add IntegrationAlertOverlay for layout-level critical alerts - Add IntegrationConfigFields for dynamic form generation from Zod schemas - Register integration type in WidgetRenderer - Extend WidgetCreationForm with integration app/endpoint pickers - Extend AppForm with integration config section and test connection button - Add /api/integrations/alerts endpoint
3.2 KiB
3.2 KiB
Phase 10: Planka Integration + Polish
Status: ⬜ Not Started Parent plan: PLAN.md Domain: fullstack
Objective
Implement the Planka integration for task/project management visibility, then polish all integration components with proper error states, loading skeletons, empty states, and consistent styling.
Tasks
Planka Integration
- Task 1: Create
src/lib/server/integrations/planka/schema.ts— Auth config:{ email: string, password: string }. - Task 2: Create
src/lib/server/integrations/planka/client.ts— HTTP client. Session-based auth (POST/api/access-tokens→ Bearer token). Endpoints:/api/cards,/api/boards. - Task 3: Create
src/lib/server/integrations/planka/transform.ts— My cards → list with board/list context, overdue → list (red highlight), board summary → stat-card (card counts by list). - Task 4: Create
src/lib/server/integrations/planka/index.ts— Endpoints:my-cards(list),overdue(list),board-summary(stat-card). - Task 5: Register Planka integration in registry.
Polish & Error Handling
- Task 6: Add loading skeleton states to all renderer components (StatCard, Gauge, List, Progress, Chart).
- Task 7: Add empty state messaging to all renderers ("No data available", "No active torrents", etc.).
- Task 8: Add error state handling to IntegrationWidget — show error message with retry button when fetch fails.
- Task 9: Verify all integrations handle network timeouts, invalid credentials, and unexpected response formats gracefully.
- Task 10: Add integration type icons to the app form dropdown and widget creation form.
- Task 11: Ensure all renderers respect card sizes (compact/medium/large) and are responsive.
- Task 12: Review and standardize all integration endpoint refresh intervals (sensible defaults).
Files to Modify/Create
src/lib/server/integrations/planka/{schema,client,transform,index}.ts— new (4 files)src/lib/server/integrations/registry.ts— modify: register Plankasrc/lib/components/widget/integration/*.svelte— modify: add loading/empty/error statessrc/lib/components/widget/integration/IntegrationWidget.svelte— modify: error handling + retrysrc/lib/components/app/AppForm.svelte— modify: integration type icons
Acceptance Criteria
- Planka: my cards list, overdue cards highlighted, board summary
- All renderers have loading, empty, and error states
- All integrations handle network errors gracefully
- Consistent styling across all integration components
- Responsive layout on mobile
- Build passes, tests pass, lint clean
Notes
- Planka uses session-based auth similar to NPM — reuse the pattern
- This is the final phase — build and tests MUST pass here (Big Bang strategy final gate)
- Polish should cover ALL renderers and integrations, not just Planka
- Overdue detection: compare card due date to current date, highlight in red
Review Checklist
- All tasks completed
- Code follows project conventions
- No unintended side effects
- Build passes
- Tests pass (new + existing)
- All integrations tested end-to-end
- Loading/error/empty states verified