Redesign frontend UI with Observatory theme

New teal-accent color system, DM Sans + JetBrains Mono typography, glow effects, animated gradient login page, animated dashboard counters with gradient-border stat cards, event timeline, sidebar with active glow indicators, and polished components (modals, cards, snackbar). Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Fix chat copy snack message, improve server restart in CLAUDE.md
2026-03-19 22:10:06 +03:00 · 2026-03-19 21:57:02 +03:00 · 2026-03-19 21:51:45 +03:00 · 2026-03-19 21:45:20 +03:00 · 2026-03-19 21:39:05 +03:00
32 changed files with 2820 additions and 306 deletions
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -33,18 +33,17 @@ The README is the primary user-facing documentation and must accurately reflect

 ## Development Servers

-**IMPORTANT**: When the user requests it OR when backend code changes are made (files in `packages/server/`), you MUST restart the standalone server:
-1. Kill the existing process on port 8420
-2. Reinstall: `cd packages/server && pip install -e .`
-3. Start: `cd <repo_root> && IMMICH_WATCHER_DATA_DIR=./test-data IMMICH_WATCHER_SECRET_KEY=test-secret-key-minimum-32chars nohup python -m uvicorn immich_watcher_server.main:app --host 0.0.0.0 --port 8420 > /dev/null 2>&1 &`
-4. Verify: `curl -s http://localhost:8420/api/health`
+**IMPORTANT**: When the user requests it OR when backend code changes are made (files in `packages/server/`), you MUST restart the standalone server using this one-liner:
+```bash
+PID=$(netstat -ano 2>/dev/null | grep ':8420.*LISTENING' | awk '{print $5}' | head -1) && [ -n "$PID" ] && taskkill //F //PID $PID 2>/dev/null; sleep 1 && cd packages/server && pip install -e . 2>&1 | tail -1 && cd ../.. && IMMICH_WATCHER_DATA_DIR=./test-data IMMICH_WATCHER_SECRET_KEY=test-secret-key-minimum-32chars nohup python -m uvicorn immich_watcher_server.main:app --host 0.0.0.0 --port 8420 > /dev/null 2>&1 & sleep 3 && curl -s http://localhost:8420/api/health
+```

 **IMPORTANT**: Overlays (modals, dropdowns, pickers) MUST use `position: fixed` with inline styles and `z-index: 9999`. Tailwind CSS v4 `fixed`/`absolute` classes do NOT work reliably inside flex/overflow containers in this project. Always calculate position from `getBoundingClientRect()` for dropdowns, or use `top:0;left:0;right:0;bottom:0` for full-screen backdrops.

-**IMPORTANT**: When the user requests it, restart the frontend dev server:
-1. Kill existing process on port 5173
-2. Start: `cd frontend && npx vite dev --port 5173 --host &`
-3. Verify: `curl -s -o /dev/null -w "%{http_code}" http://localhost:5173/`
+**IMPORTANT**: When the user requests it, restart the frontend dev server using this one-liner:
+```bash
+PID=$(netstat -ano 2>/dev/null | grep ':5173.*LISTENING' | awk '{print $5}' | head -1) && [ -n "$PID" ] && taskkill //F //PID $PID 2>/dev/null; sleep 1 && cd frontend && npx vite dev --port 5173 --host > /dev/null 2>&1 & sleep 4 && curl -s -o /dev/null -w "Frontend: %{http_code}" http://localhost:5173/
+```

 ## Frontend Architecture Notes

--- a/frontend/src/app.css
+++ b/frontend/src/app.css
@@ -1,80 +1,105 @@
@import 'tailwindcss';

@theme {
-	--color-background: #fafafa;
-	--color-foreground: #18181b;
-	--color-muted: #f4f4f5;
-	--color-muted-foreground: #71717a;
-	--color-border: #e4e4e7;
-	--color-primary: #18181b;
-	--color-primary-foreground: #fafafa;
-	--color-accent: #f4f4f5;
-	--color-accent-foreground: #18181b;
+	--color-background: #f8f9fb;
+	--color-foreground: #1a1a2e;
+	--color-muted: #eef0f4;
+	--color-muted-foreground: #6b7280;
+	--color-border: #e2e4ea;
+	--color-primary: #0d9488;
+	--color-primary-foreground: #ffffff;
+	--color-accent: #eef0f4;
+	--color-accent-foreground: #1a1a2e;
 	--color-destructive: #ef4444;
 	--color-card: #ffffff;
-	--color-card-foreground: #18181b;
-	--color-success-bg: #f0fdf4;
-	--color-success-fg: #15803d;
-	--color-warning-bg: #fefce8;
-	--color-warning-fg: #a16207;
+	--color-card-foreground: #1a1a2e;
+	--color-success-bg: #ecfdf5;
+	--color-success-fg: #059669;
+	--color-warning-bg: #fffbeb;
+	--color-warning-fg: #d97706;
 	--color-error-bg: #fef2f2;
 	--color-error-fg: #dc2626;
-	--font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;
-	--radius: 0.5rem;
+	--color-glow: rgba(13, 148, 136, 0.15);
+	--color-glow-strong: rgba(13, 148, 136, 0.3);
+	--color-sidebar: #ffffff;
+	--color-sidebar-active: rgba(13, 148, 136, 0.08);
+	--font-sans: 'DM Sans', ui-sans-serif, system-ui, sans-serif;
+	--font-mono: 'JetBrains Mono', ui-monospace, monospace;
+	--radius: 0.625rem;
 }

 /* Dark theme overrides */
 [data-theme="dark"] {
-	--color-background: #09090b;
-	--color-foreground: #fafafa;
-	--color-muted: #27272a;
-	--color-muted-foreground: #a1a1aa;
-	--color-border: #3f3f46;
-	--color-primary: #3f3f46;
-	--color-primary-foreground: #fafafa;
-	--color-accent: #27272a;
-	--color-accent-foreground: #fafafa;
+	--color-background: #0c0e14;
+	--color-foreground: #e4e6ed;
+	--color-muted: #1a1d28;
+	--color-muted-foreground: #8b8fa4;
+	--color-border: #252836;
+	--color-primary: #14b8a6;
+	--color-primary-foreground: #0c0e14;
+	--color-accent: #1a1d28;
+	--color-accent-foreground: #e4e6ed;
 	--color-destructive: #f87171;
-	--color-card: #18181b;
-	--color-card-foreground: #fafafa;
+	--color-card: #13151e;
+	--color-card-foreground: #e4e6ed;
 	--color-success-bg: #052e16;
-	--color-success-fg: #4ade80;
+	--color-success-fg: #34d399;
 	--color-warning-bg: #422006;
-	--color-warning-fg: #facc15;
+	--color-warning-fg: #fbbf24;
 	--color-error-bg: #450a0a;
 	--color-error-fg: #f87171;
+	--color-glow: rgba(20, 184, 166, 0.12);
+	--color-glow-strong: rgba(20, 184, 166, 0.25);
+	--color-sidebar: #10121a;
+	--color-sidebar-active: rgba(20, 184, 166, 0.1);
 }

 body {
 	font-family: var(--font-sans);
 	background-color: var(--color-background);
 	color: var(--color-foreground);
-	transition: background-color 0.2s, color 0.2s;
+	transition: background-color 0.3s ease, color 0.3s ease;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
 }

-/* Ensure all form controls respect the theme */
+/* Subtle background pattern */
+body::before {
+	content: '';
+	position: fixed;
+	inset: 0;
+	z-index: -1;
+	opacity: 0.4;
+	background-image: radial-gradient(circle at 1px 1px, var(--color-border) 0.5px, transparent 0);
+	background-size: 32px 32px;
+	pointer-events: none;
+}
+
+/* Form controls */
 input, select, textarea {
 	color: var(--color-foreground);
 	background-color: var(--color-background);
 	border-color: var(--color-border);
+	font-family: var(--font-sans);
+	transition: border-color 0.2s ease, box-shadow 0.2s ease;
 }

-/* Global focus-visible styles for accessibility */
 input:focus-visible, select:focus-visible, textarea:focus-visible {
-	outline: 2px solid var(--color-primary);
-	outline-offset: 2px;
+	outline: none;
+	border-color: var(--color-primary);
+	box-shadow: 0 0 0 3px var(--color-glow), 0 0 12px var(--color-glow);
 }

 button:focus-visible {
 	outline: 2px solid var(--color-primary);
 	outline-offset: 2px;
-	border-radius: 0.25rem;
+	border-radius: 0.375rem;
 }

 a:focus-visible {
 	outline: 2px solid var(--color-primary);
 	outline-offset: 2px;
-	border-radius: 0.25rem;
+	border-radius: 0.375rem;
 }

 /* Override browser autofill styles in dark mode */
