@lobb-js/studio 0.39.0 → 0.40.0

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

@@ -1,21 +1,27 @@
 <script lang="ts">
-    // Airtable-style flat filter editor.
+    // Airtable-style filter editor.
     //
-    // Conditions are an internal list of {field, operator, value} triples
-    // joined by AND. They serialise to the backend's Mongo-style filter
-    // shape:
-    //   [{ name, $icontains, "abc" }, { age, $gte, 18 }]
-    //     →  { name: {$icontains: "abc"}, age: {$gte: 18} }
-    // and parse back on init so an existing filter object can be edited.
+    // Internal tree:
+    //   topConjunction  : "$and" | "$or" — joins top-level items
+    //   topChildren     : (Rule | Group)[]   — mixed rules and groups
     //
-    // Any sub-shape we can't model as a flat condition (nested $and / $or
-    // groups left over from the previous tree editor) is preserved
-    // verbatim under a `__unmanaged` carrier so we don't silently destroy
-    // the user's existing filter. A small banner surfaces that case.
+    //   Rule  = { kind: "rule",  id, field, operator, value }
+    //   Group = { kind: "group", id, conjunction: "$and" | "$or", children: Rule[] }
+    //
+    // Nesting is capped at one level (groups hold rules, not other groups)
+    // because the Airtable-style UI gets unreadable deeper than that and
+    // ~all real-world filters fit. The output filter object still uses
+    // the unrestricted Mongo-style $and / $or arrays, so the backend
+    // contract is unchanged.
+    //
+    // Serialisation tries to keep the cheapest legal shape:
+    //   • top-level AND of simple rules with no field-key collisions →
+    //     flat object: { field1: {...}, field2: {...} }
+    //   • anything else → explicit $and/$or arrays.
 
     import * as Select from "../ui/select/index.js";
     import Button from "../ui/button/button.svelte";
-    import { Plus, X, AlertCircle } from "lucide-svelte";
+    import { Plus, X, Boxes, Settings2 } from "lucide-svelte";
     import { getStudioContext } from "../../context";
     import { getFieldIcon } from "./utils";
     import { getFieldRelationTarget } from "../../relations";
@@ -25,28 +31,42 @@
     interface Props {
         filter: Record<string, any>;
         collectionName: string;
+        // Bindable signal back to the parent so it can shrink the
+        // popover when no rules are applied — the empty state looks
+        // hollow at full width.
+        isEmpty?: boolean;
     }
 
-    let { filter = $bindable({}), collectionName }: Props = $props();
+    let {
+        filter = $bindable({}),
+        collectionName,
+        isEmpty = $bindable(true),
+    }: Props = $props();
 
     type OperatorDef = {
         value: string;
         label: string;
-        // single: one input. range: two inputs. list: comma-separated. none: no input (reserved).
         valueType: "single" | "range" | "list" | "none";
     };
 
