alexei.dolgolyov/notify-bridge
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 31 Wiki Activity

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

Browse Source 
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.
This commit is contained in:
Admin
2026-03-22 00:21:57 +03:00
parent 86115f5c75
commit a3a1fe3d75
5 changed files with 359 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/routes/targets/+page.svelte
+19 -18
View File
@@ -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}