feat: consistent IconGridSelect sizing + descriptions + filter upgrades

- Added desc text to all 40+ grid items (EN + RU)
- compact prop on all IconGridSelect in compact form sections
- Fixed compact width to fill grid cells (removed width:auto)
- Replaced <select> filter dropdowns with IconGridSelect on config pages
- Replaced <select> provider filters with EntitySelect on tracker pages
- Dashboard filters constrained to fixed widths (not full row)
- Added filtering to command-template-configs and providers pages
- providerTypeFilterItems() with "All" option for filter contexts
This commit is contained in:
2026-03-23 01:05:59 +03:00
parent 82e400ddcd
commit 31584c5d31
13 changed files with 203 additions and 97 deletions
@@ -13,7 +13,7 @@
import ConfirmModal from '$lib/components/ConfirmModal.svelte';
import IconButton from '$lib/components/IconButton.svelte';
import IconGridSelect from '$lib/components/IconGridSelect.svelte';
import { providerTypeItems as providerTypeItemsFn } from '$lib/grid-items';
import { providerTypeItems as providerTypeItemsFn, providerTypeFilterItems } from '$lib/grid-items';
import Modal from '$lib/components/Modal.svelte';
import JinjaEditor from '$lib/components/JinjaEditor.svelte';
import { snackSuccess, snackError } from '$lib/stores/snackbar.svelte';
@@ -37,7 +37,13 @@
const LOCALES = ['en', 'ru'] as const;
let configs = $state<CmdTemplateConfig[]>([]);
let allCmdTplConfigs = $state<CmdTemplateConfig[]>([]);
let filterText = $state('');
let filterType = $state('');
let configs = $derived(allCmdTplConfigs.filter(c =>
(!filterText || c.name.toLowerCase().includes(filterText.toLowerCase())) &&
(!filterType || c.provider_type === filterType)
));
let loaded = $state(false);
let showForm = $state(false);
let editing = $state<number | null>(null);
@@ -88,7 +94,7 @@
api('/providers/capabilities'),
api('/command-template-configs/variables'),
]);
configs = cfgs;
allCmdTplConfigs = cfgs;
allCapabilities = caps;
varsRef = vars;
} catch (err: any) {
@@ -325,10 +331,24 @@
</div>
{/if}
{#if configs.length === 0 && !showForm}
{#if !showForm && allCmdTplConfigs.length > 0}
<div class="flex items-center gap-2 mb-3">
<input type="text" bind:value={filterText} placeholder={t('common.filterByName')}
class="flex-1 px-3 py-1.5 border border-[var(--color-border)] rounded-md text-sm bg-[var(--color-background)]" />
<div class="w-48">
<IconGridSelect items={providerTypeFilterItems()} bind:value={filterType} columns={2} compact />
</div>
</div>
{/if}
{#if allCmdTplConfigs.length === 0 && !showForm}
<Card>
<EmptyState icon="mdiConsoleLine" message={t('cmdTemplateConfig.noConfigs')} />
</Card>
{:else if configs.length === 0 && !showForm}
<Card>
<EmptyState icon="mdiFilterOff" message={t('common.noFilterResults')} />
</Card>
{:else}
<div class="space-y-3 stagger-children">
{#each configs as config}