@lobb-js/studio 0.38.0 → 0.40.0

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

@@ -1,270 +1,675 @@
 <script lang="ts">
-    import * as Popover from "../ui/popover/index.js";
-    import Filter from "./filter.svelte";
-    import {
-        Plus,
-        Boxes,
-        CircleOff,
-        ListFilter,
-        Diamond,
-        Trash,
-    } from "lucide-svelte";
-    import { buttonVariants } from "../ui/button";
-    import * as _ from "lodash-es";
-    import { getStudioContext } from "../../context";
+    // Airtable-style filter editor.
+    //
+    // Internal tree:
+    //   topConjunction  : "$and" | "$or" — joins top-level items
+    //   topChildren     : (Rule | Group)[]   — mixed rules and groups
+    //
+    //   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, Boxes, Settings2 } from "lucide-svelte";
+    import { getStudioContext } from "../../context";
+    import { getFieldIcon } from "./utils";
+    import { getFieldRelationTarget } from "../../relations";
 
     const { ctx } = getStudioContext();
 
     interface Props {
-        filter: any;
+        filter: Record<string, any>;
         collectionName: string;
-        isFirst?: boolean;
-        deleteFilter?: () => void;
+        // 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,
-        isFirst = false,
-        deleteFilter,
+        isEmpty = $bindable(true),
     }: Props = $props();
 
-    let firstPopover = $state(false);
-    let secondPopover = $state(false);
+    type OperatorDef = {
+        value: string;
+        label: string;
+        valueType: "single" | "range" | "list" | "none";
+    };
+
+    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 ─────────────────────────────────────────────
+    const STRING_OPS: OperatorDef[] = [
+        { value: "$icontains",   label: "contains",         valueType: "single" },
+        { value: "$incontains",  label: "does not contain", valueType: "single" },
+        { value: "$eq",          label: "is",               valueType: "single" },
+        { value: "$ne",          label: "is not",           valueType: "single" },
+        { value: "$istarts_with",label: "starts with",      valueType: "single" },
+        { value: "$iends_with",  label: "ends with",        valueType: "single" },
+    ];
+    const NUMBER_OPS: OperatorDef[] = [
+        { value: "$eq",      label: "=",       valueType: "single" },
+        { value: "$ne",      label: "≠",       valueType: "single" },
+        { value: "$gt",      label: ">",       valueType: "single" },
+        { value: "$gte",     label: "≥",       valueType: "single" },
+        { value: "$lt",      label: "<",       valueType: "single" },
+        { value: "$lte",     label: "≤",       valueType: "single" },
+        { value: "$between", label: "between", valueType: "range"  },
+    ];
+    const DATE_OPS: OperatorDef[] = [
+        { value: "$eq",      label: "on",      valueType: "single" },
+        { value: "$lt",      label: "before",  valueType: "single" },
+        { value: "$gt",      label: "after",   valueType: "single" },
+        { value: "$between", label: "between", valueType: "range"  },
+    ];
+    const BOOL_OPS: OperatorDef[] = [
+        { value: "$eq", label: "is",     valueType: "single" },
+        { value: "$ne", label: "is not", valueType: "single" },
+    ];
+    const ENUM_OPS: OperatorDef[] = [
+        { value: "$eq",  label: "is",         valueType: "single" },
+        { value: "$ne",  label: "is not",     valueType: "single" },
+        { value: "$in",  label: "is any of",  valueType: "list"   },
+        { value: "$nin", label: "is none of", valueType: "list"   },
+    ];
+    const FK_OPS: OperatorDef[] = [
+        { value: "$eq",  label: "is",        valueType: "single" },
+        { value: "$ne",  label: "is not",    valueType: "single" },
+        { value: "$in",  label: "is any of", valueType: "list"   },
+    ];
+
+    type FieldKind = "string" | "number" | "date" | "bool" | "enum" | "fk";
 
