@questpie/admin 3.5.3 → 3.5.4

package/dist/client/views/collection/list-view.mjs

@@ -29,12 +29,12 @@ import { AdminViewHeader, AdminViewLayout } from "../layout/admin-view-layout.mj
 import { TableViewSkeleton } from "./view-skeletons.mjs";
 import { useUploadCollection } from "../../hooks/use-upload-collection.mjs";
 import { useDebouncedValue, useSearch } from "../../hooks/use-search.mjs";
+import { SearchInput } from "../../components/ui/search-input.mjs";
 import { autoExpandFields, hasFieldsToExpand } from "../../utils/auto-expand-fields.mjs";
 import { computeDefaultColumns, getAllAvailableFields } from "./columns/column-defaults.mjs";
 import { buildColumns } from "./columns/build-columns.mjs";
 import { HeaderActions } from "../../components/actions/header-actions.mjs";
 import { FilterBuilderSheet } from "../../components/filter-builder/filter-builder-sheet.mjs";
-import { SearchInput } from "../../components/ui/search-input.mjs";
 import { useActions } from "../../hooks/use-action.mjs";
 import { useRealtimeHighlight } from "../../hooks/use-realtime-highlight.mjs";
 import { useDeleteSavedView, useSaveView, useSavedViews } from "../../hooks/use-saved-views.mjs";
