Comprehensive review fixes: security, performance, code quality, and UI polish

Backend: Fix CORS wildcard+credentials, add secret key warning, remove raw
API keys from sync endpoint, fix N+1 queries in watcher/sync, fix
AttributeError on event_types, delete dead scheduled.py/templates.py,
add limit cap on history, re-validate server on URL/key update, apply
tracking/template config IDs in update_target.

HA Integration: Replace datetime.now() with dt_util.now(), fix notification
queue to only remove successfully sent items, use album UUID for entity
unique IDs, add shared links dirty flag and users cache hourly refresh,
deduplicate _is_quiet_hours, add HTTP timeouts, cache albums in config
flow, change iot_class to local_polling.

Frontend: Make i18n reactive via $state (remove window.location.reload),
add Modal transitions/a11y/Escape key, create ConfirmModal replacing all
confirm() calls, add error handling to all pages, replace Unicode nav
icons with MDI SVGs, add card hover effects, dashboard stat icons, global
focus-visible styles, form slide transitions, mobile responsive bottom
nav, fix password error color, add ~20 i18n keys (EN/RU).

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

frontend/src/lib/components/Card.svelte

@@ -1,10 +1,11 @@
 <script lang="ts">
-	let { children, class: className = '' } = $props<{
+	let { children, class: className = '', hover = false } = $props<{
 		children: import('svelte').Snippet;
 		class?: string;
+		hover?: boolean;
 	}>();
 </script>
 
-<div class="bg-[var(--color-card)] border border-[var(--color-border)] rounded-lg p-4 {className}">
+<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}">
 	{@render children()}
 </div>

frontend/src/lib/components/ConfirmModal.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+	import Modal from './Modal.svelte';
+	import { t } from '$lib/i18n';
+
+	let { open = false, title = '', message = '', onconfirm, oncancel } = $props<{
+		open: boolean;
+		title?: string;
+		message?: string;
+		onconfirm: () => void;
+		oncancel: () => void;
+	}>();
+</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 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">
+			{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">
+			{t('common.delete')}
+		</button>
+	</div>
+</Modal>

frontend/src/lib/components/IconPicker.svelte

@@ -50,8 +50,17 @@
 		open = false;
 		search = '';
 	}
+
+	function handleKeydown(e: KeyboardEvent) {
+		if (e.key === 'Escape' && open) {
+			open = false;
+			search = '';
+		}
+	}
 </script>
 
+<svelte:window onkeydown={open ? handleKeydown : undefined} />
+
 <div class="inline-block">
 	<button type="button" bind:this={buttonEl} onclick={toggleOpen}
 		class="flex items-center justify-center gap-1 px-2 py-2 border border-[var(--color-border)] rounded-md text-sm bg-[var(--color-background)] hover:bg-[var(--color-muted)] transition-colors">
