Add SvelteKit frontend with Tailwind CSS (Phase 4)
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:
2026-03-19 13:46:55 +03:00
parent 58b2281dc6
commit 87ce1bc5ec
29 changed files with 4891 additions and 2 deletions

View File

@@ -0,0 +1,19 @@
<script lang="ts">
let { title, description = '', children } = $props<{
title: string;
description?: string;
children?: import('svelte').Snippet;
}>();
</script>
<div class="flex items-center justify-between mb-6">
<div>
<h2 class="text-2xl font-semibold tracking-tight">{title}</h2>
{#if description}
<p class="text-sm text-[var(--color-muted-foreground)] mt-1">{description}</p>
{/if}
</div>
{#if children}
{@render children()}
{/if}
</div>