@lobb-js/studio 0.12.0 → 0.13.0

package/dist/components/dataTable/dataTable.svelte

@@ -17,6 +17,7 @@
     import type { Snippet } from "svelte";
     import ExtensionsComponents from "../extensionsComponents.svelte";
     import { getExtensionUtils, loadExtensionComponents } from "../../extensions/extensionUtils";
+    import Tabs from "./dataTableTabs.svelte";
 
     const { lobb, ctx } = getStudioContext();
 
@@ -46,15 +47,22 @@
         loadExtensionComponents(ctx, "listView.entry.actions", undefined, { collectionName }).length > 0
     );
 
+    let activeTabFilter = $state<any>(undefined);
+
     const fields = getCollectionParamsFields(ctx, collectionName);
     let params = $state({
         fields: fields,
-        filter: filter ?? {},
+        filter: { ...filter, ...activeTabFilter },
         sort: {},
         limit: "100",
         page: 1,
     });
 
+    $effect(() => {
+        const tabFilter = activeTabFilter;
+        params.filter = { ...filter, ...tabFilter };
+    });
+
     let selectedRecords = $state([]);
     let totalCount = $state(0);
     let data: TableProps["data"] = $state([]);
@@ -146,6 +154,7 @@
         />
     {/snippet}
 
+    <Tabs {collectionName} {filter} bind:activeTabFilter />
     {#if showHeader}
         <Header bind:params {collectionName} bind:selectedRecords>
             {#snippet left()}

package/dist/components/dataTable/dataTableTabs.svelte

@@ -0,0 +1,65 @@
+<script lang="ts">
+    import { getStudioContext } from "../../context";
+
+    const { lobb, ctx } = getStudioContext();
+
+    interface Props {
+        collectionName: string;
+        filter?: any;
+        activeTabFilter?: any;
+    }
+
+    let { collectionName, filter, activeTabFilter = $bindable() }: Props = $props();
+
+    const tabs = ctx.meta.collections[collectionName].ui?.tabs;
+    let activeTab = $state<string | null>(null);
+    let tabCounts = $state<Record<string, number>>({});
+
+    async function loadTabCounts() {
+        if (!tabs) return;
+        const results = await Promise.all(
+            tabs.map(async (tab) => {
+                const res = await lobb.findAll(collectionName, { filter: { ...filter, ...tab.filter }, limit: 1 });
+                const json = await res.json();
+                return { key: tab.id ?? tab.label, count: json.meta.totalCount };
+            })
+        );
+        tabCounts = Object.fromEntries(results.map(({ key, count }) => [key, count]));
+    }
+
+    $effect(() => {
+        loadTabCounts();
+    });
+
+    $effect(() => {
+        if (!tabs) return;
+        const key = (t: typeof tabs[0]) => t.id ?? t.label;
+        const tab = activeTab
+            ? tabs.find((t) => key(t) === activeTab)
+            : tabs.find((t) => t.default) ?? tabs[0];
+        activeTabFilter = tab?.filter;
+    });
+</script>
+
+{#if tabs}
+    <div class="flex items-center gap-1 px-3 py-1.5 border-b shrink-0 bg-background">
+        {#each tabs as tab}
+            {@const key = tab.id ?? tab.label}
+            {@const isActive = activeTab ? activeTab === key : (tab.default ?? tabs[0] === tab)}
+            <button
+                onclick={() => activeTab = key}
+                class="inline-flex items-center px-2.5 py-1 text-[11px] rounded-md transition-colors
+                    {isActive
+                        ? 'bg-muted text-foreground font-medium'
+                        : 'text-muted-foreground hover:text-foreground hover:bg-muted/50'}"
+            >
+                {tab.label}
+                {#if tabCounts[key] !== undefined}
+                    <span class="ml-1.5 px-1.5 py-0.5 rounded-full text-[10px] {isActive ? 'bg-muted-foreground/20 text-foreground' : 'bg-muted text-muted-foreground'}">
+                        {tabCounts[key]}
+                    </span>
+                {/if}
+            </button>
+        {/each}
+    </div>
+{/if}

package/dist/components/dataTable/dataTableTabs.svelte.d.ts

@@ -0,0 +1,8 @@
+interface Props {
+    collectionName: string;
+    filter?: any;
+    activeTabFilter?: any;
+}
+declare const DataTableTabs: import("svelte").Component<Props, {}, "activeTabFilter">;
+type DataTableTabs = ReturnType<typeof DataTableTabs>;
+export default DataTableTabs;

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

@@ -1,30 +1,33 @@
-<script>
-    import { CircleSlash2 } from "lucide-svelte";
+<script lang="ts">
+    import { CircleSlash2, Zap } from "lucide-svelte";
     import DataTable from "../../../components/dataTable/dataTable.svelte";
     import SidebarTrigger from "../../../components/sidebar/sidebarTrigger.svelte";
     import { getStudioContext } from "../../../context";
     import Singletone from "../../../components/singletone.svelte";
-    import { getExtensionUtils } from "../../../extensions/extensionUtils";
-    import ExtensionsComponents from "../../../components/extensionsComponents.svelte";
 
-    const { ctx, lobb } = getStudioContext();
+    const { ctx } = getStudioContext();
 
     let { collectionName } = $props();
     let isSingletonCollection = $derived(ctx.meta.collections[collectionName].singleton);
+    let isVirtualCollection = $derived(ctx.meta.collections[collectionName].virtual);
 
     let containerWidth = $state();
 </script>
 
 <div bind:clientWidth={containerWidth} class="h-full">
     {#if collectionName}
-        <!-- TODO: add support in here for the views for each collection view -->
-        <!-- {#if true}
-            <ExtensionsComponents
-                name="studio.listView"
-                utils={getExtensionUtils(lobb, ctx)}
-            ></ExtensionsComponents>
-        {:else if isSingletonCollection} -->
-        {#if isSingletonCollection}
+        {#if isVirtualCollection}
+            <div class="relative flex h-full w-full flex-col items-center justify-center gap-4 text-muted-foreground">
+                <Zap class="opacity-50" size="50" />
+                <div class="flex flex-col items-center justify-center">
+                    <div>Virtual collection</div>
+                    <div class="text-xs">This collection has no database table. It exists only as an API endpoint for workflows to intercept.</div>
+                </div>
+                <div class="absolute top-0 left-0 p-2.5">
+                    <SidebarTrigger />
+                </div>
+            </div>
+        {:else if isSingletonCollection}
             <Singletone collectionName={collectionName} />
         {:else}
             <DataTable

package/dist/components/routes/collections/collection.svelte.d.ts

@@ -1,11 +1,5 @@
-export default Collection;
-type Collection = {
-    $on?(type: string, callback: (e: any) => void): () => void;
-    $set?(props: Partial<$$ComponentProps>): void;
-};
 declare const Collection: import("svelte").Component<{
     collectionName: any;
 }, {}, "">;
-type $$ComponentProps = {
-    collectionName: any;
-};
+type Collection = ReturnType<typeof Collection>;
+export default Collection;

package/dist/store.types.d.ts

@@ -1,9 +1,19 @@
 import type { Extension } from "../extensions/extension.types";
+interface CollectionTab {
+    id?: string;
+    label: string;
+    filter?: Record<string, any>;
+    default?: boolean;
+}
 interface Collection {
     category: string;
     owner: string;
     fields: Record<string, any>;
     singleton: boolean;
+    virtual?: boolean;
+    ui?: {
+        tabs?: CollectionTab[];
+    };
 }
 type Collections = Record<string, Collection>;
 interface Meta {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@lobb-js/studio",
   "license": "UNLICENSED",
-  "version": "0.12.0",
+  "version": "0.13.0",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -42,7 +42,7 @@
     "postpublish": "./scripts/postpublish.sh"
   },
   "devDependencies": {
-    "@lobb-js/core": "^0.18.0",
+    "@lobb-js/core": "^0.19.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

@@ -17,6 +17,7 @@
     import type { Snippet } from "svelte";
     import ExtensionsComponents from "../extensionsComponents.svelte";
     import { getExtensionUtils, loadExtensionComponents } from "../../extensions/extensionUtils";
+    import Tabs from "./dataTableTabs.svelte";
 
     const { lobb, ctx } = getStudioContext();
 
@@ -46,15 +47,22 @@
         loadExtensionComponents(ctx, "listView.entry.actions", undefined, { collectionName }).length > 0
     );
 
+    let activeTabFilter = $state<any>(undefined);
+
     const fields = getCollectionParamsFields(ctx, collectionName);
     let params = $state({
         fields: fields,
-        filter: filter ?? {},
+        filter: { ...filter, ...activeTabFilter },
         sort: {},
         limit: "100",
         page: 1,
     });
 
+    $effect(() => {
+        const tabFilter = activeTabFilter;
+        params.filter = { ...filter, ...tabFilter };
+    });
+
     let selectedRecords = $state([]);
     let totalCount = $state(0);
     let data: TableProps["data"] = $state([]);
@@ -146,6 +154,7 @@
         />
     {/snippet}
 
+    <Tabs {collectionName} {filter} bind:activeTabFilter />
     {#if showHeader}
         <Header bind:params {collectionName} bind:selectedRecords>
             {#snippet left()}

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

@@ -0,0 +1,65 @@
+<script lang="ts">
+    import { getStudioContext } from "../../context";
+
+    const { lobb, ctx } = getStudioContext();
+
+    interface Props {
+        collectionName: string;
+        filter?: any;
+        activeTabFilter?: any;
+    }
+
+    let { collectionName, filter, activeTabFilter = $bindable() }: Props = $props();
+
+    const tabs = ctx.meta.collections[collectionName].ui?.tabs;
+    let activeTab = $state<string | null>(null);
+    let tabCounts = $state<Record<string, number>>({});
+
+    async function loadTabCounts() {
+        if (!tabs) return;
+        const results = await Promise.all(
+            tabs.map(async (tab) => {
+                const res = await lobb.findAll(collectionName, { filter: { ...filter, ...tab.filter }, limit: 1 });
+                const json = await res.json();
+                return { key: tab.id ?? tab.label, count: json.meta.totalCount };
+            })
+        );
+        tabCounts = Object.fromEntries(results.map(({ key, count }) => [key, count]));
+    }
+
+    $effect(() => {
+        loadTabCounts();
+    });
+
+    $effect(() => {
+        if (!tabs) return;
+        const key = (t: typeof tabs[0]) => t.id ?? t.label;
+        const tab = activeTab
+            ? tabs.find((t) => key(t) === activeTab)
+            : tabs.find((t) => t.default) ?? tabs[0];
+        activeTabFilter = tab?.filter;
+    });
+</script>
+
+{#if tabs}
+    <div class="flex items-center gap-1 px-3 py-1.5 border-b shrink-0 bg-background">
+        {#each tabs as tab}
+            {@const key = tab.id ?? tab.label}
+            {@const isActive = activeTab ? activeTab === key : (tab.default ?? tabs[0] === tab)}
+            <button
+                onclick={() => activeTab = key}
+                class="inline-flex items-center px-2.5 py-1 text-[11px] rounded-md transition-colors
+                    {isActive
+                        ? 'bg-muted text-foreground font-medium'
+                        : 'text-muted-foreground hover:text-foreground hover:bg-muted/50'}"
+            >
+                {tab.label}
+                {#if tabCounts[key] !== undefined}
+                    <span class="ml-1.5 px-1.5 py-0.5 rounded-full text-[10px] {isActive ? 'bg-muted-foreground/20 text-foreground' : 'bg-muted text-muted-foreground'}">
+                        {tabCounts[key]}
+                    </span>
+                {/if}
+            </button>
+        {/each}
+    </div>
+{/if}

package/src/lib/components/routes/collections/collection.svelte

@@ -1,30 +1,33 @@
-<script>
-    import { CircleSlash2 } from "lucide-svelte";
+<script lang="ts">
+    import { CircleSlash2, Zap } from "lucide-svelte";
     import DataTable from "../../../components/dataTable/dataTable.svelte";
     import SidebarTrigger from "../../../components/sidebar/sidebarTrigger.svelte";
     import { getStudioContext } from "../../../context";
     import Singletone from "../../../components/singletone.svelte";
-    import { getExtensionUtils } from "../../../extensions/extensionUtils";
-    import ExtensionsComponents from "../../../components/extensionsComponents.svelte";
 
-    const { ctx, lobb } = getStudioContext();
+    const { ctx } = getStudioContext();
 
     let { collectionName } = $props();
     let isSingletonCollection = $derived(ctx.meta.collections[collectionName].singleton);
+    let isVirtualCollection = $derived(ctx.meta.collections[collectionName].virtual);
 
     let containerWidth = $state();
 </script>
 
 <div bind:clientWidth={containerWidth} class="h-full">
     {#if collectionName}
-        <!-- TODO: add support in here for the views for each collection view -->
-        <!-- {#if true}
-            <ExtensionsComponents
-                name="studio.listView"
-                utils={getExtensionUtils(lobb, ctx)}
-            ></ExtensionsComponents>
-        {:else if isSingletonCollection} -->
-        {#if isSingletonCollection}
+        {#if isVirtualCollection}
+            <div class="relative flex h-full w-full flex-col items-center justify-center gap-4 text-muted-foreground">
+                <Zap class="opacity-50" size="50" />
+                <div class="flex flex-col items-center justify-center">
+                    <div>Virtual collection</div>
+                    <div class="text-xs">This collection has no database table. It exists only as an API endpoint for workflows to intercept.</div>
+                </div>
+                <div class="absolute top-0 left-0 p-2.5">
+                    <SidebarTrigger />
+                </div>
+            </div>
+        {:else if isSingletonCollection}
             <Singletone collectionName={collectionName} />
         {:else}
             <DataTable

package/src/lib/store.types.ts

@@ -1,10 +1,21 @@
 import type { Extension } from "../extensions/extension.types";
 
+interface CollectionTab {
+    id?: string;
+    label: string;
+    filter?: Record<string, any>;
+    default?: boolean;
+}
+
 interface Collection {
     category: string;
     owner: string;
     fields: Record<string, any>;
     singleton: boolean;
+    virtual?: boolean;
+    ui?: {
+        tabs?: CollectionTab[];
+    };
 }
 type Collections = Record<string, Collection>;