includio-cms 0.36.8 → 0.37.0

package/dist/admin/client/entry/hybrid/hybrid-preview.svelte

@@ -1,26 +1,59 @@
 <script lang="ts">
 	import * as ToggleGroup from '../../../../components/ui/toggle-group/index.js';
+	import * as Select from '../../../../components/ui/select/index.js';
 	import Button from '../../../../components/ui/button/button.svelte';
 	import DeviceTablet from '@tabler/icons-svelte/icons/device-tablet';
 	import DeviceMobile from '@tabler/icons-svelte/icons/device-mobile';
 	import DeviceDesktop from '@tabler/icons-svelte/icons/device-desktop';
 	import ArrowsMaximize from '@tabler/icons-svelte/icons/arrows-maximize';
 	import Link from '@tabler/icons-svelte/icons/link';
-	import type { DbEntryVersion } from '../../../../types/entries.js';
+	import type { PreviewView } from '../../../../types/config.js';
+	import { getLocalizedLabel } from '../../../utils/collectionLabel.js';
+	import { useInterfaceLanguage } from '../../../state/interface-language.svelte.js';
 	import type { ElementSize } from 'runed';
 
 	type SizePreset = 'responsive' | 'desktop' | 'tablet' | 'mobile';
 
 	type Props = {
-		collection: { previewUrl?: string };
-		editingEntry: DbEntryVersion;
+		/** Fully built preview URL of the active view. */
+		previewSrc: string;
+		views: PreviewView[];
+		activeName: string;
+		onSelectView: (name: string) => void;
 		previewIframe?: HTMLIFrameElement;
 		sizePreset: SizePreset;
 		size: ElementSize;
 		el?: HTMLElement;
 	};
 
