lign header, persist placeholders, and move Filters icon into tag row

This commit is contained in:
Harsh Mahajan
2025-11-04 17:13:59 +05:30
parent 02ab882b2f
commit c3e02f9fa3
2 changed files with 14 additions and 7 deletions
@@ -18,8 +18,12 @@
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 }: { columns: Writable<Column[]> | undefined } = $props();
let {
columns,
analyticsSource = ''
}: { columns: Writable<Column[]> | undefined; analyticsSource?: string } = $props();
function parseTagParts(tagString: string): { text: string; operator: boolean }[] {
const parts: { text: string; operator: boolean }[] = [];
@@ -96,6 +100,9 @@
: []
);
// 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([]);
@@ -268,6 +275,10 @@
{/if}
{/key}
{#if filterCols?.length}
<QuickFilters {columns} {analyticsSource} {filterCols} />
{/if}
{#if $parsedTags?.length}
<Button
size="s"
@@ -1,7 +1,6 @@
<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';
@@ -110,17 +109,14 @@
{#if hasSearch}
<SearchQuery placeholder={searchPlaceholder} />
{/if}
<!-- Tags with Filters button immediately to the right -->
<!-- Tags with Filters button (rendered inside ParsedTagList) -->
<Layout.Stack
direction="row"
alignItems="center"
gap="s"
wrap="wrap"
style={`min-width: 0;`}>
<ParsedTagList {columns} />
{#if hasFilters && $columns?.length}
<QuickFilters {columns} {analyticsSource} {filterCols} />
{/if}
<ParsedTagList {columns} {analyticsSource} />
</Layout.Stack>
</Layout.Stack>
<Layout.Stack