@questpie/admin 3.5.2 → 3.5.4

package/dist/client/views/collection/outline.mjs

@@ -34,12 +34,11 @@ function stableGroupKey(value) {
 	if (typeof value === "object") return getId(value) ?? JSON.stringify(value);
 	return String(value);
 }
-function shouldExpand(key, depth, outline, collapsedKeys) {
-	if (collapsedKeys.has(key)) return false;
+function shouldExpand(key, depth, outline, toggledKeys) {
 	const defaultExpanded = outline?.defaultExpanded ?? true;
-	if (defaultExpanded === true) return true;
-	if (defaultExpanded === false) return false;
-	return depth === 0;
+	const defaultValue = defaultExpanded === true ? true : defaultExpanded === false ? false : depth === 0;
+	if (toggledKeys.has(key)) return !defaultValue;
+	return defaultValue;
 }
 function compareByOrder(a, b, order) {
 	if (Array.isArray(order)) {
@@ -86,7 +85,8 @@ function buildFieldRows(level, docs, depth, levelIndex, ctx, scopeKey) {
 	}
 	return Array.from(groups.values()).sort((a, b) => compareByOrder(a, b, level.order)).flatMap((group) => {
 		const rowKey = `${scopeKey}/field:${level.field}:${group.key}`;
-		const expanded = shouldExpand(rowKey, depth, ctx.outline, ctx.collapsedKeys);
+		const expanded = shouldExpand(rowKey, depth, ctx.outline, ctx.toggledKeys);
+		const meta = ctx.metaForValue(group.value, level.field);
 		return [{
 			kind: "group",
 			key: rowKey,
@@ -94,7 +94,9 @@ function buildFieldRows(level, docs, depth, levelIndex, ctx, scopeKey) {
 			depth,
 			count: group.docs.length,
 			expandable: true,
-			collapsed: !expanded
+			collapsed: !expanded,
+			...meta?.icon != null && { icon: meta.icon },
+			...meta?.className && { className: meta.className }
 		}, ...expanded ? buildLevelRows(group.docs, depth + 1, levelIndex + 1, ctx, rowKey) : []];
 	});
 }
@@ -118,7 +120,7 @@ function buildRelationFieldRows(level, docs, depth, levelIndex, ctx, scopeKey) {
 	}
 	return Array.from(groups.values()).sort((a, b) => compareByOrder(a, b, level.order)).flatMap((group) => {
 		const rowKey = `${scopeKey}/relation-field:${fieldPath}:${group.key}`;
-		const expanded = shouldExpand(rowKey, depth, ctx.outline, ctx.collapsedKeys);
+		const expanded = shouldExpand(rowKey, depth, ctx.outline, ctx.toggledKeys);
 		return [{
 			kind: "group",
 			key: rowKey,
@@ -151,7 +153,22 @@ function buildEdgeRows(level, docs, depth, levelIndex, ctx, scopeKey) {
 			const childId = getId(childValue);
 			if (!parentId || !childId || !docsById.has(childId)) continue;
 			if (docsById.has(parentId) || !isRecord(parentValue)) continue;
-			docsById.set(parentId, parentValue);
+			docsById.set(parentId, ctx.allDocsById?.get(parentId) ?? parentValue);
+			changed = true;
+		}
+		if (!changed) break;
+	}
+	if (ctx.allDocsById) for (let pass = 0; pass < ctx.maxDepth; pass++) {
+		let changed = false;
+		for (const edge of edgeDocs) {
+			const parentId = getId(getPathValue(edge, level.parentField));
+			const childId = getId(getPathValue(edge, level.childField));
+			if (!parentId || !childId) continue;
+			if (!docsById.has(parentId)) continue;
+			if (docsById.has(childId)) continue;
+			const childDoc = ctx.allDocsById.get(childId);
+			if (!childDoc) continue;
+			docsById.set(childId, childDoc);
 			changed = true;
 		}
 		if (!changed) break;
@@ -201,7 +218,7 @@ function buildEdgeRows(level, docs, depth, levelIndex, ctx, scopeKey) {
 			}
 			for (const [key, group] of groups) {
 				const rowKey = `${scopeKey}/edge-group:${level.collection}:${parentId}:${key}`;
-				const expanded = shouldExpand(rowKey, nextDepth, ctx.outline, ctx.collapsedKeys);
+				const expanded = shouldExpand(rowKey, nextDepth, ctx.outline, ctx.toggledKeys);
 				rows.push({
 					kind: "group",
 					key: rowKey,
@@ -223,18 +240,15 @@ function buildEdgeRows(level, docs, depth, levelIndex, ctx, scopeKey) {
 		if (!doc || ancestorIds.has(id)) return;
 		const rowKey = `${scopeKey}/record:${id}`;
 		const hasChildren = (childrenByParent.get(id) ?? []).some((child) => docsById.has(child.childId));
-		const expanded = hasChildren && shouldExpand(rowKey, rowDepth, ctx.outline, ctx.collapsedKeys);
 		rows.push({
 			kind: "record",
 			key: rowKey,
 			id,
 			doc,
-			depth: rowDepth,
-			expandable: hasChildren,
-			collapsed: hasChildren ? !expanded : void 0
+			depth: rowDepth
 		});
 		visited.add(id);
-		if (hasChildren && expanded) {
+		if (hasChildren) {
 			const nextAncestors = new Set(ancestorIds);
 			nextAncestors.add(id);
 			pushChildRows(id, rowDepth + 1, branchDepth, nextAncestors);
@@ -297,7 +311,7 @@ function buildPathRows(level, docs, depth, levelIndex, ctx, scopeKey) {
 	function walk(node, rowDepth) {
 		const rows = [];
 		for (const child of Array.from(node.children.values()).sort((a, b) => a.label.localeCompare(b.label))) {
-			const expanded = shouldExpand(child.key, rowDepth, ctx.outline, ctx.collapsedKeys);
+			const expanded = shouldExpand(child.key, rowDepth, ctx.outline, ctx.toggledKeys);
 			rows.push({
 				kind: "synthetic",
 				key: child.key,
@@ -342,15 +356,26 @@ function buildLevelRows(docs, depth, levelIndex, ctx, scopeKey = "root") {
 	if (level.kind === "edge") return buildEdgeRows(level, docs, depth, levelIndex, ctx, scopeKey);
 	return buildPathRows(level, docs, depth, levelIndex, ctx, scopeKey);
 }
-function buildOutlineRows({ docs, outline, edgesByCollection = {}, collapsedKeys, labelForValue = defaultLabelForValue, maxDepth }) {
+const noMeta = () => void 0;
+function buildOutlineRows({ docs, outline, edgesByCollection = {}, toggledKeys, collapsedKeys, labelForValue = defaultLabelForValue, metaForValue = noMeta, maxDepth, allDocs }) {
 	const levels = outline?.levels?.filter(Boolean) ?? [];
+	let allDocsById;
+	if (allDocs && allDocs.length > 0) {
+		allDocsById = /* @__PURE__ */ new Map();
+		for (const doc of allDocs) {
+			const id = getId(doc);
+			if (id) allDocsById.set(id, doc);
+		}
+	}
 	const ctx = {
 		levels,
 		outline,
 		edgesByCollection,
-		collapsedKeys: new Set(collapsedKeys ?? []),
+		toggledKeys: new Set(toggledKeys ?? collapsedKeys ?? []),
 		labelForValue,
-		maxDepth: maxDepth ?? outline?.maxDepth ?? DEFAULT_MAX_DEPTH
+		metaForValue,
+		maxDepth: maxDepth ?? outline?.maxDepth ?? DEFAULT_MAX_DEPTH,
+		allDocsById
 	};
 	if (levels.length === 0) return buildLevelRows(docs, 0, 0, {
 		...ctx,

package/dist/client/views/collection/quick-filter-bar.mjs

@@ -0,0 +1,45 @@
+"use client";
+
+import { useResolveText } from "../../i18n/hooks.mjs";
+import { cn } from "../../lib/utils.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 { cloneFilters, filtersEqual } from "../../lib/view-filter-utils.mjs";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/client/views/collection/quick-filter-bar.tsx
+function QuickFilterBar({ quickFilters, currentFilters, onApply }) {
+	const resolveText = useResolveText();
+	const visibleFilters = quickFilters?.filter((filter) => filter.filters) ?? [];
+	if (visibleFilters.length === 0) return null;
+	return /* @__PURE__ */ jsx("div", {
+		className: "flex min-w-0 flex-wrap items-center gap-2",
+		children: visibleFilters.map((filter) => {
+			const active = filtersEqual(currentFilters, filter.filters);
+			const label = resolveText(filter.label, filter.id);
+			const description = resolveText(filter.description);
+			const button = /* @__PURE__ */ jsxs(Button, {
+				variant: active ? "secondary" : "outline",
+				size: "sm",
+				className: cn("gap-1.5 text-xs", active && "border-border-strong bg-muted text-foreground"),
+				"aria-pressed": active,
+				onClick: () => onApply(cloneFilters(filter.filters)),
+				children: [/* @__PURE__ */ jsx(ComponentRenderer, {
+					reference: filter.icon,
+					additionalProps: { className: "size-4 shrink-0" }
+				}), /* @__PURE__ */ jsx("span", { children: label })]
+			}, filter.id);
+			if (!description) return button;
+			return /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, { render: button }), /* @__PURE__ */ jsx(TooltipContent, {
+				side: "bottom",
+				align: "start",
+				children: description
+			})] }, filter.id);
+		})
+	});
+}
+
+//#endregion
+export { QuickFilterBar };

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

@@ -3,6 +3,7 @@ import { cn } from "../../lib/utils.mjs";
 import { selectRealtime, useAdminStore } from "../../runtime/provider.mjs";
 import { useSafeContentLocales } from "../../runtime/content-locales-provider.mjs";
 import { useScopedLocale } from "../../runtime/locale-scope.mjs";
+import { resolveIconElement } from "../../components/component-renderer.mjs";
 import { flattenOptions } from "../../components/primitives/types.mjs";
 import { resolveOptionLabelForValue } from "../../components/primitives/option-label.mjs";
 import { Button } from "../../components/ui/button.mjs";
@@ -14,6 +15,7 @@ import { Tooltip, TooltipContent, TooltipTrigger } from "../../components/ui/too
 import { Checkbox } from "../../components/ui/checkbox.mjs";
 import { createActionRegistryProxy } from "../../builder/types/action-registry.mjs";
 import { ActionButton } from "../../components/actions/action-button.mjs";
+import { adminCollectionKey } from "../../hooks/query-access.mjs";
 import { useCollectionFields } from "../../hooks/use-collection-fields.mjs";
 import { useSuspenseCollectionMeta } from "../../hooks/use-collection-meta.mjs";
 import { ActionDialog } from "../../components/actions/action-dialog.mjs";
@@ -33,17 +35,18 @@ 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";
 import { useViewState } from "../../hooks/use-view-state.mjs";
 import { BulkActionToolbar } from "./bulk-action-toolbar.mjs";
+import { QuickFilterBar } from "./quick-filter-bar.mjs";
 import { Icon } from "@iconify/react";
 import * as React from "react";
 import { Suspense, useMemo, useState } from "react";
@@ -258,6 +261,8 @@ function mapListSchemaToConfig(list) {
 	const config = {};
 	if (list.columns?.length) config.columns = list.columns;
 	if (list.defaultSort) config.defaultSort = list.defaultSort;
+	if (list.defaultFilters?.length) config.defaultFilters = list.defaultFilters;
+	if (list.quickFilters?.length) config.quickFilters = list.quickFilters;
 	if (list.orderable) config.orderable = list.orderable;
 	if (Array.isArray(list.searchable) && list.searchable.length) {
 		config.searchFields = list.searchable;
@@ -398,6 +403,7 @@ function TableView(props) {
 */
 function TableViewInner({ collection, config, viewConfig, navigate, basePath = "/admin", showSearch = true, showFilters = true, showToolbar = true, realtime, headerActions, emptyState, actionsConfig }) {
 	"use no memo";
+	const collectionKey = adminCollectionKey(collection);
 	const globalRealtimeConfig = useAdminStore(selectRealtime);
 	const { fields: resolvedFields, schema } = useCollectionFields(collection, { fallbackFields: config?.fields });
 	const { collections: uploadCollections } = useUploadCollection();
@@ -475,10 +481,16 @@ function TableViewInner({ collection, config, viewConfig, navigate, basePath = "
 	const orderField = "order";
 	const orderDirection = typeof orderableConfig === "object" ? orderableConfig.direction ?? "asc" : "asc";
 	const orderStep = typeof orderableConfig === "object" ? orderableConfig.step ?? 10 : 10;
-	const viewState = useViewState(defaultColumns, {
+	const defaultFilters = useMemo(() => resolvedListConfig?.defaultFilters ?? [], [resolvedListConfig?.defaultFilters]);
+	const viewState = useViewState(defaultColumns, useMemo(() => ({
 		realtime: resolvedRealtime,
-		groupBy: defaultGroupBy
-	}, collection, user?.id);
+		groupBy: defaultGroupBy,
+		filters: defaultFilters
+	}), [
+		resolvedRealtime,
+		defaultGroupBy,
+		defaultFilters
+	]), collection, user?.id);
 	const effectiveRealtime = viewState.config.realtime ?? resolvedRealtime;
 	const visibleColumnsForExpansion = viewState.config.visibleColumns.length > 0 ? viewState.config.visibleColumns : defaultColumns;
 	const expandedFields = useMemo(() => autoExpandFields({
@@ -492,7 +504,7 @@ function TableViewInner({ collection, config, viewConfig, navigate, basePath = "
 		visibleColumnsForExpansion,
 		collectionMeta?.relations
 	]);
-	const isKnownSortField = React.useCallback((field) => !!field && (field === "_title" || !!resolvedFields?.[field]), [resolvedFields]);
+	const isKnownSortField = React.useCallback((field) => !!field && (field === "_title" || field === "createdAt" || field === "updatedAt" || !!resolvedFields?.[field]), [resolvedFields]);
 	const hasOrderField = isKnownSortField(orderField);
 	const canUseOrderableSort = isOrderableEnabled && hasOrderField;
 	const effectiveSort = useMemo(() => {
@@ -666,15 +678,15 @@ function TableViewInner({ collection, config, viewConfig, navigate, basePath = "
 		limit: 100,
 		highlights: true
 	}, { enabled: isSearching });
-	const { data: listData, isLoading: listLoading, error: listError } = useCollectionList(collection, queryOptions, { enabled: !isSearching }, { realtime: effectiveRealtime });
+	const { data: listData, isLoading: listLoading, error: listError } = useCollectionList(collectionKey, queryOptions, { enabled: !isSearching }, { realtime: effectiveRealtime });
 	const isLoading = isSearching ? searchLoading : listLoading;
 	const isSearchActive = isSearching && searchFetching;
 	const { data: savedViewsData, isLoading: savedViewsLoading } = useSavedViews(collection, user?.id);
 	const saveViewMutation = useSaveView(collection, user?.id);
 	const deleteViewMutation = useDeleteSavedView(collection, user?.id);
-	const deleteMutation = useCollectionDelete(collection);
-	const restoreMutation = useCollectionRestore(collection);
-	const updateBatchMutation = useCollectionUpdateBatch(collection);
+	const deleteMutation = useCollectionDelete(collectionKey);
+	const restoreMutation = useCollectionRestore(collectionKey);
+	const updateBatchMutation = useCollectionUpdateBatch(collectionKey);
 	const availableFields = useMemo(() => {
 		return getAllAvailableFields(resolvedFields, { meta: collectionMeta });
 	}, [resolvedFields, collectionMeta]);
@@ -875,13 +887,23 @@ function TableViewInner({ collection, config, viewConfig, navigate, basePath = "
 		orderDirection,
 		viewState
 	]);
-	const hasViewOptionsState = hasActiveFilters || !!viewState.config.groupBy || viewState.config.visibleColumns.length !== defaultColumns.length || !!viewState.config.includeDeleted;
+	const hasViewOptionsState = hasActiveFilters || !!viewState.config.sortConfig || !!viewState.config.groupBy || viewState.config.visibleColumns.length !== defaultColumns.length || !!viewState.config.includeDeleted;
 	const clearFilters = () => {
 		viewState.setConfig({
 			...viewState.config,
 			filters: []
 		});
 	};
+	const applyQuickFilters = React.useCallback((filters) => {
+		viewState.setConfig((current) => ({
+			...current,
+			filters,
+			pagination: {
+				...current.pagination ?? { pageSize: 25 },
+				page: 1
+			}
+		}));
+	}, [viewState]);
 	const exitReorderMode = React.useCallback(() => {
 		setOptimisticOrderIds(null);
 		setIsReorderMode(false);
@@ -992,6 +1014,14 @@ function TableViewInner({ collection, config, viewConfig, navigate, basePath = "
 		const groupField = groupableFields.find((field) => field.name === groupBy);
 		const collapsedGroups = new Set(viewState.config.collapsedGroups ?? []);
 		const serverGroups = !isSearching ? listData?.groups : void 0;
+		const iconForValue = (value) => {
+			if (groupField?.type !== "select") return null;
+			const options = groupField.options?.options;
+			if (!Array.isArray(options)) return null;
+			const option = flattenOptions(options).find((opt) => String(opt.value) === String(value));
+			if (!option?.icon) return null;
+			return resolveIconElement(option.icon);
+		};
 		if (serverGroups?.length) {
 			const rowsById = new Map(rows.map((row) => [row.id, row]));
 			return serverGroups.flatMap((group) => {
@@ -1003,6 +1033,7 @@ function TableViewInner({ collection, config, viewConfig, navigate, basePath = "
 					type: "group",
 					key: groupKey,
 					label,
+					icon: iconForValue(group.value),
 					count: group.count,
 					collapsed
 				}, ...collapsed ? [] : groupRows.map((row) => ({
@@ -1013,7 +1044,8 @@ function TableViewInner({ collection, config, viewConfig, navigate, basePath = "
 		}
 		const groups = /* @__PURE__ */ new Map();
 		for (const row of rows) {
-			const valueLabel = stringifyGroupValue(row.original?.[groupBy], groupField, resolveText, t, uiLocale, t("common.noValue"));
+			const rawValue = row.original?.[groupBy];
+			const valueLabel = stringifyGroupValue(rawValue, groupField, resolveText, t, uiLocale, t("common.noValue"));
 			const groupKey = `${groupBy}:${valueLabel}`;
 			const group = groups.get(groupKey);
 			if (group) {
@@ -1022,8 +1054,9 @@ function TableViewInner({ collection, config, viewConfig, navigate, basePath = "
 			}
 			groups.set(groupKey, {
 				label: valueLabel,
+				value: rawValue,
 				rows: [row],
-				sortIndex: getGroupSortIndex(row.original?.[groupBy], groupField)
+				sortIndex: getGroupSortIndex(rawValue, groupField)
 			});
 		}
 		return Array.from(groups.entries()).sort(([, a], [, b]) => a.sortIndex - b.sortIndex).flatMap(([key, group]) => {
@@ -1032,6 +1065,7 @@ function TableViewInner({ collection, config, viewConfig, navigate, basePath = "
 				type: "group",
 				key,
 				label: group.label,
+				icon: iconForValue(group.value),
 				count: group.rows.length,
 				collapsed
 			}, ...collapsed ? [] : group.rows.map((row) => ({
@@ -1212,6 +1246,11 @@ function TableViewInner({ collection, config, viewConfig, navigate, basePath = "
 						containerClassName: "h-10"
 					})
 				}),
+				/* @__PURE__ */ jsx(QuickFilterBar, {
+					quickFilters: resolvedListConfig?.quickFilters,
+					currentFilters: viewState.config.filters,
+					onApply: applyQuickFilters
+				}),
 				isReorderMode && canUseOrderableSort && /* @__PURE__ */ jsxs("div", {
 					className: "border-border/70 bg-muted/30 text-muted-foreground flex min-h-10 items-center justify-between gap-3 border-y px-3 py-2 font-mono text-xs",
 					children: [/* @__PURE__ */ jsxs("div", {
@@ -1320,16 +1359,20 @@ function TableViewInner({ collection, config, viewConfig, navigate, basePath = "
 														children: /* @__PURE__ */ jsxs("button", {
 															type: "button",
 															"aria-expanded": !entry.collapsed,
-															className: "text-muted-foreground hover:text-foreground focus-visible:ring-ring/40 -ml-1 inline-flex min-h-8 items-center gap-2 rounded-md px-1 font-mono text-[11px] font-semibold tracking-[0.12em] uppercase transition-colors focus-visible:ring-2 focus-visible:outline-none",
+															className: "text-muted-foreground hover:text-foreground focus-visible:ring-ring/40 -ml-1 inline-flex min-h-8 items-center gap-2 rounded-md px-1 text-xs font-medium transition-colors focus-visible:ring-2 focus-visible:outline-none",
 															onClick: () => viewState.toggleCollapsedGroup(entry.key),
 															children: [
 																/* @__PURE__ */ jsx(Icon, {
-																	icon: entry.collapsed ? "ph:caret-right" : "ph:caret-down",
-																	className: "size-3.5 shrink-0"
+																	icon: "ph:caret-right-bold",
+																	className: cn("size-3 shrink-0 transition-transform", !entry.collapsed && "rotate-90")
+																}),
+																entry.icon && /* @__PURE__ */ jsx("span", {
+																	className: "size-4 shrink-0",
+																	children: entry.icon
 																}),
 																/* @__PURE__ */ jsx("span", { children: entry.label }),
 																groupingConfig?.showCounts !== false && /* @__PURE__ */ jsx("span", {
-																	className: "bg-muted text-muted-foreground inline-flex h-5 min-w-5 items-center justify-center rounded-full px-1.5 text-[10px] tracking-normal tabular-nums",
+																	className: "text-muted-foreground/60 tabular-nums",
 																	children: entry.count
 																})
 															]
@@ -1543,7 +1586,8 @@ function TableViewInner({ collection, config, viewConfig, navigate, basePath = "
 					savedViewsLoading,
 					onSaveView: handleSaveView,
 					onDeleteView: handleDeleteView,
-					supportsSoftDelete: collectionMeta?.softDelete ?? false
+					supportsSoftDelete: collectionMeta?.softDelete ?? false,
+					defaultFilters
 				}),
 				dialogAction && /* @__PURE__ */ jsx(ActionDialog, {
 					open: !!dialogAction,

package/dist/client/views/globals/global-form-view.mjs

@@ -12,13 +12,13 @@ import { Checkbox } from "../../components/ui/checkbox.mjs";
 import { DateTimeInput } from "../../components/primitives/date-input.mjs";
 import { ConfirmationDialog } from "../../components/actions/confirmation-dialog.mjs";
 import { useGlobalFields } from "../../hooks/use-global-fields.mjs";
+import { ReactiveFieldStatesProvider, useReactiveFields } from "../../hooks/use-reactive-fields.mjs";
 import { AutoFormFields } from "../collection/auto-form-fields.mjs";
 import { EmptyState } from "../../components/ui/empty-state.mjs";
 import { HistorySidebar } from "../../components/history-sidebar.mjs";
 import { useGlobal, useGlobalRevertVersion, useGlobalUpdate, useGlobalVersions } from "../../hooks/use-global.mjs";
 import { useGlobalServerValidation } from "../../hooks/use-server-validation.mjs";
 import { useSidebarSearchParam } from "../../hooks/use-sidebar-search-param.mjs";
-import { useReactiveFields } from "../../hooks/use-reactive-fields.mjs";
 import { useTransitionStage } from "../../hooks/use-transition-stage.mjs";
 import { detectManyToManyRelations, hasManyToManyRelations } from "../../utils/detect-relations.mjs";
 import { shouldHandleAdminShortcut } from "../../utils/keyboard-shortcuts.mjs";
@@ -293,7 +293,7 @@ function GlobalFormView({ global: globalName, config, viewConfig, registry, show
 		if (globalData) form.reset(globalData);
 	}, [form, globalData]);
 	const reactiveConfigs = React.useMemo(() => extractReactiveConfigs(globalSchema), [globalSchema]);
-	useReactiveFields({
+	const { fieldStates: reactiveFieldStates } = useReactiveFields({
 		collection: globalName,
 		mode: "global",
 		reactiveConfigs,
@@ -463,13 +463,16 @@ function GlobalFormView({ global: globalName, config, viewConfig, registry, show
 							t
 						})
 					] })
-				}), /* @__PURE__ */ jsx(AutoFormFields, {
-					collection: globalName,
-					mode: "global",
-					config: resolvedConfig,
-					registry,
-					resolvedFields: schemaFields,
-					schema: globalSchema
+				}), /* @__PURE__ */ jsx(ReactiveFieldStatesProvider, {
+					fieldStates: reactiveFieldStates,
+					children: /* @__PURE__ */ jsx(AutoFormFields, {
+						collection: globalName,
+						mode: "global",
+						config: resolvedConfig,
+						registry,
+						resolvedFields: schemaFields,
+						schema: globalSchema
+					})
 				})]
 			}),
 			isHistoryOpen && /* @__PURE__ */ jsx(HistorySidebar, {

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
@@ -163,7 +250,7 @@ function AdminLayout({ LinkComponent, activeRoute, basePath = "/admin", brandNam
 						}),
 						secondaryRailConfig?.placement !== "right" && secondaryRail,
 						/* @__PURE__ */ jsxs(SidebarInset, {
-							className: "qa-admin-layout__content bg-background flex h-svh flex-col overflow-hidden md:rounded-tl-2xl",
+							className: "qa-admin-layout__content bg-background flex h-svh scrollbar-none flex-col overflow-hidden md:rounded-t-2xl",
 							children: [
 								shouldShowHeader && header && /* @__PURE__ */ jsx("header", {
 									className: "qa-admin-layout__header border-border-subtle border-b",