-    function groupAddingHandler(filter: any, key: string) {
-        if (key === "$and" || key === "$or") {
-            filter[key] = [];
-        } else {
-            filter[key] = {};
+    function getFieldKind(fieldName: string): FieldKind {
+        const field: any = ctx.meta.collections[collectionName].fields[fieldName];
+        if (!field) return "string";
+        if (Array.isArray(field.enum) && field.enum.length) return "enum";
+        if (getFieldRelationTarget(ctx, collectionName, fieldName)) return "fk";
+        if (field.type === "bool") return "bool";
+        if (field.type === "date" || field.type === "datetime") return "date";
+        if (
+            field.type === "integer" ||
+            field.type === "decimal" ||
+            field.type === "float" ||
+            field.type === "long"
+        ) return "number";
+        return "string";
+    }
+
+    function getOperatorsForField(fieldName: string): OperatorDef[] {
+        switch (getFieldKind(fieldName)) {
+            case "enum":   return ENUM_OPS;
+            case "fk":     return FK_OPS;
+            case "bool":   return BOOL_OPS;
+            case "date":   return DATE_OPS;
+            case "number": return NUMBER_OPS;
+            default:       return STRING_OPS;
         }
     }
 
-    function getGroupOptions(filter: any) {
-        const collectionFieldNames = Object.keys(
-            ctx.meta.collections[collectionName].fields,
+    function getEnumValues(fieldName: string): string[] {
+        const field: any = ctx.meta.collections[collectionName].fields[fieldName];
+        return (field?.enum ?? []).map((e: any) => String(e.value ?? e));
+    }
+
+    const allFieldNames = Object.keys(ctx.meta.collections[collectionName].fields);
+
+    function nextId() {
+        return Math.random().toString(36).slice(2, 9);
+    }
+
+    function defaultValueFor(op: OperatorDef): any {
+        if (op.valueType === "range") return ["", ""];
+        if (op.valueType === "list") return [];
+        return "";
+    }
+
+    function makeRule(field: string): Rule {
+        const op = getOperatorsForField(field)[0];
+        return { kind: "rule", id: nextId(), field, operator: op.value, value: defaultValueFor(op) };
+    }
+
+    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(),
+                    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 items;
+    }
+
+    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)),
+                };
+            }
+        }
+        // Mixed top: every entry becomes a top-level item, joined by AND.
+        return { topConjunction: "$and", topChildren: parseSubObject(f) };
+    }
+
+    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(r.value) ? r.value : ["", ""];
+            return v[0] !== "" && v[0] != null && v[1] !== "" && v[1] != null;
+        }
+        if (op.valueType === "list") {
+            return Array.isArray(r.value) && r.value.length > 0;
+        }
+        if (getFieldKind(r.field) === "bool") return typeof r.value === "boolean";
+        return r.value !== "" && r.value != null;
+    }
+
+    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);
+                return Number.isFinite(n) ? n : v;
+            }
+            if (kind === "bool") return Boolean(v);
+            return v;
+        };
+        if (op?.valueType === "range") {
+            const [a, b] = Array.isArray(r.value) ? r.value : ["", ""];
+            return [coerce(a), coerce(b)];
+        }
+        if (op?.valueType === "list") {
+            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;
+        }
+        // Top is AND: prefer flat shape, fall back to $and array.
+        filter = tryFlattenAnd(parts) ?? { $and: parts };
+    }
+
+    // ── Mutators ───────────────────────────────────────────────────────
+    function addTopRule() {
+        const f = allFieldNames[0];
+        if (!f) return;
+        topChildren = [...topChildren, makeRule(f)];
+    }
+
+    function addTopGroup() {
+        if (!allFieldNames.length) return;
+        topChildren = [...topChildren, makeGroup()];
+        commit();
+    }
+
+    function removeTopItem(id: string) {
+        topChildren = topChildren.filter((it) => it.id !== id);
+        commit();
+    }
+
+    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,
         );
-        const options = ["$and", "$or", ...collectionFieldNames];
-        const existingPropertiesNames = Object.keys(filter);
-        const filteredOptions = _.difference(options, existingPropertiesNames);
-        return filteredOptions;
     }
 