-    type Condition = {
+    type Rule = {
+        kind: "rule";
         id: string;
         field: string;
         operator: string;
         value: any;
     };
 
+    type Group = {
+        kind: "group";
+        id: string;
+        conjunction: "$and" | "$or";
+        children: Rule[];
+    };
+
+    type Item = Rule | Group;
+
     // ── Operator catalogues ─────────────────────────────────────────────
-    // Curated per category. We don't expose every operator the backend
-    // accepts (regex, instarts_with, etc.) — Airtable's strength is the
-    // restraint here.
     const STRING_OPS: OperatorDef[] = [
         { value: "$icontains",   label: "contains",         valueType: "single" },
         { value: "$incontains",  label: "does not contain", valueType: "single" },
@@ -120,9 +140,6 @@
         return (field?.enum ?? []).map((e: any) => String(e.value ?? e));
     }
 
-    // ── Field listing ──────────────────────────────────────────────────
-    // Every schema field becomes a candidate. Hidden / id is allowed —
-    // an Airtable-style filter on id is sometimes useful.
     const allFieldNames = Object.keys(ctx.meta.collections[collectionName].fields);
 
     function nextId() {
@@ -135,95 +152,109 @@
         return "";
     }
 
-    // ── Initial parse: filter → conditions ─────────────────────────────
-    // Walk the top-level entries. A field key whose value is a plain
-    // operator object becomes one or more conditions (one per operator).
-    // Anything else ($and / $or / nested groups / fields with primitive
-    // values) is stashed into `unmanaged` so we don't destroy it.
-    type ParseResult = { conditions: Condition[]; unmanaged: Record<string, any> };
-
-    function isOperatorObject(value: any): boolean {
-        if (value == null || typeof value !== "object" || Array.isArray(value)) return false;
-        const keys = Object.keys(value);
-        return keys.length > 0 && keys.every((k) => k.startsWith("$"));
+    function makeRule(field: string): Rule {
+        const op = getOperatorsForField(field)[0];
+        return { kind: "rule", id: nextId(), field, operator: op.value, value: defaultValueFor(op) };
     }
 
-    function parseFilter(f: Record<string, any>): ParseResult {
-        const conditions: Condition[] = [];
-        const unmanaged: Record<string, any> = {};
-        for (const [key, value] of Object.entries(f ?? {})) {
-            if (key.startsWith("$")) {
-                // top-level $and / $or — leave alone
-                unmanaged[key] = value;
-                continue;
-            }
-            if (!allFieldNames.includes(key)) {
-                unmanaged[key] = value;
-                continue;
-            }
-            if (!isOperatorObject(value)) {
-                // bare primitive value → treat as $eq for round-tripping
-                conditions.push({
-                    id: nextId(),
-                    field: key,
-                    operator: "$eq",
-                    value: value,
-                });
-                continue;
-            }
-            for (const [op, opVal] of Object.entries(value as Record<string, any>)) {
-                conditions.push({
+    function makeGroup(): Group {
+        return {
+            kind: "group",
+            id: nextId(),
+            conjunction: "$and",
+            children: allFieldNames.length ? [makeRule(allFieldNames[0])] : [],
+        };
+    }
+
+    // ── Parsing: filter object → tree ──────────────────────────────────
+    function parseRulesForField(field: string, value: any): Rule[] {
+        if (value == null) return [];
+        if (typeof value !== "object" || Array.isArray(value)) {
+            return [{ kind: "rule", id: nextId(), field, operator: "$eq", value }];
+        }
+        return Object.entries(value).map(([op, opVal]) => ({
+            kind: "rule" as const,
+            id: nextId(),
+            field,
+            operator: op,
+            value: opVal,
+        }));
+    }
+
+    // Parse a single sub-object that lives inside a $and / $or array:
+    // it may itself be a rule (field-keyed) or a nested group.
+    function parseSubObject(sub: any): Item[] {
+        const items: Item[] = [];
+        for (const [key, value] of Object.entries(sub ?? {})) {
+            if (key === "$and" || key === "$or") {
+                items.push({
+                    kind: "group",
                     id: nextId(),
-                    field: key,
-                    operator: op,
-                    value: opVal,
+                    conjunction: key,
+                    // Only keep rules inside a group (one-level cap). A
+                    // nested-nested group would be a flattening — its
+                    // children get spliced in instead.
+                    children: (Array.isArray(value) ? value : []).flatMap((c: any) =>
+                        parseSubObject(c).flatMap((it) =>
+                            it.kind === "rule" ? [it] : it.children,
+                        ),
+                    ),
                 });
+            } else if (allFieldNames.includes(key)) {
+                items.push(...parseRulesForField(key, value));
             }
+            // unknown keys are silently dropped; the tree round-trips
+            // through the editor and re-emits a clean filter.
         }
-        return { conditions, unmanaged };
+        return items;
     }
 
-    const initial = parseFilter(filter);
-    let conditions = $state<Condition[]>(initial.conditions);
-    let unmanaged = $state<Record<string, any>>(initial.unmanaged);
-
-    // ── Sync: conditions → filter ──────────────────────────────────────
-    // Re-emit the filter prop with a fresh object identity so the
-    // dataTable header's watcher picks it up (same lesson as sort.svelte).
-    function commit() {
-        const next: Record<string, any> = { ...unmanaged };
-        for (const c of conditions) {
-            if (!c.field || !c.operator) continue;
-            // Skip conditions whose value isn't usable yet so the table
-            // doesn't refetch with a half-typed filter.
-            if (!isValueReady(c)) continue;
-            const existing = next[c.field];
-            if (existing && typeof existing === "object" && !Array.isArray(existing)) {
-                next[c.field] = { ...existing, [c.operator]: serialiseValue(c) };
-            } else {
-                next[c.field] = { [c.operator]: serialiseValue(c) };
+    function parseFilter(f: Record<string, any>): {
+        topConjunction: "$and" | "$or";
+        topChildren: Item[];
+    } {
+        const entries = Object.entries(f ?? {});
+        // {$or: [...]} only → top is OR; everything else flows through as AND.
+        if (entries.length === 1) {
+            const [k, v] = entries[0];
+            if ((k === "$or" || k === "$and") && Array.isArray(v)) {
+                return {
+                    topConjunction: k,
+                    topChildren: v.flatMap((sub) => parseSubObject(sub)),
+                };
             }
         }
-        filter = next;
+        // Mixed top: every entry becomes a top-level item, joined by AND.
+        return { topConjunction: "$and", topChildren: parseSubObject(f) };
     }
 
-    function isValueReady(c: Condition): boolean {
-        const op = getOperatorsForField(c.field).find((o) => o.value === c.operator);
+    const initial = parseFilter(filter);
+    let topConjunction = $state<"$and" | "$or">(initial.topConjunction);
+    let topChildren = $state<Item[]>(initial.topChildren);
+
+    // Keep the parent in sync so it can size the popover accordingly.
+    $effect(() => {
+        isEmpty = topChildren.length === 0;
+    });
+
+    // ── Serialisation: tree → filter object ────────────────────────────
+    function isRuleReady(r: Rule): boolean {
+        const op = getOperatorsForField(r.field).find((o) => o.value === r.operator);
         if (!op) return false;
         if (op.valueType === "range") {
-            const v = Array.isArray(c.value) ? c.value : ["", ""];
+            const v = Array.isArray(r.value) ? r.value : ["", ""];
             return v[0] !== "" && v[0] != null && v[1] !== "" && v[1] != null;
         }
         if (op.valueType === "list") {
-            return Array.isArray(c.value) && c.value.length > 0;
+            return Array.isArray(r.value) && r.value.length > 0;
         }
-        if (getFieldKind(c.field) === "bool") return typeof c.value === "boolean";
-        return c.value !== "" && c.value != null;
+        if (getFieldKind(r.field) === "bool") return typeof r.value === "boolean";
+        return r.value !== "" && r.value != null;
     }
 
-    function serialiseValue(c: Condition): any {
-        const kind = getFieldKind(c.field);
-        const op = getOperatorsForField(c.field).find((o) => o.value === c.operator);
+    function serialiseValue(r: Rule): any {
+        const kind = getFieldKind(r.field);
+        const op = getOperatorsForField(r.field).find((o) => o.value === r.operator);
         const coerce = (v: any) => {
             if (kind === "number" || kind === "fk") {
                 const n = typeof v === "number" ? v : parseFloat(v);
@@ -233,269 +264,412 @@
             return v;
         };
         if (op?.valueType === "range") {
-            const [a, b] = Array.isArray(c.value) ? c.value : ["", ""];
+            const [a, b] = Array.isArray(r.value) ? r.value : ["", ""];
             return [coerce(a), coerce(b)];
         }
         if (op?.valueType === "list") {
-            return (Array.isArray(c.value) ? c.value : []).map(coerce);
+            return (Array.isArray(r.value) ? r.value : []).map(coerce);
+        }
+        return coerce(r.value);
+    }
+
+    function serialiseRule(r: Rule): Record<string, any> {
+        return { [r.field]: { [r.operator]: serialiseValue(r) } };
+    }
+
+    function serialiseGroup(g: Group): Record<string, any> | null {
+        const ready = g.children.filter(isRuleReady);
+        if (!ready.length) return null;
+        if (g.conjunction === "$or") {
+            return { $or: ready.map(serialiseRule) };
+        }
+        // AND group: try the flat shape, fall back to $and on collision.
+        return tryFlattenAnd(ready.map(serialiseRule)) ?? {
+            $and: ready.map(serialiseRule),
+        };
+    }
+
+    // Merge a list of `{field: {...}}` objects into a single flat object,
+    // collapsing different operators on the same field into one operator
+    // object. Returns null if any single field has the same operator
+    // twice (an unresolvable collision — caller falls back to $and).
+    function tryFlattenAnd(parts: Record<string, any>[]): Record<string, any> | null {
+        const out: Record<string, any> = {};
+        for (const part of parts) {
+            for (const [field, opsObj] of Object.entries(part)) {
+                if (field.startsWith("$")) return null; // groups can't be flattened
+                if (!(field in out)) {
+                    out[field] = { ...(opsObj as Record<string, any>) };
+                    continue;
+                }
+                const existing = out[field];
+                if (!existing || typeof existing !== "object") return null;
+                for (const [op, val] of Object.entries(opsObj as Record<string, any>)) {
+                    if (op in existing) return null;
+                    existing[op] = val;
+                }
+            }
+        }
+        return out;
+    }
+
+    function commit() {
+        // Serialise each top-level item; drop empties.
+        const parts: Record<string, any>[] = [];
+        for (const item of topChildren) {
+            if (item.kind === "rule") {
+                if (isRuleReady(item)) parts.push(serialiseRule(item));
+            } else {
+                const g = serialiseGroup(item);
+                if (g) parts.push(g);
+            }
+        }
+        if (!parts.length) {
+            filter = {};
+            return;
+        }
+        if (topConjunction === "$or") {
+            filter = { $or: parts };
+            return;
         }
-        return coerce(c.value);
+        // Top is AND: prefer flat shape, fall back to $and array.
+        filter = tryFlattenAnd(parts) ?? { $and: parts };
     }
 
     // ── Mutators ───────────────────────────────────────────────────────
-    function addCondition() {
-        const firstField = allFieldNames[0];
-        if (!firstField) return;
-        const firstOp = getOperatorsForField(firstField)[0];
-        conditions = [
-            ...conditions,
-            {
-                id: nextId(),
-                field: firstField,
-                operator: firstOp.value,
-                value: defaultValueFor(firstOp),
-            },
-        ];
-        // Don't commit yet — user hasn't entered a value.
+    function addTopRule() {
+        const f = allFieldNames[0];
+        if (!f) return;
+        topChildren = [...topChildren, makeRule(f)];
     }
 
-    function removeCondition(id: string) {
-        conditions = conditions.filter((c) => c.id !== id);
+    function addTopGroup() {
+        if (!allFieldNames.length) return;
+        topChildren = [...topChildren, makeGroup()];
         commit();
     }
 
-    function setField(id: string, newField: string) {
-        conditions = conditions.map((c) => {
-            if (c.id !== id) return c;
-            // Reset operator + value if the new field uses a different
-            // operator set so we never end up with e.g. $contains on a
-            // number field.
-            const ops = getOperatorsForField(newField);
-            const stillValid = ops.find((o) => o.value === c.operator);
-            const newOp = stillValid ?? ops[0];
-            return {
-                ...c,
-                field: newField,
-                operator: newOp.value,
-                value: stillValid ? c.value : defaultValueFor(newOp),
-            };
-        });
+    function removeTopItem(id: string) {
+        topChildren = topChildren.filter((it) => it.id !== id);
         commit();
     }
 
-    function setOperator(id: string, newOpValue: string) {
-        conditions = conditions.map((c) => {
-            if (c.id !== id) return c;
-            const op = getOperatorsForField(c.field).find((o) => o.value === newOpValue);
-            if (!op) return c;
-            // Preserve value when the shape doesn't change; reset otherwise.
-            const prevOp = getOperatorsForField(c.field).find((o) => o.value === c.operator);
-            const sameShape = prevOp?.valueType === op.valueType;
-            return {
-                ...c,
-                operator: newOpValue,
-                value: sameShape ? c.value : defaultValueFor(op),
-            };
-        });
+    function addGroupRule(groupId: string) {
+        const f = allFieldNames[0];
+        if (!f) return;
+        topChildren = topChildren.map((it) =>
+            it.kind === "group" && it.id === groupId
+                ? { ...it, children: [...it.children, makeRule(f)] }
+                : it,
+        );
+    }
+
+    function removeGroupRule(groupId: string, ruleId: string) {
+        topChildren = topChildren.map((it) =>
+            it.kind === "group" && it.id === groupId
+                ? { ...it, children: it.children.filter((r) => r.id !== ruleId) }
+                : it,
+        );
         commit();
     }
 
-    function setValue(id: string, newValue: any) {
-        conditions = conditions.map((c) => (c.id === id ? { ...c, value: newValue } : c));
+    function setTopConjunction(c: "$and" | "$or") {
+        topConjunction = c;
         commit();
     }
 
-    function setRangeValue(id: string, index: 0 | 1, newValue: any) {
-        conditions = conditions.map((c) => {
-            if (c.id !== id) return c;
-            const arr = Array.isArray(c.value) ? [...c.value] : ["", ""];
-            arr[index] = newValue;
-            return { ...c, value: arr };
-        });
+    function setGroupConjunction(groupId: string, c: "$and" | "$or") {
+        topChildren = topChildren.map((it) =>
+            it.kind === "group" && it.id === groupId ? { ...it, conjunction: c } : it,
+        );
         commit();
     }
 
-    function setListValue(id: string, raw: string) {
-        // Comma-separated input → array of trimmed strings. Empty items
-        // dropped so trailing commas don't produce empty list entries.
-        const arr = raw
-            .split(",")
-            .map((s) => s.trim())
-            .filter((s) => s.length > 0);
-        setValue(id, arr);
+    function patchRuleInPlace(ruleId: string, patch: Partial<Rule>) {
+        const apply = (r: Rule): Rule => {
+            if (r.id !== ruleId) return r;
+            const next = { ...r, ...patch };
+            // If field changed, re-pick operator + reset value when the
+            // type's operator set no longer contains the previous one.
+            if (patch.field && patch.field !== r.field) {
+                const ops = getOperatorsForField(next.field);
+                const keep = ops.find((o) => o.value === next.operator);
+                const newOp = keep ?? ops[0];
+                next.operator = newOp.value;
+                next.value = keep ? next.value : defaultValueFor(newOp);
+            }
+            // If operator changed, reset value when the value shape
+            // (single vs range vs list) doesn't match.
+            if (patch.operator && patch.operator !== r.operator) {
+                const prev = getOperatorsForField(r.field).find((o) => o.value === r.operator);
+                const op   = getOperatorsForField(next.field).find((o) => o.value === next.operator);
+                if (prev?.valueType !== op?.valueType) {
+                    next.value = op ? defaultValueFor(op) : "";
+                }
+            }
+            return next;
+        };
+        topChildren = topChildren.map((it) => {
+            if (it.kind === "rule") return apply(it);
+            return { ...it, children: it.children.map(apply) };
+        });
+        commit();
     }
 
-    function clearUnmanaged() {
-        unmanaged = {};
+    function setRangeValue(ruleId: string, index: 0 | 1, newValue: any) {
+        const apply = (r: Rule): Rule => {
+            if (r.id !== ruleId) return r;
+            const arr = Array.isArray(r.value) ? [...r.value] : ["", ""];
+            arr[index] = newValue;
+            return { ...r, value: arr };
+        };
+        topChildren = topChildren.map((it) => {
+            if (it.kind === "rule") return apply(it);
+            return { ...it, children: it.children.map(apply) };
+        });
         commit();
     }
 
+    function setListValue(ruleId: string, raw: string) {
+        const arr = raw.split(",").map((s) => s.trim()).filter((s) => s.length > 0);
+        patchRuleInPlace(ruleId, { value: arr });
+    }
+
     // ── Display helpers ────────────────────────────────────────────────
-    const hasUnmanaged = $derived(Object.keys(unmanaged).length > 0);
+    // The conjunction "word" shown before each rule from row 2 onwards.
+    function conjLabel(c: "$and" | "$or") {
+        return c === "$and" ? "and" : "or";
+    }
 </script>
 
-<div class="flex flex-col p-3">
-    {#if hasUnmanaged}
-        <!-- Existing filter contained shapes we can't surface as flat
-             conditions (nested $and / $or from the legacy editor). It
-             still ships with the request, but we let the user wipe it
-             so they can rebuild from scratch in this UI. -->
-        <div class="mb-2 flex items-start gap-2 rounded-md border border-dashed border-muted-foreground/40 bg-muted/40 px-3 py-2">
-            <AlertCircle size="14" class="mt-0.5 shrink-0 text-muted-foreground" />
-            <div class="flex-1 text-xs text-muted-foreground">
-                <div>This view has an advanced filter that can't be edited here.</div>
-                <button
-                    type="button"
-                    onclick={clearUnmanaged}
-                    class="mt-1 underline underline-offset-2 hover:text-foreground"
-                >
-                    Clear advanced filter
-                </button>
+{#snippet conjunctionSlot(index: number, conjunction: "$and" | "$or", onChange: (c: "$and" | "$or") => void)}
+    <!-- Row leader: "Where" on the first row, a clickable AND/OR
+         selector on the second row, and a static word matching the
+         selector on row 3+. The selector lives in row 2 only so the
+         user sees the conjunction is shared, not per-row. -->
+    <div class="w-14 shrink-0 text-right text-xs text-muted-foreground">
+        {#if index === 0}
+            Where
+        {:else if index === 1}
+            <Select.Root type="single" value={conjunction} onValueChange={(v) => v && onChange(v as "$and" | "$or")}>
+                <Select.Trigger class="h-7 w-14 bg-muted text-xs">
+                    {conjLabel(conjunction)}
+                </Select.Trigger>
+                <Select.Content>
+                    <Select.Item value="$and">and</Select.Item>
+                    <Select.Item value="$or">or</Select.Item>
+                </Select.Content>
+            </Select.Root>
+        {:else}
+            {conjLabel(conjunction)}
+        {/if}
+    </div>
+{/snippet}
+
+{#snippet ruleRow(rule: Rule, onRemove: () => void)}
+    {@const ops = getOperatorsForField(rule.field)}
+    {@const currentOp = ops.find((o) => o.value === rule.operator) ?? ops[0]}
+    {@const kind = getFieldKind(rule.field)}
+    {@const FieldIcon = getFieldIcon(ctx, rule.field, collectionName)}
+    <!-- Field picker -->
+    <Select.Root
+        type="single"
+        value={rule.field}
+        onValueChange={(v) => v && patchRuleInPlace(rule.id, { field: v })}
+    >
+        <Select.Trigger class="bg-muted h-7 w-36 text-xs">
+            <div class="inline-flex items-center gap-1.5">
+                <FieldIcon size="13" />
+                {rule.field}
+            </div>
+        </Select.Trigger>
+        <Select.Content>
+            {#each allFieldNames as fname}
+                {@const OptionIcon = getFieldIcon(ctx, fname, collectionName)}
+                <Select.Item value={fname}>
+                    <div class="inline-flex items-center gap-1.5">
+                        <OptionIcon size="13" />
+                        {fname}
+                    </div>
+                </Select.Item>
+            {/each}
+        </Select.Content>
+    </Select.Root>
+
+    <!-- Operator picker -->
+    <Select.Root
+        type="single"
+        value={rule.operator}
+        onValueChange={(v) => v && patchRuleInPlace(rule.id, { operator: v })}
+    >
+        <Select.Trigger class="bg-muted h-7 w-32 text-xs">
+            {currentOp.label}
+        </Select.Trigger>
+        <Select.Content>
+            {#each ops as op}
+                <Select.Item value={op.value}>{op.label}</Select.Item>
+            {/each}
+        </Select.Content>
+    </Select.Root>
+
+    <!-- Value input — type-aware -->
+    <div class="flex flex-1 items-center gap-1.5">
+        {#if currentOp.valueType === "range"}
+            {@const range = Array.isArray(rule.value) ? rule.value : ["", ""]}
+            <input
+                class="h-7 w-full rounded-md border bg-muted px-2 text-xs focus:outline-none focus:ring-1 focus:ring-ring"
+                type={kind === "date" ? "date" : "number"}
+                value={range[0] ?? ""}
+                oninput={(e) => setRangeValue(rule.id, 0, (e.currentTarget as HTMLInputElement).value)}
+            />
+            <span class="text-muted-foreground">–</span>
+            <input
+                class="h-7 w-full rounded-md border bg-muted px-2 text-xs focus:outline-none focus:ring-1 focus:ring-ring"
+                type={kind === "date" ? "date" : "number"}
+                value={range[1] ?? ""}
+                oninput={(e) => setRangeValue(rule.id, 1, (e.currentTarget as HTMLInputElement).value)}
+            />
+        {:else if currentOp.valueType === "list"}
+            <input
+                class="h-7 w-full rounded-md border bg-muted px-2 text-xs focus:outline-none focus:ring-1 focus:ring-ring"
+                type="text"
+                placeholder="Comma separated"
+                value={(Array.isArray(rule.value) ? rule.value : []).join(", ")}
+                oninput={(e) => setListValue(rule.id, (e.currentTarget as HTMLInputElement).value)}
+            />
+        {:else if kind === "bool"}
+            <Select.Root
+                type="single"
+                value={rule.value === true ? "true" : rule.value === false ? "false" : ""}
+                onValueChange={(v) => v && patchRuleInPlace(rule.id, { value: v === "true" })}
+            >
+                <Select.Trigger class="bg-muted h-7 w-full text-xs">
+                    {rule.value === true ? "true" : rule.value === false ? "false" : "—"}
+                </Select.Trigger>
+                <Select.Content>
+                    <Select.Item value="true">true</Select.Item>
+                    <Select.Item value="false">false</Select.Item>
+                </Select.Content>
+            </Select.Root>
+        {:else if kind === "enum"}
+            <Select.Root
+                type="single"
+                value={rule.value == null ? "" : String(rule.value)}
+                onValueChange={(v) => v && patchRuleInPlace(rule.id, { value: v })}
+            >
+                <Select.Trigger class="bg-muted h-7 w-full text-xs">
+                    {rule.value == null || rule.value === "" ? "—" : String(rule.value)}
+                </Select.Trigger>
+                <Select.Content>
+                    {#each getEnumValues(rule.field) as ev}
+                        <Select.Item value={ev}>{ev}</Select.Item>
+                    {/each}
+                </Select.Content>
+            </Select.Root>
+        {:else}
+            <input
+                class="h-7 w-full rounded-md border bg-muted px-2 text-xs focus:outline-none focus:ring-1 focus:ring-ring"
+                type={kind === "date" ? "date" : kind === "number" || kind === "fk" ? "number" : "text"}
+                value={rule.value ?? ""}
+                oninput={(e) => patchRuleInPlace(rule.id, { value: (e.currentTarget as HTMLInputElement).value })}
+            />
+        {/if}
+    </div>
+
+    <Button
+        onclick={onRemove}
+        class="h-7 w-7 text-muted-foreground hover:bg-transparent"
+        variant="ghost"
+        size="icon"
+        Icon={X}
+    ></Button>
+{/snippet}
+
+<div class="flex flex-col gap-2 p-3">
+    {#if topChildren.length === 0}
+        <!-- Empty state: centred icon + two-line message so the popover
+             doesn't feel hollow. Width stays consistent with the loaded
+             state so adding the first rule doesn't snap the popover. -->
+        <div class="flex flex-col items-center justify-center gap-2 py-8 text-center">
+            <Settings2 size="20" class="text-muted-foreground/60" />
+            <div class="flex flex-col gap-0.5">
+                <div class="text-xs text-foreground">No filter rules are applied</div>
+                <div class="text-xs text-muted-foreground">Add a rule below to filter the view</div>
             </div>
-        </div>
-    {/if}
-
-    {#if conditions.length === 0}
-        <div class="px-1 py-2 text-xs text-muted-foreground">
-            No filter conditions are applied
         </div>
     {:else}
         <div class="flex flex-col gap-1.5">
-            {#each conditions as cond, index (cond.id)}
-                {@const ops = getOperatorsForField(cond.field)}
-                {@const currentOp = ops.find((o) => o.value === cond.operator) ?? ops[0]}
-                {@const kind = getFieldKind(cond.field)}
-                {@const FieldIcon = getFieldIcon(ctx, cond.field, collectionName)}
-                <div class="flex items-center gap-1.5 text-xs">
-                    <!-- Conjunction label: first row reads "Where", the rest
-                         "and" so the row reads as a sentence. -->
-                    <div class="w-10 shrink-0 text-right text-muted-foreground">
-                        {index === 0 ? "Where" : "and"}
+            {#each topChildren as item, index (item.id)}
+                {#if item.kind === "rule"}
+                    <div class="flex items-center gap-1.5">
+                        {@render conjunctionSlot(index, topConjunction, setTopConjunction)}
+                        {@render ruleRow(item, () => removeTopItem(item.id))}
                     </div>
-
-                    <!-- Field picker -->
-                    <Select.Root
-                        type="single"
-                        value={cond.field}
-                        onValueChange={(v) => v && setField(cond.id, v)}
-                    >
-                        <Select.Trigger class="bg-muted h-7 w-36 text-xs">
-                            <div class="inline-flex items-center gap-1.5">
-                                <FieldIcon size="13" />
-                                {cond.field}
+                {:else}
+                    <!-- Group container: bordered card with its own
+                         conjunction toggle and its own +Add filter rule
+                         button. Capped at one level — no nested groups. -->
+                    <div class="flex items-start gap-1.5">
+                        {@render conjunctionSlot(index, topConjunction, setTopConjunction)}
+                        <div class="flex-1 rounded-md border bg-muted/30 p-2">
+                            <div class="mb-2 flex items-center justify-between">
+                                <div class="flex items-center gap-1.5 text-xs text-muted-foreground">
+                                    <Boxes size="13" />
+                                    <span>Group</span>
+                                </div>
+                                <Button
+                                    onclick={() => removeTopItem(item.id)}
+                                    class="h-6 w-6 text-muted-foreground hover:bg-transparent"
+                                    variant="ghost"
+                                    size="icon"
+                                    Icon={X}
+                                ></Button>
                             </div>
-                        </Select.Trigger>
-                        <Select.Content>
-                            {#each allFieldNames as fname}
-                                {@const OptionIcon = getFieldIcon(ctx, fname, collectionName)}
-                                <Select.Item value={fname}>
-                                    <div class="inline-flex items-center gap-1.5">
-                                        <OptionIcon size="13" />
-                                        {fname}
-                                    </div>
-                                </Select.Item>
-                            {/each}
-                        </Select.Content>
-                    </Select.Root>
-
-                    <!-- Operator picker -->
-                    <Select.Root
-                        type="single"
-                        value={cond.operator}
-                        onValueChange={(v) => v && setOperator(cond.id, v)}
-                    >
-                        <Select.Trigger class="bg-muted h-7 w-32 text-xs">
-                            {currentOp.label}
-                        </Select.Trigger>
-                        <Select.Content>
-                            {#each ops as op}
-                                <Select.Item value={op.value}>{op.label}</Select.Item>
-                            {/each}
-                        </Select.Content>
-                    </Select.Root>
-
-                    <!-- Value input — type-aware -->
-                    <div class="flex flex-1 items-center gap-1.5">
-                        {#if currentOp.valueType === "range"}
-                            {@const range = Array.isArray(cond.value) ? cond.value : ["", ""]}
-                            <input
-                                class="h-7 w-full rounded-md border bg-muted px-2 text-xs focus:outline-none focus:ring-1 focus:ring-ring"
-                                type={kind === "date" ? "date" : "number"}
-                                value={range[0] ?? ""}
-                                oninput={(e) => setRangeValue(cond.id, 0, (e.currentTarget as HTMLInputElement).value)}
-                            />
-                            <span class="text-muted-foreground">–</span>
-                            <input
-                                class="h-7 w-full rounded-md border bg-muted px-2 text-xs focus:outline-none focus:ring-1 focus:ring-ring"
-                                type={kind === "date" ? "date" : "number"}
-                                value={range[1] ?? ""}
-                                oninput={(e) => setRangeValue(cond.id, 1, (e.currentTarget as HTMLInputElement).value)}
-                            />
-                        {:else if currentOp.valueType === "list"}
-                            <input
-                                class="h-7 w-full rounded-md border bg-muted px-2 text-xs focus:outline-none focus:ring-1 focus:ring-ring"
-                                type="text"
-                                placeholder="Comma separated"
-                                value={(Array.isArray(cond.value) ? cond.value : []).join(", ")}
-                                oninput={(e) => setListValue(cond.id, (e.currentTarget as HTMLInputElement).value)}
-                            />
-                        {:else if kind === "bool"}
-                            <Select.Root
-                                type="single"
-                                value={cond.value === true ? "true" : cond.value === false ? "false" : ""}
-                                onValueChange={(v) => v && setValue(cond.id, v === "true")}
-                            >
-                                <Select.Trigger class="bg-muted h-7 w-full text-xs">
-                                    {cond.value === true ? "true" : cond.value === false ? "false" : "—"}
-                                </Select.Trigger>
-                                <Select.Content>
-                                    <Select.Item value="true">true</Select.Item>
-                                    <Select.Item value="false">false</Select.Item>
-                                </Select.Content>
-                            </Select.Root>
-                        {:else if kind === "enum"}
-                            <Select.Root
-                                type="single"
-                                value={cond.value == null ? "" : String(cond.value)}
-                                onValueChange={(v) => v && setValue(cond.id, v)}
-                            >
-                                <Select.Trigger class="bg-muted h-7 w-full text-xs">
-                                    {cond.value == null || cond.value === "" ? "—" : String(cond.value)}
-                                </Select.Trigger>
-                                <Select.Content>
-                                    {#each getEnumValues(cond.field) as ev}
-                                        <Select.Item value={ev}>{ev}</Select.Item>
+                            {#if item.children.length === 0}
+                                <div class="px-1 py-1 text-xs text-muted-foreground">
+                                    Empty group
+                                </div>
+                            {:else}
+                                <div class="flex flex-col gap-1.5">
+                                    {#each item.children as childRule, childIndex (childRule.id)}
+                                        <div class="flex items-center gap-1.5">
+                                            {@render conjunctionSlot(childIndex, item.conjunction, (c) => setGroupConjunction(item.id, c))}
+                                            {@render ruleRow(childRule, () => removeGroupRule(item.id, childRule.id))}
+                                        </div>
                                     {/each}
-                                </Select.Content>
-                            </Select.Root>
-                        {:else}
-                            <input
-                                class="h-7 w-full rounded-md border bg-muted px-2 text-xs focus:outline-none focus:ring-1 focus:ring-ring"
-                                type={kind === "date" ? "date" : kind === "number" || kind === "fk" ? "number" : "text"}
-                                value={cond.value ?? ""}
-                                oninput={(e) => setValue(cond.id, (e.currentTarget as HTMLInputElement).value)}
-                            />
-                        {/if}
+                                </div>
+                            {/if}
+                            <button
+                                type="button"
+                                onclick={() => addGroupRule(item.id)}
+                                class="mt-2 inline-flex w-fit items-center gap-1.5 rounded-md px-2 py-1 text-xs text-muted-foreground hover:text-foreground"
+                            >
+                                <Plus size="14" />
+                                Add filter rule
+                            </button>
+                        </div>
                     </div>
-
-                    <Button
-                        onclick={() => removeCondition(cond.id)}
-                        class="h-7 w-7 text-muted-foreground hover:bg-transparent"
-                        variant="ghost"
-                        size="icon"
-                        Icon={X}
-                    ></Button>
-                </div>
+                {/if}
             {/each}
         </div>
     {/if}
 
-    <button
-        type="button"
-        onclick={addCondition}
-        class="mt-2 inline-flex w-fit items-center gap-1.5 rounded-md px-2 py-1 text-xs text-muted-foreground hover:text-foreground"
-    >
-        <Plus size="14" />
-        Add condition
-    </button>
+    <div class="flex items-center gap-2">
+        <button
+            type="button"
+            onclick={addTopRule}
+            class="inline-flex w-fit items-center gap-1.5 rounded-md px-2 py-1 text-xs text-muted-foreground hover:text-foreground"
+        >
+            <Plus size="14" />
+            Add filter rule
+        </button>
+        <button
+            type="button"
+            onclick={addTopGroup}
+            class="inline-flex w-fit items-center gap-1.5 rounded-md px-2 py-1 text-xs text-muted-foreground hover:text-foreground"
+        >
+            <Plus size="14" />
+            Add filter group
+        </button>
+    </div>
 </div>