@@ -65,9 +74,9 @@
 </div>
 
 {#if open}
-	<!-- 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:9998;" onclick={() => { open = false; search = ''; }}></div>
+	<div style="position:fixed; top:0; left:0; right:0; bottom:0; z-index:9998;"
+		role="presentation"
+		onclick={() => { open = false; search = ''; }}></div>
 
 	<div style="{dropdownStyle} width: 20rem;"
 		class="bg-[var(--color-card)] border border-[var(--color-border)] rounded-lg shadow-lg p-3">

frontend/src/lib/components/Modal.svelte

@@ -1,27 +1,50 @@
 <script lang="ts">
+	import { fade, fly } from 'svelte/transition';
+
 	let { open = false, title = '', onclose, children } = $props<{
 		open: boolean;
 		title?: string;
 		onclose: () => void;
 		children: import('svelte').Snippet;
 	}>();
+
+	function handleKeydown(e: KeyboardEvent) {
+		if (e.key === 'Escape') onclose();
+	}
 </script>
 
+<svelte:window onkeydown={open ? handleKeydown : undefined} />
+
 {#if open}
-	<!-- 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);"
-		onclick={onclose}
+		role="presentation"
+		class="fixed inset-0 z-[9999] flex items-center justify-center"
+		transition:fade={{ duration: 150 }}
 	>
+		<!-- Backdrop -->
 		<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: 28rem; margin: 1rem; padding: 1.25rem;"
+			class="absolute inset-0 bg-black/50"
+			onclick={onclose}
+			role="presentation"
+		></div>
+
+		<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+		<!-- Panel -->
+		<div
+			role="dialog"
+			aria-modal="true"
+			aria-label={title}
+			tabindex="-1"
+			class="relative bg-[var(--color-card)] border border-[var(--color-border)] rounded-lg shadow-xl w-full max-w-md mx-4 p-5"
 			onclick={(e) => e.stopPropagation()}
+			onkeydown={(e) => { if (e.key === 'Escape') onclose(); }}
+			transition:fly={{ y: -20, duration: 200 }}
 		>
-			<div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem;">
-				<h3 style="font-size: 1.125rem; font-weight: 600;">{title}</h3>
+			<div class="flex items-center justify-between mb-4">
+				<h3 class="text-lg font-semibold">{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;">
+					class="text-[var(--color-muted-foreground)] hover:text-[var(--color-foreground)] text-xl leading-none cursor-pointer bg-transparent border-none p-1 transition-colors"
+					aria-label="Close">
 					&times;
 				</button>
 			</div>

frontend/src/lib/i18n/en.json

@@ -53,7 +53,11 @@
 		"connecting": "Connecting...",
 		"noServers": "No servers configured yet.",
 		"delete": "Delete",
-		"confirmDelete": "Delete this server?"
+		"confirmDelete": "Delete this server?",
+		"online": "Online",
+		"offline": "Offline",
+		"checking": "Checking...",
+		"loadError": "Failed to load servers."
 	},
 	"trackers": {
 		"title": "Trackers",
@@ -177,7 +181,8 @@
 		"private": "Private",
 		"group": "Group",
 		"supergroup": "Supergroup",
-		"channel": "Channel"
+		"channel": "Channel",
+		"confirmDelete": "Delete this bot?"
 	},
 	"trackingConfig": {
 		"title": "Tracking Configs",
@@ -211,7 +216,20 @@
 		"assetType": "Asset type",
 		"minRating": "Min rating",
 		"memoryMode": "Memory Mode (On This Day)",
-		"test": "Test"
+		"test": "Test",
+		"confirmDelete": "Delete this tracking config?",
+		"sortNone": "None",
+		"sortDate": "Date",
+		"sortRating": "Rating",
+		"sortName": "Name",
+		"orderDesc": "Descending",
+		"orderAsc": "Ascending",
+		"albumModePerAlbum": "Per album",
+		"albumModeCombined": "Combined",
+		"albumModeRandom": "Random",
+		"assetTypeAll": "All",
+		"assetTypePhoto": "Photo",
+		"assetTypeVideo": "Video"
 	},
 	"templateConfig": {
 		"title": "Template Configs",
@@ -246,7 +264,8 @@
 		"memoryMode": "Memory mode",
 		"telegramSettings": "Telegram",
 		"videoWarning": "Video warning",
-		"preview": "Preview"
+		"preview": "Preview",
+		"confirmDelete": "Delete this template config?"
 	},
 	"common": {
 		"loading": "Loading...",
@@ -258,6 +277,10 @@
 		"confirm": "Confirm",
 		"error": "Error",
 		"success": "Success",
+		"none": "None",
+		"noneDefault": "None (default)",
+		"loadError": "Failed to load data",
+		"headersInvalid": "Invalid JSON",
 		"language": "Language",
 		"theme": "Theme",
 		"light": "Light",
@@ -268,6 +291,8 @@
 		"changePassword": "Change Password",
 		"currentPassword": "Current password",
 		"newPassword": "New password",
-		"passwordChanged": "Password changed successfully"
+		"passwordChanged": "Password changed successfully",
+		"expand": "Expand",
+		"collapse": "Collapse"
 	}
 }

frontend/src/lib/i18n/index.svelte.ts

@@ -0,0 +1,62 @@
+/**
+ * Reactive i18n module using Svelte 5 $state rune.
+ * Locale changes automatically propagate to all components using t().
+ */
+
+import en from './en.json';
+import ru from './ru.json';
+
+export type Locale = 'en' | 'ru';
+
+const translations: Record<Locale, Record<string, any>> = { en, ru };
+
+function detectLocale(): Locale {
+	if (typeof localStorage !== 'undefined') {
+		const saved = localStorage.getItem('locale') as Locale | null;
+		if (saved && saved in translations) return saved;
+	}
+	if (typeof navigator !== 'undefined') {
+		const lang = navigator.language.slice(0, 2);
+		if (lang in translations) return lang as Locale;
+	}
+	return 'en';
+}
+
+let currentLocale = $state<Locale>(detectLocale());
+
+export function getLocale(): Locale {
+	return currentLocale;
+}
+
+export function setLocale(locale: Locale) {
+	currentLocale = locale;
+	if (typeof localStorage !== 'undefined') {
+		localStorage.setItem('locale', locale);
+	}
+}
+
+export function initLocale() {
+	// No-op: locale is auto-detected at module load via $state.
+	// Kept for backward compatibility with existing onMount calls.
+}
+
+/**
+ * Get a translated string by dot-separated key.
+ * Falls back to English if key not found in current locale.
+ * Reactive: re-evaluates when currentLocale changes.
+ */
+export function t(key: string): string {
+	return resolve(translations[currentLocale], key)
+		?? resolve(translations.en, key)
+		?? key;
+}
+
+function resolve(obj: any, path: string): string | undefined {
+	const parts = path.split('.');
+	let current = obj;
+	for (const part of parts) {
+		if (current == null || typeof current !== 'object') return undefined;
+		current = current[part];
+	}
+	return typeof current === 'string' ? current : undefined;
+}

frontend/src/lib/i18n/index.ts