@@ -82,16 +107,82 @@ a:focus-visible {
 [data-theme="dark"] input:-webkit-autofill:hover,
 [data-theme="dark"] input:-webkit-autofill:focus,
 [data-theme="dark"] select:-webkit-autofill {
-	-webkit-box-shadow: 0 0 0 1000px #18181b inset !important;
-	-webkit-text-fill-color: #fafafa !important;
-	caret-color: #fafafa;
+	-webkit-box-shadow: 0 0 0 1000px #13151e inset !important;
+	-webkit-text-fill-color: #e4e6ed !important;
+	caret-color: #e4e6ed;
 }

-/* Dark mode color-scheme for native controls (scrollbars, checkboxes) */
-[data-theme="dark"] {
-	color-scheme: dark;
+/* Color scheme for native controls */
+[data-theme="dark"] { color-scheme: dark; }
+[data-theme="light"] { color-scheme: light; }
+
+/* Scrollbar styling */
+::-webkit-scrollbar { width: 6px; height: 6px; }
+::-webkit-scrollbar-track { background: transparent; }
+::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 3px; }
+::-webkit-scrollbar-thumb:hover { background: var(--color-muted-foreground); }
+
+/* Stagger animation utility */
+@keyframes fadeSlideIn {
+	from { opacity: 0; transform: translateY(12px); }
+	to { opacity: 1; transform: translateY(0); }
 }

-[data-theme="light"] {
-	color-scheme: light;
+@keyframes shimmer {
+	0% { background-position: -200% 0; }
+	100% { background-position: 200% 0; }
+}
+
+@keyframes pulseGlow {
+	0%, 100% { box-shadow: 0 0 4px var(--color-glow); }
+	50% { box-shadow: 0 0 16px var(--color-glow-strong); }
+}
+
+@keyframes countUp {
+	from { opacity: 0; transform: translateY(8px); }
+	to { opacity: 1; transform: translateY(0); }
+}
+
+@keyframes gradientShift {
+	0% { background-position: 0% 50%; }
+	50% { background-position: 100% 50%; }
+	100% { background-position: 0% 50%; }
+}
+
+.animate-fade-slide-in {
+	animation: fadeSlideIn 0.4s ease-out both;
+}
+
+.animate-shimmer {
+	background: linear-gradient(90deg, var(--color-muted) 25%, var(--color-border) 50%, var(--color-muted) 75%);
+	background-size: 200% 100%;
+	animation: shimmer 1.5s ease-in-out infinite;
+}
+
+.animate-pulse-glow {
+	animation: pulseGlow 2s ease-in-out infinite;
+}
+
+.animate-count-up {
+	animation: countUp 0.5s ease-out both;
+}
+
+/* Stagger children utility — add .stagger-children to parent */
+.stagger-children > * {
+	animation: fadeSlideIn 0.4s ease-out both;
+}
+.stagger-children > *:nth-child(1) { animation-delay: 0ms; }
+.stagger-children > *:nth-child(2) { animation-delay: 60ms; }
+.stagger-children > *:nth-child(3) { animation-delay: 120ms; }
+.stagger-children > *:nth-child(4) { animation-delay: 180ms; }
+.stagger-children > *:nth-child(5) { animation-delay: 240ms; }
+.stagger-children > *:nth-child(6) { animation-delay: 300ms; }
+.stagger-children > *:nth-child(7) { animation-delay: 360ms; }
+.stagger-children > *:nth-child(8) { animation-delay: 420ms; }
+.stagger-children > *:nth-child(9) { animation-delay: 480ms; }
+.stagger-children > *:nth-child(10) { animation-delay: 540ms; }
+
+/* Mono text utility */
+.font-mono {
+	font-family: var(--font-mono);
 }
--- a/frontend/src/app.html
+++ b/frontend/src/app.html
@@ -4,6 +4,9 @@
 		<meta charset="utf-8" />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+		<link rel="preconnect" href="https://fonts.googleapis.com" />
+		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+		<link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300..700;1,9..40,300..700&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet" />
 		<title>Immich Watcher</title>
 		%sveltekit.head%
 	</head>
--- a/frontend/src/lib/components/Card.svelte
+++ b/frontend/src/lib/components/Card.svelte
@@ -6,6 +6,22 @@
 	}>();
 </script>

-<div class="bg-[var(--color-card)] border border-[var(--color-border)] rounded-lg p-4 {hover ? 'transition-all duration-150 hover:shadow-md hover:-translate-y-px' : ''} {className}">
+<div
+	class="card-component {hover ? 'card-hover' : ''} {className}"
+	style="background: var(--color-card); border: 1px solid var(--color-border); border-radius: 0.75rem; padding: 1.25rem;"
+>
 	{@render children()}
 </div>
+
+<style>
+	.card-component {
+		transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
+	}
+
+	.card-hover:hover {
+		border-color: var(--color-primary);
+		box-shadow: 0 4px 16px var(--color-glow), 0 0 0 1px var(--color-glow);
+		transform: translateY(-2px);
+	}
+</style>
--- a/frontend/src/lib/components/ConfirmModal.svelte
+++ b/frontend/src/lib/components/ConfirmModal.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import Modal from './Modal.svelte';
+	import MdiIcon from './MdiIcon.svelte';
 	import { t } from '$lib/i18n';

 	let { open = false, title = '', message = '', onconfirm, oncancel } = $props<{
@@ -12,15 +13,59 @@
 </script>

 <Modal {open} title={title || t('common.confirm')} onclose={oncancel}>
-	<p class="text-sm text-[var(--color-muted-foreground)] mb-4">{message}</p>
+	<div class="flex items-start gap-3 mb-5">
+		<div class="flex items-center justify-center w-9 h-9 rounded-full flex-shrink-0"
+			style="background: var(--color-error-bg); color: var(--color-error-fg);">
+			<MdiIcon name="mdiAlertCircle" size={20} />
+		</div>
+		<p class="text-sm mt-1.5" style="color: var(--color-muted-foreground);">{message}</p>
+	</div>
 	<div class="flex gap-2 justify-end">
 		<button onclick={oncancel}
-			class="px-3 py-1.5 rounded-md text-sm border border-[var(--color-border)] hover:bg-[var(--color-muted)] transition-colors">
+			class="confirm-btn-cancel">
 			{t('common.cancel')}
 		</button>
 		<button onclick={onconfirm}
-			class="px-3 py-1.5 rounded-md text-sm bg-[var(--color-destructive)] text-white hover:opacity-90 transition-opacity">
+			class="confirm-btn-delete">
+			<MdiIcon name="mdiDelete" size={15} />
 			{t('common.delete')}
 		</button>
 	</div>
 </Modal>
+
+<style>
+	.confirm-btn-cancel {
+		padding: 0.5rem 1rem;
+		border-radius: 0.5rem;
+		font-size: 0.875rem;
+		border: 1px solid var(--color-border);
+		background: transparent;
+		color: var(--color-foreground);
+		cursor: pointer;
+		transition: all 0.2s ease;
+	}
+
+	.confirm-btn-cancel:hover {
+		background: var(--color-muted);
+	}
+
+	.confirm-btn-delete {
+		display: flex;
+		align-items: center;
+		gap: 0.375rem;
+		padding: 0.5rem 1rem;
+		border-radius: 0.5rem;
+		font-size: 0.875rem;
+		font-weight: 500;
+		border: none;
+		background: var(--color-destructive);
+		color: white;
+		cursor: pointer;
+		transition: all 0.2s ease;
+	}
+
+	.confirm-btn-delete:hover {
+		box-shadow: 0 0 16px rgba(239, 68, 68, 0.3);
+		transform: translateY(-1px);
+	}
+</style>
--- a/frontend/src/lib/components/IconButton.svelte
+++ b/frontend/src/lib/components/IconButton.svelte
@@ -10,17 +10,56 @@
 		size?: number;
 		class?: string;
 	}>();
-
-	const variantClasses = {
-		default: 'text-[var(--color-muted-foreground)] hover:text-[var(--color-foreground)] hover:bg-[var(--color-muted)]',
-		danger: 'text-[var(--color-muted-foreground)] hover:text-[var(--color-destructive)] hover:bg-[var(--color-error-bg)]',
-		success: 'text-[var(--color-muted-foreground)] hover:text-[var(--color-success-fg)] hover:bg-[var(--color-success-bg)]',
-	};
 </script>

 <button type="button" {title} {onclick} {disabled}
-	class="inline-flex items-center justify-center w-7 h-7 rounded-md transition-colors
-		disabled:opacity-40 disabled:pointer-events-none {variantClasses[variant]} {className}"
+	class="icon-btn icon-btn-{variant} {className}"
 >
 	<MdiIcon name={icon} {size} />
 </button>
+
+<style>
+	.icon-btn {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		width: 2rem;
+		height: 2rem;
+		border-radius: 0.5rem;
+		border: none;
+		background: transparent;
+		cursor: pointer;
+		transition: all 0.2s ease;
+	}
+
+	.icon-btn:disabled {
+		opacity: 0.4;
+		pointer-events: none;
+	}
+
+	.icon-btn-default {
+		color: var(--color-muted-foreground);
+	}
+	.icon-btn-default:hover {
+		color: var(--color-foreground);
+		background: var(--color-muted);
+	}
+
+	.icon-btn-danger {
+		color: var(--color-muted-foreground);
+	}
+	.icon-btn-danger:hover {
+		color: var(--color-destructive);
+		background: var(--color-error-bg);
+		box-shadow: 0 0 8px rgba(239, 68, 68, 0.15);
+	}
+
+	.icon-btn-success {
+		color: var(--color-muted-foreground);
+	}
+	.icon-btn-success:hover {
+		color: var(--color-success-fg);
+		background: var(--color-success-bg);
+		box-shadow: 0 0 8px rgba(5, 150, 105, 0.15);
+	}
+</style>
--- a/frontend/src/lib/components/Loading.svelte
+++ b/frontend/src/lib/components/Loading.svelte
@@ -2,8 +2,23 @@
 	let { lines = 3 } = $props<{ lines?: number }>();
 </script>

-<div class="space-y-3 animate-pulse">
-	{#each Array(lines) as _}
-		<div class="bg-[var(--color-muted)] rounded-lg h-16"></div>
+<div class="space-y-3">
+	{#each Array(lines) as _, i}
+		<div class="loading-bar" style="animation-delay: {i * 100}ms;"></div>
 	{/each}
 </div>
+
+<style>
+	.loading-bar {
+		height: 4rem;
+		border-radius: 0.75rem;
+		background: linear-gradient(90deg, var(--color-muted) 25%, var(--color-border) 50%, var(--color-muted) 75%);
+		background-size: 200% 100%;
+		animation: shimmer 1.5s ease-in-out infinite;
+	}
+
+	@keyframes shimmer {
+		0% { background-position: -200% 0; }
+		100% { background-position: 200% 0; }
+	}
+</style>
--- a/frontend/src/lib/components/Modal.svelte
+++ b/frontend/src/lib/components/Modal.svelte
@@ -1,4 +1,7 @@
 <script lang="ts">
+	import { onMount } from 'svelte';
+	import MdiIcon from './MdiIcon.svelte';
+
 	let { open = false, title = '', onclose, children } = $props<{
 		open: boolean;
 		title?: string;
@@ -6,6 +9,17 @@
 		children: import('svelte').Snippet;
 	}>();

+	let visible = $state(false);
+
+	$effect(() => {
+		if (open) {
+			// Small delay for enter animation
+			requestAnimationFrame(() => { visible = true; });
+		} else {
+			visible = false;
+		}
+	});
+
 	function handleKeydown(e: KeyboardEvent) {
 		if (e.key === 'Escape') onclose();
 	}
@@ -17,23 +31,79 @@
 	<!-- svelte-ignore a11y_click_events_have_key_events -->
 	<!-- svelte-ignore a11y_no_static_element_interactions -->
 	<div
-		style="position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.5);"
+		class="modal-backdrop"
+		class:visible
+		style="position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 9999; display: flex; align-items: center; justify-content: center;"
 		onclick={onclose}
 	>
 		<div
-			style="background: var(--color-card); border: 1px solid var(--color-border); border-radius: 0.5rem; box-shadow: 0 10px 25px rgba(0,0,0,0.3); width: 100%; max-width: 32rem; max-height: 80vh; margin: 1rem; display: flex; flex-direction: column;"
+			class="modal-panel"
+			class:visible
+			style="background: var(--color-card); border: 1px solid var(--color-border); border-radius: 1rem; width: 100%; max-width: 32rem; max-height: 80vh; margin: 1rem; display: flex; flex-direction: column;"
 			onclick={(e) => e.stopPropagation()}
 		>
-			<div style="display: flex; align-items: center; justify-content: space-between; padding: 1.25rem 1.25rem 0.75rem;">
+			<div style="display: flex; align-items: center; justify-content: space-between; padding: 1.5rem 1.5rem 1rem;">
 				<h3 style="font-size: 1.125rem; font-weight: 600;">{title}</h3>
-				<button onclick={onclose}
-					style="color: var(--color-muted-foreground); font-size: 1.25rem; line-height: 1; cursor: pointer; background: none; border: none; padding: 0.25rem;">
-					&times;
+				<button class="modal-close" onclick={onclose}>
+					<MdiIcon name="mdiClose" size={18} />
 				</button>
 			</div>
-			<div style="padding: 0 1.25rem 1.25rem; overflow-y: auto;">
+			<div style="padding: 0 1.5rem 1.5rem; overflow-y: auto;">
 				{@render children()}
 			</div>
 		</div>
 	</div>
 {/if}
+
+<style>
+	.modal-backdrop {
+		background: rgba(0, 0, 0, 0);
+		backdrop-filter: blur(0px);
+		transition: background 0.25s ease, backdrop-filter 0.25s ease;
+	}
+
+	.modal-backdrop.visible {
+		background: rgba(0, 0, 0, 0.5);
+		backdrop-filter: blur(4px);
+	}
+
+	.modal-panel {
+		opacity: 0;
+		transform: translateY(12px) scale(0.97);
+		transition: opacity 0.25s ease, transform 0.25s ease;
+		box-shadow:
+			0 8px 32px rgba(0, 0, 0, 0.12),
+			0 0 0 1px rgba(255, 255, 255, 0.05) inset;
+	}
+
+	:global([data-theme="dark"]) .modal-panel {
+		box-shadow:
+			0 8px 32px rgba(0, 0, 0, 0.4),
+			0 0 48px var(--color-glow),
+			0 0 0 1px rgba(255, 255, 255, 0.03) inset;
+	}
+
+	.modal-panel.visible {
+		opacity: 1;
+		transform: translateY(0) scale(1);
+	}
+
+	.modal-close {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 2rem;
+		height: 2rem;
+		border-radius: 0.5rem;
+		border: none;
+		background: transparent;
+		color: var(--color-muted-foreground);
+		cursor: pointer;
+		transition: all 0.2s ease;
+	}
+
+	.modal-close:hover {
+		background: var(--color-muted);
+		color: var(--color-foreground);
+	}
+</style>
--- a/frontend/src/lib/components/PageHeader.svelte
+++ b/frontend/src/lib/components/PageHeader.svelte
@@ -6,14 +6,16 @@
 	}>();
 </script>

-<div class="flex items-center justify-between mb-6">
-	<div>
+<div class="flex items-center justify-between mb-8">
+	<div class="animate-fade-slide-in">
 		<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>
+			<p class="text-sm mt-1.5" style="color: var(--color-muted-foreground);">{description}</p>
 		{/if}
 	</div>
 	{#if children}
-		{@render children()}
+		<div class="animate-fade-slide-in" style="animation-delay: 60ms;">
+			{@render children()}
+		</div>
 	{/if}
 </div>
--- a/frontend/src/lib/components/Snackbar.svelte
+++ b/frontend/src/lib/components/Snackbar.svelte
@@ -0,0 +1,149 @@
+<script lang="ts">
+	import { fly, fade } from 'svelte/transition';
+	import { getSnacks, removeSnack, type Snack } from '$lib/stores/snackbar.svelte';
+	import MdiIcon from '$lib/components/MdiIcon.svelte';
+
+	const snacks = $derived(getSnacks());
+
+	let expandedIds = $state<Set<number>>(new Set());
+
+	function toggleDetail(id: number) {
+		const next = new Set(expandedIds);
+		if (next.has(id)) next.delete(id);
+		else next.add(id);
+		expandedIds = next;
+	}
+
+	const iconMap: Record<string, string> = {
+		success: 'mdiCheckCircle',
+		error: 'mdiAlertCircle',
+		info: 'mdiInformation',
+		warning: 'mdiAlert',
+	};
+
+	const accentMap: Record<string, string> = {
+		success: '#059669',
+		error: '#ef4444',
+		info: '#3b82f6',
+		warning: '#f59e0b',
+	};
+</script>
+
+{#if snacks.length > 0}
+	<div
+		style="position: fixed; left: 50%; transform: translateX(-50%); z-index: 9999; display: flex; flex-direction: column; gap: 0.5rem; width: 90%; max-width: 26rem; pointer-events: none;"
+		class="snackbar-container"
+	>
+		{#each snacks as snack (snack.id)}
+			<div
+				in:fly={{ y: 40, duration: 300 }}
+				out:fade={{ duration: 200 }}
+				class="snack-item"
+				style="--snack-accent: {accentMap[snack.type]};"
+			>
+				<span class="snack-icon" style="color: {accentMap[snack.type]};">
+					<MdiIcon name={iconMap[snack.type]} size={18} />
+				</span>
+				<div style="flex: 1; min-width: 0;">
+					<p class="snack-message">{snack.message}</p>
+					{#if snack.detail}
+						<button class="snack-detail-toggle" onclick={() => toggleDetail(snack.id)}>
+							{expandedIds.has(snack.id) ? 'Hide details' : 'Show details'}
+						</button>
+						{#if expandedIds.has(snack.id)}
+							<pre class="snack-detail">{snack.detail}</pre>
+						{/if}
+					{/if}
+				</div>
+				<button class="snack-close" onclick={() => removeSnack(snack.id)} aria-label="Dismiss">
+					<MdiIcon name="mdiClose" size={14} />
+				</button>
+			</div>
+		{/each}
+	</div>
+{/if}
+
+<style>
+	.snackbar-container {
+		bottom: 5rem;
+	}
+	@media (min-width: 768px) {
+		.snackbar-container {
+			bottom: 1.5rem;
+		}
+	}
+
+	.snack-item {
+		pointer-events: auto;
+		display: flex;
+		align-items: flex-start;
+		gap: 0.625rem;
+		padding: 0.75rem 1rem;
+		border-radius: 0.75rem;
+		border-left: 3px solid var(--snack-accent);
+		background: var(--color-card);
+		border-top: 1px solid var(--color-border);
+		border-right: 1px solid var(--color-border);
+		border-bottom: 1px solid var(--color-border);
+		box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(255, 255, 255, 0.03) inset;
+		backdrop-filter: blur(12px);
+	}
+
+	:global([data-theme="dark"]) .snack-item {
+		box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 0 16px color-mix(in srgb, var(--snack-accent) 10%, transparent);
+	}
+
+	.snack-icon {
+		flex-shrink: 0;
+		margin-top: 1px;
+	}
+
+	.snack-message {
+		font-size: 0.8rem;
+		line-height: 1.4;
+		margin: 0;
+		color: var(--color-foreground);
+	}
+
+	.snack-detail-toggle {
+		font-size: 0.7rem;
+		color: var(--color-muted-foreground);
+		background: none;
+		border: none;
+		padding: 0;
+		margin-top: 0.25rem;
+		cursor: pointer;
+		text-decoration: underline;
+		text-underline-offset: 2px;
+	}
+
+	.snack-detail-toggle:hover {
+		color: var(--color-foreground);
+	}
+
+	.snack-detail {
+		font-size: 0.7rem;
+		font-family: var(--font-mono);
+		color: var(--color-muted-foreground);
+		margin: 0.25rem 0 0;
+		white-space: pre-wrap;
+		word-break: break-word;
+	}
+
+	.snack-close {
+		flex-shrink: 0;
+		background: none;
+		border: none;
+		color: var(--color-muted-foreground);
+		cursor: pointer;
+		padding: 0.125rem;
+		border-radius: 0.25rem;
+		transition: all 0.15s ease;
+		line-height: 1;
+	}
+
+	.snack-close:hover {
+		color: var(--color-foreground);
+		background: var(--color-muted);
+	}
+</style>
--- a/frontend/src/lib/i18n/en.json
+++ b/frontend/src/lib/i18n/en.json
@@ -182,7 +182,23 @@
 		"group": "Group",
 		"supergroup": "Supergroup",
 		"channel": "Channel",
-		"confirmDelete": "Delete this bot?"
+		"confirmDelete": "Delete this bot?",
+		"commands": "Commands",
+		"enabledCommands": "Enabled Commands",
+		"defaultCount": "Default result count",
+		"responseMode": "Response mode",
+		"modeMedia": "Media (send photos)",
+		"modeText": "Text (send links)",
+		"botLocale": "Bot language",
+		"rateLimits": "Rate Limits",
+		"rateSearch": "Search cooldown",
+		"rateFind": "Find cooldown",
+		"rateDefault": "Default cooldown",
+		"syncCommands": "Sync to Telegram",
+		"discoverChats": "Discover chats from Telegram",
+		"clickToCopy": "Click to copy chat ID",
+		"chatsDiscovered": "Chats discovered",
+		"chatDeleted": "Chat removed"
 	},
 	"trackingConfig": {
 		"title": "Tracking Configs",
@@ -344,7 +360,36 @@
 		"maxAssetSize": "Skip assets larger than this size in MB. Telegram limits files to 50 MB.",
 		"trackingConfig": "Controls which events trigger notifications and how assets are filtered.",
 		"templateConfig": "Controls the message format. Uses default templates if not set.",
-		"scanInterval": "How often to poll the Immich server for changes, in seconds. Lower = faster detection but more API calls."
+		"scanInterval": "How often to poll the Immich server for changes, in seconds. Lower = faster detection but more API calls.",
+		"defaultCount": "How many results to return when the user doesn't specify a count (1-20).",
+		"responseMode": "Media: send actual photos. Text: send filenames/links only. Media mode uses more bandwidth.",
+		"botLocale": "Language for command descriptions in Telegram's menu and bot response messages.",
+		"rateLimits": "Cooldown in seconds between uses of each command category per chat. 0 = no limit."
+	},
+	"snack": {
+		"serverSaved": "Server saved",
+		"serverDeleted": "Server deleted",
+		"trackerCreated": "Tracker created",
+		"trackerUpdated": "Tracker updated",
+		"trackerDeleted": "Tracker deleted",
+		"trackerPaused": "Tracker paused",
+		"trackerResumed": "Tracker resumed",
+		"targetSaved": "Target saved",
+		"targetDeleted": "Target deleted",
+		"targetTestSent": "Test notification sent",
+		"templateSaved": "Template config saved",
+		"templateDeleted": "Template config deleted",
+		"trackingConfigSaved": "Tracking config saved",
+		"trackingConfigDeleted": "Tracking config deleted",
+		"botRegistered": "Bot registered",
+		"botDeleted": "Bot deleted",
+		"userCreated": "User created",
+		"userDeleted": "User deleted",
+		"passwordChanged": "Password changed",
+		"copied": "Copied to clipboard",
+		"genericError": "Something went wrong",
+		"commandsSaved": "Commands config saved",
+		"commandsSynced": "Commands synced to Telegram"
 	},
 	"common": {
 		"loading": "Loading...",
--- a/frontend/src/lib/i18n/ru.json
+++ b/frontend/src/lib/i18n/ru.json
@@ -182,7 +182,23 @@
 		"group": "Группа",
 		"supergroup": "Супергруппа",
 		"channel": "Канал",
-		"confirmDelete": "Удалить этого бота?"
+		"confirmDelete": "Удалить этого бота?",
+		"commands": "Команды",
+		"enabledCommands": "Включённые команды",
+		"defaultCount": "Кол-во результатов",
+		"responseMode": "Режим ответа",
+		"modeMedia": "Медиа (отправка фото)",
+		"modeText": "Текст (ссылки)",
+		"botLocale": "Язык бота",
+		"rateLimits": "Ограничения частоты",
+		"rateSearch": "Кулдаун поиска",
+		"rateFind": "Кулдаун поиска файлов",
+		"rateDefault": "Кулдаун по умолчанию",
+		"syncCommands": "Синхронизировать с Telegram",
+		"discoverChats": "Обнаружить чаты из Telegram",
+		"clickToCopy": "Нажмите, чтобы скопировать ID чата",
+		"chatsDiscovered": "Чаты обнаружены",
+		"chatDeleted": "Чат удалён"
 	},
 	"trackingConfig": {
 		"title": "Конфигурации отслеживания",
@@ -344,7 +360,36 @@
 		"maxAssetSize": "Пропускать файлы больше указанного размера в МБ. Лимит Telegram — 50 МБ.",
 		"trackingConfig": "Управляет тем, какие события вызывают уведомления и как фильтруются ассеты.",
 		"templateConfig": "Управляет форматом сообщений. Используются шаблоны по умолчанию, если не задано.",
-		"scanInterval": "Как часто опрашивать сервер Immich на предмет изменений (в секундах). Меньше = быстрее обнаружение, но больше запросов к API."
+		"scanInterval": "Как часто опрашивать сервер Immich на предмет изменений (в секундах). Меньше = быстрее обнаружение, но больше запросов к API.",
+		"defaultCount": "Сколько результатов возвращать, если пользователь не указал количество (1-20).",
+		"responseMode": "Медиа: отправка фото. Текст: только имена файлов/ссылки. Медиа-режим использует больше трафика.",
+		"botLocale": "Язык описаний команд в меню Telegram и ответов бота.",
+		"rateLimits": "Кулдаун в секундах между использованиями команд в каждом чате. 0 = без ограничений."
+	},
+	"snack": {
+		"serverSaved": "Сервер сохранён",
+		"serverDeleted": "Сервер удалён",
+		"trackerCreated": "Трекер создан",
+		"trackerUpdated": "Трекер обновлён",
+		"trackerDeleted": "Трекер удалён",
+		"trackerPaused": "Трекер приостановлен",
+		"trackerResumed": "Трекер возобновлён",
+		"targetSaved": "Цель сохранена",
+		"targetDeleted": "Цель удалена",
+		"targetTestSent": "Тестовое уведомление отправлено",
+		"templateSaved": "Шаблон сохранён",
+		"templateDeleted": "Шаблон удалён",
+		"trackingConfigSaved": "Конфигурация сохранена",
+		"trackingConfigDeleted": "Конфигурация удалена",
+		"botRegistered": "Бот зарегистрирован",
+		"botDeleted": "Бот удалён",
+		"userCreated": "Пользователь создан",
+		"userDeleted": "Пользователь удалён",
+		"passwordChanged": "Пароль изменён",
+		"copied": "Скопировано",
+		"genericError": "Что-то пошло не так",
+		"commandsSaved": "Конфигурация команд сохранена",
+		"commandsSynced": "Команды синхронизированы с Telegram"
 	},
 	"common": {
 		"loading": "Загрузка...",
--- a/frontend/src/lib/stores/snackbar.svelte.ts
+++ b/frontend/src/lib/stores/snackbar.svelte.ts
@@ -0,0 +1,78 @@
+export type SnackType = 'success' | 'error' | 'info' | 'warning';
+
+export interface Snack {
+	id: number;
+	type: SnackType;
+	message: string;
+	detail?: string;
+	timeout: number;
+}
+
+const DEFAULT_TIMEOUTS: Record<SnackType, number> = {
+	success: 3000,
+	info: 3000,
+	warning: 4000,
+	error: 5000,
+};
+
+const MAX_VISIBLE = 3;
+
+let nextId = 1;
+let snacks = $state<Snack[]>([]);
+const timers = new Map<number, ReturnType<typeof setTimeout>>();
+
+export function getSnacks(): Snack[] {
+	return snacks;
+}
+
+export function addSnack(
+	type: SnackType,
+	message: string,
+	options?: { detail?: string; timeout?: number },
+): void {
+	const id = nextId++;
+	const timeout = options?.timeout ?? DEFAULT_TIMEOUTS[type];
+	const snack: Snack = { id, type, message, detail: options?.detail, timeout };
+
+	snacks = [snack, ...snacks];
+
+	// Enforce max visible
+	while (snacks.length > MAX_VISIBLE) {
+		const oldest = snacks[snacks.length - 1];
+		removeSnack(oldest.id);
+	}
+
+	// Auto-dismiss
+	if (timeout > 0) {
+		timers.set(
+			id,
+			setTimeout(() => removeSnack(id), timeout),
+		);
+	}
+}
+
+export function removeSnack(id: number): void {
+	const timer = timers.get(id);
+	if (timer) {
+		clearTimeout(timer);
+		timers.delete(id);
+	}
+	snacks = snacks.filter((s) => s.id !== id);
+}
+
+// Convenience functions
+export function snackSuccess(message: string): void {
+	addSnack('success', message);
+}
+
+export function snackError(message: string, detail?: string): void {
+	addSnack('error', message, { detail });
+}
+
+export function snackInfo(message: string): void {
+	addSnack('info', message);
+}
+
+export function snackWarning(message: string): void {
+	addSnack('warning', message);
+}
--- a/frontend/src/routes/+layout.svelte
+++ b/frontend/src/routes/+layout.svelte
@@ -10,6 +10,8 @@
 	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();
@@ -28,8 +30,9 @@
 			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; }
+		} catch (err: any) { pwdMsg = err.message; pwdSuccess = false; snackError(err.message); }
 	}

 	let collapsed = $state(false);
@@ -76,101 +79,146 @@
 			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">
-		<p class="text-sm text-[var(--color-muted-foreground)]">{t('common.loading')}</p>
+		<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="{collapsed ? 'w-14' : 'w-56'} border-r border-[var(--color-border)] bg-[var(--color-card)] flex flex-col transition-all duration-200 max-md:hidden">
-			<div class="p-2 border-b border-[var(--color-border)] flex items-center {collapsed ? 'justify-center' : 'justify-between px-4 py-4'}">
+		<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>
-						<h1 class="text-base font-semibold tracking-tight">{t('app.name')}</h1>
-						<p class="text-xs text-[var(--color-muted-foreground)] mt-0.5">{t('app.tagline')}</p>
+					<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);">Immich</span> Watcher
+						</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-md text-base text-[var(--color-muted-foreground)] hover:text-[var(--color-foreground)] hover:bg-[var(--color-muted)] transition-colors"
+					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')}>
-					{collapsed ? '▶' : '◀'}
+					<MdiIcon name={collapsed ? 'mdiChevronRight' : 'mdiChevronLeft'} size={18} />
 				</button>
 			</div>

-			<nav class="flex-1 p-2 space-y-0.5">
+			<!-- Nav -->
+			<nav class="flex-1 p-2 space-y-0.5 overflow-y-auto">
 				{#each navItems as item}
 					<a
 						href={item.href}
-						class="flex items-center gap-2 {collapsed ? 'justify-center px-2' : 'px-3'} py-2 rounded-md text-sm transition-colors
-							{page.url.pathname === item.href
-								? 'bg-[var(--color-accent)] text-[var(--color-accent-foreground)] font-medium'
-								: 'text-[var(--color-muted-foreground)] hover:bg-[var(--color-accent)] hover:text-[var(--color-accent-foreground)]'}"
+						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}{t(item.key)}{/if}
+						{#if !collapsed}<span class="truncate">{t(item.key)}</span>{/if}
 					</a>
 				{/each}
 				{#if auth.isAdmin}
 					<a
 						href="/users"
-						class="flex items-center gap-2 {collapsed ? 'justify-center px-2' : 'px-3'} py-2 rounded-md text-sm transition-colors
-							{page.url.pathname === '/users'
-								? 'bg-[var(--color-accent)] text-[var(--color-accent-foreground)] font-medium'
-								: 'text-[var(--color-muted-foreground)] hover:bg-[var(--color-accent)] hover:text-[var(--color-accent-foreground)]'}"
+						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}{t('nav.users')}{/if}
+						{#if !collapsed}<span class="truncate">{t('nav.users')}</span>{/if}
 					</a>
 				{/if}
 			</nav>

-			<!-- Settings + User footer -->
-			<div class="border-t border-[var(--color-border)]">
+			<!-- Footer -->
+			<div style="border-top: 1px solid var(--color-border);">
 				<!-- Theme & Language -->
-				<div class="flex {collapsed ? 'flex-col items-center gap-1 p-1.5' : 'gap-1.5 px-3 py-2'}">
+				<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 py-1'} rounded-md text-xs bg-[var(--color-muted)] text-[var(--color-muted-foreground)] hover:text-[var(--color-foreground)] transition-colors"
+						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 py-1'} rounded-md text-xs bg-[var(--color-muted)] text-[var(--color-muted-foreground)] hover:text-[var(--color-foreground)] transition-colors"
+						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')}>
-						{theme.resolved === 'dark' ? '🌙' : '☀️'}
+						<MdiIcon name={theme.resolved === 'dark' ? 'mdiWeatherNight' : theme.current === 'system' ? 'mdiDesktopTowerMonitor' : 'mdiWeatherSunny'} size={14} />
 					</button>
 				</div>

 				<!-- User info -->
-				<div class="p-2 border-t border-[var(--color-border)]">
+				<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 text-sm text-[var(--color-muted-foreground)] hover:text-[var(--color-foreground)] rounded hover:bg-[var(--color-muted)] transition-colors"
+							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">
+						<div class="px-1.5">
 							<div class="flex items-center justify-between">
-								<div>
-									<p class="text-sm font-medium">{auth.user.username}</p>
-									<p class="text-xs text-[var(--color-muted-foreground)]">{auth.user.role}</p>
+								<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="text-[var(--color-muted-foreground)] hover:text-[var(--color-foreground)] transition-colors"
+									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')}>
-									<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" y1="12" x2="9" y2="12"/></svg>
+									<MdiIcon name="mdiLogout" size={15} />
 								</button>
 							</div>
 							<button onclick={() => showPasswordForm = true}
-								class="text-xs text-[var(--color-muted-foreground)] hover:text-[var(--color-foreground)] mt-1">
-								🔑 {t('common.changePassword')}
+								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}
@@ -179,18 +227,16 @@
 		</aside>

 		<!-- Mobile bottom nav -->
-		<nav class="fixed bottom-0 left-0 right-0 z-50 md:hidden bg-[var(--color-card)] border-t border-[var(--color-border)] flex justify-around py-1.5">
+		<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 text-xs rounded-md transition-colors
-						{page.url.pathname === item.href
-							? 'text-[var(--color-accent-foreground)] font-medium'
-							: 'text-[var(--color-muted-foreground)]'}">
+					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 text-xs text-[var(--color-muted-foreground)]">
+				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>
@@ -198,16 +244,18 @@
 		<!-- 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-6" in:fade={{ duration: 150, delay: 50 }}>
+				<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}
-	<!-- Redirect in progress -->
 	<div class="min-h-screen flex items-center justify-center">
-		<p class="text-sm text-[var(--color-muted-foreground)]">{t('common.loading')}</p>
+		<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}

@@ -217,18 +265,30 @@
 		<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-md text-sm bg-[var(--color-background)]" />
+				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-md text-sm bg-[var(--color-background)]" />
+				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 bg-[var(--color-primary)] text-[var(--color-primary-foreground)] rounded-md text-sm font-medium hover:opacity-90 transition-opacity">
+		<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>
--- a/frontend/src/routes/+page.svelte
+++ b/frontend/src/routes/+page.svelte
@@ -11,15 +11,72 @@
 	let loaded = $state(false);
 	let error = $state('');

+	// Animated counters
+	let displayServers = $state(0);
+	let displayActive = $state(0);
+	let displayTotal = $state(0);
+	let displayTargets = $state(0);
+
+	function animateCount(from: number, to: number, setter: (v: number) => void, duration = 600) {
+		if (to === 0) { setter(0); return; }
+		const start = performance.now();
+		function frame(now: number) {
+			const elapsed = now - start;
+			const progress = Math.min(elapsed / duration, 1);
+			const eased = 1 - Math.pow(1 - progress, 3); // ease-out cubic
+			setter(Math.round(from + (to - from) * eased));
+			if (progress < 1) requestAnimationFrame(frame);
+		}
+		requestAnimationFrame(frame);
+	}
+
 	onMount(async () => {
 		try {
 			status = await api('/status');
+			// Animate counts
+			setTimeout(() => {
+				animateCount(0, status.servers, (v) => displayServers = v);
+				animateCount(0, status.trackers.active, (v) => displayActive = v);
+				animateCount(0, status.trackers.total, (v) => displayTotal = v);
+				animateCount(0, status.targets, (v) => displayTargets = v);
+			}, 200);
 		} catch (err: any) {
 			error = err.message || t('common.error');
 		} finally {
 			loaded = true;
 		}
 	});
+
+	const statCards = $derived(status ? [
+		{ icon: 'mdiServer', label: 'dashboard.servers', value: displayServers, color: '#0d9488' },
+		{ icon: 'mdiRadar', label: 'dashboard.activeTrackers', value: displayActive, suffix: ` / ${displayTotal}`, color: '#6366f1' },
+		{ icon: 'mdiTarget', label: 'dashboard.targets', value: displayTargets, color: '#f59e0b' },
+	] : []);
+
+	function timeAgo(dateStr: string): string {
+		const diff = Date.now() - new Date(dateStr).getTime();
+		const mins = Math.floor(diff / 60000);
+		if (mins < 1) return 'just now';
+		if (mins < 60) return `${mins}m ago`;
+		const hours = Math.floor(mins / 60);
+		if (hours < 24) return `${hours}h ago`;
+		const days = Math.floor(hours / 24);
+		return `${days}d ago`;
+	}
+
+	const eventIcons: Record<string, string> = {
+		assets_added: 'mdiImagePlus',
+		assets_removed: 'mdiImageMinus',
+		album_renamed: 'mdiRename',
+		album_deleted: 'mdiDeleteAlert',
+	};
+
+	const eventColors: Record<string, string> = {
+		assets_added: '#059669',
+		assets_removed: '#ef4444',
+		album_renamed: '#6366f1',
+		album_deleted: '#dc2626',
+	};
 </script>

 <PageHeader title={t('dashboard.title')} description={t('dashboard.description')} />
@@ -28,71 +85,176 @@
 	<Loading lines={4} />
 {:else if error}
 	<Card>
-		<div class="flex items-center gap-2 text-[var(--color-error-fg)]">
+		<div class="flex items-center gap-2" style="color: var(--color-error-fg);">
 			<MdiIcon name="mdiAlertCircle" size={20} />
 			<p class="text-sm">{error}</p>
 		</div>
 	</Card>
 {:else if status}
-	<div class="grid grid-cols-1 sm:grid-cols-3 gap-4 mb-8">
-		<Card hover>
-			<div class="flex items-center gap-3">
-				<div class="p-2 rounded-lg bg-[var(--color-muted)]">
-					<MdiIcon name="mdiServer" size={22} />
-				</div>
-				<div>
-					<p class="text-sm text-[var(--color-muted-foreground)]">{t('dashboard.servers')}</p>
-					<p class="text-2xl font-semibold">{status.servers}</p>
+	<!-- Stat cards -->
+	<div class="grid grid-cols-1 sm:grid-cols-3 gap-4 mb-8 stagger-children">
+		{#each statCards as card, i}
+			<div class="stat-card" style="--accent: {card.color};">
+				<div class="stat-card-inner">
+					<div class="flex items-center gap-3">
+						<div class="stat-icon" style="background: {card.color}15; color: {card.color};">
+							<MdiIcon name={card.icon} size={22} />
+						</div>
+						<div>
+							<p class="text-sm" style="color: var(--color-muted-foreground);">{t(card.label)}</p>
+							<p class="stat-value font-mono" style="animation-delay: {i * 80 + 200}ms;">
+								{card.value}{#if card.suffix}<span class="stat-suffix">{card.suffix}</span>{/if}
+							</p>
+						</div>
+					</div>
 				</div>
 			</div>
-		</Card>
-		<Card hover>
-			<div class="flex items-center gap-3">
-				<div class="p-2 rounded-lg bg-[var(--color-muted)]">
-					<MdiIcon name="mdiRadar" size={22} />
-				</div>
-				<div>
-					<p class="text-sm text-[var(--color-muted-foreground)]">{t('dashboard.activeTrackers')}</p>
-					<p class="text-2xl font-semibold">{status.trackers.active}<span class="text-base font-normal text-[var(--color-muted-foreground)]"> / {status.trackers.total}</span></p>
-				</div>
-			</div>
-		</Card>
-		<Card hover>
-			<div class="flex items-center gap-3">
-				<div class="p-2 rounded-lg bg-[var(--color-muted)]">
-					<MdiIcon name="mdiTarget" size={22} />
-				</div>
-				<div>
-					<p class="text-sm text-[var(--color-muted-foreground)]">{t('dashboard.targets')}</p>
-					<p class="text-2xl font-semibold">{status.targets}</p>
-				</div>
-			</div>
-		</Card>
+		{/each}
 	</div>

-	<h3 class="text-lg font-medium mb-3">{t('dashboard.recentEvents')}</h3>
+	<!-- Recent events -->
+	<h3 class="text-base font-semibold mb-3 flex items-center gap-2">
+		<MdiIcon name="mdiPulse" size={18} />
+		{t('dashboard.recentEvents')}
+	</h3>
 	{#if status.recent_events.length === 0}
 		<Card>
-			<div class="flex flex-col items-center py-4 gap-2 text-[var(--color-muted-foreground)]">
-				<MdiIcon name="mdiCalendarBlank" size={32} />
+			<div class="flex flex-col items-center py-8 gap-3" style="color: var(--color-muted-foreground);">
+				<div style="opacity: 0.4;">
+					<MdiIcon name="mdiCalendarBlank" size={40} />
+				</div>
 				<p class="text-sm">{t('dashboard.noEvents')}</p>
 			</div>
 		</Card>
 	{:else}
-		<Card>
-			<div class="divide-y divide-[var(--color-border)]">
-				{#each status.recent_events as event}
-					<div class="py-3 first:pt-0 last:pb-0">
-						<div class="flex items-center justify-between">
-							<div>
-								<span class="text-sm font-medium">{event.album_name}</span>
-								<span class="text-xs ml-2 px-1.5 py-0.5 rounded bg-[var(--color-muted)] text-[var(--color-muted-foreground)]">{event.event_type}</span>
+		<div class="event-timeline stagger-children">
+			{#each status.recent_events as event, i}
+				<div class="event-item" style="animation-delay: {i * 60}ms;">
+					<!-- Timeline dot -->
+					<div class="event-dot" style="background: {eventColors[event.event_type] || 'var(--color-muted-foreground)'}; box-shadow: 0 0 8px {eventColors[event.event_type] || 'var(--color-muted-foreground)'}40;"></div>
+					{#if i < status.recent_events.length - 1}
+						<div class="event-line"></div>
+					{/if}
+					<!-- Content -->
+					<div class="event-content">
+						<div class="flex items-center justify-between gap-2">
+							<div class="flex items-center gap-2 min-w-0">
+								<span style="color: {eventColors[event.event_type] || 'var(--color-muted-foreground)'}; flex-shrink: 0;">
+									<MdiIcon name={eventIcons[event.event_type] || 'mdiBell'} size={16} />
+								</span>
+								<span class="text-sm font-medium truncate">{event.album_name}</span>
+								<span class="event-badge">{event.event_type.replace('_', ' ')}</span>
 							</div>
-							<span class="text-xs text-[var(--color-muted-foreground)]">{new Date(event.created_at).toLocaleString()}</span>
+							<span class="text-xs whitespace-nowrap font-mono" style="color: var(--color-muted-foreground);">{timeAgo(event.created_at)}</span>
 						</div>
 					</div>
-				{/each}
-			</div>
-		</Card>
+				</div>
+			{/each}
+		</div>
 	{/if}
 {/if}
+
+<style>
+	.stat-card {
+		position: relative;
+		border-radius: 0.75rem;
+		padding: 1px;
+		background: linear-gradient(135deg, var(--accent), transparent 60%, var(--color-border));
+		transition: all 0.3s ease;
+	}
+
+	.stat-card:hover {
+		box-shadow: 0 0 24px color-mix(in srgb, var(--accent) 20%, transparent);
+		transform: translateY(-2px);
+	}
+
+	.stat-card-inner {
+		background: var(--color-card);
+		border-radius: calc(0.75rem - 1px);
+		padding: 1.25rem;
+	}
+
+	.stat-icon {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 2.75rem;
+		height: 2.75rem;
+		border-radius: 0.75rem;
+		flex-shrink: 0;
+	}
+
+	.stat-value {
+		font-size: 1.75rem;
+		font-weight: 600;
+		line-height: 1.2;
+		animation: countUp 0.5s ease-out both;
+	}
+
+	.stat-suffix {
+		font-size: 1rem;
+		font-weight: 400;
+		color: var(--color-muted-foreground);
+	}
+
+	/* Timeline */
+	.event-timeline {
+		display: flex;
+		flex-direction: column;
+	}
+
+	.event-item {
+		display: flex;
+		align-items: flex-start;
+		gap: 1rem;
+		position: relative;
+		padding-bottom: 0.75rem;
+	}
+
+	.event-dot {
+		width: 10px;
+		height: 10px;
+		border-radius: 50%;
+		flex-shrink: 0;
+		margin-top: 6px;
+		z-index: 1;
+	}
+
+	.event-line {
+		position: absolute;
+		left: 4px;
+		top: 18px;
+		bottom: 0;
+		width: 2px;
+		background: var(--color-border);
+	}
+
+	.event-content {
+		flex: 1;
+		min-width: 0;
+		padding: 0.5rem 0.875rem;
+		border-radius: 0.625rem;
+		background: var(--color-card);
+		border: 1px solid var(--color-border);
+		transition: all 0.2s ease;
+	}
+
+	.event-content:hover {
+		border-color: var(--color-primary);
+		box-shadow: 0 0 12px var(--color-glow);
+	}
+
+	.event-badge {
+		display: inline-block;
+		font-size: 0.65rem;
+		font-weight: 500;
+		text-transform: uppercase;
+		letter-spacing: 0.03em;
+		padding: 0.15rem 0.5rem;
+		border-radius: 9999px;
+		background: var(--color-muted);
+		color: var(--color-muted-foreground);
+		white-space: nowrap;
+		font-family: var(--font-mono);
+	}
+</style>
--- a/frontend/src/routes/login/+page.svelte
+++ b/frontend/src/routes/login/+page.svelte
@@ -5,16 +5,19 @@
 	import { login } from '$lib/auth.svelte';
 	import { t, initLocale, getLocale, setLocale } from '$lib/i18n';
 	import { initTheme, getTheme, setTheme, type Theme } from '$lib/theme.svelte';
+	import MdiIcon from '$lib/components/MdiIcon.svelte';

 	const theme = getTheme();
 	let username = $state('');
 	let password = $state('');
 	let error = $state('');
 	let submitting = $state(false);
+	let mounted = $state(false);

 	onMount(async () => {
 		initLocale();
 		initTheme();
+		mounted = true;
 		try {
 			const res = await api<{ needs_setup: boolean }>('/auth/needs-setup');
 			if (res.needs_setup) goto('/setup');
@@ -35,42 +38,235 @@
 	}
 </script>

-<div class="min-h-screen flex items-center justify-center bg-[var(--color-background)]">
-	<div class="w-full max-w-sm">
-		<div class="bg-[var(--color-card)] border border-[var(--color-border)] rounded-lg p-6 shadow-sm">
-			<div class="flex justify-end gap-1 mb-4">
+<div class="auth-page">
+	<!-- Animated gradient mesh background -->
+	<div class="auth-bg"></div>
+	<div class="auth-grid"></div>
+
+	<!-- Login card -->
+	<div class="auth-card-wrapper" class:visible={mounted}>
+		<div class="auth-card">
+			<!-- Controls -->
+			<div class="flex justify-end gap-1.5 mb-6">
 				<button onclick={() => { setLocale(getLocale() === 'en' ? 'ru' : 'en'); }}
-					class="text-xs px-1.5 py-0.5 rounded bg-[var(--color-muted)] text-[var(--color-muted-foreground)]">
+					class="auth-control-btn">
 					{getLocale().toUpperCase()}
 				</button>
 				<button onclick={() => { const o: Theme[] = ['light','dark','system']; setTheme(o[(o.indexOf(theme.current)+1)%3]); }}
-					class="text-xs px-1.5 py-0.5 rounded bg-[var(--color-muted)] text-[var(--color-muted-foreground)]">
-					{theme.resolved === 'dark' ? '🌙' : '☀️'}
+					class="auth-control-btn">
+					<MdiIcon name={theme.resolved === 'dark' ? 'mdiWeatherNight' : 'mdiWeatherSunny'} size={13} />
 				</button>
 			</div>
-			<h1 class="text-xl font-semibold text-center mb-1">{t('app.name')}</h1>
-			<p class="text-sm text-[var(--color-muted-foreground)] text-center mb-6">{t('auth.signInTitle')}</p>
+
+			<!-- Logo / title -->
+			<div class="text-center mb-8">
+				<div class="auth-logo-icon">
+					<MdiIcon name="mdiEye" size={28} />
+				</div>
+				<h1 class="text-xl font-semibold mt-4 tracking-tight">
+					<span style="color: var(--color-primary);">Immich</span> Watcher
+				</h1>
+				<p class="text-sm mt-1" style="color: var(--color-muted-foreground);">{t('auth.signInTitle')}</p>
+			</div>

 			{#if error}
-				<div class="bg-[var(--color-error-bg)] text-[var(--color-error-fg)] text-sm rounded-md p-3 mb-4">{error}</div>
+				<div class="auth-error animate-fade-slide-in">
+					<MdiIcon name="mdiAlertCircle" size={16} />
+					{error}
+				</div>
 			{/if}

 			<form onsubmit={handleSubmit} class="space-y-4">
 				<div>
-					<label for="username" class="block text-sm font-medium mb-1.5">{t('auth.username')}</label>
+					<label for="username" class="auth-label">{t('auth.username')}</label>
 					<input id="username" type="text" bind:value={username} required
-						class="w-full px-3 py-2 border border-[var(--color-border)] rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--color-background)]" />
+						class="auth-input" placeholder="admin" />
 				</div>
 				<div>
-					<label for="password" class="block text-sm font-medium mb-1.5">{t('auth.password')}</label>
+					<label for="password" class="auth-label">{t('auth.password')}</label>
 					<input id="password" type="password" bind:value={password} required
-						class="w-full px-3 py-2 border border-[var(--color-border)] rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--color-background)]" />
+						class="auth-input" />
 				</div>
-				<button type="submit" disabled={submitting}
-					class="w-full py-2 px-4 bg-[var(--color-primary)] text-[var(--color-primary-foreground)] rounded-md text-sm font-medium hover:opacity-90 transition-opacity disabled:opacity-50">
+				<button type="submit" disabled={submitting} class="auth-submit">
+					{#if submitting}
+						<div class="w-4 h-4 rounded-full border-2 border-current border-t-transparent animate-spin"></div>
+					{/if}
 					{submitting ? t('auth.signingIn') : t('auth.signIn')}
 				</button>
 			</form>
 		</div>
 	</div>
 </div>
+
+<style>
+	.auth-page {
+		min-height: 100vh;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		position: relative;
+		overflow: hidden;
+		background: var(--color-background);
+	}
+
+	.auth-bg {
+		position: absolute;
+		inset: 0;
+		z-index: 0;
+		background:
+			radial-gradient(ellipse 80% 60% at 20% 30%, var(--color-glow-strong), transparent 60%),
+			radial-gradient(ellipse 60% 80% at 80% 70%, rgba(99, 102, 241, 0.08), transparent 60%),
+			radial-gradient(ellipse 50% 50% at 50% 50%, var(--color-glow), transparent 70%);
+		animation: gradientShift 12s ease-in-out infinite;
+		background-size: 200% 200%;
+	}
+
+	.auth-grid {
+		position: absolute;
+		inset: 0;
+		z-index: 0;
+		opacity: 0.3;
+		background-image: radial-gradient(circle at 1px 1px, var(--color-border) 0.5px, transparent 0);
+		background-size: 32px 32px;
+	}
+
+	.auth-card-wrapper {
+		position: relative;
+		z-index: 1;
+		width: 100%;
+		max-width: 24rem;
+		padding: 1rem;
+		opacity: 0;
+		transform: translateY(16px) scale(0.98);
+		transition: opacity 0.5s ease-out, transform 0.5s ease-out;
+	}
+
+	.auth-card-wrapper.visible {
+		opacity: 1;
+		transform: translateY(0) scale(1);
+	}
+
+	.auth-card {
+		background: var(--color-card);
+		border: 1px solid var(--color-border);
+		border-radius: 1rem;
+		padding: 2rem;
+		box-shadow:
+			0 4px 24px rgba(0, 0, 0, 0.08),
+			0 0 0 1px rgba(255, 255, 255, 0.05) inset;
+		backdrop-filter: blur(8px);
+	}
+
+	:global([data-theme="dark"]) .auth-card {
+		box-shadow:
+			0 4px 24px rgba(0, 0, 0, 0.3),
+			0 0 48px var(--color-glow),
+			0 0 0 1px rgba(255, 255, 255, 0.03) inset;
+	}
+
+	.auth-logo-icon {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		width: 3.5rem;
+		height: 3.5rem;
+		border-radius: 1rem;
+		background: var(--color-primary);
+		color: var(--color-primary-foreground);
+		box-shadow: 0 0 24px var(--color-glow-strong);
+	}
+
+	.auth-control-btn {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		padding: 0.25rem 0.625rem;
+		border-radius: 0.5rem;
+		font-size: 0.7rem;
+		font-weight: 500;
+		background: var(--color-muted);
+		color: var(--color-muted-foreground);
+		border: none;
+		cursor: pointer;
+		transition: all 0.2s ease;
+	}
+
+	.auth-control-btn:hover {
+		color: var(--color-foreground);
+		box-shadow: 0 0 8px var(--color-glow);
+	}
+
+	.auth-label {
+		display: block;
+		font-size: 0.8rem;
+		font-weight: 500;
+		margin-bottom: 0.375rem;
+		color: var(--color-foreground);
+	}
+
+	.auth-input {
+		width: 100%;
+		padding: 0.625rem 0.875rem;
+		border: 1px solid var(--color-border);
+		border-radius: 0.625rem;
+		font-size: 0.875rem;
+		background: var(--color-background);
+		color: var(--color-foreground);
+		transition: border-color 0.2s, box-shadow 0.2s;
+	}
+
+	.auth-input:focus {
+		outline: none;
+		border-color: var(--color-primary);
+		box-shadow: 0 0 0 3px var(--color-glow), 0 0 16px var(--color-glow);
+	}
+
+	.auth-error {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		padding: 0.75rem 1rem;
+		border-radius: 0.625rem;
+		font-size: 0.8rem;
+		margin-bottom: 1rem;
+		background: var(--color-error-bg);
+		color: var(--color-error-fg);
+	}
+
+	.auth-submit {
+		width: 100%;
+		padding: 0.625rem;
+		border-radius: 0.625rem;
+		font-size: 0.875rem;
+		font-weight: 600;
+		background: var(--color-primary);
+		color: var(--color-primary-foreground);
+		border: none;
+		cursor: pointer;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		gap: 0.5rem;
+		transition: all 0.2s ease;
+	}
+
+	.auth-submit:hover:not(:disabled) {
+		box-shadow: 0 0 24px var(--color-glow-strong);
+		transform: translateY(-1px);
+	}
+
+	.auth-submit:active:not(:disabled) {
+		transform: translateY(0);
+	}
+
+	.auth-submit:disabled {
+		opacity: 0.6;
+		cursor: not-allowed;
+	}
+
+	@keyframes gradientShift {
+		0% { background-position: 0% 50%; }
+		50% { background-position: 100% 50%; }
+		100% { background-position: 0% 50%; }
+	}
+</style>
--- a/frontend/src/routes/servers/+page.svelte
+++ b/frontend/src/routes/servers/+page.svelte
@@ -10,6 +10,7 @@
 	import MdiIcon from '$lib/components/MdiIcon.svelte';
 	import ConfirmModal from '$lib/components/ConfirmModal.svelte';
 	import IconButton from '$lib/components/IconButton.svelte';
+	import { snackSuccess, snackError } from '$lib/stores/snackbar.svelte';

 	let servers = $state<any[]>([]);
 	let showForm = $state(false);
@@ -30,6 +31,7 @@
 			loadError = '';
 		} catch (err: any) {
 			loadError = err.message || t('servers.loadError');
+			snackError(loadError);
 		} finally { loaded = true; }
 		// Ping all servers in background
 		for (const s of servers) {
@@ -58,7 +60,8 @@
 				await api('/servers', { method: 'POST', body: JSON.stringify(form) });
 			}
 			showForm = false; editing = null; await load();
-		} catch (err: any) { error = err.message; }
+			snackSuccess(t('snack.serverSaved'));
+		} catch (err: any) { error = err.message; snackError(err.message); }
 		submitting = false;
 	}

@@ -70,17 +73,20 @@
 		if (!confirmDelete) return;
 		const id = confirmDelete.id;
 		confirmDelete = null;
-		try { await api(`/servers/${id}`, { method: 'DELETE' }); await load(); } catch (err: any) { error = err.message; }
+		try { await api(`/servers/${id}`, { method: 'DELETE' }); await load(); snackSuccess(t('snack.serverDeleted')); } catch (err: any) { error = err.message; snackError(err.message); }
 	}
 </script>

 <PageHeader title={t('servers.title')} description={t('servers.description')}>
 	<button onclick={() => { showForm ? (showForm = false, editing = null) : openNew(); }}
-		class="px-3 py-1.5 bg-[var(--color-primary)] text-[var(--color-primary-foreground)] rounded-md text-sm font-medium hover:opacity-90">
+		class="header-action-btn"
+		style="background: {showForm ? 'var(--color-muted)' : 'var(--color-primary)'}; color: {showForm ? 'var(--color-foreground)' : 'var(--color-primary-foreground)'};">
 		{#if showForm}
+			<MdiIcon name="mdiClose" size={14} />
 			{t('servers.cancel')}
 		{:else}
-			<span class="flex items-center gap-1"><MdiIcon name="mdiPlus" size={14} />{t('servers.addServer')}</span>
+			<MdiIcon name="mdiPlus" size={14} />
+			{t('servers.addServer')}
 		{/if}
 	</button>
 </PageHeader>
@@ -91,14 +97,22 @@

 {#if loadError}
 	<Card class="mb-6">
-		<div class="bg-[var(--color-error-bg)] text-[var(--color-error-fg)] text-sm rounded-md p-3">{loadError}</div>
+		<div class="flex items-center gap-2 text-sm" style="color: var(--color-error-fg);">
+			<MdiIcon name="mdiAlertCircle" size={18} />
+			{loadError}
+		</div>
 	</Card>
 {/if}

 {#if showForm}
 	<div in:slide={{ duration: 200 }}>
 	<Card class="mb-6">
-		{#if error}<div class="bg-[var(--color-error-bg)] text-[var(--color-error-fg)] text-sm rounded-md p-3 mb-4">{error}</div>{/if}
+		{#if error}
+			<div class="flex items-center gap-2 text-sm rounded-lg p-3 mb-4" style="background: var(--color-error-bg); color: var(--color-error-fg);">
+				<MdiIcon name="mdiAlertCircle" size={16} />
+				{error}
+			</div>
+		{/if}
 		<form onsubmit={save} class="space-y-3">
 			<div>
 				<div class="flex items-end gap-2">
@@ -106,18 +120,22 @@
 				</div>
 				<div class="flex gap-2">
 					<IconPicker value={form.icon} onselect={(v) => form.icon = v} />
-					<input id="srv-name" bind:value={form.name} required class="flex-1 px-3 py-2 border border-[var(--color-border)] rounded-md text-sm bg-[var(--color-background)]" />
+					<input id="srv-name" bind:value={form.name} required class="flex-1 px-3 py-2 border border-[var(--color-border)] rounded-lg text-sm bg-[var(--color-background)]" />
 				</div>
 			</div>
 			<div>
 				<label for="srv-url" class="block text-sm font-medium mb-1">{t('servers.url')}</label>
-				<input id="srv-url" bind:value={form.url} required placeholder={t('servers.urlPlaceholder')} class="w-full px-3 py-2 border border-[var(--color-border)] rounded-md text-sm bg-[var(--color-background)]" />
+				<input id="srv-url" bind:value={form.url} required placeholder={t('servers.urlPlaceholder')} class="w-full px-3 py-2 border border-[var(--color-border)] rounded-lg text-sm bg-[var(--color-background)]" />
 			</div>
 			<div>
 				<label for="srv-key" class="block text-sm font-medium mb-1">{editing ? t('servers.apiKeyKeep') : t('servers.apiKey')}</label>
-				<input id="srv-key" bind:value={form.api_key} type="password" required={!editing} class="w-full px-3 py-2 border border-[var(--color-border)] rounded-md text-sm bg-[var(--color-background)]" />
+				<input id="srv-key" bind:value={form.api_key} type="password" required={!editing} class="w-full px-3 py-2 border border-[var(--color-border)] rounded-lg 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">
+			<button type="submit" disabled={submitting}
+				class="form-submit-btn">
+				{#if submitting}
+					<div class="w-4 h-4 rounded-full border-2 border-current border-t-transparent animate-spin"></div>
+				{/if}
 				{submitting ? t('servers.connecting') : (editing ? t('common.save') : t('servers.addServer'))}
 			</button>
 		</form>
@@ -126,19 +144,25 @@
 {/if}

 {#if servers.length === 0 && !showForm}
-	<Card><p class="text-sm text-[var(--color-muted-foreground)]">{t('servers.noServers')}</p></Card>
+	<Card>
+		<div class="flex flex-col items-center py-8 gap-3" style="color: var(--color-muted-foreground);">
+			<div style="opacity: 0.4;"><MdiIcon name="mdiServerOff" size={40} /></div>
+			<p class="text-sm">{t('servers.noServers')}</p>
+		</div>
+	</Card>
 {:else}
-	<div class="space-y-3">
+	<div class="space-y-3 stagger-children">
 		{#each servers as server}
 			<Card hover>
 				<div class="flex items-center justify-between">
-					<div class="flex items-center gap-2">
-						<span class="inline-block w-2.5 h-2.5 rounded-full {health[server.id] === true ? 'bg-green-500' : health[server.id] === false ? 'bg-red-500' : 'bg-yellow-400 animate-pulse'}"
-							title={health[server.id] === true ? t('servers.online') : health[server.id] === false ? t('servers.offline') : t('servers.checking')}></span>
-						{#if server.icon}<MdiIcon name={server.icon} />{/if}
+					<div class="flex items-center gap-3">
+						<div class="health-dot {health[server.id] === true ? 'online' : health[server.id] === false ? 'offline' : 'checking'}"></div>
+						{#if server.icon}
+							<span style="color: var(--color-primary);"><MdiIcon name={server.icon} size={20} /></span>
+						{/if}
 						<div>
 							<p class="font-medium">{server.name}</p>
-							<p class="text-sm text-[var(--color-muted-foreground)]">{server.url}</p>
+							<p class="text-sm font-mono" style="color: var(--color-muted-foreground); font-size: 0.75rem;">{server.url}</p>
 						</div>
 					</div>
 					<div class="flex items-center gap-1">
@@ -155,3 +179,77 @@

 <ConfirmModal open={!!confirmDelete} title={t('common.delete')} message={t('servers.confirmDelete')}
 	onconfirm={doDelete} oncancel={() => confirmDelete = null} />
+
+<style>
+	.header-action-btn {
+		display: flex;
+		align-items: center;
+		gap: 0.375rem;
+		padding: 0.5rem 1rem;
+		border-radius: 0.625rem;
+		font-size: 0.8rem;
+		font-weight: 500;
+		border: none;
+		cursor: pointer;
+		transition: all 0.2s ease;
+	}
+
+	.header-action-btn:hover {
+		box-shadow: 0 0 16px var(--color-glow);
+		transform: translateY(-1px);
+	}
+
+	.form-submit-btn {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		gap: 0.5rem;
+		padding: 0.5rem 1.25rem;
+		border-radius: 0.625rem;
+		font-size: 0.875rem;
+		font-weight: 500;
+		border: none;
+		background: var(--color-primary);
+		color: var(--color-primary-foreground);
+		cursor: pointer;
+		transition: all 0.2s ease;
+	}
+
+	.form-submit-btn:hover:not(:disabled) {
+		box-shadow: 0 0 16px var(--color-glow-strong);
+		transform: translateY(-1px);
+	}
+
+	.form-submit-btn:disabled {
+		opacity: 0.5;
+		cursor: not-allowed;
+	}
+
+	.health-dot {
+		width: 10px;
+		height: 10px;
+		border-radius: 50%;
+		flex-shrink: 0;
+		transition: all 0.3s ease;
+	}
+
+	.health-dot.online {
+		background: #059669;
+		box-shadow: 0 0 8px rgba(5, 150, 105, 0.4);
+	}
+
+	.health-dot.offline {
+		background: #ef4444;
+		box-shadow: 0 0 8px rgba(239, 68, 68, 0.3);
+	}
+
+	.health-dot.checking {
+		background: #f59e0b;
+		animation: pulseCheck 1.5s ease-in-out infinite;
+	}
+
+	@keyframes pulseCheck {
+		0%, 100% { box-shadow: 0 0 4px rgba(245, 158, 11, 0.3); }
+		50% { box-shadow: 0 0 12px rgba(245, 158, 11, 0.6); }
+	}
+</style>
--- a/frontend/src/routes/setup/+page.svelte
+++ b/frontend/src/routes/setup/+page.svelte
@@ -4,14 +4,16 @@
 	import { setup } from '$lib/auth.svelte';
 	import { t, initLocale } from '$lib/i18n';
 	import { initTheme } from '$lib/theme.svelte';
+	import MdiIcon from '$lib/components/MdiIcon.svelte';

 	let username = $state('admin');
 	let password = $state('');
 	let confirmPassword = $state('');
 	let error = $state('');
 	let submitting = $state(false);
+	let mounted = $state(false);

-	onMount(() => { initLocale(); initTheme(); });
+	onMount(() => { initLocale(); initTheme(); mounted = true; });

 	async function handleSubmit(e: SubmitEvent) {
 		e.preventDefault();
@@ -27,30 +29,201 @@
 	}
 </script>

-<div class="min-h-screen flex items-center justify-center bg-[var(--color-background)]">
-	<div class="w-full max-w-sm">
-		<div class="bg-[var(--color-card)] border border-[var(--color-border)] rounded-lg p-6 shadow-sm">
-			<h1 class="text-xl font-semibold text-center mb-1">{t('auth.setupTitle')}</h1>
-			<p class="text-sm text-[var(--color-muted-foreground)] text-center mb-6">{t('auth.setupDescription')}</p>
-			{#if error}<div class="bg-[var(--color-error-bg)] text-[var(--color-error-fg)] text-sm rounded-md p-3 mb-4">{error}</div>{/if}
+<div class="auth-page">
+	<div class="auth-bg"></div>
+	<div class="auth-grid"></div>
+
+	<div class="auth-card-wrapper" class:visible={mounted}>
+		<div class="auth-card">
+			<div class="text-center mb-8">
+				<div class="auth-logo-icon">
+					<MdiIcon name="mdiShieldAccount" size={28} />
+				</div>
+				<h1 class="text-xl font-semibold mt-4 tracking-tight">
+					<span style="color: var(--color-primary);">Immich</span> Watcher
+				</h1>
+				<p class="text-sm mt-1" style="color: var(--color-muted-foreground);">{t('auth.setupDescription')}</p>
+			</div>
+
+			{#if error}
+				<div class="auth-error animate-fade-slide-in">
+					<MdiIcon name="mdiAlertCircle" size={16} />
+					{error}
+				</div>
+			{/if}
+
 			<form onsubmit={handleSubmit} class="space-y-4">
 				<div>
-					<label for="username" class="block text-sm font-medium mb-1.5">{t('auth.username')}</label>
-					<input id="username" type="text" bind:value={username} required class="w-full px-3 py-2 border border-[var(--color-border)] rounded-md text-sm bg-[var(--color-background)]" />
+					<label for="username" class="auth-label">{t('auth.username')}</label>
+					<input id="username" type="text" bind:value={username} required class="auth-input" />
 				</div>
 				<div>
-					<label for="password" class="block text-sm font-medium mb-1.5">{t('auth.password')}</label>
-					<input id="password" type="password" bind:value={password} required class="w-full px-3 py-2 border border-[var(--color-border)] rounded-md text-sm bg-[var(--color-background)]" />
+					<label for="password" class="auth-label">{t('auth.password')}</label>
+					<input id="password" type="password" bind:value={password} required class="auth-input" />
 				</div>
 				<div>
-					<label for="confirm" class="block text-sm font-medium mb-1.5">{t('auth.confirmPassword')}</label>
-					<input id="confirm" type="password" bind:value={confirmPassword} required class="w-full px-3 py-2 border border-[var(--color-border)] rounded-md text-sm bg-[var(--color-background)]" />
+					<label for="confirm" class="auth-label">{t('auth.confirmPassword')}</label>
+					<input id="confirm" type="password" bind:value={confirmPassword} required class="auth-input" />
 				</div>
-				<button type="submit" disabled={submitting}
-					class="w-full py-2 px-4 bg-[var(--color-primary)] text-[var(--color-primary-foreground)] rounded-md text-sm font-medium hover:opacity-90 disabled:opacity-50">
+				<button type="submit" disabled={submitting} class="auth-submit">
+					{#if submitting}
+						<div class="w-4 h-4 rounded-full border-2 border-current border-t-transparent animate-spin"></div>
+					{/if}
 					{submitting ? t('auth.creatingAccount') : t('auth.createAccount')}
 				</button>
 			</form>
 		</div>
 	</div>
 </div>
+
+<style>
+	.auth-page {
+		min-height: 100vh;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		position: relative;
+		overflow: hidden;
+		background: var(--color-background);
+	}
+
+	.auth-bg {
+		position: absolute;
+		inset: 0;
+		z-index: 0;
+		background:
+			radial-gradient(ellipse 80% 60% at 20% 30%, var(--color-glow-strong), transparent 60%),
+			radial-gradient(ellipse 60% 80% at 80% 70%, rgba(99, 102, 241, 0.08), transparent 60%),
+			radial-gradient(ellipse 50% 50% at 50% 50%, var(--color-glow), transparent 70%);
+		animation: gradientShift 12s ease-in-out infinite;
+		background-size: 200% 200%;
+	}
+
+	.auth-grid {
+		position: absolute;
+		inset: 0;
+		z-index: 0;
+		opacity: 0.3;
+		background-image: radial-gradient(circle at 1px 1px, var(--color-border) 0.5px, transparent 0);
+		background-size: 32px 32px;
+	}
+
+	.auth-card-wrapper {
+		position: relative;
+		z-index: 1;
+		width: 100%;
+		max-width: 24rem;
+		padding: 1rem;
+		opacity: 0;
+		transform: translateY(16px) scale(0.98);
+		transition: opacity 0.5s ease-out, transform 0.5s ease-out;
+	}
+
+	.auth-card-wrapper.visible {
+		opacity: 1;
+		transform: translateY(0) scale(1);
+	}
+
+	.auth-card {
+		background: var(--color-card);
+		border: 1px solid var(--color-border);
+		border-radius: 1rem;
+		padding: 2rem;
+		box-shadow:
+			0 4px 24px rgba(0, 0, 0, 0.08),
+			0 0 0 1px rgba(255, 255, 255, 0.05) inset;
+	}
+
+	:global([data-theme="dark"]) .auth-card {
+		box-shadow:
+			0 4px 24px rgba(0, 0, 0, 0.3),
+			0 0 48px var(--color-glow),
+			0 0 0 1px rgba(255, 255, 255, 0.03) inset;
+	}
+
+	.auth-logo-icon {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		width: 3.5rem;
+		height: 3.5rem;
+		border-radius: 1rem;
+		background: var(--color-primary);
+		color: var(--color-primary-foreground);
+		box-shadow: 0 0 24px var(--color-glow-strong);
+	}
+
+	.auth-label {
+		display: block;
+		font-size: 0.8rem;
+		font-weight: 500;
+		margin-bottom: 0.375rem;
+		color: var(--color-foreground);
+	}
+
+	.auth-input {
+		width: 100%;
+		padding: 0.625rem 0.875rem;
+		border: 1px solid var(--color-border);
+		border-radius: 0.625rem;
+		font-size: 0.875rem;
+		background: var(--color-background);
+		color: var(--color-foreground);
+		transition: border-color 0.2s, box-shadow 0.2s;
+	}
+
+	.auth-input:focus {
+		outline: none;
+		border-color: var(--color-primary);
+		box-shadow: 0 0 0 3px var(--color-glow), 0 0 16px var(--color-glow);
+	}
+
+	.auth-error {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		padding: 0.75rem 1rem;
+		border-radius: 0.625rem;
+		font-size: 0.8rem;
+		margin-bottom: 1rem;
+		background: var(--color-error-bg);
+		color: var(--color-error-fg);
+	}
+
+	.auth-submit {
+		width: 100%;
+		padding: 0.625rem;
+		border-radius: 0.625rem;
+		font-size: 0.875rem;
+		font-weight: 600;
+		background: var(--color-primary);
+		color: var(--color-primary-foreground);
+		border: none;
+		cursor: pointer;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		gap: 0.5rem;
+		transition: all 0.2s ease;
+	}
+
+	.auth-submit:hover:not(:disabled) {
+		box-shadow: 0 0 24px var(--color-glow-strong);
+		transform: translateY(-1px);
+	}
+
+	.auth-submit:active:not(:disabled) {
+		transform: translateY(0);
+	}
+
+	.auth-submit:disabled {
+		opacity: 0.6;
+		cursor: not-allowed;
+	}
+
+	@keyframes gradientShift {
+		0% { background-position: 0% 50%; }
+		50% { background-position: 100% 50%; }
+		100% { background-position: 0% 50%; }
+	}
+</style>
--- a/frontend/src/routes/targets/+page.svelte
+++ b/frontend/src/routes/targets/+page.svelte
@@ -11,6 +11,7 @@
 	import ConfirmModal from '$lib/components/ConfirmModal.svelte';
 	import Hint from '$lib/components/Hint.svelte';
 	import IconButton from '$lib/components/IconButton.svelte';
+	import { snackSuccess, snackError } from '$lib/stores/snackbar.svelte';

 	let targets = $state<any[]>([]);
 	let trackingConfigs = $state<any[]>([]);
@@ -40,7 +41,7 @@
 				api('/targets'), api('/tracking-configs'), api('/template-configs'), api('/telegram-bots')
 			]);
 			loadError = '';
-		} catch (err: any) { loadError = err.message || t('common.loadError'); } finally { loaded = true; }
+		} catch (err: any) { loadError = err.message || t('common.loadError'); snackError(loadError); } finally { loaded = true; }
 	}

 	async function loadBotChats() {
@@ -98,16 +99,22 @@
 				await api('/targets', { method: 'POST', body: JSON.stringify({ type: formType, name: form.name, config, tracking_config_id: trkId, template_config_id: tplId }) });
 			}
 			showForm = false; editing = null; await load();
-		} catch (err: any) { error = err.message; }
+			snackSuccess(t('snack.targetSaved'));
+		} catch (err: any) { error = err.message; snackError(err.message); }
 	}
 	async function test(id: number) {
 		testResult = '...';
-		try { const res = await api(`/targets/${id}/test`, { method: 'POST' }); testResult = res.success ? t('targets.testSent') : `Failed: ${res.error}`; }
-		catch (err: any) { testResult = `Error: ${err.message}`; }
+		try {
+			const res = await api(`/targets/${id}/test`, { method: 'POST' });
+			testResult = res.success ? t('targets.testSent') : `Failed: ${res.error}`;
+			if (res.success) snackSuccess(t('snack.targetTestSent'));
+			else snackError(`Failed: ${res.error}`);
+		}
+		catch (err: any) { testResult = `Error: ${err.message}`; snackError(err.message); }
 		setTimeout(() => testResult = '', 5000);
 	}
 	async function remove(id: number) {
-		try { await api(`/targets/${id}`, { method: 'DELETE' }); await load(); } catch (err: any) { error = err.message; }
+		try { await api(`/targets/${id}`, { method: 'DELETE' }); await load(); snackSuccess(t('snack.targetDeleted')); } catch (err: any) { error = err.message; snackError(err.message); }
 	}
 </script>

--- a/frontend/src/routes/telegram-bots/+page.svelte
+++ b/frontend/src/routes/telegram-bots/+page.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
+	import { slide } from 'svelte/transition';
 	import { api } from '$lib/api';
 	import { t } from '$lib/i18n';
 	import PageHeader from '$lib/components/PageHeader.svelte';
@@ -9,6 +10,22 @@
 	import MdiIcon from '$lib/components/MdiIcon.svelte';
 	import ConfirmModal from '$lib/components/ConfirmModal.svelte';
 	import IconButton from '$lib/components/IconButton.svelte';
+	import Hint from '$lib/components/Hint.svelte';
+	import { snackSuccess, snackError, snackInfo } from '$lib/stores/snackbar.svelte';
+
+	const ALL_COMMANDS = [
+		'status', 'albums', 'events', 'summary', 'latest',
+		'memory', 'random', 'search', 'find', 'person',
+		'place', 'favorites', 'people', 'help',
+	];
+
+	const DEFAULT_CONFIG = {
+		enabled: [...ALL_COMMANDS],
+		default_count: 5,
+		response_mode: 'media',
+		rate_limits: { search: 30, find: 30, default: 10 },
+		locale: 'en',
+	};

 	let bots = $state<any[]>([]);
 	let loaded = $state(false);
@@ -18,15 +35,21 @@
 	let submitting = $state(false);
 	let confirmDelete = $state<any>(null);

-	// Per-bot chat lists
+	// Per-bot expandable sections
 	let chats = $state<Record<number, any[]>>({});
 	let chatsLoading = $state<Record<number, boolean>>({});
 	let expandedBot = $state<number | null>(null);
+	let expandedSection = $state<Record<number, string>>({});  // bot_id -> 'chats' | 'commands'
+
+	// Commands config editing
+	let editingConfig = $state<Record<number, any>>({});
+	let savingConfig = $state<Record<number, boolean>>({});
+	let syncingCommands = $state<Record<number, boolean>>({});

 	onMount(load);
 	async function load() {
 		try { bots = await api('/telegram-bots'); }
-		catch (err: any) { error = err.message || t('common.loadError'); }
+		catch (err: any) { error = err.message || t('common.loadError'); snackError(error); }
 		finally { loaded = true; }
 	}

@@ -35,7 +58,8 @@
 		try {
 			await api('/telegram-bots', { method: 'POST', body: JSON.stringify(form) });
 			form = { name: '', icon: '', token: '' }; showForm = false; await load();
-		} catch (err: any) { error = err.message; }
+			snackSuccess(t('snack.botRegistered'));
+		} catch (err: any) { error = err.message; snackError(err.message); }
 		submitting = false;
 	}

@@ -43,22 +67,91 @@
 		confirmDelete = {
 			id,
 			onconfirm: async () => {
-				try { await api(`/telegram-bots/${id}`, { method: 'DELETE' }); await load(); }
-				catch (err: any) { error = err.message; }
+				try { await api(`/telegram-bots/${id}`, { method: 'DELETE' }); await load(); snackSuccess(t('snack.botDeleted')); }
+				catch (err: any) { error = err.message; snackError(err.message); }
 				finally { confirmDelete = null; }
 			}
 		};
 	}

+	function toggleSection(botId: number, section: string) {
+		if (expandedSection[botId] === section) {
+			expandedSection[botId] = '';
+			return;
+		}
+		expandedSection[botId] = section;
+
+		if (section === 'chats') {
+			loadChats(botId);
+		}
+
+		if (section === 'commands') {
+			const bot = bots.find((b: any) => b.id === botId);
+			editingConfig[botId] = JSON.parse(JSON.stringify(bot?.commands_config || DEFAULT_CONFIG));
+		}
+	}
+
 	async function loadChats(botId: number) {
-		if (expandedBot === botId) { expandedBot = null; return; }
-		expandedBot = botId;
 		chatsLoading[botId] = true;
 		try { chats[botId] = await api(`/telegram-bots/${botId}/chats`); }
 		catch { chats[botId] = []; }
 		chatsLoading[botId] = false;
 	}

+	async function discoverChats(botId: number) {
+		chatsLoading[botId] = true;
+		try {
+			chats[botId] = await api(`/telegram-bots/${botId}/chats/discover`, { method: 'POST' });
+			snackSuccess(t('telegramBot.chatsDiscovered'));
+		} catch (err: any) { snackError(err.message); }
+		chatsLoading[botId] = false;
+	}
+
+	async function deleteChat(botId: number, chatDbId: number) {
+		try {
+			await api(`/telegram-bots/${botId}/chats/${chatDbId}`, { method: 'DELETE' });
+			chats[botId] = (chats[botId] || []).filter((c: any) => c.id !== chatDbId);
+			snackSuccess(t('telegramBot.chatDeleted'));
+		} catch (err: any) { snackError(err.message); }
+	}
+
+	function copyChatId(e: Event, chatId: string) {
+		e.stopPropagation();
+		navigator.clipboard.writeText(chatId);
+		snackInfo(`${t('snack.copied')}: ${chatId}`);
+	}
+
+	function toggleCommand(botId: number, cmd: string) {
+		const cfg = editingConfig[botId];
+		if (!cfg) return;
+		const idx = cfg.enabled.indexOf(cmd);
+		if (idx >= 0) cfg.enabled.splice(idx, 1);
+		else cfg.enabled.push(cmd);
+	}
+
+	async function saveConfig(botId: number) {
+		savingConfig[botId] = true;
+		try {
+			const updated = await api(`/telegram-bots/${botId}`, {
+				method: 'PUT',
+				body: JSON.stringify({ commands_config: editingConfig[botId] }),
+			});
+			const idx = bots.findIndex((b: any) => b.id === botId);
+			if (idx >= 0) bots[idx] = updated;
+			snackSuccess(t('snack.commandsSaved'));
+		} catch (err: any) { snackError(err.message); }
+		savingConfig[botId] = false;
+	}
+
+	async function syncCommands(botId: number) {
+		syncingCommands[botId] = true;
+		try {
+			await api(`/telegram-bots/${botId}/sync-commands`, { method: 'POST' });
+			snackSuccess(t('snack.commandsSynced'));
+		} catch (err: any) { snackError(err.message); }
+		syncingCommands[botId] = false;
+	}
+
 	function chatTypeLabel(type: string): string {
 		const map: Record<string, string> = {
 			private: t('telegramBot.private'),
@@ -86,7 +179,7 @@
 			<div>
 				<label for="bot-name" class="block text-sm font-medium mb-1">{t('telegramBot.name')}</label>
 				<div class="flex gap-2">
-					<IconPicker value={form.icon} onselect={(v) => form.icon = v} />
+					<IconPicker value={form.icon} onselect={(v: string) => form.icon = v} />
 					<input id="bot-name" bind:value={form.name} required placeholder={t('telegramBot.namePlaceholder')}
 						class="flex-1 px-3 py-2 border border-[var(--color-border)] rounded-md text-sm bg-[var(--color-background)]" />
 				</div>
@@ -122,16 +215,21 @@
 						<p class="text-xs text-[var(--color-muted-foreground)] font-mono">{bot.token_preview}</p>
 					</div>
 					<div class="flex items-center gap-1">
-						<button onclick={() => loadChats(bot.id)}
-							class="text-xs text-[var(--color-muted-foreground)] hover:underline">
-							{t('telegramBot.chats')} {expandedBot === bot.id ? '▲' : '▼'}
+						<button onclick={() => toggleSection(bot.id, 'chats')}
+							class="text-xs text-[var(--color-muted-foreground)] hover:underline px-2 py-1">
+							{t('telegramBot.chats')} {expandedSection[bot.id] === 'chats' ? '▲' : '▼'}
+						</button>
+						<button onclick={() => toggleSection(bot.id, 'commands')}
+							class="text-xs text-[var(--color-muted-foreground)] hover:underline px-2 py-1">
+							{t('telegramBot.commands')} {expandedSection[bot.id] === 'commands' ? '▲' : '▼'}
 						</button>
 						<IconButton icon="mdiDelete" title={t('common.delete')} onclick={() => remove(bot.id)} variant="danger" />
 					</div>
 				</div>

-				{#if expandedBot === bot.id}
-					<div class="mt-3 border-t border-[var(--color-border)] pt-3">
+				<!-- Chats section -->
+				{#if expandedSection[bot.id] === 'chats'}
+					<div class="mt-3 border-t border-[var(--color-border)] pt-3" in:slide>
 						{#if chatsLoading[bot.id]}
 							<p class="text-xs text-[var(--color-muted-foreground)]">{t('common.loading')}</p>
 						{:else if (chats[bot.id] || []).length === 0}
@@ -139,22 +237,123 @@
 						{:else}
 							<div class="space-y-1">
 								{#each chats[bot.id] as chat}
-									<div class="flex items-center justify-between text-sm px-2 py-1 rounded hover:bg-[var(--color-muted)]">
-										<div>
+									<div class="flex items-center justify-between text-sm px-2 py-1 rounded hover:bg-[var(--color-muted)] cursor-pointer"
+										onclick={(e: MouseEvent) => copyChatId(e, chat.chat_id)}
+										title={t('telegramBot.clickToCopy')}
+										role="button" tabindex="0">
+										<div class="flex items-center gap-2">
 											<span class="font-medium">{chat.title || chat.username || 'Unknown'}</span>
-											<span class="text-xs ml-2 px-1.5 py-0.5 rounded bg-[var(--color-muted)] text-[var(--color-muted-foreground)]">{chatTypeLabel(chat.type)}</span>
+											<span class="text-xs px-1.5 py-0.5 rounded bg-[var(--color-muted)] text-[var(--color-muted-foreground)]">{chatTypeLabel(chat.type)}</span>
+											<span class="text-xs text-[var(--color-muted-foreground)] font-mono">{chat.chat_id}</span>
 										</div>
-										<span class="text-xs text-[var(--color-muted-foreground)] font-mono">{chat.id}</span>
+										<IconButton icon="mdiDelete" title={t('common.delete')} size={14}
+											onclick={(e: MouseEvent) => { e.stopPropagation(); deleteChat(bot.id, chat.id); }} variant="danger" />
 									</div>
 								{/each}
 							</div>
 						{/if}
-						<button onclick={() => loadChats(bot.id)}
-							class="text-xs text-[var(--color-muted-foreground)] hover:underline mt-2">
-							{t('telegramBot.refreshChats')}
+						<button onclick={() => discoverChats(bot.id)}
+							class="text-xs text-[var(--color-primary)] hover:underline mt-2 flex items-center gap-1">
+							<MdiIcon name="mdiSync" size={14} />
+							{t('telegramBot.discoverChats')}
 						</button>
 					</div>
 				{/if}
+
+				<!-- Commands config section -->
+				{#if expandedSection[bot.id] === 'commands' && editingConfig[bot.id]}
+					{@const cfg = editingConfig[bot.id]}
+					<div class="mt-3 border-t border-[var(--color-border)] pt-3 space-y-4" in:slide>
+						<!-- Enabled commands -->
+						<fieldset>
+							<legend class="text-sm font-medium mb-2">{t('telegramBot.enabledCommands')}</legend>
+							<div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-1.5">
+								{#each ALL_COMMANDS as cmd}
+									<label class="flex items-center gap-1.5 text-sm cursor-pointer px-2 py-1 rounded hover:bg-[var(--color-muted)]">
+										<input type="checkbox" checked={cfg.enabled.includes(cmd)}
+											onchange={() => toggleCommand(bot.id, cmd)}
+											class="rounded" />
+										<span class="font-mono text-xs">/{cmd}</span>
+									</label>
+								{/each}
+							</div>
+						</fieldset>
+
+						<!-- Settings row -->
+						<div class="grid grid-cols-1 sm:grid-cols-3 gap-3">
+							<div>
+								<label class="block text-sm font-medium mb-1">
+									{t('telegramBot.defaultCount')}
+									<Hint text={t('hints.defaultCount')} />
+								</label>
+								<input type="number" min="1" max="20" bind:value={cfg.default_count}
+									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">
+									{t('telegramBot.responseMode')}
+									<Hint text={t('hints.responseMode')} />
+								</label>
+								<select bind:value={cfg.response_mode}
+									class="w-full px-3 py-2 border border-[var(--color-border)] rounded-md text-sm bg-[var(--color-background)]">
+									<option value="media">{t('telegramBot.modeMedia')}</option>
+									<option value="text">{t('telegramBot.modeText')}</option>
+								</select>
+							</div>
+							<div>
+								<label class="block text-sm font-medium mb-1">
+									{t('telegramBot.botLocale')}
+									<Hint text={t('hints.botLocale')} />
+								</label>
+								<select bind:value={cfg.locale}
+									class="w-full px-3 py-2 border border-[var(--color-border)] rounded-md text-sm bg-[var(--color-background)]">
+									<option value="en">English</option>
+									<option value="ru">Русский</option>
+								</select>
+							</div>
+						</div>
+
+						<!-- Rate limits -->
+						<fieldset>
+							<legend class="text-sm font-medium mb-2">
+								{t('telegramBot.rateLimits')}
+								<Hint text={t('hints.rateLimits')} />
+							</legend>
+							<div class="grid grid-cols-1 sm:grid-cols-3 gap-3">
+								<div>
+									<label class="block text-xs text-[var(--color-muted-foreground)] mb-1">{t('telegramBot.rateSearch')} (s)</label>
+									<input type="number" min="0" max="300" bind:value={cfg.rate_limits.search}
+										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-xs text-[var(--color-muted-foreground)] mb-1">{t('telegramBot.rateFind')} (s)</label>
+									<input type="number" min="0" max="300" bind:value={cfg.rate_limits.find}
+										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-xs text-[var(--color-muted-foreground)] mb-1">{t('telegramBot.rateDefault')} (s)</label>
+									<input type="number" min="0" max="300" bind:value={cfg.rate_limits.default}
+										class="w-full px-3 py-2 border border-[var(--color-border)] rounded-md text-sm bg-[var(--color-background)]" />
+								</div>
+							</div>
+						</fieldset>
+
+						<!-- Action buttons -->
+						<div class="flex gap-2 pt-2">
+							<button onclick={() => saveConfig(bot.id)} disabled={savingConfig[bot.id]}
+								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">
+								{savingConfig[bot.id] ? t('common.loading') : t('common.save')}
+							</button>
+							<button onclick={() => syncCommands(bot.id)} disabled={syncingCommands[bot.id]}
+								class="px-4 py-2 bg-[var(--color-muted)] text-[var(--color-foreground)] rounded-md text-sm font-medium hover:opacity-80 disabled:opacity-50">
+								<span class="flex items-center gap-1.5">
+									<MdiIcon name="mdiSync" size={16} />
+									{syncingCommands[bot.id] ? t('common.loading') : t('telegramBot.syncCommands')}
+								</span>
+							</button>
+						</div>
+					</div>
+				{/if}
 			</Card>
 		{/each}
 	</div>
--- a/frontend/src/routes/template-configs/+page.svelte
+++ b/frontend/src/routes/template-configs/+page.svelte
@@ -13,6 +13,7 @@
 	import IconButton from '$lib/components/IconButton.svelte';
 	import Modal from '$lib/components/Modal.svelte';
 	import JinjaEditor from '$lib/components/JinjaEditor.svelte';
+	import { snackSuccess, snackError } from '$lib/stores/snackbar.svelte';

 	let configs = $state<any[]>([]);
 	let loaded = $state(false);
@@ -114,7 +115,7 @@
 				api('/template-configs'),
 				api('/template-configs/variables'),
 			]);
-		} catch (err: any) { error = err.message || t('common.loadError'); }
+		} catch (err: any) { error = err.message || t('common.loadError'); snackError(error); }
 		finally { loaded = true; }
 	}

@@ -132,7 +133,8 @@
 			if (editing) await api(`/template-configs/${editing}`, { method: 'PUT', body: JSON.stringify(form) });
 			else await api('/template-configs', { method: 'POST', body: JSON.stringify(form) });
 			showForm = false; editing = null; await load();
-		} catch (err: any) { error = err.message; }
+			snackSuccess(t('snack.templateSaved'));
+		} catch (err: any) { error = err.message; snackError(err.message); }
 	}

 	async function preview(configId: number, slotKey: string) {
@@ -150,8 +152,8 @@
 		confirmDelete = {
 			id,
 			onconfirm: async () => {
-				try { await api(`/template-configs/${id}`, { method: 'DELETE' }); await load(); }
-				catch (err: any) { error = err.message; }
+				try { await api(`/template-configs/${id}`, { method: 'DELETE' }); await load(); snackSuccess(t('snack.templateDeleted')); }
+				catch (err: any) { error = err.message; snackError(err.message); }
 				finally { confirmDelete = null; }
 			}
 		};
--- a/frontend/src/routes/trackers/+page.svelte
+++ b/frontend/src/routes/trackers/+page.svelte
@@ -11,6 +11,7 @@
 	import ConfirmModal from '$lib/components/ConfirmModal.svelte';
 	import Hint from '$lib/components/Hint.svelte';
 	import IconButton from '$lib/components/IconButton.svelte';
+	import { snackSuccess, snackError } from '$lib/stores/snackbar.svelte';

 	let loaded = $state(false);
 	let loadError = $state('');
@@ -41,6 +42,7 @@
 			[trackers, servers, targets] = await Promise.all([api('/trackers'), api('/servers'), api('/targets')]);
 		} catch (err: any) {
 			loadError = err.message || 'Failed to load data';
+			snackError(loadError);
 		} finally {
 			loaded = true;
 		}
@@ -64,11 +66,13 @@
 		try {
 			if (editing) {
 				await api(`/trackers/${editing}`, { method: 'PUT', body: JSON.stringify(form) });
+				snackSuccess(t('snack.trackerUpdated'));
 			} else {
 				await api('/trackers', { method: 'POST', body: JSON.stringify(form) });
+				snackSuccess(t('snack.trackerCreated'));
 			}
 			showForm = false; editing = null; await load();
-		} catch (err: any) { error = err.message; } finally { submitting = false; }
+		} catch (err: any) { error = err.message; snackError(err.message); } finally { submitting = false; }
 	}
 	async function toggle(tracker: any) {
 		if (toggling[tracker.id]) return;
@@ -76,7 +80,8 @@
 		try {
 			await api(`/trackers/${tracker.id}`, { method: 'PUT', body: JSON.stringify({ enabled: !tracker.enabled }) });
 			await load();
-		} finally { toggling[tracker.id] = false; }
+			snackSuccess(tracker.enabled ? t('snack.trackerPaused') : t('snack.trackerResumed'));
+		} catch (err: any) { snackError(err.message); } finally { toggling[tracker.id] = false; }
 	}
 	function startDelete(tracker: any) { confirmDelete = tracker; }
 	async function doDelete() {
@@ -84,7 +89,8 @@
 		try {
 			await api(`/trackers/${confirmDelete.id}`, { method: 'DELETE' });
 			await load();
-		} catch (err: any) { error = err.message; }
+			snackSuccess(t('snack.trackerDeleted'));
+		} catch (err: any) { error = err.message; snackError(err.message); }
 		confirmDelete = null;
 	}
 	async function testPeriodic(tracker: any) {
--- a/frontend/src/routes/tracking-configs/+page.svelte
+++ b/frontend/src/routes/tracking-configs/+page.svelte
@@ -11,6 +11,7 @@
 	import ConfirmModal from '$lib/components/ConfirmModal.svelte';
 	import Hint from '$lib/components/Hint.svelte';
 	import IconButton from '$lib/components/IconButton.svelte';
+	import { snackSuccess, snackError } from '$lib/stores/snackbar.svelte';

 	let configs = $state<any[]>([]);
 	let loaded = $state(false);
@@ -37,7 +38,7 @@
 	onMount(load);
 	async function load() {
 		try { configs = await api('/tracking-configs'); }
-		catch (err: any) { error = err.message || t('common.loadError'); }
+		catch (err: any) { error = err.message || t('common.loadError'); snackError(error); }
 		finally { loaded = true; }
 	}

@@ -53,15 +54,16 @@
 			if (editing) await api(`/tracking-configs/${editing}`, { method: 'PUT', body: JSON.stringify(form) });
 			else await api('/tracking-configs', { method: 'POST', body: JSON.stringify(form) });
 			showForm = false; editing = null; await load();
-		} catch (err: any) { error = err.message; }
+			snackSuccess(t('snack.trackingConfigSaved'));
+		} catch (err: any) { error = err.message; snackError(err.message); }
 	}

 	function remove(id: number) {
 		confirmDelete = {
 			id,
 			onconfirm: async () => {
-				try { await api(`/tracking-configs/${id}`, { method: 'DELETE' }); await load(); }
-				catch (err: any) { error = err.message; }
+				try { await api(`/tracking-configs/${id}`, { method: 'DELETE' }); await load(); snackSuccess(t('snack.trackingConfigDeleted')); }
+				catch (err: any) { error = err.message; snackError(err.message); }
 				finally { confirmDelete = null; }
 			}
 		};
--- a/frontend/src/routes/users/+page.svelte
+++ b/frontend/src/routes/users/+page.svelte
@@ -9,6 +9,7 @@
 	import Modal from '$lib/components/Modal.svelte';
 	import ConfirmModal from '$lib/components/ConfirmModal.svelte';
 	import IconButton from '$lib/components/IconButton.svelte';
+	import { snackSuccess, snackError } from '$lib/stores/snackbar.svelte';

 	const auth = getAuth();
 	let users = $state<any[]>([]);
@@ -28,21 +29,21 @@
 	onMount(load);
 	async function load() {
 		try { users = await api('/users'); }
-		catch (err: any) { error = err.message || t('common.loadError'); }
+		catch (err: any) { error = err.message || t('common.loadError'); snackError(error); }
 		finally { loaded = true; }
 	}

 	async function create(e: SubmitEvent) {
 		e.preventDefault(); error = '';
-		try { await api('/users', { method: 'POST', body: JSON.stringify(form) }); form = { username: '', password: '', role: 'user' }; showForm = false; await load(); }
-		catch (err: any) { error = err.message; }
+		try { await api('/users', { method: 'POST', body: JSON.stringify(form) }); form = { username: '', password: '', role: 'user' }; showForm = false; await load(); snackSuccess(t('snack.userCreated')); }
+		catch (err: any) { error = err.message; snackError(err.message); }
 	}
 	function remove(id: number) {
 		confirmDelete = {
 			id,
 			onconfirm: async () => {
-				try { await api(`/users/${id}`, { method: 'DELETE' }); await load(); }
-				catch (err: any) { error = err.message; }
+				try { await api(`/users/${id}`, { method: 'DELETE' }); await load(); snackSuccess(t('snack.userDeleted')); }
+				catch (err: any) { error = err.message; snackError(err.message); }
 				finally { confirmDelete = null; }
 			}
 		};
@@ -56,8 +57,9 @@
 			await api(`/users/${resetUserId}/password`, { method: 'PUT', body: JSON.stringify({ new_password: resetPassword }) });
 			resetMsg = t('common.passwordChanged');
 			resetSuccess = true;
+			snackSuccess(t('snack.passwordChanged'));
 			setTimeout(() => { resetUserId = null; resetMsg = ''; resetSuccess = false; }, 2000);
-		} catch (err: any) { resetMsg = err.message; resetSuccess = false; }
+		} catch (err: any) { resetMsg = err.message; resetSuccess = false; snackError(err.message); }
 	}
 </script>

--- a/packages/core/src/immich_watcher_core/immich_client.py
+++ b/packages/core/src/immich_watcher_core/immich_client.py
@@ -358,5 +358,189 @@ class ImmichClient:
            return False


+    async def search_smart(
+        self,
+        query: str,
+        album_ids: list[str] | None = None,
+        limit: int = 10,
+    ) -> list[dict[str, Any]]:
+        """Semantic search via Immich CLIP (smart search).
+
+        Args:
+            query: Natural language search query
+            album_ids: Optional list of album IDs to scope results to
+            limit: Max results to return
+
+        Returns:
+            List of asset dicts from search results
+        """
+        payload: dict[str, Any] = {"query": query, "page": 1, "size": limit}
+        try:
+            async with self._session.post(
+                f"{self._url}/api/search/smart",
+                headers=self._json_headers,
+                json=payload,
+            ) as response:
+                if response.status == 200:
+                    data = await response.json()
+                    items = data.get("assets", {}).get("items", [])
+                    if album_ids:
+                        # Post-filter: only keep assets from tracked albums
+                        tracked = set(album_ids)
+                        items = [
+                            a for a in items
+                            if any(
+                                alb.get("id") in tracked
+                                for alb in a.get("albums", [])
+                            )
+                        ]
+                    return items[:limit]
+                _LOGGER.warning("Smart search failed: HTTP %s", response.status)
+        except aiohttp.ClientError as err:
+            _LOGGER.warning("Smart search error: %s", err)
+        return []
+
+    async def search_metadata(
+        self,
+        query: str,
+        album_ids: list[str] | None = None,
+        limit: int = 10,
+    ) -> list[dict[str, Any]]:
+        """Search assets by metadata (filename, description).
+
+        Args:
+            query: Text to search for
+            album_ids: Optional list of album IDs to scope results to
+            limit: Max results to return
+
+        Returns:
+            List of asset dicts from search results
+        """
+        payload: dict[str, Any] = {
+            "originalFileName": query,
+            "page": 1,
+            "size": limit,
+        }
+        try:
+            async with self._session.post(
+                f"{self._url}/api/search/metadata",
+                headers=self._json_headers,
+                json=payload,
+            ) as response:
+                if response.status == 200:
+                    data = await response.json()
+                    items = data.get("assets", {}).get("items", [])
+                    if album_ids:
+                        tracked = set(album_ids)
+                        items = [
+                            a for a in items
+                            if any(
+                                alb.get("id") in tracked
+                                for alb in a.get("albums", [])
+                            )
+                        ]
+                    return items[:limit]
+                _LOGGER.warning("Metadata search failed: HTTP %s", response.status)
+        except aiohttp.ClientError as err:
+            _LOGGER.warning("Metadata search error: %s", err)
+        return []
+
+    async def search_by_person(
+        self,
+        person_id: str,
+        limit: int = 10,
+    ) -> list[dict[str, Any]]:
+        """Find assets containing a specific person.
+
+        Args:
+            person_id: Immich person ID
+            limit: Max results to return
+
+        Returns:
+            List of asset dicts
+        """
+        try:
+            async with self._session.get(
+                f"{self._url}/api/people/{person_id}/assets",
+                headers=self._headers,
+            ) as response:
+                if response.status == 200:
+                    data = await response.json()
+                    return data[:limit]
+                _LOGGER.warning("Person assets failed: HTTP %s", response.status)
+        except aiohttp.ClientError as err:
+            _LOGGER.warning("Person assets error: %s", err)
+        return []
+
+    async def get_random_assets(
+        self,
+        count: int = 5,
+    ) -> list[dict[str, Any]]:
+        """Get random assets from Immich.
+
+        Args:
+            count: Number of random assets to return
+
+        Returns:
+            List of asset dicts
+        """
+        try:
+            async with self._session.get(
+                f"{self._url}/api/assets/random",
+                headers=self._headers,
+                params={"count": count},
+            ) as response:
+                if response.status == 200:
+                    return await response.json()
+                _LOGGER.warning("Random assets failed: HTTP %s", response.status)
+        except aiohttp.ClientError as err:
+            _LOGGER.warning("Random assets error: %s", err)
+        return []
+
+    async def download_asset(self, asset_id: str) -> bytes | None:
+        """Download an asset's original file.
+
+        Args:
+            asset_id: The asset ID to download
+
+        Returns:
+            Raw bytes of the asset, or None on failure
+        """
+        try:
+            async with self._session.get(
+                f"{self._url}/api/assets/{asset_id}/original",
+                headers=self._headers,
+            ) as response:
+                if response.status == 200:
+                    return await response.read()
+                _LOGGER.warning("Asset download failed: HTTP %s", response.status)
+        except aiohttp.ClientError as err:
+            _LOGGER.warning("Asset download error: %s", err)
+        return None
+
+    async def get_asset_thumbnail(self, asset_id: str, size: str = "preview") -> bytes | None:
+        """Download an asset's thumbnail/preview.
+
+        Args:
+            asset_id: The asset ID
+            size: "thumbnail" (small) or "preview" (larger)
+
+        Returns:
+            Raw bytes of the thumbnail, or None on failure
+        """
+        try:
+            async with self._session.get(
+                f"{self._url}/api/assets/{asset_id}/thumbnail",
+                headers=self._headers,
+                params={"size": size},
+            ) as response:
+                if response.status == 200:
+                    return await response.read()
+                _LOGGER.warning("Thumbnail download failed: HTTP %s", response.status)
+        except aiohttp.ClientError as err:
+            _LOGGER.warning("Thumbnail download error: %s", err)
+        return None
+
+
 class ImmichApiError(Exception):
    """Raised when an Immich API call fails."""
--- a/packages/server/src/immich_watcher_server/ai/commands.py
+++ b/packages/server/src/immich_watcher_server/ai/commands.py
@@ -0,0 +1,637 @@
+"""Telegram bot command handler — implements all /commands."""
+
+from __future__ import annotations
+
+import logging
+import time
+from datetime import datetime, timezone
+from typing import Any
+
+import aiohttp
+from sqlmodel import select
+from sqlmodel.ext.asyncio.session import AsyncSession
+
+from immich_watcher_core.immich_client import ImmichClient
+from immich_watcher_core.telegram.media import TELEGRAM_API_BASE_URL
+
+from ..database.models import (
+    AlbumTracker,
+    EventLog,
+    ImmichServer,
+    NotificationTarget,
+    TelegramBot,
+)
+
+_LOGGER = logging.getLogger(__name__)
+
+# Command descriptions for Telegram menu (EN / RU)
+COMMAND_DESCRIPTIONS: dict[str, dict[str, str]] = {
+    "status":    {"en": "Show tracker status", "ru": "Показать статус трекеров"},
+    "albums":    {"en": "List tracked albums", "ru": "Список отслеживаемых альбомов"},
+    "events":    {"en": "Show recent events", "ru": "Показать последние события"},
+    "summary":   {"en": "Send album summary now", "ru": "Отправить сводку альбомов"},
+    "latest":    {"en": "Show latest photos", "ru": "Показать последние фото"},
+    "memory":    {"en": "On This Day memories", "ru": "Воспоминания за этот день"},
+    "random":    {"en": "Send random photo", "ru": "Отправить случайное фото"},
+    "search":    {"en": "Smart search (AI)", "ru": "Умный поиск (AI)"},
+    "find":      {"en": "Search by filename", "ru": "Поиск по имени файла"},
+    "person":    {"en": "Find photos of person", "ru": "Найти фото человека"},
+    "place":     {"en": "Find photos by location", "ru": "Найти фото по месту"},
+    "favorites": {"en": "Show favorites", "ru": "Показать избранное"},
+    "people":    {"en": "List detected people", "ru": "Список людей"},
+    "help":      {"en": "Show available commands", "ru": "Показать доступные команды"},
+}
+
+# Rate limit state: { (bot_id, chat_id, command_category): last_used_timestamp }
+_rate_limits: dict[tuple[int, str, str], float] = {}
+
+# Map commands to rate limit categories
+_RATE_CATEGORY: dict[str, str] = {
+    "search": "search", "find": "search", "person": "search",
+    "place": "search", "favorites": "search", "people": "search",
+}
+
+
+def _get_rate_category(cmd: str) -> str:
+    return _RATE_CATEGORY.get(cmd, "default")
+
+
+def _check_rate_limit(bot_id: int, chat_id: str, cmd: str, limits: dict[str, int]) -> int | None:
+    """Check rate limit. Returns seconds to wait, or None if OK."""
+    category = _get_rate_category(cmd)
+    cooldown = limits.get(category, limits.get("default", 10))
+    if cooldown <= 0:
+        return None
+    key = (bot_id, chat_id, category)
+    now = time.time()
+    last = _rate_limits.get(key, 0)
+    if now - last < cooldown:
+        return int(cooldown - (now - last)) + 1
+    _rate_limits[key] = now
+    return None
+
+
+def parse_command(text: str) -> tuple[str, str, int | None]:
+    """Parse a command message into (command, args, count).
+
+    Examples:
+        "/search sunset" -> ("search", "sunset", None)
+        "/latest Family 5" -> ("latest", "Family", 5)
+        "/events 10" -> ("events", "", 10)
+    """
+    text = text.strip()
+    if not text.startswith("/"):
+        return ("", text, None)
+
+    # Strip @botname suffix: /command@botname args
+    parts = text[1:].split(None, 1)
+    cmd = parts[0].split("@")[0].lower()
+    rest = parts[1] if len(parts) > 1 else ""
+
+    # Try to extract trailing count
+    count = None
+    rest_parts = rest.rsplit(None, 1)
+    if len(rest_parts) == 2:
+        try:
+            count = int(rest_parts[1])
+            rest = rest_parts[0]
+        except ValueError:
+            pass
+    elif rest_parts and rest_parts[0]:
+        try:
+            count = int(rest_parts[0])
+            rest = ""
+        except ValueError:
+            pass
+
+    return (cmd, rest.strip(), count)
+
+
+async def handle_command(
+    bot: TelegramBot,
+    chat_id: str,
+    text: str,
+    session: AsyncSession,
+) -> str | list[dict[str, Any]] | None:
+    """Handle a bot command. Returns text response or media list, or None if not a command."""
+    cmd, args, count_override = parse_command(text)
+    if not cmd:
+        return None
+
+    config = bot.commands_config or {}
+    enabled = config.get("enabled", [])
+    default_count = min(config.get("default_count", 5), 20)
+    locale = config.get("locale", "en")
+    rate_limits = config.get("rate_limits", {})
+
+    if cmd == "start":
+        msgs = {
+            "en": "Hi! I'm your Immich Watcher bot. Use /help to see available commands.",
+            "ru": "Привет! Я бот Immich Watcher. Используйте /help для списка команд.",
+        }
+        return msgs.get(locale, msgs["en"])
+
+    if cmd not in enabled and cmd != "start":
+        return None  # Silently ignore disabled commands
+
+    # Rate limit check
+    wait = _check_rate_limit(bot.id, chat_id, cmd, rate_limits)
+    if wait is not None:
+        msgs = {
+            "en": f"Please wait {wait}s before using this command again.",
+            "ru": f"Подождите {wait} сек. перед повторным использованием.",
+        }
+        return msgs.get(locale, msgs["en"])
+
+    count = min(count_override or default_count, 20)
+
+    # Dispatch
+    if cmd == "help":
+        return _cmd_help(enabled, locale)
+    if cmd == "status":
+        return await _cmd_status(bot, session, locale)
+    if cmd == "albums":
+        return await _cmd_albums(bot, session, locale)
+    if cmd == "events":
+        return await _cmd_events(bot, session, count, locale)
+    if cmd == "people":
+        return await _cmd_people(bot, session, locale)
+    if cmd in ("search", "find", "person", "place", "latest", "random", "favorites", "summary", "memory"):
+        return await _cmd_immich(bot, cmd, args, count, session, locale)
+
+    return None
+
+
+def _cmd_help(enabled: list[str], locale: str) -> str:
+    """Generate /help response from enabled commands."""
+    lines = []
+    for cmd in enabled:
+        desc = COMMAND_DESCRIPTIONS.get(cmd, {})
+        lines.append(f"/{cmd} — {desc.get(locale, desc.get('en', ''))}")
+    header = {"en": "Available commands:", "ru": "Доступные команды:"}
+    return header.get(locale, header["en"]) + "\n" + "\n".join(lines)
+
+
+async def _cmd_status(bot: TelegramBot, session: AsyncSession, locale: str) -> str:
+    """Show tracker status."""
+    # Find trackers via targets linked to this bot
+    trackers, _ = await _get_bot_trackers(bot, session)
+
+    active = sum(1 for t in trackers if t.enabled)
+    total = len(trackers)
+    total_albums = sum(len(t.album_ids) for t in trackers)
+
+    result = await session.exec(
+        select(EventLog).order_by(EventLog.created_at.desc()).limit(1)
+    )
+    last_event = result.first()
+    last_str = last_event.created_at.strftime("%Y-%m-%d %H:%M") if last_event else "-"
+
+    if locale == "ru":
+        return (
+            f"📊 Статус\n"
+            f"Трекеры: {active}/{total} активных\n"
+            f"Альбомы: {total_albums}\n"
+            f"Последнее событие: {last_str}"
+        )
+    return (
+        f"📊 Status\n"
+        f"Trackers: {active}/{total} active\n"
+        f"Albums: {total_albums}\n"
+        f"Last event: {last_str}"
+    )
+
+
+async def _cmd_albums(bot: TelegramBot, session: AsyncSession, locale: str) -> str:
+    """List tracked albums with asset counts."""
+    trackers, servers_map = await _get_bot_trackers(bot, session)
+
+    if not trackers:
+        return "No tracked albums." if locale == "en" else "Нет отслеживаемых альбомов."
+
+    lines = []
+    async with aiohttp.ClientSession() as http:
+        for tracker in trackers:
+            server = servers_map.get(tracker.server_id)
+            if not server:
+                continue
+            client = ImmichClient(http, server.url, server.api_key)
+            for album_id in tracker.album_ids:
+                try:
+                    album = await client.get_album(album_id)
+                    if album:
+                        lines.append(f"  • {album.name} ({album.asset_count} assets)")
+                except Exception:
+                    lines.append(f"  • {album_id[:8]}... (error)")
+
+    header = "📚 Tracked albums:" if locale == "en" else "📚 Отслеживаемые альбомы:"
+    return header + "\n" + "\n".join(lines) if lines else header + "\n  (none)"
+
+
+async def _cmd_events(bot: TelegramBot, session: AsyncSession, count: int, locale: str) -> str:
+    """Show recent events."""
+    trackers, _ = await _get_bot_trackers(bot, session)
+    tracker_ids = [t.id for t in trackers]
+
+    if not tracker_ids:
+        return "No events." if locale == "en" else "Нет событий."
+
+    result = await session.exec(
+        select(EventLog)
+        .where(EventLog.tracker_id.in_(tracker_ids))
+        .order_by(EventLog.created_at.desc())
+        .limit(count)
+    )
+    events = result.all()
+
+    if not events:
+        return "No events yet." if locale == "en" else "Пока нет событий."
+
+    header = f"📋 Last {len(events)} events:" if locale == "en" else f"📋 Последние {len(events)} событий:"
+    lines = []
+    for e in events:
+        ts = e.created_at.strftime("%m/%d %H:%M")
+        lines.append(f"  {ts} — {e.event_type}: {e.album_name}")
+
+    return header + "\n" + "\n".join(lines)
+
+
+async def _cmd_people(bot: TelegramBot, session: AsyncSession, locale: str) -> str:
+    """List people detected across tracked albums."""
+    _, servers_map = await _get_bot_trackers(bot, session)
+
+    all_people: dict[str, str] = {}
+    async with aiohttp.ClientSession() as http:
+        for server in servers_map.values():
+            client = ImmichClient(http, server.url, server.api_key)
+            people = await client.get_people()
+            all_people.update(people)
+
+    if not all_people:
+        return "No people detected." if locale == "en" else "Люди не обнаружены."
+
+    names = sorted(all_people.values())
+    header = f"👥 {len(names)} people:" if locale == "en" else f"👥 {len(names)} людей:"
+    return header + "\n" + ", ".join(names)
+
+
+async def _cmd_immich(
+    bot: TelegramBot,
+    cmd: str,
+    args: str,
+    count: int,
+    session: AsyncSession,
+    locale: str,
+) -> str | list[dict[str, Any]]:
+    """Handle commands that need Immich API access and may return media."""
+    trackers, servers_map = await _get_bot_trackers(bot, session)
+
+    if not trackers:
+        return "No trackers configured." if locale == "en" else "Трекеры не настроены."
+
+    # Collect all tracked album IDs
+    all_album_ids: list[str] = []
+    for t in trackers:
+        all_album_ids.extend(t.album_ids)
+
+    # Pick the first server (most commands need one)
+    first_tracker = trackers[0]
+    server = servers_map.get(first_tracker.server_id)
+    if not server:
+        return "Server not found." if locale == "en" else "Сервер не найден."
+
+    config = bot.commands_config or {}
+    response_mode = config.get("response_mode", "media")
+
+    async with aiohttp.ClientSession() as http:
+        client = ImmichClient(http, server.url, server.api_key)
+        await client.get_server_config()
+
+        if cmd == "search":
+            if not args:
+                return "Usage: /search <query>" if locale == "en" else "Использование: /search <запрос>"
+            assets = await client.search_smart(args, album_ids=all_album_ids, limit=count)
+            return _format_assets(assets, cmd, args, locale, response_mode, client, bot.token)
+
+        if cmd == "find":
+            if not args:
+                return "Usage: /find <text>" if locale == "en" else "Использование: /find <текст>"
+            assets = await client.search_metadata(args, album_ids=all_album_ids, limit=count)
+            return _format_assets(assets, cmd, args, locale, response_mode, client, bot.token)
+
+        if cmd == "person":
+            if not args:
+                return "Usage: /person <name>" if locale == "en" else "Использование: /person <имя>"
+            people = await client.get_people()
+            # Find matching person by name (case-insensitive)
+            person_id = None
+            for pid, pname in people.items():
+                if args.lower() in pname.lower():
+                    person_id = pid
+                    break
+            if not person_id:
+                return f"Person '{args}' not found." if locale == "en" else f"Человек '{args}' не найден."
+            assets = await client.search_by_person(person_id, limit=count)
+            return _format_assets(assets, cmd, args, locale, response_mode, client, bot.token)
+
+        if cmd == "place":
+            if not args:
+                return "Usage: /place <location>" if locale == "en" else "Использование: /place <место>"
+            # Use smart search scoped to location context
+            assets = await client.search_smart(
+                f"photos taken in {args}", album_ids=all_album_ids, limit=count
+            )
+            return _format_assets(assets, cmd, args, locale, response_mode, client, bot.token)
+
+        if cmd == "favorites":
+            # Get assets from tracked albums and filter favorites
+            fav_assets: list[dict[str, Any]] = []
+            for album_id in all_album_ids[:10]:
+                try:
+                    album = await client.get_album(album_id)
+                    if album:
+                        for asset in album.assets[:50]:
+                            if asset.is_favorite and len(fav_assets) < count:
+                                fav_assets.append({
+                                    "id": asset.id,
+                                    "originalFileName": asset.filename,
+                                    "type": asset.type,
+                                })
+                except Exception:
+                    pass
+                if len(fav_assets) >= count:
+                    break
+            return _format_assets(fav_assets, cmd, "", locale, response_mode, client, bot.token)
+
+        if cmd == "latest":
+            # Get latest assets from tracked albums
+            latest_assets: list[dict[str, Any]] = []
+            for album_id in all_album_ids[:10]:
+                try:
+                    album = await client.get_album(album_id)
+                    if album and album.assets:
+                        for asset in album.assets[:count]:
+                            latest_assets.append({
+                                "id": asset.id,
+                                "originalFileName": asset.filename,
+                                "type": asset.type,
+                                "createdAt": asset.created_at,
+                            })
+                except Exception:
+                    pass
+            # Sort by date descending, take top N
+            latest_assets.sort(key=lambda a: a.get("createdAt", ""), reverse=True)
+            latest_assets = latest_assets[:count]
+            return _format_assets(latest_assets, cmd, "", locale, response_mode, client, bot.token)
+
+        if cmd == "random":
+            # Get random assets scoped to tracked albums
+            random_assets: list[dict[str, Any]] = []
+            import random as rng
+            for album_id in all_album_ids[:10]:
+                try:
+                    album = await client.get_album(album_id)
+                    if album and album.assets:
+                        sampled = rng.sample(album.assets, min(count, len(album.assets)))
+                        for asset in sampled:
+                            random_assets.append({
+                                "id": asset.id,
+                                "originalFileName": asset.filename,
+                                "type": asset.type,
+                            })
+                except Exception:
+                    pass
+            rng.shuffle(random_assets)
+            random_assets = random_assets[:count]
+            return _format_assets(random_assets, cmd, "", locale, response_mode, client, bot.token)
+
+        if cmd == "summary":
+            lines = []
+            for album_id in all_album_ids:
+                try:
+                    album = await client.get_album(album_id)
+                    if album:
+                        lines.append(f"  • {album.name}: {album.asset_count} assets")
+                except Exception:
+                    pass
+            header = f"📋 Album summary ({len(lines)}):" if locale == "en" else f"📋 Сводка альбомов ({len(lines)}):"
+            return header + "\n" + "\n".join(lines) if lines else header
+
+        if cmd == "memory":
+            today = datetime.now(timezone.utc)
+            month_day = (today.month, today.day)
+            memory_assets: list[dict[str, Any]] = []
+            for album_id in all_album_ids[:10]:
+                try:
+                    album = await client.get_album(album_id)
+                    if album:
+                        for asset in album.assets:
+                            try:
+                                dt = datetime.fromisoformat(asset.created_at.replace("Z", "+00:00"))
+                                if (dt.month, dt.day) == month_day and dt.year != today.year:
+                                    memory_assets.append({
+                                        "id": asset.id,
+                                        "originalFileName": asset.filename,
+                                        "type": asset.type,
+                                        "createdAt": asset.created_at,
+                                        "year": dt.year,
+                                    })
+                            except (ValueError, AttributeError):
+                                pass
+                except Exception:
+                    pass
+            memory_assets = memory_assets[:count]
+            if not memory_assets:
+                return "No memories for today." if locale == "en" else "Нет воспоминаний за сегодня."
+            return _format_assets(memory_assets, cmd, "", locale, response_mode, client, bot.token)
+
+    return "Unknown command." if locale == "en" else "Неизвестная команда."
+
+
+def _format_assets(
+    assets: list[dict[str, Any]],
+    cmd: str,
+    query: str,
+    locale: str,
+    response_mode: str,
+    client: ImmichClient,
+    bot_token: str,
+) -> str | list[dict[str, Any]]:
+    """Format asset results as text or media payload."""
+    if not assets:
+        msgs = {"en": "No results found.", "ru": "Ничего не найдено."}
+        return msgs.get(locale, msgs["en"])
+
+    if response_mode == "media":
+        # Return media list for the webhook handler to send as photos
+        media_items = []
+        for asset in assets:
+            asset_id = asset.get("id", "")
+            filename = asset.get("originalFileName", "")
+            year = asset.get("year", "")
+            caption = filename
+            if year:
+                caption = f"{filename} ({year})"
+            media_items.append({
+                "type": "photo",
+                "asset_id": asset_id,
+                "caption": caption,
+                "thumbnail_url": f"{client.url}/api/assets/{asset_id}/thumbnail?size=preview",
+                "api_key": client.api_key,
+            })
+        return media_items
+
+    # Text mode
+    header_map = {
+        "search": {"en": f"🔍 Results for \"{query}\":", "ru": f"🔍 Результаты для \"{query}\":"},
+        "find": {"en": f"📄 Files matching \"{query}\":", "ru": f"📄 Файлы по запросу \"{query}\":"},
+        "person": {"en": f"👤 Photos of {query}:", "ru": f"👤 Фото {query}:"},
+        "place": {"en": f"📍 Photos from {query}:", "ru": f"📍 Фото из {query}:"},
+        "favorites": {"en": "⭐ Favorites:", "ru": "⭐ Избранное:"},
+        "latest": {"en": "📸 Latest:", "ru": "📸 Последние:"},
+        "random": {"en": "🎲 Random:", "ru": "🎲 Случайные:"},
+        "memory": {"en": "📅 On this day:", "ru": "📅 В этот день:"},
+    }
+    header = header_map.get(cmd, {}).get(locale, f"Results ({len(assets)}):")
+    lines = []
+    for a in assets:
+        name = a.get("originalFileName", a.get("id", "?")[:8])
+        year = a.get("year", "")
+        if year:
+            lines.append(f"  • {name} ({year})")
+        else:
+            lines.append(f"  • {name}")
+    return header + "\n" + "\n".join(lines)
+
+
+async def _get_bot_trackers(
+    bot: TelegramBot, session: AsyncSession
+) -> tuple[list[AlbumTracker], dict[int, ImmichServer]]:
+    """Get trackers and servers associated with a bot via its targets."""
+    # Find targets that use this bot's token
+    result = await session.exec(
+        select(NotificationTarget).where(NotificationTarget.type == "telegram")
+    )
+    targets = result.all()
+
+    bot_target_ids = set()
+    for target in targets:
+        if target.config.get("bot_token") == bot.token:
+            bot_target_ids.add(target.id)
+
+    if not bot_target_ids:
+        return [], {}
+
+    # Find trackers that include any of these target IDs
+    result = await session.exec(select(AlbumTracker))
+    all_trackers = result.all()
+
+    trackers = []
+    server_ids = set()
+    for tracker in all_trackers:
+        if any(tid in bot_target_ids for tid in (tracker.target_ids or [])):
+            trackers.append(tracker)
+            server_ids.add(tracker.server_id)
+
+    # Load servers
+    servers_map: dict[int, ImmichServer] = {}
+    for sid in server_ids:
+        server = await session.get(ImmichServer, sid)
+        if server:
+            servers_map[sid] = server
+
+    return trackers, servers_map
+
+
+async def send_media_group(
+    bot_token: str,
+    chat_id: str,
+    media_items: list[dict[str, Any]],
+) -> None:
+    """Send media items as photos to a Telegram chat."""
+    async with aiohttp.ClientSession() as http:
+        for item in media_items:
+            asset_id = item.get("asset_id", "")
+            caption = item.get("caption", "")
+            thumb_url = item.get("thumbnail_url", "")
+            api_key = item.get("api_key", "")
+
+            # Download thumbnail from Immich
+            try:
+                async with http.get(
+                    thumb_url,
+                    headers={"x-api-key": api_key},
+                ) as resp:
+                    if resp.status != 200:
+                        _LOGGER.warning("Failed to download thumbnail for %s", asset_id)
+                        continue
+                    photo_bytes = await resp.read()
+            except aiohttp.ClientError:
+                continue
+
+            # Send to Telegram
+            url = f"{TELEGRAM_API_BASE_URL}{bot_token}/sendPhoto"
+            data = aiohttp.FormData()
+            data.add_field("chat_id", chat_id)
+            data.add_field("photo", photo_bytes, filename=f"{asset_id}.jpg", content_type="image/jpeg")
+            if caption:
+                data.add_field("caption", caption)
+
+            try:
+                async with http.post(url, data=data) as resp:
+                    if resp.status != 200:
+                        result = await resp.json()
+                        _LOGGER.warning("Failed to send photo: %s", result.get("description"))
+            except aiohttp.ClientError as err:
+                _LOGGER.warning("Failed to send photo: %s", err)
+
+
+async def register_commands_with_telegram(bot: TelegramBot) -> bool:
+    """Register enabled commands with Telegram BotFather API."""
+    config = bot.commands_config or {}
+    enabled = config.get("enabled", [])
+    locale = config.get("locale", "en")
+
+    commands = []
+    for cmd in enabled:
+        desc = COMMAND_DESCRIPTIONS.get(cmd, {})
+        commands.append({
+            "command": cmd,
+            "description": desc.get(locale, desc.get("en", cmd)),
+        })
+
+    async with aiohttp.ClientSession() as http:
+        # Set commands for the bot's locale
+        url = f"{TELEGRAM_API_BASE_URL}{bot.token}/setMyCommands"
+        payload: dict[str, Any] = {"commands": commands}
+
+        try:
+            async with http.post(url, json=payload) as resp:
+                result = await resp.json()
+                if result.get("ok"):
+                    _LOGGER.info("Registered %d commands for bot @%s", len(commands), bot.bot_username)
+
+                    # Also register for the other locale
+                    other_locale = "ru" if locale == "en" else "en"
+                    other_commands = []
+                    for cmd in enabled:
+                        desc = COMMAND_DESCRIPTIONS.get(cmd, {})
+                        other_commands.append({
+                            "command": cmd,
+                            "description": desc.get(other_locale, desc.get("en", cmd)),
+                        })
+                    other_payload: dict[str, Any] = {
+                        "commands": other_commands,
+                        "language_code": other_locale,
+                    }
+                    async with http.post(url, json=other_payload) as resp2:
+                        r2 = await resp2.json()
+                        if not r2.get("ok"):
+                            _LOGGER.warning("Failed to register %s commands: %s", other_locale, r2.get("description"))
+
+                    return True
+                _LOGGER.warning("Failed to register commands: %s", result.get("description"))
+                return False
+        except aiohttp.ClientError as err:
+            _LOGGER.error("Failed to register commands: %s", err)
+            return False
--- a/packages/server/src/immich_watcher_server/ai/telegram_webhook.py
+++ b/packages/server/src/immich_watcher_server/ai/telegram_webhook.py
@@ -1,4 +1,4 @@
-"""Telegram webhook handler for AI bot interactions."""
+"""Telegram webhook handler for AI bot interactions and commands."""

 from __future__ import annotations

@@ -15,7 +15,9 @@ from immich_watcher_core.telegram.media import TELEGRAM_API_BASE_URL
 from ..auth.dependencies import get_current_user
 from ..config import settings
 from ..database.engine import get_session
-from ..database.models import AlbumTracker, EventLog, ImmichServer, NotificationTarget, User
+from ..database.models import AlbumTracker, EventLog, ImmichServer, NotificationTarget, TelegramBot, User
+from ..api.telegram_bots import save_chat_from_webhook
+from .commands import handle_command, send_media_group
 from .service import chat, is_ai_enabled, summarize_albums

 _LOGGER = logging.getLogger(__name__)
@@ -42,15 +44,16 @@ async def telegram_webhook(
        if x_telegram_bot_api_secret_token != settings.telegram_webhook_secret:
            raise HTTPException(status_code=403, detail="Invalid webhook secret")

-    # Validate bot_token against stored targets
-    result = await session.exec(select(NotificationTarget).where(NotificationTarget.type == "telegram"))
-    valid_token = False
-    for target in result.all():
-        if target.config.get("bot_token") == bot_token:
-            valid_token = True
-            break
-    if not valid_token:
-        raise HTTPException(status_code=403, detail="Unknown bot token")
+    # Find bot by token
+    bot_result = await session.exec(select(TelegramBot).where(TelegramBot.token == bot_token))
+    bot = bot_result.first()
+
+    if not bot:
+        # Fallback: check targets for legacy setups
+        result = await session.exec(select(NotificationTarget).where(NotificationTarget.type == "telegram"))
+        valid_token = any(t.config.get("bot_token") == bot_token for t in result.all())
+        if not valid_token:
+            raise HTTPException(status_code=403, detail="Unknown bot token")

    try:
        update = await request.json()
@@ -68,13 +71,30 @@ async def telegram_webhook(
    if not chat_id or not text:
        return {"ok": True, "skipped": "empty"}

-    if text.startswith("/start"):
-        await _send_reply(
-            bot_token, chat_id,
-            "Hi! I'm your Immich Watcher AI assistant. Ask me about your photo albums, "
-            "recent changes, or say 'summary' to get an overview."
-        )
-        return {"ok": True}
+    # Auto-persist chat from incoming message
+    if bot:
+        try:
+            await save_chat_from_webhook(session, bot.id, chat_info)
+            await session.commit()
+        except Exception:
+            _LOGGER.debug("Failed to auto-save chat %s", chat_id)
+
+    # Try bot commands first (if bot is registered)
+    if bot and text.startswith("/"):
+        cmd_response = await handle_command(bot, chat_id, text, session)
+        if cmd_response is not None:
+            if isinstance(cmd_response, list):
+                # Media response — send photos
+                await send_media_group(bot_token, chat_id, cmd_response)
+            else:
+                await _send_reply(bot_token, chat_id, cmd_response)
+            return {"ok": True}
+
+    # Fall through to AI chat if enabled
+    if not is_ai_enabled():
+        if text.startswith("/"):
+            return {"ok": True, "skipped": "command_not_handled"}
+        return {"ok": True, "skipped": "ai_disabled"}

    # Build context from database
    context = await _build_context(session, chat_id)
--- a/packages/server/src/immich_watcher_server/api/telegram_bots.py
+++ b/packages/server/src/immich_watcher_server/api/telegram_bots.py
@@ -9,9 +9,10 @@ import aiohttp

 from immich_watcher_core.telegram.media import TELEGRAM_API_BASE_URL

+from ..ai.commands import register_commands_with_telegram
 from ..auth.dependencies import get_current_user
 from ..database.engine import get_session
-from ..database.models import TelegramBot, User
+from ..database.models import TelegramBot, TelegramChat, User

 router = APIRouter(prefix="/api/telegram-bots", tags=["telegram-bots"])

@@ -23,6 +24,7 @@ class BotCreate(BaseModel):

 class BotUpdate(BaseModel):
    name: str | None = None
+    commands_config: dict | None = None


@router.get("")
@@ -44,7 +46,6 @@ async def create_bot(
    session: AsyncSession = Depends(get_session),
 ):
    """Register a new Telegram bot (validates token via getMe)."""
-    # Validate token by calling getMe
    bot_info = await _get_me(body.token)
    if not bot_info:
        raise HTTPException(status_code=400, detail="Invalid bot token")
@@ -69,10 +70,12 @@ async def update_bot(
    user: User = Depends(get_current_user),
    session: AsyncSession = Depends(get_session),
 ):
-    """Update a bot's display name."""
+    """Update a bot's display name and/or commands config."""
    bot = await _get_user_bot(session, bot_id, user.id)
    if body.name is not None:
        bot.name = body.name
+    if body.commands_config is not None:
+        bot.commands_config = body.commands_config
    session.add(bot)
    await session.commit()
    await session.refresh(bot)
@@ -85,8 +88,12 @@ async def delete_bot(
    user: User = Depends(get_current_user),
    session: AsyncSession = Depends(get_session),
 ):
-    """Delete a registered bot."""
+    """Delete a registered bot and its chats."""
    bot = await _get_user_bot(session, bot_id, user.id)
+    # Delete associated chats
+    result = await session.exec(select(TelegramChat).where(TelegramChat.bot_id == bot_id))
+    for chat in result.all():
+        await session.delete(chat)
    await session.delete(bot)
    await session.commit()

@@ -99,26 +106,104 @@ async def get_bot_token(
 ):
    """Get the full bot token (used by frontend to construct target config)."""
    bot = await _get_user_bot(session, bot_id, user.id)
-    # Token is returned only to the authenticated owner
    return {"token": bot.token}


+# --- Chat management ---
+
@router.get("/{bot_id}/chats")
 async def list_bot_chats(
    bot_id: int,
    user: User = Depends(get_current_user),
    session: AsyncSession = Depends(get_session),
 ):
-    """Discover active chats for a bot via getUpdates.
+    """List persisted chats for a bot."""
+    await _get_user_bot(session, bot_id, user.id)  # Auth check
+    result = await session.exec(
+        select(TelegramChat).where(TelegramChat.bot_id == bot_id)
+    )
+    return [_chat_response(c) for c in result.all()]

-    Returns unique chats the bot has received messages from.
-    Note: Telegram only keeps updates for 24 hours, so this shows
-    recently active chats. For groups, the bot must have received
-    at least one message.
+
+@router.post("/{bot_id}/chats/discover")
+async def discover_chats(
+    bot_id: int,
+    user: User = Depends(get_current_user),
+    session: AsyncSession = Depends(get_session),
+):
+    """Discover new chats via Telegram getUpdates and persist them.
+
+    Merges newly discovered chats with existing ones (no duplicates).
+    Returns the full updated chat list.
    """
    bot = await _get_user_bot(session, bot_id, user.id)
-    chats = await _discover_chats(bot.token)
-    return chats
+    discovered = await _fetch_chats_from_telegram(bot.token)
+
+    # Load existing chats to avoid duplicates
+    result = await session.exec(
+        select(TelegramChat).where(TelegramChat.bot_id == bot_id)
+    )
+    existing = {c.chat_id: c for c in result.all()}
+
+    new_count = 0
+    for chat_data in discovered:
+        cid = str(chat_data["id"])
+        if cid in existing:
+            # Update title/username if changed
+            existing_chat = existing[cid]
+            existing_chat.title = chat_data.get("title", existing_chat.title)
+            existing_chat.username = chat_data.get("username", existing_chat.username)
+            session.add(existing_chat)
+        else:
+            new_chat = TelegramChat(
+                bot_id=bot_id,
+                chat_id=cid,
+                title=chat_data.get("title", ""),
+                chat_type=chat_data.get("type", "private"),
+                username=chat_data.get("username", ""),
+            )
+            session.add(new_chat)
+            new_count += 1
+
+    await session.commit()
+
+    # Return full list
+    result = await session.exec(
+        select(TelegramChat).where(TelegramChat.bot_id == bot_id)
+    )
+    return [_chat_response(c) for c in result.all()]
+
+
+@router.delete("/{bot_id}/chats/{chat_db_id}", status_code=status.HTTP_204_NO_CONTENT)
+async def delete_chat(
+    bot_id: int,
+    chat_db_id: int,
+    user: User = Depends(get_current_user),
+    session: AsyncSession = Depends(get_session),
+):
+    """Delete a persisted chat entry."""
+    await _get_user_bot(session, bot_id, user.id)  # Auth check
+    chat = await session.get(TelegramChat, chat_db_id)
+    if not chat or chat.bot_id != bot_id:
+        raise HTTPException(status_code=404, detail="Chat not found")
+    await session.delete(chat)
+    await session.commit()
+
+
+# --- Commands ---
+
+@router.post("/{bot_id}/sync-commands")
+async def sync_commands(
+    bot_id: int,
+    user: User = Depends(get_current_user),
+    session: AsyncSession = Depends(get_session),
+):
+    """Register bot commands with Telegram BotFather API."""
+    bot = await _get_user_bot(session, bot_id, user.id)
+    success = await register_commands_with_telegram(bot)
+    if not success:
+        raise HTTPException(status_code=500, detail="Failed to register commands with Telegram")
+    return {"success": True}


 # --- Helpers ---
@@ -136,8 +221,8 @@ async def _get_me(token: str) -> dict | None:
    return None


-async def _discover_chats(token: str) -> list[dict]:
-    """Discover chats by fetching recent updates from Telegram."""
+async def _fetch_chats_from_telegram(token: str) -> list[dict]:
+    """Fetch chats from Telegram getUpdates API."""
    seen: dict[int, dict] = {}
    try:
        async with aiohttp.ClientSession() as http:
@@ -155,7 +240,7 @@ async def _discover_chats(token: str) -> list[dict]:
                    if chat_id and chat_id not in seen:
                        seen[chat_id] = {
                            "id": chat_id,
-                            "title": chat.get("title") or chat.get("first_name", "") + (" " + chat.get("last_name", "")).strip(),
+                            "title": chat.get("title") or (chat.get("first_name", "") + (" " + chat.get("last_name", "")).strip()),
                            "type": chat.get("type", "private"),
                            "username": chat.get("username", ""),
                        }
@@ -164,6 +249,17 @@ async def _discover_chats(token: str) -> list[dict]:
    return list(seen.values())


+def _chat_response(c: TelegramChat) -> dict:
+    return {
+        "id": c.id,
+        "chat_id": c.chat_id,
+        "title": c.title,
+        "type": c.chat_type,
+        "username": c.username,
+        "discovered_at": c.discovered_at.isoformat(),
+    }
+
+
 def _bot_response(b: TelegramBot) -> dict:
    return {
        "id": b.id,
@@ -171,6 +267,7 @@ def _bot_response(b: TelegramBot) -> dict:
        "bot_username": b.bot_username,
        "bot_id": b.bot_id,
        "token_preview": f"{b.token[:8]}...{b.token[-4:]}" if len(b.token) > 12 else "***",
+        "commands_config": b.commands_config,
        "created_at": b.created_at.isoformat(),
    }

@@ -180,3 +277,40 @@ async def _get_user_bot(session: AsyncSession, bot_id: int, user_id: int) -> Tel
    if not bot or bot.user_id != user_id:
        raise HTTPException(status_code=404, detail="Bot not found")
    return bot
+
+
+async def save_chat_from_webhook(
+    session: AsyncSession, bot_id: int, chat_data: dict
+) -> None:
+    """Save or update a chat entry from an incoming webhook message.
+
+    Called by the webhook handler to auto-persist chats.
+    """
+    chat_id = str(chat_data.get("id", ""))
+    if not chat_id:
+        return
+
+    result = await session.exec(
+        select(TelegramChat).where(
+            TelegramChat.bot_id == bot_id,
+            TelegramChat.chat_id == chat_id,
+        )
+    )
+    existing = result.first()
+
+    title = chat_data.get("title") or (
+        chat_data.get("first_name", "") + (" " + chat_data.get("last_name", "")).strip()
+    )
+
+    if existing:
+        existing.title = title
+        existing.username = chat_data.get("username", existing.username)
+        session.add(existing)
+    else:
+        session.add(TelegramChat(
+            bot_id=bot_id,
+            chat_id=chat_id,
+            title=title,
+            chat_type=chat_data.get("type", "private"),
+            username=chat_data.get("username", ""),
+        ))
--- a/packages/server/src/immich_watcher_server/database/models.py
+++ b/packages/server/src/immich_watcher_server/database/models.py
@@ -49,9 +49,37 @@ class TelegramBot(SQLModel, table=True):
    icon: str = Field(default="")  # MDI icon name
    bot_username: str = Field(default="")  # @username from getMe
    bot_id: int = Field(default=0)  # Numeric bot ID from getMe
+    commands_config: dict[str, Any] = Field(
+        default_factory=lambda: {
+            "enabled": [
+                "status", "albums", "events", "summary", "latest",
+                "memory", "random", "search", "find", "person",
+                "place", "favorites", "people", "help",
+            ],
+            "default_count": 5,
+            "response_mode": "media",
+            "rate_limits": {"search": 30, "find": 30, "default": 10},
+            "locale": "en",
+        },
+        sa_column=Column(JSON),
+    )
    created_at: datetime = Field(default_factory=_utcnow)


+class TelegramChat(SQLModel, table=True):
+    """Discovered Telegram chat associated with a bot."""
+
+    __tablename__ = "telegram_chat"
+
+    id: int | None = Field(default=None, primary_key=True)
+    bot_id: int = Field(foreign_key="telegram_bot.id")
+    chat_id: str  # Telegram chat ID (can be negative for groups)
+    title: str = Field(default="")
+    chat_type: str = Field(default="private")  # private/group/supergroup/channel
+    username: str = Field(default="")
+    discovered_at: datetime = Field(default_factory=_utcnow)
+
+
 class TrackingConfig(SQLModel, table=True):
    """Tracking configuration: what events/assets to react to and scheduled modes."""

--- a/plans/phase-10-telegram-commands.md
+++ b/plans/phase-10-telegram-commands.md
@@ -1,6 +1,6 @@
 # Phase 10: Telegram Bot Commands

-**Status**: Pending
+**Status**: Done
 **Parent**: [primary-plan.md](primary-plan.md)

 ---
--- a/plans/phase-11-snackbar-notifications.md
+++ b/plans/phase-11-snackbar-notifications.md
@@ -1,6 +1,6 @@
 # Phase 11: Snackbar Notifications

-**Status**: Pending
+**Status**: Done
 **Parent**: [primary-plan.md](primary-plan.md)

 ---
--- a/plans/primary-plan.md
+++ b/plans/primary-plan.md
@@ -222,7 +222,14 @@ async def _execute_telegram_notification(self, ...):
 - Natural language tracker configuration via Telegram chat
 - **Subplan**: `plans/phase-6-claude-ai-bot.md`

-### Phase 11: Snackbar Notifications `[ ]`
+### Phase 10: Telegram Bot Commands `[x]`
+- Bot command handler for /status, /albums, /events, /search, /find, etc.
+- Commands config per bot (enabled commands, count, locale, rate limits)
+- Auto-register commands with Telegram BotFather API
+- Frontend UI for command configuration
+- **Subplan**: `plans/phase-10-telegram-commands.md`
+
+### Phase 11: Snackbar Notifications `[x]`
 - Unified toast/snackbar system for action feedback (success, error, info, warning)
 - Replace all `alert()` calls with typed snackbars
 - Auto-dismiss, stacking, accessible, animated
Author	SHA1	Message	Date
alexei.dolgolyov	3ad8ddaa25	Redesign frontend UI with Observatory theme All checks were successful Validate / Hassfest (push) Successful in 3s Details New teal-accent color system, DM Sans + JetBrains Mono typography, glow effects, animated gradient login page, animated dashboard counters with gradient-border stat cards, event timeline, sidebar with active glow indicators, and polished components (modals, cards, snackbar). Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>	2026-03-19 22:10:06 +03:00
alexei.dolgolyov	ff43e006d8	Fix chat copy snack message, improve server restart in CLAUDE.md All checks were successful Validate / Hassfest (push) Successful in 3s Details Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>	2026-03-19 21:57:02 +03:00
alexei.dolgolyov	0a94f2bc88	Fix chat row: whole row clickable, fix snack message, stop propagation on delete All checks were successful Validate / Hassfest (push) Successful in 3s Details Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>	2026-03-19 21:51:45 +03:00
alexei.dolgolyov	482f54d620	Persist Telegram chats in DB, auto-save from webhooks, click-to-copy All checks were successful Validate / Hassfest (push) Successful in 4s Details - Add TelegramChat model (bot_id, chat_id, title, type, username) - Chats auto-saved when bot receives webhook messages - New API: GET/DELETE chats, POST discover (merges from getUpdates) - Cascade delete chats when bot is deleted - Frontend: click chat row to copy chat ID to clipboard - Frontend: delete button per chat, "Discover chats" sync button - Add 4 i18n keys (EN/RU) for chat management Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>	2026-03-19 21:45:20 +03:00
alexei.dolgolyov	e6ff0a423a	Phase 10: Telegram bot commands + Phase 11: Snackbar notifications All checks were successful Validate / Hassfest (push) Successful in 3s Details Phase 10 — Telegram Bot Commands: - Add commands_config JSON field to TelegramBot model (enabled cmds, default count, response mode, rate limits, locale) - Create command handler with 14 commands: /status, /albums, /events, /summary, /latest, /memory, /random, /search, /find, /person, /place, /favorites, /people, /help - Add search_smart, search_metadata, search_by_person, get_random, download_asset, get_asset_thumbnail to ImmichClient - Auto-register commands with Telegram setMyCommands API (EN+RU) - Rate limiting per chat per command category - Media mode: download thumbnails and send as photos to Telegram - Webhook handler routes /commands before falling through to AI chat - Frontend: expandable Commands section per bot with checkboxes, count/mode/locale settings, rate limit inputs, sync button Phase 11 — Snackbar Notifications: - Create snackbar store (snackbar.svelte.ts) with $state rune - Create Snackbar component with fly/fade transitions, typed colors - Mount globally in +layout.svelte - Replace all alert() calls with typed snackbar notifications - Add success snacks to all CRUD operations across all pages - 4 types: success (3s), error (5s), info (3s), warning (4s) - Max 3 visible, auto-dismiss, manual dismiss via X button Both: Add ~30 i18n keys (EN+RU) for commands UI and snack messages. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>	2026-03-19 21:39:05 +03:00