@lobb-js/studio 0.39.0 → 0.40.0

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

@@ -16,13 +16,25 @@
 		collectionName,
 	}: Props = $props();
 
-	// Count rules, not top-level fields: a single field with two
-	// operators ({age: {$gte, $lte}}) is two rules, not one. Unmanaged
-	// $and / $or carriers count as one rule each (legacy filter shape).
-	function countRules(f: Record<string, any>): number {
+	// 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.startsWith("$")) { n += 1; continue; }
+		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 {
@@ -51,7 +63,13 @@
 			{/if}
 		{/if}
 	</Popover.Trigger>
-	<Popover.Content class="w-screen max-w-[36rem] p-0">
-		<Filter bind:filter {collectionName} />
+	<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>