includio-cms 0.25.0 → 0.26.0

package/dist/admin/components/layout/detail-page-shell.svelte

@@ -0,0 +1,71 @@
+<script lang="ts" module>
+	/**
+	 * @internal
+	 * Shared layout for detail/edit pages — wraps PageHeader + body grid + optional
+	 * sidebar. Used by coupon-edit-page, shipping-method-edit-page, shop-order-detail-page.
+	 *
+	 * EntryPage stays custom (hybrid preview + lang switcher + 30+ specific guards).
+	 *
+	 * S8.
+	 */
+	import type { Snippet } from 'svelte';
+</script>
+
+<script lang="ts">
+	import PageHeader from './page-header.svelte';
+	import { useInterfaceLanguage } from '../../state/interface-language.svelte.js';
+	import type { InterfaceLanguage } from '../../../types/languages.js';
+	import { cn } from '../../../utils.js';
+
+	type Props = {
+		title: string;
+		description?: string;
+		count?: number;
+		breadcrumb?: Snippet;
+		primaryActions?: Snippet;
+		secondaryActions?: Snippet;
+		sidebar?: Snippet;
+		children: Snippet;
+		class?: string;
+	};
+
+	let {
+		title,
+		description,
+		count,
+		breadcrumb,
+		primaryActions,
+		secondaryActions,
+		sidebar,
+		children,
+		class: className
+	}: Props = $props();
+
+	const interfaceLanguage = useInterfaceLanguage();
+	const lang: Record<InterfaceLanguage, { sidebarLabel: string }> = {
+		pl: { sidebarLabel: 'Panel boczny' },
+		en: { sidebarLabel: 'Sidebar' }
+	};
+</script>
+
+<div class={cn('flex flex-col', className)}>
+	{#if breadcrumb}
+		<div class="border-border border-b px-6 py-2">
+			{@render breadcrumb()}
+		</div>
+	{/if}
+
+	<PageHeader {title} {description} {count} {primaryActions} {secondaryActions} />
+
+	<div class="flex flex-col gap-6 px-6 pb-8 lg:grid lg:grid-cols-[1fr_320px]">
+		<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+		<main id="detail-main" tabindex={-1} class="min-w-0 outline-none">
+			{@render children()}
+		</main>
+		{#if sidebar}
+			<aside aria-label={lang[interfaceLanguage.current].sidebarLabel} class="min-w-0">
+				{@render sidebar()}
+			</aside>
+		{/if}
+	</div>
+</div>

package/dist/admin/components/layout/detail-page-shell.svelte.d.ts

@@ -0,0 +1,24 @@
+/**
+ * @internal
+ * Shared layout for detail/edit pages — wraps PageHeader + body grid + optional
+ * sidebar. Used by coupon-edit-page, shipping-method-edit-page, shop-order-detail-page.
+ *
+ * EntryPage stays custom (hybrid preview + lang switcher + 30+ specific guards).
+ *
+ * S8.
+ */
+import type { Snippet } from 'svelte';
+type Props = {
+    title: string;
+    description?: string;
+    count?: number;
+    breadcrumb?: Snippet;
+    primaryActions?: Snippet;
+    secondaryActions?: Snippet;
+    sidebar?: Snippet;
+    children: Snippet;
+    class?: string;
+};
+declare const DetailPageShell: import("svelte").Component<Props, {}, "">;
+type DetailPageShell = ReturnType<typeof DetailPageShell>;
+export default DetailPageShell;

package/dist/admin/components/layout/lang.d.ts

@@ -37,4 +37,9 @@ export declare const sidebarLang: Record<string, {
         forms: string;
         navigation: string;
     };
+    nav: {
+        primary: string;
+        breadcrumb: string;
+        skipToMain: string;
+    };
 }>;

package/dist/admin/components/layout/lang.js

@@ -37,6 +37,11 @@ export const sidebarLang = {
             singletons: 'Singletony',
             forms: 'Formularze',
             navigation: 'Nawigacja'
+        },
+        nav: {
+            primary: 'Główna nawigacja',
+            breadcrumb: 'Ścieżka okruszków',
+            skipToMain: 'Przejdź do głównej treści'
         }
     },
     en: {
@@ -77,6 +82,11 @@ export const sidebarLang = {
             singletons: 'Singletons',
             forms: 'Forms',
             navigation: 'Navigation'
+        },
+        nav: {
+            primary: 'Main navigation',
+            breadcrumb: 'Breadcrumb',
+            skipToMain: 'Skip to main content'
         }
     }
 };

