Merge pull request #2840 from appwrite/fix-badges-not-visible-whether-filter-is-applied

fix: badges not visible on filter button

Author: HarshMN2345

src/lib/components/filters/setFilters.ts

@@ -11,11 +11,13 @@ export const parsedTags = writable<ParsedTag[]>([]);
 
 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')) {

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)}
-    <Button ariaLabel="Filters" on:click={() => (showFilters = !showFilters)} text {icon}>
+    <Button
+        ariaLabel="Filters"
+        on:click={() => (showFilters = !showFilters)}
+        text
+        {icon}
+        badge={filtersBadge}>
         <Icon icon={IconFilterLine} />
     </Button>
 {/snippet}