@@ -693,7 +693,7 @@ function ListViewInner({ collection, config, viewConfig, navigate, basePath = "/
 	}, [fieldByName]);
 	const renderMetaField = React.useCallback((field, value) => {
 		if (value === null || value === void 0 || value === "") return /* @__PURE__ */ jsx("span", {
-			className: "text-muted-foreground/40",
+			className: "text-foreground-subtle",
 			children: "-"
 		});
 		const fieldDef = fieldByName.get(field);
@@ -768,7 +768,7 @@ function ListViewInner({ collection, config, viewConfig, navigate, basePath = "/
 				showFilters && /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, { render: /* @__PURE__ */ jsxs(Button, {
 					variant: "outline",
 					size: "icon-sm",
-					className: cn("relative", hasViewOptionsState && "border-foreground"),
+					className: "relative",
 					onClick: () => setIsSheetOpen(true),
 					"aria-label": t("viewOptions.title"),
 					children: [/* @__PURE__ */ jsx(Icon, { icon: "ph:sliders-horizontal" }), hasViewOptionsState && /* @__PURE__ */ jsx("span", { className: "bg-foreground absolute top-1 right-1 size-1.5 rounded-full" })]
@@ -791,16 +791,17 @@ function ListViewInner({ collection, config, viewConfig, navigate, basePath = "/
 			] })
 		}),
 		children: /* @__PURE__ */ jsxs("div", {
-			className: "space-y-3",
+			className: "space-y-4",
 			children: [
 				showSearch && isSearchPanelOpen && /* @__PURE__ */ jsx("div", {
-					className: "border-border-subtle bg-muted/20 rounded-md border p-3",
+					className: "max-w-xl",
 					children: /* @__PURE__ */ jsx(SearchInput, {
 						value: searchTerm,
 						onChange: (event) => setSearchTerm(event.target.value),
 						onClear: () => setSearchTerm(""),
 						placeholder: t("collectionSearch.placeholder"),
-						isLoading: isSearchActive
+						isLoading: isSearchActive,
+						containerClassName: "h-10"
 					})
 				}),
 				/* @__PURE__ */ jsx(QuickFilterBar, {
@@ -848,10 +849,10 @@ function ListViewInner({ collection, config, viewConfig, navigate, basePath = "/
 						const isGroupMismatch = groupContext != null && getValueAtPath(item, groupContext.field) !== groupContext.value;
 						return /* @__PURE__ */ jsxs("div", {
 							"data-state": isSelected ? "selected" : void 0,
-							className: cn("group/list-row hover:bg-muted/40 data-[state=selected]:bg-muted/60 relative flex min-w-0 cursor-pointer items-center gap-2 rounded-md px-4 text-sm transition-colors", density === "compact" ? "min-h-9 py-1" : "min-h-11 py-2", isHighlighted(item.id) && "bg-info/10", isGroupMismatch && "opacity-45"),
+							className: cn("group/list-row hover:bg-accent data-[state=selected]:bg-muted relative flex min-w-0 cursor-pointer items-center gap-2 rounded-md px-4 text-sm transition-colors", density === "compact" ? "min-h-9 py-1" : "min-h-11 py-2", isHighlighted(item.id) && "animate-realtime-pulse", isGroupMismatch && "opacity-45"),
 							children: [
 								outlineRow.depth > 0 && /* @__PURE__ */ jsx("span", {
-									className: "bg-border/40 absolute top-0 bottom-0 w-px",
+									className: "bg-border-subtle absolute top-0 bottom-0 w-px",
 									style: { left: `${52 + (outlineRow.depth - 1) * 18}px` },
 									"aria-hidden": "true"
 								}),
@@ -870,7 +871,7 @@ function ListViewInner({ collection, config, viewConfig, navigate, basePath = "/
 								}),
 								outlineRow.expandable ? /* @__PURE__ */ jsx("button", {
 									type: "button",
-									className: "text-muted-foreground hover:bg-muted hover:text-foreground focus-visible:ring-ring/40 -ml-1 flex size-7 shrink-0 items-center justify-center rounded-[var(--control-radius-inner)] transition-[background-color,color,box-shadow] focus-visible:ring-2 focus-visible:outline-none",
+									className: "text-muted-foreground hover:bg-surface-high hover:text-foreground focus-visible:ring-ring/40 -ml-1 flex size-7 shrink-0 items-center justify-center rounded-[var(--control-radius-inner)] transition-[background-color,color,box-shadow] focus-visible:ring-2 focus-visible:outline-none",
 									onClick: (event) => {
 										event.stopPropagation();
 										toggleOutlineKey(outlineRow.key);
@@ -916,11 +917,14 @@ function ListViewInner({ collection, config, viewConfig, navigate, basePath = "/
 												}, field);
 											}),
 											locked && /* @__PURE__ */ jsxs("span", {
-												className: "text-warning inline-flex items-center gap-1 text-xs",
+												className: "text-muted-foreground bg-muted inline-flex shrink-0 items-center gap-1 rounded-full px-1.5 py-0.5 text-xs",
 												children: [/* @__PURE__ */ jsx(Icon, {
 													icon: "ph:lock-key",
 													className: "size-3"
-												}), lockUser?.name ?? t("collection.locked")]
+												}), /* @__PURE__ */ jsx("span", {
+													className: "max-w-20 truncate",
+													children: lockUser?.name ?? t("collection.locked")
+												})]
 											})
 										]
 									}), subtitleValue !== void 0 && /* @__PURE__ */ jsx("div", {
@@ -972,7 +976,7 @@ function ListViewInner({ collection, config, viewConfig, navigate, basePath = "/
 								className: "flex flex-col",
 								children: [/* @__PURE__ */ jsxs("button", {
 									type: "button",
-									className: "bg-muted/[0.06] hover:bg-muted/20 flex min-h-8 items-center gap-2 rounded-md px-3 py-1 text-left transition-colors",
+									className: "hover:bg-surface-mid focus-visible:ring-ring/40 flex min-h-8 items-center gap-2 rounded-md px-3 py-1 text-left transition-colors focus-visible:ring-2 focus-visible:outline-none",
 									onClick: () => toggleOutlineKey(groupToggleKey),
 									"aria-expanded": !isGroupCollapsed,
 									children: [
@@ -1013,7 +1017,7 @@ function ListViewInner({ collection, config, viewConfig, navigate, basePath = "/
 										});
 									}), totalDocs > loadedCount && /* @__PURE__ */ jsxs("button", {
 										type: "button",
-										className: "text-muted-foreground hover:text-foreground hover:bg-muted/50 flex w-full items-center justify-center gap-2 rounded-md py-2 text-xs transition-colors",
+										className: "text-muted-foreground hover:text-foreground hover:bg-surface-mid focus-visible:ring-ring/40 flex w-full items-center justify-center gap-2 rounded-md py-2 text-xs transition-colors focus-visible:ring-2 focus-visible:outline-none",
 										onClick: () => loadMoreInGroup(groupKey),
 										children: [/* @__PURE__ */ jsx(Icon, {
 											icon: "ph:caret-down",
@@ -1192,7 +1196,7 @@ function OutlineHeaderRow({ row, showCounts, onToggle }) {
 	const groupIcon = row.kind === "group" && "icon" in row ? resolveIconElement(row.icon) : null;
 	return /* @__PURE__ */ jsxs("button", {
 		type: "button",
-		className: "hover:bg-muted/50 focus-visible:ring-ring/40 flex min-h-8 w-full items-center gap-2 px-3 py-1 text-left transition-[background-color,color,box-shadow] focus-visible:ring-2 focus-visible:outline-none",
+		className: "hover:bg-surface-mid focus-visible:ring-ring/40 flex min-h-8 w-full items-center gap-2 rounded-md px-3 py-1 text-left transition-[background-color,color,box-shadow] focus-visible:ring-2 focus-visible:outline-none",
 		onClick: () => onToggle(row.key),
 		"aria-expanded": !row.collapsed,
 		children: [
@@ -1214,7 +1218,7 @@ function OutlineHeaderRow({ row, showCounts, onToggle }) {
 				children: row.label
 			}),
 			showCounts && /* @__PURE__ */ jsx("span", {
-				className: "text-muted-foreground/70 ml-1 text-xs tabular-nums",
+				className: "text-muted-foreground/60 ml-1 text-xs tabular-nums",
 				children: row.count
 			})
 		]

package/dist/client/views/collection/table-view.mjs

@@ -35,12 +35,12 @@ import { useUpload } from "../../hooks/use-upload.mjs";
 import { AssetPreview } from "../../components/primitives/asset-preview.mjs";
 import { Dropzone } from "../../components/primitives/dropzone.mjs";
 import { useDebouncedValue, useSearch } from "../../hooks/use-search.mjs";
+import { SearchInput } from "../../components/ui/search-input.mjs";
 import { autoExpandFields, hasFieldsToExpand } from "../../utils/auto-expand-fields.mjs";
 import { computeDefaultColumns, getAllAvailableFields } from "./columns/column-defaults.mjs";
 import { buildColumns } from "./columns/build-columns.mjs";
 import { HeaderActions } from "../../components/actions/header-actions.mjs";
 import { FilterBuilderSheet } from "../../components/filter-builder/filter-builder-sheet.mjs";
-import { SearchInput } from "../../components/ui/search-input.mjs";
 import { useActions } from "../../hooks/use-action.mjs";
 import { useRealtimeHighlight } from "../../hooks/use-realtime-highlight.mjs";
 import { useDeleteSavedView, useSaveView, useSavedViews } from "../../hooks/use-saved-views.mjs";

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

@@ -1,7 +1,7 @@
 import { Admin } from "../../builder/admin.mjs";
 import { getAdminLocalesQueryOptions, getAdminTranslationsQueryOptions, getUiLocaleFromCookie } from "../../runtime/translations-provider.mjs";
 import { AdminProvider } from "../../runtime/provider.mjs";
-import { getAdminConfigQueryOptions } from "../../hooks/use-admin-config.mjs";
+import { getAdminConfigQueryOptions, getPublicAdminConfigQueryOptions } from "../../hooks/use-admin-config.mjs";
 import { AdminThemeAppliedContext, useManagedAdminTheme } from "./admin-theme.mjs";
 import { AdminLayout } from "./admin-layout.mjs";
 import { AuthGuard } from "../../components/auth/auth-guard.mjs";
@@ -164,8 +164,10 @@ function isPublicPath(currentPath, basePath, publicPaths) {
 function AdminLayoutProvider({ admin: adminInput, client, authClient, queryClient, LinkComponent, activeRoute, basePath = "/admin", header, footer, sidebarProps, theme, setTheme, showThemeToggle, toasterProps, className, enableAuthGuard, publicPaths = DEFAULT_PUBLIC_PATHS, requiredRole = "admin", authLoadingFallback, authUnauthorizedFallback, useServerTranslations, translationsFallback, initialUiLocale, children }) {
 	const qc = queryClient ? configureAdminQueryClient(queryClient) : getDefaultQueryClient();
 	const { theme: managedTheme, setTheme: setManagedTheme } = useManagedAdminTheme(theme, setTheme);
+	const isCurrentPathPublic = isPublicPath(activeRoute ?? (typeof window !== "undefined" ? window.location.pathname : void 0), basePath, publicPaths);
 	if (client?.routes) {
-		qc.prefetchQuery(getAdminConfigQueryOptions(client));
+		if (isCurrentPathPublic) qc.prefetchQuery(getPublicAdminConfigQueryOptions(client));
+		else qc.prefetchQuery(getAdminConfigQueryOptions(client));
 		if (useServerTranslations) {
 			const locale = initialUiLocale ?? getUiLocaleFromCookie() ?? "en";
 			qc.prefetchQuery(getAdminLocalesQueryOptions(client));
@@ -174,7 +176,6 @@ function AdminLayoutProvider({ admin: adminInput, client, authClient, queryClien
 	}
 	const admin = Admin.normalize(adminInput);
 	const shouldUseAuthGuard = enableAuthGuard ?? authClient != null;
-	const isCurrentPathPublic = isPublicPath(activeRoute ?? (typeof window !== "undefined" ? window.location.pathname : void 0), basePath, publicPaths);
 	let innerContent;
 	if (isCurrentPathPublic) innerContent = children;
 	else {

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

@@ -9,6 +9,7 @@ import { Toaster } from "../../components/ui/sonner.mjs";
 import { GlobalSearch } from "../common/global-search.mjs";
 import { AdminSidebar } from "./admin-sidebar.mjs";
 import { AdminThemeAppliedContext, useManagedAdminTheme } from "./admin-theme.mjs";
+import { Icon } from "@iconify/react";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 
@@ -52,32 +53,118 @@ function shouldRenderShellRail(config, activeRoute, basePath) {
 	if (!(!routes.include?.length || routes.include.some((rule) => routeMatchesRule(activeRoute, rule, basePath, match)))) return false;
 	return !routes.exclude?.some((rule) => routeMatchesRule(activeRoute, rule, basePath, match));
 }
-function toCssLength(value) {
-	if (value === void 0) return void 0;
-	return typeof value === "number" ? `${value}px` : value;
+const RAIL_WIDTH_KEY = "qa-admin-secondary-rail-width";
+const RAIL_COLLAPSED_KEY = "qa-admin-secondary-rail-collapsed";
+/**
+* Client-side width + collapsed state for the secondary rail, persisted to
+* localStorage. The server config provides the DEFAULT width and the min/max
+* bounds; the user can resize within those bounds and collapse the rail, and the
+* choice survives reloads.
+*/
+function useRailState(defaultWidth, minWidth, maxWidth) {
+	const clamp = React.useCallback((w) => Math.min(maxWidth, Math.max(minWidth, Math.round(w))), [minWidth, maxWidth]);
+	const [width, setWidthState] = React.useState(() => {
+		if (typeof window === "undefined") return defaultWidth;
+		const saved = Number(window.localStorage.getItem(RAIL_WIDTH_KEY));
+		return Number.isFinite(saved) && saved > 0 ? clamp(saved) : defaultWidth;
+	});
+	const [collapsed, setCollapsedState] = React.useState(() => typeof window !== "undefined" && window.localStorage.getItem(RAIL_COLLAPSED_KEY) === "1");
+	return {
+		width,
+		setWidth: React.useCallback((w) => {
+			const next = clamp(w);
+			setWidthState(next);
+			if (typeof window !== "undefined") window.localStorage.setItem(RAIL_WIDTH_KEY, String(next));
+		}, [clamp]),
+		collapsed,
+		setCollapsed: React.useCallback((c) => {
+			setCollapsedState(c);
+			if (typeof window !== "undefined") window.localStorage.setItem(RAIL_COLLAPSED_KEY, c ? "1" : "0");
+		}, [])
+	};
 }
 function AdminShellRail({ config, activeRoute, basePath, navigate }) {
 	const placement = config.placement ?? "left";
-	const style = {
-		width: toCssLength(config.width ?? 320),
-		minWidth: toCssLength(config.minWidth ?? config.width ?? 280),
-		maxWidth: toCssLength(config.maxWidth)
-	};
-	return /* @__PURE__ */ jsx("aside", {
-		className: cn("qa-admin-layout__secondary-rail bg-background h-svh min-h-0 shrink-0 flex-col overflow-hidden", config.hiddenOnMobile === false ? "flex" : "hidden md:flex", placement === "left" ? "border-border-subtle border-r" : "border-border-subtle border-l", config.className),
+	const isRight = placement === "right";
+	const { width, setWidth, collapsed, setCollapsed } = useRailState(typeof config.width === "number" ? config.width : 320, typeof config.minWidth === "number" ? config.minWidth : 280, typeof config.maxWidth === "number" ? config.maxWidth : 560);
+	const onResizeStart = React.useCallback((e) => {
+		e.preventDefault();
+		const startX = e.clientX;
+		const startWidth = width;
+		document.body.style.cursor = "col-resize";
+		document.body.style.userSelect = "none";
+		const onMove = (ev) => {
+			const dx = ev.clientX - startX;
+			setWidth(isRight ? startWidth - dx : startWidth + dx);
+		};
+		const onUp = () => {
+			document.body.style.cursor = "";
+			document.body.style.userSelect = "";
+			window.removeEventListener("pointermove", onMove);
+			window.removeEventListener("pointerup", onUp);
+		};
+		window.addEventListener("pointermove", onMove);
+		window.addEventListener("pointerup", onUp);
+	}, [
+		width,
+		isRight,
+		setWidth
+	]);
+	const baseClass = cn("qa-admin-layout__secondary-rail bg-background h-svh min-h-0 shrink-0 overflow-hidden border-border-subtle", isRight ? "border-l" : "border-r", config.hiddenOnMobile === false ? "flex" : "hidden md:flex");
+	if (collapsed) return /* @__PURE__ */ jsx("aside", {
+		className: cn(baseClass, "w-11 flex-col items-center"),
 		"data-placement": placement,
-		style,
-		children: /* @__PURE__ */ jsx(ComponentRenderer, {
-			reference: config.component,
-			additionalProps: {
-				activeRoute,
-				basePath,
-				placement,
-				config,
-				navigate
-			}
+		"data-collapsed": "true",
+		children: /* @__PURE__ */ jsx("button", {
+			type: "button",
+			onClick: () => setCollapsed(false),
+			className: "text-muted-foreground hover:bg-surface-high hover:text-foreground focus-visible:ring-ring/40 mt-2.5 flex size-8 shrink-0 items-center justify-center rounded-[var(--control-radius-inner)] transition-[background-color,color,box-shadow] duration-[var(--motion-duration-base)] ease-[var(--motion-ease-standard)] focus-visible:ring-2 focus-visible:outline-none motion-reduce:transition-none",
+			title: "Expand panel",
+			"aria-label": "Expand panel",
+			children: /* @__PURE__ */ jsx(Icon, {
+				icon: isRight ? "ph:caret-left" : "ph:caret-right",
+				width: 16,
+				height: 16
+			})
 		})
 	});
+	return /* @__PURE__ */ jsxs("aside", {
+		className: cn(baseClass, "relative flex-col", config.className),
+		"data-placement": placement,
+		style: { width: `${width}px` },
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				onPointerDown: onResizeStart,
+				className: cn("group/resize absolute inset-y-0 z-20 flex w-2 cursor-col-resize items-center justify-center", isRight ? "left-0 -translate-x-1/2" : "right-0 translate-x-1/2"),
+				role: "separator",
+				"aria-orientation": "vertical",
+				"aria-label": "Resize panel",
+				children: /* @__PURE__ */ jsx("div", { className: "bg-border-subtle group-hover/resize:bg-border-strong h-full w-px transition-[background-color] duration-[var(--motion-duration-base)] ease-[var(--motion-ease-standard)] motion-reduce:transition-none" })
+			}),
+			/* @__PURE__ */ jsx("button", {
+				type: "button",
+				onClick: () => setCollapsed(true),
+				className: cn("text-muted-foreground hover:bg-surface-high hover:text-foreground focus-visible:ring-ring/40 absolute top-2.5 z-20 flex size-7 shrink-0 items-center justify-center rounded-[var(--control-radius-inner)] transition-[background-color,color,box-shadow] duration-[var(--motion-duration-base)] ease-[var(--motion-ease-standard)] focus-visible:ring-2 focus-visible:outline-none motion-reduce:transition-none", isRight ? "left-2.5" : "right-2.5"),
+				title: "Collapse panel",
+				"aria-label": "Collapse panel",
+				children: /* @__PURE__ */ jsx(Icon, {
+					icon: isRight ? "ph:caret-right" : "ph:caret-left",
+					width: 15,
+					height: 15
+				})
+			}),
+			/* @__PURE__ */ jsx(ComponentRenderer, {
+				reference: config.component,
+				additionalProps: {
+					activeRoute,
+					basePath,
+					placement,
+					config,
+					navigate
+				}
+			})
+		]
+	});
 }
 /**
 * AdminLayout Component

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

@@ -112,6 +112,10 @@ function matchRoute(segments, _collections = {}, globals = {}, pages = {}) {
 	}
 	return { type: "not-found" };
 }
+function isAuthRoute(segments) {
+	const [first] = segments;
+	return first ? AUTH_ROUTE_SEGMENTS.has(first) : false;
+}
 function formatDocumentTitle(pageTitle, appTitle) {
 	const title = pageTitle.trim();
 	const app = appTitle.trim() || "Admin";
@@ -478,7 +482,7 @@ function LazyPageRenderer({ config }) {
 					error: null
 				});
 				if (typeof component === "function") {
-					const result = component();
+					const result = component.constructor?.name === "AsyncFunction" ? component() : null;
 					let isThenable = false;
 					if (result != null) {
 						if (typeof result.then === "function") isThenable = true;
@@ -559,11 +563,22 @@ function LazyPageRenderer({ config }) {
 * Uses Suspense internally - shows skeleton while config loads.
 */
 function AdminRouter(props) {
+	if (isAuthRoute(props.segments)) return /* @__PURE__ */ jsx(React.Suspense, {
+		fallback: /* @__PURE__ */ jsx(AuthPageSkeleton, {}),
+		children: /* @__PURE__ */ jsx(AdminAuthRouter, { ...props })
+	});
 	return /* @__PURE__ */ jsx(React.Suspense, {
 		fallback: getFallbackForSegments(props.segments),
 		children: /* @__PURE__ */ jsx(AdminRouterInner, { ...props })
 	});
 }
+function AdminAuthRouter({ segments, pages: pagesProp, NotFoundComponent }) {
+	const admin = useAdminStore((state) => state.admin);
+	const pages = pagesProp ?? admin.getPages();
+	const route = React.useMemo(() => matchRoute(segments, {}, {}, pages), [segments, pages]);
+	if (route.type === "page") return /* @__PURE__ */ jsx(LazyPageRenderer, { config: route.config });
+	return /* @__PURE__ */ jsx(NotFoundComponent || DefaultNotFound, {});
+}
 /**
 * Inner router component that uses Suspense for data loading.
 * Guaranteed to have config loaded when rendering.
@@ -729,11 +744,12 @@ function AdminRouterInner({ segments, navigate, basePath = "/admin", searchParam
 		const selectedFormViewDefinition = views[selectedFormView];
 		const selectedFormViewConfig = mergeViewConfig(getViewBaseConfig(selectedFormViewDefinition), config?.form?.config ?? config?.form ?? activeCollectionSchema?.admin?.form);
 		const formViewLoader = getViewLoader(selectedFormViewDefinition);
-		if (selectedFormViewDefinition && selectedFormViewDefinition.kind !== "form" && process.env.NODE_ENV !== "production") console.warn(`View "${selectedFormView}" kind "${selectedFormViewDefinition.kind}" != expected "form"`);
+		const resolvedEditViewKind = selectedFormViewDefinition?.kind === "document" ? "document" : "form";
+		if (selectedFormViewDefinition && selectedFormViewDefinition.kind !== "form" && selectedFormViewDefinition.kind !== "document" && process.env.NODE_ENV !== "production") console.warn(`View "${selectedFormView}" kind "${selectedFormViewDefinition.kind}" != expected "form" | "document"`);
 		if (custom?.Form) return /* @__PURE__ */ jsx(custom.Form, {});
 		return /* @__PURE__ */ jsx(RegistryViewRenderer, {
 			loader: formViewLoader,
-			viewKind: "form",
+			viewKind: resolvedEditViewKind,
 			viewId: selectedFormView,
 			componentProps: {
 				collection: name,

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

@@ -1,6 +1,6 @@
 import { useResolveText, useSafeI18n, useTranslation } from "../../i18n/hooks.mjs";
 import { cn, formatLabel } from "../../lib/utils.mjs";
-import { selectAdmin, selectBasePath, selectContentLocale, selectNavigate, selectSetContentLocale, useAdminStore, useAdminStoreRaw } from "../../runtime/provider.mjs";
+import { selectAdmin, selectBasePath, selectClient, 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";
@@ -8,6 +8,7 @@ import { getFlagUrl } from "../../utils/locale-to-flag.mjs";
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger } from "../../components/ui/dropdown-menu.mjs";
 import { Tooltip, TooltipContent, TooltipTrigger } from "../../components/ui/tooltip.mjs";
 import { useAdminConfig } from "../../hooks/use-admin-config.mjs";
+import { resolveAssetUrl } from "../../utils/asset-url.mjs";
 import { useLazyComponent } from "../../utils/use-lazy-component.mjs";
 import { Skeleton } from "../../components/ui/skeleton.mjs";
 import { useAuthClientSafe } from "../../hooks/use-auth.mjs";
@@ -17,7 +18,7 @@ import { BrandLogoMark } from "../../components/brand-logo.mjs";
 import { getAdminPreferenceQueryKey, useAdminPreference, useSetAdminPreference } from "../../hooks/use-admin-preferences.mjs";
 import { Icon } from "@iconify/react";
 import * as React from "react";
-import { useQueryClient } from "@tanstack/react-query";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { toast } from "sonner";
 
@@ -28,6 +29,24 @@ import { toast } from "sonner";
 * Navigation sidebar for the admin UI using shadcn sidebar primitives.
 * Automatically reads from AdminProvider context when props are not provided.
 */
+function getStringValue(value, key) {
+	if (!value || typeof value !== "object") return null;
+	const candidate = value[key];
+	return typeof candidate === "string" && candidate.length > 0 ? candidate : null;
+}
+function getAssetUrl(value) {
+	if (!value || typeof value !== "object") return null;
+	return resolveAssetUrl(getStringValue(value, "url") ?? getStringValue(value, "src")) ?? null;
+}
+function getUserAvatarUrl(user) {
+	if (!user || typeof user !== "object") return null;
+	const obj = user;
+	const avatarUrl = getAssetUrl(obj.avatar);
+	if (avatarUrl) return avatarUrl;
+	const imageUrl = getStringValue(obj, "image") ?? getAssetUrl(obj.image);
+	if (imageUrl) return resolveAssetUrl(imageUrl) ?? null;
+	return getAssetUrl(obj.photo) ?? getAssetUrl(obj.profileImage);
+}
 /**
 * Extract typed props from untyped sidebar config items.
 * Server sidebar items come as plain objects without strict typing.
@@ -406,6 +425,7 @@ function UserFooter({ theme = "system", setTheme, showThemeToggle }) {
 	const collapsed = state === "collapsed";
 	const authClient = useAuthClientSafe();
 	const { user, isPending } = useSessionState();
+	const client = useAdminStore(selectClient);
 	const navigate = useAdminStore(selectNavigate);
 	const basePath = useAdminStore(selectBasePath);
 	const admin = useAdminStore(selectAdmin);
@@ -422,6 +442,29 @@ function UserFooter({ theme = "system", setTheme, showThemeToggle }) {
 	const contentLocale = useAdminStore(selectContentLocale);
 	const setContentLocale = useAdminStore(selectSetContentLocale);
 	const hasMultipleContentLocales = (contentLocales?.locales?.length ?? 0) > 1;
+	const profileUser = useQuery({
+		queryKey: [
+			"questpie",
+			"collections",
+			"user",
+			"findOne",
+			contentLocale,
+			"current-profile",
+			user?.id
+		],
+		queryFn: async () => {
+			if (!user?.id) return null;
+			const userApi = client.collections?.user;
+			if (!userApi?.findOne) return null;
+			return userApi.findOne({
+				where: { id: user.id },
+				locale: contentLocale,
+				with: { avatar: true }
+			});
+		},
+		enabled: !!authClient && !!user?.id,
+		staleTime: 3e4
+	}).data ?? user;
 	const shouldShowThemeToggle = !!setTheme && showThemeToggle !== false;
 	const themeOptions = React.useMemo(() => [
 		{
@@ -471,16 +514,17 @@ function UserFooter({ theme = "system", setTheme, showThemeToggle }) {
 	};
 	if (isPending) return /* @__PURE__ */ jsx(UserFooterSkeleton, { collapsed });
 	if (!authClient || !user) return null;
-	const displayName = user.name || user.email?.split("@")[0] || "User";
-	const displayEmail = user.email || "";
+	const displayName = profileUser.name || profileUser.email?.split("@")[0] || "User";
+	const displayEmail = profileUser.email || "";
+	const avatarUrl = getUserAvatarUrl(profileUser) ?? getUserAvatarUrl(user);
 	return /* @__PURE__ */ jsx(SidebarFooter, {
 		className: "qa-sidebar__footer border-sidebar-border/70 border-t p-2",
 		children: /* @__PURE__ */ jsx(SidebarMenu, { children: /* @__PURE__ */ jsx(SidebarMenuItem, { children: /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsxs(DropdownMenuTrigger, {
 			className: 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", collapsed && "justify-center"),
 			children: [/* @__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,
+				children: avatarUrl ? /* @__PURE__ */ jsx("img", {
+					src: avatarUrl,
 					alt: "",
 					className: "image-outline size-full rounded-md object-cover"
 				}) : /* @__PURE__ */ jsx(Icon, {

package/dist/client/views/layout/admin-view-layout.d.mts

@@ -0,0 +1,36 @@
+import * as React from "react";
+
+//#region src/client/views/layout/admin-view-layout.d.ts
+
+interface AdminViewLayoutProps {
+  header?: React.ReactNode;
+  children: React.ReactNode;
+  className?: string;
+  contentClassName?: string;
+}
+declare function AdminViewLayout({
+  header,
+  children,
+  className,
+  contentClassName
+}: AdminViewLayoutProps): React.ReactElement;
+interface AdminViewHeaderProps {
+  title: React.ReactNode;
+  titleAccessory?: React.ReactNode;
+  description?: React.ReactNode;
+  meta?: React.ReactNode;
+  actions?: React.ReactNode;
+  className?: string;
+  titleClassName?: string;
+}
+declare function AdminViewHeader({
+  title,
+  titleAccessory,
+  description,
+  meta,
+  actions,
+  className,
+  titleClassName
+}: AdminViewHeaderProps): React.ReactElement;
+//#endregion
+export { AdminViewHeader, AdminViewLayout };

package/dist/client/views/pages/accept-invite-page.d.mts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import * as react_jsx_runtime7 from "react/jsx-runtime";
+import * as react_jsx_runtime43 from "react/jsx-runtime";
 
 //#region src/client/views/pages/accept-invite-page.d.ts
 
@@ -61,6 +61,6 @@ declare function AcceptInvitePage({
   redirectTo,
   loginPath,
   minPasswordLength
-}: AcceptInvitePageProps): react_jsx_runtime7.JSX.Element;
+}: AcceptInvitePageProps): react_jsx_runtime43.JSX.Element;
 //#endregion
 export { AcceptInvitePage };

package/dist/client/views/pages/dashboard-page.d.mts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime8 from "react/jsx-runtime";
+import * as react_jsx_runtime41 from "react/jsx-runtime";
 
 //#region src/client/views/pages/dashboard-page.d.ts
 
@@ -38,6 +38,6 @@ declare function DashboardPage({
   title,
   description,
   className
-}: DashboardPageProps): react_jsx_runtime8.JSX.Element;
+}: DashboardPageProps): react_jsx_runtime41.JSX.Element;
 //#endregion
 export { DashboardPage };

package/dist/client/views/pages/forgot-password-page.d.mts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import * as react_jsx_runtime9 from "react/jsx-runtime";
+import * as react_jsx_runtime42 from "react/jsx-runtime";
 
 //#region src/client/views/pages/forgot-password-page.d.ts
 
@@ -51,6 +51,6 @@ declare function ForgotPasswordPage({
   logo,
   loginPath,
   resetPasswordRedirectUrl
-}: ForgotPasswordPageProps): react_jsx_runtime9.JSX.Element;
+}: ForgotPasswordPageProps): react_jsx_runtime42.JSX.Element;
 //#endregion
 export { ForgotPasswordPage };

package/dist/client/views/pages/invite-page.d.mts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import * as react_jsx_runtime10 from "react/jsx-runtime";
+import * as react_jsx_runtime45 from "react/jsx-runtime";
 
 //#region src/client/views/pages/invite-page.d.ts
 
@@ -65,6 +65,6 @@ declare function InvitePage({
   defaultRole,
   showMessage,
   onSuccess
-}: InvitePageProps): react_jsx_runtime10.JSX.Element;
+}: InvitePageProps): react_jsx_runtime45.JSX.Element;
 //#endregion
 export { InvitePage };

package/dist/client/views/pages/login-page.d.mts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import * as react_jsx_runtime11 from "react/jsx-runtime";
+import * as react_jsx_runtime44 from "react/jsx-runtime";
 
 //#region src/client/views/pages/login-page.d.ts
 
@@ -64,6 +64,6 @@ declare function LoginPage({
   signUpPath,
   showForgotPassword,
   showSignUp
-}: LoginPageProps): react_jsx_runtime11.JSX.Element;
+}: LoginPageProps): react_jsx_runtime44.JSX.Element;
 //#endregion
 export { LoginPage };

package/dist/client/views/pages/reset-password-page.d.mts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import * as react_jsx_runtime12 from "react/jsx-runtime";
+import * as react_jsx_runtime47 from "react/jsx-runtime";
 
 //#region src/client/views/pages/reset-password-page.d.ts
 
@@ -58,6 +58,6 @@ declare function ResetPasswordPage({
   loginPath,
   minPasswordLength,
   getToken
-}: ResetPasswordPageProps): react_jsx_runtime12.JSX.Element;
+}: ResetPasswordPageProps): react_jsx_runtime47.JSX.Element;
 //#endregion
 export { ResetPasswordPage };

package/dist/client/views/pages/setup-page.d.mts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import * as react_jsx_runtime13 from "react/jsx-runtime";
+import * as react_jsx_runtime46 from "react/jsx-runtime";
 
 //#region src/client/views/pages/setup-page.d.ts
 
@@ -56,6 +56,6 @@ declare function SetupPage({
   redirectTo,
   loginPath,
   showLoginLink
-}: SetupPageProps): react_jsx_runtime13.JSX.Element;
+}: SetupPageProps): react_jsx_runtime46.JSX.Element;
 //#endregion
 export { SetupPage, SetupPageProps };