Phase 10: Telegram bot commands + Phase 11: Snackbar notifications

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
parent ffce3ee337
commit e6ff0a423a
20 changed files with 1384 additions and 70 deletions
--- a/frontend/src/lib/components/Snackbar.svelte
+++ b/frontend/src/lib/components/Snackbar.svelte
@@ -0,0 +1,88 @@
+<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 borderColorMap: Record<string, string> = {
+		success: '#22c55e',
+		error: '#ef4444',
+		info: '#3b82f6',
+		warning: '#f59e0b',
+	};
+
+	const iconColorMap: Record<string, string> = {
+		success: '#22c55e',
+		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: 28rem; pointer-events: none;"
+		class="snackbar-container"
+	>
+		{#each snacks as snack (snack.id)}
+			<div
+				in:fly={{ y: 50, duration: 250 }}
+				out:fade={{ duration: 150 }}
+				style="pointer-events: auto; border-left: 4px solid {borderColorMap[snack.type]}; background: rgba(0, 0, 0, 0.85); backdrop-filter: blur(8px); border-radius: 0.5rem; padding: 0.75rem 1rem; display: flex; align-items: flex-start; gap: 0.5rem; color: #f1f5f9; box-shadow: 0 4px 12px rgba(0,0,0,0.3);"
+			>
+				<span style="color: {iconColorMap[snack.type]}; flex-shrink: 0; margin-top: 1px;">
+					<MdiIcon name={iconMap[snack.type]} size={18} />
+				</span>
+				<div style="flex: 1; min-width: 0;">
+					<p style="font-size: 0.875rem; line-height: 1.25rem; margin: 0;">{snack.message}</p>
+					{#if snack.detail}
+						<button
+							onclick={() => toggleDetail(snack.id)}
+							style="font-size: 0.75rem; color: #94a3b8; background: none; border: none; padding: 0; margin-top: 0.25rem; cursor: pointer; text-decoration: underline;"
+						>
+							{expandedIds.has(snack.id) ? 'Hide details' : 'Show details'}
+						</button>
+						{#if expandedIds.has(snack.id)}
+							<pre style="font-size: 0.75rem; color: #94a3b8; margin: 0.25rem 0 0; white-space: pre-wrap; word-break: break-word;">{snack.detail}</pre>
+						{/if}
+					{/if}
+				</div>
+				<button
+					onclick={() => removeSnack(snack.id)}
+					style="flex-shrink: 0; background: none; border: none; color: #94a3b8; cursor: pointer; padding: 0; line-height: 1; font-size: 1.125rem;"
+					aria-label="Dismiss"
+				>
+					<MdiIcon name="mdiClose" size={16} />
+				</button>
+			</div>
+		{/each}
+	</div>
+{/if}
+
+<style>
+	.snackbar-container {
+		bottom: 5rem;
+	}
+	@media (min-width: 768px) {
+		.snackbar-container {
+			bottom: 1.5rem;
+		}
+	}
+</style>
--- a/frontend/src/lib/i18n/en.json
+++ b/frontend/src/lib/i18n/en.json
@@ -182,7 +182,19 @@
 		"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"
 	},
 	"trackingConfig": {
 		"title": "Tracking Configs",
@@ -344,7 +356,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,19 @@
 		"group": "Группа",
 		"supergroup": "Супергруппа",
 		"channel": "Канал",
-		"confirmDelete": "Удалить этого бота?"
+		"confirmDelete": "Удалить этого бота?",
+		"commands": "Команды",
+		"enabledCommands": "Включённые команды",
+		"defaultCount": "Кол-во результатов",
+		"responseMode": "Режим ответа",
+		"modeMedia": "Медиа (отправка фото)",
+		"modeText": "Текст (ссылки)",
+		"botLocale": "Язык бота",
+		"rateLimits": "Ограничения частоты",
+		"rateSearch": "Кулдаун поиска",
+		"rateFind": "Кулдаун поиска файлов",
+		"rateDefault": "Кулдаун по умолчанию",
+		"syncCommands": "Синхронизировать с Telegram"
 	},
 	"trackingConfig": {
 		"title": "Конфигурации отслеживания",
@@ -344,7 +356,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);
@@ -232,3 +235,5 @@
 		</button>
 	</form>
 </Modal>
+
+<Snackbar />
--- 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,7 +73,7 @@
 		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>

--- 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 } 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,20 +67,63 @@
 		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; }
 			}
 		};
 	}

-	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;
+	function toggleSection(botId: number, section: string) {
+		if (expandedSection[botId] === section) {
+			expandedSection[botId] = '';
+			return;
+		}
+		expandedSection[botId] = section;
+
+		if (section === 'chats') {
+			chatsLoading[botId] = true;
+			api(`/telegram-bots/${botId}/chats`)
+				.then((data: any) => chats[botId] = data)
+				.catch(() => chats[botId] = [])
+				.finally(() => chatsLoading[botId] = false);
+		}
+
+		if (section === 'commands') {
+			const bot = bots.find((b: any) => b.id === botId);
+			editingConfig[botId] = JSON.parse(JSON.stringify(bot?.commands_config || DEFAULT_CONFIG));
+		}
+	}
+
+	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 {
@@ -86,7 +153,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 +189,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}
@@ -149,12 +221,107 @@
 								{/each}
 							</div>
 						{/if}
-						<button onclick={() => loadChats(bot.id)}
+						<button onclick={() => toggleSection(bot.id, 'chats')}
 							class="text-xs text-[var(--color-muted-foreground)] hover:underline mt-2">
 							{t('telegramBot.refreshChats')}
 						</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>