@@ -1,73 +1,2 @@
-/**
- * Simple i18n module. Uses plain variable (no $state rune)
- * so it works in both SSR and client contexts.
- */
-
-import en from './en.json';
-import ru from './ru.json';
-
-export type Locale = 'en' | 'ru';
-
-const translations: Record<Locale, Record<string, any>> = { en, ru };
-
-let currentLocale: Locale = 'en';
-
-// Auto-initialize from localStorage on module load (client-side)
-if (typeof localStorage !== 'undefined') {
-	const saved = localStorage.getItem('locale') as Locale | null;
-	if (saved && saved in translations) {
-		currentLocale = saved;
-	} else if (typeof navigator !== 'undefined') {
-		const lang = navigator.language.slice(0, 2);
-		if (lang in translations) {
-			currentLocale = lang as Locale;
-		}
-	}
-}
-
-export function getLocale(): Locale {
-	return currentLocale;
-}
-
-export function setLocale(locale: Locale) {
-	currentLocale = locale;
-	if (typeof localStorage !== 'undefined') {
-		localStorage.setItem('locale', locale);
-	}
-}
-
-export function initLocale() {
-	if (typeof localStorage !== 'undefined') {
-		const saved = localStorage.getItem('locale') as Locale | null;
-		if (saved && saved in translations) {
-			currentLocale = saved;
-			return;
-		}
-	}
-	if (typeof navigator !== 'undefined') {
-		const lang = navigator.language.slice(0, 2);
-		if (lang in translations) {
-			currentLocale = lang as Locale;
-		}
-	}
-}
-
-/**
- * Get a translated string by dot-separated key.
- * Falls back to English if key not found in current locale.
- */
-export function t(key: string): string {
-	return resolve(translations[currentLocale], key)
-		?? resolve(translations.en, key)
-		?? key;
-}
-
-function resolve(obj: any, path: string): string | undefined {
-	const parts = path.split('.');
-	let current = obj;
-	for (const part of parts) {
-		if (current == null || typeof current !== 'object') return undefined;
-		current = current[part];
-	}
-	return typeof current === 'string' ? current : undefined;
-}
+// Re-export from the .svelte.ts module which supports $state runes
+export { t, getLocale, setLocale, initLocale, type Locale } from './index.svelte';

frontend/src/lib/i18n/ru.json

@@ -53,7 +53,11 @@
 		"connecting": "Подключение...",
 		"noServers": "Серверы не настроены.",
 		"delete": "Удалить",
-		"confirmDelete": "Удалить этот сервер?"
+		"confirmDelete": "Удалить этот сервер?",
+		"online": "В сети",
+		"offline": "Не в сети",
+		"checking": "Проверка...",
+		"loadError": "Не удалось загрузить серверы."
 	},
 	"trackers": {
 		"title": "Трекеры",
@@ -177,7 +181,8 @@
 		"private": "Личный",
 		"group": "Группа",
 		"supergroup": "Супергруппа",
-		"channel": "Канал"
+		"channel": "Канал",
+		"confirmDelete": "Удалить этого бота?"
 	},
 	"trackingConfig": {
 		"title": "Конфигурации отслеживания",
@@ -211,7 +216,20 @@
 		"assetType": "Тип файлов",
 		"minRating": "Мин. рейтинг",
 		"memoryMode": "Воспоминания (В этот день)",
-		"test": "Тест"
+		"test": "Тест",
+		"confirmDelete": "Удалить эту конфигурацию отслеживания?",
+		"sortNone": "Нет",
+		"sortDate": "Дата",
+		"sortRating": "Рейтинг",
+		"sortName": "Имя",
+		"orderDesc": "По убыванию",
+		"orderAsc": "По возрастанию",
+		"albumModePerAlbum": "По альбомам",
+		"albumModeCombined": "Объединённый",
+		"albumModeRandom": "Случайный",
+		"assetTypeAll": "Все",
+		"assetTypePhoto": "Фото",
+		"assetTypeVideo": "Видео"
 	},
 	"templateConfig": {
 		"title": "Конфигурации шаблонов",
@@ -246,7 +264,8 @@
 		"memoryMode": "Воспоминания",
 		"telegramSettings": "Telegram",
 		"videoWarning": "Предупреждение о видео",
-		"preview": "Предпросмотр"
+		"preview": "Предпросмотр",
+		"confirmDelete": "Удалить эту конфигурацию шаблона?"
 	},
 	"common": {
 		"loading": "Загрузка...",
@@ -258,6 +277,10 @@
 		"confirm": "Подтвердить",
 		"error": "Ошибка",
 		"success": "Успешно",
+		"none": "Нет",
+		"noneDefault": "Нет (по умолчанию)",
+		"loadError": "Не удалось загрузить данные",
+		"headersInvalid": "Невалидный JSON",
 		"language": "Язык",
 		"theme": "Тема",
 		"light": "Светлая",
@@ -268,6 +291,8 @@
 		"changePassword": "Сменить пароль",
 		"currentPassword": "Текущий пароль",
 		"newPassword": "Новый пароль",
-		"passwordChanged": "Пароль успешно изменён"
+		"passwordChanged": "Пароль успешно изменён",
+		"expand": "Развернуть",
+		"collapse": "Свернуть"
 	}
 }