alexei.dolgolyov
87ce1bc5ec
Some checks failed
Validate / Hassfest (push) Has been cancelled
Build a modern, calm web UI using SvelteKit 5 + Tailwind CSS v4. Pages: - Setup wizard (first-run admin account creation) - Login with JWT token management and auto-refresh - Dashboard with stats cards and recent events timeline - Servers: add/delete Immich server connections with validation - Trackers: create album trackers with album picker, event type selection, target assignment, and scan interval config - Templates: Jinja2 message template editor with live preview - Targets: Telegram and webhook notification targets with test - Users: admin-only user management (create/delete) Architecture: - Reactive auth state with Svelte 5 runes - API client with JWT auth, auto-refresh on 401 - Static adapter builds to 153KB for embedding in FastAPI - Vite proxy config for dev server -> backend API - Sidebar layout with navigation and user info Also adds Rule 2 to primary plan: perform detailed code review after completing each phase. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2.1 KiB
2.1 KiB
Phase 4: Build SvelteKit Frontend
Status: In progress Parent: primary-plan.md
Goal
Build a modern, calm web UI using SvelteKit + Shadcn-svelte that communicates with the Phase 3 FastAPI backend.
Tech Stack
- Framework: SvelteKit (static adapter for embedding in FastAPI)
- UI Components: shadcn-svelte (Tailwind CSS based)
- Icons: Lucide
- HTTP Client: fetch API with auth interceptor
Pages
- Login
/login-- Username/password form - Setup
/setup-- First-run admin account creation - Dashboard
/-- Overview: active trackers, recent events, stats - Servers
/servers-- CRUD Immich server connections - Trackers
/trackers-- CRUD album trackers with album picker - Templates
/templates-- Jinja2 template editor with live preview - Targets
/targets-- Manage Telegram/webhook notification targets - Users
/users-- Admin-only user management
Tasks
1. Scaffold project [ ]
npx sv create frontendwith TypeScript- Install shadcn-svelte, tailwindcss, lucide-svelte
- Configure static adapter for build output
- Set up API client with JWT auth
2. Auth flow [ ]
- Login page with form
- Setup wizard (shown when /api/auth/needs-setup returns true)
- Token storage in localStorage
- Auth guard redirect to /login
3. Layout [ ]
- Sidebar with navigation links
- Header with user info and logout
- Responsive mobile menu
4-8. Pages [ ]
- Each page: list view, create/edit dialog, delete confirmation
- Trackers page: album picker fetched from Immich via server API
- Templates page: textarea with preview panel
- Targets page: type-specific config forms (Telegram/webhook)
9. Build config [ ]
- Static adapter outputs to
packages/server/src/immich_watcher_server/frontend/ - npm build script copies dist to server package
Acceptance Criteria
- All pages functional against the backend API
- Auth flow works (setup, login, token refresh)
- Static build serves correctly from FastAPI
- Modern, calm UI aesthetic (clean typography, muted colors)