package/dist/admin/components/layout/layout-renderer.svelte

@@ -9,11 +9,14 @@
 	import { useInterfaceLanguage } from '../../state/interface-language.svelte.js';
 	import { getLocalizedLabel } from '../../utils/collectionLabel.js';
 	import LayoutRenderer from './layout-renderer.svelte';
+	import LayoutTabs, { type TabInfo } from './layout-tabs.svelte';
 	import { cn } from '../../../utils.js';
+	import slugify from '../../imports/slugify.js';
 	import {
 		resolveFieldByPath,
 		buildFormPath,
-		getDistributedObjectSlugs
+		getDistributedObjectSlugs,
+		collectLeafPathsForNodes
 	} from '../../../core/fields/layoutUtils.js';
 
 	type Props = {
@@ -22,6 +25,7 @@
 		form: SuperForm<Record<string, unknown>>;
 		focusedPath?: string | null;
 		flashingPath?: string | null;
+		errorPaths?: Set<string>;
 		depth?: number;
 		distributedSlugs?: Set<string>;
 	};
@@ -32,6 +36,7 @@
 		form,
 		focusedPath = null,
 		flashingPath = null,
+		errorPaths = undefined,
 		depth = 0,
 		distributedSlugs: parentDistributedSlugs
 	}: Props = $props();
@@ -80,6 +85,41 @@
 		}
 		return '';
 	}
