feat: EntitySelect palette-style entity picker, replace select dropdowns

New EntitySelect component: modal palette with search, keyboard nav,
current-value indicator (left border), smooth overlay. Replaces native
<select> dropdowns for entity selection.

Replaced selects:
- Notification Trackers: provider selector
- Command Trackers: provider + command config selectors
- Command Configs: response template selector
- Targets: telegram bot, email bot, matrix bot selectors

Added reactive $effect watchers for loadCollections and loadBotChats
since EntitySelect uses bind:value instead of onchange.

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

@@ -12,6 +12,7 @@
 	import ConfirmModal from '$lib/components/ConfirmModal.svelte';
 	import IconButton from '$lib/components/IconButton.svelte';
 	import CrossLink from '$lib/components/CrossLink.svelte';
+	import EntitySelect from '$lib/components/EntitySelect.svelte';
 	import { snackSuccess, snackError } from '$lib/stores/snackbar.svelte';
 	import { highlightFromUrl } from '$lib/highlight';
 
@@ -23,6 +24,10 @@
 
 	let configs = $derived(commandConfigsCache.items);
 	let cmdTemplateConfigs = $derived(commandTemplateConfigsCache.items);
+	const templateItems = $derived(cmdTemplateConfigs
+		.filter((c: any) => c.provider_type === form.provider_type)
+		.map((c: any) => ({ value: c.id, label: c.name + (c.user_id === 0 ? ' (System)' : ''), icon: c.icon || 'mdiCodeBracesBox', desc: c.provider_type }))
+	);
 	let loaded = $state(false);
 	let showForm = $state(false);
 	let editing = $state<number | null>(null);
@@ -180,13 +185,8 @@
 			</div>
 
 			<div>
