@lobb-js/studio 0.37.1 → 0.39.0

package/dist/components/dataTable/filter.svelte

@@ -1,270 +1,501 @@
 <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 flat 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.
+    //
+    // 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.
+
+    import * as Select from "../ui/select/index.js";
     import Button from "../ui/button/button.svelte";
+    import { Plus, X, AlertCircle } 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;
     }
 
-    let {
-        filter = $bindable({}),
-        collectionName,
-        isFirst = false,
-        deleteFilter,
-    }: Props = $props();
-
-    let firstPopover = $state(false);
-    let secondPopover = $state(false);
-
-    function groupAddingHandler(filter: any, key: string) {
-        if (key === "$and" || key === "$or") {
-            filter[key] = [];
-        } else {
-            filter[key] = {};
+    let { filter = $bindable({}), collectionName }: 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 = {
+        id: string;
+        field: string;
+        operator: string;
+        value: any;
+    };
+
+    // ── 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" },
+        { 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 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 getEnumValues(fieldName: string): string[] {
+        const field: any = ctx.meta.collections[collectionName].fields[fieldName];
+        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() {
+        return Math.random().toString(36).slice(2, 9);
+    }
+
+    function defaultValueFor(op: OperatorDef): any {
+        if (op.valueType === "range") return ["", ""];
+        if (op.valueType === "list") return [];
+        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 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({
+                    id: nextId(),
+                    field: key,
+                    operator: op,
+                    value: opVal,
+                });
+            }
+        }
+        return { conditions, unmanaged };
+    }
+
+    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) };
+            }
         }
+        filter = next;
+    }
+
+    function isValueReady(c: Condition): boolean {
+        const op = getOperatorsForField(c.field).find((o) => o.value === c.operator);
+        if (!op) return false;
+        if (op.valueType === "range") {
+            const v = Array.isArray(c.value) ? c.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;
+        }
+        if (getFieldKind(c.field) === "bool") return typeof c.value === "boolean";
+        return c.value !== "" && c.value != null;
+    }
+
+    function serialiseValue(c: Condition): any {
+        const kind = getFieldKind(c.field);
+        const op = getOperatorsForField(c.field).find((o) => o.value === c.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(c.value) ? c.value : ["", ""];
+            return [coerce(a), coerce(b)];
+        }
+        if (op?.valueType === "list") {
+            return (Array.isArray(c.value) ? c.value : []).map(coerce);
+        }
+        return coerce(c.value);
+    }
+
+    // ── 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 removeCondition(id: string) {
+        conditions = conditions.filter((c) => c.id !== id);
+        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),
+            };
+        });
+        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),
+            };
+        });
+        commit();
+    }
+
+    function setValue(id: string, newValue: any) {
+        conditions = conditions.map((c) => (c.id === id ? { ...c, value: newValue } : c));
+        commit();
     }
 
-    function getGroupOptions(filter: any) {
-        const collectionFieldNames = Object.keys(
-            ctx.meta.collections[collectionName].fields,
-        );
-        const options = ["$and", "$or", ...collectionFieldNames];
-        const existingPropertiesNames = Object.keys(filter);
-        const filteredOptions = _.difference(options, existingPropertiesNames);
-        return filteredOptions;
+    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 };
+        });
+        commit();
     }
 
-    function getOperatorOptions(filter: any) {
-        const operators = ctx.meta.filter.operators;
-        const existingPropertiesNames = Object.keys(filter);
-        const filteredOptions = _.difference(
-            operators,
-            existingPropertiesNames,
-        );
-        return filteredOptions;
+    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 operatorAddingHandler(filter: any, key: string) {
-        filter[key] = "";
+    function clearUnmanaged() {
+        unmanaged = {};
+        commit();
     }
+
+    // ── Display helpers ────────────────────────────────────────────────
+    const hasUnmanaged = $derived(Object.keys(unmanaged).length > 0);
 </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}
+<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
-                    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"
+                    type="button"
+                    onclick={clearUnmanaged}
+                    class="mt-1 underline underline-offset-2 hover:text-foreground"
                 >
-                    <div>{fieldName}</div>
+                    Clear advanced filter
                 </button>
-            {/each}
-        </Popover.Content>
-    </Popover.Root>
-{/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>
-        <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}
+    {/if}
+
+    {#if conditions.length === 0}
+        <div class="px-1 py-2 text-xs text-muted-foreground">
+            No filter conditions are applied
         </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 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"}
                     </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>
-                                <Button
-                                    class="text-muted-foreground px-2 h-7"
-                                    variant="ghost"
-                                    size="icon"
-                                    Icon={Trash}
-                                    onclick={() => {
-                                        delete filter[key];
-                                    }}
-                                ></Button>
+
+                    <!-- 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}
                             </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}
+                        </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>
-                                    <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"
+                                </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")}
                             >
-                                <CircleOff size="17.5" />
-                                No rules defined
-                            </div>
+                                <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>
+                                    {/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
+                        onclick={() => removeCondition(cond.id)}
+                        class="h-7 w-7 text-muted-foreground hover:bg-transparent"
+                        variant="ghost"
+                        size="icon"
+                        Icon={X}
+                    ></Button>
+                </div>
             {/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>
+        </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>