@questpie/admin 3.0.5 → 3.0.7

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(98);
+	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,7 @@ 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";
@@ -1255,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;
@@ -1280,43 +1292,43 @@ 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 || $[30] !== t) {
+	if ($[30] !== onSearchOpen || $[31] !== t) {
 		t15 = onSearchOpen && /* @__PURE__ */ jsx(Button, {
 			type: "button",
 			variant: "ghost",
@@ -1327,33 +1339,33 @@ function AdminSidebar(t0) {
 			"aria-label": t("common.search"),
 			children: /* @__PURE__ */ jsx(Icon, { icon: "ph:magnifying-glass" })
 		});
-		$[29] = onSearchOpen;
-		$[30] = t;
-		$[31] = t15;
-	} else t15 = $[31];
+		$[30] = onSearchOpen;
+		$[31] = t;
+		$[32] = t15;
+	} else t15 = $[32];
 	let t16;
-	if ($[32] === 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" });
-		$[32] = t16;
-	} else t16 = $[32];
+		$[33] = t16;
+	} else t16 = $[33];
 	let t17;
-	if ($[33] !== t15) {
+	if ($[34] !== t15) {
 		t17 = /* @__PURE__ */ jsxs("div", {
 			className: "qa-sidebar__header-actions flex shrink-0 items-center gap-1",
 			children: [t15, t16]
 		});
-		$[33] = t15;
-		$[34] = t17;
-	} else t17 = $[34];
+		$[34] = t15;
+		$[35] = t17;
+	} else t17 = $[35];
 	const sidebarActions = t17;
 	let t18;
-	if ($[35] !== className) {
+	if ($[36] !== className) {
 		t18 = cn("qa-sidebar bg-sidebar relative border-none", className);
-		$[35] = className;
-		$[36] = t18;
-	} else t18 = $[36];
+		$[36] = className;
+		$[37] = t18;
+	} else t18 = $[37];
 	let t19;
-	if ($[37] !== LinkComponent || $[38] !== basePath || $[39] !== brandLink || $[40] !== brandName || $[41] !== collapsed || $[42] !== isMobile || $[43] !== 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"),
@@ -1362,17 +1374,17 @@ function AdminSidebar(t0) {
 			side: "right",
 			children: brandName
 		})] }) : brandLink;
-		$[37] = LinkComponent;
-		$[38] = basePath;
-		$[39] = brandLink;
-		$[40] = brandName;
-		$[41] = collapsed;
-		$[42] = isMobile;
-		$[43] = renderBrandContent;
-		$[44] = t19;
-	} else t19 = $[44];
+		$[38] = LinkComponent;
+		$[39] = basePath;
+		$[40] = brandLink;
+		$[41] = brandName;
+		$[42] = collapsed;
+		$[43] = isMobile;
+		$[44] = renderBrandContent;
+		$[45] = t19;
+	} else t19 = $[45];
 	let t20;
-	if ($[45] !== handleBrandClick || $[46] !== t19) {
+	if ($[46] !== handleBrandClick || $[47] !== t19) {
 		t20 = /* @__PURE__ */ jsx(SidebarMenu, {
 			className: "min-w-0 flex-1",
 			children: /* @__PURE__ */ jsx(SidebarMenuItem, {
@@ -1380,23 +1392,23 @@ function AdminSidebar(t0) {
 				children: t19
 			})
 		});
-		$[45] = handleBrandClick;
-		$[46] = t19;
-		$[47] = t20;
-	} else t20 = $[47];
+		$[46] = handleBrandClick;
+		$[47] = t19;
+		$[48] = t20;
+	} else t20 = $[48];
 	const t21 = !collapsed && sidebarActions;
 	let t22;
-	if ($[48] !== t20 || $[49] !== 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]
 		});
-		$[48] = t20;
-		$[49] = t21;
-		$[50] = t22;
-	} else t22 = $[50];
+		$[49] = t20;
+		$[50] = t21;
+		$[51] = t22;
+	} else t22 = $[51];
 	let t23;
-	if ($[51] !== collapsed || $[52] !== isMobile || $[53] !== onSearchOpen || $[54] !== t || $[55] !== 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, {
@@ -1424,33 +1436,33 @@ function AdminSidebar(t0) {
 				})]
 			})]
 		});
-		$[51] = collapsed;
-		$[52] = isMobile;
-		$[53] = onSearchOpen;
-		$[54] = t;
-		$[55] = toggleSidebar;
-		$[56] = t23;
-	} else t23 = $[56];
+		$[52] = collapsed;
+		$[53] = isMobile;
+		$[54] = onSearchOpen;
+		$[55] = t;
+		$[56] = toggleSidebar;
+		$[57] = t23;
+	} else t23 = $[57];
 	let t24;
-	if ($[57] !== afterBrand || $[58] !== 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
 		});
-		$[57] = afterBrand;
-		$[58] = collapsed;
-		$[59] = t24;
-	} else t24 = $[59];
+		$[58] = afterBrand;
+		$[59] = collapsed;
+		$[60] = t24;
+	} else t24 = $[60];
 	let t25;
