alexei.dolgolyov
c9cab93d12
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>
295 lines
14 KiB
Svelte
295 lines
14 KiB
Svelte
<script lang="ts">
|
|
import '../app.css';
|
|
import { page } from '$app/state';
|
|
import { goto } from '$app/navigation';
|
|
import { onMount } from 'svelte';
|
|
import { fade } from 'svelte/transition';
|
|
import { api } from '$lib/api';
|
|
import { getAuth, loadUser, logout } from '$lib/auth.svelte';
|
|
import { t, initLocale, getLocale, setLocale, type Locale } from '$lib/i18n';
|
|
import { getTheme, initTheme, setTheme, type Theme } from '$lib/theme.svelte';
|
|
import Modal from '$lib/components/Modal.svelte';
|
|
import MdiIcon from '$lib/components/MdiIcon.svelte';
|
|
import Snackbar from '$lib/components/Snackbar.svelte';
|
|
import { snackSuccess, snackError } from '$lib/stores/snackbar.svelte';
|
|
|
|
let { children } = $props();
|
|
const auth = getAuth();
|
|
const theme = getTheme();
|
|
|
|
let showPasswordForm = $state(false);
|
|
let pwdCurrent = $state('');
|
|
let pwdNew = $state('');
|
|
let pwdMsg = $state('');
|
|
let pwdSuccess = $state(false);
|
|
|
|
async function changePassword(e: SubmitEvent) {
|
|
e.preventDefault(); pwdMsg = ''; pwdSuccess = false;
|
|
try {
|
|
await api('/auth/password', { method: 'PUT', body: JSON.stringify({ current_password: pwdCurrent, new_password: pwdNew }) });
|
|
pwdMsg = t('common.passwordChanged');
|
|
pwdSuccess = true;
|
|
pwdCurrent = ''; pwdNew = '';
|
|
snackSuccess(t('snack.passwordChanged'));
|
|
setTimeout(() => { showPasswordForm = false; pwdMsg = ''; pwdSuccess = false; }, 2000);
|
|
} catch (err: any) { pwdMsg = err.message; pwdSuccess = false; snackError(err.message); }
|
|
}
|
|
|
|
let collapsed = $state(false);
|
|
|
|
const navItems = [
|
|
{ href: '/', key: 'nav.dashboard', icon: 'mdiViewDashboard' },
|
|
{ href: '/providers', key: 'nav.providers', icon: 'mdiServer' },
|
|
{ href: '/trackers', key: 'nav.trackers', icon: 'mdiRadar' },
|
|
{ href: '/tracking-configs', key: 'nav.trackingConfigs', icon: 'mdiCog' },
|
|
{ href: '/template-configs', key: 'nav.templateConfigs', icon: 'mdiFileDocumentEdit' },
|
|
{ href: '/telegram-bots', key: 'nav.telegramBots', icon: 'mdiRobot' },
|
|
{ href: '/targets', key: 'nav.targets', icon: 'mdiTarget' },
|
|
];
|
|
|
|
const isAuthPage = $derived(
|
|
page.url.pathname === '/login' || page.url.pathname === '/setup'
|
|
);
|
|
|
|
onMount(async () => {
|
|
initLocale();
|
|
initTheme();
|
|
if (typeof localStorage !== 'undefined') {
|
|
collapsed = localStorage.getItem('sidebar_collapsed') === 'true';
|
|
}
|
|
await loadUser();
|
|
if (!auth.user && !isAuthPage) {
|
|
goto('/login');
|
|
}
|
|
});
|
|
|
|
function cycleTheme() {
|
|
const order: Theme[] = ['light', 'dark', 'system'];
|
|
const idx = order.indexOf(theme.current);
|
|
setTheme(order[(idx + 1) % order.length]);
|
|
}
|
|
|
|
function toggleLocale() {
|
|
setLocale(getLocale() === 'en' ? 'ru' : 'en');
|
|
}
|
|
|
|
function toggleSidebar() {
|
|
collapsed = !collapsed;
|
|
if (typeof localStorage !== 'undefined') {
|
|
localStorage.setItem('sidebar_collapsed', String(collapsed));
|
|
}
|
|
}
|
|
|
|
function isActive(href: string): boolean {
|
|
return page.url.pathname === href;
|
|
}
|
|
</script>
|
|
|
|
{#if isAuthPage}
|
|
{@render children()}
|
|
{:else if auth.loading}
|
|
<div class="min-h-screen flex items-center justify-center">
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-5 h-5 rounded-full border-2 border-[var(--color-primary)] border-t-transparent animate-spin"></div>
|
|
<p class="text-sm text-[var(--color-muted-foreground)]">{t('common.loading')}</p>
|
|
</div>
|
|
</div>
|
|
{:else if auth.user}
|
|
<div class="flex h-screen">
|
|
<!-- Sidebar -->
|
|
<aside
|
|
class="sidebar {collapsed ? 'w-[3.75rem]' : 'w-[15rem]'} flex flex-col max-md:hidden"
|
|
style="background: var(--color-sidebar); border-right: 1px solid var(--color-border); transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1);"
|
|
>
|
|
<!-- Header -->
|
|
<div class="flex items-center {collapsed ? 'justify-center p-2.5' : 'justify-between px-5 py-4'}" style="border-bottom: 1px solid var(--color-border);">
|
|
{#if !collapsed}
|
|
<div class="animate-fade-slide-in">
|
|
<h1 class="text-base font-semibold tracking-tight" style="color: var(--color-foreground);">
|
|
<span style="color: var(--color-primary);">Notify</span> Bridge
|
|
</h1>
|
|
<p class="text-[0.7rem] text-[var(--color-muted-foreground)] mt-0.5 tracking-wide uppercase">{t('app.tagline')}</p>
|
|
</div>
|
|
{/if}
|
|
<button onclick={toggleSidebar}
|
|
class="flex items-center justify-center w-8 h-8 rounded-lg transition-all duration-200"
|
|
style="color: var(--color-muted-foreground); background: transparent;"
|
|
onmouseenter={(e) => { e.currentTarget.style.background = 'var(--color-muted)'; e.currentTarget.style.color = 'var(--color-foreground)'; }}
|
|
onmouseleave={(e) => { e.currentTarget.style.background = 'transparent'; e.currentTarget.style.color = 'var(--color-muted-foreground)'; }}
|
|
title={collapsed ? t('common.expand') : t('common.collapse')}>
|
|
<MdiIcon name={collapsed ? 'mdiChevronRight' : 'mdiChevronLeft'} size={18} />
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Nav -->
|
|
<nav class="flex-1 p-2 space-y-0.5 overflow-y-auto">
|
|
{#each navItems as item}
|
|
<a
|
|
href={item.href}
|
|
class="nav-item group flex items-center gap-2.5 {collapsed ? 'justify-center px-2' : 'px-3'} py-2 rounded-lg text-sm transition-all duration-200 relative"
|
|
style="color: {isActive(item.href) ? 'var(--color-primary)' : 'var(--color-muted-foreground)'}; background: {isActive(item.href) ? 'var(--color-sidebar-active)' : 'transparent'}; font-weight: {isActive(item.href) ? '500' : '400'};"
|
|
onmouseenter={(e) => { if (!isActive(item.href)) { e.currentTarget.style.background = 'var(--color-muted)'; e.currentTarget.style.color = 'var(--color-foreground)'; } }}
|
|
onmouseleave={(e) => { if (!isActive(item.href)) { e.currentTarget.style.background = 'transparent'; e.currentTarget.style.color = 'var(--color-muted-foreground)'; } }}
|
|
title={collapsed ? t(item.key) : ''}
|
|
>
|
|
{#if isActive(item.href)}
|
|
<div class="active-indicator" style="position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 3px; height: 60%; border-radius: 0 3px 3px 0; background: var(--color-primary); box-shadow: 0 0 8px var(--color-glow-strong);"></div>
|
|
{/if}
|
|
<MdiIcon name={item.icon} size={18} />
|
|
{#if !collapsed}<span class="truncate">{t(item.key)}</span>{/if}
|
|
</a>
|
|
{/each}
|
|
{#if auth.isAdmin}
|
|
<a
|
|
href="/users"
|
|
class="nav-item group flex items-center gap-2.5 {collapsed ? 'justify-center px-2' : 'px-3'} py-2 rounded-lg text-sm transition-all duration-200 relative"
|
|
style="color: {isActive('/users') ? 'var(--color-primary)' : 'var(--color-muted-foreground)'}; background: {isActive('/users') ? 'var(--color-sidebar-active)' : 'transparent'}; font-weight: {isActive('/users') ? '500' : '400'};"
|
|
onmouseenter={(e) => { if (!isActive('/users')) { e.currentTarget.style.background = 'var(--color-muted)'; e.currentTarget.style.color = 'var(--color-foreground)'; } }}
|
|
onmouseleave={(e) => { if (!isActive('/users')) { e.currentTarget.style.background = 'transparent'; e.currentTarget.style.color = 'var(--color-muted-foreground)'; } }}
|
|
title={collapsed ? t('nav.users') : ''}
|
|
>
|
|
{#if isActive('/users')}
|
|
<div style="position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 3px; height: 60%; border-radius: 0 3px 3px 0; background: var(--color-primary); box-shadow: 0 0 8px var(--color-glow-strong);"></div>
|
|
{/if}
|
|
<MdiIcon name="mdiAccountGroup" size={18} />
|
|
{#if !collapsed}<span class="truncate">{t('nav.users')}</span>{/if}
|
|
</a>
|
|
{/if}
|
|
</nav>
|
|
|
|
<!-- Footer -->
|
|
<div style="border-top: 1px solid var(--color-border);">
|
|
<!-- Theme & Language -->
|
|
<div class="flex {collapsed ? 'flex-col items-center gap-1 p-2' : 'gap-1.5 px-4 py-2.5'}">
|
|
<button onclick={toggleLocale}
|
|
class="flex items-center justify-center {collapsed ? 'w-8 h-8' : 'px-2.5 py-1'} rounded-lg text-xs font-medium transition-all duration-200"
|
|
style="background: var(--color-muted); color: var(--color-muted-foreground);"
|
|
onmouseenter={(e) => { e.currentTarget.style.color = 'var(--color-foreground)'; e.currentTarget.style.boxShadow = '0 0 8px var(--color-glow)'; }}
|
|
onmouseleave={(e) => { e.currentTarget.style.color = 'var(--color-muted-foreground)'; e.currentTarget.style.boxShadow = 'none'; }}
|
|
title={t('common.language')}>
|
|
{getLocale().toUpperCase()}
|
|
</button>
|
|
<button onclick={cycleTheme}
|
|
class="flex items-center justify-center {collapsed ? 'w-8 h-8' : 'px-2.5 py-1'} rounded-lg text-xs transition-all duration-200"
|
|
style="background: var(--color-muted); color: var(--color-muted-foreground);"
|
|
onmouseenter={(e) => { e.currentTarget.style.color = 'var(--color-foreground)'; e.currentTarget.style.boxShadow = '0 0 8px var(--color-glow)'; }}
|
|
onmouseleave={(e) => { e.currentTarget.style.color = 'var(--color-muted-foreground)'; e.currentTarget.style.boxShadow = 'none'; }}
|
|
title={t('common.theme')}>
|
|
<MdiIcon name={theme.resolved === 'dark' ? 'mdiWeatherNight' : theme.current === 'system' ? 'mdiDesktopTowerMonitor' : 'mdiWeatherSunny'} size={14} />
|
|
</button>
|
|
</div>
|
|
|
|
<!-- User info -->
|
|
<div class="p-2.5" style="border-top: 1px solid var(--color-border);">
|
|
{#if collapsed}
|
|
<button onclick={logout}
|
|
class="w-full flex justify-center py-2 rounded-lg transition-all duration-200"
|
|
style="color: var(--color-muted-foreground);"
|
|
onmouseenter={(e) => { e.currentTarget.style.color = 'var(--color-foreground)'; e.currentTarget.style.background = 'var(--color-muted)'; }}
|
|
onmouseleave={(e) => { e.currentTarget.style.color = 'var(--color-muted-foreground)'; e.currentTarget.style.background = 'transparent'; }}
|
|
title={t('nav.logout')}>
|
|
<MdiIcon name="mdiLogout" size={16} />
|
|
</button>
|
|
{:else}
|
|
<div class="px-1.5">
|
|
<div class="flex items-center justify-between">
|
|
<div class="flex items-center gap-2.5">
|
|
<div class="w-7 h-7 rounded-full flex items-center justify-center text-[0.7rem] font-semibold"
|
|
style="background: var(--color-primary); color: var(--color-primary-foreground);">
|
|
{auth.user.username[0].toUpperCase()}
|
|
</div>
|
|
<div>
|
|
<p class="text-sm font-medium">{auth.user.username}</p>
|
|
<p class="text-[0.65rem] tracking-wide uppercase" style="color: var(--color-muted-foreground);">{auth.user.role}</p>
|
|
</div>
|
|
</div>
|
|
<button onclick={logout}
|
|
class="p-1.5 rounded-lg transition-all duration-200"
|
|
style="color: var(--color-muted-foreground);"
|
|
onmouseenter={(e) => { e.currentTarget.style.color = 'var(--color-foreground)'; e.currentTarget.style.background = 'var(--color-muted)'; }}
|
|
onmouseleave={(e) => { e.currentTarget.style.color = 'var(--color-muted-foreground)'; e.currentTarget.style.background = 'transparent'; }}
|
|
title={t('nav.logout')}>
|
|
<MdiIcon name="mdiLogout" size={15} />
|
|
</button>
|
|
</div>
|
|
<button onclick={() => showPasswordForm = true}
|
|
class="text-[0.7rem] mt-1.5 transition-colors duration-200 flex items-center gap-1"
|
|
style="color: var(--color-muted-foreground);"
|
|
onmouseenter={(e) => { e.currentTarget.style.color = 'var(--color-primary)'; }}
|
|
onmouseleave={(e) => { e.currentTarget.style.color = 'var(--color-muted-foreground)'; }}>
|
|
<MdiIcon name="mdiKeyVariant" size={12} />
|
|
{t('common.changePassword')}
|
|
</button>
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
|
|
<!-- Mobile bottom nav -->
|
|
<nav class="mobile-nav" style="position: fixed; bottom: 0; left: 0; right: 0; z-index: 50; background: var(--color-sidebar); border-top: 1px solid var(--color-border); display: none; justify-content: space-around; padding: 0.375rem 0; backdrop-filter: blur(12px);">
|
|
{#each navItems.slice(0, 5) as item}
|
|
<a href={item.href}
|
|
class="flex flex-col items-center gap-0.5 px-2 py-1.5 text-xs rounded-lg transition-all duration-200"
|
|
style="color: {isActive(item.href) ? 'var(--color-primary)' : 'var(--color-muted-foreground)'};">
|
|
<MdiIcon name={item.icon} size={20} />
|
|
</a>
|
|
{/each}
|
|
<button onclick={logout}
|
|
class="flex flex-col items-center gap-0.5 px-2 py-1.5 text-xs" style="color: var(--color-muted-foreground);">
|
|
<MdiIcon name="mdiLogout" size={20} />
|
|
</button>
|
|
</nav>
|
|
|
|
<!-- Main content -->
|
|
<main class="flex-1 overflow-auto pb-16 md:pb-0">
|
|
{#key page.url.pathname}
|
|
<div class="max-w-5xl mx-auto p-4 md:p-8" in:fade={{ duration: 200, delay: 50 }}>
|
|
{@render children()}
|
|
</div>
|
|
{/key}
|
|
</main>
|
|
</div>
|
|
{:else}
|
|
<div class="min-h-screen flex items-center justify-center">
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-5 h-5 rounded-full border-2 border-[var(--color-primary)] border-t-transparent animate-spin"></div>
|
|
<p class="text-sm text-[var(--color-muted-foreground)]">{t('common.loading')}</p>
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
|
|
<!-- Password change modal -->
|
|
<Modal open={showPasswordForm} title={t('common.changePassword')} onclose={() => { showPasswordForm = false; pwdMsg = ''; pwdSuccess = false; }}>
|
|
<form onsubmit={changePassword} class="space-y-3">
|
|
<div>
|
|
<label for="pwd-current" class="block text-sm font-medium mb-1">{t('common.currentPassword')}</label>
|
|
<input id="pwd-current" type="password" bind:value={pwdCurrent} required
|
|
class="w-full px-3 py-2 border border-[var(--color-border)] rounded-lg text-sm bg-[var(--color-background)]" />
|
|
</div>
|
|
<div>
|
|
<label for="pwd-new" class="block text-sm font-medium mb-1">{t('common.newPassword')}</label>
|
|
<input id="pwd-new" type="password" bind:value={pwdNew} required
|
|
class="w-full px-3 py-2 border border-[var(--color-border)] rounded-lg text-sm bg-[var(--color-background)]" />
|
|
</div>
|
|
{#if pwdMsg}
|
|
<p class="text-sm" style="color: var({pwdSuccess ? '--color-success-fg' : '--color-error-fg'});">{pwdMsg}</p>
|
|
{/if}
|
|
<button type="submit"
|
|
class="w-full py-2.5 rounded-lg text-sm font-medium transition-all duration-200"
|
|
style="background: var(--color-primary); color: var(--color-primary-foreground);"
|
|
onmouseenter={(e) => { e.currentTarget.style.boxShadow = '0 0 16px var(--color-glow-strong)'; }}
|
|
onmouseleave={(e) => { e.currentTarget.style.boxShadow = 'none'; }}>
|
|
{t('common.save')}
|
|
</button>
|
|
</form>
|
|
</Modal>
|
|
|
|
<Snackbar />
|
|
|
|
<style>
|
|
@media (max-width: 767px) {
|
|
.mobile-nav { display: flex !important; }
|
|
}
|
|
</style>
|