-				<label for="cc-template" class="block text-sm font-medium mb-1">{t('commandConfig.responseTemplate')}</label>
-				<select id="cc-template" bind:value={form.command_template_config_id}
-					class="w-full px-3 py-2 border border-[var(--color-border)] rounded-md text-sm bg-[var(--color-background)]">
-					{#each cmdTemplateConfigs.filter((c: any) => c.provider_type === form.provider_type) as tpl}
-						<option value={tpl.id}>{tpl.name}{tpl.user_id === 0 ? ' (System)' : ''}</option>
-					{/each}
-				</select>
+				<label class="block text-sm font-medium mb-1">{t('commandConfig.responseTemplate')}</label>
+				<EntitySelect items={templateItems} bind:value={form.command_template_config_id} placeholder={t('commandConfig.responseTemplate')} />
 			</div>
 
 			<div class="grid grid-cols-2 sm:grid-cols-4 gap-3">

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

@@ -13,6 +13,7 @@
 	import ConfirmModal from '$lib/components/ConfirmModal.svelte';
 	import IconButton from '$lib/components/IconButton.svelte';
 	import CrossLink from '$lib/components/CrossLink.svelte';
+	import EntitySelect from '$lib/components/EntitySelect.svelte';
 	import { snackSuccess, snackError } from '$lib/stores/snackbar.svelte';
 	import { highlightFromUrl } from '$lib/highlight';
 	import type { ServiceProvider, TelegramBot } from '$lib/types';
@@ -21,6 +22,9 @@
 	let providers = $derived(providersCache.items);
 	let commandConfigs = $derived(commandConfigsCache.items);
 	let telegramBots = $derived(telegramBotsCache.items);
+	const providerItems = $derived(providers.map(p => ({ value: p.id, label: p.name, icon: p.icon || 'mdiServer', desc: p.type })));
+	const configItems = $derived(filteredConfigs().map((c: any) => ({ value: c.id, label: c.name, icon: c.icon || 'mdiCog', desc: c.provider_type })));
+	const botItems = $derived(telegramBots.map(b => ({ value: b.id, label: b.name, icon: b.icon || 'mdiRobot', desc: b.bot_username ? `@${b.bot_username}` : '' })));
 	let loaded = $state(false);
 	let showForm = $state(false);
 	let editing = $state<number | null>(null);
@@ -191,25 +195,13 @@
 			</div>
 
 			<div>
-				<label for="trk-provider" class="block text-sm font-medium mb-1">{t('commandTracker.provider')}</label>
-				<select id="trk-provider" bind:value={form.provider_id} required
-					class="w-full px-3 py-2 border border-[var(--color-border)] rounded-md text-sm bg-[var(--color-background)]">
-					<option value={0} disabled>{t('commandTracker.selectProvider')}</option>
-					{#each providers as p}
-						<option value={p.id}>{p.name} ({p.type})</option>
-					{/each}
-				</select>
+				<label class="block text-sm font-medium mb-1">{t('commandTracker.provider')}</label>
+				<EntitySelect items={providerItems} bind:value={form.provider_id} placeholder={t('commandTracker.selectProvider')} />
 			</div>
 
 			<div>
-				<label for="trk-config" class="block text-sm font-medium mb-1">{t('commandTracker.commandConfig')}</label>
-				<select id="trk-config" bind:value={form.command_config_id} required
-					class="w-full px-3 py-2 border border-[var(--color-border)] rounded-md text-sm bg-[var(--color-background)]">
-					<option value={0} disabled>{t('commandTracker.selectCommandConfig')}</option>
-					{#each filteredConfigs() as c}
-						<option value={c.id}>{c.name}</option>
-					{/each}
-				</select>
+				<label class="block text-sm font-medium mb-1">{t('commandTracker.commandConfig')}</label>
+				<EntitySelect items={configItems} bind:value={form.command_config_id} placeholder={t('commandTracker.selectCommandConfig')} />
 			</div>
 
 			<button type="submit" disabled={submitting}

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

@@ -15,6 +15,7 @@
 	import Hint from '$lib/components/Hint.svelte';
 	import IconButton from '$lib/components/IconButton.svelte';
 	import CrossLink from '$lib/components/CrossLink.svelte';
+	import EntitySelect from '$lib/components/EntitySelect.svelte';
 	import { snackSuccess, snackError } from '$lib/stores/snackbar.svelte';
 	import { highlightFromUrl } from '$lib/highlight';
 	import type { Tracker, ServiceProvider, NotificationTarget, TrackingConfig, TemplateConfig } from '$lib/types';
@@ -23,6 +24,7 @@
 	let loadError = $state('');
 	let notificationTrackers = $state<Tracker[]>([]);
 	let providers = $derived(providersCache.items);
+	const providerItems = $derived(providers.map(p => ({ value: p.id, label: p.name, icon: p.icon || 'mdiServer', desc: p.type })));
 	let targets = $derived(targetsCache.items);
 	let trackingConfigs = $derived(trackingConfigsCache.items);
 	let templateConfigs = $derived(templateConfigsCache.items);
@@ -77,6 +79,15 @@
 		try { collections = await api(`/providers/${form.provider_id}/collections`); } catch { collections = []; }
 	}
 
+	// Auto-load collections when provider changes via EntitySelect
+	let _prevProviderId = 0;
+	$effect(() => {
+		if (showForm && form.provider_id && form.provider_id !== _prevProviderId) {
+			_prevProviderId = form.provider_id;
+			loadCollections();
+		}
+	});
+
 	function openNew() { form = defaultForm(); editing = null; showForm = true; collections = []; previousCollectionIds = []; }
 	async function edit(trk: any) {
 		form = {
@@ -318,11 +329,8 @@
 				</div>
 			</div>
 			<div>
-				<label for="trk-provider" class="block text-sm font-medium mb-1">{t('notificationTracker.server')}</label>
-				<select id="trk-provider" bind:value={form.provider_id} onchange={loadCollections} required class="w-full px-3 py-2 border border-[var(--color-border)] rounded-md text-sm bg-[var(--color-background)]">
-					<option value={0} disabled>{t('notificationTracker.selectServer')}</option>
-					{#each providers as p}<option value={p.id}>{p.name}</option>{/each}
-				</select>
+				<label class="block text-sm font-medium mb-1">{t('notificationTracker.server')}</label>
+				<EntitySelect items={providerItems} bind:value={form.provider_id} placeholder={t('notificationTracker.selectServer')} />
 			</div>
 			{#if collections.length > 0}
 				<div>

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

@@ -16,6 +16,7 @@
 	import IconButton from '$lib/components/IconButton.svelte';
 	import CrossLink from '$lib/components/CrossLink.svelte';
 	import IconGridSelect from '$lib/components/IconGridSelect.svelte';
+	import EntitySelect from '$lib/components/EntitySelect.svelte';
 	import { snackSuccess, snackError } from '$lib/stores/snackbar.svelte';
 	import { highlightFromUrl } from '$lib/highlight';
 	import type { NotificationTarget, TelegramBot, TelegramChat, EmailBot, MatrixBot } from '$lib/types';
@@ -73,6 +74,9 @@
 	let telegramBots = $derived(telegramBotsCache.items);
 	let emailBots = $derived(emailBotsCache.items);
 	let matrixBots = $derived(matrixBotsCache.items);
+	const telegramBotItems = $derived(telegramBots.map(b => ({ value: b.id, label: b.name, icon: b.icon || 'mdiRobot', desc: b.bot_username ? `@${b.bot_username}` : '' })));
+	const emailBotItems = $derived(emailBots.map(b => ({ value: b.id, label: b.name, icon: b.icon || 'mdiEmailOutline', desc: b.email })));
+	const matrixBotItems = $derived(matrixBots.map(b => ({ value: b.id, label: b.name, icon: b.icon || 'mdiMatrix', desc: b.display_name || b.homeserver_url })));
 	let botChats = $state<Record<number, TelegramChat[]>>({});
 	let showForm = $state(false);
 	let editing = $state<number | null>(null);
@@ -122,6 +126,15 @@
 		try { botChats[form.bot_id] = await api(`/telegram-bots/${form.bot_id}/chats`); } catch {}
 	}
 
+	// Auto-load chats when bot changes via EntitySelect
+	let _prevBotId = 0;
+	$effect(() => {
+		if (showForm && form.bot_id && form.bot_id !== _prevBotId) {
+			_prevBotId = form.bot_id;
+			loadBotChats();
+		}
+	});
+
 	function openNew() { form = defaultForm(); formType = activeType || 'telegram'; editing = null; showTelegramSettings = false; showForm = true; }
 	async function edit(tgt: any) {
 		formType = tgt.type;
@@ -241,12 +254,8 @@
 			</div>
 			{#if formType === 'telegram'}
 				<div>
-					<label for="tgt-bot" class="block text-sm font-medium mb-1">{t('telegramBot.selectBot')}</label>
-					<select id="tgt-bot" bind:value={form.bot_id} onchange={loadBotChats} required
-						class="w-full px-3 py-2 border border-[var(--color-border)] rounded-md text-sm bg-[var(--color-background)]">
-						<option value={0} disabled>— {t('telegramBot.selectBot')} —</option>
-						{#each telegramBots as bot}<option value={bot.id}>{bot.name} (@{bot.bot_username})</option>{/each}
-					</select>
+					<label class="block text-sm font-medium mb-1">{t('telegramBot.selectBot')}</label>
+					<EntitySelect items={telegramBotItems} bind:value={form.bot_id} placeholder={t('telegramBot.selectBot')} />
 					{#if telegramBots.length === 0}
 						<p class="text-xs text-[var(--color-muted-foreground)] mt-1">{t('telegramBot.noBots')} <a href="/telegram-bots" class="underline">→</a></p>
 					{/if}
@@ -355,12 +364,8 @@
 				</div>
 			{:else if formType === 'email'}
 				<div>
-					<label for="tgt-emailbot" class="block text-sm font-medium mb-1">{t('targets.selectEmailBot')}</label>
-					<select id="tgt-emailbot" bind:value={form.email_bot_id} required
-						class="w-full px-3 py-2 border border-[var(--color-border)] rounded-md text-sm bg-[var(--color-background)]">
-						<option value={0} disabled>— {t('targets.selectEmailBot')} —</option>
-						{#each emailBots as bot}<option value={bot.id}>{bot.name} ({bot.email})</option>{/each}
-					</select>
+					<label class="block text-sm font-medium mb-1">{t('targets.selectEmailBot')}</label>
+					<EntitySelect items={emailBotItems} bind:value={form.email_bot_id} placeholder={t('targets.selectEmailBot')} />
 					{#if emailBots.length === 0}
 						<p class="text-xs text-[var(--color-muted-foreground)] mt-1">{t('emailBot.noBots')} <a href="/telegram-bots" class="underline">→</a></p>
 					{/if}
@@ -372,12 +377,8 @@
 				</div>
 			{:else if formType === 'matrix'}
 				<div>
-					<label for="tgt-mxbot" class="block text-sm font-medium mb-1">{t('targets.selectMatrixBot')}</label>
-					<select id="tgt-mxbot" bind:value={form.matrix_bot_id} required
-						class="w-full px-3 py-2 border border-[var(--color-border)] rounded-md text-sm bg-[var(--color-background)]">
-						<option value={0} disabled>— {t('targets.selectMatrixBot')} —</option>
-						{#each matrixBots as bot}<option value={bot.id}>{bot.name} ({bot.homeserver_url})</option>{/each}
-					</select>
+					<label class="block text-sm font-medium mb-1">{t('targets.selectMatrixBot')}</label>
+					<EntitySelect items={matrixBotItems} bind:value={form.matrix_bot_id} placeholder={t('targets.selectMatrixBot')} />
 					{#if matrixBots.length === 0}
 						<p class="text-xs text-[var(--color-muted-foreground)] mt-1">{t('matrixBot.noBots')} <a href="/telegram-bots" class="underline">→</a></p>
 					{/if}