addressed some coderabiit comments

src/lib/components/filters/parsedTagList.svelte

@@ -12,18 +12,18 @@
     import { capitalize } from '$lib/helpers/string';
     import { queries, tags } from './store';
     import { IconX } from '@appwrite.io/pink-icons-svelte';
-    import { parsedTags } from './setFilters';
+    import { parsedTags, type ParsedTag } from './setFilters';
     import { Button } from '$lib/elements/forms';
     import type { Column } from '$lib/helpers/types';
-    import type { Writable } from 'svelte/store';
+    import { writable, type Writable } from 'svelte/store';
     import Menu from '$lib/components/menu/menu.svelte';
     import { addFilterAndApply, buildFilterCol, type FilterData } from './quickFilters';
     import QuickFilters from '$lib/components/filters/quickFilters.svelte';
 
     let {
-        columns,
+        columns = writable([]),
         analyticsSource = ''
-    }: { columns: Writable<Column[]> | undefined; analyticsSource?: string } = $props();
+    }: { columns?: Writable<Column[]>; analyticsSource?: string } = $props();
 
     function parseTagParts(tagString: string): { text: string; operator: boolean }[] {
         return tagString
@@ -43,11 +43,6 @@
             .filter((p) => Boolean(p.text));
     }
 
-    function firstBoldText(tagString: string): string | null {
-        const m = /\*\*(.*?)\*\*/.exec(tagString);
-        return m ? m[1] : null;
-    }
-
     function getFilterFor(title: string): FilterData | null {
         if (!columns) return null;
         const col = ($columns as unknown as Column[]).find((c) => c.title === title);
@@ -74,7 +69,7 @@
     let placeholderVersion = $state(0); // used to force keyed re-render when needed
 
     let activeTitles = $derived(
-        ($parsedTags || []).map((t) => firstBoldText(t.tag)).filter(Boolean) as string[]
+        ($parsedTags || []).map((t) => (t as ParsedTag).title).filter(Boolean) as string[]
     );
 
     // Compute current placeholders (major filters not already active or dismissed)
@@ -94,7 +89,7 @@
                     maxWidth="600px">
                     <CompoundTagRoot size="s">
                         {@const parts = parseTagParts(tag.tag)}
-                        {@const property = firstBoldText(tag.tag)}
+                        {@const property = (tag as ParsedTag).title}
 
                         {#each parts as part}
                             <CompoundTagChild>
@@ -183,7 +178,7 @@
                             dismiss
                             on:click={() => {
                                 const t = $tags.filter((t) =>
-                                    t.tag.includes(tag.tag.split(' ')[0])
+                                    t.tag.includes((tag as ParsedTag).title)
                                 );
                                 t.forEach((t) => (t ? queries.removeFilter(t) : null));
                                 queries.apply();

src/lib/components/filters/setFilters.ts

@@ -3,7 +3,11 @@ import { get, writable } from 'svelte/store';
 import { type FilterData } from './quickFilters';
 import { tags, type TagValue } from './store';
 
-export const parsedTags = writable<TagValue[]>([]);
+export type ParsedTag = TagValue & {
+    title: string;
+};
+
+export const parsedTags = writable<ParsedTag[]>([]);
 
 export function setFilters(localTags: TagValue[], filterCols: FilterData[], $columns: Column[]) {
     if (!localTags?.length) {
@@ -47,9 +51,10 @@ export function setFilterData(filter: FilterData) {
             });
         }
         cleanOldTags(filter?.title);
-        const newTag = {
+        const newTag: ParsedTag = {
             tag: tagData.tag.replace(',', ' or '),
-            value: tagData.value
+            value: tagData.value,
+            title: filter.title
         };
 
         parsedTags.update((tags) => {
@@ -69,9 +74,10 @@ export function setTimeFilter(filter: FilterData, columns: Column[]) {
         const ranges = col.elements as { value: string; label: string }[];
         const timeRange = ranges.find((range) => range.value === timeTag.value);
         if (timeRange) {
-            const newTag = {
+            const newTag: ParsedTag = {
                 tag: `**${filter.title}** is **${timeRange.label}**`,
-                value: timeRange.value
+                value: timeRange.value,
+                title: filter.title
             };
 
             cleanOldTags(filter?.title);
@@ -102,9 +108,10 @@ export function setSizeFilter(filter: FilterData, columns: Column[]) {
         if (sizeRange) {
             cleanOldTags(filter?.title);
 
-            const newTag = {
+            const newTag: ParsedTag = {
                 tag: `**${filter.title}** is **${sizeRange.label}**`,
-                value: sizeTag.value
+                value: sizeTag.value,
+                title: filter.title
             };
             parsedTags.update((tags) => {
                 tags.push(newTag);
@@ -126,9 +133,10 @@ export function setStatusCodeFilter(filter: FilterData, columns: Column[]) {
         const codeRange = ranges.find((c) => c?.value && c.value === statusCodeTag.value);
         if (codeRange) {
             cleanOldTags(filter?.title);
-            const newTag = {
+            const newTag: ParsedTag = {
                 tag: `**${filter.title}** is **${codeRange.label}**`,
-                value: statusCodeTag.value
+                value: statusCodeTag.value,
+                title: filter.title
             };
             parsedTags.update((tags) => {
                 tags.push(newTag);
@@ -156,9 +164,10 @@ export function setDateFilter(filter: FilterData, columns: Column[]) {
         });
         if (dateRange) {
             cleanOldTags(filter?.title);
-            const newTag = {
+            const newTag: ParsedTag = {
                 tag: `**${filter.title}** is **${dateRange.label}**`,
-                value: dateTag.value
+                value: dateTag.value,
+                title: filter.title
             };
             parsedTags.update((tags) => {
                 tags.push(newTag);

src/lib/layout/responsiveContainerHeader.svelte

@@ -109,7 +109,7 @@
                     direction="row"
                     alignItems="center"
                     gap="m"
-                    style={`min-width: 0; flex: 1 1 auto;`}>
+                    style="min-width: 0; flex: 1 1 auto;">
                     {#if hasSearch}
                         <SearchQuery placeholder={searchPlaceholder} />
                     {/if}
@@ -119,7 +119,7 @@
                         alignItems="center"
                         gap="s"
                         wrap="wrap"
-                        style={`min-width: 0;`}>
+                        style="min-width: 0;">
                         <ParsedTagList {columns} {analyticsSource} />
                     </Layout.Stack>
                 </Layout.Stack>
@@ -127,7 +127,7 @@
                     direction="row"
                     alignItems="center"
                     justifyContent="flex-end"
-                    style={`align-self: flex-start; white-space: nowrap;`}>
+                    style="align-self: flex-start; white-space: nowrap;">
                     {#if hasDisplaySettings}
                         <ViewSelector ui="new" {view} {columns} {hideView} {hideColumns} />
                     {/if}