+
+	const errorWordByLang: Record<string, string> = {
+		pl: 'zawiera błędy',
+		en: 'has errors'
+	};
+	const errorWord = $derived(
+		errorWordByLang[interfaceLanguage.current] ?? errorWordByLang.en
+	);
+
+	/**
+	 * Build per-tab metadata for a tabs node: stable slugified value (unique
+	 * within the group), localized label and whether any leaf field inside the
+	 * tab is currently in `errorPaths`.
+	 */
+	function buildTabs(children: LayoutNode[]): TabInfo[] {
+		const seen = new Set<string>();
+		return children.map((child, i) => {
+			const label = getLabel(child);
+			let value = label ? slugify(label, { lower: true, strict: true, trim: true }) : '';
+			if (!value || seen.has(value)) value = `tab-${i}`;
+			seen.add(value);
+			const hasError =
+				!!errorPaths &&
+				collectLeafPathsForNodes([child], fields).some((p) => errorPaths!.has(p));
+			return { value, label, child, hasError };
+		});
+	}
+
+	function groupId(tabsIndex: number): string {
+		return `tg-${depth}-${tabsIndex}`;
+	}
+
+	// URL sync: only the outermost tabs group (depth 0, first tabs node) reads
+	// from / writes to the `?tab` query param. Nested tabs keep local state only.
+	const firstTabsIndex = $derived(nodes.findIndex((n) => n.type === 'tabs'));
 </script>
 
 {#snippet fieldSlot(ref: string, autoGrid?: boolean)}
@@ -116,6 +156,7 @@
 		{form}
 		{focusedPath}
 		{flashingPath}
+		{errorPaths}
 		depth={depth + 1}
 		{distributedSlugs}
 	/>
@@ -186,7 +227,16 @@
 					<Accordion.Trigger class="layout-accordion-trigger">
 						{getLabel(node)}
 					</Accordion.Trigger>
-					<Accordion.Content>
+					<!--
+						forceMount keeps the panel in the DOM when closed so
+						validation/scroll-to-issue can find fields and the
+						accordion can be auto-expanded by activateContainingAccordions.
+						accordion-content.svelte collapses forceMount content with
+						a grid-template-rows transition — animated both ways, and it
+						holds the collapsed state (the one-shot keyframe cannot once
+						the panel stays permanently mounted).
+					-->
+					<Accordion.Content forceMount>
 						{#if isLayoutLeaf(node)}
 							<div class="layout-fields-stack">
 								{#each node.fields as ref (ref)}
@@ -212,6 +262,25 @@
 				{@render recurse(node.children)}
 			{/if}
 		</div>
+	{:else if node.type === 'tabs'}
+		{@const tabsIndex = nodes.indexOf(node)}
+		{@const gid = groupId(tabsIndex)}
+		{@const tabs = buildTabs(node.children)}
+		{@const isTopLevelGroup = depth === 0 && tabsIndex === firstTabsIndex}
+		<LayoutTabs {tabs} {gid} syncUrl={isTopLevelGroup} {errorWord}>
+			{#snippet panel(child: LayoutNode)}
+				{#if isLayoutLeaf(child)}
+					<div class="layout-fields-stack">
+						{#each child.fields as ref (ref)}
+							{@render fieldSlot(ref)}
+						{/each}
+					</div>
+				{/if}
+				{#if isLayoutBranch(child)}
+					{@render recurse(child.children)}
+				{/if}
+			{/snippet}
+		</LayoutTabs>
 	{/if}
 {/each}
 

package/dist/admin/components/layout/layout-renderer.svelte.d.ts

@@ -8,6 +8,7 @@ type Props = {
     form: SuperForm<Record<string, unknown>>;
     focusedPath?: string | null;
     flashingPath?: string | null;
+    errorPaths?: Set<string>;
     depth?: number;
     distributedSlugs?: Set<string>;
 };

package/dist/admin/components/layout/layout-tabs.svelte

@@ -0,0 +1,172 @@
+<script lang="ts" module>
+	import type { LayoutNode } from '../../../types/layout.js';
+
+	/** Per-tab metadata computed by the renderer for a `tabs` node. */
+	export type TabInfo = {
+		/** Stable, group-unique slug used as the bits-ui tab value + DOM id. */
+		value: string;
+		/** Localized trigger text (current interface language). */
+		label: string;
+		/** The underlying `tab` layout node, rendered via the `panel` snippet. */
+		child: LayoutNode;
+		/** True when a leaf field inside this tab is currently invalid. */
+		hasError: boolean;
+	};
+</script>
+
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import * as Tabs from '../../../components/ui/tabs/index.js';
+	import { Tabs as TabsPrimitive } from 'bits-ui';
+	import { cn } from '../../../utils.js';
+	import { browser } from '$app/environment';
+	import { page } from '$app/state';
+	import { replaceState } from '$app/navigation';
+
+	type Props = {
+		tabs: TabInfo[];
+		gid: string;
+		/** Only the outermost tabs group syncs the active tab to `?tab`. */
+		syncUrl: boolean;
+		errorWord: string;
+		panel: Snippet<[LayoutNode]>;
+	};
+
+	let { tabs, gid, syncUrl, errorWord, panel }: Props = $props();
+
+	function initialValue(): string {
+		if (syncUrl && browser) {
+			const fromUrl = page.url.searchParams.get('tab');
+			if (fromUrl && tabs.some((t) => t.value === fromUrl)) return fromUrl;
+		}
+		return tabs[0]?.value ?? '';
+	}
+
+	let active = $state(initialValue());
+
+	// Write the active tab back to the URL (outermost group only). Guard against
+	// the no-op case so we never trigger an infinite replaceState loop.
+	$effect(() => {
+		if (!syncUrl || !browser) return;
+		const current = page.url.searchParams.get('tab');
+		if (active && active !== current) {
+			const url = new URL(page.url);
+			url.searchParams.set('tab', active);
+			replaceState(url, page.state);
+		}
+	});
+</script>
+
+<Tabs.Root class="gap-0" bind:value={active}>
+	<Tabs.List class={cn('layout-tabs-list', syncUrl && 'bleed')}>
+		{#each tabs as tb (tb.value)}
+			<Tabs.Trigger
+				value={tb.value}
+				data-tab-value={tb.value}
+				data-tabs-group={gid}
+				class="layout-tab-trigger"
+			>
+				{tb.label}
+				{#if tb.hasError}
+					<span class="layout-tab-error-dot" aria-hidden="true"></span>
+					<span class="sr-only"> — {errorWord}</span>
+				{/if}
+			</Tabs.Trigger>
+		{/each}
+	</Tabs.List>
+	{#each tabs as tb (tb.value)}
+		<TabsPrimitive.Content value={tb.value}>
+			{#snippet child({ props })}
+				{@const panelActive = (props as Record<string, unknown>).hidden !== true}
+				<div
+					{...props}
+					data-slot="tabs-content"
+					data-tab-value={tb.value}
+					data-tabs-group={gid}
+					class={cn(
+						'layout-tab-panel',
+						panelActive && 'layout-tab-panel-active',
+						syncUrl && 'bleed'
+					)}
+				>
+					{@render panel(tb.child)}
+				</div>
+			{/snippet}
+		</TabsPrimitive.Content>
+	{/each}
+</Tabs.Root>
+
+<style>
+	:global(.layout-tabs-list) {
+		display: flex;
+		width: 100%;
+		gap: 4px;
+		border-bottom: 1px solid var(--border);
+		margin-bottom: 20px;
+		height: auto;
+		background: transparent;
+		padding: 0;
+		border-radius: 0;
+	}
+
+	:global(.layout-tabs-list.bleed) {
+		box-sizing: border-box;
+		width: 100%;
+		margin-bottom: 0;
+		padding-inline: max(24px, calc((100% - 1100px) / 2));
+		border-top: 0;
+		border-left: 0;
+		border-right: 0;
+		box-shadow: none;
+	}
+
+	@media (max-width: 900px) {
+		:global(.layout-tabs-list.bleed) {
+			padding-inline: 16px;
+		}
+	}
+
+	:global(.layout-tab-panel.bleed) {
+		box-sizing: border-box;
+		max-width: 1100px;
+		margin: 0 auto;
+		padding: 24px;
+	}
+
+	@media (max-width: 900px) {
+		:global(.layout-tab-panel.bleed) {
+			padding: 16px;
+		}
+	}
+
+	:global(.layout-tab-trigger) {
+		flex: 1;
+		height: auto;
+		padding: 10px 14px;
+		border: none;
+		border-bottom: 2px solid transparent;
+		border-radius: 8px 8px 0 0;
+		background: transparent;
+		color: var(--muted-foreground);
+		font-size: 13px;
+		font-weight: 600;
+		box-shadow: none;
+	}
+
+	:global(.layout-tab-trigger[data-state='active']) {
+		color: var(--primary);
+		border-bottom-color: var(--primary);
+		background: transparent;
+		box-shadow: none;
+	}
+
+	:global(.layout-tab-error-dot) {
+		display: inline-block;
+		width: 6px;
+		height: 6px;
+		margin-left: 6px;
+		border-radius: 9999px;
+		background: var(--error, #c44b4b);
+		vertical-align: middle;
+	}
+</style>

package/dist/admin/components/layout/layout-tabs.svelte.d.ts

@@ -0,0 +1,24 @@
+import type { LayoutNode } from '../../../types/layout.js';
+/** Per-tab metadata computed by the renderer for a `tabs` node. */
+export type TabInfo = {
+    /** Stable, group-unique slug used as the bits-ui tab value + DOM id. */
+    value: string;
+    /** Localized trigger text (current interface language). */
+    label: string;
+    /** The underlying `tab` layout node, rendered via the `panel` snippet. */
+    child: LayoutNode;
+    /** True when a leaf field inside this tab is currently invalid. */
+    hasError: boolean;
+};
+import type { Snippet } from 'svelte';
+type Props = {
+    tabs: TabInfo[];
+    gid: string;
+    /** Only the outermost tabs group syncs the active tab to `?tab`. */
+    syncUrl: boolean;
+    errorWord: string;
+    panel: Snippet<[LayoutNode]>;
+};
+declare const LayoutTabs: import("svelte").Component<Props, {}, "">;
+type LayoutTabs = ReturnType<typeof LayoutTabs>;
+export default LayoutTabs;

package/dist/admin/components/layout/nav-breadcrumbs.svelte

@@ -1,22 +1,40 @@
 <script lang="ts">
 	import { getBreadcrumbs } from '../../state/breadcrumbs.svelte.js';
 	import * as Breadcrumb from '../../../components/ui/breadcrumb/index.js';
+	import { useInterfaceLanguage } from '../../state/interface-language.svelte.js';
+	import { sidebarLang } from './lang.js';
 
 	const breadcrumbs = getBreadcrumbs();
+	const interfaceLanguage = useInterfaceLanguage();
 </script>
 
-<Breadcrumb.Root>
-	<Breadcrumb.List class="gap-2 text-[13px]">
+<Breadcrumb.Root
+	aria-label={sidebarLang[interfaceLanguage.current].nav.breadcrumb}
+	class="min-w-0 flex-1 overflow-hidden"
+>
+	<Breadcrumb.List class="flex-nowrap gap-1.5 text-[13px] sm:gap-2">
 		{#each breadcrumbs.state as crumb, i}
-			<Breadcrumb.Item>
-				{#if crumb.href && i < breadcrumbs.state.length - 1}
+			{@const isLast = i === breadcrumbs.state.length - 1}
+			{@const isFirst = i === 0}
+			{@const hideOnMobile = breadcrumbs.state.length > 2 && !isLast && !isFirst}
+			<Breadcrumb.Item class={hideOnMobile ? 'hidden sm:inline-flex' : ''}>
+				{#if crumb.href && !isLast}
 					<Breadcrumb.Link class="font-medium" href={crumb.href}>{crumb.label}</Breadcrumb.Link>
 				{:else}
-					<Breadcrumb.Page class="max-w-60 truncate font-semibold">{crumb.label}</Breadcrumb.Page>
+					<Breadcrumb.Page class="max-w-[10rem] truncate font-semibold sm:max-w-60"
+						>{crumb.label}</Breadcrumb.Page
+					>
 				{/if}
 			</Breadcrumb.Item>
-			{#if i < breadcrumbs.state.length - 1}
-				<Breadcrumb.Separator>/</Breadcrumb.Separator>
+			{#if !isLast}
+				<Breadcrumb.Separator class={hideOnMobile ? 'hidden sm:inline-flex' : ''}
+					>/</Breadcrumb.Separator
+				>
+			{/if}
+			{#if breadcrumbs.state.length > 2 && isFirst}
+				<Breadcrumb.Separator class="inline-flex sm:hidden" aria-hidden="true"
+					>/&hellip;/</Breadcrumb.Separator
+				>
 			{/if}
 		{/each}
 	</Breadcrumb.List>

package/dist/admin/components/layout/nav-collections.svelte

@@ -2,19 +2,25 @@
 	import * as Sidebar from '../../../components/ui/sidebar/index.js';
 	import { useInterfaceLanguage } from '../../state/interface-language.svelte.js';
 	import { getRemotes } from '../../../sveltekit/index.js';
+	import { getBreadcrumbs } from '../../state/breadcrumbs.svelte.js';
 	import { sidebarLang } from './lang.js';
 	import { getLocalizedLabel } from '../../utils/collectionLabel.js';
 	import Skeleton from '../../../components/ui/skeleton/skeleton.svelte';
 	import { page } from '$app/state';
 	import FolderIcon from '@tabler/icons-svelte/icons/folder';
 	import { getIcon } from '../icons/icon-map.js';
+	import NavSection, { type NavSectionItem } from './nav-section.svelte';
 
 	const interfaceLanguage = useInterfaceLanguage();
 	const remotes = getRemotes();
+	const breadcrumbs = getBreadcrumbs();
 
 	function isActive(url: string) {
 		const pathname = page.url.pathname;
-		return pathname === url || pathname.startsWith(url + '/');
+		if (pathname === url || pathname.startsWith(url + '/')) return true;
+		// Also highlight a collection while editing one of its entries — the entry
+		// page sets a breadcrumb linking back to the collection list.
+		return breadcrumbs.state.some((b) => b.href === url);
 	}
 
 	const collectionsQuery = $derived(remotes.getCollections());
@@ -33,6 +39,15 @@
 		}
 		countsMap = map;
 	});
+
+	const items: NavSectionItem[] = $derived(
+		collectionsQuery.current?.map((item) => ({
+			title: getLocalizedLabel(item.labels?.plural, interfaceLanguage.current) ?? item.slug,
+			url: `/admin/collections/${item.slug}`,
+			icon: getIcon(item.sidebarIcon) ?? FolderIcon,
+			count: countsMap.get(item.slug)
+		})) ?? []
+	);
 </script>
 
 {#if !collectionsQuery.ready}
@@ -47,39 +62,11 @@
 			</div>
 		</Sidebar.Menu>
 	</Sidebar.Group>
-{:else if collectionsQuery.current && collectionsQuery.current.length > 0}
-	<Sidebar.Group class="border-sidebar-border mt-1 border-t px-0 pt-2 pb-1">
-		<Sidebar.GroupLabel class="group-data-[collapsible=icon]:hidden"
-			>{sidebarLang[interfaceLanguage.current].collections.title}</Sidebar.GroupLabel
-		>
-		<Sidebar.Menu>
-			{#each collectionsQuery.current as item (item.slug)}
-				{@const name =
-					getLocalizedLabel(item.labels?.plural, interfaceLanguage.current) ?? item.slug}
-				{@const url = `/admin/collections/${item.slug}`}
-				{@const active = isActive(url)}
-				<Sidebar.MenuItem>
-					<Sidebar.MenuButton isActive={active} tooltipContent={name}>
-						{#snippet child({ props })}
-							{@const ResolvedIcon = getIcon(item.sidebarIcon) ?? FolderIcon}
-							<a {...props} href={url}>
-								<ResolvedIcon
-									class="size-5! shrink-0 {active ? 'text-primary' : 'text-muted-foreground'}"
-								/>
-								<span class="flex-1 truncate {active ? 'text-primary' : 'text-muted-foreground'}"
-									>{name}</span
-								>
-								{#if countsMap.get(item.slug)}
-									<span
-										class="bg-lavender-lighter text-primary inline-flex h-[18px] min-w-[18px] shrink-0 items-center justify-center rounded-full px-[5px] text-[10px] font-bold group-data-[collapsible=icon]:hidden"
-										>{countsMap.get(item.slug)}</span
-									>
-								{/if}
-							</a>
-						{/snippet}
-					</Sidebar.MenuButton>
-				</Sidebar.MenuItem>
-			{/each}
-		</Sidebar.Menu>
-	</Sidebar.Group>
+{:else if items.length > 0}
+	<NavSection
+		{items}
+		label={sidebarLang[interfaceLanguage.current].collections.title}
+		{isActive}
+		withTopBorder
+	/>
 {/if}

package/dist/admin/components/layout/nav-forms.svelte

@@ -8,6 +8,7 @@
 	import ClipboardIcon from '@tabler/icons-svelte/icons/clipboard-list';
 	import { getIcon } from '../icons/icon-map.js';
 	import { page } from '$app/state';
+	import NavSection, { type NavSectionItem } from './nav-section.svelte';
 
 	const interfaceLanguage = useInterfaceLanguage();
 	const remotes = getRemotes();
@@ -21,13 +22,23 @@
 	const overviewQuery = $derived(remotes.getSubmissionsOverview());
 
 	const countsMap = $derived.by(() => {
+		// Badge = unread submissions (things needing attention), not total
 		const map = new Map<string, number>();
 		if (!overviewQuery.ready || !overviewQuery.current) return map;
 		for (const item of overviewQuery.current) {
-			if (item.total > 0) map.set(item.slug, item.total);
+			if (item.unread > 0) map.set(item.slug, item.unread);
 		}
 		return map;
 	});
+
+	const items: NavSectionItem[] = $derived(
+		formsQuery.current?.map((item) => ({
+			title: getLocalizedLabel(item.label, interfaceLanguage.current) ?? item.slug,
+			url: `/admin/forms/${item.slug}`,
+			icon: getIcon(item.sidebarIcon) ?? ClipboardIcon,
+			count: countsMap.get(item.slug)
+		})) ?? []
+	);
 </script>
 
 {#if !formsQuery.ready}
@@ -40,38 +51,11 @@
 			</div>
 		</Sidebar.Menu>
 	</Sidebar.Group>
-{:else if formsQuery.current && formsQuery.current.length > 0}
-	<Sidebar.Group class="border-sidebar-border mt-1 border-t px-0 pt-2 pb-1">
-		<Sidebar.GroupLabel class="group-data-[collapsible=icon]:hidden"
-			>{sidebarLang[interfaceLanguage.current].forms.title}</Sidebar.GroupLabel
-		>
-		<Sidebar.Menu>
-			{#each formsQuery.current as item (item.slug)}
-				{@const name = getLocalizedLabel(item.label, interfaceLanguage.current) ?? item.slug}
-				{@const url = `/admin/forms/${item.slug}`}
-				{@const active = isActive(url)}
-				<Sidebar.MenuItem>
-					<Sidebar.MenuButton isActive={active} tooltipContent={name}>
-						{#snippet child({ props })}
-							{@const ResolvedIcon = getIcon(item.sidebarIcon) ?? ClipboardIcon}
-							<a {...props} href={url}>
-								<ResolvedIcon
-									class="size-5! shrink-0 {active ? 'text-primary' : 'text-muted-foreground'}"
-								/>
-								<span class="flex-1 {active ? 'text-primary' : 'text-muted-foreground'} truncate"
-									>{name}</span
-								>
-								{#if countsMap.get(item.slug)}
-									<span
-										class="bg-lavender-lighter text-primary inline-flex h-[18px] min-w-[18px] shrink-0 items-center justify-center rounded-full px-[5px] text-[10px] font-bold group-data-[collapsible=icon]:hidden"
-										>{countsMap.get(item.slug)}</span
-									>
-								{/if}
-							</a>
-						{/snippet}
-					</Sidebar.MenuButton>
-				</Sidebar.MenuItem>
-			{/each}
-		</Sidebar.Menu>
-	</Sidebar.Group>
+{:else if items.length > 0}
+	<NavSection
+		{items}
+		label={sidebarLang[interfaceLanguage.current].forms.title}
+		{isActive}
+		withTopBorder
+	/>
 {/if}