feat(phase3): import/export, sparklines, user theme overrides
- JSON import/export with conflict resolution (skip/overwrite) + admin UI - Ping history sparklines on AppWidget and AppCard (24h, 288 points) - Hourly cleanup job for old AppStatus records - User theme preferences (hue, saturation, mode, background, locale) - Settings page with ThemeCustomizer (sliders, toggles, live preview) - Prisma migration for user preference fields - i18n translations for all new strings (EN/RU)
This commit is contained in:
@@ -1,7 +1,27 @@
|
||||
# Feature Context: Phase 3 — Advanced Features
|
||||
|
||||
## Current State
|
||||
Phase 2 is complete and merged. 176 tests, full build passes. Starting Phase 3 advanced features.
|
||||
Phase 2 is complete and merged. 176 tests, full build passes. Phase 3 in progress. Phase 1 (Import/Export), Phase 2 (Sparklines), and Phase 3 (User Theme Overrides) are complete.
|
||||
|
||||
### Phase 1 (Import/Export) Summary
|
||||
exportService, importService, admin API endpoints, ImportExportPanel UI, Zod validation schema, i18n EN/RU translations.
|
||||
|
||||
### Phase 2 (Sparklines) Summary
|
||||
- History API at `/api/apps/[id]/history` — returns last 288 status records with uptime percentage
|
||||
- `SparklineChart.svelte` — inline SVG bar chart with color-coded status bars (green/red/yellow/gray)
|
||||
- `AppWidget.svelte` and `AppCard.svelte` updated to fetch and display sparklines on mount
|
||||
- `pruneOldStatuses()` in healthcheck service — deletes records >24h, caps at 288 per app
|
||||
- Hourly cleanup cron job in healthcheck scheduler
|
||||
- i18n keys: `app.uptime`, `app.history_loading` (EN/RU)
|
||||
|
||||
### Phase 3 (User Theme Overrides) Summary
|
||||
- Prisma migration: added `themeMode`, `primaryHue`, `primarySaturation`, `backgroundType`, `locale` nullable fields to User model
|
||||
- Preferences API at `/api/users/me/preferences` — GET returns preferences, PATCH updates subset
|
||||
- Settings page at `/settings` with `ThemeCustomizer.svelte` — hue/saturation sliders, mode toggle (dark/light/system), background selector, locale picker, save button
|
||||
- Theme store `loadFromServer(prefs)` method applies server preferences over localStorage defaults
|
||||
- `+layout.server.ts` passes `userPreferences` in layout data; `+layout.svelte` applies them on mount
|
||||
- Header user menu includes "Settings" link
|
||||
- i18n keys: `settings.title`, `settings.theme`, `settings.primary_color`, `settings.hue`, `settings.saturation`, `settings.background`, `settings.language`, `settings.save`, `settings.saving`, `settings.saved` (EN/RU)
|
||||
|
||||
## Cross-Phase Dependencies
|
||||
- Phases 1-3 are independent (import/export, sparklines, user themes)
|
||||
|
||||
@@ -19,9 +19,9 @@ Add import/export, ping history sparklines, user theme overrides, PWA support, D
|
||||
|
||||
## Phases
|
||||
|
||||
- [ ] Phase 1: Import/Export [fullstack] → [subplan](./phase-1-import-export.md)
|
||||
- [x] Phase 1: Import/Export [fullstack] → [subplan](./phase-1-import-export.md)
|
||||
- [ ] Phase 2: Ping History Sparklines [fullstack] → [subplan](./phase-2-sparklines.md)
|
||||
- [ ] Phase 3: User Theme Overrides [fullstack] → [subplan](./phase-3-user-themes.md)
|
||||
- [x] Phase 3: User Theme Overrides [fullstack] → [subplan](./phase-3-user-themes.md)
|
||||
- [ ] Phase 4: PWA Support [frontend] → [subplan](./phase-4-pwa.md)
|
||||
- [ ] Phase 5: Auto-Discovery Docker/Traefik [backend] → [subplan](./phase-5-autodiscovery.md)
|
||||
- [ ] Phase 6: Bookmarklet & Multi-Tab Sync [fullstack] → [subplan](./phase-6-bookmarklet-sync.md)
|
||||
@@ -31,9 +31,9 @@ Add import/export, ping history sparklines, user theme overrides, PWA support, D
|
||||
|
||||
| Phase | Domain | Status | Review | Build | Committed |
|
||||
|-------|--------|--------|--------|-------|-----------|
|
||||
| Phase 1: Import/Export | fullstack | ⬜ Not Started | ⬜ | ⬜ | ⬜ |
|
||||
| Phase 2: Sparklines | fullstack | ⬜ Not Started | ⬜ | ⬜ | ⬜ |
|
||||
| Phase 3: User Themes | fullstack | ⬜ Not Started | ⬜ | ⬜ | ⬜ |
|
||||
| Phase 1: Import/Export | fullstack | ✅ Done | ⬜ | ⬜ | ⬜ |
|
||||
| Phase 2: Sparklines | fullstack | ✅ Complete | ⬜ | ⬜ | ⬜ |
|
||||
| Phase 3: User Themes | fullstack | ✅ Complete | ⬜ | ⬜ | ⬜ |
|
||||
| Phase 4: PWA | frontend | ⬜ Not Started | ⬜ | ⬜ | ⬜ |
|
||||
| Phase 5: Auto-Discovery | backend | ⬜ Not Started | ⬜ | ⬜ | ⬜ |
|
||||
| Phase 6: Bookmarklet/Sync | fullstack | ⬜ Not Started | ⬜ | ⬜ | ⬜ |
|
||||
|
||||
@@ -1,18 +1,19 @@
|
||||
# Phase 1: Import/Export
|
||||
|
||||
**Status:** ⬜ Not Started
|
||||
**Status:** ✅ Done
|
||||
**Parent plan:** [PLAN.md](./PLAN.md)
|
||||
**Domain:** fullstack
|
||||
|
||||
## Tasks
|
||||
- [ ] Task 1: Create `src/lib/server/services/exportService.ts` — export all data (apps, boards, sections, widgets, groups, settings) as JSON
|
||||
- [ ] Task 2: Create `src/lib/server/services/importService.ts` — import JSON with conflict resolution (skip/overwrite)
|
||||
- [ ] Task 3: Create `src/routes/api/admin/export/+server.ts` — GET endpoint, returns JSON file download
|
||||
- [ ] Task 4: Create `src/routes/api/admin/import/+server.ts` — POST endpoint, accepts JSON upload
|
||||
- [ ] Task 5: Update admin settings page — add Import/Export section with download button and file upload
|
||||
- [ ] Task 6: Create `src/lib/components/admin/ImportExportPanel.svelte` — UI with export button, file picker, preview, and import button
|
||||
- [ ] Task 7: Add Zod schema for validating import data structure
|
||||
- [ ] Task 8: Add i18n translations for import/export strings (EN/RU)
|
||||
- [x] Task 1: Create `src/lib/server/services/exportService.ts` — export all data (apps, boards, sections, widgets, groups, settings) as JSON
|
||||
- [x] Task 2: Create `src/lib/server/services/importService.ts` — import JSON with conflict resolution (skip/overwrite)
|
||||
- [x] Task 3: Create `src/routes/api/admin/export/+server.ts` — GET endpoint, returns JSON file download
|
||||
- [x] Task 4: Create `src/routes/api/admin/import/+server.ts` — POST endpoint, accepts JSON upload
|
||||
- [x] Task 5: Update admin settings page — add Import/Export section with download button and file upload
|
||||
- [x] Task 6: Create `src/lib/components/admin/ImportExportPanel.svelte` — UI with export button, file picker, preview, and import button
|
||||
- [x] Task 7: Add Zod schema for validating import data structure
|
||||
- [x] Task 8: Add i18n translations for import/export strings (EN/RU)
|
||||
|
||||
## Handoff to Next Phase
|
||||
<!-- Filled in after completion -->
|
||||
|
||||
All import/export functionality implemented. Export service gathers all apps, boards (with sections/widgets), groups, and system settings into a versioned JSON structure. Import service validates with Zod, supports skip/overwrite conflict resolution, and runs in a Prisma transaction. Admin-only API endpoints with Content-Disposition for file download. UI panel with file upload, JSON preview, mode selector, and status feedback.
|
||||
|
||||
@@ -1,18 +1,20 @@
|
||||
# Phase 2: Ping History Sparklines
|
||||
|
||||
**Status:** ⬜ Not Started
|
||||
**Status:** ✅ Complete
|
||||
**Parent plan:** [PLAN.md](./PLAN.md)
|
||||
**Domain:** fullstack
|
||||
|
||||
## Tasks
|
||||
- [ ] Task 1: Create `src/routes/api/apps/[id]/history/+server.ts` — GET last 24h of healthcheck results
|
||||
- [ ] Task 2: Create `src/lib/components/app/SparklineChart.svelte` — tiny inline SVG sparkline (green=up, red=down)
|
||||
- [ ] Task 3: Update `src/lib/components/widget/AppWidget.svelte` — show sparkline below status badge
|
||||
- [ ] Task 4: Update `src/lib/components/app/AppCard.svelte` — show sparkline on app cards
|
||||
- [ ] Task 5: Calculate and display uptime percentage (last 24h)
|
||||
- [ ] Task 6: Update healthcheck service to retain last 288 records per app (24h at 5min intervals)
|
||||
- [ ] Task 7: Add cleanup job to prune old AppStatus records beyond retention period
|
||||
- [ ] Task 8: Add i18n translations (EN/RU)
|
||||
|
||||
- [x] Task 1: Create `src/routes/api/apps/[id]/history/+server.ts` — GET last 24h of healthcheck results
|
||||
- [x] Task 2: Create `src/lib/components/app/SparklineChart.svelte` — tiny inline SVG sparkline (green=up, red=down)
|
||||
- [x] Task 3: Update `src/lib/components/widget/AppWidget.svelte` — show sparkline below status badge
|
||||
- [x] Task 4: Update `src/lib/components/app/AppCard.svelte` — show sparkline on app cards
|
||||
- [x] Task 5: Calculate and display uptime percentage (last 24h)
|
||||
- [x] Task 6: Update healthcheck service to retain last 288 records per app (24h at 5min intervals)
|
||||
- [x] Task 7: Add cleanup job to prune old AppStatus records beyond retention period
|
||||
- [x] Task 8: Add i18n translations (EN/RU)
|
||||
|
||||
## Handoff to Next Phase
|
||||
<!-- Filled in after completion -->
|
||||
|
||||
All sparkline features implemented. History API returns last 288 records with uptime percentage. SparklineChart renders color-coded bars (green/red/yellow/gray). Cleanup job prunes records older than 24h hourly. Both AppWidget and AppCard fetch and display sparklines with uptime percentage on mount.
|
||||
|
||||
@@ -1,19 +1,19 @@
|
||||
# Phase 3: User Theme Overrides
|
||||
|
||||
**Status:** ⬜ Not Started
|
||||
**Status:** ✅ Complete
|
||||
**Parent plan:** [PLAN.md](./PLAN.md)
|
||||
**Domain:** fullstack
|
||||
|
||||
## Tasks
|
||||
- [ ] Task 1: Add `themeMode`, `primaryHue`, `primarySaturation`, `backgroundType`, `locale` fields to User model (Prisma migration)
|
||||
- [ ] Task 2: Create `src/routes/api/users/me/preferences/+server.ts` — GET/PATCH user preferences
|
||||
- [ ] Task 3: Create `src/routes/settings/+page.server.ts` — user settings page data
|
||||
- [ ] Task 4: Create `src/routes/settings/+page.svelte` — user settings page with theme customization
|
||||
- [ ] Task 5: Create `src/lib/components/settings/ThemeCustomizer.svelte` — HSL color picker, background selector, mode toggle
|
||||
- [ ] Task 6: Update theme store to load user preferences from server on login
|
||||
- [ ] Task 7: Update `+layout.server.ts` to pass user preferences
|
||||
- [ ] Task 8: Add user settings link to header user menu
|
||||
- [ ] Task 9: Add i18n translations (EN/RU)
|
||||
- [x] Task 1: Add `themeMode`, `primaryHue`, `primarySaturation`, `backgroundType`, `locale` fields to User model (Prisma migration)
|
||||
- [x] Task 2: Create `src/routes/api/users/me/preferences/+server.ts` — GET/PATCH user preferences
|
||||
- [x] Task 3: Create `src/routes/settings/+page.server.ts` — user settings page data
|
||||
- [x] Task 4: Create `src/routes/settings/+page.svelte` — user settings page with theme customization
|
||||
- [x] Task 5: Create `src/lib/components/settings/ThemeCustomizer.svelte` — HSL color picker, background selector, mode toggle
|
||||
- [x] Task 6: Update theme store to load user preferences from server on login
|
||||
- [x] Task 7: Update `+layout.server.ts` to pass user preferences
|
||||
- [x] Task 8: Add user settings link to header user menu
|
||||
- [x] Task 9: Add i18n translations (EN/RU)
|
||||
|
||||
## Handoff to Next Phase
|
||||
<!-- Filled in after completion -->
|
||||
Phase 3 (User Theme Overrides) complete. Added nullable preference fields to User model, preferences API (GET/PATCH), settings page with ThemeCustomizer component (hue/saturation sliders, mode toggle, background selector, locale picker), server-side preference loading in layout, and Settings link in Header user menu. i18n translations added for EN and RU.
|
||||
|
||||
Reference in New Issue
Block a user