From 8b1d5eb731d14974a58e39c9d25fa7f805fbf2e9 Mon Sep 17 00:00:00 2001
From: Harsh Mahajan <127186841+HarshMN2345@users.noreply.github.com>
Date: Mon, 12 Jan 2026 13:38:28 +0530
Subject: [PATCH 1/6] added new filters for sites and functions

---
 .../components/filters/parsedTagList.svelte   | 291 ++++++++++++++++--
 .../components/filters/quickFilters.svelte    |   9 +-
 .../layout/responsiveContainerHeader.svelte   |  29 +-
 3 files changed, 299 insertions(+), 30 deletions(-)

diff --git a/src/lib/components/filters/parsedTagList.svelte b/src/lib/components/filters/parsedTagList.svelte
index edbd5161e0..b451b0a3b4 100644
--- a/src/lib/components/filters/parsedTagList.svelte
+++ b/src/lib/components/filters/parsedTagList.svelte
@@ -1,35 +1,288 @@
 <script lang="ts">
-    import { Icon, Layout, Tag, Tooltip } from '@appwrite.io/pink-svelte';
-    import { queries, tagFormat, tags } from './store';
+    import {
+        Icon,
+        Layout,
+        Tooltip,
+        CompoundTagRoot,
+        CompoundTagChild,
+        Typography,
+        ActionMenu,
+        Selector
+    } from '@appwrite.io/pink-svelte';
+    import { capitalize } from '$lib/helpers/string';
+    import { queries, tags } from './store';
     import { IconX } from '@appwrite.io/pink-icons-svelte';
     import { parsedTags } from './setFilters';
     import { Button } from '$lib/elements/forms';
+    import type { Column } from '$lib/helpers/types';
+    import 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,
+        analyticsSource = ''
+    }: { columns: Writable<Column[]> | undefined; analyticsSource?: string } = $props();
+
+    function parseTagParts(tagString: string): { text: string; operator: boolean }[] {
+        const parts: { text: string; operator: boolean }[] = [];
+        const regex = /\*\*(.*?)\*\*/g;
+        let match;
+        let lastIndex = 0;
+        const matches: Array<{ text: string; index: number; endIndex: number }> = [];
+
+        // find all bold matches
+        while ((match = regex.exec(tagString)) !== null) {
+            matches.push({
+                text: match[1],
+                index: match.index,
+                endIndex: regex.lastIndex
+            });
+        }
+
+        // Build parts array
+        for (let i = 0; i < matches.length; i++) {
+            const currentMatch = matches[i];
+
+            // Add text before this match (operators, etc.)
+            if (lastIndex < currentMatch.index) {
+                const beforeText = tagString.substring(lastIndex, currentMatch.index).trim();
+                if (beforeText) {
+                    parts.push(
+                        ...beforeText
+                            .split(/\s+/)
+                            .filter(Boolean)
+                            .map((t) => ({ text: t, operator: true }))
+                    );
+                }
+            }
+
+            // Add the bold text itself
+            parts.push({ text: currentMatch.text, operator: false });
+            lastIndex = currentMatch.endIndex;
+        }
+
+        // Add any remaining text after last match
+        if (lastIndex < tagString.length) {
+            const remaining = tagString.substring(lastIndex).trim();
+            if (remaining) {
+                parts.push(
+                    ...remaining
+                        .split(/\s+/)
+                        .filter(Boolean)
+                        .map((t) => ({ text: t, operator: true }))
+                );
+            }
+        }
+
+        return parts.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);
+        if (!col) return null;
+        const filter = buildFilterCol(col);
+        return filter ?? null;
+    }
+
+    // Build available filter definitions from provided columns
+    let availableFilters = $derived(
+        ($columns as unknown as Column[] | undefined)?.length
+            ? (($columns as unknown as Column[])
+                  .map((c) => (c.filter !== false ? buildFilterCol(c) : null))
+                  .filter((f) => f && f.options) as FilterData[])
+            : []
+    );
+
+    // QuickFilters uses the same filter list
+    let filterCols = $derived(availableFilters);
+
+    // Always-show placeholders are derived from available filters (no hardcoding)
+    // Use reactive array so runes can track changes
+    let hiddenPlaceholders: string[] = $state([]);
+    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[]
+    );
+
+    // Compute current placeholders (major filters not already active or dismissed)
+    let placeholders = $derived(
+        availableFilters
+            .filter((f) => !activeTitles.includes(f.title))
+            .filter((f) => !hiddenPlaceholders.includes(f.title))
+    );
 </script>
 