-	let { collection, editingEntry, previewIframe = $bindable(), sizePreset = $bindable('responsive'), size, el = $bindable() }: Props = $props();
+	let {
+		previewSrc,
+		views,
+		activeName,
+		onSelectView,
+		previewIframe = $bindable(),
+		sizePreset = $bindable('responsive'),
+		size,
+		el = $bindable()
+	}: Props = $props();
+
+	const interfaceLanguage = useInterfaceLanguage();
+
+	const lang = {
+		pl: { view: 'Widok', openInNewTab: 'Otwórz podgląd w nowej karcie' },
+		en: { view: 'View', openInNewTab: 'Open preview in a new tab' }
+	} as const;
+
+	const t = $derived(lang[interfaceLanguage.current as 'pl' | 'en'] ?? lang.en);
+
+	function viewLabel(view: PreviewView): string {
+		return getLocalizedLabel(view.label, interfaceLanguage.current) || view.name;
+	}
+
+	const activeLabel = $derived.by(() => {
+		const view = views.find((v) => v.name === activeName) ?? views[0];
+		return view ? viewLabel(view) : '';
+	});
 
 	const sizePresets = {
 		responsive: null,
@@ -61,8 +94,36 @@
 </script>
 
 <div class="flex h-full flex-col overflow-hidden">
-	<div class="flex items-center justify-center gap-2 border-b px-2 py-1.5">
-		<ToggleGroup.Root type="single" bind:value={sizePreset} role="radiogroup">
+	<!--
+		Trzy strefy, nie jeden ciąg: kontekst (jaki widok) przy krawędzi wiodącej,
+		prezentacja (rozmiar urządzenia) na środku płótna, akcja poboczna (otwórz
+		w nowej karcie) przy końcowej. Grid `1fr auto 1fr` trzyma przełączniki
+		urządzeń dokładnie na środku niezależnie od długości nazwy widoku.
+	-->
+	<div class="grid grid-cols-[1fr_auto_1fr] items-center gap-2 border-b px-2 py-1.5">
+		<div class="justify-self-start">
+			{#if views.length > 1}
+				<Select.Root type="single" value={activeName} onValueChange={onSelectView}>
+					<Select.Trigger
+						class="hover:bg-accent hover:text-accent-foreground h-8 w-auto gap-1.5 border-0 bg-transparent px-2 text-sm font-medium shadow-none"
+						aria-label={t.view}
+					>
+						{activeLabel}
+					</Select.Trigger>
+					<Select.Content align="start">
+						{#each views as view (view.name)}
+							<Select.Item value={view.name} label={viewLabel(view)} />
+						{/each}
+					</Select.Content>
+				</Select.Root>
+			{/if}
+		</div>
+		<ToggleGroup.Root
+			type="single"
+			bind:value={sizePreset}
+			role="radiogroup"
+			class="justify-self-center"
+		>
 			<ToggleGroup.Item value="responsive" aria-label="Responsive view">
 				<ArrowsMaximize class="size-4" />
 			</ToggleGroup.Item>
@@ -79,8 +140,10 @@
 		<Button
 			variant="ghost"
 			size="icon"
-			href="{collection.previewUrl}?preview={editingEntry.id}"
+			href={previewSrc}
 			target="_blank"
+			aria-label={t.openInNewTab}
+			class="justify-self-end"
 		>
 			<Link class="size-4" />
 		</Button>
@@ -90,7 +153,7 @@
 			<iframe
 				bind:this={previewIframe}
 				class="h-full w-full border-0"
-				src="{collection.previewUrl}?preview={editingEntry.id}"
+				src={previewSrc}
 				title="preview"
 			></iframe>
 		{:else if sizePreset === 'desktop'}
@@ -101,7 +164,7 @@
 					class="shrink-0 border-0"
 					width={sizePresets.desktop[0]}
 					height={sizePresets.desktop[1]}
-					src="{collection.previewUrl}?preview={editingEntry.id}"
+					src={previewSrc}
 					title="preview"
 				></iframe>
 			</div>
@@ -142,7 +205,7 @@
 						"
 						width={iw}
 						height={ih}
-						src="{collection.previewUrl}?preview={editingEntry.id}"
+						src={previewSrc}
 						title="preview"
 					></iframe>
 				</div>

package/dist/admin/client/entry/hybrid/hybrid-preview.svelte.d.ts

@@ -1,11 +1,12 @@
-import type { DbEntryVersion } from '../../../../types/entries.js';
+import type { PreviewView } from '../../../../types/config.js';
 import type { ElementSize } from 'runed';
 type SizePreset = 'responsive' | 'desktop' | 'tablet' | 'mobile';
 type Props = {
-    collection: {
-        previewUrl?: string;
-    };
-    editingEntry: DbEntryVersion;
+    /** Fully built preview URL of the active view. */
+    previewSrc: string;
+    views: PreviewView[];
+    activeName: string;
+    onSelectView: (name: string) => void;
     previewIframe?: HTMLIFrameElement;
     sizePreset: SizePreset;
     size: ElementSize;

package/dist/admin/client/entry/preview-views-context.svelte.d.ts

@@ -0,0 +1,22 @@
+import type { PreviewView } from '../../../types/config.js';
+/**
+ * Holds which preview view is showing, plus the per-tab memory of manual picks:
+ * a view the user selected by hand on a tab wins over that tab's `preview`
+ * binding when they come back to it. Lives as long as the open entry — nothing
+ * is persisted to the URL or the database.
+ */
+export declare function createPreviewViewsContext(views: PreviewView[]): {
+    readonly views: PreviewView[];
+    readonly activeName: string;
+    readonly activeView: PreviewView | undefined;
+    /** Manual pick — remember it for the tab the user is on. */
+    select(name: string): void;
+    /** A tab became active (on mount too, so a `?tab=` deep-link lands right). */
+    onTabActivate(tabValue: string, tabPreview?: string): void;
+};
+export type PreviewViewsContext = ReturnType<typeof createPreviewViewsContext>;
+/**
+ * Optional — layout components also render outside the entry editor (Storybook,
+ * forms), where no preview context exists.
+ */
+export declare function getPreviewViewsContext(): PreviewViewsContext | undefined;

package/dist/admin/client/entry/preview-views-context.svelte.js

@@ -0,0 +1,58 @@
+import { getContext, setContext } from 'svelte';
+import { defaultView, findView, resolveActiveView } from './preview-views.js';
+const PREVIEW_VIEWS_KEY = Symbol('preview-views');
+/**
+ * Holds which preview view is showing, plus the per-tab memory of manual picks:
+ * a view the user selected by hand on a tab wins over that tab's `preview`
+ * binding when they come back to it. Lives as long as the open entry — nothing
+ * is persisted to the URL or the database.
+ */
+export function createPreviewViewsContext(views) {
+    let activeName = $state(defaultView(views)?.name ?? '');
+    let activeTab = $state('');
+    const overrides = new Map();
+    const ctx = {
+        get views() {
+            return views;
+        },
+        get activeName() {
+            return activeName;
+        },
+        get activeView() {
+            return findView(views, activeName) ?? defaultView(views);
+        },
+        /** Manual pick — remember it for the tab the user is on. */
+        select(name) {
+            if (!findView(views, name))
+                return;
+            activeName = name;
+            if (activeTab)
+                overrides.set(activeTab, name);
+        },
+        /** A tab became active (on mount too, so a `?tab=` deep-link lands right). */
+        onTabActivate(tabValue, tabPreview) {
+            activeTab = tabValue;
+            activeName = resolveActiveView({
+                views,
+                current: activeName,
+                tabValue,
+                tabPreview,
+                overrides
+            });
+        }
+    };
+    setContext(PREVIEW_VIEWS_KEY, ctx);
+    return ctx;
+}
+/**
+ * Optional — layout components also render outside the entry editor (Storybook,
+ * forms), where no preview context exists.
+ */
+export function getPreviewViewsContext() {
+    try {
+        return getContext(PREVIEW_VIEWS_KEY);
+    }
+    catch {
+        return undefined;
+    }
+}

package/dist/admin/client/entry/preview-views.d.ts

@@ -0,0 +1,27 @@
+import type { PreviewView } from '../../../types/config.js';
+/** The subset of a collection/single config this module cares about. */
+export type PreviewSource = {
+    previewUrl?: string;
+    previews?: PreviewView[];
+};
+/**
+ * Collapse the two config shapes into one: `previewUrl` becomes a single view
+ * named `default`, so no caller has to know about the shorthand.
+ */
+export declare function normalizePreviews(config: PreviewSource): PreviewView[];
+/** The view marked `default: true`, else the first one. */
+export declare function defaultView(views: PreviewView[]): PreviewView | undefined;
+export declare function findView(views: PreviewView[], name: string): PreviewView | undefined;
+/** `{url}?preview={entryId}&view={name}` — respects a query string already present in `url`. */
+export declare function buildPreviewUrl(view: PreviewView, entryId: string): string;
+/**
+ * Rule (c) — per-tab memory. A view the user picked by hand on this tab beats
+ * the tab's own binding; a tab without a binding leaves the current view alone.
+ */
+export declare function resolveActiveView(params: {
+    views: PreviewView[];
+    current: string;
+    tabValue: string;
+    tabPreview?: string;
+    overrides: Map<string, string>;
+}): string;

package/dist/admin/client/entry/preview-views.js

@@ -0,0 +1,33 @@
+/**
+ * Collapse the two config shapes into one: `previewUrl` becomes a single view
+ * named `default`, so no caller has to know about the shorthand.
+ */
+export function normalizePreviews(config) {
+    if (config.previews?.length)
+        return config.previews;
+    if (config.previewUrl)
+        return [{ name: 'default', url: config.previewUrl }];
+    return [];
+}
+/** The view marked `default: true`, else the first one. */
+export function defaultView(views) {
+    return views.find((v) => v.default) ?? views[0];
+}
+export function findView(views, name) {
+    return views.find((v) => v.name === name);
+}
+/** `{url}?preview={entryId}&view={name}` — respects a query string already present in `url`. */
+export function buildPreviewUrl(view, entryId) {
+    const sep = view.url.includes('?') ? '&' : '?';
+    return `${view.url}${sep}preview=${encodeURIComponent(entryId)}&view=${encodeURIComponent(view.name)}`;
+}
+/**
+ * Rule (c) — per-tab memory. A view the user picked by hand on this tab beats
+ * the tab's own binding; a tab without a binding leaves the current view alone.
+ */
+export function resolveActiveView(params) {
+    const next = params.overrides.get(params.tabValue) ?? params.tabPreview;
+    if (next && findView(params.views, next))
+        return next;
+    return params.current;
+}

package/dist/admin/client/index.d.ts

@@ -22,6 +22,9 @@ export { default as ShopOrderDetailPage } from './shop/shop-order-detail-page.sv
 export { default as ShopCouponsListPage } from './shop/coupons-list-page.svelte';
 export { default as ShopCouponNewPage } from './shop/coupon-new-page.svelte';
 export { default as ShopCouponEditPage } from './shop/coupon-edit-page.svelte';
+export { default as BookingReservationsPage } from './booking/reservations-page.svelte';
+export { default as BookingReservationDetailPage } from './booking/reservation-detail-page.svelte';
+export { default as ModuleDashboardPage } from './modules/module-dashboard-page.svelte';
 export * from '../helpers/index.js';
 export * from '../ui/index.js';
 export { default as DataTable } from './collection/data-table.svelte';

package/dist/admin/client/index.js

@@ -22,6 +22,9 @@ export { default as ShopOrderDetailPage } from './shop/shop-order-detail-page.sv
 export { default as ShopCouponsListPage } from './shop/coupons-list-page.svelte';
 export { default as ShopCouponNewPage } from './shop/coupon-new-page.svelte';
 export { default as ShopCouponEditPage } from './shop/coupon-edit-page.svelte';
+export { default as BookingReservationsPage } from './booking/reservations-page.svelte';
+export { default as BookingReservationDetailPage } from './booking/reservation-detail-page.svelte';
+export { default as ModuleDashboardPage } from './modules/module-dashboard-page.svelte';
 // Folded from `./admin/helpers` (dropped as separate export in 0.20.0)
 export * from '../helpers/index.js';
 // Folded from `./admin/ui` (dropped as separate export in 0.20.0)

package/dist/admin/client/modules/dashboard-registry.d.ts

@@ -0,0 +1,7 @@
+import type { Component } from 'svelte';
+/**
+ * Client-side registry of per-module dashboard components, keyed by module id.
+ * Dashboards live here (not in the serializable {@link import('../../../types/modules.js').CMSModule}
+ * descriptor) because Svelte components cannot cross the config/remote boundary.
+ */
+export declare const moduleDashboards: Record<string, Component>;

package/dist/admin/client/modules/dashboard-registry.js

@@ -0,0 +1,11 @@
+import ShopDashboard from '../shop/shop-dashboard.svelte';
+import BookingDashboard from '../booking/booking-dashboard.svelte';
+/**
+ * Client-side registry of per-module dashboard components, keyed by module id.
+ * Dashboards live here (not in the serializable {@link import('../../../types/modules.js').CMSModule}
+ * descriptor) because Svelte components cannot cross the config/remote boundary.
+ */
+export const moduleDashboards = {
+    shop: ShopDashboard,
+    booking: BookingDashboard
+};

package/dist/admin/client/modules/module-dashboard-page.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+	import { getRemotes } from '../../../sveltekit/index.js';
+	import { useInterfaceLanguage } from '../../state/interface-language.svelte.js';
+	import { getLocalizedLabel } from '../../utils/collectionLabel.js';
+	import PageHeader from '../../components/layout/page-header.svelte';
+	import { moduleDashboards } from './dashboard-registry.js';
+	import type { Localized } from '../../../types/languages.js';
+
+	let { moduleId }: { moduleId: string } = $props();
+
+	const remotes = getRemotes();
+	const interfaceLanguage = useInterfaceLanguage();
+
+	const modulesQuery = $derived(remotes.getModules());
+	const mod = $derived((modulesQuery.current ?? []).find((m) => m.id === moduleId) ?? null);
+	const title = $derived(
+		mod ? getLocalizedLabel(mod.label as Localized, interfaceLanguage.current) || moduleId : moduleId
+	);
+	const Dashboard = $derived(moduleDashboards[moduleId]);
+</script>
+
+<PageHeader {title} />
+
+{#if Dashboard}
+	<Dashboard />
+{/if}

package/dist/admin/client/modules/module-dashboard-page.svelte.d.ts

@@ -0,0 +1,6 @@
+type $$ComponentProps = {
+    moduleId: string;
+};
+declare const ModuleDashboardPage: import("svelte").Component<$$ComponentProps, {}, "">;
+type ModuleDashboardPage = ReturnType<typeof ModuleDashboardPage>;
+export default ModuleDashboardPage;

package/dist/admin/client/modules/stat-card.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	let {
+		label,
+		value,
+		hint,
+		children
+	}: {
+		label: string;
+		value: string | number;
+		hint?: string;
+		children?: Snippet;
+	} = $props();
+</script>
+
+<div class="border-border bg-surface/40 flex flex-col gap-1 rounded-xl border p-4">
+	<span class="text-muted-foreground text-xs font-medium tracking-wide uppercase">{label}</span>
+	<span class="text-foreground text-2xl font-extrabold tabular-nums">{value}</span>
+	{#if hint}<span class="text-muted-foreground text-xs">{hint}</span>{/if}
+	{#if children}{@render children()}{/if}
+</div>

package/dist/admin/client/modules/stat-card.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    label: string;
+    value: string | number;
+    hint?: string;
+    children?: Snippet;
+};
+declare const StatCard: import("svelte").Component<$$ComponentProps, {}, "">;
+type StatCard = ReturnType<typeof StatCard>;
+export default StatCard;

package/dist/admin/client/shop/shop-dashboard.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+	import { getRemotes } from '../../../sveltekit/index.js';
+	import { useInterfaceLanguage } from '../../state/interface-language.svelte.js';
+	import StatCard from '../modules/stat-card.svelte';
+	import { Button } from '../../../components/ui/button/index.js';
+
+	const remotes = getRemotes();
+	const interfaceLanguage = useInterfaceLanguage();
+
+	const ordersQuery = $derived(remotes.listOrdersAdmin({ limit: 1 }));
+	const totalOrders = $derived(ordersQuery.current?.total ?? 0);
+
+	const t = $derived(
+		interfaceLanguage.current === 'pl'
+			? { orders: 'Zamówienia', manageProducts: 'Produkty', manageOrders: 'Zamówienia', coupons: 'Kody rabatowe' }
+			: { orders: 'Orders', manageProducts: 'Products', manageOrders: 'Orders', coupons: 'Coupons' }
+	);
+</script>
+
+<div class="flex flex-col gap-4 px-4 pb-6 sm:px-6">
+	<div class="grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-4">
+		<StatCard label={t.orders} value={ordersQuery.ready ? totalOrders : '—'} />
+	</div>
+	<div class="flex flex-wrap gap-2">
+		<Button href="/admin/shop/products" variant="outline" size="sm">{t.manageProducts}</Button>
+		<Button href="/admin/shop/orders" variant="outline" size="sm">{t.manageOrders}</Button>
+		<Button href="/admin/shop/coupons" variant="outline" size="sm">{t.coupons}</Button>
+	</div>
+</div>

package/dist/admin/client/shop/shop-dashboard.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const ShopDashboard: import("svelte").Component<Record<string, never>, {}, "">;
+type ShopDashboard = ReturnType<typeof ShopDashboard>;
+export default ShopDashboard;

package/dist/admin/components/fields/relation-field.svelte

@@ -422,8 +422,15 @@
 						<Command.Empty>{t.noResults}</Command.Empty>
 						<Command.Group>
 							{#each pickerOptions as option (option.id)}
+								<!--
+									`value` to tożsamość pozycji w Command (filtrowanie, nawigacja
+									klawiaturą, podświetlenie) — musi być unikalna, inaczej dwa wpisy
+									o tej samej nazwie zlewają się w jeden. Szukanie po nazwie zapewnia
+									`keywords` (domyślny scorer skleja value + keywords).
+								-->
 								<Command.Item
-									value={option.label}
+									value={option.id}
+									keywords={[option.label]}
 									onSelect={() => toggleItem(option.id)}
 									class="flex items-center gap-2"
 								>
@@ -523,8 +530,10 @@
 							<Command.Empty>{t.noResults}</Command.Empty>
 							<Command.Group>
 								{#each pickerOptions as option (option.id)}
+									<!-- Tożsamość po id, szukanie po nazwie — patrz komentarz w wariancie multi. -->
 									<Command.Item
-										value={option.label}
+										value={option.id}
+										keywords={[option.label]}
 										onSelect={() => {
 											value = option.id;
 											closePopoverAndFocus();

package/dist/admin/components/icons/icon-map.js

@@ -24,6 +24,10 @@ import IconTag from '@tabler/icons-svelte/icons/tag';
 import IconTags from '@tabler/icons-svelte/icons/tags';
 import IconReceipt from '@tabler/icons-svelte/icons/receipt';
 import IconCreditCard from '@tabler/icons-svelte/icons/credit-card';
+import IconBuildingStore from '@tabler/icons-svelte/icons/building-store';
+import IconPackage from '@tabler/icons-svelte/icons/package';
+import IconTruck from '@tabler/icons-svelte/icons/truck';
+import IconTicket from '@tabler/icons-svelte/icons/ticket';
 // Media
 import IconPhoto from '@tabler/icons-svelte/icons/photo';
 import IconCamera from '@tabler/icons-svelte/icons/camera';
@@ -89,6 +93,10 @@ export const iconMap = {
     // E-commerce
     'shopping-cart': IconShoppingCart,
     'shopping-bag': IconShoppingBag,
+    'building-store': IconBuildingStore,
+    package: IconPackage,
+    truck: IconTruck,
+    ticket: IconTicket,
     tag: IconTag,
     tags: IconTags,
     receipt: IconReceipt,

package/dist/admin/components/layout/app-sidebar.svelte

@@ -6,43 +6,74 @@
 	import NavCollections from './nav-collections.svelte';
 	import NavFooter from './nav-footer.svelte';
 	import NavForms from './nav-forms.svelte';
-	import NavShop from './nav-shop.svelte';
+	import NavModule from './nav-module.svelte';
 	import NavCustom from './nav-custom.svelte';
 	import NavSearch from './nav-search.svelte';
+	import NavGlobal from './nav-global.svelte';
+	import ContextSwitcher from './context-switcher.svelte';
+	import { getIcon } from '../icons/icon-map.js';
+	import BoxIcon from '@tabler/icons-svelte/icons/box';
 	import { resolve } from '$app/paths';
 	import { useInterfaceLanguage } from '../../state/interface-language.svelte.js';
+	import { getRemotes } from '../../../sveltekit/index.js';
+	import { getActiveContext, CONTENT_CONTEXT } from '../../state/active-context.svelte.js';
 	import { sidebarLang } from './lang.js';
 
 	let { ...restProps }: ComponentProps<typeof Sidebar.Root> = $props();
 
 	const interfaceLanguage = useInterfaceLanguage();
+	const remotes = getRemotes();
+
+	const modulesQuery = $derived(remotes.getModules());
+	const modules = $derived(modulesQuery.current ?? []);
+	const moduleIds = $derived(modules.map((m) => m.id));
+	const activeContext = $derived(getActiveContext(moduleIds));
+	const activeModule = $derived(modules.find((m) => m.id === activeContext) ?? null);
 </script>
 
-<Sidebar.Root collapsible="icon" class="bg-sidebar" {...restProps}>
+<Sidebar.Root collapsible="icon" class="bg-sidebar" data-context={activeContext} {...restProps}>
 	<Sidebar.Header
 		class="border-sidebar-border h-[52px] shrink-0 flex-row items-center border-b px-3 group-data-[collapsible=icon]:px-2"
 	>
 		<a
 			href={resolve('/admin')}
-			class="flex items-baseline gap-px"
+			class="flex items-baseline gap-px group-data-[collapsible=icon]:hidden"
 			aria-label="AriaCMS — strona główna"
 		>
 			<span class="text-primary text-base font-extrabold">Aria</span>
-			<span
-				class="text-primary text-[11px] font-light tracking-[0.15em] uppercase group-data-[collapsible=icon]:hidden"
-				>CMS</span
-			>
+			<span class="text-primary text-[11px] font-light tracking-[0.15em] uppercase">CMS</span>
 		</a>
+		<ContextSwitcher />
 	</Sidebar.Header>
 	<Sidebar.Content class="gap-0">
 		<NavSearch />
-		<nav id="admin-nav" aria-label={sidebarLang[interfaceLanguage.current].nav.primary} class="py-1">
-			<NavMain />
-			<NavSingletons />
-			<NavCollections />
-			<NavForms />
-			<NavShop />
-			<NavCustom />
+		<nav
+			id="admin-nav"
+			aria-label={sidebarLang[interfaceLanguage.current].nav.primary}
+			class="flex flex-1 flex-col py-1"
+		>
+			{#if activeContext === CONTENT_CONTEXT || !activeModule}
+				<NavMain />
+				<NavSingletons />
+				<NavCollections />
+				<NavForms />
+				<NavCustom />
+			{:else}
+				<NavMain
+					url={activeModule.context.landingUrl}
+					icon={getIcon(activeModule.icon) ?? BoxIcon}
+				/>
+				<NavModule module={activeModule} />
+				<NavCollections
+					filterSlugs={activeModule.context.surfacedCollections ?? []}
+					ctx={activeContext}
+				/>
+				<NavSingletons
+					filterSlugs={activeModule.context.surfacedSingles ?? []}
+					ctx={activeContext}
+				/>
+			{/if}
+			<NavGlobal />
 		</nav>
 	</Sidebar.Content>
 	<Sidebar.Footer class="p-0">