camox 0.54.0 → 0.57.0

package/dist/features/studio/components/Patrol.js

@@ -0,0 +1,676 @@
+import { AuthContext } from "../../../lib/auth.js";
+import { localizedPath } from "../../../lib/locale-path.js";
+import { useCurrentDraftId } from "../../../lib/draft-scope.js";
+import { useViewLocale } from "../../../lib/view-locale-context.js";
+import { useNavigate } from "../../navigation/navigation.js";
+import { reads, useReadQuery } from "../../../lib/studio-reads.js";
+import { cn } from "../../../lib/utils.js";
+import { AssetLightbox } from "../../preview/components/AssetLightbox.js";
+import { BOTTOM_CARD_EDGES, CARD_BODY_EDGES } from "../../preview/components/SidebarStack.js";
+import { editCollectionItemPath } from "../routes.js";
+import { timeAgo } from "../draftLabel.js";
+import { useShowInCanvas } from "../showInCanvas.js";
+import { Squareling } from "./Squareling.js";
+import { moreSentence, reportSentence, shortTimeAgo, whereReportLeads } from "../reportSentence.js";
+import { singleLocaleSentence, workingSentence } from "../workingSentence.js";
+import { c } from "react/compiler-runtime";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Badge } from "@camox/ui/badge";
+import { reportLocale } from "@camox/api-contract/patrol";
+
+//#region src/features/studio/components/Patrol.tsx
+/**
+* The Agent Sidebar's Patrol, over the Chat widget: every patroller of the project, and what each
+* did without being asked in the draft viewed, or on Live (ADR 0024). It fetches the Patrol of the
+* scope viewed, and holds which patrollers are expanded.
+*/
+function Patrol(t0) {
+	const $ = c(14);
+	const { className } = t0;
+	const { projectUuid } = React.useContext(AuthContext);
+	let t1;
+	if ($[0] !== projectUuid) {
+		t1 = reads.project({ projectUuid });
+		$[0] = projectUuid;
+		$[1] = t1;
+	} else t1 = $[1];
+	const { data: project } = useReadQuery(t1);
+	const draftId = useCurrentDraftId();
+	let t2;
+	if ($[2] !== className) {
+		t2 = cn("flex flex-col", className);
+		$[2] = className;
+		$[3] = t2;
+	} else t2 = $[3];
+	let t3;
+	let t4;
+	if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+		t3 = /* @__PURE__ */ jsx("header", {
+			className: cn("bg-background flex h-11 min-w-0 shrink-0 items-center justify-center px-3", BOTTOM_CARD_EDGES),
+			children: /* @__PURE__ */ jsx("h2", {
+				className: "truncate text-sm font-medium",
+				children: "Patrol"
+			})
+		});
+		t4 = cn("bg-background min-h-0 flex-1 overflow-y-auto", CARD_BODY_EDGES);
+		$[4] = t3;
+		$[5] = t4;
+	} else {
+		t3 = $[4];
+		t4 = $[5];
+	}
+	let t5;
+	if ($[6] !== draftId || $[7] !== project) {
+		t5 = project && /* @__PURE__ */ jsx(ProjectPatrol, {
+			projectId: project.id,
+			inDraft: draftId !== null
+		});
+		$[6] = draftId;
+		$[7] = project;
+		$[8] = t5;
+	} else t5 = $[8];
+	let t6;
+	if ($[9] !== t5) {
+		t6 = /* @__PURE__ */ jsx("div", {
+			className: t4,
+			children: t5
+		});
+		$[9] = t5;
+		$[10] = t6;
+	} else t6 = $[10];
+	let t7;
+	if ($[11] !== t2 || $[12] !== t6) {
+		t7 = /* @__PURE__ */ jsxs("section", {
+			"aria-label": "Patrol",
+			"data-patrol": true,
+			className: t2,
+			children: [t3, t6]
+		});
+		$[11] = t2;
+		$[12] = t6;
+		$[13] = t7;
+	} else t7 = $[13];
+	return t7;
+}
+function ProjectPatrol(t0) {
+	const $ = c(28);
+	const { projectId, inDraft } = t0;
+	let t1;
+	if ($[0] !== projectId) {
+		t1 = reads.patrol({ projectId });
+		$[0] = projectId;
+		$[1] = t1;
+	} else t1 = $[1];
+	const { data: view } = useReadQuery(t1);
+	let t2;
+	if ($[2] !== projectId) {
+		t2 = reads.localeList({ projectId });
+		$[2] = projectId;
+		$[3] = t2;
+	} else t2 = $[3];
+	const { data: locales } = useReadQuery(t2);
+	let t3;
+	if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+		t3 = /* @__PURE__ */ new Set();
+		$[4] = t3;
+	} else t3 = $[4];
+	const [expanded, setExpanded] = React.useState(t3);
+	let t4;
+	if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
+		t4 = (id) => setExpanded((previous) => {
+			const next = new Set(previous);
+			if (!next.delete(id)) next.add(id);
+			return next;
+		});
+		$[5] = t4;
+	} else t4 = $[5];
+	const toggle = t4;
+	const now = useNow(3e4);
+	const [heldOrder, setHeldOrder] = React.useState(null);
+	let t5;
+	if ($[6] !== heldOrder || $[7] !== view) {
+		t5 = view && inHeldOrder(view, heldOrder);
+		$[6] = heldOrder;
+		$[7] = view;
+		$[8] = t5;
+	} else t5 = $[8];
+	const shown = t5;
+	let t6;
+	if ($[9] !== shown?.patrollers) {
+		t6 = shown?.patrollers.map(_temp).join(" ");
+		$[9] = shown?.patrollers;
+		$[10] = t6;
+	} else t6 = $[10];
+	const roster = useMovingRows(t6);
+	const [openFileId, setOpenFileId] = React.useState(null);
+	const show = useShowReport(inDraft, setOpenFileId);
+	if (!shown) return null;
+	let t7;
+	if ($[11] !== shown.patrollers) {
+		t7 = () => setHeldOrder(shown.patrollers.map(_temp2));
+		$[11] = shown.patrollers;
+		$[12] = t7;
+	} else t7 = $[12];
+	let t8;
+	if ($[13] === Symbol.for("react.memo_cache_sentinel")) {
+		t8 = () => setHeldOrder(null);
+		$[13] = t8;
+	} else t8 = $[13];
+	const t9 = locales?.length === 1;
+	let t10;
+	if ($[14] !== expanded || $[15] !== inDraft || $[16] !== now || $[17] !== show || $[18] !== shown || $[19] !== t9) {
+		t10 = /* @__PURE__ */ jsx(PatrolRoster, {
+			view: shown,
+			now,
+			inDraft,
+			singleLocale: t9,
+			expanded,
+			onToggle: toggle,
+			onShow: show
+		});
+		$[14] = expanded;
+		$[15] = inDraft;
+		$[16] = now;
+		$[17] = show;
+		$[18] = shown;
+		$[19] = t9;
+		$[20] = t10;
+	} else t10 = $[20];
+	let t11;
+	if ($[21] !== openFileId) {
+		t11 = openFileId && /* @__PURE__ */ jsx(AssetLightbox, {
+			open: true,
+			onOpenChange: (open) => {
+				if (!open) setOpenFileId(null);
+			},
+			fileId: openFileId
+		});
+		$[21] = openFileId;
+		$[22] = t11;
+	} else t11 = $[22];
+	let t12;
+	if ($[23] !== roster || $[24] !== t10 || $[25] !== t11 || $[26] !== t7) {
+		t12 = /* @__PURE__ */ jsxs("div", {
+			ref: roster,
+			className: "relative",
+			onPointerEnter: t7,
+			onPointerLeave: t8,
+			children: [t10, t11]
+		});
+		$[23] = roster;
+		$[24] = t10;
+		$[25] = t11;
+		$[26] = t7;
+		$[27] = t12;
+	} else t12 = $[27];
+	return t12;
+}
+function _temp2(t0) {
+	const { id: id_1 } = t0;
+	return id_1;
+}
+function _temp(t0) {
+	const { id: id_0 } = t0;
+	return id_0;
+}
+/**
+* Shows a report's subject where it is, in the report's locale, and on Live for a Live report seen
+* from a draft: a page, block or item selected on the Canvas, a record in its collection, or a
+* file, opened over the Canvas.
+*/
+function useShowReport(inDraft, openFile) {
+	const $ = c(6);
+	const showInCanvas = useShowInCanvas();
+	const navigate = useNavigate();
+	const view = useViewLocale();
+	let t0;
+	if ($[0] !== inDraft || $[1] !== navigate || $[2] !== openFile || $[3] !== showInCanvas || $[4] !== view) {
+		t0 = (report) => {
+			const { place } = report;
+			if (!place) return;
+			const toLive = inDraft && report.live ? { draft: null } : {};
+			const tag = reportLocale(report.summary);
+			if (place.kind === "page") {
+				const { pageId, blockId, itemId } = place;
+				showInCanvas({
+					pageId,
+					locale: tag,
+					blockId,
+					itemId,
+					...toLive
+				});
+				return;
+			}
+			if (place.kind === "record") {
+				const locale = view.locales.find((each) => each.tag === tag) ?? view.locale;
+				const path = editCollectionItemPath(place.collectionId, place.recordId);
+				navigate({
+					to: localizedPath(path, locale),
+					...toLive
+				});
+				return;
+			}
+			if (inDraft && report.live) navigate({
+				to: window.location.href,
+				draft: null
+			});
+			openFile(place.fileId);
+		};
+		$[0] = inDraft;
+		$[1] = navigate;
+		$[2] = openFile;
+		$[3] = showInCanvas;
+		$[4] = view;
+		$[5] = t0;
+	} else t0 = $[5];
+	return t0;
+}
+/**
+* The view with its patrollers in the order held, if any, and its latest content: patrollers the
+* order doesn't hold follow, in the view's order, and those no longer in the view are dropped.
+*/
+function inHeldOrder(view, order) {
+	if (!order) return view;
+	const place = (id) => {
+		const index = order.indexOf(id);
+		return index === -1 ? order.length : index;
+	};
+	return {
+		...view,
+		patrollers: [...view.patrollers].sort((a, b) => place(a.id) - place(b.id))
+	};
+}
+/** How long a patroller takes to move to its new place, in ms. */
+const MOVE_DURATION = 250;
+/** A strong ease-out: the move starts at once and settles gently. */
+const MOVE_EASING = "cubic-bezier(0.23, 1, 0.32, 1)";
+/**
+* Moves each patroller from where it showed to its new place when the order (a key of their ids)
+* changes, rather than jumping there. Without motion for editors who reduce it.
+*/
+function useMovingRows(order) {
+	const $ = c(2);
+	const node = React.useRef(null);
+	const last = React.useRef(null);
+	let t0;
+	if ($[0] !== order) {
+		t0 = () => {
+			const roster = node.current;
+			if (!roster) return;
+			const rows = [...roster.querySelectorAll("[data-patroller]")];
+			const tops = new Map(rows.map(_temp3));
+			const previous = last.current;
+			last.current = {
+				order,
+				tops
+			};
+			if (!previous || previous.order === order) return;
+			if (matchMedia("(prefers-reduced-motion: reduce)").matches) return;
+			for (const row_0 of rows) {
+				const from = previous.tops.get(row_0.dataset.patroller);
+				const to = tops.get(row_0.dataset.patroller);
+				if (from === void 0 || from === to) continue;
+				row_0.animate([{ transform: `translateY(${from - to}px)` }, { transform: "none" }], {
+					duration: MOVE_DURATION,
+					easing: MOVE_EASING
+				});
+			}
+		};
+		$[0] = order;
+		$[1] = t0;
+	} else t0 = $[1];
+	React.useLayoutEffect(t0);
+	return node;
+}
+function _temp3(row) {
+	return [row.dataset.patroller, row.offsetTop];
+}
+/** The time now, updated every `intervalMs`. */
+function useNow(intervalMs) {
+	const $ = c(3);
+	const [now, setNow] = React.useState(_temp4);
+	let t0;
+	let t1;
+	if ($[0] !== intervalMs) {
+		t0 = () => {
+			const interval = setInterval(() => setNow(Date.now()), intervalMs);
+			return () => clearInterval(interval);
+		};
+		t1 = [intervalMs];
+		$[0] = intervalMs;
+		$[1] = t0;
+		$[2] = t1;
+	} else {
+		t0 = $[1];
+		t1 = $[2];
+	}
+	React.useEffect(t0, t1);
+	return now;
+}
+function _temp4() {
+	return Date.now();
+}
+/**
+* A `PatrolView`, in the order it gives: each patroller's avatar, role, and when it last worked,
+* and the reports of the expanded ones. Live's reports carry a tag when a draft is viewed. In a
+* project with a single locale, the Translator invites the editor to add a language instead.
+*/
+function PatrolRoster(t0) {
+	const $ = c(17);
+	const { view, now, inDraft, singleLocale, expanded, onToggle, onShow } = t0;
+	let t1;
+	if ($[0] !== expanded || $[1] !== inDraft || $[2] !== now || $[3] !== onShow || $[4] !== onToggle || $[5] !== singleLocale || $[6] !== view.patrollers) {
+		let t2;
+		if ($[8] !== expanded || $[9] !== inDraft || $[10] !== now || $[11] !== onShow || $[12] !== onToggle || $[13] !== singleLocale) {
+			t2 = (patroller) => /* @__PURE__ */ jsx(PatrollerRow, {
+				patroller,
+				now,
+				inDraft,
+				idle: singleLocale ? singleLocaleSentence(patroller.id) : void 0,
+				expanded: expanded.has(patroller.id),
+				onToggle: () => onToggle(patroller.id),
+				onShow
+			}, patroller.id);
+			$[8] = expanded;
+			$[9] = inDraft;
+			$[10] = now;
+			$[11] = onShow;
+			$[12] = onToggle;
+			$[13] = singleLocale;
+			$[14] = t2;
+		} else t2 = $[14];
+		t1 = view.patrollers.map(t2);
+		$[0] = expanded;
+		$[1] = inDraft;
+		$[2] = now;
+		$[3] = onShow;
+		$[4] = onToggle;
+		$[5] = singleLocale;
+		$[6] = view.patrollers;
+		$[7] = t1;
+	} else t1 = $[7];
+	let t2;
+	if ($[15] !== t1) {
+		t2 = /* @__PURE__ */ jsx("ul", {
+			className: "flex flex-col py-1",
+			children: t1
+		});
+		$[15] = t1;
+		$[16] = t2;
+	} else t2 = $[16];
+	return t2;
+}
+/**
+* A thin, low-contrast arc travelling around a working patroller's avatar circle, or the whole
+* circle pulsing slowly under reduced motion. The motion lives in `studio.css`.
+*/
+function WorkingArc() {
+	const $ = c(1);
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = /* @__PURE__ */ jsx("svg", {
+			"data-working-indicator": true,
+			"aria-hidden": true,
+			viewBox: "0 0 32 32",
+			className: "patrol-working text-foreground/30 pointer-events-none absolute inset-0 size-full",
+			children: /* @__PURE__ */ jsx("circle", {
+				cx: "16",
+				cy: "16",
+				r: "15.25",
+				pathLength: "100",
+				fill: "none",
+				stroke: "currentColor",
+				strokeWidth: "1.5",
+				strokeLinecap: "round",
+				className: "patrol-working-arc"
+			})
+		});
+		$[0] = t0;
+	} else t0 = $[0];
+	return t0;
+}
+function PatrollerRow(t0) {
+	const $ = c(49);
+	const { patroller, now, inDraft, idle, expanded, onToggle, onShow } = t0;
+	const reportsId = React.useId();
+	const statusId = React.useId();
+	let t1;
+	if ($[0] !== patroller.id || $[1] !== patroller.working) {
+		t1 = patroller.working && workingSentence(patroller.id, patroller.working);
+		$[0] = patroller.id;
+		$[1] = patroller.working;
+		$[2] = t1;
+	} else t1 = $[2];
+	const working = t1;
+	let t2;
+	if ($[3] !== idle || $[4] !== now || $[5] !== patroller.lastActivityAt || $[6] !== working) {
+		t2 = working ?? idle ?? (patroller.lastActivityAt === null ? "" : timeAgo(patroller.lastActivityAt, now));
+		$[3] = idle;
+		$[4] = now;
+		$[5] = patroller.lastActivityAt;
+		$[6] = working;
+		$[7] = t2;
+	} else t2 = $[7];
+	const subtitle = t2;
+	const t3 = working ? statusId : void 0;
+	const t4 = working ? "working" : "idle";
+	let t5;
+	if ($[8] !== patroller.id || $[9] !== t4) {
+		t5 = /* @__PURE__ */ jsx(Squareling, {
+			variant: patroller.id,
+			status: t4,
+			className: "size-5"
+		});
+		$[8] = patroller.id;
+		$[9] = t4;
+		$[10] = t5;
+	} else t5 = $[10];
+	let t6;
+	if ($[11] !== working) {
+		t6 = working && /* @__PURE__ */ jsx(WorkingArc, {});
+		$[11] = working;
+		$[12] = t6;
+	} else t6 = $[12];
+	let t7;
+	if ($[13] !== t5 || $[14] !== t6) {
+		t7 = /* @__PURE__ */ jsxs("span", {
+			className: "bg-muted relative flex size-8 shrink-0 items-center justify-center rounded-full",
+			children: [t5, t6]
+		});
+		$[13] = t5;
+		$[14] = t6;
+		$[15] = t7;
+	} else t7 = $[15];
+	let t8;
+	if ($[16] !== patroller.role) {
+		t8 = /* @__PURE__ */ jsx("span", {
+			"data-patroller-role": true,
+			className: "truncate text-sm font-medium",
+			children: patroller.role
+		});
+		$[16] = patroller.role;
+		$[17] = t8;
+	} else t8 = $[17];
+	const t9 = working ? true : void 0;
+	let t10;
+	if ($[18] !== subtitle || $[19] !== t9) {
+		t10 = /* @__PURE__ */ jsx("span", {
+			"data-patroller-subtitle": true,
+			"aria-hidden": t9,
+			className: "text-muted-foreground truncate text-xs",
+			children: subtitle
+		});
+		$[18] = subtitle;
+		$[19] = t9;
+		$[20] = t10;
+	} else t10 = $[20];
+	let t11;
+	if ($[21] !== t10 || $[22] !== t8) {
+		t11 = /* @__PURE__ */ jsxs("span", {
+			className: "flex min-w-0 flex-col",
+			children: [t8, t10]
+		});
+		$[21] = t10;
+		$[22] = t8;
+		$[23] = t11;
+	} else t11 = $[23];
+	let t12;
+	if ($[24] !== expanded || $[25] !== onToggle || $[26] !== reportsId || $[27] !== t11 || $[28] !== t3 || $[29] !== t7) {
+		t12 = /* @__PURE__ */ jsxs("button", {
+			type: "button",
+			"aria-expanded": expanded,
+			"aria-controls": reportsId,
+			"aria-describedby": t3,
+			onClick: onToggle,
+			className: "hover:bg-muted/60 focus-visible:ring-ring/50 flex items-center gap-2.5 px-3 py-1.5 text-left outline-none focus-visible:ring-[3px]",
+			children: [t7, t11]
+		});
+		$[24] = expanded;
+		$[25] = onToggle;
+		$[26] = reportsId;
+		$[27] = t11;
+		$[28] = t3;
+		$[29] = t7;
+		$[30] = t12;
+	} else t12 = $[30];
+	let t13;
+	if ($[31] !== working) {
+		t13 = working && `Working: ${working.charAt(0).toLowerCase()}${working.slice(1)}`;
+		$[31] = working;
+		$[32] = t13;
+	} else t13 = $[32];
+	let t14;
+	if ($[33] !== statusId || $[34] !== t13) {
+		t14 = /* @__PURE__ */ jsx("span", {
+			id: statusId,
+			"data-working-status": true,
+			role: "status",
+			className: "sr-only",
+			children: t13
+		});
+		$[33] = statusId;
+		$[34] = t13;
+		$[35] = t14;
+	} else t14 = $[35];
+	let t15;
+	if ($[36] !== expanded || $[37] !== inDraft || $[38] !== now || $[39] !== onShow || $[40] !== patroller.more || $[41] !== patroller.reports || $[42] !== reportsId) {
+		t15 = expanded && /* @__PURE__ */ jsxs("ul", {
+			id: reportsId,
+			className: "flex flex-col gap-1 pt-0.5 pr-3 pb-2 pl-[3.375rem] text-xs",
+			children: [patroller.reports.map((report) => /* @__PURE__ */ jsxs("li", {
+				"data-report": true,
+				className: "has-focus-visible:ring-ring/50 has-[button:hover]:bg-muted/60 relative -mx-1.5 flex items-baseline gap-2 rounded-sm px-1.5 has-focus-visible:ring-[3px]",
+				children: [
+					/* @__PURE__ */ jsx(ReportSentence, {
+						report,
+						inDraft,
+						onShow
+					}),
+					inDraft && report.live && /* @__PURE__ */ jsx(Badge, {
+						variant: "outline",
+						size: "sm",
+						children: "Live"
+					}),
+					/* @__PURE__ */ jsx("time", {
+						dateTime: new Date(report.at).toISOString(),
+						className: "text-muted-foreground shrink-0",
+						children: shortTimeAgo(report.at, now)
+					})
+				]
+			}, report.id)), patroller.more.length > 0 && /* @__PURE__ */ jsx("li", {
+				"data-more": true,
+				className: "text-muted-foreground",
+				children: moreSentence(patroller.more)
+			})]
+		});
+		$[36] = expanded;
+		$[37] = inDraft;
+		$[38] = now;
+		$[39] = onShow;
+		$[40] = patroller.more;
+		$[41] = patroller.reports;
+		$[42] = reportsId;
+		$[43] = t15;
+	} else t15 = $[43];
+	let t16;
+	if ($[44] !== patroller.id || $[45] !== t12 || $[46] !== t14 || $[47] !== t15) {
+		t16 = /* @__PURE__ */ jsxs("li", {
+			"data-patroller": patroller.id,
+			className: "flex flex-col",
+			children: [
+				t12,
+				t14,
+				t15
+			]
+		});
+		$[44] = patroller.id;
+		$[45] = t12;
+		$[46] = t14;
+		$[47] = t15;
+		$[48] = t16;
+	} else t16 = $[48];
+	return t16;
+}
+/**
+* A report's sentence: a button showing its subject where it is, over the whole row, named for
+* where it leads. A report without a place is plain text.
+*/
+function ReportSentence(t0) {
+	const $ = c(15);
+	const { report, inDraft, onShow } = t0;
+	let t1;
+	if ($[0] !== report.outcome || $[1] !== report.summary) {
+		t1 = reportSentence(report.summary, report.outcome);
+		$[0] = report.outcome;
+		$[1] = report.summary;
+		$[2] = t1;
+	} else t1 = $[2];
+	const sentence = t1;
+	let t2;
+	if ($[3] !== inDraft || $[4] !== report) {
+		t2 = whereReportLeads(report, inDraft);
+		$[3] = inDraft;
+		$[4] = report;
+		$[5] = t2;
+	} else t2 = $[5];
+	const leads = t2;
+	if (leads === null) {
+		let t3;
+		if ($[6] !== sentence) {
+			t3 = /* @__PURE__ */ jsx("span", {
+				className: "min-w-0 flex-1",
+				children: sentence
+			});
+			$[6] = sentence;
+			$[7] = t3;
+		} else t3 = $[7];
+		return t3;
+	}
+	const t3 = `${sentence}: ${leads}`;
+	let t4;
+	if ($[8] !== onShow || $[9] !== report) {
+		t4 = () => onShow(report);
+		$[8] = onShow;
+		$[9] = report;
+		$[10] = t4;
+	} else t4 = $[10];
+	let t5;
+	if ($[11] !== sentence || $[12] !== t3 || $[13] !== t4) {
+		t5 = /* @__PURE__ */ jsx("button", {
+			type: "button",
+			"aria-label": t3,
+			onClick: t4,
+			className: "min-w-0 flex-1 cursor-pointer text-left outline-none after:absolute after:inset-0",
+			children: sentence
+		});
+		$[11] = sentence;
+		$[12] = t3;
+		$[13] = t4;
+		$[14] = t5;
+	} else t5 = $[14];
+	return t5;
+}
+
+//#endregion
+export { Patrol, PatrolRoster, inHeldOrder };