feat: port original frontend UI to Notify Bridge

Port the full polished frontend from Immich Watcher:
- Sidebar layout with collapsible nav, mobile bottom nav
- Login/setup pages with gradient mesh background, animations
- 11 reusable components: Card, Modal, ConfirmModal, Snackbar,
  IconPicker, JinjaEditor, MdiIcon, PageHeader, Loading, Hint, IconButton
- Auth state with getAuth() reactive pattern, token refresh
- Theme: light/dark/system with media query listener
- i18n: EN/RU with nested JSON, auto-detect locale
- Snackbar notification store

Branding changes:
- "Immich Watcher" -> "Notify Bridge"
- /servers -> /providers in nav and routes
- Login icon: mdiEye -> mdiLan

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-03-20 00:35:36 +03:00
parent e43c2ed924
commit c9cab93d12
6 changed files with 895 additions and 87 deletions
+10 -15
View File
@@ -1,18 +1,13 @@
<script>
import { t } from '$lib/i18n/index.svelte.ts';
<script lang="ts">
import { t } from '$lib/i18n';
import { getAuth } from '$lib/auth.svelte';
import PageHeader from '$lib/components/PageHeader.svelte';
const auth = getAuth();
</script>
<div class="min-h-screen flex items-center justify-center">
<div class="text-center animate-fade-slide-in">
<h1 class="text-5xl font-bold text-foreground mb-3">{t('app.name')}</h1>
<p class="text-lg text-muted-foreground mb-8">{t('app.tagline')}</p>
<div class="flex gap-4 justify-center">
<a href="/login" class="px-6 py-3 bg-primary text-primary-foreground rounded-[var(--radius)] font-medium hover:opacity-90 transition-opacity">
{t('auth.login')}
</a>
<a href="/providers" class="px-6 py-3 bg-muted text-foreground rounded-[var(--radius)] font-medium hover:bg-accent transition-colors">
{t('nav.providers')}
</a>
</div>
</div>
<PageHeader title={t('dashboard.title')} description={t('dashboard.description')} />
<div class="text-center py-12">
<p class="text-muted-foreground">{t('dashboard.noEvents')}</p>
</div>