@protobase/ui 0.19.10 → 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/app/runtime/runtime-status.js

@@ -1,25 +1,49 @@
-import { formatDateTime } from "../../format/date.js";
+import { formatAgo, formatDateTime } from "../../format/date.js";
 import { isApiError } from "@protobase/client";
 //#region src/app/runtime/runtime-status.ts
 /** The top bar shows the update button only when there is an update and the endpoint wants it shown. */
 const showsUpdateButton = (status) => Boolean(status?.updateAvailable && status.indicator);
+/** How often the status is read again: rarely, and every few seconds while an update runs so its progress shows. */
+const refreshMs = (updating) => updating ? 5e3 : 18e5;
 const policyLabels = {
 	immediate: "Updates as soon as a release is out",
 	weekly: "Updates at a set time every week",
 	scheduled: "Updates at the time set for this release",
 	manual: "Updates only when asked to"
 };
-/** When the latest version will be applied on its own, in words. */
-const nextUpdateText = (status) => {
-	if (status.updating) return "Updating now";
+const stageLabels = {
+	job: "Preparing the update",
+	build: "Building"
+};
+const runningText = (status, now) => {
+	if (!status.updateStage) return "Updating now";
+	const label = stageLabels[status.updateStage];
+	if (!status.updateStartedAt) return label;
+	const seconds = Math.max(0, Math.floor((now - Date.parse(status.updateStartedAt)) / 1e3));
+	return `${label}, started ${formatAgo(seconds)}`;
+};
+/** How far the running update is, or when the latest version will be applied on its own, in words; `now` in ms. */
+const nextUpdateText = (status, now = Date.now()) => {
+	if (status.updating) return runningText(status, now);
 	if (status.nextUpdateAt) return `${policyLabels[status.policy]}: next on ${formatDateTime(Date.parse(status.nextUpdateAt))} UTC`;
 	return policyLabels[status.policy];
 };
-/** Why "Update now" failed, in words. */
+/** How the last update ended, in words, with the endpoint's message for the owner when it has one. */
+const lastUpdateText = (last) => {
+	const when = `${formatDateTime(Date.parse(last.finishedAt))} UTC`;
+	const headline = {
+		succeeded: `Updated to ${last.toVersion} on ${when}`,
+		unchanged: `The update to ${last.toVersion} on ${when} changed nothing`,
+		failed: `The update to ${last.toVersion} failed on ${when}`
+	}[last.outcome];
+	return last.message ? `${headline}: ${last.message}` : `${headline}.`;
+};
+/** Why "Update now" failed, in words: the endpoint's own message for a refusal, when it sends one. */
 const updateErrorText = (error) => {
+	if (isApiError(error) && error.status < 500 && error.problem.detail) return error.problem.detail;
 	if (isApiError(error) && error.status === 409) return "Already on the latest version, or an update is running.";
 	if (isApiError(error) && error.status === 403) return "Only an admin can update the runtime.";
 	return "The update could not be started. Try again later.";
 };
 //#endregion
-export { nextUpdateText, showsUpdateButton, updateErrorText };
+export { lastUpdateText, nextUpdateText, refreshMs, showsUpdateButton, updateErrorText };

package/dist/app/runtime/runtime-update-dialog.js

@@ -0,0 +1,66 @@
+import { Spinner } from "../../primitives/spinner.js";
+import { Button } from "../../primitives/button.js";
+import { Dialog } from "../../primitives/dialog.js";
+import { lastUpdateText, nextUpdateText, updateErrorText } from "./runtime-status.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/app/runtime/runtime-update-dialog.tsx
+const Row = ({ label, value }) => /* @__PURE__ */ jsxs("div", {
+	className: "flex justify-between gap-4 py-1",
+	children: [/* @__PURE__ */ jsx("span", {
+		className: "text-muted-foreground",
+		children: label
+	}), /* @__PURE__ */ jsx("span", {
+		className: "font-medium tabular-nums",
+		children: value
+	})]
+});
+/**
+* The runtime update dialog: the versions, how far a running update is or when the policy applies the latest one, how
+* the last update ended (while none runs), and "Update now".
+*/
+const RuntimeUpdateDialog = ({ status, requesting, error, checkError, onUpdate, onClose }) => {
+	const last = status.updating ? void 0 : status.lastUpdate;
+	return /* @__PURE__ */ jsxs(Dialog, {
+		title: "Runtime update",
+		description: status.updating ? /* @__PURE__ */ jsxs("span", {
+			className: "inline-flex items-center gap-1.5",
+			children: [/* @__PURE__ */ jsx(Spinner, { className: "size-3.5" }), nextUpdateText(status)]
+		}) : nextUpdateText(status),
+		onClose,
+		actions: /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Button, {
+			onClick: onClose,
+			children: "Close"
+		}), /* @__PURE__ */ jsx(Button, {
+			variant: "primary",
+			loading: requesting,
+			disabled: status.updating || !status.updateAvailable,
+			onClick: onUpdate,
+			children: status.updating ? "Updating…" : "Update now"
+		})] }),
+		children: [
+			/* @__PURE__ */ jsx(Row, {
+				label: "Current version",
+				value: status.version
+			}),
+			/* @__PURE__ */ jsx(Row, {
+				label: "Latest version",
+				value: status.latest
+			}),
+			last && /* @__PURE__ */ jsx("p", {
+				className: last.outcome === "failed" ? "mt-3 text-danger-text" : "mt-3 text-muted-foreground",
+				children: lastUpdateText(last)
+			}),
+			error !== void 0 && /* @__PURE__ */ jsx("p", {
+				role: "alert",
+				className: "mt-3 text-danger-text",
+				children: updateErrorText(error)
+			}),
+			checkError !== void 0 && /* @__PURE__ */ jsx("p", {
+				className: "mt-3 text-muted-foreground",
+				children: "The status could not be checked again; this is the last one read."
+			})
+		]
+	});
+};
+//#endregion
+export { RuntimeUpdateDialog };

