@lobb-js/studio 0.38.0 → 0.40.0

package/src/lib/components/dataTable/filterButton.svelte

@@ -15,6 +15,34 @@
 		showText = true,
 		collectionName,
 	}: Props = $props();
+
+	// Tracks whether the filter has any rules applied. Filter pushes
+	// this back up so we can shrink the popover when empty — the
+	// loaded width feels hollow against the empty-state icon.
+	let filterIsEmpty = $state(true);
+
+	// Count rules across the whole filter tree. A single field with two
+	// operators ({age: {$gte, $lte}}) is two rules. Nested $and / $or
+	// arrays (groups) recurse into their children so a group with three
+	// rules contributes three, not one.
+	function countRules(f: any): number {
+		if (f == null || typeof f !== "object") return 0;
+		let n = 0;
+		for (const [key, value] of Object.entries(f)) {
+			if (key === "$and" || key === "$or") {
+				if (Array.isArray(value)) {
+					for (const child of value) n += countRules(child);
+				}
+				continue;
+			}
+			if (value && typeof value === "object" && !Array.isArray(value)) {
+				n += Object.keys(value).length;
+			} else {
+				n += 1;
+			}
+		}
+		return n;
+	}
 </script>
 
 <Popover.Root>
@@ -27,14 +55,21 @@
 	>
 		<Settings2 />
 		{#if showText}
-			{#if Object.keys(filter).length}
-				Filtered by {Object.keys(filter).length} rules
+			{@const n = countRules(filter)}
+			{#if n}
+				Filtered by {n} {n === 1 ? "rule" : "rules"}
 			{:else}
 				Filter
 			{/if}
 		{/if}
 	</Popover.Trigger>
-	<Popover.Content class="w-screen max-w-100 p-0">
-		<Filter bind:filter {collectionName} isFirst={true} />
+	<Popover.Content
+		class="
+			w-screen p-0
+			transition-[max-width] duration-150
+			{filterIsEmpty ? 'max-w-xs' : 'max-w-[36rem]'}
+		"
+	>
+		<Filter bind:filter {collectionName} bind:isEmpty={filterIsEmpty} />
 	</Popover.Content>
 </Popover.Root>

package/src/lib/components/dataTable/header.svelte

@@ -4,7 +4,6 @@
     import type { ParentContext } from "./dataTable.svelte";
     import CanAccess from "../canAccess.svelte";
     import { Download, ListRestart, LoaderCircle, Plus, Trash, Link } from "lucide-svelte";
-    import LlmButton from "../LlmButton.svelte";
     import FilterButton from "./filterButton.svelte";
     import SortButton from "./sortButton.svelte";
     import Button from "../ui/button/button.svelte";
@@ -26,6 +25,7 @@
         onLink?: (record: any) => void;
         onCreate?: (changes: Changes) => void;
         showImport?: boolean;
+        showFilter?: boolean;
         loading?: boolean;
         left?: Snippet<[]>;
     }
@@ -38,6 +38,7 @@
         onLink,
         onCreate,
         showImport = true,
+        showFilter = true,
         loading = false,
         left
     }: Props = $props();
@@ -122,41 +123,18 @@
                 {selectedRecords.length > 1 ? "records" : "record"}
             </Button>
         {:else}
-            <FilterButton
-                bind:filter={params.filter}
-                showText={!headerIsSmall}
-                {collectionName}
-            />
+            {#if showFilter}
+                <FilterButton
+                    bind:filter={params.filter}
+                    showText={!headerIsSmall}
+                    {collectionName}
+                />
+            {/if}
             <SortButton
                 {collectionName}
                 bind:sort={params.sort}
                 showText={!headerIsSmall}
             />
-            <LlmButton
-                variant="outline"
-                title="Filter table with AI"
-                description="Tell the AI how do you want to filter the table"
-                size="sm"
-                format={{
-                    type: "json_object",
-                }}
-                messages={[
-                    {
-                        role: "system",
-                        content: [
-                            "You will receive natural language queries from a user describing how they want to filter a table list view.",
-                            "Your task is to generate a filter object based on the user's prompt.",
-                            `This is the schema of the filter json: ${JSON.stringify(ctx.meta.filter.filter_schema)}`,
-                            `This is the schema of the current collection: ${JSON.stringify(ctx.meta.collections[collectionName])}`,
-                        ].join(" "),
-                    },
-                ]}
-                onApiResponseComplete={async (res) => {
-                    params.filter = JSON.parse(res);
-                }}
-            >
-                {headerIsSmall ? "" : "Filter with AI"}
-            </LlmButton>
         {/if}
     </div>
     <div>

package/src/lib/components/dataTablePopup/dataTablePopup.svelte

@@ -17,6 +17,11 @@
 		title?: string;
 		showHeader?: boolean;
 		showFooter?: boolean;
+		// Popups are usually opened from chart drill-downs with a
+		// preset filter — re-filtering inside the popup almost never
+		// makes sense, so the filter button is hidden by default here.
+		// Pass showFilter={true} to surface it.
+		showFilter?: boolean;
 		tableProps?: Partial<TableProps>;
 		tabs?: CollectionTab[];
 		view?: { id: string; [key: string]: any };
@@ -31,6 +36,7 @@
 		title,
 		showHeader = true,
 		showFooter = true,
+		showFilter = false,
 		tableProps,
 		tabs,
 		view,
@@ -78,6 +84,7 @@
 				{searchParams}
 				{showHeader}
 				{showFooter}
+				{showFilter}
 				{tableProps}
 				{tabs}
 				{view}