@questpie/admin 3.0.3 → 3.0.5

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

@@ -18,19 +18,21 @@ import { ActionButton } from "../../components/actions/action-button.mjs";
 import { useCollectionFields } from "../../hooks/use-collection-fields.mjs";
 import { AutoFormFields } from "./auto-form-fields.mjs";
 import { ActionDialog } from "../../components/actions/action-dialog.mjs";
+import { EmptyState } from "../../components/ui/empty-state.mjs";
 import { HistorySidebar } from "../../components/history-sidebar.mjs";
 import { LivePreviewMode } from "../../components/preview/live-preview-mode.mjs";
 import { useCollectionValidation } from "../../hooks/use-collection-validation.mjs";
 import { useSearchParamToggle } from "../../hooks/use-search-param-toggle.mjs";
 import { usePreferServerValidation } from "../../hooks/use-server-validation.mjs";
 import { useSidebarSearchParam } from "../../hooks/use-sidebar-search-param.mjs";
-import { useCollectionAuditHistory } from "../../hooks/use-audit-history.mjs";
 import { useCollectionCreate, useCollectionDelete, useCollectionItem, useCollectionRestore, useCollectionRevertVersion, useCollectionUpdate, useCollectionVersions } from "../../hooks/use-collection.mjs";
 import { getLockUser, useLock } from "../../hooks/use-locks.mjs";
 import { useReactiveFields } from "../../hooks/use-reactive-fields.mjs";
 import { useServerActions } from "../../hooks/use-server-actions.mjs";
 import { useTransitionStage } from "../../hooks/use-transition-stage.mjs";
 import { detectManyToManyRelations, hasManyToManyRelations } from "../../utils/detect-relations.mjs";
+import { shouldHandleAdminShortcut } from "../../utils/keyboard-shortcuts.mjs";
+import { AdminViewHeader } from "../layout/admin-view-layout.mjs";
 import { FormViewSkeleton } from "./view-skeletons.mjs";
 import { c } from "react/compiler-runtime";
 import { Icon } from "@iconify/react";
