From a3a1fe3d7520197d3b7a8bfa121340efcd99bd66 Mon Sep 17 00:00:00 2001
From: "alexei.dolgolyov" <dolgolyov.alexei@gmail.com>
Date: Sun, 22 Mar 2026 00:21:57 +0300
Subject: [PATCH] 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.
---
 .../src/lib/components/EntitySelect.svelte    | 312 ++++++++++++++++++
 .../src/routes/command-configs/+page.svelte   |  14 +-
 .../src/routes/command-trackers/+page.svelte  |  24 +-
 .../routes/notification-trackers/+page.svelte |  18 +-
 frontend/src/routes/targets/+page.svelte      |  37 ++-
 5 files changed, 359 insertions(+), 46 deletions(-)
 create mode 100644 frontend/src/lib/components/EntitySelect.svelte

diff --git a/frontend/src/lib/components/EntitySelect.svelte b/frontend/src/lib/components/EntitySelect.svelte
new file mode 100644
index 0000000..50861e6
--- /dev/null
+++ b/frontend/src/lib/components/EntitySelect.svelte
@@ -0,0 +1,312 @@
+<script lang="ts">
+	import MdiIcon from './MdiIcon.svelte';
+
+	export interface EntityItem {
+		value: string | number;
+		label: string;
+		icon?: string;
+		desc?: string;
+	}
+
+	let {
+		items = [],
+		value = $bindable(),
+		placeholder = 'Select...',
+		allowNone = false,
+		noneLabel = '—',
+		disabled = false,
+	}: {
+		items: EntityItem[];
+		value: string | number | null;
+		placeholder?: string;
+		allowNone?: boolean;
+		noneLabel?: string;
+		disabled?: boolean;
+	} = $props();
+
+	let open = $state(false);
+	let query = $state('');
+	let highlightIdx = $state(0);
+	let inputEl: HTMLInputElement;
+	let listEl: HTMLDivElement;
+
+	const selected = $derived(items.find(i => String(i.value) === String(value)));
+
+	const filtered = $derived.by(() => {
+		const q = query.toLowerCase().trim();
+		let result: EntityItem[] = [];
+		if (allowNone) {
+			result.push({ value: '', label: noneLabel, icon: '' });
+		}
+		const matching = q
+			? items.filter(i => i.label.toLowerCase().includes(q) || (i.desc || '').toLowerCase().includes(q))
+			: items;
+		return [...result, ...matching];
+	});
+
+	function openPalette() {
+		if (disabled) return;
+		open = true;
+		query = '';
+		highlightIdx = Math.max(0, filtered.findIndex(i => String(i.value) === String(value)));
+		requestAnimationFrame(() => inputEl?.focus());
+	}
+
+	function closePalette() {
+		open = false;
+		query = '';
+	}
+
+	function selectItem(item: EntityItem) {
+		value = item.value || null;
+		closePalette();
+	}
+
+	function handleKeydown(e: KeyboardEvent) {
+		if (e.key === 'Escape') {
+			closePalette();
+			return;
+		}
+		if (e.key === 'ArrowDown') {
+			e.preventDefault();
+			highlightIdx = Math.min(highlightIdx + 1, filtered.length - 1);
+			scrollToHighlight();
+		} else if (e.key === 'ArrowUp') {
+			e.preventDefault();
+			highlightIdx = Math.max(highlightIdx - 1, 0);
+			scrollToHighlight();
+		} else if (e.key === 'Enter') {
+			e.preventDefault();
+			if (filtered[highlightIdx]) selectItem(filtered[highlightIdx]);
+		} else if (e.key === 'Tab') {
+			e.preventDefault();
+		}
+	}
+
+	function scrollToHighlight() {
+		requestAnimationFrame(() => {
+			listEl?.querySelector('.ep-highlight')?.scrollIntoView({ block: 'nearest' });
+		});
+	}
+
+	// Reset highlight when query changes
+	$effect(() => {
+		query; // track
+		highlightIdx = 0;
+	});
+</script>
+
+<!-- Trigger button -->
+<button type="button" class="es-trigger" onclick={openPalette}
+	style="opacity: {disabled ? 0.5 : 1}; cursor: {disabled ? 'default' : 'pointer'};">
+	{#if selected}
+		{#if selected.icon}
+			<span class="es-trigger-icon"><MdiIcon name={selected.icon} size={16} /></span>
+		{/if}
+		<span class="es-trigger-label">{selected.label}</span>
+	{:else}
+		<span class="es-trigger-label es-trigger-none">{placeholder}</span>
+	{/if}
+	<span class="es-trigger-arrow"><MdiIcon name="mdiChevronDown" size={14} /></span>
+</button>
+
+<!-- Palette overlay -->
+{#if open}
+	<div class="ep-overlay" onclick={closePalette} role="presentation"></div>
+
+	<div class="ep-container">
+		<div class="ep-search-row">
+			<MdiIcon name="mdiMagnify" size={18} />
+			<input
+				bind:this={inputEl}
+				bind:value={query}
+				placeholder={placeholder}
+				class="ep-input"
+				type="text"
+				autocomplete="off"
+				spellcheck="false"
+				onkeydown={handleKeydown}
+			/>
+			<kbd class="ep-kbd">ESC</kbd>
+		</div>
+
+		<div class="ep-list" bind:this={listEl}>
+			{#if filtered.length === 0}
+				<div class="ep-empty">No matches</div>
+			{:else}
+				{#each filtered as item, i}
+					<button
+						class="ep-item"
+						class:ep-highlight={i === highlightIdx}
+						class:ep-current={String(item.value) === String(value)}
+						onclick={() => selectItem(item)}
+						onmouseenter={() => highlightIdx = i}
+						type="button"
+					>
+						{#if item.icon}
+							<span class="ep-item-icon"><MdiIcon name={item.icon} size={18} /></span>
+						{/if}
+						<span class="ep-item-label">{item.label}</span>
+						{#if item.desc}
+							<span class="ep-item-desc">{item.desc}</span>
+						{/if}
+					</button>
+				{/each}
+			{/if}
+		</div>
+	</div>
+{/if}
+
+<style>
+	/* Trigger button */
+	.es-trigger {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		width: 100%;
+		padding: 0.5rem 0.75rem;
+		border: 1px solid var(--color-border);
+		border-radius: 0.375rem;
+		font-size: 0.875rem;
+		background: var(--color-background);
+		color: var(--color-foreground);
+		transition: border-color 0.15s;
+		text-align: left;
+		cursor: pointer;
+	}
+	.es-trigger:hover {
+		border-color: var(--color-primary);
+	}
+	.es-trigger-icon {
+		flex-shrink: 0;
+		color: var(--color-primary);
+	}
+	.es-trigger-label {
+		flex: 1;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+	.es-trigger-none {
+		color: var(--color-muted-foreground);
+	}
+	.es-trigger-arrow {
+		flex-shrink: 0;
+		color: var(--color-muted-foreground);
+	}
+
+	/* Overlay */
+	.ep-overlay {
+		position: fixed;
+		inset: 0;
+		z-index: 9998;
+		background: rgba(0, 0, 0, 0.4);
+		backdrop-filter: blur(2px);
+	}
+
+	/* Palette container */
+	.ep-container {
+		position: fixed;
+		top: min(20vh, 120px);
+		left: 50%;
+		transform: translateX(-50%);
+		z-index: 9999;
+		width: min(460px, 90vw);
+		max-height: 60vh;
+		background: var(--color-card);
+		border: 1px solid var(--color-border);
+		border-radius: 0.75rem;
+		box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
+		display: flex;
+		flex-direction: column;
+		overflow: hidden;
+	}
+
+	/* Search row */
+	.ep-search-row {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		padding: 0.625rem 0.875rem;
+		border-bottom: 1px solid var(--color-border);
+		color: var(--color-muted-foreground);
+	}
+	.ep-input {
+		flex: 1;
+		border: none;
+		outline: none;
+		background: transparent;
+		font-size: 0.9rem;
+		color: var(--color-foreground);
+		padding: 0;
+	}
+	.ep-kbd {
+		font-size: 0.55rem;
+		font-family: var(--font-mono);
+		padding: 0.1rem 0.3rem;
+		border-radius: 0.2rem;
+		background: var(--color-muted);
+		color: var(--color-muted-foreground);
+		border: 1px solid var(--color-border);
+	}
+
+	/* List */
+	.ep-list {
+		overflow-y: auto;
+		scrollbar-width: thin;
+		padding: 0.25rem 0;
+	}
+	.ep-empty {
+		padding: 1rem;
+		text-align: center;
+		color: var(--color-muted-foreground);
+		font-size: 0.85rem;
+	}
+
+	/* Items */
+	.ep-item {
+		display: flex;
+		align-items: center;
+		gap: 0.625rem;
+		width: 100%;
+		padding: 0.5rem 0.875rem;
+		border: none;
+		background: transparent;
+		color: var(--color-foreground);
+		font-size: 0.875rem;
+		cursor: pointer;
+		text-align: left;
+		transition: background 0.1s;
+		border-left: 3px solid transparent;
+	}
+	.ep-item:hover, .ep-item.ep-highlight {
+		background: var(--color-muted);
+	}
+	.ep-item.ep-current {
+		border-left-color: var(--color-primary);
+	}
+	.ep-item-icon {
+		flex-shrink: 0;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		color: var(--color-muted-foreground);
+	}
+	.ep-item.ep-current .ep-item-icon {
+		color: var(--color-primary);
+	}
+	.ep-item-label {
+		flex: 1;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+	.ep-item-desc {
+		font-size: 0.75rem;
+		color: var(--color-muted-foreground);
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		max-width: 40%;
+	}
+</style>
diff --git a/frontend/src/routes/command-configs/+page.svelte b/frontend/src/routes/command-configs/+page.svelte
index 52a9b10..4a6e44e 100644
--- a/frontend/src/routes/command-configs/+page.svelte
+++ b/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">
diff --git a/frontend/src/routes/command-trackers/+page.svelte b/frontend/src/routes/command-trackers/+page.svelte
index d7e34df..2d1f0c5 100644
--- a/frontend/src/routes/command-trackers/+page.svelte
+++ b/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}
diff --git a/frontend/src/routes/notification-trackers/+page.svelte b/frontend/src/routes/notification-trackers/+page.svelte
index d994ca2..961bb45 100644
--- a/frontend/src/routes/notification-trackers/+page.svelte
+++ b/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>
diff --git a/frontend/src/routes/targets/+page.svelte b/frontend/src/routes/targets/+page.svelte
index 4fce2a9..977180f 100644
--- a/frontend/src/routes/targets/+page.svelte
+++ b/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}