@protobase/ui 0.19.11 → 0.19.12

package/dist/app/record-page.js

@@ -104,7 +104,6 @@ const LoadedRecord = ({ model, recordKey, stored }) => {
 	const { basePath } = useRouter();
 	const { address, go, open } = useAppAddress();
 	const view = meta.views[model.name];
-	const singular = view?.names?.singular ?? humanize(model.name);
 	const title = recordTitle(model, view, stored.record, recordKey);
 	const { state: auth } = useAuth();
 	const linesModel = useMemo(() => findLinesResource(meta.resources, model), [meta.resources, model]);
@@ -153,7 +152,7 @@ const LoadedRecord = ({ model, recordKey, stored }) => {
 	const sidebarFields = layout.flatMap((item) => item.kind === "sidebar" ? item.fields : []);
 	const hasStatus = model.fields.status?.type === "enum";
 	const statusValue = stored.record.status;
-	const status = hasStatus && statusValue !== null && statusValue !== void 0 && statusValue !== "" ? String(statusValue) : void 0;
+	const status = hasStatus && !sidebarFields.includes("status") && statusValue !== null && statusValue !== void 0 && statusValue !== "" ? String(statusValue) : void 0;
 	const updatedAt = auditField(model, "updated");
 	const hint = (name) => view?.fields[name];
 	const visible = (name) => fieldAccess(stored.permissions, name) !== "hidden";
@@ -264,29 +263,23 @@ const LoadedRecord = ({ model, recordKey, stored }) => {
 		snapshot: stored.record
 	}) : void 0;
 	const formControls = shown === "form" && /* @__PURE__ */ jsxs(Fragment$1, { children: [
-		editor.dirty && /* @__PURE__ */ jsx("span", {
-			className: "text-xs text-muted-foreground",
-			children: "Unsaved changes"
-		}),
-		editor.dirty && !leavesForm && /* @__PURE__ */ jsx(Button, {
-			className: "max-md:min-h-11",
-			disabled: editor.saving,
-			onClick: editor.discard,
-			children: "Discard"
-		}),
-		leavesForm && /* @__PURE__ */ jsx(AppLink, {
-			to: readAddress,
-			className: cn(buttonClass(), "max-md:min-h-11"),
-			onClick: (event) => inApp(event) && editor.discard(),
-			children: "Cancel"
-		}),
 		/* @__PURE__ */ jsxs(Button, {
 			variant: "primary",
-			className: "max-md:min-h-11 max-md:flex-1",
+			className: "max-md:min-h-11 max-md:flex-1 md:w-full",
 			loading: editor.saving,
 			disabled: !editor.dirty && editor.phase !== "saved",
 			onClick: () => void save(),
 			children: [editor.phase === "saved" && /* @__PURE__ */ jsx(Check, { className: "size-4" }), editor.phase === "saved" ? "Saved" : "Save"]
+		}),
+		leavesForm && /* @__PURE__ */ jsx(AppLink, {
+			to: readAddress,
+			className: cn(buttonClass(), "max-md:min-h-11 md:w-full"),
+			onClick: (event) => inApp(event) && editor.discard(),
+			children: "Cancel"
+		}),
+		editor.dirty && /* @__PURE__ */ jsx("span", {
+			className: "text-xs text-muted-foreground max-md:order-first",
+			children: "Unsaved changes"
 		})
 	] });
 	return /* @__PURE__ */ jsxs("div", {
@@ -300,17 +293,11 @@ const LoadedRecord = ({ model, recordKey, stored }) => {
 					children: [
 						/* @__PURE__ */ jsx(RecordHeader, {
 							title,
+							titleHidden: true,
 							status: status ? {
 								label: enumLabel(status, hint("status")?.valueLabels),
 								tone: toneFor(status)
-							} : hasStatus ? void 0 : {
-								label: singular,
-								tone: "neutral"
-							},
-							actions: /* @__PURE__ */ jsx("div", {
-								className: "hidden items-center gap-4 md:flex",
-								children: formControls
-							})
+							} : void 0
 						}),
 						editor.message && /* @__PURE__ */ jsx("div", {
 							className: "mt-4",
@@ -323,7 +310,7 @@ const LoadedRecord = ({ model, recordKey, stored }) => {
 							className: "mt-4",
 							children: /* @__PURE__ */ jsx(ErrorBanner, {
 								title: "The lines were changed by someone else",
-								error: /* @__PURE__ */ new Error("The lines were reloaded. Your new order is kept: Save again to apply it, or Discard to drop it.")
+								error: /* @__PURE__ */ new Error("The lines were reloaded. Your new order is kept: Save again to apply it.")
 							})
 						}),
 						shown !== "form" && offersEdit && editor.dirty && /* @__PURE__ */ jsxs("div", {
@@ -361,7 +348,7 @@ const LoadedRecord = ({ model, recordKey, stored }) => {
 						/* @__PURE__ */ jsxs("div", {
 							className: "grid grid-cols-1 gap-8 md:grid-cols-[minmax(0,1fr)_300px] md:gap-12",
 							children: [/* @__PURE__ */ jsxs("main", {
-								className: "divide-y divide-border",
+								className: cn("divide-y divide-border", !status && "*:first:pt-0!"),
 								children: [layout.flatMap((item, index) => {
 									if (item.kind === "related") return [/* @__PURE__ */ jsx(RelatedSection, {
 										item,
@@ -406,8 +393,12 @@ const LoadedRecord = ({ model, recordKey, stored }) => {
 									locked: shown !== "form"
 								})]
 							}), /* @__PURE__ */ jsxs("aside", {
-								className: "space-y-4 md:pt-8",
+								className: cn("space-y-4", status && "md:pt-8"),
 								children: [
+									formControls && /* @__PURE__ */ jsx("div", {
+										className: "hidden flex-col items-center gap-2 md:flex",
+										children: formControls
+									}),
 									/* @__PURE__ */ jsx(RecordActions, {
 										model,
 										stored,

package/dist/package.js

@@ -1,5 +1,5 @@
 //#region package.json
-var version = "0.19.11";
+var version = "0.19.12";
 var protobase = { "pluginApi": 1 };
 //#endregion
 export { protobase, version };

package/dist/record-view/record-header.js

@@ -2,49 +2,55 @@ import { AvatarStack } from "../primitives/avatar.js";
 import { Badge } from "../primitives/badge.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/record-view/record-header.tsx
-const RecordHeader = ({ collection, title, status, lastEditedBy, presence = [], actions }) => /* @__PURE__ */ jsxs("header", {
-	className: "flex flex-col gap-4 border-b border-border pb-6 md:flex-row md:items-end md:justify-between md:gap-6",
-	children: [/* @__PURE__ */ jsxs("div", { children: [
-		collection && /* @__PURE__ */ jsx("p", {
-			className: "mb-1 text-xs text-muted-foreground",
-			children: collection
-		}),
-		/* @__PURE__ */ jsxs("div", {
-			className: "flex flex-wrap items-center gap-x-3 gap-y-1",
-			children: [/* @__PURE__ */ jsx("h1", {
-				className: "text-xl font-semibold tracking-tight text-foreground md:text-2xl",
-				children: title
-			}), status && /* @__PURE__ */ jsx(Badge, {
-				tone: status.tone,
-				children: status.label
-			})]
-		}),
-		lastEditedBy && /* @__PURE__ */ jsx("p", {
-			className: "mt-1.5 text-xs text-muted-foreground",
-			children: lastEditedBy.name ? /* @__PURE__ */ jsxs(Fragment, { children: [
-				"Last edited by ",
-				/* @__PURE__ */ jsx("span", {
-					className: "font-medium text-foreground",
-					children: lastEditedBy.name
-				}),
-				" ",
-				lastEditedBy.ago
-			] }) : /* @__PURE__ */ jsxs(Fragment, { children: ["Last updated ", lastEditedBy.ago] })
-		})
-	] }), /* @__PURE__ */ jsxs("div", {
-		className: "flex items-center gap-4",
-		children: [presence.length > 0 && /* @__PURE__ */ jsxs("span", {
-			className: "flex items-center gap-2 text-xs text-muted-foreground",
-			children: [
-				/* @__PURE__ */ jsx(AvatarStack, {
-					people: presence,
-					size: "md"
-				}),
-				presence.length,
-				" viewing"
-			]
-		}), actions]
-	})]
-});
+const RecordHeader = ({ collection, title, titleHidden, status, lastEditedBy, presence = [], actions }) => {
+	if (titleHidden && !collection && !status && !lastEditedBy && presence.length === 0 && !actions) return /* @__PURE__ */ jsx("h1", {
+		className: "sr-only",
+		children: title
+	});
+	return /* @__PURE__ */ jsxs("header", {
+		className: "flex flex-col gap-4 border-b border-border pb-6 md:flex-row md:items-end md:justify-between md:gap-6",
+		children: [/* @__PURE__ */ jsxs("div", { children: [
+			collection && /* @__PURE__ */ jsx("p", {
+				className: "mb-1 text-xs text-muted-foreground",
+				children: collection
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex flex-wrap items-center gap-x-3 gap-y-1",
+				children: [/* @__PURE__ */ jsx("h1", {
+					className: titleHidden ? "sr-only" : "text-xl font-semibold tracking-tight text-foreground md:text-2xl",
+					children: title
+				}), status && /* @__PURE__ */ jsx(Badge, {
+					tone: status.tone,
+					children: status.label
+				})]
+			}),
+			lastEditedBy && /* @__PURE__ */ jsx("p", {
+				className: "mt-1.5 text-xs text-muted-foreground",
+				children: lastEditedBy.name ? /* @__PURE__ */ jsxs(Fragment, { children: [
+					"Last edited by ",
+					/* @__PURE__ */ jsx("span", {
+						className: "font-medium text-foreground",
+						children: lastEditedBy.name
+					}),
+					" ",
+					lastEditedBy.ago
+				] }) : /* @__PURE__ */ jsxs(Fragment, { children: ["Last updated ", lastEditedBy.ago] })
+			})
+		] }), /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-4",
+			children: [presence.length > 0 && /* @__PURE__ */ jsxs("span", {
+				className: "flex items-center gap-2 text-xs text-muted-foreground",
+				children: [
+					/* @__PURE__ */ jsx(AvatarStack, {
+						people: presence,
+						size: "md"
+					}),
+					presence.length,
+					" viewing"
+				]
+			}), actions]
+		})]
+	});
+};
 //#endregion
 export { RecordHeader };