Add SvelteKit frontend with Tailwind CSS (Phase 4)
Some checks failed
Validate / Hassfest (push) Has been cancelled
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>
This commit is contained in:
72
plans/phase-4-frontend.md
Normal file
72
plans/phase-4-frontend.md
Normal file
@@ -0,0 +1,72 @@
|
||||
# Phase 4: Build SvelteKit Frontend
|
||||
|
||||
**Status**: In progress
|
||||
**Parent**: [primary-plan.md](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
|
||||
|
||||
1. **Login** `/login` -- Username/password form
|
||||
2. **Setup** `/setup` -- First-run admin account creation
|
||||
3. **Dashboard** `/` -- Overview: active trackers, recent events, stats
|
||||
4. **Servers** `/servers` -- CRUD Immich server connections
|
||||
5. **Trackers** `/trackers` -- CRUD album trackers with album picker
|
||||
6. **Templates** `/templates` -- Jinja2 template editor with live preview
|
||||
7. **Targets** `/targets` -- Manage Telegram/webhook notification targets
|
||||
8. **Users** `/users` -- Admin-only user management
|
||||
|
||||
---
|
||||
|
||||
## Tasks
|
||||
|
||||
### 1. Scaffold project `[ ]`
|
||||
- `npx sv create frontend` with 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)
|
||||
Reference in New Issue
Block a user