@questpie/admin 3.0.2 → 3.0.4

package/dist/client/views/layout/admin-sidebar.mjs

@@ -1,16 +1,18 @@
 import { useResolveText, useSafeI18n, useTranslation } from "../../i18n/hooks.mjs";
 import { cn, formatLabel } from "../../lib/utils.mjs";
-import { selectAdmin, selectBasePath, selectContentLocale, selectNavigate, selectSetContentLocale, useAdminStore } from "../../runtime/provider.mjs";
+import { selectAdmin, selectBasePath, selectContentLocale, selectNavigate, selectSetContentLocale, useAdminStore, useAdminStoreRaw } from "../../runtime/provider.mjs";
 import { useSafeContentLocales } from "../../runtime/content-locales-provider.mjs";
 import { ComponentRenderer } from "../../components/component-renderer.mjs";
+import { Button } from "../../components/ui/button.mjs";
 import { Tooltip, TooltipContent, TooltipTrigger } from "../../components/ui/tooltip.mjs";
 import { useAdminConfig } from "../../hooks/use-admin-config.mjs";
 import { getFlagUrl } from "../../utils/locale-to-flag.mjs";
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger } from "../../components/ui/dropdown-menu.mjs";
+import { useLazyComponent } from "../../utils/use-lazy-component.mjs";
+import { Skeleton } from "../../components/ui/skeleton.mjs";
 import { useAuthClientSafe } from "../../hooks/use-auth.mjs";
 import { useCurrentUser, useSessionState } from "../../hooks/use-current-user.mjs";
-import { Skeleton } from "../../components/ui/skeleton.mjs";
-import { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarMenu, SidebarMenuItem, SidebarSeparator, useSidebar } from "../../components/ui/sidebar.mjs";
+import { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarMenu, SidebarMenuItem, SidebarSeparator, SidebarTrigger, useSidebar } from "../../components/ui/sidebar.mjs";
 import { getAdminPreferenceQueryKey, useAdminPreference, useSetAdminPreference } from "../../hooks/use-admin-preferences.mjs";
 import { c } from "react/compiler-runtime";
 import { Icon } from "@iconify/react";
