@questpie/admin 3.0.4 → 3.0.6

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

@@ -13,6 +13,7 @@ import { Skeleton } from "../../components/ui/skeleton.mjs";
 import { useAuthClientSafe } from "../../hooks/use-auth.mjs";
 import { useCurrentUser, useSessionState } from "../../hooks/use-current-user.mjs";
 import { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarMenu, SidebarMenuItem, SidebarSeparator, SidebarTrigger, useSidebar } from "../../components/ui/sidebar.mjs";
+import { BrandLogoMark } from "../../components/brand-logo.mjs";
 import { getAdminPreferenceQueryKey, useAdminPreference, useSetAdminPreference } from "../../hooks/use-admin-preferences.mjs";
 import { c } from "react/compiler-runtime";
 import { Icon } from "@iconify/react";
@@ -144,9 +145,10 @@ function _temp(s) {
 	return s.navigation;
 }
 function useSidebarProps(props) {
-	const $ = c(6);
+	const $ = c(7);
 	const storeNavigation = useAdminStore(_temp3);
 	const storeBrandName = useAdminStore(_temp4);
+	const storeBrandLogo = useAdminStore(_temp5);
 	const serverNavigation = useServerNavigation();
 	let t0;
 	if ($[0] !== serverNavigation || $[1] !== storeNavigation) {
@@ -157,15 +159,17 @@ function useSidebarProps(props) {
 	} else t0 = $[2];
 	const t1 = props.brandName ?? storeBrandName ?? "Admin";
 	let t2;
-	if ($[3] !== t0 || $[4] !== t1) {
+	if ($[3] !== storeBrandLogo || $[4] !== t0 || $[5] !== t1) {
 		t2 = {
 			navigation: t0,
-			brandName: t1
+			brandName: t1,
+			brandLogo: storeBrandLogo
 		};
-		$[3] = t0;
-		$[4] = t1;
-		$[5] = t2;
-	} else t2 = $[5];
+		$[3] = storeBrandLogo;
+		$[4] = t0;
+		$[5] = t1;
+		$[6] = t2;
+	} else t2 = $[6];
 	return t2;
 }
 /**
@@ -180,6 +184,9 @@ function useSidebarProps(props) {
 * <RenderIcon icon={{ type: "icon", props: { name: "ph:users" } }} />
 * ```
 */
+function _temp5(s_1) {
+	return s_1.brandLogo;
+}
 function _temp4(s_0) {
 	return s_0.brandName;
 }
@@ -1026,7 +1033,7 @@ function UserFooter(t0) {
 				src: getFlagUrl(locale.code),
 				alt: locale.code,
 				className: "image-outline h-3 w-4 object-cover",
-				onError: _temp5
+				onError: _temp6
 			}),
 			/* @__PURE__ */ jsx("span", {
 				className: "font-chrome chrome-meta w-6 text-xs font-medium",
@@ -1051,7 +1058,7 @@ function UserFooter(t0) {
 					src: getFlagUrl(locale_0.flagCountryCode ?? locale_0.code),
 					alt: locale_0.code,
 					className: "image-outline h-3 w-4 object-cover",
-					onError: _temp6
+					onError: _temp7
 				}),
 				/* @__PURE__ */ jsx("span", {
 					className: "font-chrome chrome-meta w-6 text-xs font-medium",
@@ -1192,14 +1199,14 @@ function UserFooter(t0) {
 * </SidebarProvider>
 * ```
 */
-function _temp6(e_0) {
+function _temp7(e_0) {
 	e_0.currentTarget.style.display = "none";
 }
-function _temp5(e) {
+function _temp6(e) {
 	e.currentTarget.style.display = "none";
 }
 function AdminSidebar(t0) {
-	const $ = c(93);
+	const $ = c(99);
 	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;
@@ -1209,7 +1216,8 @@ function AdminSidebar(t0) {
 		$[0] = brandNameProp;
 		$[1] = t3;
 	} else t3 = $[1];
-	const { navigation, brandName } = useSidebarProps(t3);
+	const { navigation, brandName, brandLogo } = useSidebarProps(t3);
+	const { t } = useTranslation();
 	const { state, isMobile, setOpenMobile, toggleSidebar } = useSidebar();
 	const collapsed = state === "collapsed";
 	const currentActiveRoute = activeRoute ?? (typeof window !== "undefined" ? window.location.pathname : void 0);
@@ -1254,20 +1262,25 @@ function AdminSidebar(t0) {
 	} else t8 = $[12];
 	const handleBrandClick = t8;
 	let t9;
-	if ($[13] !== brandName) {
-		t9 = (isCollapsed) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(QuestpieSymbol, {}), !isCollapsed && /* @__PURE__ */ jsx("div", {
+	if ($[13] !== brandLogo || $[14] !== brandName) {
+		t9 = (isCollapsed) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(BrandLogoMark, {
+			logo: brandLogo,
+			alt: brandName,
+			fallback: /* @__PURE__ */ jsx(QuestpieSymbol, {})
+		}), !isCollapsed && /* @__PURE__ */ jsx("div", {
 			className: "grid flex-1 text-left leading-tight",
 			children: /* @__PURE__ */ jsx("span", {
 				className: "qa-sidebar__brand-name font-chrome truncate text-sm font-medium",
 				children: brandName
 			})
 		})] });
-		$[13] = brandName;
-		$[14] = t9;
-	} else t9 = $[14];
+		$[13] = brandLogo;
+		$[14] = brandName;
+		$[15] = t9;
+	} else t9 = $[15];
 	const renderBuiltInBrand = t9;
 	let t10;
-	if ($[15] !== brandName || $[16] !== effectiveRenderBrand || $[17] !== renderBuiltInBrand) {
+	if ($[16] !== brandName || $[17] !== effectiveRenderBrand || $[18] !== renderBuiltInBrand) {
 		t10 = (isCollapsed_0) => {
 			const builtInBrand = renderBuiltInBrand(isCollapsed_0);
 			if (!effectiveRenderBrand) return builtInBrand;
@@ -1279,79 +1292,80 @@ function AdminSidebar(t0) {
 				})
 			});
 		};
-		$[15] = brandName;
-		$[16] = effectiveRenderBrand;
-		$[17] = renderBuiltInBrand;
-		$[18] = t10;
-	} else t10 = $[18];
+		$[16] = brandName;
+		$[17] = effectiveRenderBrand;
+		$[18] = renderBuiltInBrand;
+		$[19] = t10;
+	} else t10 = $[19];
 	const renderBrandContent = t10;
 	let t11;
-	if ($[19] !== collapsed || $[20] !== renderBrandContent) {
+	if ($[20] !== collapsed || $[21] !== renderBrandContent) {
 		t11 = renderBrandContent(collapsed);
-		$[19] = collapsed;
-		$[20] = renderBrandContent;
-		$[21] = t11;
-	} else t11 = $[21];
+		$[20] = collapsed;
+		$[21] = renderBrandContent;
+		$[22] = t11;
+	} else t11 = $[22];
 	const brandContent = t11;
 	const t12 = collapsed && "justify-center";
 	let t13;
-	if ($[22] !== t12) {
+	if ($[23] !== 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];
+		$[23] = t12;
+		$[24] = t13;
+	} else t13 = $[24];
 	let t14;
-	if ($[24] !== LinkComponent || $[25] !== basePath || $[26] !== brandContent || $[27] !== t13) {
+	if ($[25] !== LinkComponent || $[26] !== basePath || $[27] !== brandContent || $[28] !== t13) {
 		t14 = /* @__PURE__ */ jsx(LinkComponent, {
 			to: basePath,
 			className: t13,
 			children: brandContent
 		});
-		$[24] = LinkComponent;
-		$[25] = basePath;
-		$[26] = brandContent;
-		$[27] = t13;
-		$[28] = t14;
-	} else t14 = $[28];
+		$[25] = LinkComponent;
+		$[26] = basePath;
+		$[27] = brandContent;
+		$[28] = t13;
+		$[29] = t14;
+	} else t14 = $[29];
 	const brandLink = t14;
 	let t15;
-	if ($[29] !== onSearchOpen) {
+	if ($[30] !== onSearchOpen || $[31] !== t) {
 		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",
+			title: t("common.search"),
+			"aria-label": t("common.search"),
 			children: /* @__PURE__ */ jsx(Icon, { icon: "ph:magnifying-glass" })
 		});
-		$[29] = onSearchOpen;
-		$[30] = t15;
-	} else t15 = $[30];
+		$[30] = onSearchOpen;
+		$[31] = t;
+		$[32] = t15;
+	} else t15 = $[32];
 	let t16;
-	if ($[31] === Symbol.for("react.memo_cache_sentinel")) {
+	if ($[33] === 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];
+		$[33] = t16;
+	} else t16 = $[33];
 	let t17;
-	if ($[32] !== t15) {
+	if ($[34] !== 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];
+		$[34] = t15;
+		$[35] = t17;
+	} else t17 = $[35];
 	const sidebarActions = t17;
 	let t18;
-	if ($[34] !== className) {
+	if ($[36] !== className) {
 		t18 = cn("qa-sidebar bg-sidebar relative border-none", className);
-		$[34] = className;
-		$[35] = t18;
-	} else t18 = $[35];
+		$[36] = className;
+		$[37] = t18;
+	} else t18 = $[37];
 	let t19;
-	if ($[36] !== LinkComponent || $[37] !== basePath || $[38] !== brandLink || $[39] !== brandName || $[40] !== collapsed || $[41] !== isMobile || $[42] !== renderBrandContent) {
+	if ($[38] !== LinkComponent || $[39] !== basePath || $[40] !== brandLink || $[41] !== brandName || $[42] !== collapsed || $[43] !== isMobile || $[44] !== renderBrandContent) {
 		t19 = collapsed && !isMobile ? /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, { render: /* @__PURE__ */ jsx(LinkComponent, {
 			to: basePath,
 			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"),
@@ -1360,17 +1374,17 @@ function AdminSidebar(t0) {
 			side: "right",
 			children: brandName
 		})] }) : brandLink;
-		$[36] = LinkComponent;
-		$[37] = basePath;
-		$[38] = brandLink;
-		$[39] = brandName;
-		$[40] = collapsed;
-		$[41] = isMobile;
-		$[42] = renderBrandContent;
-		$[43] = t19;
-	} else t19 = $[43];
+		$[38] = LinkComponent;
+		$[39] = basePath;
+		$[40] = brandLink;
+		$[41] = brandName;
+		$[42] = collapsed;
+		$[43] = isMobile;
+		$[44] = renderBrandContent;
+		$[45] = t19;
+	} else t19 = $[45];
 	let t20;
-	if ($[44] !== handleBrandClick || $[45] !== t19) {
+	if ($[46] !== handleBrandClick || $[47] !== t19) {
 		t20 = /* @__PURE__ */ jsx(SidebarMenu, {
 			className: "min-w-0 flex-1",
 			children: /* @__PURE__ */ jsx(SidebarMenuItem, {
@@ -1378,23 +1392,23 @@ function AdminSidebar(t0) {
 				children: t19
 			})
 		});
-		$[44] = handleBrandClick;
-		$[45] = t19;
-		$[46] = t20;
-	} else t20 = $[46];
+		$[46] = handleBrandClick;
+		$[47] = t19;
+		$[48] = t20;
+	} else t20 = $[48];
 	const t21 = !collapsed && sidebarActions;
 	let t22;
-	if ($[47] !== t20 || $[48] !== t21) {
+	if ($[49] !== t20 || $[50] !== 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];
+		$[49] = t20;
+		$[50] = t21;
+		$[51] = t22;
+	} else t22 = $[51];
 	let t23;
-	if ($[50] !== collapsed || $[51] !== isMobile || $[52] !== onSearchOpen || $[53] !== toggleSidebar) {
+	if ($[52] !== collapsed || $[53] !== isMobile || $[54] !== onSearchOpen || $[55] !== t || $[56] !== 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, {
@@ -1403,46 +1417,53 @@ function AdminSidebar(t0) {
 				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",
+				"aria-label": t("ui.expandSidebar"),
 				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"
+					"aria-label": t("ui.expandSidebar")
 				}), 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",
+					title: t("common.search"),
+					"aria-label": t("common.search"),
 					children: /* @__PURE__ */ jsx(Icon, { icon: "ph:magnifying-glass" })
 				})]
 			})]
 		});
-		$[50] = collapsed;
-		$[51] = isMobile;
-		$[52] = onSearchOpen;
-		$[53] = toggleSidebar;
-		$[54] = t23;
-	} else t23 = $[54];
+		$[52] = collapsed;
+		$[53] = isMobile;
+		$[54] = onSearchOpen;
+		$[55] = t;
+		$[56] = toggleSidebar;
+		$[57] = t23;
+	} else t23 = $[57];
 	let t24;
-	if ($[55] !== afterBrand || $[56] !== collapsed) {
+	if ($[58] !== afterBrand || $[59] !== collapsed) {
 		t24 = afterBrand && !collapsed && /* @__PURE__ */ jsx("div", {
 			className: "qa-sidebar__after-brand border-sidebar-border/70 border-b px-3 py-2",
 			children: afterBrand
 		});
-		$[55] = afterBrand;
-		$[56] = collapsed;
-		$[57] = t24;
-	} else t24 = $[57];
+		$[58] = afterBrand;
+		$[59] = collapsed;
+		$[60] = t24;
+	} else t24 = $[60];
 	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, {
+	if ($[61] !== t) {
+		t25 = t("nav.adminNavigation");
+		$[61] = t;
+		$[62] = t25;
+	} else t25 = $[62];
+	let t26;
+	if ($[63] !== LinkComponent || $[64] !== basePath || $[65] !== currentActiveRoute || $[66] !== effectiveRenderNavItem || $[67] !== isSectionCollapsed || $[68] !== navigation || $[69] !== toggleSection || $[70] !== useActiveProps) {
+		let t27$1;
+		if ($[72] !== LinkComponent || $[73] !== basePath || $[74] !== currentActiveRoute || $[75] !== effectiveRenderNavItem || $[76] !== isSectionCollapsed || $[77] !== toggleSection || $[78] !== useActiveProps) {
+			t27$1 = (group, index) => /* @__PURE__ */ jsx(NavGroup, {
 				group,
 				activeRoute: currentActiveRoute,
 				LinkComponent,
@@ -1452,65 +1473,66 @@ function AdminSidebar(t0) {
 				isSectionCollapsed,
 				toggleSection
 			}, group.id ?? `group-${index}`);
-			$[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, {
+			$[72] = LinkComponent;
+			$[73] = basePath;
+			$[74] = currentActiveRoute;
+			$[75] = effectiveRenderNavItem;
+			$[76] = isSectionCollapsed;
+			$[77] = toggleSection;
+			$[78] = useActiveProps;
+			$[79] = t27$1;
+		} else t27$1 = $[79];
+		t26 = navigation.map(t27$1);
+		$[63] = LinkComponent;
+		$[64] = basePath;
+		$[65] = currentActiveRoute;
+		$[66] = effectiveRenderNavItem;
+		$[67] = isSectionCollapsed;
+		$[68] = navigation;
+		$[69] = toggleSection;
+		$[70] = useActiveProps;
+		$[71] = t26;
+	} else t26 = $[71];
+	let t27;
+	if ($[80] !== t25 || $[81] !== t26) {
+		t27 = /* @__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",
+				"aria-label": t25,
 				className: "qa-sidebar__nav",
-				children: t25
+				children: t26
 			})
 		});
-		$[75] = t25;
-		$[76] = t26;
-	} else t26 = $[76];
-	let t27;
-	if ($[77] !== beforeFooter || $[78] !== collapsed) {
-		t27 = beforeFooter && !collapsed && /* @__PURE__ */ jsx("div", {
+		$[80] = t25;
+		$[81] = t26;
+		$[82] = t27;
+	} else t27 = $[82];
+	let t28;
+	if ($[83] !== beforeFooter || $[84] !== collapsed) {
+		t28 = beforeFooter && !collapsed && /* @__PURE__ */ jsx("div", {
 			className: "qa-sidebar__before-footer border-sidebar-border/70 border-t px-3 py-2",
 			children: beforeFooter
 		});
-		$[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, {
+		$[83] = beforeFooter;
+		$[84] = collapsed;
+		$[85] = t28;
+	} else t28 = $[85];
+	let t29;
+	if ($[86] !== footer || $[87] !== setTheme || $[88] !== showThemeToggle || $[89] !== theme) {
+		t29 = 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, {
+		$[86] = footer;
+		$[87] = setTheme;
+		$[88] = showThemeToggle;
+		$[89] = theme;
+		$[90] = t29;
+	} else t29 = $[90];
+	let t30;
+	if ($[91] !== t18 || $[92] !== t22 || $[93] !== t23 || $[94] !== t24 || $[95] !== t27 || $[96] !== t28 || $[97] !== t29) {
+		t30 = /* @__PURE__ */ jsxs(Sidebar, {
 			collapsible: "icon",
 			variant: "inset",
 			className: t18,
@@ -1518,21 +1540,21 @@ function AdminSidebar(t0) {
 				t22,
 				t23,
 				t24,
-				t26,
 				t27,
-				t28
+				t28,
+				t29
 			]
 		});
-		$[85] = t18;
-		$[86] = t22;
-		$[87] = t23;
-		$[88] = t24;
-		$[89] = t26;
-		$[90] = t27;
-		$[91] = t28;
-		$[92] = t29;
-	} else t29 = $[92];
-	return t29;
+		$[91] = t18;
+		$[92] = t22;
+		$[93] = t23;
+		$[94] = t24;
+		$[95] = t27;
+		$[96] = t28;
+		$[97] = t29;
+		$[98] = t30;
+	} else t30 = $[98];
+	return t30;
 }
 
 //#endregion