-	if ($[60] !== t) {
+	if ($[61] !== t) {
 		t25 = t("nav.adminNavigation");
-		$[60] = t;
-		$[61] = t25;
-	} else t25 = $[61];
+		$[61] = t;
+		$[62] = t25;
+	} else t25 = $[62];
 	let t26;
-	if ($[62] !== LinkComponent || $[63] !== basePath || $[64] !== currentActiveRoute || $[65] !== effectiveRenderNavItem || $[66] !== isSectionCollapsed || $[67] !== navigation || $[68] !== toggleSection || $[69] !== useActiveProps) {
+	if ($[63] !== LinkComponent || $[64] !== basePath || $[65] !== currentActiveRoute || $[66] !== effectiveRenderNavItem || $[67] !== isSectionCollapsed || $[68] !== navigation || $[69] !== toggleSection || $[70] !== useActiveProps) {
 		let t27$1;
-		if ($[71] !== LinkComponent || $[72] !== basePath || $[73] !== currentActiveRoute || $[74] !== effectiveRenderNavItem || $[75] !== isSectionCollapsed || $[76] !== toggleSection || $[77] !== useActiveProps) {
+		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,
@@ -1461,28 +1473,28 @@ function AdminSidebar(t0) {
 				isSectionCollapsed,
 				toggleSection
 			}, group.id ?? `group-${index}`);
-			$[71] = LinkComponent;
-			$[72] = basePath;
-			$[73] = currentActiveRoute;
-			$[74] = effectiveRenderNavItem;
-			$[75] = isSectionCollapsed;
-			$[76] = toggleSection;
-			$[77] = useActiveProps;
-			$[78] = t27$1;
-		} else t27$1 = $[78];
+			$[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);
-		$[62] = LinkComponent;
-		$[63] = basePath;
-		$[64] = currentActiveRoute;
-		$[65] = effectiveRenderNavItem;
-		$[66] = isSectionCollapsed;
-		$[67] = navigation;
-		$[68] = toggleSection;
-		$[69] = useActiveProps;
-		$[70] = t26;
-	} else t26 = $[70];
+		$[63] = LinkComponent;
+		$[64] = basePath;
+		$[65] = currentActiveRoute;
+		$[66] = effectiveRenderNavItem;
+		$[67] = isSectionCollapsed;
+		$[68] = navigation;
+		$[69] = toggleSection;
+		$[70] = useActiveProps;
+		$[71] = t26;
+	} else t26 = $[71];
 	let t27;
-	if ($[79] !== t25 || $[80] !== t26) {
+	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", {
@@ -1491,35 +1503,35 @@ function AdminSidebar(t0) {
 				children: t26
 			})
 		});
-		$[79] = t25;
-		$[80] = t26;
-		$[81] = t27;
-	} else t27 = $[81];
+		$[80] = t25;
+		$[81] = t26;
+		$[82] = t27;
+	} else t27 = $[82];
 	let t28;
-	if ($[82] !== beforeFooter || $[83] !== collapsed) {
+	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
 		});
-		$[82] = beforeFooter;
-		$[83] = collapsed;
-		$[84] = t28;
-	} else t28 = $[84];
+		$[83] = beforeFooter;
+		$[84] = collapsed;
+		$[85] = t28;
+	} else t28 = $[85];
 	let t29;
-	if ($[85] !== footer || $[86] !== setTheme || $[87] !== showThemeToggle || $[88] !== theme) {
+	if ($[86] !== footer || $[87] !== setTheme || $[88] !== showThemeToggle || $[89] !== theme) {
 		t29 = footer ?? /* @__PURE__ */ jsx(UserFooter, {
 			theme,
 			setTheme,
 			showThemeToggle
 		});
-		$[85] = footer;
-		$[86] = setTheme;
-		$[87] = showThemeToggle;
-		$[88] = theme;
-		$[89] = t29;
-	} else t29 = $[89];
+		$[86] = footer;
+		$[87] = setTheme;
+		$[88] = showThemeToggle;
+		$[89] = theme;
+		$[90] = t29;
+	} else t29 = $[90];
 	let t30;
-	if ($[90] !== t18 || $[91] !== t22 || $[92] !== t23 || $[93] !== t24 || $[94] !== t27 || $[95] !== t28 || $[96] !== t29) {
+	if ($[91] !== t18 || $[92] !== t22 || $[93] !== t23 || $[94] !== t24 || $[95] !== t27 || $[96] !== t28 || $[97] !== t29) {
 		t30 = /* @__PURE__ */ jsxs(Sidebar, {
 			collapsible: "icon",
 			variant: "inset",
@@ -1533,15 +1545,15 @@ function AdminSidebar(t0) {
 				t29
 			]
 		});
-		$[90] = t18;
-		$[91] = t22;
-		$[92] = t23;
-		$[93] = t24;
-		$[94] = t27;
-		$[95] = t28;
-		$[96] = t29;
-		$[97] = t30;
-	} else t30 = $[97];
+		$[91] = t18;
+		$[92] = t22;
+		$[93] = t23;
+		$[94] = t24;
+		$[95] = t27;
+		$[96] = t28;
+		$[97] = t29;
+		$[98] = t30;
+	} else t30 = $[98];
 	return t30;
 }