@lobb-js/studio 0.28.6 → 0.29.1

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

@@ -1,43 +1,32 @@
 <script lang="ts">
-    import DataTable, { type RecordOperation } from "../../../components/dataTable/dataTable.svelte";
+    import DataTable from "../../dataTable/dataTable.svelte";
     import { getStudioContext } from "../../../context";
     import { Table, Link } from "lucide-svelte";
 
     const { ctx } = getStudioContext();
 
-    type PendingOps = {
-        link?: (string | number)[];
-        unlink?: (string | number)[];
-        delete?: (string | number)[];
-        create?: any[];
-    };
+    import type { Changes, ChildrenChanges } from "../utils";
 
     interface LocalProp {
         collectionName: string;
         entry: any;
-        pendingChildren?: Record<string, PendingOps>;
+        activeChanges?: Changes;
     }
 
-    let { collectionName, entry, pendingChildren = $bindable({}) }: LocalProp = $props();
-
-    function makeHandler(collection: string) {
-        return (op: RecordOperation) => {
-            if (!pendingChildren[collection]) pendingChildren[collection] = {};
-            const c = pendingChildren[collection];
-            if (op.type === "link") {
-                (c.link ??= []).push(op.record.id);
-            } else if (op.type === "unlink") {
-                (c.unlink ??= []).push(op.id);
-            } else if (op.type === "delete") {
-                (c.delete ??= []).push(op.id);
-            } else if (op.type === "create") {
-                (c.create ??= []).push(op.record);
-            }
-        };
-    }
+    let { collectionName, entry, activeChanges }: LocalProp = $props();
 
     const children = (ctx.meta.collections[collectionName]?.children ?? [])
         .filter((c: any) => c.type === "fk" || c.type === "m2m" || c.type === "polymorphic");
+
+    // Ensure all child collection slots exist before the template renders so bind:changes works
+    $effect.pre(() => {
+        if (!activeChanges) return;
+        for (const child of children) {
+            if (!activeChanges.children[child.collection]) {
+                activeChanges.children[child.collection] = { created: [], updated: [], deleted: [], linked: [], unlinked: [] };
+            }
+        }
+    });
 </script>
 
 {#if children.length}
@@ -52,7 +41,7 @@
                     collectionName={child.collection}
                     searchParams={{ children_of: collectionName, parent_id: entry.id }}
                     parentContext={{ collectionName, recordId: entry.id }}
-                    onOperation={makeHandler(child.collection)}
+                    bind:changes={activeChanges!.children[child.collection]}
                     showImport={false}
                     showHeader={true}
                     showFooter={true}

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

@@ -9,64 +9,112 @@
         recordId: string;
         values?: Record<string, any>;
         showRelatedRecords?: boolean;
-        rollback?: boolean;
         submitButton?: SubmitButton;
         title?: Snippet<[string]>;
         onSuccessfullSave?: (entry: any) => Promise<void>;
         onCancel?: () => Promise<void>;
+        changes?: import("../utils").Changes | undefined;
     }
 </script>
 
 <script lang="ts">
     import { ArrowLeft, Pencil, X } from "lucide-svelte";
-    import Button from "../../../components/ui/button/button.svelte";
-    import { fade, fly } from "svelte/transition";
+    import Button from "../../ui/button/button.svelte";
     import { getStudioContext } from "../../../context";
     import { toast } from "svelte-sonner";
-    import ExtensionsComponents from "../../extensionsComponents.svelte";
-    import { getExtensionUtils } from "../../../extensions/extensionUtils";
+    import { untrack } from "svelte";
 
     const { lobb, ctx } = getStudioContext();
-    import { calculateDrawerWidth, getChangedProperties } from "../../../utils";
-    import { getField, getFieldIcon } from "../../dataTable/utils";
-    import DetailViewChildren from "../update/detailViewChildren.svelte";
+    import { getChangedProperties } from "../../../utils";
+    import DetailViewChildren from "./detailViewChildren.svelte";
     import type { Snippet } from "svelte";
     import { getDefaultEntry } from "../utils";
