@lobb-js/studio 0.30.0 → 0.32.0

package/src/lib/components/detailView/create/createDetailViewChildren.svelte

@@ -0,0 +1,113 @@
+<script lang="ts">
+    import DataTable from "../../dataTable/dataTable.svelte";
+    import { getStudioContext } from "../../../context";
+    import { Table, Link, Plus } from "lucide-svelte";
+    import { untrack } from "svelte";
+    import CreateDetailViewButton from "./createDetailViewButton.svelte";
+    import SelectRecord from "../../selectRecord.svelte";
+
+    const { ctx } = getStudioContext();
+
+    import type { Changes, ChildrenChanges } from "../utils";
+
+    interface LocalProp {
+        collectionName: string;
+        changes?: Changes;
+        onChanges?: (children: Changes["children"]) => void;
+    }
+
+    let { collectionName, changes, onChanges }: LocalProp = $props();
+
+    const children = (ctx.meta.collections[collectionName]?.children ?? [])
+        .filter((c: any) => c.type === "fk" || c.type === "m2m" || c.type === "polymorphic");
+
+    let localChildren = $state<Changes["children"]>(untrack(() => changes?.children ?? {}));
+
+    function handleChildChanges(collection: string, updated: ChildrenChanges) {
+        localChildren[collection] = updated;
+        onChanges?.($state.snapshot(localChildren));
+    }
+
+    function handleEmptyCreate(collection: string, c: Changes) {
+        if (!localChildren[collection]) {
+            localChildren[collection] = { created: [], updated: [], deleted: [], linked: [], unlinked: [] };
+        }
+        localChildren[collection].created.push({ data: c.data });
+        onChanges?.($state.snapshot(localChildren));
+    }
+
+    function handleEmptyLink(collection: string, record: any) {
+        if (!localChildren[collection]) {
+            localChildren[collection] = { created: [], updated: [], deleted: [], linked: [], unlinked: [] };
+        }
+        localChildren[collection].linked.push(record);
+        onChanges?.($state.snapshot(localChildren));
+    }
+</script>
+
+{#if children.length}
+    <div class="flex flex-col gap-3 border-t p-4">
+        <div class="flex items-center gap-2">
+            <Link size="14" class="text-muted-foreground" />
+            <span class="text-sm font-medium">Sub Records</span>
+        </div>
+        {#each children as child}
+            {@const localAdditions = (localChildren[child.collection]?.created.length ?? 0) + (localChildren[child.collection]?.linked.length ?? 0)}
+            {#if localAdditions === 0}
+                <div class="rounded-lg border bg-muted-soft overflow-hidden flex flex-col">
+                    <div class="flex flex-col items-center justify-center gap-3 py-6 px-4">
+                        <div class="flex flex-col items-center gap-2 text-center">
+                            <div class="flex items-center gap-1.5 text-sm font-medium text-muted-foreground">
+                                <span>No records in</span>
+                                <span class="rounded-md border bg-muted px-2 py-0.5 text-xs font-normal">{child.collection}</span>
+                            </div>
+                            <span class="text-xs text-muted-foreground/70">Create a new record or link an existing one.</span>
+                        </div>
+                        <div class="flex gap-2">
+                            <SelectRecord
+                                collectionName={child.collection}
+                                variant="outline"
+                                class="h-7 px-3 text-xs font-normal"
+                                Icon={Link}
+                                onSelect={(r) => handleEmptyLink(child.collection, r)}
+                            >
+                                Link
+                            </SelectRecord>
+                            <CreateDetailViewButton
+                                collectionName={child.collection}
+                                variant="default"
+                                class="h-7 px-3 text-xs font-normal"
+                                Icon={Plus}
+                                onChanges={(c) => handleEmptyCreate(child.collection, c)}
+                            >
+                                Create
+                            </CreateDetailViewButton>
+                        </div>
+                    </div>
+                </div>
+            {:else}
+                <div class="rounded-lg border bg-background overflow-hidden flex flex-col max-h-96">
+                    <DataTable
+                        collectionName={child.collection}
+                        searchParams={{ children_of: collectionName, parent_id: -1 }}
+                        onChanges={(updated) => handleChildChanges(child.collection, updated)}
+                        changes={localChildren[child.collection]}
+                        showImport={false}
+                        showHeader={true}
+                        showFooter={false}
+                        showDelete={false}
+                        showEdit={false}
+                        tableProps={{ showLastColumnBorder: false, showLastRowBorder: true }}
+                    >
+                        {#snippet headerLeft()}
+                            <div class="flex items-center gap-2 px-1">
+                                <Table size="14" class="text-muted-foreground" />
+                                <span class="text-sm font-medium">{child.collection}</span>
+                            </div>
+                        {/snippet}
+                    </DataTable>
+                </div>
+            {/if}
+        {/each}
+    </div>
+{/if}

package/src/lib/components/detailView/create/createManyView.svelte

@@ -145,7 +145,7 @@
                 class="h-7 px-2 font-normal text-xs"
                 Icon={Plus}
                 {collectionName}
-                changes={addChanges}
+                onChanges={(updated) => { addChanges = updated; }}
                 showRelatedRecords={true}
                 onSuccessfullSave={onRecordAdd}
                 values={createValues}
@@ -200,7 +200,7 @@
                             class="h-6 w-6 text-muted-foreground hover:bg-transparent p-0"
                             Icon={Pencil}
                             {collectionName}
-                            changes={editChanges}
+                            onChanges={(updated) => { editChanges = updated; }}
                             showRelatedRecords={true}
                             onSuccessfullSave={(entry) =>
                                 onRecordOverride(entry, index)}

package/src/lib/components/detailView/detailView.svelte

@@ -20,8 +20,13 @@
     }: Props = $props();
 
     const { lobb, ctx } = getStudioContext();
+    // Singleton collections only ever have one row, and `id` is auto-
+    // generated for that row — there's no value to showing it in the form.
     const fieldNames = $derived(
-        Object.keys(ctx.meta.collections[collectionName].fields),
+        Object.keys(ctx.meta.collections[collectionName].fields).filter(
+            (fieldName) =>
+                !(ctx.meta.collections[collectionName].singleton && fieldName === "id"),
+        ),
     );
 </script>
 

package/src/lib/components/detailView/fieldInput.svelte

@@ -6,6 +6,7 @@
 	import Button from "../ui/button/button.svelte";
 	import FieldCustomInput from "./fieldCustomInput.svelte";
 	import Input from "../ui/input/input.svelte";
+	import NumberInput from "../ui/input/numberInput.svelte";
 	import * as Select from "../ui/select/index";
 	import EnumBadge from "../dataTable/enumBadge.svelte";
 	import type { EnumOption } from "@lobb-js/core";
@@ -257,11 +258,12 @@
 					</Select.Item>
 				</Select.Content>
 			</Select.Root>
-		{:else if field.type === "decimal"}
-			<Input
+		{:else if field.type === "decimal" || field.type === "float" || field.type === "integer" || field.type === "long"}
+			{@const isFloat = field.type === "decimal" || field.type === "float"}
+			<NumberInput
 				placeholder={ui?.placeholder ? ui.placeholder : "NULL"}
-				type="number"
-				step="any"
+				scale={isFloat ? 20 : 0}
+				groupDigits={ui?.groupDigits ?? false}
 				class="
 					bg-muted-soft text-xs
 					{destructive ? 'border-destructive bg-destructive/10' : ''}
@@ -271,7 +273,7 @@
 		{:else}
 			<Input
 				placeholder={ui?.placeholder ? ui.placeholder : "NULL"}
-				type="number"
+				type="text"
 				class="
 					bg-muted-soft text-xs
 					{destructive ? 'border-destructive bg-destructive/10' : ''}

package/src/lib/components/detailView/update/updateDetailView.svelte

@@ -1,4 +1,7 @@
 <script lang="ts" module>
+    import type { Changes } from "../utils";
+    import type { Snippet } from "svelte";
+
     interface SubmitButton {
         text: string;
         icon: any;
@@ -8,12 +11,13 @@
         collectionName: string;
         recordId: string;
         values?: Record<string, any>;
+        changes?: Changes;
+        onChanges?: (changes: Changes) => void;
         showRelatedRecords?: boolean;
         submitButton?: SubmitButton;
         title?: Snippet<[string]>;
         onSuccessfullSave?: (entry: any) => Promise<void>;
         onCancel?: () => Promise<void>;
-        changes?: import("../utils").Changes | undefined;
     }
 </script>
 
@@ -26,10 +30,9 @@
 
     const { lobb, ctx } = getStudioContext();
     import { getChangedProperties } from "../../../utils";
-    import DetailViewChildren from "./detailViewChildren.svelte";
-    import type { Snippet } from "svelte";
+    import UpdateDetailViewChildren from "./updateDetailViewChildren.svelte";
     import { getDefaultEntry } from "../utils";
-    import type { Changes, ChildrenChanges } from "../utils";
+    import type { ChildrenChanges } from "../utils";
     import DetailView from "../detailView.svelte";
     import Drawer from "../../drawer.svelte";
 
@@ -42,50 +45,67 @@
         title,
         submitButton,
         recordId,
-        changes: passedChanges = $bindable<Changes | undefined>(undefined),
+        changes,
+        onChanges,
     }: UpdateDetailViewProp = $props();
 
-    // Recording mode = changes was passed from a parent component
-    const isRecordingMode = passedChanges !== undefined;
-    if (!isRecordingMode) passedChanges = { data: {}, children: {} };
-    const changes = passedChanges as Changes;
+    const isRecordingMode = onChanges !== undefined;
+    let localChanges = $state<Changes>(
+        untrack(() => ({ data: changes?.data ?? {}, children: changes?.children ?? {} }))
+    );
 
     const fieldNames = Object.keys(ctx.meta.collections[collectionName].fields);
-    let values = $state(getDefaultEntry(ctx, fieldNames, collectionName, passedValues));
-    const initialValues = $state.snapshot(values);
+    const mergedValues = untrack(() => changes?.data
+        ? { ...passedValues, ...changes.data }
+        : passedValues);
+    let values = $state(getDefaultEntry(ctx, fieldNames, collectionName, mergedValues));
+    const initialValues = $state.snapshot(getDefaultEntry(ctx, fieldNames, collectionName, passedValues));
     let fieldsErrors: Record<string, any> = $state({});
 
     const hasChanges = $derived(
-        Object.keys(changes.data).length > 0 ||
-        Object.values(changes.children).some(
+        Object.keys(localChanges.data).length > 0 ||
+        Object.values(localChanges.children).some(
             (ch: ChildrenChanges) => ch.created.length || ch.updated.length || ch.deleted.length || ch.linked.length || ch.unlinked.length,
         ),
     );
 
-    // Tracks top-level field edits into changes.data.
-    // Child ops (create/link/unlink/delete) are written directly by DataTable into changes.children.
     $effect(() => {
         const currentEntrySnap = $state.snapshot(values);
 
         untrack(() => {
-            changes.data = getChangedProperties(initialValues, currentEntrySnap);
+            localChanges.data = getChangedProperties(initialValues, currentEntrySnap);
         });
     });
 
-    // Separate logging effect — needs its own $effect so it tracks mutations to changes.children.
     $effect(() => {
-        if (!isRecordingMode) {
-            console.log(`[${collectionName}] changes:`, $state.snapshot(changes));
+        const snap = $state.snapshot(localChanges);
+        if (isRecordingMode) {
+            const hasAny = Object.keys(snap.data).length > 0 ||
+                Object.values(snap.children).some((c: ChildrenChanges) =>
+                    c.created.length || c.updated.length || c.deleted.length || c.linked.length || c.unlinked.length
+                );
+            if (hasAny) untrack(() => onChanges?.(snap));
         }
     });
 
-    function buildApiChildren(children: Record<string, ChildrenChanges>): Record<string, any> | undefined {
+    function buildPayload(changes: Changes): { data: Record<string, any>; children?: Record<string, any> } {
+        const { id: _id, ...data } = changes.data;
+        const children = buildChildren(changes.children);
+        return { data, ...(children ? { children } : {}) };
+    }
+
+    function buildChildren(children: Record<string, ChildrenChanges>): Record<string, any> | undefined {
         const result: Record<string, any> = {};
         for (const [collection, ops] of Object.entries(children)) {
-            const hasOps = ops.created.length || ops.deleted.length || ops.linked.length || ops.unlinked.length;
+            const hasOps = ops.created.length || ops.updated.length || ops.deleted.length || ops.linked.length || ops.unlinked.length;
             if (!hasOps) continue;
             result[collection] = {
                 ...(ops.created.length ? { create: ops.created.map((op) => op.data) } : {}),
+                ...(ops.updated.length ? { update: ops.updated.map((u) => ({
+                    id: u.id,
+                    ...(Object.keys(u.changes.data).length ? { data: u.changes.data } : {}),
+                    ...(Object.keys(u.changes.children).length ? { children: buildChildren(u.changes.children) } : {}),
+                })) } : {}),
                 ...(ops.deleted.length ? { delete: ops.deleted.map((r) => r.id) } : {}),
                 ...(ops.linked.length ? { link: ops.linked.map((r) => r.id) } : {}),
                 ...(ops.unlinked.length ? { unlink: ops.unlinked.map((r) => r.id) } : {}),
@@ -95,21 +115,15 @@
     }
 
     function handleCancel() {
-        if (isRecordingMode) {
-            changes.data = {};
-            changes.children = {};
-        }
         onCancel?.();
     }
 
     async function handleSave() {
-        const snap = $state.snapshot(changes);
-        const { id: _id, ...data } = snap.data;
-        const children = buildApiChildren(snap.children);
-
-        const response = await lobb.updateOne(collectionName, recordId, data, children, isRecordingMode);
+        const snap = $state.snapshot(localChanges);
+        const response = await lobb.updateOne(collectionName, recordId, buildPayload(snap), isRecordingMode);
 
         if (response.status === 204) {
+            onChanges?.(snap);
             if (onSuccessfullSave) await onSuccessfullSave(snap);
             toast.success(`The record was successfully updated`);
             onCancel?.();
@@ -129,15 +143,7 @@
             }
         }
 
-        // Real mode: also fire separate update requests for edited children
-        if (!isRecordingMode) {
-            for (const [collection, ops] of Object.entries(snap.children) as [string, ChildrenChanges][]) {
-                for (const updated of ops.updated) {
-                    await lobb.updateOne(collection, String(updated.id), updated.data);
-                }
-            }
-        }
-
+        onChanges?.(snap);
         if (onSuccessfullSave) await onSuccessfullSave(snap);
         toast.success(`The record was successfully updated`);
         onCancel?.();
@@ -166,7 +172,7 @@
     <div class="flex-1 overflow-y-auto">
         <DetailView {collectionName} bind:entry={values} {fieldsErrors} />
         {#if showRelatedRecords}
-            <DetailViewChildren {collectionName} entry={values} activeChanges={changes} />
+            <UpdateDetailViewChildren {collectionName} entry={values} changes={localChanges} onChanges={(children) => { localChanges.children = children; }} />
         {/if}
     </div>
     <div class="flex h-12 items-center justify-end gap-2 border-t px-4">

package/src/lib/components/detailView/update/updateDetailViewButton.svelte

@@ -46,7 +46,6 @@
 	<UpdateDetailView
 		{...props}
 		{values}
-		changes={props.changes}
 		onCancel={async () => {
 			open = false;
 			values = undefined;

package/src/lib/components/detailView/update/updateDetailViewChildren.svelte

@@ -0,0 +1,122 @@
+<script lang="ts">
+    import DataTable from "../../dataTable/dataTable.svelte";
+    import { getStudioContext } from "../../../context";
+    import { Table, Link, Plus } from "lucide-svelte";
+    import { untrack } from "svelte";
+    import CreateDetailViewButton from "../create/createDetailViewButton.svelte";
+    import SelectRecord from "../../selectRecord.svelte";
+
+    const { ctx } = getStudioContext();
+
+    import type { Changes, ChildrenChanges } from "../utils";
+
+    interface LocalProp {
+        collectionName: string;
+        entry: any;
+        changes?: Changes;
+        onChanges?: (children: Changes["children"]) => void;
+    }
+
+    let { collectionName, entry, changes, onChanges }: LocalProp = $props();
+
+    const children = (ctx.meta.collections[collectionName]?.children ?? [])
+        .filter((c: any) => c.type === "fk" || c.type === "m2m" || c.type === "polymorphic");
+
+    let localChildren = $state<Changes["children"]>(untrack(() => changes?.children ?? {}));
+    let serverCounts = $state<Record<string, number | undefined>>({});
+
+    function handleChildChanges(collection: string, updated: ChildrenChanges) {
+        localChildren[collection] = updated;
+        onChanges?.($state.snapshot(localChildren));
+    }
+
+    function handleDataLoad(collection: string, total: number) {
+        serverCounts[collection] = total;
+    }
+
+    function handleEmptyCreate(collection: string, c: Changes) {
+        if (!localChildren[collection]) {
+            localChildren[collection] = { created: [], updated: [], deleted: [], linked: [], unlinked: [] };
+        }
+        localChildren[collection].created.push({ data: c.data });
+        onChanges?.($state.snapshot(localChildren));
+    }
+
+    function handleEmptyLink(collection: string, record: any) {
+        if (!localChildren[collection]) {
+            localChildren[collection] = { created: [], updated: [], deleted: [], linked: [], unlinked: [] };
+        }
+        localChildren[collection].linked.push(record);
+        onChanges?.($state.snapshot(localChildren));
+    }
+</script>
+
+{#if children.length}
+    <div class="flex flex-col gap-3 border-t p-4">
+        <div class="flex items-center gap-2">
+            <Link size="14" class="text-muted-foreground" />
+            <span class="text-sm font-medium">Sub Records</span>
+        </div>
+        {#each children as child}
+            {@const serverCount = serverCounts[child.collection]}
+            {@const localAdditions = (localChildren[child.collection]?.created.length ?? 0) + (localChildren[child.collection]?.linked.length ?? 0)}
+            {@const showEmpty = serverCount !== undefined && serverCount === 0 && localAdditions === 0}
+            {#if showEmpty}
+                <div class="rounded-lg border bg-muted-soft overflow-hidden flex flex-col">
+                    <div class="flex flex-col items-center justify-center gap-3 py-6 px-4">
+                        <div class="flex flex-col items-center gap-2 text-center">
+                            <div class="flex items-center gap-1.5 text-sm font-medium text-muted-foreground">
+                                <span>No records in</span>
+                                <span class="rounded-md border bg-muted px-2 py-0.5 text-xs font-normal">{child.collection}</span>
+                            </div>
+                            <span class="text-xs text-muted-foreground/70">Create a new record or link an existing one.</span>
+                        </div>
+                        <div class="flex gap-2">
+                            <SelectRecord
+                                collectionName={child.collection}
+                                variant="outline"
+                                class="h-7 px-3 text-xs font-normal"
+                                Icon={Link}
+                                onSelect={(r) => handleEmptyLink(child.collection, r)}
+                            >
+                                Link
+                            </SelectRecord>
+                            <CreateDetailViewButton
+                                collectionName={child.collection}
+                                variant="default"
+                                class="h-7 px-3 text-xs font-normal"
+                                Icon={Plus}
+                                onChanges={(c) => handleEmptyCreate(child.collection, c)}
+                            >
+                                Create
+                            </CreateDetailViewButton>
+                        </div>
+                    </div>
+                </div>
+            {:else}
+                <div class="rounded-lg border bg-background overflow-hidden flex flex-col max-h-96">
+                    <DataTable
+                        collectionName={child.collection}
+                        searchParams={{ children_of: collectionName, parent_id: entry.id }}
+                        parentContext={{ collectionName, recordId: entry.id }}
+                        onChanges={(updated) => handleChildChanges(child.collection, updated)}
+                        changes={localChildren[child.collection]}
+                        showImport={false}
+                        showHeader={true}
+                        showFooter={true}
+                        showDelete={child.type === "fk" || child.type === "m2m"}
+                        tableProps={{ showLastColumnBorder: false, showLastRowBorder: true }}
+                        onDataLoad={(total) => handleDataLoad(child.collection, total)}
+                    >
+                        {#snippet headerLeft()}
+                            <div class="flex items-center gap-2 px-1">
+                                <Table size="14" class="text-muted-foreground" />
+                                <span class="text-sm font-medium">{child.collection}</span>
+                            </div>
+                        {/snippet}
+                    </DataTable>
+                </div>
+            {/if}
+        {/each}
+    </div>
+{/if}

package/src/lib/components/detailView/utils.ts

@@ -5,7 +5,7 @@ import type { DetailFormField } from "./detailViewForm.svelte";
 
 export type ChildrenChanges = {
     created: Array<{ data: Record<string, any> }>;
-    updated: Array<{ id: string | number; data: Record<string, any>; children: Record<string, ChildrenChanges> }>;
+    updated: Array<{ id: string | number; changes: Changes }>;
     deleted: Array<Record<string, any>>;
     linked: Array<Record<string, any>>;
     unlinked: Array<Record<string, any>>;

package/src/lib/components/importButton.svelte

@@ -132,7 +132,7 @@
 			importResults = [];
 			let hasSuccess = false;
 			for (const row of finalRows) {
-				const response = await lobb.createOne(collectionName, row);
+				const response = await lobb.createOne(collectionName, { data: row });
 				if (response.ok) {
 					importResults.push({ row, error: null });
 					hasSuccess = true;

package/src/lib/components/miniSidebar.svelte

@@ -90,12 +90,15 @@
 	// prefix of everything); other items use startsWith so sub-paths
 	// (e.g. /studio/collections/risks) still highlight their parent.
 	// Popover items with children are active when any of their children match.
-	const currentPath = $derived(page.url.pathname);
+	// SvelteKit's pathname can come back with a trailing slash (`/studio/`)
+	// depending on config, so we normalize it before comparing.
+	const currentPath = $derived(page.url.pathname.replace(/\/$/, "") || "/");
 	function isItemActive(item: any): boolean {
 		if (item.navs) return item.navs.some((c: any) => isItemActive(c));
 		if (!item.href) return false;
-		if (item.href === "/studio") return currentPath === "/studio";
-		return currentPath === item.href || currentPath.startsWith(item.href + "/");
+		const itemHref = item.href.replace(/\/$/, "") || "/";
+		if (itemHref === "/studio") return currentPath === "/studio";
+		return currentPath === itemHref || currentPath.startsWith(itemHref + "/");
 	}
 
 	// onMount is enough — Studio gets remounted on login/logout (see

package/src/lib/components/richTextEditor.svelte

@@ -72,6 +72,8 @@
 			extensions: [
 				StarterKit.configure({
 					heading: { levels: [1, 2, 3] },
+					underline: false,
+					link: false,
 				}),
 				UnderlineExt,
 				LinkExt.configure({ openOnClick: false }),

package/src/lib/components/routes/extensions/extension.svelte

@@ -8,7 +8,7 @@
     const { lobb, ctx } = getStudioContext();
 </script>
 
-<div class="grid overflow-auto bg-background">
+<div class="grid h-full overflow-auto bg-background">
     {#key extension && page}
         <ExtensionsComponents
             name="pages.{page}"

package/src/lib/components/routes/home.svelte

@@ -3,29 +3,43 @@
     import { goto } from "$app/navigation";
     import { ArrowRight } from "lucide-svelte";
     import HomeFooter from "./homeFooter.svelte";
+    import ExtensionsComponents from "../extensionsComponents.svelte";
+    import { getExtensionUtils } from "../../extensions/extensionUtils";
+    import { getStudioContext } from "../../context";
+
+    const { lobb, ctx } = getStudioContext();
 </script>
 
-<div class="flex flex-col">
-    <div
-        class="flex flex-1 w-full flex-col items-center justify-center gap-4 text-muted-foreground"
-    >
-        <div class="flex flex-col items-center justify-center p-4">
-            <div class="text-3xl">Welcome to Lobb!</div>
-            <div class="text-xs text-center">
-                Your journey starts here. Explore and make the most of your
-                experience.
+<!--
+    Any extension that registers a `pages.home` component takes over /studio
+    (e.g. an app-specific overview dashboard). ExtensionsComponents falls
+    back to rendering its children when nothing matches, so the default
+    Lobb welcome below stays as the safety net for projects without an
+    overriding extension.
+-->
+<ExtensionsComponents name="pages.home" utils={getExtensionUtils(lobb, ctx)}>
+    <div class="flex h-full flex-col">
+        <div
+            class="flex flex-1 w-full flex-col items-center justify-center gap-4 text-muted-foreground"
+        >
+            <div class="flex flex-col items-center justify-center p-4">
+                <div class="text-3xl">Welcome to Lobb!</div>
+                <div class="text-xs text-center">
+                    Your journey starts here. Explore and make the most of your
+                    experience.
+                </div>
+            </div>
+            <div class="flex flex-col items-center justify-center">
+                <Button
+                    Icon={ArrowRight}
+                    variant="outline"
+                    class="h-7 px-3 text-xs font-normal"
+                    onclick={() => goto("/studio/collections")}
+                >
+                    Go to collections
+                </Button>
             </div>
         </div>
-        <div class="flex flex-col items-center justify-center">
-            <Button
-                Icon={ArrowRight}
-                variant="outline"
-                class="h-7 px-3 text-xs font-normal"
-                onclick={() => goto("/studio/collections")}
-            >
-                Go to collections
-            </Button>
-        </div>
+        <HomeFooter />
     </div>
-    <HomeFooter />
-</div>
+</ExtensionsComponents>