# 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)