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:
87
frontend/src/routes/servers/+page.svelte
Normal file
87
frontend/src/routes/servers/+page.svelte
Normal file
@@ -0,0 +1,87 @@
|
||||
<script lang="ts">
|
||||
import { onMount } from 'svelte';
|
||||
import { api } from '$lib/api';
|
||||
import PageHeader from '$lib/components/PageHeader.svelte';
|
||||
import Card from '$lib/components/Card.svelte';
|
||||
|
||||
let servers = $state<any[]>([]);
|
||||
let showForm = $state(false);
|
||||
let form = $state({ name: 'Immich', url: '', api_key: '' });
|
||||
let error = $state('');
|
||||
let submitting = $state(false);
|
||||
|
||||
onMount(load);
|
||||
|
||||
async function load() {
|
||||
try { servers = await api('/servers'); } catch { /* ignore */ }
|
||||
}
|
||||
|
||||
async function create(e: SubmitEvent) {
|
||||
e.preventDefault();
|
||||
error = '';
|
||||
submitting = true;
|
||||
try {
|
||||
await api('/servers', { method: 'POST', body: JSON.stringify(form) });
|
||||
form = { name: 'Immich', url: '', api_key: '' };
|
||||
showForm = false;
|
||||
await load();
|
||||
} catch (err: any) { error = err.message; }
|
||||
submitting = false;
|
||||
}
|
||||
|
||||
async function remove(id: number) {
|
||||
if (!confirm('Delete this server?')) return;
|
||||
await api(`/servers/${id}`, { method: 'DELETE' });
|
||||
await load();
|
||||
}
|
||||
</script>
|
||||
|
||||
<PageHeader title="Servers" description="Manage Immich server connections">
|
||||
<button onclick={() => showForm = !showForm}
|
||||
class="px-3 py-1.5 bg-[var(--color-primary)] text-[var(--color-primary-foreground)] rounded-md text-sm font-medium hover:opacity-90">
|
||||
{showForm ? 'Cancel' : 'Add Server'}
|
||||
</button>
|
||||
</PageHeader>
|
||||
|
||||
{#if showForm}
|
||||
<Card class="mb-6">
|
||||
{#if error}
|
||||
<div class="bg-red-50 text-red-700 text-sm rounded-md p-3 mb-4">{error}</div>
|
||||
{/if}
|
||||
<form onsubmit={create} class="space-y-3">
|
||||
<div>
|
||||
<label class="block text-sm font-medium mb-1">Name</label>
|
||||
<input bind:value={form.name} required class="w-full px-3 py-2 border border-[var(--color-border)] rounded-md text-sm bg-[var(--color-background)]" />
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium mb-1">Immich URL</label>
|
||||
<input bind:value={form.url} required placeholder="http://immich:2283" class="w-full px-3 py-2 border border-[var(--color-border)] rounded-md text-sm bg-[var(--color-background)]" />
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium mb-1">API Key</label>
|
||||
<input bind:value={form.api_key} required type="password" class="w-full px-3 py-2 border border-[var(--color-border)] rounded-md text-sm bg-[var(--color-background)]" />
|
||||
</div>
|
||||
<button type="submit" disabled={submitting} class="px-4 py-2 bg-[var(--color-primary)] text-[var(--color-primary-foreground)] rounded-md text-sm font-medium hover:opacity-90 disabled:opacity-50">
|
||||
{submitting ? 'Connecting...' : 'Add Server'}
|
||||
</button>
|
||||
</form>
|
||||
</Card>
|
||||
{/if}
|
||||
|
||||
{#if servers.length === 0 && !showForm}
|
||||
<Card><p class="text-sm text-[var(--color-muted-foreground)]">No servers configured yet.</p></Card>
|
||||
{:else}
|
||||
<div class="space-y-3">
|
||||
{#each servers as server}
|
||||
<Card>
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<p class="font-medium">{server.name}</p>
|
||||
<p class="text-sm text-[var(--color-muted-foreground)]">{server.url}</p>
|
||||
</div>
|
||||
<button onclick={() => remove(server.id)} class="text-xs text-[var(--color-destructive)] hover:underline">Delete</button>
|
||||
</div>
|
||||
</Card>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
Reference in New Issue
Block a user