@lobb-js/studio 0.37.1 → 0.39.0

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

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import * as Popover from "../ui/popover/index.js";
-	import { ListFilter } from "lucide-svelte";
+	import { Settings2 } from "lucide-svelte";
 	import { buttonVariants } from "../ui/button";
 	import Filter from "./filter.svelte";
 
@@ -15,6 +15,22 @@
 		showText = true,
 		collectionName,
 	}: Props = $props();
+
+	// Count rules, not top-level fields: a single field with two
+	// operators ({age: {$gte, $lte}}) is two rules, not one. Unmanaged
+	// $and / $or carriers count as one rule each (legacy filter shape).
+	function countRules(f: Record<string, any>): number {
+		let n = 0;
+		for (const [key, value] of Object.entries(f ?? {})) {
+			if (key.startsWith("$")) { n += 1; continue; }
+			if (value && typeof value === "object" && !Array.isArray(value)) {
+				n += Object.keys(value).length;
+			} else {
+				n += 1;
+			}
+		}
+		return n;
+	}
 </script>
 
 <Popover.Root>
@@ -22,18 +38,20 @@
 		class={buttonVariants({
 			variant: "ghost",
 			size: "sm",
+			class: "text-muted-foreground",
 		})}
 	>
-		<ListFilter />
+		<Settings2 />
 		{#if showText}
-			{#if Object.keys(filter).length}
-				Filtered by {Object.keys(filter).length} rules
+			{@const n = countRules(filter)}
+			{#if n}
+				Filtered by {n} {n === 1 ? "rule" : "rules"}
 			{:else}
 				Filter
 			{/if}
 		{/if}
 	</Popover.Trigger>
-	<Popover.Content class="w-screen max-w-100 p-0">
-		<Filter bind:filter {collectionName} isFirst={true} />
+	<Popover.Content class="w-screen max-w-[36rem] p-0">
+		<Filter bind:filter {collectionName} />
 	</Popover.Content>
 </Popover.Root>

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

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

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

@@ -2,12 +2,14 @@
     import * as _ from "lodash-es";
 
     import * as Popover from "../ui/popover/index.js";
-    import { ArrowDown, ArrowUp, GripVertical, Plus, X } from "lucide-svelte";
+    import * as Select from "../ui/select/index.js";
+    import { GripVertical, Plus, X } from "lucide-svelte";
     import Button, { buttonVariants } from "../ui/button/button.svelte";
-    import Label from "../ui/label/label.svelte";
-    import Switch from "../ui/switch/switch.svelte";
     import { getStudioContext } from "../../context";
     import { getFieldIcon } from "./utils";
+    import { dndzone } from "svelte-dnd-action";
+    import { flip } from "svelte/animate";
+    import FieldPicker from "./fieldPicker.svelte";
 
     const { ctx } = getStudioContext();
 
@@ -21,108 +23,174 @@
 
     let popoverOpen = $state(false);
 
+    // Fields not currently used by any rule. Used to decide whether the
+    // "Add a sort rule" trigger is shown at all.
     function getFieldNames() {
         const options = Object.keys(
             ctx.meta.collections[collectionName].fields,
         );
-        const existingPropertiesNames = Object.keys(sort);
-        const filteredOptions = _.difference(options, existingPropertiesNames);
-        return filteredOptions;
+        const used = items.map((r) => r.id);
+        return _.difference(options, used);
     }
 
-    function moveProperty<T extends Record<string, any>>(
-        obj: T,
-        propertyToMove: keyof T,
-        direction: "up" | "down",
-        steps: number = 1,
-    ): T {
-        const keys = Object.keys(obj) as Array<keyof T>;
-        const currentIndex = keys.indexOf(propertyToMove);
-
-        if (currentIndex === -1) {
-            console.warn(
-                `Property '${String(propertyToMove)}' not found in the object.`,
-            );
-            return { ...obj };
-        }
+    // The field-name <Select> for an existing rule needs to list every
+    // field that isn't already used by *another* rule (plus its own
+    // current field). That way the user can swap a rule's field to any
+    // unused one without colliding with the others.
+    function getFieldOptionsForRule(currentField: string): string[] {
+        const all = Object.keys(ctx.meta.collections[collectionName].fields);
+        const usedByOthers = new Set(
+            items.map((r) => r.id).filter((id) => id !== currentField),
+        );
+        return all.filter((f) => !usedByOthers.has(f));
+    }
 
-        const [removedKey] = keys.splice(currentIndex, 1) as [keyof T];
-
-        let newIndex: number;
-        if (direction === "up") {
-            newIndex = Math.max(0, currentIndex - steps);
-        } else if (direction === "down") {
-            newIndex = Math.min(keys.length, currentIndex + steps);
-        } else {
-            console.warn(
-                `Invalid direction specified: '${direction}'. Use 'up' or 'down'.`,
-            );
-            return { ...obj };
+    // Push items → sort. Strips any in-flight shadow rows whose ids
+    // don't correspond to a real schema field. Called explicitly from
+    // each mutator (and from finalize) instead of via $effect — that
+    // way a drag's `consider` events don't spam the parent's sort prop
+    // and trigger a refetch on every frame. We reassign the whole
+    // binding (instead of mutating in place) because the parent's
+    // refetch watcher only fires on identity changes.
+    function commit() {
+        const validIds = ctx.meta.collections[collectionName].fields;
+        const next: Record<string, "asc" | "desc"> = {};
+        for (const r of items) {
+            if (r.id in validIds) next[r.id] = r.direction;
         }
+        sort = next;
+    }
+
+    function renameField(oldName: string, newName: string) {
+        if (oldName === newName) return;
+        items = items.map((r) => (r.id === oldName ? { ...r, id: newName } : r));
+        commit();
+    }
 
-        keys.splice(newIndex, 0, removedKey);
+    function setDirection(fieldId: string, dir: "asc" | "desc") {
+        items = items.map((r) => (r.id === fieldId ? { ...r, direction: dir } : r));
+        commit();
+    }
+
+    function removeRule(fieldId: string) {
+        items = items.filter((r) => r.id !== fieldId);
+        commit();
+    }
+
+    function addRule(fieldId: string) {
+        items = [...items, { id: fieldId, direction: "asc" }];
+        commit();
+    }
 
-        const newObject: T = {} as T;
-        keys.forEach((key) => {
-            newObject[key] = obj[key];
-        });
+    // svelte-dnd-action needs to own an array of {id} objects so it can
+    // stamp placeholder shadows during drag. We keep that array as local
+    // state and push into `sort` on every change — never the other way
+    // around, so the shadow item never leaks into the parent's filter.
+    type Rule = { id: string; direction: "asc" | "desc" };
+    let items = $state<Rule[]>(
+        Object.entries(sort).map(([id, direction]) => ({
+            id,
+            direction: direction as "asc" | "desc",
+        })),
+    );
 
-        return newObject;
+    function handleDndConsider(e: CustomEvent<{ items: Rule[] }>) {
+        // Mid-drag: update local items so the row tracks the cursor, but
+        // do NOT touch `sort` — that would refetch the table every frame.
+        items = e.detail.items;
     }
+    function handleDndFinalize(e: CustomEvent<{ items: Rule[] }>) {
+        items = e.detail.items;
+        commit();
+    }
+
 </script>
 
 <div class="flex flex-col gap-2 p-2 text-muted-foreground">
-    {#if Object.keys(sort).length}
-        <div class="flex flex-col gap-2 text-muted-foreground">
-            {#each Object.entries(sort) as [fieldName, order]}
-                <div class="flex items-center justify-between text-xs">
-                    <dir class="m-0 flex items-center gap-3 p-0">
-                        <div class="flex gap-1">
-                            <ArrowUp
-                                onclick={() =>
-                                    (sort = moveProperty(
-                                        sort,
-                                        fieldName,
-                                        "up",
-                                    ))}
-                                class="cursor-pointer hover:text-foreground"
-                                size="15"
-                            />
-                            <ArrowDown
-                                onclick={() =>
-                                    (sort = moveProperty(
-                                        sort,
-                                        fieldName,
-                                        "down",
-                                    ))}
-                                class="cursor-pointer hover:text-foreground"
-                                size="15"
-                            />
-                        </div>
-                        <div class="text-foreground font-medium">
-                            {fieldName}
-                        </div>
-                    </dir>
-                    <dir class="m-0 flex items-center gap-2 p-0">
-                        <div class="flex items-center space-x-2">
-                            <Label class="text-xs">Ascending</Label>
-                            <!-- <Switch checked={true} /> -->
-                            <Switch
-                                bind:checked={
-                                    () => sort[fieldName] === "asc",
-                                    (v) =>
-                                        (sort[fieldName] = v ? "asc" : "desc")
-                                }
-                            />
-                        </div>
-                        <Button
-                            onclick={() => delete sort[fieldName]}
-                            class="h-6 w-6 text-muted-foreground hover:bg-transparent"
-                            variant="ghost"
-                            size="icon"
-                            Icon={X}
-                        ></Button>
-                    </dir>
+    {#if items.length}
+        <div
+            class="flex flex-col gap-2"
+            use:dndzone={{
+                items,
+                dragDisabled: false,
+                dropTargetStyle: {},
+                flipDurationMs: 150,
+            }}
+            onconsider={handleDndConsider}
+            onfinalize={handleDndFinalize}
+        >
+            {#each items as rule (rule.id)}
+                {@const field = ctx.meta.collections[collectionName].fields[rule.id]}
+                <!-- Single wrapper so the `animate:flip` directive sits
+                     directly under the keyed each. The conditional inside
+                     swaps between the dnd shadow placeholder and the real
+                     row. -->
+                <div animate:flip={{ duration: 150 }}>
+                {#if !field}
+                    <div class="h-7"></div>
+                {:else}
+                    {@const FieldIcon = getFieldIcon(ctx, rule.id, collectionName)}
+                <div class="flex items-center gap-2 text-xs">
+                    <!-- Drag handle. The whole rule row is draggable via
+                         dndzone, but cursor-grab on the handle telegraphs
+                         the intent. -->
+                    <GripVertical
+                        size="15"
+                        class="cursor-grab text-muted-foreground hover:text-foreground"
+                    />
+
+                    <!-- Field-name picker — only fields not used by other
+                         rules are selectable; the current one always is. -->
+                    <Select.Root
+                        type="single"
+                        value={rule.id}
+                        onValueChange={(v) => v && renameField(rule.id, v)}
+                    >
+                        <Select.Trigger class="bg-muted h-7 flex-1 text-xs">
+                            <div class="inline-flex items-center gap-1.5">
+                                <FieldIcon size="13" />
+                                {rule.id}
+                            </div>
+                        </Select.Trigger>
+                        <Select.Content>
+                            {#each getFieldOptionsForRule(rule.id) as optionName}
+                                {@const OptionIcon = getFieldIcon(ctx, optionName, collectionName)}
+                                <Select.Item value={optionName}>
+                                    <div class="inline-flex items-center gap-1.5">
+                                        <OptionIcon size="13" />
+                                        {optionName}
+                                    </div>
+                                </Select.Item>
+                            {/each}
+                        </Select.Content>
+                    </Select.Root>
+
+                    <!-- Direction picker -->
+                    <Select.Root
+                        type="single"
+                        value={rule.direction}
+                        onValueChange={(v) => {
+                            if (v === "asc" || v === "desc") setDirection(rule.id, v);
+                        }}
+                    >
+                        <Select.Trigger class="bg-muted h-7 w-32 text-xs">
+                            {rule.direction === "asc" ? "Ascending" : "Descending"}
+                        </Select.Trigger>
+                        <Select.Content>
+                            <Select.Item value="asc">Ascending</Select.Item>
+                            <Select.Item value="desc">Descending</Select.Item>
+                        </Select.Content>
+                    </Select.Root>
+
+                    <Button
+                        onclick={() => removeRule(rule.id)}
+                        class="h-7 w-7 text-muted-foreground hover:bg-transparent"
+                        variant="ghost"
+                        size="icon"
+                        Icon={X}
+                    ></Button>
+                </div>
+                {/if}
                 </div>
             {/each}
         </div>
@@ -144,25 +212,22 @@
                 class={buttonVariants({
                     variant: "ghost",
                     size: "sm",
+                    class: "text-muted-foreground",
                 })}
             >
                 <Plus />
                 Add a sort rule
             </Popover.Trigger>
-            <Popover.Content class="flex w-48 flex-col p-2">
-                {#each getFieldNames() as fieldName}
-                    {@const FieldIcon = getFieldIcon(ctx, fieldName, collectionName)}
-                    <button
-                        onclick={() => {
-                            sort[fieldName] = "asc";
-                            popoverOpen = false;
-                        }}
-                        class="flex cursor-pointer items-center gap-2 rounded-md p-2 px-3 text-xs text-muted-foreground hover:bg-muted hover:text-foreground"
-                    >
-                        <FieldIcon size="15" />
-                        <div>{fieldName}</div>
-                    </button>
-                {/each}
+            <Popover.Content class="w-64 p-2">
+                <FieldPicker
+                    {collectionName}
+                    excludeFields={items.map((r) => r.id)}
+                    placeholder="Pick a field to sort by…"
+                    onPick={(fieldName: string) => {
+                        addRule(fieldName);
+                        popoverOpen = false;
+                    }}
+                />
             </Popover.Content>
         </Popover.Root>
     {:else}

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

@@ -1,8 +1,14 @@
 <script lang="ts">
+	// Sort button. Two-stage flow:
+	//   • No sorts yet → typeahead field picker (fast path: just pick a
+	//     field, it lands as asc, popover closes)
+	//   • At least one sort → full multi-rule editor (Sort.svelte) so the
+	//     user can reorder, toggle direction, add more, etc.
 	import * as Popover from "../ui/popover/index.js";
-	import { ArrowDownWideNarrow } from "lucide-svelte";
+	import { ArrowUpDown } from "lucide-svelte";
 	import { buttonVariants } from "../ui/button";
 	import Sort from "./sort.svelte";
+	import FieldPicker from "./fieldPicker.svelte";
 
 	interface Props {
 		collectionName: string;
@@ -11,26 +17,46 @@
 	}
 
 	let { collectionName, sort = $bindable({}), showText }: Props = $props();
+
+	let popoverOpen = $state(false);
+
+	function pick(fieldName: string) {
+		sort = { ...sort, [fieldName]: "asc" };
+		popoverOpen = false;
+	}
 </script>
 
-<Popover.Root>
+<Popover.Root bind:open={popoverOpen}>
 	<Popover.Trigger
 		class={buttonVariants({
 			variant: "ghost",
 			size: "sm",
+			class: "text-muted-foreground",
 		})}
 	>
-		<ArrowDownWideNarrow />
+		<ArrowUpDown />
 		{#if showText}
 			{@const sortRules = Object.keys(sort).length}
 			{#if sortRules}
-				Sorted by {sortRules} rules
+				Sorted by {sortRules} {sortRules === 1 ? "field" : "fields"}
 			{:else}
 				Sort
 			{/if}
 		{/if}
 	</Popover.Trigger>
-	<Popover.Content class="w-screen max-w-[20rem] p-0">
-		<Sort {collectionName} {showText} bind:sort />
-	</Popover.Content>
+	{#if Object.keys(sort).length === 0}
+		<!-- Fast path: typeahead picker. The first selected field starts
+		     the sort; subsequent edits go through the full editor below. -->
+		<Popover.Content class="w-64 p-2">
+			<FieldPicker
+				{collectionName}
+				placeholder="Pick a field to sort by…"
+				onPick={pick}
+			/>
+		</Popover.Content>
+	{:else}
+		<Popover.Content class="w-screen max-w-[24rem] p-0">
+			<Sort {collectionName} {showText} bind:sort />
+		</Popover.Content>
+	{/if}
 </Popover.Root>

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

@@ -1,6 +1,7 @@
 <script lang="ts" module>
 	interface Column {
 		id: string;
+		label?: string;
 		icon?: any;
 		subtext?: any;
 	}
@@ -223,7 +224,7 @@
 			{:else}
 				<ColumnIcon size="12.5" class="text-muted-foreground" />
 			{/if}
-			<div class="font-bold whitespace-nowrap">{column.id}</div>
+			<div class="font-bold whitespace-nowrap">{column.label ?? column.id}</div>
 			<div class="text-muted-foreground text-[0.7rem] whitespace-nowrap">
 				{column.subtext}
 			</div>

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

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