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 IconButton from '$lib/components/IconButton.svelte';
import CrossLink from '$lib/components/CrossLink.svelte';
import IconGridSelect from '$lib/components/IconGridSelect.svelte';
import { providerTypeItems, responseModeItems } from '$lib/grid-items';
import { providerTypeItems, providerTypeFilterItems, responseModeItems } from '$lib/grid-items';
import EntitySelect from '$lib/components/EntitySelect.svelte';
import { snackSuccess, snackError } from '$lib/stores/snackbar.svelte';
import { highlightFromUrl } from '$lib/highlight';
@@ -202,7 +202,7 @@
<div class="grid grid-cols-2 sm:grid-cols-3 gap-3">
<div>
<label class="block text-xs mb-1">{t('commandConfig.responseMode')}</label>
<IconGridSelect items={responseModeItems(t)} bind:value={form.response_mode} columns={2} />
<IconGridSelect items={responseModeItems(t)} bind:value={form.response_mode} columns={2} compact />
</div>
<div>
<label class="block text-xs mb-1">{t('commandConfig.defaultCount')}</label>
@@ -239,12 +239,9 @@
<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)]" />
<select bind:value={filterType}
class="px-3 py-1.5 border border-[var(--color-border)] rounded-md text-sm bg-[var(--color-background)]">
<option value="">{t('common.allTypes')}</option>
<option value="immich">Immich</option>
<option value="gitea">Gitea</option>
</select>
<div class="w-48">
<IconGridSelect items={providerTypeFilterItems()} bind:value={filterType} columns={2} compact />
</div>
</div>
{/if}