refactor: comprehensive codebase review — security, performance, quality, UX

Security:
- Fix NUT protocol command injection (validate names against safe regex)
- Enable Jinja2 autoescape=True to prevent HTML injection via external data
- Add WebhookProviderConfig validation model

Performance:
- Shared aiohttp.ClientSession singleton (replaces 40+ per-request sessions)
- Fix 4 N+1 queries with batch IN loads (poller, scheduler, memory, broadcast)
- asyncio.gather for Gitea commands and notification dispatcher
- Add DB indexes on NotificationTrackerState.tracker_id, CommandTrackerListener
- LRU cache for compiled Jinja2 templates
- Daily EventLog cleanup job (90-day retention)
- 30s HTTP timeout on all external calls
- GROUP BY for target type counts (replaces 7 sequential queries)

Code quality:
- Extract get_owned_entity() helper (replaces 11 duplicate functions)
- Extract slot_helpers.py (load_slots, save_slots, render_template_preview)
- Extract command_utils.py (tracker lookup, last event, collection IDs)
- Extract http_session.py (shared session lifecycle)
- Provider connection validation dedup (3x → 1 helper)
- Command dispatch tables replacing if/elif chains
- Album+links fetch helper (fetch_albums_with_links)
- Provider dispatch polymorphism (list_provider_collections)
- Immutable _enrich_assets (no longer mutates in-place)
- Fix _format_assets return type + handler unpacking

Frontend:
- Fix 18+ hardcoded English strings → t() with new i18n keys (en + ru)
- Mobile "More" nav panel with provider filter and search
- Shared Button.svelte component (4 variants, 2 sizes)
- Shared ErrorBanner.svelte component (8 pages updated)
- SvelteKit goto() replacing window.location.href
- Dashboard grid fixed for 4 cards, paginator opacity consistency

Functionality:
- max_instances=1 on scheduler jobs (prevents duplicate events)
- Webhook provider in watcher (prevents error spam)
- Fix stale SQLModel reference in poller
- Gitea get_repo() direct API call

frontend/src/lib/components/Button.svelte

