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.
This commit is contained in:
@@ -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">
|
||||
|
||||
Reference in New Issue
Block a user