package/dist/app/runtime/runtime-update.js

@@ -1,24 +1,14 @@
 import { Button } from "../../primitives/button.js";
-import { Dialog } from "../../primitives/dialog.js";
-import { nextUpdateText, showsUpdateButton, updateErrorText } from "./runtime-status.js";
+import { showsUpdateButton } from "./runtime-status.js";
+import { RuntimeUpdateDialog } from "./runtime-update-dialog.js";
 import { useRuntimeClient, useRuntimeStatus } from "./use-runtime-status.js";
 import { useState } from "react";
 import { ArrowUpCircle } from "lucide-react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/app/runtime/runtime-update.tsx
-const Row = ({ label, value }) => /* @__PURE__ */ jsxs("div", {
-	className: "flex justify-between gap-4 py-1",
-	children: [/* @__PURE__ */ jsx("span", {
-		className: "text-muted-foreground",
-		children: label
-	}), /* @__PURE__ */ jsx("span", {
-		className: "font-medium tabular-nums",
-		children: value
-	})]
-});
 /**
 * The top bar's runtime update button, shown while the endpoint reports an update and wants it shown, and the dialog
-* it opens: the versions, when the update policy applies the latest one, and "Update now". Below `md` only the icon shows.
+* it opens. On mobile only the icon shows.
 */
 const RuntimeUpdate = ({ client }) => {
 	const { status, update, requesting, error, checkError } = useRuntimeStatus(client);
@@ -35,39 +25,13 @@ const RuntimeUpdate = ({ client }) => {
 			className: "max-md:sr-only",
 			children: "Update"
 		})]