-{#if $parsedTags?.length}
-    <Layout.Stack direction="row" gap="s" wrap="wrap" alignItems="center" inline>
+<Layout.Stack direction="row" gap="s" wrap="wrap" alignItems="center" inline>
+    {#if $parsedTags?.length}
         {#each $parsedTags as tag (tag.tag)}
             <span>
                 <Tooltip
                     disabled={Array.isArray(tag.value) ? tag.value?.length < 3 : true}
                     maxWidth="600px">
-                    <Tag
-                        size="s"
-                        on:click={() => {
-                            const t = $tags.filter((t) => t.tag.includes(tag.tag.split(' ')[0]));
-                            t.forEach((t) => (t ? queries.removeFilter(t) : null));
-                            queries.apply();
-                            parsedTags.update((tags) => tags.filter((t) => t.tag !== tag.tag));
-                        }}>
-                        {#key tag.tag}
-                            <span use:tagFormat>{tag.tag}</span>
-                        {/key}
-                        <Icon icon={IconX} size="s" slot="end" />
-                    </Tag>
+                    <CompoundTagRoot size="s">
+                        {@const parts = parseTagParts(tag.tag)}
+                        {@const property = firstBoldText(tag.tag)}
+
+                        {#each parts as part}
+                            <CompoundTagChild>
+                                <Menu>
+                                    <span>
+                                        {#if part.operator}
+                                            <Typography.Text color="--fgcolor-neutral-secondary"
+                                                >{part.text}</Typography.Text>
+                                        {:else}
+                                            {capitalize(part.text)}
+                                        {/if}
+                                    </span>
+                                    <svelte:fragment slot="menu">
+                                        {#if property}
+                                            {@const filter = getFilterFor(property)}
+                                            {#if filter}
+                                                {@const isArray = filter?.array}
+                                                {@const selectedArray = Array.isArray(tag.value)
+                                                    ? tag.value
+                                                    : []}
+                                                {#each filter.options as option (filter.title + option.value + option.label)}
+                                                    <ActionMenu.Root>
+                                                        <ActionMenu.Item.Button
+                                                            on:click={() => {
+                                                                if (isArray) {
+                                                                    const exists =
+                                                                        selectedArray.includes(
+                                                                            option.value
+                                                                        );
+                                                                    const next = exists
+                                                                        ? selectedArray.filter(
+                                                                              (v) =>
+                                                                                  v !== option.value
+                                                                          )
+                                                                        : [
+                                                                              ...selectedArray,
+                                                                              option.value
+                                                                          ];
+                                                                    addFilterAndApply(
+                                                                        filter.id,
+                                                                        filter.title,
+                                                                        filter.operator,
+                                                                        null,
+                                                                        next,
+                                                                        $columns,
+                                                                        ''
+                                                                    );
+                                                                } else {
+                                                                    addFilterAndApply(
+                                                                        filter.id,
+                                                                        filter.title,
+                                                                        filter.operator,
+                                                                        option.value,
+                                                                        [],
+                                                                        $columns,
+                                                                        ''
+                                                                    );
+                                                                }
+                                                            }}>
+                                                            <Layout.Stack direction="row" gap="s">
+                                                                {#if isArray}
+                                                                    <Selector.Checkbox
+                                                                        checked={selectedArray.includes(
+                                                                            option.value
+                                                                        )}
+                                                                        size="s" />
+                                                                {/if}
+                                                                {capitalize(option.label)}
+                                                            </Layout.Stack>
+                                                        </ActionMenu.Item.Button>
+                                                    </ActionMenu.Root>
+                                                {/each}
+                                            {/if}
+                                        {/if}
+                                    </svelte:fragment>
+                                </Menu>
+                            </CompoundTagChild>
+                        {/each}
+                        <CompoundTagChild
+                            dismiss
+                            on:click={() => {
+                                const t = $tags.filter((t) =>
+                                    t.tag.includes(tag.tag.split(' ')[0])
+                                );
+                                t.forEach((t) => (t ? queries.removeFilter(t) : null));
+                                queries.apply();
+                                parsedTags.update((tags) => tags.filter((t) => t.tag !== tag.tag));
+                            }}>
+                            <Icon icon={IconX} size="s" />
+                        </CompoundTagChild>
+                    </CompoundTagRoot>
                     <span slot="tooltip">{tag?.value?.toString()}</span>
                 </Tooltip>
             </span>
         {/each}
+    {/if}
+
+    <!-- Always render remaining placeholder tags alongside active tags -->
+    {#key placeholderVersion}
+        {#if placeholders?.length}
+            {#each placeholders as filter (filter.title + filter.id)}
+                <span>
+                    <Menu>
+                        <CompoundTagRoot size="s">
+                            <CompoundTagChild>
+                                <span>{capitalize(filter.title)}</span>
+                            </CompoundTagChild>
+                            <CompoundTagChild
+                                dismiss
+                                on:click={(e) => {
+                                    e.stopPropagation();
+                                    if (!hiddenPlaceholders.includes(filter.title)) {
+                                        hiddenPlaceholders.push(filter.title);
+                                    }
+                                    placeholderVersion++;
+                                }}>
+                                <Icon icon={IconX} size="s" />
+                            </CompoundTagChild>
+                        </CompoundTagRoot>
+                        <svelte:fragment slot="menu">
+                            {#if filter.options}
+                                {#each filter.options as option (filter.title + option.value + option.label)}
+                                    <ActionMenu.Root>
+                                        <ActionMenu.Item.Button
+                                            on:click={() => {
+                                                addFilterAndApply(
+                                                    filter.id,
+                                                    filter.title,
+                                                    filter.operator,
+                                                    filter?.array ? null : option.value,
+                                                    filter?.array ? [option.value] : [],
+                                                    $columns,
+                                                    ''
+                                                );
+                                            }}>
+                                            {capitalize(option.label)}
+                                        </ActionMenu.Item.Button>
+                                    </ActionMenu.Root>
+                                {/each}
+                            {/if}
+                        </svelte:fragment>
+                    </Menu>
+                </span>
+            {/each}
+        {/if}
+    {/key}
+
+    {#if filterCols?.length}
+        <QuickFilters {columns} {analyticsSource} {filterCols} />
+    {/if}
+
+    {#if $parsedTags?.length}
         <Button
             size="s"
             text
@@ -38,5 +291,5 @@
                 queries.apply();
                 parsedTags.set([]);
             }}>Clear all</Button>
-    </Layout.Stack>
-{/if}
+    {/if}
+</Layout.Stack>
diff --git a/src/lib/components/filters/quickFilters.svelte b/src/lib/components/filters/quickFilters.svelte
index 76bbf90c5f..2e3bb47ef3 100644
--- a/src/lib/components/filters/quickFilters.svelte
+++ b/src/lib/components/filters/quickFilters.svelte
@@ -22,9 +22,12 @@
 </script>
 
 <Menu>
-    <Button secondary badge={$parsedTags?.length ? `${$parsedTags.length}` : undefined}>
-        <Icon icon={IconFilterLine} slot="start" size="s" />
-        Filters
+    <Button
+        ariaLabel="Filters"
+        secondary
+        icon
+        badge={$parsedTags?.length ? `${$parsedTags.length}` : undefined}>
+        <Icon icon={IconFilterLine} size="s" />
     </Button>
     <svelte:fragment slot="menu">
         {#each filterCols.filter((f) => f?.options) as filter (filter.title + filter.id)}
diff --git a/src/lib/layout/responsiveContainerHeader.svelte b/src/lib/layout/responsiveContainerHeader.svelte
index 29eed0f56c..d1f1621bab 100644
--- a/src/lib/layout/responsiveContainerHeader.svelte
+++ b/src/lib/layout/responsiveContainerHeader.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
     import { SearchQuery, ViewSelector } from '$lib/components';
     import { FiltersBottomSheet, ParsedTagList, queryParamToMap } from '$lib/components/filters';
-    import QuickFilters from '$lib/components/filters/quickFilters.svelte';
+
     import Button from '$lib/elements/forms/button.svelte';
     import { View } from '$lib/helpers/load';
     import type { Column } from '$lib/helpers/types';
@@ -101,16 +101,30 @@
                 {/if}
             </Layout.Stack>
         {:else}
-            <Layout.Stack direction="row" justifyContent="space-between">
-                <Layout.Stack direction="row" alignItems="center">
+            <Layout.Stack direction="row" justifyContent="space-between" alignItems="flex-start">
+                <Layout.Stack
+                    direction="row"
+                    alignItems="center"
+                    gap="m"
+                    style={`min-width: 0; flex: 1 1 auto;`}>
                     {#if hasSearch}
                         <SearchQuery placeholder={searchPlaceholder} />
                     {/if}
+                    <!-- Tags with Filters button (rendered inside ParsedTagList) -->
+                    <Layout.Stack
+                        direction="row"
+                        alignItems="center"
+                        gap="s"
+                        wrap="wrap"
+                        style={`min-width: 0;`}>
+                        <ParsedTagList {columns} {analyticsSource} />
+                    </Layout.Stack>
                 </Layout.Stack>
-                <Layout.Stack direction="row" alignItems="center" justifyContent="flex-end">
-                    {#if hasFilters && $columns?.length}
-                        <QuickFilters {columns} {analyticsSource} {filterCols} />
-                    {/if}
+                <Layout.Stack
+                    direction="row"
+                    alignItems="center"
+                    justifyContent="flex-end"
+                    style={`align-self: flex-start; white-space: nowrap;`}>
                     {#if hasDisplaySettings}
                         <ViewSelector ui="new" {view} {columns} {hideView} {hideColumns} />
                     {/if}
@@ -120,7 +134,6 @@
                 </Layout.Stack>
             </Layout.Stack>
         {/if}
-        <ParsedTagList />
     </Layout.Stack>
 </header>
 

From 999f5a0f452ed507b0587a2256bd5c5099e59b55 Mon Sep 17 00:00:00 2001
From: Harsh Mahajan <127186841+HarshMN2345@users.noreply.github.com>
Date: Mon, 12 Jan 2026 14:20:04 +0530
Subject: [PATCH 2/6] fixing filters

---
 src/lib/components/filters/parsedTagList.svelte | 8 ++++----
 src/lib/components/filters/quickFilters.svelte  | 2 +-
 src/lib/layout/responsiveContainerHeader.svelte | 2 +-
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/lib/components/filters/parsedTagList.svelte b/src/lib/components/filters/parsedTagList.svelte
index b451b0a3b4..b48a3078ec 100644
--- a/src/lib/components/filters/parsedTagList.svelte
+++ b/src/lib/components/filters/parsedTagList.svelte
@@ -278,10 +278,6 @@
         {/if}
     {/key}
 
-    {#if filterCols?.length}
-        <QuickFilters {columns} {analyticsSource} {filterCols} />
-    {/if}
-
     {#if $parsedTags?.length}
         <Button
             size="s"
@@ -292,4 +288,8 @@
                 parsedTags.set([]);
             }}>Clear all</Button>
     {/if}
+
+    {#if filterCols?.length}
+        <QuickFilters {columns} {analyticsSource} {filterCols} />
+    {/if}
 </Layout.Stack>
diff --git a/src/lib/components/filters/quickFilters.svelte b/src/lib/components/filters/quickFilters.svelte
index 2e3bb47ef3..233fa7358b 100644
--- a/src/lib/components/filters/quickFilters.svelte
+++ b/src/lib/components/filters/quickFilters.svelte
@@ -24,7 +24,7 @@
 <Menu>
     <Button
         ariaLabel="Filters"
-        secondary
+        text
         icon
         badge={$parsedTags?.length ? `${$parsedTags.length}` : undefined}>
         <Icon icon={IconFilterLine} size="s" />
diff --git a/src/lib/layout/responsiveContainerHeader.svelte b/src/lib/layout/responsiveContainerHeader.svelte
index d1f1621bab..b3d99633f8 100644
--- a/src/lib/layout/responsiveContainerHeader.svelte
+++ b/src/lib/layout/responsiveContainerHeader.svelte
@@ -173,7 +173,7 @@
 {/snippet}
 
 {#snippet filtersButton(icon = false)}
-    <Button ariaLabel="Filters" on:click={() => (showFilters = !showFilters)} secondary {icon}>
+    <Button ariaLabel="Filters" on:click={() => (showFilters = !showFilters)} text {icon}>
         <Icon icon={IconFilterLine} />
     </Button>
 {/snippet}

From 26e1b61ce91e4dc4c541ee2b7aca21c724a78fe0 Mon Sep 17 00:00:00 2001
From: Harsh Mahajan <127186841+HarshMN2345@users.noreply.github.com>
Date: Mon, 12 Jan 2026 14:36:54 +0530
Subject: [PATCH 3/6] mobile fix

---
 src/lib/layout/responsiveContainerHeader.svelte | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/lib/layout/responsiveContainerHeader.svelte b/src/lib/layout/responsiveContainerHeader.svelte
index b3d99633f8..ebf390cce1 100644
--- a/src/lib/layout/responsiveContainerHeader.svelte
+++ b/src/lib/layout/responsiveContainerHeader.svelte
@@ -99,6 +99,9 @@
                 {#if showSearch && hasSearch}
                     <SearchQuery placeholder={searchPlaceholder} />
                 {/if}
+                <div style="overflow-x: auto;">
+                    <ParsedTagList {columns} {analyticsSource} />
+                </div>
             </Layout.Stack>
         {:else}
             <Layout.Stack direction="row" justifyContent="space-between" alignItems="flex-start">

From 3c079b12b73c2c7eaf92c5cc860a597c7f02b306 Mon Sep 17 00:00:00 2001
From: Harsh Mahajan <127186841+HarshMN2345@users.noreply.github.com>
Date: Wed, 21 Jan 2026 11:59:30 +0530
Subject: [PATCH 4/6] fixed parsing

---
 .../components/filters/parsedTagList.svelte   | 62 ++++---------------
 1 file changed, 13 insertions(+), 49 deletions(-)

diff --git a/src/lib/components/filters/parsedTagList.svelte b/src/lib/components/filters/parsedTagList.svelte
index b48a3078ec..126c4805b0 100644
--- a/src/lib/components/filters/parsedTagList.svelte
+++ b/src/lib/components/filters/parsedTagList.svelte
@@ -26,57 +26,21 @@
     }: { columns: Writable<Column[]> | undefined; analyticsSource?: string } = $props();
 
     function parseTagParts(tagString: string): { text: string; operator: boolean }[] {
-        const parts: { text: string; operator: boolean }[] = [];
-        const regex = /\*\*(.*?)\*\*/g;
-        let match;
-        let lastIndex = 0;
-        const matches: Array<{ text: string; index: number; endIndex: number }> = [];
-
-        // find all bold matches
-        while ((match = regex.exec(tagString)) !== null) {
-            matches.push({
-                text: match[1],
-                index: match.index,
-                endIndex: regex.lastIndex
-            });
-        }
-
-        // Build parts array
-        for (let i = 0; i < matches.length; i++) {
-            const currentMatch = matches[i];
-
-            // Add text before this match (operators, etc.)
-            if (lastIndex < currentMatch.index) {
-                const beforeText = tagString.substring(lastIndex, currentMatch.index).trim();
-                if (beforeText) {
-                    parts.push(
-                        ...beforeText
-                            .split(/\s+/)
-                            .filter(Boolean)
-                            .map((t) => ({ text: t, operator: true }))
-                    );
-                }
-            }
-
-            // Add the bold text itself
-            parts.push({ text: currentMatch.text, operator: false });
-            lastIndex = currentMatch.endIndex;
-        }
-
-        // Add any remaining text after last match
-        if (lastIndex < tagString.length) {
-            const remaining = tagString.substring(lastIndex).trim();
-            if (remaining) {
-                parts.push(
-                    ...remaining
+        return tagString
+            .split(/\*\*(.*?)\*\*/)
+            .map((part, index) => {
+                // Even indices are outside bold (operators), odd indices are inside bold (values)
+                if (index % 2 === 0) {
+                    return part
                         .split(/\s+/)
                         .filter(Boolean)
-                        .map((t) => ({ text: t, operator: true }))
-                );
-            }
-        }
-
-        return parts.filter((p) => Boolean(p.text));
+                        .map((t) => ({ text: t, operator: true }));
+                } else {
+                    return [{ text: part, operator: false }];
+                }
+            })
+            .flat()
+            .filter((p) => Boolean(p.text));
     }
 
     function firstBoldText(tagString: string): string | null {

From 1b2ab15d220a0d58b0af1eb010dd53ee3330e091 Mon Sep 17 00:00:00 2001
From: Harsh Mahajan <127186841+HarshMN2345@users.noreply.github.com>
Date: Wed, 21 Jan 2026 12:58:39 +0530
Subject: [PATCH 5/6] some small improvements

---
 src/lib/components/filters/parsedTagList.svelte | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/lib/components/filters/parsedTagList.svelte b/src/lib/components/filters/parsedTagList.svelte
index 126c4805b0..adc16971a3 100644
--- a/src/lib/components/filters/parsedTagList.svelte
+++ b/src/lib/components/filters/parsedTagList.svelte
@@ -104,7 +104,13 @@
                                             <Typography.Text color="--fgcolor-neutral-secondary"
                                                 >{part.text}</Typography.Text>
                                         {:else}
-                                            {capitalize(part.text)}
+                                            <Typography.Text
+                                                variant="m-500"
+                                                color="--fgcolor-neutral-secondary"
+                                                >{part.text
+                                                    .split(' or ')
+                                                    .map((t) => capitalize(t))
+                                                    .join(' or ')}</Typography.Text>
                                         {/if}
                                     </span>
                                     <svelte:fragment slot="menu">

From 9189303c8c44231364f7ddd81781c73fb55d73b3 Mon Sep 17 00:00:00 2001
From: Harsh Mahajan <127186841+HarshMN2345@users.noreply.github.com>
Date: Fri, 23 Jan 2026 18:59:09 +0530
Subject: [PATCH 6/6] boiler commit

---
 src/lib/components/filters/parsedTagList.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/components/filters/parsedTagList.svelte b/src/lib/components/filters/parsedTagList.svelte
index adc16971a3..0e9c925cdf 100644
--- a/src/lib/components/filters/parsedTagList.svelte
+++ b/src/lib/components/filters/parsedTagList.svelte
@@ -65,7 +65,7 @@
             : []
     );
 
-    // QuickFilters uses the same filter list
+    // QuickFilters uses the same filters list
     let filterCols = $derived(availableFilters);
 
     // Always-show placeholders are derived from available filters (no hardcoding)