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
+17 -2
View File
@@ -18,7 +18,11 @@
import { highlightFromUrl } from '$lib/highlight';
import type { ServiceProvider } from '$lib/types';
let providers = $derived(providersCache.items);
let allProviders = $derived(providersCache.items);
let filterText = $state('');
let providers = $derived(allProviders.filter(p =>
!filterText || p.name.toLowerCase().includes(filterText.toLowerCase()) || p.type.toLowerCase().includes(filterText.toLowerCase())
));
let showForm = $state(false);
let editing = $state<number | null>(null);
let form = $state({ name: 'Immich', type: 'immich', url: '', api_key: '', api_token: '', webhook_secret: '', external_domain: '', icon: '' });
@@ -183,10 +187,21 @@
</div>
{/if}
{#if providers.length === 0 && !showForm}
{#if !showForm && allProviders.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>
{/if}
{#if allProviders.length === 0 && !showForm}
<Card>
<EmptyState icon="mdiServer" message={t('providers.noProviders')} />
</Card>
{:else if providers.length === 0 && !showForm}
<Card>
<EmptyState icon="mdiFilterOff" message={t('common.noFilterResults')} />
</Card>
{:else}
<div class="space-y-3 stagger-children">
{#each providers as provider}