diff --git a/src/lib/components/filters/setFilters.ts b/src/lib/components/filters/setFilters.ts index 301a66a0a..ff83314a5 100644 --- a/src/lib/components/filters/setFilters.ts +++ b/src/lib/components/filters/setFilters.ts @@ -11,11 +11,13 @@ export const parsedTags = writable([]); export function setFilters(localTags: TagValue[], filterCols: FilterData[], $columns: Column[]) { if (!localTags?.length) { + parsedTags.set([]); filterCols.forEach((filter) => { resetOptions(filter); cleanOldTags(filter?.title); }); } else { + parsedTags.set([]); filterCols.forEach((filter) => { const id = filter?.id?.toLowerCase(); if (id?.includes('duration')) { diff --git a/src/lib/layout/responsiveContainerHeader.svelte b/src/lib/layout/responsiveContainerHeader.svelte index 571d325c7..fd33b1339 100644 --- a/src/lib/layout/responsiveContainerHeader.svelte +++ b/src/lib/layout/responsiveContainerHeader.svelte @@ -14,7 +14,7 @@ import DisplaySettingsModal from './displaySettingsModal.svelte'; import { buildFilterCol } from '$lib/components/filters/quickFilters'; import { afterNavigate } from '$app/navigation'; - import { setFilters } from '$lib/components/filters/setFilters'; + import { parsedTags, setFilters } from '$lib/components/filters/setFilters'; let { columns, @@ -48,9 +48,12 @@ let showDisplaySettingsModal = $state(false); let showFilters = $state(false); - let filterCols = $derived( + const filterCols = $derived( $columns.map((col) => (col.filter !== false ? buildFilterCol(col) : null)).filter(Boolean) ); + const filtersBadge = $derived( + filtersStyle === 'dropdown' && $parsedTags?.length ? `${$parsedTags.length}` : undefined + ); afterNavigate((p) => { if (!hasFilters) return; @@ -192,7 +195,12 @@ {/snippet} {#snippet filtersButton(icon = false)} - {/snippet}