-    function getOperatorOptions(filter: any) {
-        const operators = ctx.meta.filter.operators;
-        const existingPropertiesNames = Object.keys(filter);
-        const filteredOptions = _.difference(
-            operators,
-            existingPropertiesNames,
+    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,
         );
-        return filteredOptions;
+        commit();
     }
 
-    function operatorAddingHandler(filter: any, key: string) {
-        filter[key] = "";
+    function setTopConjunction(c: "$and" | "$or") {
+        topConjunction = c;
+        commit();
+    }
+
+    function setGroupConjunction(groupId: string, c: "$and" | "$or") {
+        topChildren = topChildren.map((it) =>
+            it.kind === "group" && it.id === groupId ? { ...it, conjunction: c } : it,
+        );
+        commit();
+    }
+
+    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 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 ────────────────────────────────────────────────
+    // The conjunction "word" shown before each rule from row 2 onwards.
+    function conjLabel(c: "$and" | "$or") {
+        return c === "$and" ? "and" : "or";
     }
 </script>
 
-{#snippet filterAddButton(filter: any)}
-    <Popover.Root bind:open={firstPopover}>
-        <Popover.Trigger
-            class={buttonVariants({
-                variant: "ghost",
-                size: "sm",
-                class: "text-muted-foreground",
-            })}
-        >
-            <Plus />
-        </Popover.Trigger>
-        <Popover.Content class="flex w-48 flex-col p-2 max-h-60 overflow-auto">
-            {#each getGroupOptions(filter) as fieldName}
-                <button
-                    onclick={() => {
-                        groupAddingHandler(filter, fieldName);
-                        firstPopover = false;
-                    }}
-                    class="flex cursor-pointer items-center gap-2 rounded-md p-2 px-2 text-xs text-muted-foreground hover:bg-muted hover:text-foreground"
-                >
-                    <div>{fieldName}</div>
-                </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}
-        </Popover.Content>
-    </Popover.Root>
+        </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 rounded-md {isFirst ? '' : 'border'}">
-    <div class="flex justify-between items-center gap-2 border-b p-2 h-10">
-        <div class="flex text-xs font-semibold text-muted-foreground gap-2">
-            <ListFilter size="17.5" />
-            <div>Filter</div>
-        </div>
-        <div>
-            {@render filterAddButton(filter)}
-            {#if deleteFilter}
-                <Button
-                    class="text-muted-foreground px-2 h-7"
-                    variant="ghost"
-                    size="icon"
-                    Icon={Trash}
-                    onclick={deleteFilter}
-                ></Button>
-            {/if}
+<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>
-    </div>
-    <div
-        class="flex flex-col gap-2 p-2 {isFirst
-            ? 'max-h-100 overflow-auto'
-            : ''}"
-    >
-        {#if Object.entries(filter).length}
-            {#each Object.entries(filter) as [key, value]}
-                {@const collectionFields =
-                    ctx.meta.collections[collectionName].fields}
-                {#if key === "$and" || key === "$or"}
-                    <div class="flex flex-col rounded-md border">
-                        <div
-                            class="flex justify-between items-center gap-2 text-xs font-semibold text-muted-foreground p-2 border-b h-10"
-                        >
-                            <div class="flex gap-2">
-                                <Boxes size="17.5" />
-                                {key === "$and" ? "AND" : "OR"}
-                            </div>
-                            <div>
-                                <Button
-                                    class="text-muted-foreground px-2 h-7"
-                                    variant="ghost"
-                                    size="icon"
-                                    Icon={Plus}
-                                    onclick={() =>
-                                        (filter[key] = [...filter[key], {}])}
-                                ></Button>
-                                <Button
-                                    class="text-muted-foreground px-2 h-7"
-                                    variant="ghost"
-                                    size="icon"
-                                    Icon={Trash}
-                                    onclick={() => {
-                                        delete filter[key];
-                                    }}
-                                ></Button>
-                            </div>
-                        </div>
-                        {#if Object.keys(filter[key]).length}
-                            <div class="flex flex-col gap-2 p-2">
-                                {#each filter[key] as _, index}
-                                    <Filter
-                                        bind:filter={filter[key][index]}
-                                        {collectionName}
-                                        deleteFilter={() => {
-                                            filter[key].splice(index, 1);
-                                        }}
-                                    />
-                                {/each}
-                            </div>
-                        {:else}
-                            <div
-                                class="flex justify-center gap-2 text-xs text-muted-foreground text-center p-4"
-                            >
-                                <CircleOff size="17.5" />
-                                No rules defined
-                            </div>
-                        {/if}
+    {:else}
+        <div class="flex flex-col gap-1.5">
+            {#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>
                 {:else}
-                    <div class="flex flex-col gap-2 rounded-md border">
-                        <div
-                            class="flex gap-2 justify-between items-center text-xs font-semibold text-muted-foreground p-2 border-b h-10"
-                        >
-                            <div class="flex gap-2">
-                                <Diamond size="17.5" />
-                                {key}
-                            </div>
-                            <div>
-                                <Popover.Root bind:open={secondPopover}>
-                                    <Popover.Trigger
-                                        class={buttonVariants({
-                                            variant: "ghost",
-                                            size: "sm",
-                                        })}
-                                    >
-                                        <Plus />
-                                    </Popover.Trigger>
-                                    <Popover.Content
-                                        class="flex w-48 flex-col p-2 max-h-60 overflow-auto"
-                                    >
-                                        {#each getOperatorOptions(filter[key]) as fieldName}
-                                            <button
-                                                onclick={() => {
-                                                    operatorAddingHandler(
-                                                        filter[key],
-                                                        fieldName,
-                                                    );
-                                                    secondPopover = false;
-                                                }}
-                                                class="flex cursor-pointer items-center gap-2 rounded-md p-2 px-2 text-xs text-muted-foreground hover:bg-muted hover:text-foreground"
-                                            >
-                                                <div>{fieldName}</div>
-                                            </button>
-                                        {/each}
-                                    </Popover.Content>
-                                </Popover.Root>
+                    <!-- 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
-                                    class="text-muted-foreground px-2 h-7"
+                                    onclick={() => removeTopItem(item.id)}
+                                    class="h-6 w-6 text-muted-foreground hover:bg-transparent"
                                     variant="ghost"
                                     size="icon"
-                                    Icon={Trash}
-                                    onclick={() => {
-                                        delete filter[key];
-                                    }}
+                                    Icon={X}
                                 ></Button>
                             </div>
-                        </div>
-                        {#if Object.entries(value as any).length}
-                            <div
-                                class="gap-2 p-2"
-                                style="display: grid; grid-template-columns: auto 1fr auto;"
-                            >
-                                {#each Object.entries(value as any) as [ruleKey, ruleValue]}
-                                    <div
-                                        class="rounded-md bg-muted border text-xs text-muted-foreground py-1 px-2"
-                                    >
-                                        {ruleKey}
-                                    </div>
-                                    <input
-                                        class="w-full rounded-md bg-muted border text-xs text-muted-foreground py-1 px-2"
-                                        type="text"
-                                        bind:value={filter[key][ruleKey]}
-                                    />
-                                    <Button
-                                        class="text-muted-foreground px-2 h-7"
-                                        variant="ghost"
-                                        size="icon"
-                                        Icon={Trash}
-                                        onclick={() => {
-                                            delete filter[key][ruleKey];
-                                        }}
-                                    ></Button>
-                                {/each}
-                            </div>
-                        {:else}
-                            <div
-                                class="flex justify-center gap-2 text-xs text-muted-foreground text-center rounded-md p-2"
+                            {#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}
+                                </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"
                             >
-                                <CircleOff size="17.5" />
-                                No rules defined
-                            </div>
-                        {/if}
+                                <Plus size="14" />
+                                Add filter rule
+                            </button>
+                        </div>
                     </div>
                 {/if}
             {/each}
-        {:else}
-            <div
-                class="flex justify-center gap-2 text-xs text-muted-foreground text-center rounded-md p-2"
-            >
-                <CircleOff size="17.5" />
-                No rules defined
-            </div>
-        {/if}
+        </div>
+    {/if}
+
+    <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>