-    import FieldInput from "../fieldInput.svelte";
-  import Drawer from "../../../components/drawer.svelte";
+    import type { Changes, ChildrenChanges } from "../utils";
+    import DetailView from "../detailView.svelte";
+    import Drawer from "../../drawer.svelte";
 
     let {
         collectionName,
-        values = {},
+        values: passedValues = {} as Record<string, any>,
         showRelatedRecords = true,
         onCancel,
         onSuccessfullSave,
         title,
         submitButton,
         recordId,
+        changes: passedChanges = $bindable<Changes | undefined>(undefined),
     }: 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 fieldNames = Object.keys(ctx.meta.collections[collectionName].fields);
-    let entry: Record<string, any> = $state(
-        getDefaultEntry(ctx, fieldNames, collectionName, values),
-    );
-    const initialEntry = $state.snapshot(entry);
-    let localEntry = $derived(
-        getChangedProperties(initialEntry, $state.snapshot(entry)),
-    );
+    let values = $state(getDefaultEntry(ctx, fieldNames, collectionName, passedValues));
+    const initialValues = $state.snapshot(values);
     let fieldsErrors: Record<string, any> = $state({});
-    let pendingChildren = $state<Record<string, any>>({});
+
+    const hasChanges = $derived(
+        Object.keys(changes.data).length > 0 ||
+        Object.values(changes.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);
+        });
+    });
+
+    // Separate logging effect — needs its own $effect so it tracks mutations to changes.children.
+    $effect(() => {
+        if (!isRecordingMode) {
+            console.log(`[${collectionName}] changes:`, $state.snapshot(changes));
+        }
+    });
+
+    function buildApiChildren(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;
+            if (!hasOps) continue;
+            result[collection] = {
+                ...(ops.created.length ? { create: ops.created.map((op) => op.data) } : {}),
+                ...(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) } : {}),
+            };
+        }
+        return Object.keys(result).length ? result : undefined;
+    }
+
+    function handleCancel() {
+        if (isRecordingMode) {
+            changes.data = {};
+            changes.children = {};
+        }
+        onCancel?.();
+    }
 
     async function handleSave() {
-        delete localEntry.id;
+        const snap = $state.snapshot(changes);
+        const { id: _id, ...data } = snap.data;
+        const children = buildApiChildren(snap.children);
 
-        const children = Object.keys(pendingChildren).length ? pendingChildren : undefined;
-        const response = await lobb.updateOne(
-            collectionName,
-            recordId,
-            localEntry,
-            children,
-        );
+        const response = await lobb.updateOne(collectionName, recordId, data, children, isRecordingMode);
+
+        if (response.status === 204) {
+            if (onSuccessfullSave) await onSuccessfullSave(snap);
+            toast.success(`The record was successfully updated`);
+            onCancel?.();
+            return;
+        }
 
         if (!response.bodyUsed) {
             const result = await response.json();
@@ -75,27 +123,32 @@
                     fieldsErrors = result.details;
                     return;
                 } else if (result.message) {
+                    toast.error(result.message);
                     return;
                 }
             }
         }
 
-        // close detailView side bar
-        if (onSuccessfullSave) {
-            await onSuccessfullSave(localEntry);
+        // 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);
+                }
+            }
         }
 
+        if (onSuccessfullSave) await onSuccessfullSave(snap);
         toast.success(`The record was successfully updated`);
-
         onCancel?.();
     }
 </script>
 
-<Drawer onHide={onCancel}>
+<Drawer onHide={handleCancel}>
     <div class="flex h-12 items-center gap-4 border-b px-4">
         <Button
             variant="outline"
-            onclick={onCancel}
+            onclick={handleCancel}
             class=" h-8 w-8 rounded-full text-xs font-normal"
             Icon={ArrowLeft}
         ></Button>
