@lobb-js/studio 0.12.0 → 0.14.0

package/dist/components/dataTable/dataTable.svelte

@@ -17,6 +17,8 @@
     import type { Snippet } from "svelte";
     import ExtensionsComponents from "../extensionsComponents.svelte";
     import { getExtensionUtils, loadExtensionComponents } from "../../extensions/extensionUtils";
+    import Tabs from "./dataTableTabs.svelte";
+    import { fade } from "svelte/transition";
 
     const { lobb, ctx } = getStudioContext();
 
@@ -46,15 +48,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([]);
@@ -76,6 +85,7 @@
     });
 
     async function loadData(params: any) {
+        loading = true;
         // parsing sort before sending the request
         const paramsCopy = $state.snapshot(params);
         const sort: TableProps["sort"] = paramsCopy.sort;
@@ -153,83 +163,88 @@
             {/snippet}
         </Header>
     {/if}
+    <Tabs {collectionName} {filter} bind:activeTabFilter />
     <div class="relative flex-1 overflow-auto w-full">
-        {#if loading}
-            <div class="flex flex-col gap-2 p-2 w-full">
-                <Skeleton class="h-8 w-full" />
-                <Skeleton class="h-8 w-[80%]" />
-                <Skeleton class="h-8 w-[60%]" />
-            </div>
-        {:else}
-            <Table
-                {data}
-                {columns}
-                showCollapsible={doesCollectionHasChildren}
-                selectByColumn="id"
-                showLastRowBorder={true}
-                showLastColumnBorder={true}
-                bind:sort={params.sort}
-                bind:selectedRecords
-                {unifiedBgColor}
-                bind:tableWidth={dataTableWidth}
-                {...tableProps}
-                rowActions={hasRowActions ? rowActionsSnippet : undefined}>
-                {#snippet tools(entry)}
-                    <UpdateDetailViewButton
-                        {collectionName}
-                        recordId={entry.id}
-                        variant="ghost"
-                        class="h-5 w-5 px-0 py-0 text-muted-foreground hover:bg-transparent"
-                        Icon={Pencil}
-                        onSuccessfullSave={async () => {
-                            params = { ...params };
-                        }}
-                    ></UpdateDetailViewButton>
-                    {#if showDelete}
-                        <Button
-                            class="h-6 w-6 text-muted-foreground hover:bg-transparent"
-                            variant="ghost"
-                            size="icon"
-                            onclick={() => handleDelete(entry.id)}
-                            Icon={Trash}
-                        ></Button>
-                    {/if}
-                    {#await getWorkflowTools($state.snapshot(entry))}
-                        <div></div>
-                    {:then workflowTools}
-                        {#each workflowTools as workflowTool}
-                            <Button
+        {#key activeTabFilter}
+            <div class="h-full w-full" in:fade={{ duration: 120 }}>
+                {#if loading}
+                    <div class="flex flex-col gap-2 p-2 w-full">
+                        <Skeleton class="h-8 w-full" />
+                        <Skeleton class="h-8 w-[80%]" />
+                        <Skeleton class="h-8 w-[60%]" />
+                    </div>
+                {:else}
+                    <Table
+                        {data}
+                        {columns}
+                        showCollapsible={doesCollectionHasChildren}
+                        selectByColumn="id"
+                        showLastRowBorder={true}
+                        showLastColumnBorder={true}
+                        bind:sort={params.sort}
+                        bind:selectedRecords
+                        {unifiedBgColor}
+                        bind:tableWidth={dataTableWidth}
+                        {...tableProps}
+                        rowActions={hasRowActions ? rowActionsSnippet : undefined}>
+                        {#snippet tools(entry)}
+                            <UpdateDetailViewButton
+                                {collectionName}
+                                recordId={entry.id}
                                 variant="ghost"
                                 class="h-5 w-5 px-0 py-0 text-muted-foreground hover:bg-transparent"
-                                Icon={icons[
-                                    workflowTool.icon as keyof typeof icons
-                                ]}
-                                onclick={workflowTool.onclick}
-                            ></Button>
-                        {/each}
-                    {/await}
-                {/snippet}
-                {#snippet overrideCell(value, column, entry)}
-                    <FieldCell
-                        {collectionName}
-                        fieldName={column.id}
-                        {value}
-                        {entry}
-                        tableParams={params}
-                    />
-                {/snippet}
-                {#snippet collapsible(entry)}
-                    <ChildRecords
-                        {collectionName}
-                        recordId={entry.id}
-                        width={dataTableWidth > dataTableContainerWidth
-                            ? dataTableContainerWidth
-                            : dataTableWidth}
-                        unifiedBgColor={unifiedBgColor ?? "bg-background"}
-                    />
-                {/snippet}
-            </Table>
-        {/if}
+                                Icon={Pencil}
+                                onSuccessfullSave={async () => {
+                                    params = { ...params };
+                                }}
+                            ></UpdateDetailViewButton>
+                            {#if showDelete}
+                                <Button
+                                    class="h-6 w-6 text-muted-foreground hover:bg-transparent"
+                                    variant="ghost"
+                                    size="icon"
+                                    onclick={() => handleDelete(entry.id)}
+                                    Icon={Trash}
+                                ></Button>
+                            {/if}
+                            {#await getWorkflowTools($state.snapshot(entry))}
+                                <div></div>
+                            {:then workflowTools}
+                                {#each workflowTools as workflowTool}
+                                    <Button
+                                        variant="ghost"
+                                        class="h-5 w-5 px-0 py-0 text-muted-foreground hover:bg-transparent"
+                                        Icon={icons[
+                                            workflowTool.icon as keyof typeof icons
+                                        ]}
+                                        onclick={workflowTool.onclick}
+                                    ></Button>
+                                {/each}
+                            {/await}
+                        {/snippet}
+                        {#snippet overrideCell(value, column, entry)}
+                            <FieldCell
+                                {collectionName}
+                                fieldName={column.id}
+                                {value}
+                                {entry}
+                                tableParams={params}
+                            />
+                        {/snippet}
+                        {#snippet collapsible(entry)}
+                            <ChildRecords
+                                {collectionName}
+                                recordId={entry.id}
+                                width={dataTableWidth > dataTableContainerWidth
+                                    ? dataTableContainerWidth
+                                    : dataTableWidth}
+                                unifiedBgColor={unifiedBgColor ?? "bg-background"}
+                            />
+                        {/snippet}
+                    </Table>
+                {/if}
+            </div>
+        {/key}
     </div>
     {#if showFooter}
         <Footer

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/dataTable/header.svelte

@@ -10,6 +10,8 @@
     import CreateManyButton from "../createManyButton.svelte";
     import { showDialog } from "../confirmationDialog/store.svelte";
     import CreateDetailViewButton from "../detailView/create/createDetailViewButton.svelte";
+    import ExtensionsComponents from "../extensionsComponents.svelte";
+    import { getExtensionUtils } from "../../extensions/extensionUtils";
     import type { Snippet } from "svelte";
 
     interface Props {
@@ -142,6 +144,12 @@
             Icon={SquareStack}
             onSuccessfullSave={() => (params = { ...params })}
         ></CreateManyButton>
+        <ExtensionsComponents
+            name="listView.header.actions"
+            utils={getExtensionUtils(lobb, ctx)}
+            {collectionName}
+            refresh={() => { params = { ...params }; }}
+        />
         <CreateDetailViewButton
             {collectionName}
             variant="default"

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/components/singletone.svelte

@@ -6,30 +6,27 @@
     import Button from "./ui/button/button.svelte";
     import { onMount } from "svelte";
     import { getStudioContext } from "../context";
+    import { toast } from "svelte-sonner";
+    import Skeleton from "./ui/skeleton/skeleton.svelte";
 
     const { lobb, ctx } = getStudioContext();
-  import { toast } from "svelte-sonner";
-  import Skeleton from "./ui/skeleton/skeleton.svelte";
 
     interface Props {
         collectionName: string;
     }
 
-    let {
-        collectionName,
-    }: Props = $props();
+    let { collectionName }: Props = $props();
 
     let entry = $state({});
     let loading = $state(true);
-    let singletonExists = $state(true);
     const formFields = getCollectionFields(ctx, collectionName);
 
     onMount(async () => {
-        const result = await lobb.readSingleton(collectionName);
-        const json = await result.json();
-        if (result.status === 404) {
-            singletonExists = false;
-        } else {
+        const result = await fetch(`${lobb.lobbUrl}/api/collections/${collectionName}/singleton`, {
+            headers: lobb.getHeaders() as HeadersInit,
+        });
+        if (result.status !== 404) {
+            const json = await result.json();
             entry = json.data;
         }
         loading = false;
@@ -43,29 +40,27 @@
     }
 </script>
 
-<div>
-    <div class="flex justify-between items-center gap-2 p-2 border-b bg-background h-10">
+<div class="flex flex-col h-full bg-background">
+    <div class="flex justify-between items-center gap-2 p-2 border-b h-10 shrink-0">
         <div class="flex items-center gap-1">
             <SidebarTrigger />
         </div>
         <div>
-            <Button
-                class="h-7 px-2 font-normal text-xs"
-                Icon={Save}
-                onclick={handleSave}
-            >
+            <Button class="h-7 px-2 font-normal text-xs" Icon={Save} onclick={handleSave}>
                 Save
             </Button>
         </div>
     </div>
 
     {#if loading}
-        <div class="flex flex-col gap-2 p-2 w-full">
+        <div class="flex flex-col gap-2 p-4 w-full">
             <Skeleton class="h-8 w-full" />
             <Skeleton class="h-8 w-[80%]" />
             <Skeleton class="h-8 w-[60%]" />
         </div>
     {:else}
-        <DetailViewForm bind:value={entry} fields={formFields} />
+        <div class="flex-1 overflow-y-auto max-w-xl">
+            <DetailViewForm bind:value={entry} fields={formFields} />
+        </div>
     {/if}
 </div>

package/dist/extensions/extension.types.d.ts

@@ -73,7 +73,7 @@ export interface ExtensionProps {
     utils: ExtensionUtils;
     [key: string]: any;
 }
-export type ExtensionComponentKey = `pages.${string}` | "studio.listView" | `dvFields.topRight.${string}.${string}` | `detailView.update.subRecords.${string}` | `detailView.create.subRecords.${string}` | `detailView.fields.topRight.${string}.${string}` | `detailView.fields.foreignKey.${string}` | `listView.entry.children.${string}` | `listView.entry.actions`;
+export type ExtensionComponentKey = `pages.${string}` | "studio.listView" | `dvFields.topRight.${string}.${string}` | `detailView.update.subRecords.${string}` | `detailView.create.subRecords.${string}` | `detailView.fields.topRight.${string}.${string}` | `detailView.fields.foreignKey.${string}` | `listView.entry.children.${string}` | `listView.entry.actions` | `listView.header.actions`;
 export type ExtensionComponent = any | {
     component: any;
     when: (props: Record<string, any>) => boolean;

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.14.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,8 @@
     import type { Snippet } from "svelte";
     import ExtensionsComponents from "../extensionsComponents.svelte";
     import { getExtensionUtils, loadExtensionComponents } from "../../extensions/extensionUtils";
+    import Tabs from "./dataTableTabs.svelte";
+    import { fade } from "svelte/transition";
 
     const { lobb, ctx } = getStudioContext();
 
@@ -46,15 +48,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([]);
@@ -76,6 +85,7 @@
     });
 
     async function loadData(params: any) {
+        loading = true;
         // parsing sort before sending the request
         const paramsCopy = $state.snapshot(params);
         const sort: TableProps["sort"] = paramsCopy.sort;
@@ -153,83 +163,88 @@
             {/snippet}
         </Header>
     {/if}
+    <Tabs {collectionName} {filter} bind:activeTabFilter />
     <div class="relative flex-1 overflow-auto w-full">
-        {#if loading}
-            <div class="flex flex-col gap-2 p-2 w-full">
-                <Skeleton class="h-8 w-full" />
-                <Skeleton class="h-8 w-[80%]" />
-                <Skeleton class="h-8 w-[60%]" />
-            </div>
-        {:else}
-            <Table
-                {data}
-                {columns}
-                showCollapsible={doesCollectionHasChildren}
-                selectByColumn="id"
-                showLastRowBorder={true}
-                showLastColumnBorder={true}
-                bind:sort={params.sort}
-                bind:selectedRecords
-                {unifiedBgColor}
-                bind:tableWidth={dataTableWidth}
-                {...tableProps}
-                rowActions={hasRowActions ? rowActionsSnippet : undefined}>
-                {#snippet tools(entry)}
-                    <UpdateDetailViewButton
-                        {collectionName}
-                        recordId={entry.id}
-                        variant="ghost"
-                        class="h-5 w-5 px-0 py-0 text-muted-foreground hover:bg-transparent"
-                        Icon={Pencil}
-                        onSuccessfullSave={async () => {
-                            params = { ...params };
-                        }}
-                    ></UpdateDetailViewButton>
-                    {#if showDelete}
-                        <Button
-                            class="h-6 w-6 text-muted-foreground hover:bg-transparent"
-                            variant="ghost"
-                            size="icon"
-                            onclick={() => handleDelete(entry.id)}
-                            Icon={Trash}
-                        ></Button>
-                    {/if}
-                    {#await getWorkflowTools($state.snapshot(entry))}
-                        <div></div>
-                    {:then workflowTools}
-                        {#each workflowTools as workflowTool}
-                            <Button
+        {#key activeTabFilter}
+            <div class="h-full w-full" in:fade={{ duration: 120 }}>
+                {#if loading}
+                    <div class="flex flex-col gap-2 p-2 w-full">
+                        <Skeleton class="h-8 w-full" />
+                        <Skeleton class="h-8 w-[80%]" />
+                        <Skeleton class="h-8 w-[60%]" />
+                    </div>
+                {:else}
+                    <Table
+                        {data}
+                        {columns}
+                        showCollapsible={doesCollectionHasChildren}
+                        selectByColumn="id"
+                        showLastRowBorder={true}
+                        showLastColumnBorder={true}
+                        bind:sort={params.sort}
+                        bind:selectedRecords
+                        {unifiedBgColor}
+                        bind:tableWidth={dataTableWidth}
+                        {...tableProps}
+                        rowActions={hasRowActions ? rowActionsSnippet : undefined}>
+                        {#snippet tools(entry)}
+                            <UpdateDetailViewButton
+                                {collectionName}
+                                recordId={entry.id}
                                 variant="ghost"
                                 class="h-5 w-5 px-0 py-0 text-muted-foreground hover:bg-transparent"
-                                Icon={icons[
-                                    workflowTool.icon as keyof typeof icons
-                                ]}
-                                onclick={workflowTool.onclick}
-                            ></Button>
-                        {/each}
-                    {/await}
-                {/snippet}
-                {#snippet overrideCell(value, column, entry)}
-                    <FieldCell
-                        {collectionName}
-                        fieldName={column.id}
-                        {value}
-                        {entry}
-                        tableParams={params}
-                    />
-                {/snippet}
-                {#snippet collapsible(entry)}
-                    <ChildRecords
-                        {collectionName}
-                        recordId={entry.id}
-                        width={dataTableWidth > dataTableContainerWidth
-                            ? dataTableContainerWidth
-                            : dataTableWidth}
-                        unifiedBgColor={unifiedBgColor ?? "bg-background"}
-                    />
-                {/snippet}
-            </Table>
-        {/if}
+                                Icon={Pencil}
+                                onSuccessfullSave={async () => {
+                                    params = { ...params };
+                                }}
+                            ></UpdateDetailViewButton>
+                            {#if showDelete}
+                                <Button
+                                    class="h-6 w-6 text-muted-foreground hover:bg-transparent"
+                                    variant="ghost"
+                                    size="icon"
+                                    onclick={() => handleDelete(entry.id)}
+                                    Icon={Trash}
+                                ></Button>
+                            {/if}
+                            {#await getWorkflowTools($state.snapshot(entry))}
+                                <div></div>
+                            {:then workflowTools}
+                                {#each workflowTools as workflowTool}
+                                    <Button
+                                        variant="ghost"
+                                        class="h-5 w-5 px-0 py-0 text-muted-foreground hover:bg-transparent"
+                                        Icon={icons[
+                                            workflowTool.icon as keyof typeof icons
+                                        ]}
+                                        onclick={workflowTool.onclick}
+                                    ></Button>
+                                {/each}
+                            {/await}
+                        {/snippet}
+                        {#snippet overrideCell(value, column, entry)}
+                            <FieldCell
+                                {collectionName}
+                                fieldName={column.id}
+                                {value}
+                                {entry}
+                                tableParams={params}
+                            />
+                        {/snippet}
+                        {#snippet collapsible(entry)}
+                            <ChildRecords
+                                {collectionName}
+                                recordId={entry.id}
+                                width={dataTableWidth > dataTableContainerWidth
+                                    ? dataTableContainerWidth
+                                    : dataTableWidth}
+                                unifiedBgColor={unifiedBgColor ?? "bg-background"}
+                            />
+                        {/snippet}
+                    </Table>
+                {/if}
+            </div>
+        {/key}
     </div>
     {#if showFooter}
         <Footer

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/dataTable/header.svelte

@@ -10,6 +10,8 @@
     import CreateManyButton from "../createManyButton.svelte";
     import { showDialog } from "../confirmationDialog/store.svelte";
     import CreateDetailViewButton from "../detailView/create/createDetailViewButton.svelte";
+    import ExtensionsComponents from "../extensionsComponents.svelte";
+    import { getExtensionUtils } from "../../extensions/extensionUtils";
     import type { Snippet } from "svelte";
 
     interface Props {
@@ -142,6 +144,12 @@
             Icon={SquareStack}
             onSuccessfullSave={() => (params = { ...params })}
         ></CreateManyButton>
+        <ExtensionsComponents
+            name="listView.header.actions"
+            utils={getExtensionUtils(lobb, ctx)}
+            {collectionName}
+            refresh={() => { params = { ...params }; }}
+        />
         <CreateDetailViewButton
             {collectionName}
             variant="default"

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/components/singletone.svelte

@@ -6,30 +6,27 @@
     import Button from "./ui/button/button.svelte";
     import { onMount } from "svelte";
     import { getStudioContext } from "../context";
+    import { toast } from "svelte-sonner";
+    import Skeleton from "./ui/skeleton/skeleton.svelte";
 
     const { lobb, ctx } = getStudioContext();
-  import { toast } from "svelte-sonner";
-  import Skeleton from "./ui/skeleton/skeleton.svelte";
 
     interface Props {
         collectionName: string;
     }
 
-    let {
-        collectionName,
-    }: Props = $props();
+    let { collectionName }: Props = $props();
 
     let entry = $state({});
     let loading = $state(true);
-    let singletonExists = $state(true);
     const formFields = getCollectionFields(ctx, collectionName);
 
     onMount(async () => {
-        const result = await lobb.readSingleton(collectionName);
-        const json = await result.json();
-        if (result.status === 404) {
-            singletonExists = false;
-        } else {
+        const result = await fetch(`${lobb.lobbUrl}/api/collections/${collectionName}/singleton`, {
+            headers: lobb.getHeaders() as HeadersInit,
+        });
+        if (result.status !== 404) {
+            const json = await result.json();
             entry = json.data;
         }
         loading = false;
@@ -43,29 +40,27 @@
     }
 </script>
 
-<div>
-    <div class="flex justify-between items-center gap-2 p-2 border-b bg-background h-10">
+<div class="flex flex-col h-full bg-background">
+    <div class="flex justify-between items-center gap-2 p-2 border-b h-10 shrink-0">
         <div class="flex items-center gap-1">
             <SidebarTrigger />
         </div>
         <div>
-            <Button
-                class="h-7 px-2 font-normal text-xs"
-                Icon={Save}
-                onclick={handleSave}
-            >
+            <Button class="h-7 px-2 font-normal text-xs" Icon={Save} onclick={handleSave}>
                 Save
             </Button>
         </div>
     </div>
 
     {#if loading}
-        <div class="flex flex-col gap-2 p-2 w-full">
+        <div class="flex flex-col gap-2 p-4 w-full">
             <Skeleton class="h-8 w-full" />
             <Skeleton class="h-8 w-[80%]" />
             <Skeleton class="h-8 w-[60%]" />
         </div>
     {:else}
-        <DetailViewForm bind:value={entry} fields={formFields} />
+        <div class="flex-1 overflow-y-auto max-w-xl">
+            <DetailViewForm bind:value={entry} fields={formFields} />
+        </div>
     {/if}
 </div>

package/src/lib/extensions/extension.types.ts

@@ -93,7 +93,8 @@ export type ExtensionComponentKey =
     | `detailView.fields.topRight.${string}.${string}`
     | `detailView.fields.foreignKey.${string}`
     | `listView.entry.children.${string}`
-    | `listView.entry.actions`;
+    | `listView.entry.actions`
+    | `listView.header.actions`;
 
 export type ExtensionComponent =
     | any

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>;