@@ -415,6 +417,7 @@ const SaveSubmitButton = React.memo(function SaveSubmitButton$1(t0) {
 	if ($[5] !== t2 || $[6] !== t3) {
 		t4 = /* @__PURE__ */ jsx(Button, {
 			type: "submit",
+			size: "sm",
 			disabled: t2,
 			className: "gap-2",
 			children: t3
@@ -452,7 +455,7 @@ function FormView({ collection, id, config, viewConfig, navigate, basePath = "/a
 	const { t } = useTranslation();
 	const resolveText = useResolveText();
 	const isEditMode = !!id;
-	const { fields: resolvedFields, schema } = useCollectionFields(collection, { fallbackFields: config?.fields });
+	const { fields: resolvedFields, schema, isLoading: isFieldsLoading } = useCollectionFields(collection, { fallbackFields: config?.fields });
 	const resolvedFormConfig = React.useMemo(() => viewConfig ?? (config?.form)?.["~config"] ?? config?.form ?? schema?.admin?.form, [
 		viewConfig,
 		config?.form,
@@ -526,7 +529,6 @@ function FormView({ collection, id, config, viewConfig, navigate, basePath = "/a
 	const revertVersionMutation = useCollectionRevertVersion(collection);
 	const [pendingRevertVersion, setPendingRevertVersion] = React.useState(null);
 	const { data: versionsData, isLoading: versionsLoading } = useCollectionVersions(collection, id ?? "", { limit: 50 }, { enabled: isEditMode && !!id && isHistoryOpen && !!schema?.options?.versioning });
-	const { data: auditData, isLoading: auditLoading } = useCollectionAuditHistory(collection, id ?? "", { limit: 50 }, { enabled: isEditMode && !!id && isHistoryOpen });
 	const workflowConfig = schema?.options?.workflow;
 	const workflowEnabled = !!workflowConfig?.enabled;
 	/**
@@ -557,8 +559,13 @@ function FormView({ collection, id, config, viewConfig, navigate, basePath = "/a
 	const [transitionTarget, setTransitionTarget] = React.useState(null);
 	const [transitionSchedule, setTransitionSchedule] = React.useState(false);
 	const [transitionScheduledAt, setTransitionScheduledAt] = React.useState(null);
-	const clientResolver = useCollectionValidation(collection);
-	const resolver = usePreferServerValidation(collection, { mode: isEditMode ? "update" : "create" }, clientResolver);
+	const validationMode = isEditMode ? "update" : "create";
+	const hasServerValidationSchema = validationMode === "update" ? !!schema?.validation?.update : !!schema?.validation?.insert;
+	const clientResolver = useCollectionValidation(collection, { enabled: !isFieldsLoading && !hasServerValidationSchema });
+	const resolver = usePreferServerValidation(collection, {
+		mode: validationMode,
+		schema
+	}, clientResolver);
 	const form = useForm({
 		defaultValues: transformedItem ?? defaultValuesProp ?? {},
 		resolver,
@@ -706,6 +713,9 @@ function FormView({ collection, id, config, viewConfig, navigate, basePath = "/a
 			pendingLocale: null
 		});
 	}, [form]);
+	const handleLocaleDialogOpenChange = React.useCallback((open) => {
+		if (!open) handleLocaleChangeCancel();
+	}, [handleLocaleChangeCancel]);
 	const onSubmit = React.useEffectEvent(async (data) => {
 		const savePromise = async () => {
 			if (isEditMode && id) return await updateMutation.mutateAsync({
@@ -756,7 +766,10 @@ function FormView({ collection, id, config, viewConfig, navigate, basePath = "/a
 	});
 	React.useEffect(() => {
 		const handleKeyDown = (e_0) => {
-			if ((e_0.metaKey || e_0.ctrlKey) && e_0.key === "s") {
+			if (shouldHandleAdminShortcut(e_0, {
+				allowEditableTarget: true,
+				key: "s"
+			})) {
 				e_0.preventDefault();
 				e_0.stopPropagation();
 				form.handleSubmit(onSubmitRef.current, (errors) => {
@@ -770,7 +783,10 @@ function FormView({ collection, id, config, viewConfig, navigate, basePath = "/a
 	}, [form, t]);
 	const isMutationPending = createMutation.isPending || updateMutation.isPending;
 	const configFormActions = resolvedFormConfig?.actions;
-	const { serverActions } = useServerActions({ collection });
+	const { serverActions } = useServerActions({
+		collection,
+		schema
+	});
 	const scopedServerFormActions = React.useMemo(() => isEditMode ? serverActions.filter((action) => {
 		const scope = action.scope;
 		return scope === "single" || scope === "row";
@@ -1030,6 +1046,32 @@ function FormView({ collection, id, config, viewConfig, navigate, basePath = "/a
 	const handleConfirm = async () => {
 		if (confirmAction) await executeAction(confirmAction);
 	};
+	const handleConfirmActionOpenChange = React.useCallback((open_0) => {
+		if (!open_0) setConfirmAction(null);
+	}, []);
+	const handleActionDialogOpenChange = React.useCallback((open_1) => {
+		if (!open_1) setDialogAction(null);
+	}, []);
+	const handleRevertDialogOpenChange = React.useCallback((open_2) => {
+		if (!open_2) setPendingRevertVersion(null);
+	}, []);
+	const handleWorkflowDialogOpenChange = React.useCallback((open_3) => {
+		if (!open_3) {
+			setTransitionTarget(null);
+			setTransitionSchedule(false);
+			setTransitionScheduledAt(null);
+		}
+	}, []);
+	const workflowTransitionTriggerRender = React.useMemo(() => /* @__PURE__ */ jsx(Button, {
+		type: "button",
+		variant: "outline",
+		size: "sm",
+		className: "gap-2"
+	}), []);
+	const secondaryActionsTriggerRender = React.useMemo(() => /* @__PURE__ */ jsx(Button, {
+		variant: "outline",
+		size: "icon-sm"
+	}), []);
 	const formatDate = (date) => {
 		return new Date(date).toLocaleDateString(void 0, {
 			year: "numeric",
@@ -1049,20 +1091,16 @@ function FormView({ collection, id, config, viewConfig, navigate, basePath = "/a
 	};
 	const lockRefreshTimerRef = React.useRef(null);
 	React.useEffect(() => {
-		if (!isEditMode || isBlocked) return;
+		if (!isEditMode || isBlocked || isLoading) return;
+		const target = formElementRef.current;
+		if (!target) return;
 		const scheduleLockRefresh = () => {
 			if (lockRefreshTimerRef.current) clearTimeout(lockRefreshTimerRef.current);
 			lockRefreshTimerRef.current = setTimeout(() => {
 				refreshLock();
 			}, 1e3);
 		};
-		const events = [
-			"input",
-			"change",
-			"keydown",
-			"pointerdown"
-		];
-		const target = formElementRef.current ?? document;
+		const events = ["input", "change"];
 		for (const event of events) target.addEventListener(event, scheduleLockRefresh, { capture: true });
 		scheduleLockRefresh();
 		return () => {
@@ -1072,6 +1110,7 @@ function FormView({ collection, id, config, viewConfig, navigate, basePath = "/a
 	}, [
 		isEditMode,
 		isBlocked,
+		isLoading,
 		refreshLock
 	]);
 	const { data: previewUrl = null } = useQuery({
@@ -1094,27 +1133,34 @@ function FormView({ collection, id, config, viewConfig, navigate, basePath = "/a
 	});
 	if (isEditMode && itemError) {
 		const is404 = itemError != null && typeof itemError === "object" && "status" in itemError && itemError.status === 404;
-		return /* @__PURE__ */ jsxs("div", {
-			className: "text-muted-foreground flex h-64 flex-col items-center justify-center gap-3",
-			children: [
-				/* @__PURE__ */ jsx(Icon, {
-					icon: is404 ? "ph:file-dashed" : "ph:warning-circle",
-					className: "text-destructive size-8"
-				}),
-				/* @__PURE__ */ jsx("p", {
-					className: "text-sm",
-					children: is404 ? t("errors.notFound") : itemError instanceof Error ? itemError.message : t("errors.failedToLoad")
-				}),
-				is404 && /* @__PURE__ */ jsx(Button, {
-					variant: "outline",
-					size: "sm",
-					onClick: () => navigate(`${basePath}/collections/${collection}`),
-					children: t("common.backToList")
-				})
-			]
+		return /* @__PURE__ */ jsx(EmptyState, {
+			variant: is404 ? "empty" : "error",
+			iconName: is404 ? "ph:file-dashed" : "ph:warning-circle",
+			title: is404 ? t("error.notFound") : t("error.failedToLoad"),
+			description: !is404 && itemError instanceof Error ? itemError.message : void 0,
+			height: "h-64",
+			action: is404 ? /* @__PURE__ */ jsxs(Button, {
+				variant: "outline",
+				size: "sm",
+				className: "gap-2",
+				onClick: () => navigate(`${basePath}/collections/${collection}`),
+				children: [/* @__PURE__ */ jsx(Icon, {
+					icon: "ph:arrow-left",
+					className: "size-3.5"
+				}), t("common.backToList")]
+			}) : /* @__PURE__ */ jsxs(Button, {
+				variant: "outline",
+				size: "sm",
+				className: "gap-2",
+				onClick: () => window.location.reload(),
+				children: [/* @__PURE__ */ jsx(Icon, {
+					icon: "ph:arrow-clockwise",
+					className: "size-3.5"
+				}), t("common.retry")]
+			})
 		});
 	}
-	if (isEditMode && isLoading) return /* @__PURE__ */ jsx(FormViewSkeleton, {});
+	if (isEditMode && isLoading || isFieldsLoading) return /* @__PURE__ */ jsx(FormViewSkeleton, {});
 	const collectionLabel = resolveText(config?.label ?? schema?.admin?.config?.label, collection);
 	const title = isEditMode ? item?._title || item?.id || t("collection.edit", { name: collectionLabel }) : t("collection.new", { name: collectionLabel });
 	const formShell = /* @__PURE__ */ jsx("div", {
@@ -1126,7 +1172,7 @@ function FormView({ collection, id, config, viewConfig, navigate, basePath = "/a
 					blockedByUser.image ? /* @__PURE__ */ jsx("img", {
 						src: blockedByUser.image,
 						alt: "",
-						className: "size-8 rounded-full"
+						className: "image-outline size-8 rounded-full"
 					}) : /* @__PURE__ */ jsx("div", {
 						className: "bg-warning/20 flex size-8 items-center justify-center rounded-full",
 						children: /* @__PURE__ */ jsx(Icon, {
@@ -1151,7 +1197,7 @@ function FormView({ collection, id, config, viewConfig, navigate, basePath = "/a
 				]
 			}),
 			isOpenElsewhere && /* @__PURE__ */ jsxs("div", {
-				className: "bg-info/10 border-info/30 mb-4 flex items-center gap-3 border p-3",
+				className: "qa-form-view__open-elsewhere-banner bg-info/10 border-info/30 mb-4 flex items-center gap-3 border p-3",
 				children: [/* @__PURE__ */ jsx(Icon, {
 					icon: "ph:browser",
 					className: "text-info size-5"
@@ -1206,180 +1252,155 @@ function FormView({ collection, id, config, viewConfig, navigate, basePath = "/a
 							},
 							className: "qa-form-view__form space-y-4",
 							children: [
-								/* @__PURE__ */ jsxs("div", {
-									className: "qa-form-view__header flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between",
-									children: [/* @__PURE__ */ jsxs("div", {
-										className: "min-w-0 flex-1",
-										children: [/* @__PURE__ */ jsxs("div", {
-											className: "flex flex-wrap items-center gap-3",
-											children: [
-												/* @__PURE__ */ jsx("h1", {
-													className: "qa-form-view__title truncate text-2xl font-extrabold tracking-tight md:text-3xl",
-													children: title
-												}),
-												localeOptions.length > 0 && /* @__PURE__ */ jsx(LocaleSwitcher, {
-													locales: localeOptions,
-													value: contentLocale,
-													onChange: setContentLocale
+								/* @__PURE__ */ jsx(AdminViewHeader, {
+									className: "qa-form-view__header",
+									title,
+									titleAccessory: /* @__PURE__ */ jsxs(Fragment, { children: [
+										localeOptions.length > 0 && /* @__PURE__ */ jsx(LocaleSwitcher, {
+											locales: localeOptions,
+											value: contentLocale,
+											onChange: setContentLocale
+										}),
+										/* @__PURE__ */ jsx(AutosaveIndicator, {
+											control: form.control,
+											enabled: autoSaveConfig.enabled,
+											indicator: autoSaveConfig.indicator,
+											isEditMode,
+											isSaving,
+											lastSaved,
+											formatTimeAgo,
+											t
+										}),
+										workflowEnabled && currentStage && /* @__PURE__ */ jsxs(Badge, {
+											variant: "outline",
+											className: "gap-1.5",
+											children: [/* @__PURE__ */ jsx(Icon, {
+												icon: "ph:git-branch",
+												className: "size-3"
+											}), currentStageLabel]
+										})
+									] }),
+									meta: showMeta && item ? /* @__PURE__ */ jsxs(Fragment, { children: [
+										/* @__PURE__ */ jsxs("span", {
+											className: "opacity-60",
+											children: [t("form.id"), ":"]
+										}),
+										/* @__PURE__ */ jsx("button", {
+											type: "button",
+											className: "hover:text-foreground cursor-pointer transition-colors",
+											onClick: () => {
+												navigator.clipboard.writeText(String(item.id)).then(() => toast.success(t("toast.idCopied")), () => toast.error(t("toast.copyFailed")));
+											},
+											title: t("common.copy"),
+											children: item.id
+										}),
+										item.createdAt && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+											className: "opacity-40",
+											children: "·"
+										}), /* @__PURE__ */ jsxs("span", { children: [/* @__PURE__ */ jsxs("span", {
+											className: "opacity-60",
+											children: [t("form.created"), " "]
+										}), formatDate(item.createdAt)] })] }),
+										item.updatedAt && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+											className: "opacity-40",
+											children: "·"
+										}), /* @__PURE__ */ jsxs("span", { children: [/* @__PURE__ */ jsxs("span", {
+											className: "opacity-60",
+											children: [t("form.updated"), " "]
+										}), formatDate(item.updatedAt)] })] })
+									] }) : void 0,
+									actions: /* @__PURE__ */ jsxs(Fragment, { children: [
+										headerActions,
+										canUseLivePreview && /* @__PURE__ */ jsxs(Button, {
+											type: "button",
+											variant: "outline",
+											size: "icon-sm",
+											onClick: () => setIsLivePreviewOpen(true),
+											title: t("preview.livePreview"),
+											children: [/* @__PURE__ */ jsx(Icon, {
+												icon: "ph:eye",
+												className: "size-4"
+											}), /* @__PURE__ */ jsx("span", {
+												className: "sr-only",
+												children: t("preview.livePreview")
+											})]
+										}),
+										isEditMode && id && schema?.options?.versioning && /* @__PURE__ */ jsxs(Button, {
+											type: "button",
+											variant: "outline",
+											size: "icon-sm",
+											onClick: () => setIsHistoryOpen(true),
+											title: t("history.title"),
+											children: [/* @__PURE__ */ jsx(Icon, {
+												icon: "ph:clock-counter-clockwise",
+												className: "size-4"
+											}), /* @__PURE__ */ jsx("span", {
+												className: "sr-only",
+												children: t("history.title")
+											})]
+										}),
+										workflowEnabled && isEditMode && id && allowedTransitions.length > 0 && /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsxs(DropdownMenuTrigger, {
+											render: workflowTransitionTriggerRender,
+											children: [/* @__PURE__ */ jsx(Icon, {
+												icon: "ph:arrows-left-right",
+												className: "size-4"
+											}), t("workflow.transition")]
+										}), /* @__PURE__ */ jsx(DropdownMenuContent, {
+											align: "end",
+											children: allowedTransitions.map((stage) => /* @__PURE__ */ jsxs(DropdownMenuItem, {
+												onClick: () => setTransitionTarget({
+													name: stage.name,
+													label: stage.label
 												}),
-												/* @__PURE__ */ jsx(AutosaveIndicator, {
-													control: form.control,
-													enabled: autoSaveConfig.enabled,
-													indicator: autoSaveConfig.indicator,
-													isEditMode,
-													isSaving,
-													lastSaved,
-													formatTimeAgo,
-													t
+												children: [/* @__PURE__ */ jsx(Icon, {
+													icon: "ph:arrow-right",
+													className: "mr-2 size-4"
+												}), stage.label || stage.name]
+											}, stage.name))
+										})] }),
+										visiblePrimaryActions.map((action_4) => /* @__PURE__ */ jsx(ActionButton, {
+											action: action_4,
+											collection,
+											helpers: actionHelpers,
+											size: "sm",
+											onOpenDialog: (a_2) => setDialogAction(a_2)
+										}, action_4.id)),
+										/* @__PURE__ */ jsx(SaveSubmitButton, {
+											control: form.control,
+											isMutationPending,
+											t
+										}),
+										visibleSecondaryActions.length > 0 && /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsxs(DropdownMenuTrigger, {
+											render: secondaryActionsTriggerRender,
+											children: [/* @__PURE__ */ jsx(Icon, {
+												icon: "ph:dots-three-vertical",
+												className: "size-4"
+											}), /* @__PURE__ */ jsx("span", {
+												className: "sr-only",
+												children: t("common.moreActions")
+											})]
+										}), /* @__PURE__ */ jsxs(DropdownMenuContent, {
+											align: "end",
+											children: [
+												regularSecondary.map((action_5) => {
+													return /* @__PURE__ */ jsxs(DropdownMenuItem, {
+														onClick: () => handleActionClick(action_5),
+														disabled: actionLoading,
+														children: [resolveIconElement(action_5.icon, { className: "mr-2 size-4" }), resolveText(action_5.label)]
+													}, action_5.id);
 												}),
-												workflowEnabled && currentStage && /* @__PURE__ */ jsxs(Badge, {
-													variant: "outline",
-													className: "gap-1.5",
-													children: [/* @__PURE__ */ jsx(Icon, {
-														icon: "ph:git-branch",
-														className: "size-3"
-													}), currentStageLabel]
+												regularSecondary.length > 0 && destructiveSecondary.length > 0 && /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+												destructiveSecondary.map((action_6) => {
+													return /* @__PURE__ */ jsxs(DropdownMenuItem, {
+														variant: "destructive",
+														onClick: () => handleActionClick(action_6),
+														disabled: actionLoading,
+														children: [resolveIconElement(action_6.icon, { className: "mr-2 size-4" }), resolveText(action_6.label)]
+													}, action_6.id);
 												})
 											]
-										}), showMeta && item && /* @__PURE__ */ jsx("div", {
-											className: "qa-form-view__meta no-scrollbar mt-1 overflow-x-auto",
-											children: /* @__PURE__ */ jsxs("p", {
-												className: "text-muted-foreground flex items-center gap-2 font-mono text-xs whitespace-nowrap",
-												children: [
-													/* @__PURE__ */ jsxs("span", {
-														className: "opacity-60",
-														children: [t("form.id"), ":"]
-													}),
-													/* @__PURE__ */ jsx("button", {
-														type: "button",
-														className: "hover:text-foreground cursor-pointer transition-colors",
-														onClick: () => {
-															navigator.clipboard.writeText(String(item.id)).then(() => toast.success(t("toast.idCopied")), () => toast.error(t("toast.copyFailed")));
-														},
-														title: t("common.copy"),
-														children: item.id
-													}),
-													item.createdAt && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
-														className: "opacity-40",
-														children: "·"
-													}), /* @__PURE__ */ jsxs("span", { children: [/* @__PURE__ */ jsxs("span", {
-														className: "opacity-60",
-														children: [t("form.created"), " "]
-													}), formatDate(item.createdAt)] })] }),
-													item.updatedAt && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
-														className: "opacity-40",
-														children: "·"
-													}), /* @__PURE__ */ jsxs("span", { children: [/* @__PURE__ */ jsxs("span", {
-														className: "opacity-60",
-														children: [t("form.updated"), " "]
-													}), formatDate(item.updatedAt)] })] })
-												]
-											})
-										})]
-									}), /* @__PURE__ */ jsxs("div", {
-										className: "qa-form-view__actions flex w-auto shrink-0 items-center gap-2",
-										children: [
-											headerActions,
-											canUseLivePreview && /* @__PURE__ */ jsxs(Button, {
-												type: "button",
-												variant: "outline",
-												size: "icon",
-												className: "size-9",
-												onClick: () => setIsLivePreviewOpen(true),
-												title: t("preview.livePreview"),
-												children: [/* @__PURE__ */ jsx(Icon, {
-													icon: "ph:eye",
-													className: "size-4"
-												}), /* @__PURE__ */ jsx("span", {
-													className: "sr-only",
-													children: t("preview.livePreview")
-												})]
-											}),
-											isEditMode && id && schema?.options?.versioning && /* @__PURE__ */ jsxs(Button, {
-												type: "button",
-												variant: "outline",
-												size: "icon",
-												className: "size-9",
-												onClick: () => setIsHistoryOpen(true),
-												title: t("history.title"),
-												children: [/* @__PURE__ */ jsx(Icon, {
-													icon: "ph:clock-counter-clockwise",
-													className: "size-4"
-												}), /* @__PURE__ */ jsx("span", {
-													className: "sr-only",
-													children: t("history.title")
-												})]
-											}),
-											workflowEnabled && isEditMode && id && allowedTransitions.length > 0 && /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsxs(DropdownMenuTrigger, {
-												render: /* @__PURE__ */ jsx(Button, {
-													type: "button",
-													variant: "outline",
-													className: "gap-2"
-												}),
-												children: [/* @__PURE__ */ jsx(Icon, {
-													icon: "ph:arrows-left-right",
-													className: "size-4"
-												}), t("workflow.transition")]
-											}), /* @__PURE__ */ jsx(DropdownMenuContent, {
-												align: "end",
-												children: allowedTransitions.map((stage) => /* @__PURE__ */ jsxs(DropdownMenuItem, {
-													onClick: () => setTransitionTarget({
-														name: stage.name,
-														label: stage.label
-													}),
-													children: [/* @__PURE__ */ jsx(Icon, {
-														icon: "ph:arrow-right",
-														className: "mr-2 size-4"
-													}), stage.label || stage.name]
-												}, stage.name))
-											})] }),
-											visiblePrimaryActions.map((action_4) => /* @__PURE__ */ jsx(ActionButton, {
-												action: action_4,
-												collection,
-												helpers: actionHelpers,
-												onOpenDialog: (a_2) => setDialogAction(a_2)
-											}, action_4.id)),
-											/* @__PURE__ */ jsx(SaveSubmitButton, {
-												control: form.control,
-												isMutationPending,
-												t
-											}),
-											visibleSecondaryActions.length > 0 && /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsxs(DropdownMenuTrigger, {
-												render: /* @__PURE__ */ jsx(Button, {
-													variant: "outline",
-													size: "icon",
-													className: "size-9"
-												}),
-												children: [/* @__PURE__ */ jsx(Icon, {
-													icon: "ph:dots-three-vertical",
-													className: "size-4"
-												}), /* @__PURE__ */ jsx("span", {
-													className: "sr-only",
-													children: t("common.moreActions")
-												})]
-											}), /* @__PURE__ */ jsxs(DropdownMenuContent, {
-												align: "end",
-												children: [
-													regularSecondary.map((action_5) => {
-														return /* @__PURE__ */ jsxs(DropdownMenuItem, {
-															onClick: () => handleActionClick(action_5),
-															disabled: actionLoading,
-															children: [resolveIconElement(action_5.icon, { className: "mr-2 size-4" }), resolveText(action_5.label)]
-														}, action_5.id);
-													}),
-													regularSecondary.length > 0 && destructiveSecondary.length > 0 && /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
-													destructiveSecondary.map((action_6) => {
-														return /* @__PURE__ */ jsxs(DropdownMenuItem, {
-															variant: "destructive",
-															onClick: () => handleActionClick(action_6),
-															disabled: actionLoading,
-															children: [resolveIconElement(action_6.icon, { className: "mr-2 size-4" }), resolveText(action_6.label)]
-														}, action_6.id);
-													})
-												]
-											})] })
-										]
-									})]
+										})] })
+									] })
 								}),
 								item?.deletedAt && /* @__PURE__ */ jsxs("div", {
 									className: "qa-form-view__deleted-banner border-destructive/30 bg-destructive/5 text-destructive flex items-center gap-2 border px-4 py-3 text-sm",
@@ -1402,11 +1423,9 @@ function FormView({ collection, id, config, viewConfig, navigate, basePath = "/a
 					})
 				]
 			}),
-			/* @__PURE__ */ jsx(Dialog, {
+			localeChangeDialog.open && /* @__PURE__ */ jsx(Dialog, {
 				open: localeChangeDialog.open,
-				onOpenChange: (open) => {
-					if (!open) handleLocaleChangeCancel();
-				},
+				onOpenChange: handleLocaleDialogOpenChange,
 				children: /* @__PURE__ */ jsxs(DialogContent, {
 					showCloseButton: false,
 					children: [/* @__PURE__ */ jsxs(DialogHeader, { children: [/* @__PURE__ */ jsxs(DialogTitle, {
@@ -1428,25 +1447,24 @@ function FormView({ collection, id, config, viewConfig, navigate, basePath = "/a
 			}),
 			confirmAction?.confirmation && /* @__PURE__ */ jsx(ConfirmationDialog, {
 				open: !!confirmAction,
-				onOpenChange: (open_0) => !open_0 && setConfirmAction(null),
+				onOpenChange: handleConfirmActionOpenChange,
 				config: confirmAction.confirmation,
 				onConfirm: handleConfirm,
 				loading: actionLoading
 			}),
 			dialogAction && /* @__PURE__ */ jsx(ActionDialog, {
 				open: !!dialogAction,
-				onOpenChange: (open_1) => !open_1 && setDialogAction(null),
+				onOpenChange: handleActionDialogOpenChange,
 				action: dialogAction,
 				collection,
 				item: transformedItem,
 				helpers: actionHelpers
 			}),
-			/* @__PURE__ */ jsx(HistorySidebar, {
+			isHistoryOpen && /* @__PURE__ */ jsx(HistorySidebar, {
 				open: isHistoryOpen,
 				onOpenChange: setIsHistoryOpen,
-				auditEntries: auditData ?? [],
-				isLoadingAudit: auditLoading,
 				versions: versionsData ?? [],
+				fields: schema?.fields,
 				isLoadingVersions: versionsLoading,
 				isReverting: revertVersionMutation.isPending,
 				onRevert: async (version_0) => {
@@ -1454,11 +1472,9 @@ function FormView({ collection, id, config, viewConfig, navigate, basePath = "/a
 				},
 				showVersionsTab: !!schema?.options?.versioning
 			}),
-			/* @__PURE__ */ jsx(ConfirmationDialog, {
+			pendingRevertVersion && /* @__PURE__ */ jsx(ConfirmationDialog, {
 				open: !!pendingRevertVersion,
-				onOpenChange: (open_2) => {
-					if (!open_2) setPendingRevertVersion(null);
-				},
+				onOpenChange: handleRevertDialogOpenChange,
 				config: {
 					title: t("version.revertConfirmTitle"),
 					description: t("version.revertConfirmDescription", { number: pendingRevertVersion?.versionNumber ?? pendingRevertVersion?.versionId ?? "-" }),
@@ -1469,15 +1485,9 @@ function FormView({ collection, id, config, viewConfig, navigate, basePath = "/a
 				onConfirm: confirmRevertVersion,
 				loading: revertVersionMutation.isPending
 			}),
-			/* @__PURE__ */ jsx(Dialog, {
+			transitionTarget && /* @__PURE__ */ jsx(Dialog, {
 				open: !!transitionTarget,
-				onOpenChange: (open_3) => {
-					if (!open_3) {
-						setTransitionTarget(null);
-						setTransitionSchedule(false);
-						setTransitionScheduledAt(null);
-					}
-				},
+				onOpenChange: handleWorkflowDialogOpenChange,
 				children: /* @__PURE__ */ jsxs(DialogContent, { children: [
 					/* @__PURE__ */ jsxs(DialogHeader, { children: [/* @__PURE__ */ jsxs(DialogTitle, {
 						className: "flex items-center gap-2",