diff --git a/src/lib/components/filters/parsedTagList.svelte b/src/lib/components/filters/parsedTagList.svelte index 0e9c925cd..98bb4870b 100644 --- a/src/lib/components/filters/parsedTagList.svelte +++ b/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 | undefined; analyticsSource?: string } = $props(); + }: { columns?: Writable; 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"> {@const parts = parseTagParts(tag.tag)} - {@const property = firstBoldText(tag.tag)} + {@const property = (tag as ParsedTag).title} {#each parts as part} @@ -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(); diff --git a/src/lib/components/filters/setFilters.ts b/src/lib/components/filters/setFilters.ts index e6f07083c..301a66a0a 100644 --- a/src/lib/components/filters/setFilters.ts +++ b/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([]); +export type ParsedTag = TagValue & { + title: string; +}; + +export const parsedTags = writable([]); 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); diff --git a/src/lib/layout/responsiveContainerHeader.svelte b/src/lib/layout/responsiveContainerHeader.svelte index ebf390cce..79b7f2bcc 100644 --- a/src/lib/layout/responsiveContainerHeader.svelte +++ b/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} {/if} @@ -119,7 +119,7 @@ alignItems="center" gap="s" wrap="wrap" - style={`min-width: 0;`}> + style="min-width: 0;"> @@ -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} {/if}