-	}), open && /* @__PURE__ */ jsxs(Dialog, {
-		title: "Runtime update",
-		description: nextUpdateText(status),
-		onClose: () => setOpen(false),
-		actions: /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Button, {
-			onClick: () => setOpen(false),
-			children: "Close"
-		}), /* @__PURE__ */ jsx(Button, {
-			variant: "primary",
-			loading: requesting,
-			disabled: status.updating || !status.updateAvailable,
-			onClick: () => void update(),
-			children: status.updating ? "Updating…" : "Update now"
-		})] }),
-		children: [
-			/* @__PURE__ */ jsx(Row, {
-				label: "Current version",
-				value: status.version
-			}),
-			/* @__PURE__ */ jsx(Row, {
-				label: "Latest version",
-				value: status.latest
-			}),
-			error !== void 0 && /* @__PURE__ */ jsx("p", {
-				role: "alert",
-				className: "mt-3 text-danger-text",
-				children: updateErrorText(error)
-			}),
-			checkError !== void 0 && /* @__PURE__ */ jsx("p", {
-				className: "mt-3 text-muted-foreground",
-				children: "The status could not be checked again; this is the last one read."
-			})
-		]
+	}), open && /* @__PURE__ */ jsx(RuntimeUpdateDialog, {
+		status,
+		requesting,
+		error,
+		checkError,
+		onUpdate: () => void update(),
+		onClose: () => setOpen(false)
 	})] });
 };
 const OwnRuntimeUpdate = ({ url }) => /* @__PURE__ */ jsx(RuntimeUpdate, { client: useRuntimeClient(url) });

package/dist/app/runtime/use-runtime-status.js

@@ -1,10 +1,8 @@
 import { useApiToken } from "../../auth/use-api-token.js";
+import { refreshMs } from "./runtime-status.js";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { createRuntimeClient } from "@protobase/client";
 //#region src/app/runtime/use-runtime-status.ts
-/** How often the status is read again: rarely, and more often while an update runs so the button goes away when it is done. */
-const refreshMs = 18e5;
-const updatingRefreshMs = 3e4;
 /** A client of the runtime endpoint at `url`, authenticated as the signed-in user; `undefined` until their token is there. */
 const useRuntimeClient = (url) => {
 	const token = useApiToken();
@@ -17,7 +15,7 @@ const useRuntimeClient = (url) => {
 	}) : void 0, [url, ready]);
 };
 /**
-* The runtime's status, read on load and every half hour after, and `update` to apply the latest version now.
+* The runtime's status, read on load and every half hour after (every few seconds while an update runs), and `update` to apply the latest version now.
 * `status` keeps the last answer when a later read fails, which `checkError` then holds; `error` is why "Update now" failed.
 */
 const useRuntimeStatus = (client) => {
@@ -35,7 +33,7 @@ const useRuntimeStatus = (client) => {
 			setCheckError(void 0);
 		}, (reason) => active && setCheckError(reason));
 		read();
-		const timer = setInterval(() => void read(), updating ? updatingRefreshMs : refreshMs);
+		const timer = setInterval(() => void read(), refreshMs(updating));
 		return () => {
 			active = false;
 			clearInterval(timer);

package/dist/format/date.js

@@ -19,6 +19,12 @@ const time = new Intl.DateTimeFormat("en-GB", {
 const formatDate = (ms) => day.format(ms);
 const formatDayShort = (ms) => dayShort.format(ms);
 const formatDateTime = (ms) => `${day.format(ms)}, ${time.format(ms)}`;
+const formatAgo = (seconds) => {
+	if (seconds < 60) return `${seconds} s ago`;
+	if (seconds < 3600) return `${Math.floor(seconds / 60)} min ago`;
+	if (seconds < 86400) return `${Math.floor(seconds / 3600)} h ago`;
+	return `${Math.floor(seconds / 86400)} d ago`;
+};
 new Intl.RelativeTimeFormat("en", { numeric: "auto" });
 //#endregion
-export { formatDate, formatDateTime, formatDayShort };
+export { formatAgo, formatDate, formatDateTime, formatDayShort };

package/dist/package.js

@@ -1,5 +1,5 @@
 //#region package.json
-var version = "0.19.10";
+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 };