@@ -0,0 +1,85 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	let {
+		variant = 'primary',
+		size = 'md',
+		disabled = false,
+		type = 'button',
+		href,
+		onclick,
+		children,
+		class: extraClass = '',
+	}: {
+		variant?: 'primary' | 'secondary' | 'danger' | 'ghost';
+		size?: 'sm' | 'md';
+		disabled?: boolean;
+		type?: 'button' | 'submit';
+		href?: string;
+		onclick?: (e: MouseEvent) => void;
+		children: Snippet;
+		class?: string;
+	} = $props();
+
+	const baseClasses = 'inline-flex items-center justify-center gap-1.5 rounded-md text-sm font-medium transition-colors disabled:opacity-50';
+	const sizeClasses: Record<string, string> = {
+		sm: 'px-2.5 py-1 text-xs',
+		md: 'px-4 py-2',
+	};
+	const variantClasses: Record<string, string> = {
+		primary: 'btn-primary',
+		secondary: 'btn-secondary',
+		danger: 'btn-danger',
+		ghost: 'btn-ghost',
+	};
+
+	const classes = $derived(
+		`${baseClasses} ${sizeClasses[size]} ${variantClasses[variant]} ${extraClass}`.trim()
+	);
+</script>
+
+{#if href && !disabled}
+	<a {href} class={classes} onclick={onclick}>
+		{@render children()}
+	</a>
+{:else}
+	<button {type} {disabled} class={classes} onclick={onclick}>
+		{@render children()}
+	</button>
+{/if}
+
+<style>
+	.btn-primary {
+		background: var(--color-primary);
+		color: var(--color-primary-foreground);
+	}
+	.btn-primary:hover:not(:disabled) {
+		opacity: 0.9;
+	}
+
+	.btn-secondary {
+		background: var(--color-muted);
+		color: var(--color-foreground);
+		border: 1px solid var(--color-border);
+	}
+	.btn-secondary:hover:not(:disabled) {
+		opacity: 0.8;
+	}
+
+	.btn-danger {
+		background: var(--color-error-fg);
+		color: white;
+	}
+	.btn-danger:hover:not(:disabled) {
+		opacity: 0.9;
+	}
+
+	.btn-ghost {
+		background: transparent;
+		color: var(--color-muted-foreground);
+	}
+	.btn-ghost:hover:not(:disabled) {
+		background: var(--color-muted);
+		color: var(--color-foreground);
+	}
+</style>

frontend/src/lib/components/EntitySelect.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import MdiIcon from './MdiIcon.svelte';
+	import { t } from '$lib/i18n';
 
 	export interface EntityItem {
 		value: string | number;
@@ -142,7 +143,7 @@
 
 		<div class="ep-list" bind:this={listEl} role="listbox">
 			{#if filtered.length === 0}
-				<div class="ep-empty">No matches</div>
+				<div class="ep-empty">{t('common.noMatches')}</div>
 			{:else}
 				{#each filtered as item, i}
 					<button

frontend/src/lib/components/ErrorBanner.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+	interface Props {
+		message: string;
+		class?: string;
+	}
+	let { message, class: className = '' }: Props = $props();
+</script>
+
+{#if message}
+	<div class="bg-[var(--color-error-bg)] text-[var(--color-error-fg)] text-sm rounded-md p-3 mb-4 {className}">
+		{message}
+	</div>
+{/if}

frontend/src/lib/components/IconGridSelect.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import MdiIcon from './MdiIcon.svelte';
+	import { t } from '$lib/i18n';
 
 	export interface GridItem {
 		value: string | number;
@@ -117,7 +118,7 @@
 				</button>
 			{/each}
 			{#if filtered.length === 0}
-				<div class="icon-grid-empty" style="grid-column: 1 / -1; text-align: center; padding: 0.75rem; color: var(--color-muted-foreground); font-size: 0.75rem;">No matches</div>
+				<div class="icon-grid-empty" style="grid-column: 1 / -1; text-align: center; padding: 0.75rem; color: var(--color-muted-foreground); font-size: 0.75rem;">{t('common.noMatches')}</div>
 			{/if}
 		</div>
 	</div>

frontend/src/lib/components/Modal.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
 	import MdiIcon from './MdiIcon.svelte';
+	import { t } from '$lib/i18n';
 
 	let { open = false, title = '', onclose, children } = $props<{
 		open: boolean;
@@ -93,7 +94,7 @@
 		>
 			<div style="display: flex; align-items: center; justify-content: space-between; padding: 1.5rem 1.5rem 1rem;">
 				<h3 id="modal-title-{uniqueId}" style="font-size: 1.125rem; font-weight: 600;">{title}</h3>
-				<button class="modal-close" onclick={onclose} aria-label="Close">
+				<button class="modal-close" onclick={onclose} aria-label={t('common.close')}>
 					<MdiIcon name="mdiClose" size={18} />
 				</button>
 			</div>

frontend/src/lib/components/MultiEntitySelect.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import MdiIcon from './MdiIcon.svelte';
+	import { t } from '$lib/i18n';
 
 	export interface MultiEntityItem {
 		value: string;
@@ -132,7 +133,7 @@
 
 		<div class="mes-list" bind:this={listEl} role="listbox">
 			{#if filtered.length === 0}
-				<div class="mes-empty">No matches</div>
+				<div class="mes-empty">{t('common.noMatches')}</div>
 			{:else}
 				{#each filtered as item, i}
 					{@const checked = (values || []).includes(item.value)}

frontend/src/lib/components/Snackbar.svelte

@@ -56,7 +56,7 @@
 						{/if}
 					{/if}
 				</div>
-				<button class="snack-close" onclick={() => removeSnack(snack.id)} aria-label="Dismiss">
+				<button class="snack-close" onclick={() => removeSnack(snack.id)} aria-label={t('common.dismiss')}>
 					<MdiIcon name="mdiClose" size={14} />
 				</button>
 			</div>

frontend/src/lib/grid-items.ts

@@ -110,6 +110,8 @@ export const previewTargetTypeItems = (): GridItem[] => [
 	{ value: 'email', icon: 'mdiEmailOutline', label: 'Email', desc: t('gridDesc.previewEmail') },
 	{ value: 'discord', icon: 'mdiChat', label: 'Discord', desc: t('gridDesc.previewDiscord') },
 	{ value: 'slack', icon: 'mdiSlack', label: 'Slack', desc: t('gridDesc.previewSlack') },
+	{ value: 'ntfy', icon: 'mdiBellOutline', label: 'ntfy', desc: t('gridDesc.previewNtfy') },
+	{ value: 'matrix', icon: 'mdiMatrix', label: 'Matrix', desc: t('gridDesc.previewMatrix') },
 ];
 
 // --- Provider type items (derived from descriptor registry) ---

frontend/src/lib/i18n/en.json

@@ -36,7 +36,8 @@
 		"targetMatrix": "Matrix",
 		"targetBroadcast": "Broadcast",
 		"automation": "Automation",
-		"actions": "Actions"
+		"actions": "Actions",
+		"more": "More"
 	},
 	"auth": {
 		"signIn": "Sign in",
@@ -51,7 +52,9 @@
 		"creatingAccount": "Creating account...",
 		"passwordMismatch": "Passwords do not match",
 		"passwordTooShort": "Password must be at least 8 characters",
-		"or": "or"
+		"or": "or",
+		"loginFailed": "Login failed",
+		"setupFailed": "Setup failed"
 	},
 	"dashboard": {
 		"title": "Dashboard",
@@ -150,7 +153,9 @@
 		"gpRefreshTokenHint": "Obtain from Google OAuth Playground (developers.google.com/oauthplayground) with the Photos Library API scope.",
 		"gpAllFieldsRequired": "Client ID, Client Secret, and Refresh Token are all required",
 		"testAndSave": "Test & Save",
-		"saveWithoutTest": "Save without testing"
+		"saveWithoutTest": "Save without testing",
+		"selectType": "Select a provider type",
+		"testFailed": "Connection test failed"
 	},
 	"notificationTracker": {
 		"title": "Notification Trackers",
@@ -231,7 +236,8 @@
 		"noLink": "No Link",
 		"saveWithoutLinks": "Save without links",
 		"createLinks": "Create {count} link(s)",
-		"linksNote": "You can also create links manually in Immich."
+		"linksNote": "You can also create links manually in Immich.",
+		"createdLinks": "Created {count} public link(s)"
 	},
 	"templates": {
 		"title": "Templates",
@@ -409,7 +415,9 @@
 		"cacheTtl": "Media cache TTL (hours)",
 		"cacheTtlHint": "How long to cache uploaded Telegram file_ids before re-uploading (default: 48h)",
 		"settingsSaved": "Settings saved",
-		"noExternalDomain": "External domain URL not configured"
+		"noExternalDomain": "External domain URL not configured",
+		"saveFailed": "Failed to save bot",
+		"webhookFailed": "Failed to register webhook"
 	},
 	"trackingConfig": {
 		"title": "Tracking Configs",
@@ -584,7 +592,7 @@
 		"added_assets": "List of asset dicts (use {% for asset in added_assets %})",
 		"removed_assets": "List of removed asset IDs (strings)",
 		"shared": "Whether album is shared (boolean)",
-		"target_type": "Target type: 'telegram' or 'webhook'",
+		"target_type": "Target type: telegram, webhook, email, discord, slack, ntfy, or matrix",
 		"has_videos": "Whether added assets contain videos (boolean)",
 		"has_photos": "Whether added assets contain photos (boolean)",
 		"old_name": "Previous album name (rename events)",
@@ -675,7 +683,8 @@
 		"displayName": "Display Name",
 		"testConnection": "Test connection",
 		"noBots": "No Matrix bots yet.",
-		"confirmDelete": "Delete this Matrix bot?"
+		"confirmDelete": "Delete this Matrix bot?",
+		"operationFailed": "Operation failed"
 	},
 	"emailBot": {
 		"title": "Email Bots",
@@ -693,7 +702,8 @@
 		"useTls": "Use TLS/SSL",
 		"testConnection": "Send test email",
 		"noBots": "No email bots yet.",
-		"confirmDelete": "Delete this email bot?"
+		"confirmDelete": "Delete this email bot?",
+		"operationFailed": "Operation failed"
 	},
 	"cmdTemplateConfig": {
 		"title": "Command Templates",
@@ -841,7 +851,12 @@
 		"allTypes": "All types",
 		"allProviders": "All providers",
 		"noFilterResults": "No items match the current filter.",
-		"redirecting": "Redirecting..."
+		"redirecting": "Redirecting...",
+		"noMatches": "No matches",
+		"saveFailed": "Save failed",
+		"loadFailed": "Failed to load data",
+		"dismiss": "Dismiss",
+		"systemSuffix": " (System)"
 	},
 	"templateSlot": {
 		"message_assets_added": "New assets added to album",
@@ -926,12 +941,15 @@
 		"previewEmail": "Preview with email HTML format",
 		"previewDiscord": "Preview with Discord markdown",
 		"previewSlack": "Preview with Slack markdown",
+		"previewNtfy": "Preview as ntfy notification",
+		"previewMatrix": "Preview with Matrix HTML format",
 		"providerImmich": "Self-hosted photo server",
 		"providerGitea": "Self-hosted Git service",
 		"providerPlanka": "Self-hosted Kanban board",
 		"providerScheduler": "Time-based scheduled messages",
 		"providerNut": "Network UPS monitoring",
-		"providerGooglePhotos": "Google Photos albums & shared libraries"
+		"providerGooglePhotos": "Google Photos albums & shared libraries",
+		"providerWebhook": "Receive events via HTTP POST"
 	},
 	"error": {
 		"notFound": "Page not found",

frontend/src/lib/i18n/ru.json

@@ -36,7 +36,8 @@
 		"targetMatrix": "Matrix",
 		"targetBroadcast": "Рассылка",
 		"automation": "Автоматизация",
-		"actions": "Действия"
+		"actions": "Действия",
+		"more": "Ещё"
 	},
 	"auth": {
 		"signIn": "Войти",
@@ -51,7 +52,9 @@
 		"creatingAccount": "Создание...",
 		"passwordMismatch": "Пароли не совпадают",
 		"passwordTooShort": "Пароль должен быть не менее 8 символов",
-		"or": "или"
+		"or": "или",
+		"loginFailed": "Ошибка входа",
+		"setupFailed": "Ошибка настройки"
 	},
 	"dashboard": {
 		"title": "Главная",
@@ -150,7 +153,9 @@
 		"gpRefreshTokenHint": "Получите через Google OAuth Playground (developers.google.com/oauthplayground) с областью Photos Library API.",
 		"gpAllFieldsRequired": "Client ID, Client Secret и Refresh Token обязательны",
 		"testAndSave": "Проверить и сохранить",
-		"saveWithoutTest": "Сохранить без проверки"
+		"saveWithoutTest": "Сохранить без проверки",
+		"selectType": "Выберите тип провайдера",
+		"testFailed": "Ошибка проверки подключения"
 	},
 	"notificationTracker": {
 		"title": "Трекеры уведомлений",
@@ -231,7 +236,8 @@
 		"noLink": "Нет ссылки",
 		"saveWithoutLinks": "Сохранить без ссылок",
 		"createLinks": "Создать {count} ссылку(и)",
-		"linksNote": "Вы также можете создать ссылки вручную в Immich."
+		"linksNote": "Вы также можете создать ссылки вручную в Immich.",
+		"createdLinks": "Создано публичных ссылок: {count}"
 	},
 	"templates": {
 		"title": "Шаблоны",
@@ -409,7 +415,9 @@
 		"cacheTtl": "TTL кэша медиа (часы)",
 		"cacheTtlHint": "Сколько хранить кэш Telegram file_id перед повторной загрузкой (по умолчанию: 48ч)",
 		"settingsSaved": "Настройки сохранены",
-		"noExternalDomain": "Внешний URL домена не настроен"
+		"noExternalDomain": "Внешний URL домена не настроен",
+		"saveFailed": "Не удалось сохранить бота",
+		"webhookFailed": "Не удалось зарегистрировать webhook"
 	},
 	"trackingConfig": {
 		"title": "Конфигурации отслеживания",
@@ -584,7 +592,7 @@
 		"added_assets": "Список файлов ({% for asset in added_assets %})",
 		"removed_assets": "Список ID удалённых файлов (строки)",
 		"shared": "Общий альбом (boolean)",
-		"target_type": "Тип получателя: 'telegram' или 'webhook'",
+		"target_type": "Тип получателя: telegram, webhook, email, discord, slack, ntfy или matrix",
 		"has_videos": "Содержат ли добавленные файлы видео (boolean)",
 		"has_photos": "Содержат ли добавленные файлы фото (boolean)",
 		"old_name": "Прежнее название альбома (при переименовании)",
@@ -675,7 +683,8 @@
 		"displayName": "Отображаемое имя",
 		"testConnection": "Проверить подключение",
 		"noBots": "Matrix ботов пока нет.",
-		"confirmDelete": "Удалить этот Matrix бот?"
+		"confirmDelete": "Удалить этот Matrix бот?",
+		"operationFailed": "Операция не удалась"
 	},
 	"emailBot": {
 		"title": "Email боты",
@@ -693,7 +702,8 @@
 		"useTls": "Использовать TLS/SSL",
 		"testConnection": "Отправить тестовое письмо",
 		"noBots": "Email ботов пока нет.",
-		"confirmDelete": "Удалить этот email бот?"
+		"confirmDelete": "Удалить этот email бот?",
+		"operationFailed": "Операция не удалась"
 	},
 	"cmdTemplateConfig": {
 		"title": "Шаблоны команд",
@@ -841,7 +851,12 @@
 		"allTypes": "Все типы",
 		"allProviders": "Все провайдеры",
 		"noFilterResults": "Нет элементов, соответствующих фильтру.",
-		"redirecting": "Перенаправление..."
+		"redirecting": "Перенаправление...",
+		"noMatches": "Ничего не найдено",
+		"saveFailed": "Не удалось сохранить",
+		"loadFailed": "Не удалось загрузить данные",
+		"dismiss": "Закрыть",
+		"systemSuffix": " (Системный)"
 	},
 	"templateSlot": {
 		"message_assets_added": "Новые файлы добавлены в альбом",
@@ -926,12 +941,15 @@
 		"previewEmail": "Предпросмотр в формате Email HTML",
 		"previewDiscord": "Предпросмотр в формате Discord",
 		"previewSlack": "Предпросмотр в формате Slack",
+		"previewNtfy": "Предпросмотр уведомления ntfy",
+		"previewMatrix": "Предпросмотр в формате Matrix HTML",
 		"providerImmich": "Фотосервер для самостоятельного размещения",
 		"providerGitea": "Git-сервер для самостоятельного размещения",
 		"providerPlanka": "Канбан-доска для самостоятельного размещения",
 		"providerScheduler": "Запланированные сообщения по расписанию",
 		"providerNut": "Мониторинг ИБП через NUT",
-		"providerGooglePhotos": "Альбомы и общие библиотеки Google Фото"
+		"providerGooglePhotos": "Альбомы и общие библиотеки Google Фото",
+		"providerWebhook": "Приём событий через HTTP POST"
 	},
 	"error": {
 		"notFound": "Страница не найдена",

frontend/src/routes/+layout.svelte

@@ -215,15 +215,31 @@
 		});
 	}
 
-	// Mobile: flatten nav for bottom bar
+	// Mobile: flatten nav for bottom bar (first 4 + "More" button)
 	const mobileNavItems = $derived<NavItem[]>([
 		{ href: '/', key: 'nav.dashboard', icon: 'mdiViewDashboard' },
 		{ href: '/notification-trackers', key: 'nav.notification', icon: 'mdiBellOutline' },
 		{ href: '/command-trackers', key: 'nav.commands', icon: 'mdiConsoleLine' },
 		{ href: '/targets', key: 'nav.targets', icon: 'mdiTarget' },
-		{ href: '/bots?tab=telegram', key: 'nav.bots', icon: 'mdiRobot' },
 	]);
 
+	// "More" panel items — everything not in the bottom bar
+	const mobileMoreItems = $derived<NavItem[]>([
+		{ href: '/providers', key: 'nav.providers', icon: 'mdiServer' },
+		{ href: '/bots?tab=telegram', key: 'nav.bots', icon: 'mdiRobot' },
+		{ href: '/actions', key: 'nav.actions', icon: 'mdiPlayCircleOutline' },
+		{ href: '/tracking-configs', key: 'nav.configs', icon: 'mdiCog' },
+		{ href: '/template-configs', key: 'nav.templates', icon: 'mdiFileDocumentEdit' },
+		{ href: '/command-configs', key: 'nav.configs', icon: 'mdiConsoleLine' },
+		{ href: '/command-template-configs', key: 'nav.templates', icon: 'mdiCodeBracesBox' },
+		...(auth.isAdmin ? [
+			{ href: '/settings', key: 'nav.settings', icon: 'mdiCogOutline' },
+			{ href: '/users', key: 'nav.users', icon: 'mdiAccountGroup' },
+		] : []),
+	]);
+
+	let mobileMoreOpen = $state(false);
+
 	const isAuthPage = $derived(
 		page.url.pathname === '/login' || page.url.pathname === '/setup'
 	);
@@ -526,12 +542,50 @@
 					<MdiIcon name={item.icon} size={20} />
 				</a>
 			{/each}
-			<button onclick={logout} aria-label={t('nav.logout')}
-				class="flex flex-col items-center gap-0.5 px-2 py-1.5 text-xs" style="color: var(--color-muted-foreground);">
-				<MdiIcon name="mdiLogout" size={20} />
+			<button onclick={() => openSearch?.()} aria-label={t('searchPalette.placeholder')}
+				class="flex flex-col items-center gap-0.5 px-2 py-1.5 text-xs rounded-lg transition-all duration-200"
+				style="color: var(--color-muted-foreground);">
+				<MdiIcon name="mdiMagnify" size={20} />
+			</button>
+			<button onclick={() => mobileMoreOpen = !mobileMoreOpen} aria-label={t('nav.more')}
+				class="flex flex-col items-center gap-0.5 px-2 py-1.5 text-xs rounded-lg transition-all duration-200"
+				style="color: {mobileMoreOpen ? 'var(--color-primary)' : 'var(--color-muted-foreground)'};">
+				<MdiIcon name="mdiDotsHorizontal" size={20} />
 			</button>
 		</nav>
 
+		<!-- Mobile "More" panel -->
+		{#if mobileMoreOpen}
+			<div class="mobile-more-backdrop" style="position: fixed; inset: 0; z-index: 49; background: rgba(0,0,0,0.4); backdrop-filter: blur(2px);"
+				onclick={() => mobileMoreOpen = false} role="presentation"></div>
+			<div class="mobile-more-panel" style="position: fixed; bottom: 3.25rem; left: 0; right: 0; z-index: 50; background: var(--color-sidebar); border-top: 1px solid var(--color-border); border-radius: 1rem 1rem 0 0; padding: 1rem; max-height: 60vh; overflow-y: auto;"
+				transition:slide={{ duration: 200, easing: cubicOut }}>
+				{#if allProviders.length > 1}
+					<div class="mb-3 pb-3" style="border-bottom: 1px solid var(--color-border);">
+						<IconGridSelect items={providerFilterItems} bind:value={providerFilterValue} columns={Math.min(providerFilterItems.length, 4)} compact />
+					</div>
+				{/if}
+				<div class="grid grid-cols-3 gap-2">
+					{#each mobileMoreItems as item}
+						<a href={item.href}
+							onclick={() => mobileMoreOpen = false}
+							class="flex flex-col items-center gap-1 p-3 rounded-lg transition-all duration-200"
+							style="color: {isActive(item.href) ? 'var(--color-primary)' : 'var(--color-muted-foreground)'}; background: {isActive(item.href) ? 'var(--color-sidebar-active)' : 'transparent'};"
+						>
+							<MdiIcon name={item.icon} size={20} />
+							<span class="text-xs text-center leading-tight">{t(item.key)}</span>
+						</a>
+					{/each}
+					<button onclick={() => { mobileMoreOpen = false; logout(); }}
+						class="flex flex-col items-center gap-1 p-3 rounded-lg transition-all duration-200"
+						style="color: var(--color-muted-foreground);">
+						<MdiIcon name="mdiLogout" size={20} />
+						<span class="text-xs text-center leading-tight">{t('nav.logout')}</span>
+					</button>
+				</div>
+			</div>
+		{/if}
+
 		<!-- Main content -->
 		<main class="flex-1 overflow-auto pb-16 md:pb-0">
 			{#key page.url.pathname}
@@ -579,6 +633,10 @@
 <style>
 	@media (max-width: 767px) {
 		.mobile-nav { display: flex !important; }
+		.mobile-more-panel a:hover,
+		.mobile-more-panel button:hover {
+			background: var(--color-muted);
+		}
 	}
 
 	/* Provider filter chips */

frontend/src/routes/+page.svelte

@@ -231,7 +231,7 @@
 		</div>
 	</Card>
 {:else if status}
-	<div class="grid grid-cols-1 sm:grid-cols-3 gap-4 mb-8 stagger-children">
+	<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-8 stagger-children">
 		{#each statCards as card, i}
 			<div class="stat-card" style="--accent: {card.color};">
 				<div class="stat-card-inner">
@@ -289,7 +289,7 @@
 		<div class="flex items-center justify-center gap-1">
 			{#if totalPages > 1}
 				<button onclick={() => goToPage(currentPage - 1)} disabled={currentPage <= 1}
-					class="px-2 py-1 text-sm border border-[var(--color-border)] rounded-md hover:bg-[var(--color-muted)] transition-colors disabled:opacity-30 disabled:cursor-default">
+					class="px-2 py-1 text-sm border border-[var(--color-border)] rounded-md hover:bg-[var(--color-muted)] transition-colors disabled:opacity-50 disabled:cursor-default">
 					<MdiIcon name="mdiChevronLeft" size={16} />
 				</button>
 				{#each Array.from({ length: totalPages }, (_, i) => i + 1) as page}
@@ -305,7 +305,7 @@
 					{/if}
 				{/each}
 				<button onclick={() => goToPage(currentPage + 1)} disabled={currentPage >= totalPages}
-					class="px-2 py-1 text-sm border border-[var(--color-border)] rounded-md hover:bg-[var(--color-muted)] transition-colors disabled:opacity-30 disabled:cursor-default">
+					class="px-2 py-1 text-sm border border-[var(--color-border)] rounded-md hover:bg-[var(--color-muted)] transition-colors disabled:opacity-50 disabled:cursor-default">
 					<MdiIcon name="mdiChevronRight" size={16} />
 				</button>
 			{/if}

frontend/src/routes/bots/EmailBotTab.svelte

@@ -10,6 +10,8 @@
 	import ConfirmModal from '$lib/components/ConfirmModal.svelte';
 	import IconButton from '$lib/components/IconButton.svelte';
 	import { snackSuccess, snackError } from '$lib/stores/snackbar.svelte';
+	import Button from '$lib/components/Button.svelte';
+	import ErrorBanner from '$lib/components/ErrorBanner.svelte';
 	import type { EmailBot } from '$lib/types';
 
 	let { onreload }: { onreload: () => Promise<void> } = $props();
@@ -72,22 +74,21 @@
 		try {
 			const res = await api(`/email-bots/${botId}/test`, { method: 'POST' });
 			if (res.success) snackSuccess(t('snack.emailBotTestSent'));
-			else snackError(res.error || 'Failed');
+			else snackError(res.error || t('emailBot.operationFailed'));
 		} catch (err: any) { snackError(err.message); }
 		emailTesting = { ...emailTesting, [botId]: false };
 	}
 </script>
 
 <PageHeader title={t('emailBot.title')} description={t('emailBot.description')}>
-	<button onclick={() => { showEmailForm ? (showEmailForm = false, editingEmail = null) : openNewEmail(); }}
-		class="px-3 py-1.5 bg-[var(--color-primary)] text-[var(--color-primary-foreground)] rounded-md text-sm font-medium hover:opacity-90">
+	<Button size="sm" onclick={() => { showEmailForm ? (showEmailForm = false, editingEmail = null) : openNewEmail(); }}>
 		{showEmailForm ? t('common.cancel') : t('emailBot.addBot')}
-	</button>
+	</Button>
 </PageHeader>
 
 {#if showEmailForm}
 	<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}
+		<ErrorBanner message={error} />
 		<form onsubmit={saveEmailBot} class="space-y-3">
 			<div>
 				<label for="ebot-name" class="block text-sm font-medium mb-1">{t('emailBot.name')}</label>

frontend/src/routes/bots/MatrixBotTab.svelte

@@ -10,6 +10,8 @@
 	import ConfirmModal from '$lib/components/ConfirmModal.svelte';
 	import IconButton from '$lib/components/IconButton.svelte';
 	import { snackSuccess, snackError } from '$lib/stores/snackbar.svelte';
+	import Button from '$lib/components/Button.svelte';
+	import ErrorBanner from '$lib/components/ErrorBanner.svelte';
 	import type { MatrixBot } from '$lib/types';
 
 	let { onreload }: { onreload: () => Promise<void> } = $props();
@@ -70,22 +72,21 @@
 		try {
 			const res = await api(`/matrix-bots/${botId}/test`, { method: 'POST' });
 			if (res.success) snackSuccess(t('snack.matrixBotTestOk'));
-			else snackError(res.error || 'Failed');
+			else snackError(res.error || t('matrixBot.operationFailed'));
 		} catch (err: any) { snackError(err.message); }
 		matrixTesting = { ...matrixTesting, [botId]: false };
 	}
 </script>
 
 <PageHeader title={t('matrixBot.title')} description={t('matrixBot.description')}>
-	<button onclick={() => { showMatrixForm ? (showMatrixForm = false, editingMatrix = null) : openNewMatrix(); }}
-		class="px-3 py-1.5 bg-[var(--color-primary)] text-[var(--color-primary-foreground)] rounded-md text-sm font-medium hover:opacity-90">
+	<Button size="sm" onclick={() => { showMatrixForm ? (showMatrixForm = false, editingMatrix = null) : openNewMatrix(); }}>
 		{showMatrixForm ? t('common.cancel') : t('matrixBot.addBot')}
-	</button>
+	</Button>
 </PageHeader>
 
 {#if showMatrixForm}
 	<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}
+		<ErrorBanner message={error} />
 		<form onsubmit={saveMatrixBot} class="space-y-3">
 			<div>
 				<label for="mbot-name" class="block text-sm font-medium mb-1">{t('matrixBot.name')}</label>

frontend/src/routes/bots/TelegramBotTab.svelte

@@ -12,6 +12,8 @@
 	import IconButton from '$lib/components/IconButton.svelte';
 	import EntitySelect from '$lib/components/EntitySelect.svelte';
 	import { snackSuccess, snackError, snackInfo } from '$lib/stores/snackbar.svelte';
+	import Button from '$lib/components/Button.svelte';
+	import ErrorBanner from '$lib/components/ErrorBanner.svelte';
 	import type { TelegramBot, TelegramChat } from '$lib/types';
 
 	interface CommandTrackerSummary { id: number; name: string; icon?: string; enabled: boolean }
@@ -186,7 +188,7 @@
 		try {
 			const res = await api<ApiResult>(`/telegram-bots/${botId}/sync-commands`, { method: 'POST' });
 			if (res.success) snackSuccess(t('telegramBot.commandsSynced'));
-			else snackError(res.error || 'Failed');
+			else snackError(res.error || t('telegramBot.saveFailed'));
 		} catch (err: any) { snackError(err.message); }
 		modeChanging = { ...modeChanging, [botId]: false };
 	}
@@ -218,7 +220,7 @@
 				snackSuccess(res.verified ? t('telegramBot.webhookVerified') : t('telegramBot.webhookRegistered'));
 				await loadWebhookStatus(botId);
 			} else {
-				snackError(res.error || 'Failed to register webhook');
+				snackError(res.error || t('telegramBot.webhookFailed'));
 			}
 		} catch (err: any) { snackError(err.message); }
 		modeChanging = { ...modeChanging, [botId]: false };
@@ -229,7 +231,7 @@
 		try {
 			const res = await api<ApiResult>(`/telegram-bots/${botId}/webhook/unregister`, { method: 'POST' });
 			if (res.success) { snackSuccess(t('telegramBot.webhookUnregistered')); await loadWebhookStatus(botId); }
-			else snackError(res.error || 'Failed');
+			else snackError(res.error || t('telegramBot.saveFailed'));
 		} catch (err: any) { snackError(err.message); }
 		modeChanging = { ...modeChanging, [botId]: false };
 	}
@@ -260,7 +262,7 @@
 		try {
 			const res = await api<ApiResult>(`/telegram-bots/${botId}/chats/${chatId}/test?locale=${getLocale()}`, { method: 'POST' });
 			if (res.success) snackSuccess(t('snack.targetTestSent'));
-			else snackError(res.error || 'Failed');
+			else snackError(res.error || t('telegramBot.saveFailed'));
 		} catch (err: any) { snackError(err.message); }
 		chatTesting = { ...chatTesting, [key]: false };
 	}
@@ -277,15 +279,14 @@
 </script>
 
 <PageHeader title={t('telegramBot.title')} description={t('telegramBot.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">
+	<Button size="sm" onclick={() => { showForm ? (showForm = false, editing = null) : openNew(); }}>
 		{showForm ? t('common.cancel') : t('telegramBot.addBot')}
-	</button>
+	</Button>
 </PageHeader>
 
 {#if showForm}
 	<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}
+		<ErrorBanner message={error} />
 		<form onsubmit={saveBot} class="space-y-3">
 			<div>
 				<label for="bot-name" class="block text-sm font-medium mb-1">{t('telegramBot.name')}</label>

frontend/src/routes/command-configs/+page.svelte

@@ -15,6 +15,7 @@
 	import IconGridSelect from '$lib/components/IconGridSelect.svelte';
 	import { providerTypeItems, providerTypeFilterItems, responseModeItems } from '$lib/grid-items';
 	import EntitySelect from '$lib/components/EntitySelect.svelte';
+	import Button from '$lib/components/Button.svelte';
 	import { snackSuccess, snackError } from '$lib/stores/snackbar.svelte';
 	import { highlightFromUrl } from '$lib/highlight';
 	import { globalProviderFilter } from '$lib/stores/provider-filter.svelte';
@@ -37,7 +38,7 @@
 	let cmdTemplateConfigs = $derived(commandTemplateConfigsCache.items);
 	const templateItems = $derived(cmdTemplateConfigs
 		.filter((c) => c.provider_type === form.provider_type)
-		.map((c) => ({ value: c.id, label: c.name + (c.user_id === 0 ? ' (System)' : ''), icon: c.icon || 'mdiCodeBracesBox', desc: c.provider_type }))
+		.map((c) => ({ value: c.id, label: c.name + (c.user_id === 0 ? t('common.systemSuffix') : ''), icon: c.icon || 'mdiCodeBracesBox', desc: c.provider_type }))
 	);
 	let loaded = $state(false);
 	let showForm = $state(false);
@@ -151,10 +152,9 @@
 </script>
 
 <PageHeader title={t('commandConfig.title')} description={t('commandConfig.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">
+	<Button size="sm" onclick={() => { showForm ? (showForm = false, editing = null) : openNew(); }}>
 		{showForm ? t('common.cancel') : t('commandConfig.newConfig')}
-	</button>
+	</Button>
 </PageHeader>
 
 {#if !loaded}<Loading />{:else}

frontend/src/routes/login/+page.svelte

@@ -32,7 +32,7 @@
 			await login(username, password);
 			window.location.href = '/';
 		} catch (err: any) {
-			error = err.message || 'Login failed';
+			error = err.message || t('auth.loginFailed');
 		}
 		submitting = false;
 	}

frontend/src/routes/notification-trackers/+page.svelte

@@ -17,6 +17,8 @@
 	import { providerDefaultIcon } from '$lib/grid-items';
 	import { globalProviderFilter } from '$lib/stores/provider-filter.svelte';
 	import { getDescriptor } from '$lib/providers';
+	import Button from '$lib/components/Button.svelte';
+	import ErrorBanner from '$lib/components/ErrorBanner.svelte';
 	import type { Tracker, TrackerTarget, TrackingConfig, TemplateConfig, NotificationTarget } from '$lib/types';
 
 	import TrackerForm from './TrackerForm.svelte';
@@ -119,7 +121,7 @@
 				capabilitiesCache.fetch(),
 			]);
 		} catch (err: any) {
-			loadError = err.message || 'Failed to load data';
+			loadError = err.message || t('common.loadFailed');
 			snackError(loadError);
 		} finally { loaded = true; highlightFromUrl(); }
 	}
@@ -212,7 +214,7 @@
 				}
 			}
 		}
-		if (created > 0) snackSuccess(`Created ${created} public link(s)`);
+		if (created > 0) snackSuccess(t('notificationTracker.createdLinks').replace('{count}', String(created)));
 		linkWarning = null;
 		linkCreating = false;
 		await doSave();
@@ -361,17 +363,16 @@
 </script>
 
 <PageHeader title={t('notificationTracker.title')} description={t('notificationTracker.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">
+	<Button size="sm" onclick={() => { showForm ? (showForm = false, editing = null) : openNew(); }}>
 		{showForm ? t('notificationTracker.cancel') : t('notificationTracker.newTracker')}
-	</button>
+	</Button>
 </PageHeader>
 
 {#if !loaded}
 <Loading />
 {:else if loadError}
 	<Card>
-		<div class="bg-[var(--color-error-bg)] text-[var(--color-error-fg)] text-sm rounded-md p-3">{loadError}</div>
+		<ErrorBanner message={loadError} class="mb-0" />
 	</Card>
 {:else if showForm}
 	<TrackerForm

frontend/src/routes/providers/+page.svelte

@@ -12,12 +12,14 @@
 	import EmptyState from '$lib/components/EmptyState.svelte';
 	import ConfirmModal from '$lib/components/ConfirmModal.svelte';
 	import IconButton from '$lib/components/IconButton.svelte';
+	import ErrorBanner from '$lib/components/ErrorBanner.svelte';
 	import IconGridSelect from '$lib/components/IconGridSelect.svelte';
 	import { providerTypeItems, providerDefaultIcon } from '$lib/grid-items';
 	import { globalProviderFilter } from '$lib/stores/provider-filter.svelte';
 	import { snackSuccess, snackError } from '$lib/stores/snackbar.svelte';
 	import { highlightFromUrl } from '$lib/highlight';
 	import { getDescriptor, buildProviderFormDefaults } from '$lib/providers';
+	import Button from '$lib/components/Button.svelte';
 	import type { ServiceProvider } from '$lib/types';
 
 	let allProviders = $derived(providersCache.items);
@@ -136,10 +138,9 @@
 </script>
 
 <PageHeader title={t('providers.title')} description={t('providers.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">
+	<Button size="sm" onclick={() => { showForm ? (showForm = false, editing = null) : openNew(); }}>
 		{showForm ? t('providers.cancel') : t('providers.addProvider')}
-	</button>
+	</Button>
 </PageHeader>
 
 {#if !loaded}
@@ -158,9 +159,7 @@
 {#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}
+		<ErrorBanner message={error} />
 		<form onsubmit={save} class="space-y-3">
 			<div>
 				<label class="block text-sm font-medium mb-1">{t('providers.type')}</label>
@@ -211,10 +210,9 @@
 				<p class="text-xs text-[var(--color-muted-foreground)] mt-1">{t('providers.webhookUrlHint')}</p>
 			</div>
 			{/if}
-			<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}>
 				{submitting ? t('providers.connecting') : (editing ? t('common.save') : t('providers.addProvider'))}
-			</button>
+			</Button>
 		</form>
 	</Card>
 	</div>

frontend/src/routes/providers/new/+page.svelte

@@ -5,8 +5,11 @@
 	import Card from '$lib/components/Card.svelte';
 	import IconPicker from '$lib/components/IconPicker.svelte';
 	import IconGridSelect from '$lib/components/IconGridSelect.svelte';
+	import { goto } from '$app/navigation';
 	import { providerTypeItems } from '$lib/grid-items';
 	import { getDescriptor, buildProviderFormDefaults } from '$lib/providers';
+	import Button from '$lib/components/Button.svelte';
+	import ErrorBanner from '$lib/components/ErrorBanner.svelte';
 
 	let form = $state(buildProviderFormDefaults());
 	let error = $state('');
@@ -16,7 +19,7 @@
 
 	async function testAndSave() {
 		const desc = descriptor;
-		if (!desc) { error = 'Select a provider type'; return; }
+		if (!desc) { error = t('providers.selectType'); return; }
 		const { config, error: buildError } = desc.buildConfig(form, false);
 		if (buildError) { error = t(buildError); snackError(error); return; }
 
@@ -32,22 +35,22 @@
 			if (!result.ok) {
 				await api(`/providers/${provider.id}`, { method: 'DELETE' }).catch(() => {});
 				createdId = null;
-				error = result.message || 'Connection test failed';
+				error = result.message || t('providers.testFailed');
 				snackError(error);
 			} else {
 				snackSuccess(t('snack.providerSaved'));
-				window.location.href = '/providers';
+				goto('/providers');
 			}
 		} catch (e: any) {
 			if (createdId) await api(`/providers/${createdId}`, { method: 'DELETE' }).catch(() => {});
-			error = e.message || 'Test failed'; snackError(error);
+			error = e.message || t('providers.testFailed'); snackError(error);
 		}
 		finally { testing = false; }
 	}
 
 	async function saveWithoutTest() {
 		const desc = descriptor;
-		if (!desc) { error = 'Select a provider type'; return; }
+		if (!desc) { error = t('providers.selectType'); return; }
 		const { config, error: buildError } = desc.buildConfig(form, false);
 		if (buildError) { error = t(buildError); snackError(error); return; }
 
@@ -58,8 +61,8 @@
 				body: JSON.stringify({ type: form.type, name: form.name || desc.defaultName, icon: form.icon, config }),
 			});
 			snackSuccess(t('snack.providerSaved'));
-			window.location.href = '/providers';
-		} catch (e: any) { error = e.message || 'Save failed'; snackError(error); }
+			goto('/providers');
+		} catch (e: any) { error = e.message || t('common.saveFailed'); snackError(error); }
 		finally { saving = false; }
 	}
 </script>
@@ -112,22 +115,18 @@
 			</div>
 		{/each}
 
-		{#if error}
-			<p class="text-sm text-[var(--color-error-fg)]">{error}</p>
-		{/if}
+		<ErrorBanner message={error} />
 
 		<div class="flex gap-3 pt-2">
-			<button onclick={testAndSave} disabled={testing || saving}
-				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 onclick={testAndSave} disabled={testing || saving}>
 				{testing ? t('providers.connecting') : t('providers.testAndSave')}
-			</button>
-			<button onclick={saveWithoutTest} disabled={testing || saving}
-				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">
+			</Button>
+			<Button variant="secondary" onclick={saveWithoutTest} disabled={testing || saving}>
 				{saving ? t('common.loading') : t('providers.saveWithoutTest')}
-			</button>
-			<a href="/providers" class="px-4 py-2 bg-[var(--color-muted)] text-[var(--color-muted-foreground)] rounded-md text-sm font-medium hover:opacity-80">
+			</Button>
+			<Button variant="secondary" href="/providers">
 				{t('common.cancel')}
-			</a>
+			</Button>
 		</div>
 	</div>
 </Card>

frontend/src/routes/settings/+page.svelte

@@ -7,10 +7,12 @@
 	import Loading from '$lib/components/Loading.svelte';
 	import MdiIcon from '$lib/components/MdiIcon.svelte';
 	import Hint from '$lib/components/Hint.svelte';
+	import ErrorBanner from '$lib/components/ErrorBanner.svelte';
 	import { snackSuccess, snackError } from '$lib/stores/snackbar.svelte';
 
 	let loaded = $state(false);
 	let saving = $state(false);
+	let error = $state('');
 	let settings = $state({
 		external_url: '',
 		telegram_webhook_secret: '',
@@ -20,16 +22,16 @@
 	onMount(async () => {
 		try {
 			settings = await api('/settings');
-		} catch (err: any) { snackError(err.message); }
+		} catch (err: any) { error = err.message; snackError(err.message); }
 		finally { loaded = true; }
 	});
 
 	async function save() {
-		saving = true;
+		saving = true; error = '';
 		try {
 			settings = await api('/settings', { method: 'PUT', body: JSON.stringify(settings) });
 			snackSuccess(t('settings.saved'));
-		} catch (err: any) { snackError(err.message); }
+		} catch (err: any) { error = err.message; snackError(err.message); }
 		saving = false;
 	}
 </script>
@@ -39,6 +41,7 @@
 {#if !loaded}
 	<Loading />
 {:else}
+	<ErrorBanner message={error} />
 	<div class="space-y-6">
 		<!-- General section -->
 		<Card>

frontend/src/routes/setup/+page.svelte

@@ -25,7 +25,7 @@
 		try {
 			await setup(username, password);
 			window.location.href = '/';
-		} catch (err: any) { error = err.message || 'Setup failed'; }
+		} catch (err: any) { error = err.message || t('auth.setupFailed'); }
 		submitting = false;
 	}
 </script>

frontend/src/routes/targets/+page.svelte

@@ -15,6 +15,7 @@
 	import { chatActionItems } from '$lib/grid-items';
 	import { snackSuccess, snackError } from '$lib/stores/snackbar.svelte';
 	import { highlightFromUrl } from '$lib/highlight';
+	import ErrorBanner from '$lib/components/ErrorBanner.svelte';
 	import type { NotificationTarget, TargetReceiver, TelegramChat } from '$lib/types';
 
 	import TargetForm from './TargetForm.svelte';
@@ -419,7 +420,7 @@
 {#if !loaded}<Loading />{:else}
 
 {#if loadError}
-	<div class="mb-4 p-3 rounded-md text-sm bg-[var(--color-error-bg)] text-[var(--color-error-fg)]">{loadError}</div>
+	<ErrorBanner message={loadError} />
 {/if}
 
 {#if showForm}