@@ -111,48 +164,16 @@
         </div>
     </div>
     <div class="flex-1 overflow-y-auto">
-        <div class="flex flex-col gap-4 p-4">
-            {#each fieldNames as fieldName}
-                {#if !ctx.meta.collections[collectionName].fields[fieldName]?.ui?.hidden}
-                    {@const field = getField(ctx, fieldName, collectionName)}
-                    {@const FieldIcon = getFieldIcon(ctx, fieldName, collectionName)}
-                    <div class="flex flex-col gap-2">
-                        <div class="flex flex-1 items-end justify-between gap-2 text-xs">
-                            <div class="flex gap-2">
-                                <div class="h-fit">{field.label}</div>
-                                <div class="flex h-fit items-center gap-1 text-[0.7rem] text-muted-foreground">
-                                    <FieldIcon size="12" />
-                                    {field.type}
-                                </div>
-                            </div>
-                            <div>
-                                <ExtensionsComponents
-                                    name="dvFields.topRight.{collectionName}.{fieldName}"
-                                    utils={getExtensionUtils(lobb, ctx)}
-                                    bind:value={entry[fieldName]}
-                                />
-                            </div>
-                        </div>
-                        <FieldInput
-                            {collectionName}
-                            {fieldName}
-                            bind:value={entry[fieldName]}
-                            bind:entry
-                            errorMessages={fieldsErrors[fieldName]}
-                        />
-                    </div>
-                {/if}
-            {/each}
-        </div>
+        <DetailView {collectionName} bind:entry={values} {fieldsErrors} />
         {#if showRelatedRecords}
-            <DetailViewChildren {collectionName} {entry} bind:pendingChildren />
+            <DetailViewChildren {collectionName} entry={values} activeChanges={changes} />
         {/if}
     </div>
     <div class="flex h-12 items-center justify-end gap-2 border-t px-4">
         <div class="flex gap-3">
             <Button
                 variant="outline"
-                onclick={onCancel}
+                onclick={handleCancel}
                 class="h-7 px-3 text-xs font-normal"
                 Icon={X}
             >
@@ -163,7 +184,7 @@
                 class="h-7 px-3 text-xs font-normal"
                 Icon={submitButton?.icon ? submitButton.icon : Pencil}
                 onclick={handleSave}
-                disabled={!Object.keys(localEntry).length && !Object.keys(pendingChildren).length}
+                disabled={!hasChanges}
             >
                 {submitButton?.text ? submitButton.text : "Update"}
             </Button>

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

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import type { UpdateDetailViewProp } from "./updateDetailView.svelte";
-	import type { ButtonProps } from "../../../components/ui/button/button.svelte";
-	import Button from "../../../components/ui/button/button.svelte";
+	import type { ButtonProps } from "../../ui/button/button.svelte";
+	import Button from "../../ui/button/button.svelte";
 	import UpdateDetailView from "./updateDetailView.svelte";
 	import { getStudioContext } from "../../../context";
 
@@ -46,6 +46,7 @@
 	<UpdateDetailView
 		{...props}
 		{values}
+		changes={props.changes}
 		onCancel={async () => {
 			open = false;
 			values = undefined;

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

@@ -3,6 +3,19 @@ import type { CTX } from "../../store.types";
 import { getField } from "../dataTable/utils";
 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> }>;
+    deleted: Array<Record<string, any>>;
+    linked: Array<Record<string, any>>;
+    unlinked: Array<Record<string, any>>;
+};
+
+export type Changes = {
+    data: Record<string, any>;
+    children: Record<string, ChildrenChanges>;
+};
+
 export function getDefaultEntry(ctx: CTX, fieldNames: string[], collectionName: string, values?: Record<string, any>) {
     return Object.fromEntries(
         fieldNames.map((fieldName) => {

package/src/lib/components/diffViewer.svelte

@@ -96,7 +96,7 @@
 	});
 </script>
 
-<div class={cn("w-full resize-y rounded-md border bg-muted/30 shadow-sm", className)}>
+<div class={cn("w-full resize-y rounded-md border bg-muted-soft shadow-sm", className)}>
 	<div
 		bind:this={editorContainer}
 		class="editor pl-2"

package/src/lib/components/extensionsComponents.svelte

@@ -26,7 +26,9 @@
 
 {#if Components.length}
 	{#each Components as Component}
-		<Component bind:value {...props} />
+		<Component bind:value {...props}>
+			{#if children}{@render children()}{/if}
+		</Component>
 	{/each}
 {:else}
 	{@render children?.()}

package/src/lib/components/foreingKeyInput.svelte

@@ -85,7 +85,7 @@
             placeholder={"NULL"}
             type="number"
             class="
-                bg-muted/30 text-xs
+                bg-muted-soft text-xs
                 {destructive ? 'border-destructive bg-destructive/10' : ''}
             "
             bind:value={
@@ -98,7 +98,7 @@
     <div class="relative z-10">
         <Input
             placeholder={"PARENT ID"}
-            class="bg-muted/30 text-xs"
+            class="bg-muted-soft text-xs"
             disabled={true}
         />
     </div>

package/src/lib/components/importButton.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { AlertCircle, Check, FileText, LoaderCircle, Upload, X } from "lucide-svelte";
+	import { AlertCircle, Check, Download, FileText, LoaderCircle, Upload, X } from "lucide-svelte";
 	import Button, { type ButtonProps } from "./ui/button/button.svelte";
 	import { toast } from "svelte-sonner";
 	import { getStudioContext } from "../context";
@@ -170,10 +170,15 @@
 	}
 </script>
 
-<Button variant={rest.variant} class={rest.class} Icon={rest.Icon} onclick={showDrawer}>
-	{#if rest.children}
-		{@render rest.children()}
-	{/if}
+<Button variant={rest.variant} class={rest.class} onclick={showDrawer}>
+	<ExtensionsComponents
+		name="collections.import.button.content"
+		utils={getExtensionUtils(lobb, ctx)}
+		{collectionName}
+	>
+		<rest.Icon />
+		Import
+	</ExtensionsComponents>
 </Button>
 
 <Dialog.Root
@@ -231,7 +236,7 @@
 						tabindex="0"
 						onkeydown={(e) => e.key === "Enter" && fileInput.click()}
 					>
-						<Upload class="mb-3 h-8 w-8 text-muted-foreground" />
+						<Download class="mb-3 h-8 w-8 text-muted-foreground" />
 						<p class="text-sm font-medium">Drop a file here or click to browse</p>
 						<p class="mt-1 text-xs text-muted-foreground">Supports .csv and .json</p>
 					</div>
@@ -244,7 +249,7 @@
 					/>
 				{:else}
 					<textarea
-						class="block h-56 w-full resize-none rounded-md border bg-muted/30 p-3 font-mono text-sm focus:outline-none focus:ring-1 focus:ring-ring"
+						class="block h-56 w-full resize-none rounded-md border bg-muted-soft p-3 font-mono text-sm focus:outline-none focus:ring-1 focus:ring-ring"
 						placeholder="Paste CSV or JSON here..."
 						bind:value={pasteContent}
 					></textarea>
@@ -279,7 +284,6 @@
 					data={transformedRows}
 					columns={collectionColumns.filter((c) => c.id !== "id")}
 					showCheckboxes={false}
-					unifiedBgColor="bg-background"
 					headerBorderTop={true}
 				/>
 			</div>
@@ -328,7 +332,6 @@
 						data={failedData}
 						columns={[{ id: "__error", icon: AlertCircle }, ...collectionColumns.filter((c) => c.id !== "id")]}
 						showCheckboxes={false}
-						unifiedBgColor="bg-background"
 						headerBorderTop={true}
 					>
 						{#snippet overrideCell(value, column)}

package/src/lib/components/landing.svelte

@@ -1,3 +1,10 @@
+<script lang="ts">
+    import { onMount } from "svelte";
+    onMount(() => {
+        document.getElementById("app-loading")?.remove();
+    });
+</script>
+
 <div class="min-h-screen flex items-center justify-center bg-background text-foreground p-6">
 	<div class="max-w-md text-center space-y-4">
 		<h1 class="text-2xl font-semibold">Lobb Studio</h1>

package/src/lib/components/miniSidebar.svelte

@@ -12,20 +12,23 @@
 
 <script lang="ts">
 	import { House, Layers, Library, Workflow, X } from "lucide-svelte";
-	import Button from "../components/ui/button/button.svelte";
-	import Separator from "../components/ui/separator/separator.svelte";
-	import * as Tooltip from "../components/ui/tooltip";
-	import * as Accordion from "../components/ui/accordion/index.js";
+	import Button from "./ui/button/button.svelte";
+	import Separator from "./ui/separator/separator.svelte";
+	import * as Tooltip from "./ui/tooltip";
+	import * as Accordion from "./ui/accordion/index.js";
+	import { onMount } from "svelte";
 
 	import { getStudioContext } from "../context";
 	import { getDashboardNavs } from "../extensions/extensionUtils";
+	import { emitEvent } from "../eventSystem";
 
-	const { ctx } = getStudioContext();
+	const { lobb, ctx } = getStudioContext();
 	import { mediaQueries } from "../utils";
 	import * as Popover from "./ui/popover";
-	import { location } from "@wjfe/n-savant";
+	import { page } from "$app/state";
+	import { goto } from "$app/navigation";
 
-	const sections: any = [
+	const rawSections: any[][] = [
 		[
 			{
 				label: "Home",
@@ -39,13 +42,15 @@
 			},
 			{
 				label: "Data Model",
-				href: "/studio/datamodel/graph",
+				href: "/studio/datamodel",
 				icon: Layers,
+				represents: "core_data_model",
 			},
 			{
 				label: "Workflows",
 				href: "/studio/workflows",
 				icon: Workflow,
+				represents: "core_workflows",
 			},
 		],
 		[],
@@ -55,20 +60,72 @@
 	const navs = getDashboardNavs(ctx);
 
 	if (navs.top) {
-		sections[0] = [...sections[0], ...navs.top];
+		rawSections[0] = [...rawSections[0], ...navs.top];
 	}
 	if (navs.middle) {
-		sections[1] = [...sections[1], ...navs.middle];
+		rawSections[1] = [...rawSections[1], ...navs.middle];
 	}
 	if (navs.bottom) {
-		sections[2] = [...sections[2], ...navs.bottom];
+		rawSections[2] = [...rawSections[2], ...navs.bottom];
 	}
 
+	// Items without a `represents` are always visible. Items with one are
+	// gated by emitting auth.canAccess — the auth extension (or any
+	// drop-in replacement) decides based on the current user's session.
+	// Start empty so nothing flashes before the answers come back.
+	let sections: any[][] = $state([[], [], []]);
+
+	async function isItemVisible(item: any): Promise<boolean> {
+		if (!item.represents) return true;
+		const res = await emitEvent(
+			{ lobb, ctx },
+			"auth.canAccess",
+			{ collection: item.represents, action: "read" },
+		);
+		return res === true;
+	}
+
+	// Highlight the nav item matching the current URL. "/studio" requires an
+	// exact match (otherwise it would light up on every sub-route since it's a
+	// 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);
+	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 + "/");
+	}
+
+	// onMount is enough — Studio gets remounted on login/logout (see
+	// remountStudio in @lobb-js/studio), so by the time this component
+	// mounts, ctx.extensions.auth.user / permissions are already populated.
+	onMount(async () => {
+		const result: any[][] = [[], [], []];
+		for (let i = 0; i < rawSections.length; i++) {
+			for (const item of rawSections[i]) {
+				if (item.navs) {
+					const visibleChildren: any[] = [];
+					for (const child of item.navs) {
+						if (await isItemVisible(child)) visibleChildren.push(child);
+					}
+					if (visibleChildren.length && (await isItemVisible(item))) {
+						result[i].push({ ...item, navs: visibleChildren });
+					}
+				} else if (await isItemVisible(item)) {
+					result[i].push(item);
+				}
+			}
+		}
+		sections = result;
+	});
 </script>
 
 {#snippet section(section: any)}
 	<div class="flex flex-col {isSmallScreen ? 'gap-0' : 'gap-2'}">
 		{#each section as item}
+			{@const active = isItemActive(item)}
 			{#if isSmallScreen}
 				{#if !item.navs}
 					<Button
@@ -76,11 +133,13 @@
 							if (item.onclick) {
 								item.onclick();
 							} else {
-								location.navigate(item.href);
+								goto(item.href);
 							}
 							isCollapsed = true;
 						}}
-						class="flex items-center justify-start flex-nowrap text-muted-foreground text-nowrap h-10 w-full"
+						class="flex items-center justify-start flex-nowrap text-nowrap h-10 w-full {active
+							? 'bg-accent text-accent-foreground'
+							: 'text-muted-foreground'}"
 						variant="ghost"
 						size="icon"
 						Icon={item.icon}
@@ -92,7 +151,9 @@
 						<Accordion.Item class="border-b-0">
 							<Accordion.Trigger class="justify-between p-0 h-10">
 								<div
-									class="flex items-center gap-2 text-muted-foreground"
+									class="flex items-center gap-2 {active
+										? 'text-accent-foreground'
+										: 'text-muted-foreground'}"
 								>
 									<item.icon size="18" />
 									<div class="text-nowrap">{item.label}</div>
@@ -100,16 +161,19 @@
 							</Accordion.Trigger>
 							<Accordion.Content class="pl-2 border-l">
 								{#each item.navs as childItem}
+									{@const childActive = isItemActive(childItem)}
 									<Button
 										onclick={() => {
 											if (childItem.onclick) {
 												childItem.onclick();
 											} else {
-												location.navigate(item.href);
+												goto(item.href);
 											}
 											isCollapsed = true;
 										}}
-										class="flex items-center justify-start flex-nowrap text-muted-foreground text-nowrap h-8 w-full"
+										class="flex items-center justify-start flex-nowrap text-nowrap h-8 w-full {childActive
+											? 'bg-accent text-accent-foreground'
+											: 'text-muted-foreground'}"
 										variant="ghost"
 										size="icon"
 										Icon={childItem.icon}
@@ -133,7 +197,9 @@
 									isCollapsed = true;
 								}}
 								href={item.href}
-								class="text-muted-foreground"
+								class={active
+									? 'bg-accent text-accent-foreground'
+									: 'text-muted-foreground'}
 								variant="ghost"
 								size="icon"
 								Icon={item.icon}
@@ -142,7 +208,9 @@
 							<Popover.Root>
 								<Popover.Trigger>
 									<Button
-										class="text-muted-foreground"
+										class={active
+											? 'bg-accent text-accent-foreground'
+											: 'text-muted-foreground'}
 										variant="ghost"
 										size="icon"
 										Icon={item.icon}
@@ -155,12 +223,15 @@
 								>
 									<div class="py-1">
 										{#each item.navs as childItem}
+											{@const childActive = isItemActive(childItem)}
 											<div
 												class="px-1 text-xs text-muted-foreground"
 											>
 												<Button
 													variant="ghost"
-													class="flex h-7 w-full justify-start p-2 text-xs font-normal text-muted-foreground"
+													class="flex h-7 w-full justify-start p-2 text-xs font-normal {childActive
+														? 'bg-accent text-accent-foreground'
+														: 'text-muted-foreground'}"
 													Icon={childItem.icon}
 													onclick={() => {
 														if (childItem.onclick) {