@@ -265,7 +267,7 @@ function QuestpieSymbol(t0) {
 			stroke: "currentColor",
 			strokeWidth: "2",
 			strokeLinecap: "square",
-			className: "text-[#0a0a0a] dark:text-white"
+			className: "text-foreground"
 		});
 		t4 = /* @__PURE__ */ jsx("path", {
 			d: "M23 13H13V23H23V13Z",
@@ -319,114 +321,76 @@ function isRouteActive(activeRoute, itemHref, basePath, exact = false) {
 /**
 * Menu button styles - QUESTPIE design: clean, technical look
 */
-const menuButtonStyles = cn("flex w-full items-center gap-2.5 px-3 py-2 text-sm font-medium transition-colors duration-150", "text-sidebar-foreground hover:text-sidebar-foreground hover:bg-sidebar-accent", "focus-visible:ring-sidebar-ring focus-visible:ring-1 focus-visible:outline-none", "group-data-[collapsible=icon]:size-8 group-data-[collapsible=icon]:justify-center group-data-[collapsible=icon]:px-2");
-const menuButtonActiveStyles = cn("bg-sidebar-primary/10 text-sidebar-primary");
-/**
-* Active indicator bar positioned at the sidebar group edge.
-* Uses negative left offset to compensate for SidebarGroupContent nesting padding.
-*/
-function ActiveIndicator(t0) {
-	const $ = c(2);
-	const { depth } = t0;
-	const t1 = `${-depth * .75}rem`;
-	let t2;
-	if ($[0] !== t1) {
-		t2 = /* @__PURE__ */ jsx("div", {
-			className: "bg-sidebar-primary absolute top-0 bottom-0 w-0.5",
-			style: { left: t1 },
-			"aria-hidden": "true"
-		});
-		$[0] = t1;
-		$[1] = t2;
-	} else t2 = $[1];
-	return t2;
-}
+const menuButtonStyles = cn("item-surface font-chrome flex w-full items-center gap-2 px-2 py-2 text-[13px] font-medium transition-[background-color,color,border-color,transform] duration-[var(--motion-duration-base)] ease-[var(--motion-ease-standard)] active:scale-[0.96] motion-reduce:transition-none motion-reduce:active:scale-100", "text-sidebar-foreground/75 hover:bg-sidebar-accent hover:text-sidebar-foreground", "focus-visible:ring-sidebar-ring focus-visible:ring-1 focus-visible:outline-none", "group-data-[collapsible=icon]:size-8 group-data-[collapsible=icon]:justify-center group-data-[collapsible=icon]:px-2");
+const menuButtonActiveStyles = cn("border-transparent bg-[var(--sidebar-active-background)] text-[var(--sidebar-active-foreground)]");
 function NavItem(t0) {
-	const $ = c(66);
+	const $ = c(45);
 	const { item, isActive, LinkComponent, renderNavItem, useActiveProps, className, depth: t1 } = t0;
-	const depth = t1 === void 0 ? 0 : t1;
 	const { state, isMobile, setOpenMobile } = useSidebar();
 	const collapsed = state === "collapsed";
 	const resolveText = useResolveText();
 	let t2;
-	if ($[0] !== isMobile || $[1] !== setOpenMobile) {
-		t2 = () => {
-			if (isMobile) setOpenMobile(false);
-		};
-		$[0] = isMobile;
-		$[1] = setOpenMobile;
+	if ($[0] !== item.label || $[1] !== resolveText) {
+		t2 = resolveText(item.label);
+		$[0] = item.label;
+		$[1] = resolveText;
 		$[2] = t2;
 	} else t2 = $[2];
-	const handleClick = t2;
-	if (renderNavItem) {
-		const NavItemRenderer = renderNavItem;
-		let t3$1;
-		if ($[3] !== NavItemRenderer || $[4] !== collapsed || $[5] !== isActive || $[6] !== item) {
-			t3$1 = /* @__PURE__ */ jsx(NavItemRenderer, {
-				item,
-				isActive,
-				collapsed
-			});
-			$[3] = NavItemRenderer;
-			$[4] = collapsed;
-			$[5] = isActive;
-			$[6] = item;
-			$[7] = t3$1;
-		} else t3$1 = $[7];
-		return t3$1;
-	}
-	let t3;
-	if ($[8] !== item.label || $[9] !== resolveText) {
-		t3 = resolveText(item.label);
-		$[8] = item.label;
-		$[9] = resolveText;
-		$[10] = t3;
-	} else t3 = $[10];
-	const label = t3;
+	const label = t2;
 	const shouldUseExact = item.type === "link" || item.type === "page";
-	let t4;
-	if ($[11] !== shouldUseExact || $[12] !== useActiveProps) {
-		t4 = useActiveProps ? {
+	let t3;
+	if ($[3] !== shouldUseExact || $[4] !== useActiveProps) {
+		t3 = useActiveProps ? {
 			activeProps: { className: menuButtonActiveStyles },
 			activeOptions: { exact: shouldUseExact }
 		} : {};
-		$[11] = shouldUseExact;
-		$[12] = useActiveProps;
-		$[13] = t4;
-	} else t4 = $[13];
-	const linkActiveProps = t4;
+		$[3] = shouldUseExact;
+		$[4] = useActiveProps;
+		$[5] = t3;
+	} else t3 = $[5];
+	const linkActiveProps = t3;
 	const ariaCurrent = isActive ? "page" : void 0;
+	let t4;
+	if ($[6] !== isMobile || $[7] !== setOpenMobile) {
+		t4 = () => {
+			if (isMobile) setOpenMobile(false);
+		};
+		$[6] = isMobile;
+		$[7] = setOpenMobile;
+		$[8] = t4;
+	} else t4 = $[8];
+	const handleClick = t4;
 	const t5 = item.href;
 	const t6 = collapsed ? label : void 0;
 	const t7 = isActive && "qa-sidebar__nav-link--active";
 	const t8 = isActive && menuButtonActiveStyles;
 	let t9;
-	if ($[14] !== t7 || $[15] !== t8) {
+	if ($[9] !== t7 || $[10] !== t8) {
 		t9 = cn("qa-sidebar__nav-link", menuButtonStyles, t7, t8);
-		$[14] = t7;
-		$[15] = t8;
-		$[16] = t9;
-	} else t9 = $[16];
+		$[9] = t7;
+		$[10] = t8;
+		$[11] = t9;
+	} else t9 = $[11];
 	let t10;
-	if ($[17] !== item.icon) {
+	if ($[12] !== item.icon) {
 		t10 = item.icon && /* @__PURE__ */ jsx(RenderIcon, {
 			icon: item.icon,
 			className: "qa-sidebar__nav-icon"
 		});
-		$[17] = item.icon;
-		$[18] = t10;
-	} else t10 = $[18];
+		$[12] = item.icon;
+		$[13] = t10;
+	} else t10 = $[13];
 	let t11;
-	if ($[19] !== label) {
+	if ($[14] !== label) {
 		t11 = /* @__PURE__ */ jsx("span", {
 			className: "qa-sidebar__nav-label truncate group-data-[collapsible=icon]:hidden",
 			children: label
 		});
-		$[19] = label;
-		$[20] = t11;
-	} else t11 = $[20];
+		$[14] = label;
+		$[15] = t11;
+	} else t11 = $[15];
 	let t12;
-	if ($[21] !== LinkComponent || $[22] !== item.href || $[23] !== linkActiveProps || $[24] !== t10 || $[25] !== t11 || $[26] !== t6 || $[27] !== t9) {
+	if ($[16] !== LinkComponent || $[17] !== item.href || $[18] !== linkActiveProps || $[19] !== t10 || $[20] !== t11 || $[21] !== t6 || $[22] !== t9) {
 		t12 = /* @__PURE__ */ jsxs(LinkComponent, {
 			to: t5,
 			"aria-label": t6,
@@ -434,126 +398,83 @@ function NavItem(t0) {
 			...linkActiveProps,
 			children: [t10, t11]
 		});
-		$[21] = LinkComponent;
-		$[22] = item.href;
-		$[23] = linkActiveProps;
-		$[24] = t10;
-		$[25] = t11;
-		$[26] = t6;
-		$[27] = t9;
-		$[28] = t12;
-	} else t12 = $[28];
+		$[16] = LinkComponent;
+		$[17] = item.href;
+		$[18] = linkActiveProps;
+		$[19] = t10;
+		$[20] = t11;
+		$[21] = t6;
+		$[22] = t9;
+		$[23] = t12;
+	} else t12 = $[23];
 	const linkContent = t12;
-	if (collapsed && !isMobile) {
-		let t13$1;
-		if ($[29] !== isActive) {
-			t13$1 = isActive && /* @__PURE__ */ jsx(ActiveIndicator, { depth: 0 });
-			$[29] = isActive;
-			$[30] = t13$1;
-		} else t13$1 = $[30];
-		const t14$1 = item.href;
-		const t15$1 = isActive && "qa-sidebar__nav-link--active";
-		const t16 = isActive && menuButtonActiveStyles;
-		let t17;
-		if ($[31] !== t15$1 || $[32] !== t16) {
-			t17 = cn("qa-sidebar__nav-link", menuButtonStyles, t15$1, t16);
-			$[31] = t15$1;
-			$[32] = t16;
-			$[33] = t17;
-		} else t17 = $[33];
-		let t18;
-		if ($[34] !== item.icon) {
-			t18 = item.icon && /* @__PURE__ */ jsx(RenderIcon, { icon: item.icon });
-			$[34] = item.icon;
-			$[35] = t18;
-		} else t18 = $[35];
-		let t19;
-		if ($[36] !== label) {
-			t19 = /* @__PURE__ */ jsx("span", {
-				className: "truncate group-data-[collapsible=icon]:hidden",
-				children: label
-			});
-			$[36] = label;
-			$[37] = t19;
-		} else t19 = $[37];
-		let t20;
-		if ($[38] !== LinkComponent || $[39] !== item.href || $[40] !== linkActiveProps || $[41] !== t17 || $[42] !== t18 || $[43] !== t19) {
-			t20 = /* @__PURE__ */ jsx(TooltipTrigger, { render: /* @__PURE__ */ jsxs(LinkComponent, {
-				to: t14$1,
-				className: t17,
+	let t13;
+	if ($[24] !== LinkComponent || $[25] !== ariaCurrent || $[26] !== className || $[27] !== collapsed || $[28] !== handleClick || $[29] !== isActive || $[30] !== isMobile || $[31] !== item.href || $[32] !== item.icon || $[33] !== label || $[34] !== linkActiveProps || $[35] !== linkContent) {
+		t13 = collapsed && !isMobile ? /* @__PURE__ */ jsx(SidebarMenuItem, {
+			className: "qa-sidebar__nav-item",
+			onClickCapture: handleClick,
+			"aria-current": ariaCurrent,
+			children: /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, { render: /* @__PURE__ */ jsxs(LinkComponent, {
+				to: item.href,
+				className: cn("qa-sidebar__nav-link", menuButtonStyles, isActive && "qa-sidebar__nav-link--active", isActive && menuButtonActiveStyles),
 				...linkActiveProps,
-				children: [t18, t19]
-			}) });
-			$[38] = LinkComponent;
-			$[39] = item.href;
-			$[40] = linkActiveProps;
-			$[41] = t17;
-			$[42] = t18;
-			$[43] = t19;
-			$[44] = t20;
-		} else t20 = $[44];
-		let t21;
-		if ($[45] !== label) {
-			t21 = /* @__PURE__ */ jsx(TooltipContent, {
+				children: [item.icon && /* @__PURE__ */ jsx(RenderIcon, { icon: item.icon }), /* @__PURE__ */ jsx("span", {
+					className: "truncate group-data-[collapsible=icon]:hidden",
+					children: label
+				})]
+			}) }), /* @__PURE__ */ jsx(TooltipContent, {
 				side: "right",
 				align: "center",
 				children: label
-			});
-			$[45] = label;
-			$[46] = t21;
-		} else t21 = $[46];
-		let t22;
-		if ($[47] !== t20 || $[48] !== t21) {
-			t22 = /* @__PURE__ */ jsxs(Tooltip, { children: [t20, t21] });
-			$[47] = t20;
-			$[48] = t21;
-			$[49] = t22;
-		} else t22 = $[49];
-		let t23;
-		if ($[50] !== ariaCurrent || $[51] !== handleClick || $[52] !== t13$1 || $[53] !== t22) {
-			t23 = /* @__PURE__ */ jsxs(SidebarMenuItem, {
-				className: "qa-sidebar__nav-item",
-				onClickCapture: handleClick,
-				"aria-current": ariaCurrent,
-				children: [t13$1, t22]
-			});
-			$[50] = ariaCurrent;
-			$[51] = handleClick;
-			$[52] = t13$1;
-			$[53] = t22;
-			$[54] = t23;
-		} else t23 = $[54];
-		return t23;
-	}
-	let t13;
-	if ($[55] !== className) {
-		t13 = cn("qa-sidebar__nav-item", className);
-		$[55] = className;
-		$[56] = t13;
-	} else t13 = $[56];
-	let t14;
-	if ($[57] !== depth || $[58] !== isActive) {
-		t14 = isActive && /* @__PURE__ */ jsx(ActiveIndicator, { depth });
-		$[57] = depth;
-		$[58] = isActive;
-		$[59] = t14;
-	} else t14 = $[59];
-	let t15;
-	if ($[60] !== ariaCurrent || $[61] !== handleClick || $[62] !== linkContent || $[63] !== t13 || $[64] !== t14) {
-		t15 = /* @__PURE__ */ jsxs(SidebarMenuItem, {
-			className: t13,
+			})] })
+		}) : /* @__PURE__ */ jsx(SidebarMenuItem, {
+			className: cn("qa-sidebar__nav-item", className),
 			onClickCapture: handleClick,
 			"aria-current": ariaCurrent,
-			children: [t14, linkContent]
+			children: linkContent
 		});
-		$[60] = ariaCurrent;
-		$[61] = handleClick;
-		$[62] = linkContent;
-		$[63] = t13;
-		$[64] = t14;
-		$[65] = t15;
-	} else t15 = $[65];
-	return t15;
+		$[24] = LinkComponent;
+		$[25] = ariaCurrent;
+		$[26] = className;
+		$[27] = collapsed;
+		$[28] = handleClick;
+		$[29] = isActive;
+		$[30] = isMobile;
+		$[31] = item.href;
+		$[32] = item.icon;
+		$[33] = label;
+		$[34] = linkActiveProps;
+		$[35] = linkContent;
+		$[36] = t13;
+	} else t13 = $[36];
+	const builtInNavItem = t13;
+	if (renderNavItem) {
+		let t14;
+		if ($[37] !== collapsed || $[38] !== isActive || $[39] !== item || $[40] !== renderNavItem) {
+			t14 = renderNavItem({
+				item,
+				isActive,
+				collapsed
+			});
+			$[37] = collapsed;
+			$[38] = isActive;
+			$[39] = item;
+			$[40] = renderNavItem;
+			$[41] = t14;
+		} else t14 = $[41];
+		let t15;
+		if ($[42] !== builtInNavItem || $[43] !== t14) {
+			t15 = /* @__PURE__ */ jsx(React.Suspense, {
+				fallback: builtInNavItem,
+				children: t14
+			});
+			$[42] = builtInNavItem;
+			$[43] = t14;
+			$[44] = t15;
+		} else t15 = $[44];
+		return t15;
+	}
+	return builtInNavItem;
 }
 const SIDEBAR_COLLAPSED_SECTIONS_KEY = "sidebar:collapsed-sections";
 /**
@@ -667,7 +588,7 @@ function NavGroup(t0) {
 				className: "size-3.5"
 			}),
 			/* @__PURE__ */ jsx("span", {
-				className: "flex-1 text-left font-mono",
+				className: "flex-1 text-left",
 				children: groupLabel
 			}),
 			group.collapsible && /* @__PURE__ */ jsx(Icon, {
@@ -689,7 +610,7 @@ function NavGroup(t0) {
 					isActive: isRouteActive(activeRoute, element.href, basePath, shouldUseExact),
 					LinkComponent,
 					renderNavItem,
-					useActiveProps,
+					useActiveProps: useActiveProps && !activeRoute,
 					depth
 				}, element.id);
 			}) }), sections.map((subSection) => /* @__PURE__ */ jsx(NavGroup, {
@@ -742,7 +663,7 @@ function UserFooterSkeleton(t0) {
 	const t1 = collapsed && "justify-center";
 	let t2;
 	if ($[0] !== t1) {
-		t2 = cn("flex items-center gap-2.5 p-2", t1);
+		t2 = cn("item-surface border-sidebar-border/40 flex items-center gap-2.5 p-2", t1);
 		$[0] = t1;
 		$[1] = t2;
 	} else t2 = $[1];
@@ -755,7 +676,13 @@ function UserFooterSkeleton(t0) {
 	if ($[3] !== collapsed) {
 		t4 = !collapsed && /* @__PURE__ */ jsxs("div", {
 			className: "grid flex-1 gap-1",
-			children: [/* @__PURE__ */ jsx(Skeleton, { className: "h-3 w-24" }), /* @__PURE__ */ jsx(Skeleton, { className: "h-2 w-32" })]
+			children: [/* @__PURE__ */ jsx(Skeleton, {
+				variant: "text",
+				className: "h-3 w-24"
+			}), /* @__PURE__ */ jsx(Skeleton, {
+				variant: "text",
+				className: "h-2 w-32"
+			})]
 		});
 		$[3] = collapsed;
 		$[4] = t4;
@@ -775,8 +702,10 @@ function UserFooterSkeleton(t0) {
 	} else t5 = $[7];
 	return t5;
 }
-function UserFooter() {
-	const $ = c(84);
+function UserFooter(t0) {
+	const $ = c(109);
+	const { theme: t1, setTheme, showThemeToggle } = t0;
+	const theme = t1 === void 0 ? "system" : t1;
 	const { state, isMobile, setOpenMobile } = useSidebar();
 	const collapsed = state === "collapsed";
 	const authClient = useAuthClientSafe();
@@ -789,116 +718,183 @@ function UserFooter() {
 	const localeConfig = admin.getLocale();
 	const uiLocales = i18nAdapter?.locales ?? localeConfig.supported ?? ["en"];
 	const hasMultipleUiLocales = uiLocales.length > 1;
-	let t0;
+	let t2;
 	if ($[0] !== getLocaleName) {
-		t0 = (code) => ({
+		t2 = (code) => ({
 			code,
 			label: getLocaleName(code)
 		});
 		$[0] = getLocaleName;
-		$[1] = t0;
-	} else t0 = $[1];
-	const uiLocaleOptions = uiLocales.map(t0);
+		$[1] = t2;
+	} else t2 = $[1];
+	const uiLocaleOptions = uiLocales.map(t2);
 	const contentLocales = useSafeContentLocales();
 	const contentLocale = useAdminStore(selectContentLocale);
 	const setContentLocale = useAdminStore(selectSetContentLocale);
 	const hasMultipleContentLocales = (contentLocales?.locales?.length ?? 0) > 1;
-	let t1;
-	if ($[2] !== isMobile || $[3] !== setOpenMobile) {
-		t1 = () => {
+	const shouldShowThemeToggle = !!setTheme && showThemeToggle !== false;
+	let t3;
+	if ($[2] !== t) {
+		t3 = t("ui.themeLight");
+		$[2] = t;
+		$[3] = t3;
+	} else t3 = $[3];
+	let t4;
+	if ($[4] !== t3) {
+		t4 = {
+			value: "light",
+			label: t3,
+			icon: "ph:sun"
+		};
+		$[4] = t3;
+		$[5] = t4;
+	} else t4 = $[5];
+	let t5;
+	if ($[6] !== t) {
+		t5 = t("ui.themeDark");
+		$[6] = t;
+		$[7] = t5;
+	} else t5 = $[7];
+	let t6;
+	if ($[8] !== t5) {
+		t6 = {
+			value: "dark",
+			label: t5,
+			icon: "ph:moon"
+		};
+		$[8] = t5;
+		$[9] = t6;
+	} else t6 = $[9];
+	let t7;
+	if ($[10] !== t) {
+		t7 = t("ui.themeSystem");
+		$[10] = t;
+		$[11] = t7;
+	} else t7 = $[11];
+	let t8;
+	if ($[12] !== t7) {
+		t8 = {
+			value: "system",
+			label: t7,
+			icon: "ph:monitor"
+		};
+		$[12] = t7;
+		$[13] = t8;
+	} else t8 = $[13];
+	let t9;
+	if ($[14] !== t4 || $[15] !== t6 || $[16] !== t8) {
+		t9 = [
+			t4,
+			t6,
+			t8
+		];
+		$[14] = t4;
+		$[15] = t6;
+		$[16] = t8;
+		$[17] = t9;
+	} else t9 = $[17];
+	const themeOptions = t9;
+	let t10;
+	if ($[18] !== isMobile || $[19] !== setOpenMobile) {
+		t10 = () => {
 			if (isMobile) setOpenMobile(false);
 		};
-		$[2] = isMobile;
-		$[3] = setOpenMobile;
-		$[4] = t1;
-	} else t1 = $[4];
-	const closeSidebarOnMobile = t1;
-	let t2;
-	if ($[5] !== authClient || $[6] !== basePath || $[7] !== closeSidebarOnMobile || $[8] !== navigate || $[9] !== t) {
-		t2 = async () => {
+		$[18] = isMobile;
+		$[19] = setOpenMobile;
+		$[20] = t10;
+	} else t10 = $[20];
+	const closeSidebarOnMobile = t10;
+	let t11;
+	if ($[21] !== authClient || $[22] !== basePath || $[23] !== closeSidebarOnMobile || $[24] !== navigate || $[25] !== t) {
+		t11 = async () => {
 			if (!authClient) return;
 			try {
 				await authClient.signOut();
 				closeSidebarOnMobile();
 				navigate(`${basePath}/login`);
-			} catch (t3$1) {
+			} catch (t12$1) {
 				toast.error(t("auth.logoutFailed"));
 			}
 		};
-		$[5] = authClient;
-		$[6] = basePath;
-		$[7] = closeSidebarOnMobile;
-		$[8] = navigate;
-		$[9] = t;
-		$[10] = t2;
-	} else t2 = $[10];
-	const handleLogout = t2;
-	let t3;
-	if ($[11] !== basePath || $[12] !== closeSidebarOnMobile || $[13] !== navigate || $[14] !== user) {
-		t3 = () => {
+		$[21] = authClient;
+		$[22] = basePath;
+		$[23] = closeSidebarOnMobile;
+		$[24] = navigate;
+		$[25] = t;
+		$[26] = t11;
+	} else t11 = $[26];
+	const handleLogout = t11;
+	let t12;
+	if ($[27] !== basePath || $[28] !== closeSidebarOnMobile || $[29] !== navigate || $[30] !== user) {
+		t12 = () => {
 			if (user?.id) {
 				closeSidebarOnMobile();
 				navigate(`${basePath}/collections/user/${user.id}`);
 			}
 		};
-		$[11] = basePath;
-		$[12] = closeSidebarOnMobile;
-		$[13] = navigate;
-		$[14] = user;
-		$[15] = t3;
-	} else t3 = $[15];
-	const handleMyAccount = t3;
+		$[27] = basePath;
+		$[28] = closeSidebarOnMobile;
+		$[29] = navigate;
+		$[30] = user;
+		$[31] = t12;
+	} else t12 = $[31];
+	const handleMyAccount = t12;
 	if (isPending) {
-		let t4$1;
-		if ($[16] !== collapsed) {
-			t4$1 = /* @__PURE__ */ jsx(UserFooterSkeleton, { collapsed });
-			$[16] = collapsed;
-			$[17] = t4$1;
-		} else t4$1 = $[17];
-		return t4$1;
+		let t13$1;
+		if ($[32] !== collapsed) {
+			t13$1 = /* @__PURE__ */ jsx(UserFooterSkeleton, { collapsed });
+			$[32] = collapsed;
+			$[33] = t13$1;
+		} else t13$1 = $[33];
+		return t13$1;
 	}
 	if (!authClient || !user) return null;
-	let t4;
-	if ($[18] !== user.email || $[19] !== user.name) {
-		t4 = user.name || user.email?.split("@")[0] || "User";
-		$[18] = user.email;
-		$[19] = user.name;
-		$[20] = t4;
-	} else t4 = $[20];
-	const displayName = t4;
+	let t13;
+	if ($[34] !== user.email || $[35] !== user.name) {
+		t13 = user.name || user.email?.split("@")[0] || "User";
+		$[34] = user.email;
+		$[35] = user.name;
+		$[36] = t13;
+	} else t13 = $[36];
+	const displayName = t13;
 	const displayEmail = user.email || "";
 	const T0 = SidebarFooter;
-	const t5 = "qa-sidebar__footer border-sidebar-border border-t p-2";
+	const t14 = "qa-sidebar__footer border-sidebar-border/70 border-t p-2";
 	const T1 = SidebarMenu;
 	const T2 = SidebarMenuItem;
 	const T3 = DropdownMenu;
-	const t6 = collapsed && "justify-center";
-	let t7;
-	if ($[21] !== t6) {
-		t7 = cn("flex w-full items-center gap-2.5 p-2 text-left transition-colors duration-150", "hover:bg-sidebar-accent text-sidebar-foreground", "focus-visible:ring-sidebar-ring focus-visible:ring-1 focus-visible:outline-none", t6);
-		$[21] = t6;
-		$[22] = t7;
-	} else t7 = $[22];
-	let t8;
-	if ($[23] === Symbol.for("react.memo_cache_sentinel")) {
-		t8 = /* @__PURE__ */ jsx("div", {
-			className: "qa-sidebar__user-avatar bg-sidebar-primary/10 text-sidebar-primary border-sidebar-primary/20 flex size-8 shrink-0 items-center justify-center border",
-			children: /* @__PURE__ */ jsx(Icon, {
+	const t15 = collapsed && "justify-center";
+	let t16;
+	if ($[37] !== t15) {
+		t16 = cn("qa-sidebar__user-trigger flex w-full items-center gap-2.5 rounded-md p-2 text-left transition-[background-color,color,transform] duration-150 ease-out active:scale-[0.96]", "hover:bg-sidebar-accent text-sidebar-foreground", "focus-visible:ring-sidebar-ring focus-visible:ring-1 focus-visible:outline-none", t15);
+		$[37] = t15;
+		$[38] = t16;
+	} else t16 = $[38];
+	let t17;
+	if ($[39] !== user.image) {
+		t17 = /* @__PURE__ */ jsx("div", {
+			className: "qa-sidebar__user-avatar border-sidebar-border bg-sidebar-accent text-sidebar-accent-foreground flex size-8 shrink-0 items-center justify-center rounded-md border",
+			children: user.image ? /* @__PURE__ */ jsx("img", {
+				src: user.image,
+				alt: "",
+				className: "image-outline size-full rounded-md object-cover"
+			}) : /* @__PURE__ */ jsx(Icon, {
 				icon: "ph:user-bold",
 				className: "size-4"
 			})
 		});
-		$[23] = t8;
-	} else t8 = $[23];
-	let t9;
-	if ($[24] !== collapsed || $[25] !== displayEmail || $[26] !== displayName) {
-		t9 = !collapsed && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", {
+		$[39] = user.image;
+		$[40] = t17;
+	} else t17 = $[40];
+	let t18;
+	if ($[41] !== collapsed || $[42] !== displayEmail || $[43] !== displayName) {
+		t18 = !collapsed && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", {
 			className: "grid flex-1 text-left leading-tight",
 			children: [/* @__PURE__ */ jsx("span", {
-				className: "qa-sidebar__user-name truncate text-xs font-medium",
+				className: "qa-sidebar__user-name truncate text-sm font-medium",
 				children: displayName
 			}), /* @__PURE__ */ jsx("span", {
-				className: "qa-sidebar__user-email text-sidebar-foreground/70 truncate text-[10px]",
+				className: "qa-sidebar__user-email text-sidebar-foreground/55 truncate text-xs",
 				children: displayEmail
 			})]
 		}), /* @__PURE__ */ jsx(Icon, {
@@ -906,107 +902,134 @@ function UserFooter() {
 			className: "text-sidebar-foreground/60 ml-auto size-3.5",
 			"aria-hidden": "true"
 		})] });
-		$[24] = collapsed;
-		$[25] = displayEmail;
-		$[26] = displayName;
-		$[27] = t9;
-	} else t9 = $[27];
-	let t10;
-	if ($[28] !== t7 || $[29] !== t9) {
-		t10 = /* @__PURE__ */ jsxs(DropdownMenuTrigger, {
-			className: t7,
-			children: [t8, t9]
+		$[41] = collapsed;
+		$[42] = displayEmail;
+		$[43] = displayName;
+		$[44] = t18;
+	} else t18 = $[44];
+	let t19;
+	if ($[45] !== t16 || $[46] !== t17 || $[47] !== t18) {
+		t19 = /* @__PURE__ */ jsxs(DropdownMenuTrigger, {
+			className: t16,
+			children: [t17, t18]
 		});
-		$[28] = t7;
-		$[29] = t9;
-		$[30] = t10;
-	} else t10 = $[30];
+		$[45] = t16;
+		$[46] = t17;
+		$[47] = t18;
+		$[48] = t19;
+	} else t19 = $[48];
 	const T4 = DropdownMenuContent;
-	const t11 = collapsed ? "right" : "top";
-	const t12 = collapsed ? "start" : "start";
-	const t13 = "w-56";
-	let t14;
-	if ($[31] !== displayName) {
-		t14 = /* @__PURE__ */ jsx("p", {
-			className: "text-xs font-medium",
+	const t20 = collapsed ? "right" : "top";
+	const t21 = collapsed ? "start" : "start";
+	const t22 = "w-56";
+	let t23;
+	if ($[49] !== displayName) {
+		t23 = /* @__PURE__ */ jsx("p", {
+			className: "text-sm font-medium",
 			children: displayName
 		});
-		$[31] = displayName;
-		$[32] = t14;
-	} else t14 = $[32];
-	let t15;
-	if ($[33] !== displayEmail) {
-		t15 = /* @__PURE__ */ jsx("p", {
-			className: "text-muted-foreground text-[10px]",
+		$[49] = displayName;
+		$[50] = t23;
+	} else t23 = $[50];
+	let t24;
+	if ($[51] !== displayEmail) {
+		t24 = /* @__PURE__ */ jsx("p", {
+			className: "text-muted-foreground text-xs",
 			children: displayEmail
 		});
-		$[33] = displayEmail;
-		$[34] = t15;
-	} else t15 = $[34];
-	let t16;
-	if ($[35] !== user.role) {
-		t16 = user.role && /* @__PURE__ */ jsx("p", {
-			className: "text-muted-foreground mt-0.5 text-[10px] capitalize",
+		$[51] = displayEmail;
+		$[52] = t24;
+	} else t24 = $[52];
+	let t25;
+	if ($[53] !== user.role) {
+		t25 = user.role && /* @__PURE__ */ jsx("p", {
+			className: "text-muted-foreground mt-0.5 text-xs capitalize",
 			children: user.role
 		});
-		$[35] = user.role;
-		$[36] = t16;
-	} else t16 = $[36];
-	let t17;
-	if ($[37] !== t14 || $[38] !== t15 || $[39] !== t16) {
-		t17 = /* @__PURE__ */ jsxs("div", {
+		$[53] = user.role;
+		$[54] = t25;
+	} else t25 = $[54];
+	let t26;
+	if ($[55] !== t23 || $[56] !== t24 || $[57] !== t25) {
+		t26 = /* @__PURE__ */ jsxs("div", {
 			className: "px-2 py-1.5",
 			children: [
-				t14,
-				t15,
-				t16
+				t23,
+				t24,
+				t25
 			]
 		});
-		$[37] = t14;
-		$[38] = t15;
-		$[39] = t16;
-		$[40] = t17;
-	} else t17 = $[40];
-	let t18;
-	if ($[41] === Symbol.for("react.memo_cache_sentinel")) {
-		t18 = /* @__PURE__ */ jsx(DropdownMenuSeparator, {});
-		$[41] = t18;
-	} else t18 = $[41];
-	let t19;
-	if ($[42] === Symbol.for("react.memo_cache_sentinel")) {
-		t19 = /* @__PURE__ */ jsx(Icon, {
+		$[55] = t23;
+		$[56] = t24;
+		$[57] = t25;
+		$[58] = t26;
+	} else t26 = $[58];
+	let t27;
+	if ($[59] === Symbol.for("react.memo_cache_sentinel")) {
+		t27 = /* @__PURE__ */ jsx(DropdownMenuSeparator, {});
+		$[59] = t27;
+	} else t27 = $[59];
+	let t28;
+	if ($[60] === Symbol.for("react.memo_cache_sentinel")) {
+		t28 = /* @__PURE__ */ jsx(Icon, {
 			icon: "ph:user-circle",
 			className: "size-4"
 		});
-		$[42] = t19;
-	} else t19 = $[42];
-	let t20;
-	if ($[43] !== t) {
-		t20 = t("auth.myAccount");
-		$[43] = t;
-		$[44] = t20;
-	} else t20 = $[44];
-	let t21;
-	if ($[45] !== handleMyAccount || $[46] !== t20) {
-		t21 = /* @__PURE__ */ jsxs(DropdownMenuItem, {
+		$[60] = t28;
+	} else t28 = $[60];
+	let t29;
+	if ($[61] !== t) {
+		t29 = t("auth.myAccount");
+		$[61] = t;
+		$[62] = t29;
+	} else t29 = $[62];
+	let t30;
+	if ($[63] !== handleMyAccount || $[64] !== t29) {
+		t30 = /* @__PURE__ */ jsxs(DropdownMenuItem, {
 			onClick: handleMyAccount,
-			children: [t19, t20]
+			children: [t28, t29]
 		});
-		$[45] = handleMyAccount;
-		$[46] = t20;
-		$[47] = t21;
-	} else t21 = $[47];
-	const t22 = hasMultipleUiLocales && /* @__PURE__ */ jsxs(DropdownMenuSub, { children: [/* @__PURE__ */ jsxs(DropdownMenuSubTrigger, { children: [/* @__PURE__ */ jsx(Icon, { icon: "ph:globe" }), t("locale.uiLanguage")] }), /* @__PURE__ */ jsx(DropdownMenuSubContent, { children: uiLocaleOptions.map((locale) => /* @__PURE__ */ jsxs(DropdownMenuItem, {
+		$[63] = handleMyAccount;
+		$[64] = t29;
+		$[65] = t30;
+	} else t30 = $[65];
+	let t31;
+	if ($[66] !== setTheme || $[67] !== shouldShowThemeToggle || $[68] !== t || $[69] !== theme || $[70] !== themeOptions) {
+		t31 = shouldShowThemeToggle && /* @__PURE__ */ jsxs(DropdownMenuSub, { children: [/* @__PURE__ */ jsxs(DropdownMenuSubTrigger, { children: [/* @__PURE__ */ jsx(Icon, { icon: "ph:circle-half" }), t("ui.toggleTheme")] }), /* @__PURE__ */ jsx(DropdownMenuSubContent, { children: themeOptions.map((option) => /* @__PURE__ */ jsxs(DropdownMenuItem, {
+			onClick: () => setTheme(option.value),
+			children: [
+				/* @__PURE__ */ jsx(Icon, {
+					icon: option.icon,
+					className: "size-4"
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: "flex-1",
+					children: option.label
+				}),
+				theme === option.value && /* @__PURE__ */ jsx(Icon, {
+					icon: "ph:check",
+					className: "text-foreground size-4"
+				})
+			]
+		}, option.value)) })] });
+		$[66] = setTheme;
+		$[67] = shouldShowThemeToggle;
+		$[68] = t;
+		$[69] = theme;
+		$[70] = themeOptions;
+		$[71] = t31;
+	} else t31 = $[71];
+	const t32 = hasMultipleUiLocales && /* @__PURE__ */ jsxs(DropdownMenuSub, { children: [/* @__PURE__ */ jsxs(DropdownMenuSubTrigger, { children: [/* @__PURE__ */ jsx(Icon, { icon: "ph:globe" }), t("locale.uiLanguage")] }), /* @__PURE__ */ jsx(DropdownMenuSubContent, { children: uiLocaleOptions.map((locale) => /* @__PURE__ */ jsxs(DropdownMenuItem, {
 		onClick: () => setUiLocale(locale.code),
 		children: [
 			/* @__PURE__ */ jsx("img", {
 				src: getFlagUrl(locale.code),
 				alt: locale.code,
-				className: "h-3 w-4 object-cover",
+				className: "image-outline h-3 w-4 object-cover",
 				onError: _temp5
 			}),
 			/* @__PURE__ */ jsx("span", {
-				className: "w-6 text-xs font-medium uppercase",
+				className: "font-chrome chrome-meta w-6 text-xs font-medium",
 				children: locale.code
 			}),
 			/* @__PURE__ */ jsx("span", {
@@ -1015,23 +1038,23 @@ function UserFooter() {
 			}),
 			locale.code === uiLocale && /* @__PURE__ */ jsx(Icon, {
 				icon: "ph:check",
-				className: "text-primary size-4"
+				className: "text-foreground size-4"
 			})
 		]
 	}, locale.code)) })] });
-	let t23;
-	if ($[48] !== contentLocale || $[49] !== contentLocales || $[50] !== hasMultipleContentLocales || $[51] !== setContentLocale || $[52] !== t) {
-		t23 = hasMultipleContentLocales && /* @__PURE__ */ jsxs(DropdownMenuSub, { children: [/* @__PURE__ */ jsxs(DropdownMenuSubTrigger, { children: [/* @__PURE__ */ jsx(Icon, { icon: "ph:translate" }), t("locale.contentLanguage")] }), /* @__PURE__ */ jsx(DropdownMenuSubContent, { children: contentLocales.locales.map((locale_0) => /* @__PURE__ */ jsxs(DropdownMenuItem, {
+	let t33;
+	if ($[72] !== contentLocale || $[73] !== contentLocales || $[74] !== hasMultipleContentLocales || $[75] !== setContentLocale || $[76] !== t) {
+		t33 = hasMultipleContentLocales && /* @__PURE__ */ jsxs(DropdownMenuSub, { children: [/* @__PURE__ */ jsxs(DropdownMenuSubTrigger, { children: [/* @__PURE__ */ jsx(Icon, { icon: "ph:translate" }), t("locale.contentLanguage")] }), /* @__PURE__ */ jsx(DropdownMenuSubContent, { children: contentLocales.locales.map((locale_0) => /* @__PURE__ */ jsxs(DropdownMenuItem, {
 			onClick: () => setContentLocale(locale_0.code),
 			children: [
 				/* @__PURE__ */ jsx("img", {
 					src: getFlagUrl(locale_0.flagCountryCode ?? locale_0.code),
 					alt: locale_0.code,
-					className: "h-3 w-4 object-cover",
+					className: "image-outline h-3 w-4 object-cover",
 					onError: _temp6
 				}),
 				/* @__PURE__ */ jsx("span", {
-					className: "w-6 text-xs font-medium uppercase",
+					className: "font-chrome chrome-meta w-6 text-xs font-medium",
 					children: locale_0.code
 				}),
 				/* @__PURE__ */ jsx("span", {
@@ -1040,107 +1063,109 @@ function UserFooter() {
 				}),
 				locale_0.code === contentLocale && /* @__PURE__ */ jsx(Icon, {
 					icon: "ph:check",
-					className: "text-primary size-4"
+					className: "text-foreground size-4"
 				})
 			]
 		}, locale_0.code)) })] });
-		$[48] = contentLocale;
-		$[49] = contentLocales;
-		$[50] = hasMultipleContentLocales;
-		$[51] = setContentLocale;
-		$[52] = t;
-		$[53] = t23;
-	} else t23 = $[53];
-	let t24;
-	if ($[54] === Symbol.for("react.memo_cache_sentinel")) {
-		t24 = /* @__PURE__ */ jsx(DropdownMenuSeparator, {});
-		$[54] = t24;
-	} else t24 = $[54];
-	let t25;
-	if ($[55] === Symbol.for("react.memo_cache_sentinel")) {
-		t25 = /* @__PURE__ */ jsx(Icon, {
+		$[72] = contentLocale;
+		$[73] = contentLocales;
+		$[74] = hasMultipleContentLocales;
+		$[75] = setContentLocale;
+		$[76] = t;
+		$[77] = t33;
+	} else t33 = $[77];
+	let t34;
+	if ($[78] === Symbol.for("react.memo_cache_sentinel")) {
+		t34 = /* @__PURE__ */ jsx(DropdownMenuSeparator, {});
+		$[78] = t34;
+	} else t34 = $[78];
+	let t35;
+	if ($[79] === Symbol.for("react.memo_cache_sentinel")) {
+		t35 = /* @__PURE__ */ jsx(Icon, {
 			icon: "ph:sign-out",
 			className: "size-4"
 		});
-		$[55] = t25;
-	} else t25 = $[55];
-	let t26;
-	if ($[56] !== t) {
-		t26 = t("auth.logout");
-		$[56] = t;
-		$[57] = t26;
-	} else t26 = $[57];
-	let t27;
-	if ($[58] !== handleLogout || $[59] !== t26) {
-		t27 = /* @__PURE__ */ jsxs(DropdownMenuItem, {
+		$[79] = t35;
+	} else t35 = $[79];
+	let t36;
+	if ($[80] !== t) {
+		t36 = t("auth.logout");
+		$[80] = t;
+		$[81] = t36;
+	} else t36 = $[81];
+	let t37;
+	if ($[82] !== handleLogout || $[83] !== t36) {
+		t37 = /* @__PURE__ */ jsxs(DropdownMenuItem, {
 			variant: "destructive",
 			onClick: handleLogout,
-			children: [t25, t26]
+			children: [t35, t36]
 		});
-		$[58] = handleLogout;
-		$[59] = t26;
-		$[60] = t27;
-	} else t27 = $[60];
-	let t28;
-	if ($[61] !== T4 || $[62] !== t11 || $[63] !== t12 || $[64] !== t17 || $[65] !== t18 || $[66] !== t21 || $[67] !== t22 || $[68] !== t23 || $[69] !== t27) {
-		t28 = /* @__PURE__ */ jsxs(T4, {
-			side: t11,
-			align: t12,
-			className: t13,
+		$[82] = handleLogout;
+		$[83] = t36;
+		$[84] = t37;
+	} else t37 = $[84];
+	let t38;
+	if ($[85] !== T4 || $[86] !== t20 || $[87] !== t21 || $[88] !== t26 || $[89] !== t27 || $[90] !== t30 || $[91] !== t31 || $[92] !== t32 || $[93] !== t33 || $[94] !== t37) {
+		t38 = /* @__PURE__ */ jsxs(T4, {
+			side: t20,
+			align: t21,
+			className: t22,
 			children: [
-				t17,
-				t18,
-				t21,
-				t22,
-				t23,
-				t24,
-				t27
+				t26,
+				t27,
+				t30,
+				t31,
+				t32,
+				t33,
+				t34,
+				t37
 			]
 		});
-		$[61] = T4;
-		$[62] = t11;
-		$[63] = t12;
-		$[64] = t17;
-		$[65] = t18;
-		$[66] = t21;
-		$[67] = t22;
-		$[68] = t23;
-		$[69] = t27;
-		$[70] = t28;
-	} else t28 = $[70];
-	let t29;
-	if ($[71] !== T3 || $[72] !== t10 || $[73] !== t28) {
-		t29 = /* @__PURE__ */ jsxs(T3, { children: [t10, t28] });
-		$[71] = T3;
-		$[72] = t10;
-		$[73] = t28;
-		$[74] = t29;
-	} else t29 = $[74];
-	let t30;
-	if ($[75] !== T2 || $[76] !== t29) {
-		t30 = /* @__PURE__ */ jsx(T2, { children: t29 });
-		$[75] = T2;
-		$[76] = t29;
-		$[77] = t30;
-	} else t30 = $[77];
-	let t31;
-	if ($[78] !== T1 || $[79] !== t30) {
-		t31 = /* @__PURE__ */ jsx(T1, { children: t30 });
-		$[78] = T1;
-		$[79] = t30;
-		$[80] = t31;
-	} else t31 = $[80];
-	let t32;
-	if ($[81] !== T0 || $[82] !== t31) {
-		t32 = /* @__PURE__ */ jsx(T0, {
-			className: t5,
-			children: t31
+		$[85] = T4;
+		$[86] = t20;
+		$[87] = t21;
+		$[88] = t26;
+		$[89] = t27;
+		$[90] = t30;
+		$[91] = t31;
+		$[92] = t32;
+		$[93] = t33;
+		$[94] = t37;
+		$[95] = t38;
+	} else t38 = $[95];
+	let t39;
+	if ($[96] !== T3 || $[97] !== t19 || $[98] !== t38) {
+		t39 = /* @__PURE__ */ jsxs(T3, { children: [t19, t38] });
+		$[96] = T3;
+		$[97] = t19;
+		$[98] = t38;
+		$[99] = t39;
+	} else t39 = $[99];
+	let t40;
+	if ($[100] !== T2 || $[101] !== t39) {
+		t40 = /* @__PURE__ */ jsx(T2, { children: t39 });
+		$[100] = T2;
+		$[101] = t39;
+		$[102] = t40;
+	} else t40 = $[102];
+	let t41;
+	if ($[103] !== T1 || $[104] !== t40) {
+		t41 = /* @__PURE__ */ jsx(T1, { children: t40 });
+		$[103] = T1;
+		$[104] = t40;
+		$[105] = t41;
+	} else t41 = $[105];
+	let t42;
+	if ($[106] !== T0 || $[107] !== t41) {
+		t42 = /* @__PURE__ */ jsx(T0, {
+			className: t14,
+			children: t41
 		});
-		$[81] = T0;
-		$[82] = t31;
-		$[83] = t32;
-	} else t32 = $[83];
-	return t32;
+		$[106] = T0;
+		$[107] = t41;
+		$[108] = t42;
+	} else t42 = $[108];
+	return t42;
 }
 /**
 * AdminSidebar Component
@@ -1174,8 +1199,8 @@ function _temp5(e) {
 	e.currentTarget.style.display = "none";
 }
 function AdminSidebar(t0) {
-	const $ = c(63);
-	const { LinkComponent, activeRoute, basePath: t1, brandName: brandNameProp, className, renderBrand, renderNavItem, footer, afterBrand, beforeFooter, useActiveProps: t2 } = t0;
+	const $ = c(93);
+	const { LinkComponent, activeRoute, basePath: t1, brandName: brandNameProp, className, renderBrand, renderNavItem, footer, onSearchOpen, afterBrand, beforeFooter, theme, setTheme, showThemeToggle, useActiveProps: t2 } = t0;
 	const basePath = t1 === void 0 ? "/admin" : t1;
 	const useActiveProps = t2 === void 0 ? true : t2;
 	let t3;
@@ -1185,194 +1210,329 @@ function AdminSidebar(t0) {
 		$[1] = t3;
 	} else t3 = $[1];
 	const { navigation, brandName } = useSidebarProps(t3);
-	const { state, isMobile, setOpenMobile } = useSidebar();
+	const { state, isMobile, setOpenMobile, toggleSidebar } = useSidebar();
 	const collapsed = state === "collapsed";
+	const currentActiveRoute = activeRoute ?? (typeof window !== "undefined" ? window.location.pathname : void 0);
 	const { isSectionCollapsed, toggleSection } = useSidebarCollapsedSections();
+	const admin = useAdminStoreRaw()?.getState().admin;
 	let t4;
-	if ($[2] !== isMobile || $[3] !== setOpenMobile) {
-		t4 = () => {
+	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+		t4 = { allowDynamicImportLoaders: false };
+		$[2] = t4;
+	} else t4 = $[2];
+	const { Component: BrandOverride } = useLazyComponent(admin?.getComponent("adminSidebarBrand"), t4);
+	let t5;
+	if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+		t5 = { allowDynamicImportLoaders: false };
+		$[3] = t5;
+	} else t5 = $[3];
+	const { Component: NavItemOverride } = useLazyComponent(admin?.getComponent("adminSidebarNavItem"), t5);
+	let t6;
+	if ($[4] !== BrandOverride || $[5] !== renderBrand) {
+		t6 = renderBrand ?? (BrandOverride ? (props) => /* @__PURE__ */ jsx(BrandOverride, { ...props }) : void 0);
+		$[4] = BrandOverride;
+		$[5] = renderBrand;
+		$[6] = t6;
+	} else t6 = $[6];
+	const effectiveRenderBrand = t6;
+	let t7;
+	if ($[7] !== NavItemOverride || $[8] !== renderNavItem) {
+		t7 = renderNavItem ?? (NavItemOverride ? (props_0) => /* @__PURE__ */ jsx(NavItemOverride, { ...props_0 }) : void 0);
+		$[7] = NavItemOverride;
+		$[8] = renderNavItem;
+		$[9] = t7;
+	} else t7 = $[9];
+	const effectiveRenderNavItem = t7;
+	let t8;
+	if ($[10] !== isMobile || $[11] !== setOpenMobile) {
+		t8 = () => {
 			if (isMobile) setOpenMobile(false);
 		};
-		$[2] = isMobile;
-		$[3] = setOpenMobile;
-		$[4] = t4;
-	} else t4 = $[4];
-	const handleBrandClick = t4;
-	let t5;
-	if ($[5] !== brandName || $[6] !== collapsed || $[7] !== renderBrand) {
-		t5 = renderBrand ? renderBrand({
-			name: brandName,
-			collapsed
-		}) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(QuestpieSymbol, {}), !collapsed && /* @__PURE__ */ jsx("div", {
+		$[10] = isMobile;
+		$[11] = setOpenMobile;
+		$[12] = t8;
+	} else t8 = $[12];
+	const handleBrandClick = t8;
+	let t9;
+	if ($[13] !== brandName) {
+		t9 = (isCollapsed) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(QuestpieSymbol, {}), !isCollapsed && /* @__PURE__ */ jsx("div", {
 			className: "grid flex-1 text-left leading-tight",
 			children: /* @__PURE__ */ jsx("span", {
-				className: "truncate font-bold tracking-tight",
+				className: "qa-sidebar__brand-name font-chrome truncate text-sm font-medium",
 				children: brandName
 			})
 		})] });
-		$[5] = brandName;
-		$[6] = collapsed;
-		$[7] = renderBrand;
-		$[8] = t5;
-	} else t5 = $[8];
-	const brandContent = t5;
-	const t6 = collapsed && "justify-center";
-	let t7;
-	if ($[9] !== t6) {
-		t7 = cn("qa-sidebar__brand flex items-center gap-2.5 p-2 transition-colors duration-150", "hover:bg-sidebar-accent", t6);
-		$[9] = t6;
-		$[10] = t7;
-	} else t7 = $[10];
-	let t8;
-	if ($[11] !== LinkComponent || $[12] !== basePath || $[13] !== brandContent || $[14] !== t7) {
-		t8 = /* @__PURE__ */ jsx(LinkComponent, {
+		$[13] = brandName;
+		$[14] = t9;
+	} else t9 = $[14];
+	const renderBuiltInBrand = t9;
+	let t10;
+	if ($[15] !== brandName || $[16] !== effectiveRenderBrand || $[17] !== renderBuiltInBrand) {
+		t10 = (isCollapsed_0) => {
+			const builtInBrand = renderBuiltInBrand(isCollapsed_0);
+			if (!effectiveRenderBrand) return builtInBrand;
+			return /* @__PURE__ */ jsx(React.Suspense, {
+				fallback: builtInBrand,
+				children: effectiveRenderBrand({
+					name: brandName,
+					collapsed: isCollapsed_0
+				})
+			});
+		};
+		$[15] = brandName;
+		$[16] = effectiveRenderBrand;
+		$[17] = renderBuiltInBrand;
+		$[18] = t10;
+	} else t10 = $[18];
+	const renderBrandContent = t10;
+	let t11;
+	if ($[19] !== collapsed || $[20] !== renderBrandContent) {
+		t11 = renderBrandContent(collapsed);
+		$[19] = collapsed;
+		$[20] = renderBrandContent;
+		$[21] = t11;
+	} else t11 = $[21];
+	const brandContent = t11;
+	const t12 = collapsed && "justify-center";
+	let t13;
+	if ($[22] !== t12) {
+		t13 = cn("qa-sidebar__brand flex items-center gap-2 rounded-md p-2 transition-[background-color,color,transform] duration-[var(--motion-duration-base)] ease-[var(--motion-ease-standard)] active:scale-[0.96] motion-reduce:transition-none motion-reduce:active:scale-100", "hover:bg-sidebar-accent", t12);
+		$[22] = t12;
+		$[23] = t13;
+	} else t13 = $[23];
+	let t14;
+	if ($[24] !== LinkComponent || $[25] !== basePath || $[26] !== brandContent || $[27] !== t13) {
+		t14 = /* @__PURE__ */ jsx(LinkComponent, {
 			to: basePath,
-			className: t7,
+			className: t13,
 			children: brandContent
 		});
-		$[11] = LinkComponent;
-		$[12] = basePath;
-		$[13] = brandContent;
-		$[14] = t7;
-		$[15] = t8;
-	} else t8 = $[15];
-	const brandLink = t8;
-	let t9;
-	if ($[16] !== className) {
-		t9 = cn("qa-sidebar", className);
-		$[16] = className;
-		$[17] = t9;
-	} else t9 = $[17];
-	let t10;
-	if ($[18] !== LinkComponent || $[19] !== basePath || $[20] !== brandLink || $[21] !== brandName || $[22] !== collapsed || $[23] !== isMobile || $[24] !== renderBrand) {
-		t10 = collapsed && !isMobile ? /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, { render: /* @__PURE__ */ jsx(LinkComponent, {
+		$[24] = LinkComponent;
+		$[25] = basePath;
+		$[26] = brandContent;
+		$[27] = t13;
+		$[28] = t14;
+	} else t14 = $[28];
+	const brandLink = t14;
+	let t15;
+	if ($[29] !== onSearchOpen) {
+		t15 = onSearchOpen && /* @__PURE__ */ jsx(Button, {
+			type: "button",
+			variant: "ghost",
+			size: "icon-xs",
+			className: "text-sidebar-foreground/60 hover:bg-sidebar-accent hover:text-sidebar-foreground",
+			onClick: onSearchOpen,
+			title: "Search",
+			"aria-label": "Search",
+			children: /* @__PURE__ */ jsx(Icon, { icon: "ph:magnifying-glass" })
+		});
+		$[29] = onSearchOpen;
+		$[30] = t15;
+	} else t15 = $[30];
+	let t16;
+	if ($[31] === Symbol.for("react.memo_cache_sentinel")) {
+		t16 = /* @__PURE__ */ jsx(SidebarTrigger, { className: "text-sidebar-foreground/60 hover:bg-sidebar-accent hover:text-sidebar-foreground" });
+		$[31] = t16;
+	} else t16 = $[31];
+	let t17;
+	if ($[32] !== t15) {
+		t17 = /* @__PURE__ */ jsxs("div", {
+			className: "qa-sidebar__header-actions flex shrink-0 items-center gap-1",
+			children: [t15, t16]
+		});
+		$[32] = t15;
+		$[33] = t17;
+	} else t17 = $[33];
+	const sidebarActions = t17;
+	let t18;
+	if ($[34] !== className) {
+		t18 = cn("qa-sidebar bg-sidebar relative border-none", className);
+		$[34] = className;
+		$[35] = t18;
+	} else t18 = $[35];
+	let t19;
+	if ($[36] !== LinkComponent || $[37] !== basePath || $[38] !== brandLink || $[39] !== brandName || $[40] !== collapsed || $[41] !== isMobile || $[42] !== renderBrandContent) {
+		t19 = collapsed && !isMobile ? /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, { render: /* @__PURE__ */ jsx(LinkComponent, {
 			to: basePath,
-			className: cn("flex items-center gap-2.5 p-2 transition-colors duration-150", "hover:bg-sidebar-accent", "justify-center"),
-			children: renderBrand ? renderBrand({
-				name: brandName,
-				collapsed: true
-			}) : /* @__PURE__ */ jsx(QuestpieSymbol, {})
+			className: cn("flex items-center gap-2 rounded-md p-2 transition-[background-color,color,transform] duration-[var(--motion-duration-base)] ease-[var(--motion-ease-standard)] active:scale-[0.96] motion-reduce:transition-none motion-reduce:active:scale-100", "hover:bg-sidebar-accent", "justify-center"),
+			children: renderBrandContent(true)
 		}) }), /* @__PURE__ */ jsx(TooltipContent, {
 			side: "right",
 			children: brandName
 		})] }) : brandLink;
-		$[18] = LinkComponent;
-		$[19] = basePath;
-		$[20] = brandLink;
-		$[21] = brandName;
-		$[22] = collapsed;
-		$[23] = isMobile;
-		$[24] = renderBrand;
-		$[25] = t10;
-	} else t10 = $[25];
-	let t11;
-	if ($[26] !== handleBrandClick || $[27] !== t10) {
-		t11 = /* @__PURE__ */ jsx(SidebarHeader, {
-			className: "qa-sidebar__header border-sidebar-border border-b p-2",
-			children: /* @__PURE__ */ jsx(SidebarMenu, { children: /* @__PURE__ */ jsx(SidebarMenuItem, {
+		$[36] = LinkComponent;
+		$[37] = basePath;
+		$[38] = brandLink;
+		$[39] = brandName;
+		$[40] = collapsed;
+		$[41] = isMobile;
+		$[42] = renderBrandContent;
+		$[43] = t19;
+	} else t19 = $[43];
+	let t20;
+	if ($[44] !== handleBrandClick || $[45] !== t19) {
+		t20 = /* @__PURE__ */ jsx(SidebarMenu, {
+			className: "min-w-0 flex-1",
+			children: /* @__PURE__ */ jsx(SidebarMenuItem, {
 				onClickCapture: handleBrandClick,
-				children: t10
-			}) })
+				children: t19
+			})
 		});
-		$[26] = handleBrandClick;
-		$[27] = t10;
-		$[28] = t11;
-	} else t11 = $[28];
-	let t12;
-	if ($[29] !== afterBrand || $[30] !== collapsed) {
-		t12 = afterBrand && !collapsed && /* @__PURE__ */ jsx("div", {
-			className: "qa-sidebar__after-brand border-sidebar-border border-b px-3 py-2",
+		$[44] = handleBrandClick;
+		$[45] = t19;
+		$[46] = t20;
+	} else t20 = $[46];
+	const t21 = !collapsed && sidebarActions;
+	let t22;
+	if ($[47] !== t20 || $[48] !== t21) {
+		t22 = /* @__PURE__ */ jsxs(SidebarHeader, {
+			className: "qa-sidebar__header h-auto flex-row items-center gap-2 border-none px-3 pt-3 pb-1",
+			children: [t20, t21]
+		});
+		$[47] = t20;
+		$[48] = t21;
+		$[49] = t22;
+	} else t22 = $[49];
+	let t23;
+	if ($[50] !== collapsed || $[51] !== isMobile || $[52] !== onSearchOpen || $[53] !== toggleSidebar) {
+		t23 = collapsed && !isMobile && /* @__PURE__ */ jsxs("div", {
+			className: "qa-sidebar__collapsed-peek group/peek absolute top-4 -right-3 z-50 flex items-center",
+			children: [/* @__PURE__ */ jsx(Button, {
+				type: "button",
+				variant: "ghost",
+				size: "icon-xs",
+				className: "border-sidebar-border/70 bg-sidebar text-sidebar-foreground/60 hover:bg-sidebar-accent hover:text-sidebar-foreground h-8 w-3 rounded-l-none rounded-r-md border border-l-0 p-0 shadow-[var(--floating-shadow)]",
+				onClick: toggleSidebar,
+				"aria-label": "Expand sidebar",
+				children: /* @__PURE__ */ jsx("span", { className: "h-3 w-0.5 rounded-full bg-current opacity-55" })
+			}), /* @__PURE__ */ jsxs("div", {
+				className: "floating-surface ml-1 flex scale-95 items-center gap-1 p-1 opacity-0 transition-[opacity,transform] duration-[var(--motion-duration-base)] ease-[var(--motion-ease-enter)] group-focus-within/peek:scale-100 group-focus-within/peek:opacity-100 group-hover/peek:scale-100 group-hover/peek:opacity-100 motion-reduce:scale-100 motion-reduce:transition-none",
+				children: [/* @__PURE__ */ jsx(SidebarTrigger, {
+					className: "text-muted-foreground hover:bg-muted hover:text-foreground",
+					"aria-label": "Expand sidebar"
+				}), onSearchOpen && /* @__PURE__ */ jsx(Button, {
+					type: "button",
+					variant: "ghost",
+					size: "icon-sm",
+					className: "text-muted-foreground hover:bg-muted hover:text-foreground",
+					onClick: onSearchOpen,
+					title: "Search",
+					"aria-label": "Search",
+					children: /* @__PURE__ */ jsx(Icon, { icon: "ph:magnifying-glass" })
+				})]
+			})]
+		});
+		$[50] = collapsed;
+		$[51] = isMobile;
+		$[52] = onSearchOpen;
+		$[53] = toggleSidebar;
+		$[54] = t23;
+	} else t23 = $[54];
+	let t24;
+	if ($[55] !== afterBrand || $[56] !== collapsed) {
+		t24 = afterBrand && !collapsed && /* @__PURE__ */ jsx("div", {
+			className: "qa-sidebar__after-brand border-sidebar-border/70 border-b px-3 py-2",
 			children: afterBrand
 		});
-		$[29] = afterBrand;
-		$[30] = collapsed;
-		$[31] = t12;
-	} else t12 = $[31];
-	let t13;
-	if ($[32] !== LinkComponent || $[33] !== activeRoute || $[34] !== basePath || $[35] !== isSectionCollapsed || $[36] !== navigation || $[37] !== renderNavItem || $[38] !== toggleSection || $[39] !== useActiveProps) {
-		let t14$1;
-		if ($[41] !== LinkComponent || $[42] !== activeRoute || $[43] !== basePath || $[44] !== isSectionCollapsed || $[45] !== renderNavItem || $[46] !== toggleSection || $[47] !== useActiveProps) {
-			t14$1 = (group, index) => /* @__PURE__ */ jsx(NavGroup, {
+		$[55] = afterBrand;
+		$[56] = collapsed;
+		$[57] = t24;
+	} else t24 = $[57];
+	let t25;
+	if ($[58] !== LinkComponent || $[59] !== basePath || $[60] !== currentActiveRoute || $[61] !== effectiveRenderNavItem || $[62] !== isSectionCollapsed || $[63] !== navigation || $[64] !== toggleSection || $[65] !== useActiveProps) {
+		let t26$1;
+		if ($[67] !== LinkComponent || $[68] !== basePath || $[69] !== currentActiveRoute || $[70] !== effectiveRenderNavItem || $[71] !== isSectionCollapsed || $[72] !== toggleSection || $[73] !== useActiveProps) {
+			t26$1 = (group, index) => /* @__PURE__ */ jsx(NavGroup, {
 				group,
-				activeRoute,
+				activeRoute: currentActiveRoute,
 				LinkComponent,
-				renderNavItem,
+				renderNavItem: effectiveRenderNavItem,
 				basePath,
-				useActiveProps,
+				useActiveProps: useActiveProps && !currentActiveRoute,
 				isSectionCollapsed,
 				toggleSection
 			}, group.id ?? `group-${index}`);
-			$[41] = LinkComponent;
-			$[42] = activeRoute;
-			$[43] = basePath;
-			$[44] = isSectionCollapsed;
-			$[45] = renderNavItem;
-			$[46] = toggleSection;
-			$[47] = useActiveProps;
-			$[48] = t14$1;
-		} else t14$1 = $[48];
-		t13 = navigation.map(t14$1);
-		$[32] = LinkComponent;
-		$[33] = activeRoute;
-		$[34] = basePath;
-		$[35] = isSectionCollapsed;
-		$[36] = navigation;
-		$[37] = renderNavItem;
-		$[38] = toggleSection;
-		$[39] = useActiveProps;
-		$[40] = t13;
-	} else t13 = $[40];
-	let t14;
-	if ($[49] !== t13) {
-		t14 = /* @__PURE__ */ jsx(SidebarContent, {
-			className: "qa-sidebar__content",
+			$[67] = LinkComponent;
+			$[68] = basePath;
+			$[69] = currentActiveRoute;
+			$[70] = effectiveRenderNavItem;
+			$[71] = isSectionCollapsed;
+			$[72] = toggleSection;
+			$[73] = useActiveProps;
+			$[74] = t26$1;
+		} else t26$1 = $[74];
+		t25 = navigation.map(t26$1);
+		$[58] = LinkComponent;
+		$[59] = basePath;
+		$[60] = currentActiveRoute;
+		$[61] = effectiveRenderNavItem;
+		$[62] = isSectionCollapsed;
+		$[63] = navigation;
+		$[64] = toggleSection;
+		$[65] = useActiveProps;
+		$[66] = t25;
+	} else t25 = $[66];
+	let t26;
+	if ($[75] !== t25) {
+		t26 = /* @__PURE__ */ jsx(SidebarContent, {
+			className: "qa-sidebar__content gap-3 px-2 py-3 group-data-[collapsible=icon]:gap-2",
 			children: /* @__PURE__ */ jsx("nav", {
 				"aria-label": "Admin navigation",
 				className: "qa-sidebar__nav",
-				children: t13
+				children: t25
 			})
 		});
-		$[49] = t13;
-		$[50] = t14;
-	} else t14 = $[50];
-	let t15;
-	if ($[51] !== beforeFooter || $[52] !== collapsed) {
-		t15 = beforeFooter && !collapsed && /* @__PURE__ */ jsx("div", {
-			className: "qa-sidebar__before-footer border-sidebar-border border-t px-3 py-2",
+		$[75] = t25;
+		$[76] = t26;
+	} else t26 = $[76];
+	let t27;
+	if ($[77] !== beforeFooter || $[78] !== collapsed) {
+		t27 = beforeFooter && !collapsed && /* @__PURE__ */ jsx("div", {
+			className: "qa-sidebar__before-footer border-sidebar-border/70 border-t px-3 py-2",
 			children: beforeFooter
 		});
-		$[51] = beforeFooter;
-		$[52] = collapsed;
-		$[53] = t15;
-	} else t15 = $[53];
-	let t16;
-	if ($[54] !== footer) {
-		t16 = footer ?? /* @__PURE__ */ jsx(UserFooter, {});
-		$[54] = footer;
-		$[55] = t16;
-	} else t16 = $[55];
-	let t17;
-	if ($[56] !== t11 || $[57] !== t12 || $[58] !== t14 || $[59] !== t15 || $[60] !== t16 || $[61] !== t9) {
-		t17 = /* @__PURE__ */ jsxs(Sidebar, {
+		$[77] = beforeFooter;
+		$[78] = collapsed;
+		$[79] = t27;
+	} else t27 = $[79];
+	let t28;
+	if ($[80] !== footer || $[81] !== setTheme || $[82] !== showThemeToggle || $[83] !== theme) {
+		t28 = footer ?? /* @__PURE__ */ jsx(UserFooter, {
+			theme,
+			setTheme,
+			showThemeToggle
+		});
+		$[80] = footer;
+		$[81] = setTheme;
+		$[82] = showThemeToggle;
+		$[83] = theme;
+		$[84] = t28;
+	} else t28 = $[84];
+	let t29;
+	if ($[85] !== t18 || $[86] !== t22 || $[87] !== t23 || $[88] !== t24 || $[89] !== t26 || $[90] !== t27 || $[91] !== t28) {
+		t29 = /* @__PURE__ */ jsxs(Sidebar, {
 			collapsible: "icon",
-			className: t9,
+			variant: "inset",
+			className: t18,
 			children: [
-				t11,
-				t12,
-				t14,
-				t15,
-				t16
+				t22,
+				t23,
+				t24,
+				t26,
+				t27,
+				t28
 			]
 		});
-		$[56] = t11;
-		$[57] = t12;
-		$[58] = t14;
-		$[59] = t15;
-		$[60] = t16;
-		$[61] = t9;
-		$[62] = t17;
-	} else t17 = $[62];
-	return t17;
+		$[85] = t18;
+		$[86] = t22;
+		$[87] = t23;
+		$[88] = t24;
+		$[89] = t26;
+		$[90] = t27;
+		$[91] = t28;
+		$[92] = t29;
+	} else t29 = $[92];
+	return t29;
 }
 
 //#endregion