@lobb-js/studio 0.25.0 → 0.27.0

package/dist/components/routes/collections/collections.svelte

@@ -1,40 +1,61 @@
 <script lang="ts">
-    import type { SideBarData } from "../../../components/sidebar/sidebarElements.svelte";
+    import type { SideBarData, SideBarNode } from "../../../components/sidebar/sidebarElements.svelte";
     import Sidebar from "../../../components/sidebar/sidebar.svelte";
     import { getStudioContext } from "../../../context";
     import Collection from "./collection.svelte";
 
     const { ctx } = getStudioContext();
-    import { Table } from "lucide-svelte";
+    import { Table, Cpu, LibraryBig } from "lucide-svelte";
+    import * as Icons from "lucide-svelte";
+
+    const directoryIcons: Record<string, any> = {
+        project: LibraryBig,
+        core: Cpu,
+    };
 
     let { collectionName } = $props();
 
     const collectionsList = $state(getCollectionsList());
 
-    function getCollectionsList() {
+    function getCollectionsList(): SideBarData {
         const collections = ctx.meta.collections;
-        let collectionsOwners: SideBarData = Object.entries(collections).map(
-            ([collectionName, collectionValue]) => {
-                return {
-                    name: collectionName,
-                    path: collectionValue.category ?? collectionValue.owner,
-                    icon: Table,
-                    href: `/studio/collections/${collectionName}`,
-                };
-            },
-        );
-
-        // updating the path from '__project' and '__core' to a more readable names
-        collectionsOwners = collectionsOwners.map((item) => {
-            if (item.path === "__project") {
-                item.path = "project";
-            } else if (item.path === "__core") {
-                item.path = "core";
+
+        const groups = new Map<string, SideBarNode[]>();
+
+        for (const [name, value] of Object.entries(collections)) {
+            let groupKey: string = (value as any).category ?? (value as any).owner;
+            if (groupKey === "__project") groupKey = "project";
+            else if (groupKey === "__core") groupKey = "core";
+
+            if (!groups.has(groupKey)) {
+                groups.set(groupKey, []);
             }
-            return item;
-        });
+            groups.get(groupKey)!.push({
+                type: "element",
+                name,
+                icon: Table,
+                href: `/studio/collections/${name}`,
+            });
+        }
+
+        const result: SideBarData = [];
+        for (const [groupKey, children] of groups) {
+            const extensionIconName = ctx.meta.extensions?.[groupKey]?.icon;
+            const isProject = groupKey === "project";
+            result.push({
+                type: "directory",
+                name: isProject ? "Collections" : groupKey,
+                icon: directoryIcons[groupKey] ?? (extensionIconName ? (Icons as any)[extensionIconName] : undefined),
+                collapsed: isProject ? false : true,
+                children,
+            });
+        }
 
-        return collectionsOwners;
+        return result.sort((a, b) => {
+            if ((a as any).name === "core") return 1;
+            if ((b as any).name === "core") return -1;
+            return 0;
+        });
     }
 </script>
 

package/dist/components/routes/data_model/dataModel.svelte

@@ -13,14 +13,8 @@
     title="Data Model"
     showSearch={false}
     data={[
-        {
-            name: "graph",
-            href: "/studio/datamodel/graph",
-        },
-        {
-            name: "query_editor",
-            href: "/studio/datamodel/query_editor",
-        },
+        { type: "element", name: "graph", href: "/studio/datamodel/graph" },
+        { type: "element", name: "query_editor", href: "/studio/datamodel/query_editor" },
     ]}
 >
     <div class="relative h-full w-full">

package/dist/components/routes/workflows/workflows.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import type { SideBarData } from "../../../components/sidebar/sidebarElements.svelte";
+    import type { SideBarData, SideBarNode } from "../../../components/sidebar/sidebarElements.svelte";
     import WorkflowEditor, {
         type WorkflowEntry,
     } from "../../../components/workflowEditor.svelte";
@@ -31,18 +31,31 @@
         const response = await lobb.findAll("core_workflows", {});
         const result = await response.json();
         const workflows: any[] = result.data;
-        sidebarData = workflows.map((workflow) => {
-            return {
+
+        const groups = new Map<string, SideBarNode[]>();
+        const nodes: SideBarData = [];
+
+        for (const workflow of workflows) {
+            const item: SideBarNode = {
+                type: "element",
                 name: workflow.name,
-                path: workflow.directory,
-                onclick: () => {
-                    location.navigate(`/studio/workflows/${workflow.name}`);
-                },
-                meta: {
-                    id: workflow.id,
-                },
+                onclick: () => location.navigate(`/studio/workflows/${workflow.name}`),
+                meta: { id: workflow.id },
             };
-        });
+
+            if (workflow.directory) {
+                if (!groups.has(workflow.directory)) {
+                    const children: SideBarNode[] = [];
+                    groups.set(workflow.directory, children);
+                    nodes.push({ type: "directory", name: workflow.directory, children });
+                }
+                groups.get(workflow.directory)!.push(item);
+            } else {
+                nodes.push(item);
+            }
+        }
+
+        sidebarData = nodes;
     }
 
     async function fetchWorkflowData(workflowName: string) {

package/dist/components/sidebar/sidebar.svelte

@@ -13,13 +13,12 @@
     import SidebarElements, {
         type SideBarData,
         type SideBarElement,
-        type SidebarElementsProps,
+        type SideBarNode,
     } from "./sidebarElements.svelte";
 
     interface Props {
         title: string;
         data: SideBarData | null;
-        sidebarElementsProps?: Partial<SidebarElementsProps>;
         showSearch?: boolean;
         children: Snippet<[]>;
         belowSearch?: Snippet;
@@ -29,7 +28,6 @@
     let {
         title,
         data,
-        sidebarElementsProps,
         showSearch = true,
         children,
         belowSearch,
@@ -67,7 +65,17 @@
     }
 
     function filterSidebarData(items: SideBarData, term: string): SideBarData {
-        return items.filter((item) => item.name.includes(term));
+        return items.reduce<SideBarData>((acc, node) => {
+            if (node.type === "directory") {
+                const filteredChildren = filterSidebarData(node.children, term);
+                if (filteredChildren.length > 0) {
+                    acc.push({ ...node, collapsed: false, children: filteredChildren });
+                }
+            } else if (node.name.toLowerCase().includes(term)) {
+                acc.push(node);
+            }
+            return acc;
+        }, []);
     }
 </script>
 
@@ -124,7 +132,6 @@
                     <SidebarElements
                         bind:data={visibleData}
                         {elementRightSide}
-                        {...sidebarElementsProps}
                     />
                 {/key}
             </div>

package/dist/components/sidebar/sidebar.svelte.d.ts

@@ -2,11 +2,10 @@ export interface SidebarProperties {
     collapsed: boolean;
 }
 import { type Snippet } from "svelte";
-import { type SideBarData, type SideBarElement, type SidebarElementsProps } from "./sidebarElements.svelte";
+import { type SideBarData, type SideBarElement } from "./sidebarElements.svelte";
 interface Props {
     title: string;
     data: SideBarData | null;
-    sidebarElementsProps?: Partial<SidebarElementsProps>;
     showSearch?: boolean;
     children: Snippet<[]>;
     belowSearch?: Snippet;

package/dist/components/sidebar/sidebarElements.svelte

@@ -1,24 +1,32 @@
 <script lang="ts" module>
     export interface SideBarElement {
+        type: "element";
         name: string;
         onclick?: () => Promise<void> | void;
         href?: string;
         icon?: any;
-        path?: string;
         meta?: Record<string, any>;
     }
 
-    export type SideBarData = Array<SideBarElement>;
+    export interface SideBarDirectory {
+        type: "directory";
+        name: string;
+        icon?: any;
+        collapsed?: boolean;
+        children: SideBarNode[];
+    }
+
+    export type SideBarNode = SideBarElement | SideBarDirectory;
+    export type SideBarData = SideBarNode[];
 
     export interface SidebarElementsProps {
         data: SideBarData;
-        path?: string[];
         elementRightSide?: Snippet<[SideBarElement]>;
     }
 </script>
 
 <script lang="ts">
-    import { Ban } from "lucide-svelte";
+    import { Ban, ChevronDown, Folder } from "lucide-svelte";
     import type { Snippet } from "svelte";
     import SidebarElements from "./sidebarElements.svelte";
     import Button from "../ui/button/button.svelte";
@@ -26,117 +34,84 @@
 
     let {
         data = $bindable(),
-        path = [],
         elementRightSide,
     }: SidebarElementsProps = $props();
 
-    const elementsToShow = data.reduce<Array<string | SideBarElement>>(
-        (acc, item, index) => {
-            const firstPath = item.path?.split("/")[0];
-            if (firstPath && item.path && !acc.includes(firstPath)) {
-                acc.push(firstPath);
-            } else if (!item.path) {
-                acc.push(item);
-            }
-            return acc;
-        },
-        [],
+    let expandedHeights: number[] = $state(Array(data.length).fill(0));
+    let collapsedDirs: boolean[] = $state(
+        data.map((node) => node.type === "directory" ? (node.collapsed ?? false) : false)
     );
 
-    let expandedHeights: number[] = $state(Array(data?.length).fill(0));
+    function toggleDir(index: number) {
+        collapsedDirs[index] = !collapsedDirs[index];
+    }
 
     async function handleElementClick(element: SideBarElement) {
         if (element.onclick) {
             await element.onclick();
         }
     }
-
-    function getDirElements(dirName: string) {
-        let elements = data.filter((item) => item.path?.startsWith(dirName));
-        elements = elements.map((item) => {
-            return {
-                ...item,
-                path: item.path?.split("/").slice(1).join("/"),
-            };
-        });
-        return elements;
-    }
 </script>
 
 <div class="flex flex-col">
-    {#if elementsToShow.length}
-        {#each elementsToShow as element, index}
-            {#if typeof element === "string"}
-                {@const directoryName = element.split("/")[0]}
+    {#if data.length}
+        {#each data as node, index}
+            {#if node.type === "directory"}
                 <button
-                    class="
-						flex items-center justify-between p-2 gap-2 text-muted-foreground
-						rounded-md cursor-default
-					"
+                    class="flex items-center justify-between p-2 gap-2 text-muted-foreground rounded-md hover:bg-muted/30 cursor-pointer"
+                    onclick={() => toggleDir(index)}
                 >
                     <div class="flex items-center gap-2">
-                        <div class="text-xs">
-                            {directoryName}
-                        </div>
+                        {#if node.icon}
+                            <node.icon size="17.5" />
+                        {:else}
+                            <Folder size="17.5" />
+                        {/if}
+                        <div class="text-xs">{node.name}</div>
                     </div>
+                    <ChevronDown
+                        size="14"
+                        class="transition-transform duration-200 {collapsedDirs[index] ? '-rotate-90' : ''}"
+                    />
                 </button>
-                {#if getDirElements(directoryName)}
-                    <div
-                        class="overflow-hidden"
-                        style="
-						height: {true ? expandedHeights[index] : 0}px;
-					"
-                    >
-                        <div
-                            bind:clientHeight={expandedHeights[index]}
-                            class="border-l ml-4 pl-2"
-                        >
-                            <SidebarElements
-                                data={getDirElements(element)}
-                                path={[...path, element]}
-                                {elementRightSide}
-                            />
-                        </div>
+                <div
+                    class="overflow-hidden transition-[height] duration-200"
+                    style="height: {collapsedDirs[index] ? 0 : expandedHeights[index]}px;"
+                >
+                    <div bind:clientHeight={expandedHeights[index]} class="border-l ml-4 pl-2">
+                        <SidebarElements data={node.children} {elementRightSide} />
                     </div>
-                {/if}
+                </div>
             {:else}
-                {@const elementPath = [...path, element]}
-                {@const isselected = location.url.pathname === element.href}
+                {@const isselected = location.url.pathname === node.href}
                 <Button
-                    onclick={() => handleElementClick(element)}
-                    href={element.href}
+                    onclick={() => handleElementClick(node)}
+                    href={node.href}
                     variant="ghost"
                     class="
 						flex items-center justify-between p-2 gap-2 hover:bg-muted/30 text-muted-foreground
 						rounded-md {isselected ? 'bg-muted' : ''}
 					"
-                    title={element.name}
+                    title={node.name}
                 >
                     <div class="flex items-center gap-2 truncate">
-                        {#if element.icon}
-                            <element.icon size="17.5" />
+                        {#if node.icon}
+                            <node.icon size="17.5" />
                         {/if}
-                        <div
-                            class="
-								text-xs
-								{isselected ? 'text-primary font-medium' : ''}
-							"
-                        >
-                            {element.name}
+                        <div class="text-xs {isselected ? 'text-primary font-medium' : ''}">
+                            {node.name}
                         </div>
                     </div>
                     <div class="flex gap-2 items-center">
                         {#if elementRightSide}
-                            {@render elementRightSide(element)}
+                            {@render elementRightSide(node)}
                         {/if}
                     </div>
                 </Button>
             {/if}
         {/each}
     {:else}
-        <div
-            class="flex justify-center items-center gap-2 text-muted-foreground"
-        >
+        <div class="flex justify-center items-center gap-2 text-muted-foreground">
             <Ban size="17.5" />
             <div class="text-xs text-center">No result</div>
         </div>

package/dist/components/sidebar/sidebarElements.svelte.d.ts

@@ -1,15 +1,22 @@
 export interface SideBarElement {
+    type: "element";
     name: string;
     onclick?: () => Promise<void> | void;
     href?: string;
     icon?: any;
-    path?: string;
     meta?: Record<string, any>;
 }
-export type SideBarData = Array<SideBarElement>;
+export interface SideBarDirectory {
+    type: "directory";
+    name: string;
+    icon?: any;
+    collapsed?: boolean;
+    children: SideBarNode[];
+}
+export type SideBarNode = SideBarElement | SideBarDirectory;
+export type SideBarData = SideBarNode[];
 export interface SidebarElementsProps {
     data: SideBarData;
-    path?: string[];
     elementRightSide?: Snippet<[SideBarElement]>;
 }
 import type { Snippet } from "svelte";

package/dist/utils.js

@@ -1,5 +1,6 @@
 import { clsx } from "clsx";
 import { twMerge } from "tailwind-merge";
+import { isEqual } from "lodash";
 import { MediaQuery } from 'svelte/reactivity';
 export function cn() {
     var inputs = [];
@@ -26,7 +27,7 @@ export function getChangedProperties(oldObj, newObj) {
     var changes = {};
     for (var _i = 0, _a = Object.keys(newObj); _i < _a.length; _i++) {
         var key = _a[_i];
-        if (oldObj[key] !== newObj[key]) {
+        if (!isEqual(oldObj[key], newObj[key])) {
             changes[key] = newObj[key];
         }
     }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@lobb-js/studio",
   "license": "UNLICENSED",
-  "version": "0.25.0",
+  "version": "0.27.0",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -42,7 +42,7 @@
     "postpublish": "./scripts/postpublish.sh"
   },
   "devDependencies": {
-    "@lobb-js/core": "^0.28.0",
+    "@lobb-js/core": "^0.30.0",
     "@chromatic-com/storybook": "^4.1.2",
     "@storybook/addon-a11y": "^10.0.1",
     "@storybook/addon-docs": "^10.0.1",

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

@@ -1,3 +1,17 @@
+<script lang="ts" module>
+    export interface ParentContext {
+        collectionName: string;
+        recordId: string | number;
+    }
+
+    export type RecordOperation =
+        | { type: "link";   record: any }
+        | { type: "unlink"; id: string | number }
+        | { type: "delete"; id: string | number }
+        | { type: "create"; record: any }
+        | { type: "update"; id: string | number; data: any };
+</script>
+
 <script lang="ts">
     import _ from "lodash";
     import { getStudioContext } from "../../context";
@@ -5,9 +19,9 @@
     import Header from "./header.svelte";
     import Table, { type TableProps } from "./table.svelte";
     import { getCollectionColumns, getCollectionParamsFields } from "./utils";
-    import { Pencil, Trash } from "lucide-svelte";
+    import { Pencil, Trash, Unlink } from "lucide-svelte";
     import * as icons from "lucide-svelte";
-    import ChildRecords from "./childRecords.svelte";
+    import ListViewChildren from "./listViewChildren.svelte";
     import FieldCell from "./fieldCell.svelte";
     import Skeleton from "../ui/skeleton/skeleton.svelte";
     import Button from "../ui/button/button.svelte";
@@ -25,8 +39,12 @@
     interface Props {
         collectionName: string;
         filter?: any;
+        searchParams?: Record<string, any>;
+        parentContext?: ParentContext;
+        onOperation?: (op: RecordOperation) => void;
         showHeader?: boolean;
         showFooter?: boolean;
+        showImport?: boolean;
         unifiedBgColor?: "bg-muted/30" | "bg-background";
         showDelete?: boolean;
         tableProps?: Partial<TableProps>;
@@ -36,8 +54,12 @@
     let {
         collectionName,
         filter,
+        searchParams,
+        parentContext,
+        onOperation,
         showHeader = true,
         showFooter = true,
+        showImport = true,
         unifiedBgColor,
         showDelete = false,
         tableProps,
@@ -57,6 +79,7 @@
         sort: {},
         limit: "100",
         page: 1,
+        ...searchParams,
     });
 
     $effect(() => {
@@ -73,10 +96,9 @@
     );
     let dataTableContainerWidth: number = $state(0);
     let dataTableWidth: number = $state(0);
-    const doesCollectionHasChildren = Boolean(
-        ctx.meta.relations.find(
-            (relation) => relation.to.collection === collectionName,
-        ),
+    const doesCollectionHasChildren = $derived(
+        (ctx.meta.collections[collectionName]?.children ?? [])
+            .some((c: any) => c.type === "fk" || c.type === "m2m" || c.type === "polymorphic")
     );
 
     // requests the data from the server when the params is changed
@@ -107,14 +129,44 @@
         loading = false;
     }
 
+    // Internal handler: updates data optimistically then calls onOperation
+    function applyOperation(op: RecordOperation) {
+        if (op.type === "link") {
+            data = [...data, op.record];
+        } else if (op.type === "unlink" || op.type === "delete") {
+            data = data.filter((r: any) => String(r.id) !== String(op.id));
+        } else if (op.type === "create") {
+            data = [...data, { ...op.record, _pending: true }];
+        } else if (op.type === "update") {
+            data = data.map((r: any) => String(r.id) === String(op.id) ? { ...r, ...op.data } : r);
+        }
+        onOperation?.(op);
+    }
+
     async function handleDelete(entryId: string) {
-        const result = await showDialog(
-            "Are you sure?",
-            "This will delete the record you selected.",
-        );
+        const result = await showDialog("Are you sure?", "This will permanently delete the record.");
         if (result) {
-            await lobb.deleteOne(collectionName, entryId);
-            params = { ...params };
+            if (onOperation) {
+                applyOperation({ type: "delete", id: entryId });
+            } else if (parentContext) {
+                await lobb.updateOne(parentContext.collectionName, String(parentContext.recordId), {}, { [collectionName]: { delete: [entryId] } });
+                params = { ...params };
+            } else {
+                await lobb.deleteOne(collectionName, entryId);
+                params = { ...params };
+            }
+        }
+    }
+
+    async function handleUnlink(entryId: string) {
+        const result = await showDialog("Are you sure?", "This will unlink the record without deleting it.");
+        if (result) {
+            if (onOperation) {
+                applyOperation({ type: "unlink", id: entryId });
+            } else {
+                await lobb.updateOne(parentContext!.collectionName, String(parentContext!.recordId), {}, { [collectionName]: { unlink: [entryId] } });
+                params = { ...params };
+            }
         }
     }
 
@@ -157,7 +209,7 @@
     {/snippet}
 
     {#if showHeader}
-        <Header bind:params {collectionName} bind:selectedRecords>
+        <Header bind:params {collectionName} bind:selectedRecords {parentContext} {showImport} onOperation={onOperation ? applyOperation : undefined}>
             {#snippet left()}
                 {@render headerLeft?.()}
             {/snippet}
@@ -198,6 +250,16 @@
                                     params = { ...params };
                                 }}
                             ></UpdateDetailViewButton>
+                            {#if parentContext}
+                                <Button
+                                    class="h-6 w-6 text-muted-foreground hover:bg-transparent"
+                                    variant="ghost"
+                                    size="icon"
+                                    onclick={() => handleUnlink(entry.id)}
+                                    Icon={Unlink}
+                                    title="Remove from this entry"
+                                ></Button>
+                            {/if}
                             {#if showDelete}
                                 <Button
                                     class="h-6 w-6 text-muted-foreground hover:bg-transparent"
@@ -205,6 +267,7 @@
                                     size="icon"
                                     onclick={() => handleDelete(entry.id)}
                                     Icon={Trash}
+                                    title="Delete permanently"
                                 ></Button>
                             {/if}
                             {#await getWorkflowTools($state.snapshot(entry))}
@@ -232,7 +295,7 @@
                             />
                         {/snippet}
                         {#snippet collapsible(entry)}
-                            <ChildRecords
+                            <ListViewChildren
                                 {collectionName}
                                 recordId={entry.id}
                                 width={dataTableWidth > dataTableContainerWidth