camox 0.44.0 → 0.45.0

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

@@ -0,0 +1,676 @@
+import { actionsStore } from "../../provider/actionsStore.js";
+import { AuthContext } from "../../../lib/auth.js";
+import { useCurrentDraftId, useDraftScope } from "../../../lib/draft-scope.js";
+import { useNavigate } from "../../navigation/navigation.js";
+import { reads, useReadQuery } from "../../../lib/studio-reads.js";
+import { cn } from "../../../lib/utils.js";
+import { studioStore } from "../studioStore.js";
+import { draftLabel, plural, timeAgo } from "../draftLabel.js";
+import { RenameDraftDialog } from "./RenameDraftDialog.js";
+import { DiscardDraftDialog, ReviewDraftSheet, useLeaveDraft } from "./ReviewDraftSheet.js";
+import { c } from "react/compiler-runtime";
+import * as React from "react";
+import { useSelector } from "@xstate/store-react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Button } from "@camox/ui/button";
+import { ChevronsUpDown, Pencil } from "lucide-react";
+import { toast } from "@camox/ui/toaster";
+import { Badge } from "@camox/ui/badge";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuTrigger } from "@camox/ui/dropdown-menu";
+
+//#region src/features/studio/components/DraftsControl.tsx
+const LIVE = "live";
+const SWITCH_TO_DRAFT_ID = "switch-to-draft";
+/** What the drafts controls read: the project, the current draft, and the drafts to switch to. */
+function useDrafts() {
+	const $ = c(20);
+	const draftScope = useDraftScope();
+	const draftId = useCurrentDraftId();
+	const authCtx = React.useContext(AuthContext);
+	const developmentMode = draftScope.developmentMode;
+	let t0;
+	if ($[0] !== authCtx?.projectUuid) {
+		t0 = reads.project({ projectUuid: authCtx?.projectUuid ?? "" });
+		$[0] = authCtx?.projectUuid;
+		$[1] = t0;
+	} else t0 = $[1];
+	const t1 = !!authCtx?.projectUuid;
+	let t2;
+	if ($[2] !== t1) {
+		t2 = { enabled: t1 };
+		$[2] = t1;
+		$[3] = t2;
+	} else t2 = $[3];
+	const projectId = useReadQuery(t0, t2).data?.id;
+	let t3;
+	if ($[4] !== projectId) {
+		t3 = reads.draftList({ projectId: projectId ?? 0 });
+		$[4] = projectId;
+		$[5] = t3;
+	} else t3 = $[5];
+	const t4 = !!projectId && !developmentMode;
+	let t5;
+	if ($[6] !== t4) {
+		t5 = { enabled: t4 };
+		$[6] = t4;
+		$[7] = t5;
+	} else t5 = $[7];
+	const list = useReadQuery(t3, t5);
+	let t6;
+	if ($[8] !== draftId || $[9] !== projectId) {
+		t6 = reads.draft({
+			projectId: projectId ?? 0,
+			draftId: draftId ?? ""
+		});
+		$[8] = draftId;
+		$[9] = projectId;
+		$[10] = t6;
+	} else t6 = $[10];
+	const t7 = !!projectId && !!draftId;
+	let t8;
+	if ($[11] !== t7) {
+		t8 = { enabled: t7 };
+		$[11] = t7;
+		$[12] = t8;
+	} else t8 = $[12];
+	const draft = useReadQuery(t6, t8);
+	const t9 = draftId ? draft.data : void 0;
+	let t10;
+	if ($[13] !== developmentMode || $[14] !== draftId || $[15] !== draftScope || $[16] !== list.data || $[17] !== projectId || $[18] !== t9) {
+		t10 = {
+			draftScope,
+			draftId,
+			developmentMode,
+			projectId,
+			list: list.data,
+			current: t9
+		};
+		$[13] = developmentMode;
+		$[14] = draftId;
+		$[15] = draftScope;
+		$[16] = list.data;
+		$[17] = projectId;
+		$[18] = t9;
+		$[19] = t10;
+	} else t10 = $[19];
+	return t10;
+}
+/**
+* Picks what the studio is viewing, Live or a draft (#203). Live is read-only; the first edit
+* starts a draft. The localhost studio works only in the development draft, so it shows that
+* draft alone, with nothing to switch to (ADR 0006). The command palette offers the same actions,
+* and the picker hosts the draft's review and discard confirmation they open.
+*/
+function DraftPicker() {
+	const $ = c(56);
+	const { draftScope, draftId, developmentMode, projectId, list, current } = useDrafts();
+	const navigate = useNavigate();
+	const leaveDraft = useLeaveDraft();
+	const review = useSelector(studioStore, _temp);
+	const discarding = useSelector(studioStore, _temp2);
+	const [menuOpen, setMenuOpen] = React.useState(false);
+	const [renaming, setRenaming] = React.useState(null);
+	let t0;
+	let t1;
+	if ($[0] !== draftScope) {
+		t0 = () => draftScope.subscribe(_temp3);
+		t1 = [draftScope];
+		$[0] = draftScope;
+		$[1] = t0;
+		$[2] = t1;
+	} else {
+		t0 = $[1];
+		t1 = $[2];
+	}
+	React.useEffect(t0, t1);
+	let t2;
+	if ($[3] !== draftId) {
+		t2 = [draftId];
+		$[3] = draftId;
+		$[4] = t2;
+	} else t2 = $[4];
+	React.useEffect(_temp5, t2);
+	const drafts = list?.drafts;
+	let t3;
+	if ($[5] !== drafts) {
+		t3 = drafts ?? [];
+		$[5] = drafts;
+		$[6] = t3;
+	} else t3 = $[6];
+	let t4;
+	if ($[7] !== t3) {
+		t4 = t3.filter(_temp6);
+		$[7] = t3;
+		$[8] = t4;
+	} else t4 = $[8];
+	const regular = t4;
+	let t5;
+	if ($[9] !== draftId || $[10] !== navigate) {
+		t5 = (next) => {
+			if (next === draftId) return;
+			navigate({
+				to: window.location.href,
+				draft: next
+			});
+		};
+		$[9] = draftId;
+		$[10] = navigate;
+		$[11] = t5;
+	} else t5 = $[11];
+	const switchTo = t5;
+	const t6 = !!projectId;
+	let t7;
+	if ($[12] !== developmentMode || $[13] !== draftId || $[14] !== regular || $[15] !== switchTo || $[16] !== t6) {
+		t7 = {
+			enabled: t6,
+			draftId,
+			developmentMode,
+			regular,
+			switchTo
+		};
+		$[12] = developmentMode;
+		$[13] = draftId;
+		$[14] = regular;
+		$[15] = switchTo;
+		$[16] = t6;
+		$[17] = t7;
+	} else t7 = $[17];
+	useDraftsActions(t7);
+	if (developmentMode && !draftId) return null;
+	if (draftId && !developmentMode && !current) return null;
+	let t8;
+	if ($[18] === Symbol.for("react.memo_cache_sentinel")) {
+		t8 = /* @__PURE__ */ jsx(Button, {
+			type: "button",
+			variant: "ghost"
+		});
+		$[18] = t8;
+	} else t8 = $[18];
+	const t9 = draftId ? "bg-blue-500" : "bg-emerald-500";
+	let t10;
+	if ($[19] !== t9) {
+		t10 = cn("size-2 shrink-0 rounded-full", t9);
+		$[19] = t9;
+		$[20] = t10;
+	} else t10 = $[20];
+	let t11;
+	if ($[21] !== t10) {
+		t11 = /* @__PURE__ */ jsx("span", {
+			"aria-hidden": true,
+			className: t10
+		});
+		$[21] = t10;
+		$[22] = t11;
+	} else t11 = $[22];
+	let t12;
+	if ($[23] !== current || $[24] !== developmentMode || $[25] !== draftId) {
+		t12 = !draftId ? "Live" : developmentMode ? "Development draft" : draftLabel(current);
+		$[23] = current;
+		$[24] = developmentMode;
+		$[25] = draftId;
+		$[26] = t12;
+	} else t12 = $[26];
+	let t13;
+	if ($[27] !== t12) {
+		t13 = /* @__PURE__ */ jsx("span", {
+			className: "max-w-48 truncate",
+			children: t12
+		});
+		$[27] = t12;
+		$[28] = t13;
+	} else t13 = $[28];
+	let t14;
+	if ($[29] === Symbol.for("react.memo_cache_sentinel")) {
+		t14 = /* @__PURE__ */ jsx(ChevronsUpDown, {
+			"aria-hidden": true,
+			className: "size-4 opacity-50"
+		});
+		$[29] = t14;
+	} else t14 = $[29];
+	let t15;
+	if ($[30] !== t11 || $[31] !== t13) {
+		t15 = /* @__PURE__ */ jsxs(DropdownMenuTrigger, {
+			render: t8,
+			children: [
+				t11,
+				t13,
+				t14
+			]
+		});
+		$[30] = t11;
+		$[31] = t13;
+		$[32] = t15;
+	} else t15 = $[32];
+	let t16;
+	if ($[33] !== developmentMode || $[34] !== draftId || $[35] !== list || $[36] !== regular || $[37] !== switchTo) {
+		t16 = /* @__PURE__ */ jsx(DropdownMenuContent, {
+			className: "w-80",
+			align: "start",
+			children: developmentMode ? /* @__PURE__ */ jsx(DropdownMenuGroup, { children: /* @__PURE__ */ jsx(DropdownMenuLabel, {
+				className: "text-muted-foreground font-normal",
+				children: "The localhost studio works in your development draft."
+			}) }) : /* @__PURE__ */ jsxs(Fragment, { children: [!draftId && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(DropdownMenuGroup, { children: /* @__PURE__ */ jsx(DropdownMenuLabel, {
+				className: "text-muted-foreground font-normal",
+				children: "Live is read-only. Your first edit starts a new draft."
+			}) }), /* @__PURE__ */ jsx(DropdownMenuSeparator, {})] }), /* @__PURE__ */ jsx(DropdownMenuRadioGroup, {
+				value: draftId ?? LIVE,
+				onValueChange: (value) => switchTo(value === LIVE ? null : String(value)),
+				children: /* @__PURE__ */ jsxs(DropdownMenuGroup, { children: [
+					/* @__PURE__ */ jsx(DropdownMenuLabel, { children: "Switch to" }),
+					/* @__PURE__ */ jsx(DropdownMenuRadioItem, {
+						value: LIVE,
+						closeOnClick: true,
+						children: /* @__PURE__ */ jsxs("div", {
+							className: "flex flex-col",
+							children: [/* @__PURE__ */ jsx("span", { children: "Live" }), list && /* @__PURE__ */ jsx("span", {
+								className: "text-muted-foreground text-xs",
+								children: liveLine(list.live)
+							})]
+						})
+					}),
+					regular.map((listed_0) => /* @__PURE__ */ jsx(DraftItem, {
+						draft: listed_0,
+						onRename: () => {
+							setMenuOpen(false);
+							setRenaming(listed_0);
+						}
+					}, listed_0.id))
+				] })
+			})] })
+		});
+		$[33] = developmentMode;
+		$[34] = draftId;
+		$[35] = list;
+		$[36] = regular;
+		$[37] = switchTo;
+		$[38] = t16;
+	} else t16 = $[38];
+	let t17;
+	if ($[39] !== menuOpen || $[40] !== t15 || $[41] !== t16) {
+		t17 = /* @__PURE__ */ jsxs(DropdownMenu, {
+			open: menuOpen,
+			onOpenChange: setMenuOpen,
+			children: [t15, t16]
+		});
+		$[39] = menuOpen;
+		$[40] = t15;
+		$[41] = t16;
+		$[42] = t17;
+	} else t17 = $[42];
+	let t18;
+	if ($[43] !== projectId || $[44] !== renaming) {
+		t18 = projectId && /* @__PURE__ */ jsx(RenameDraftDialog, {
+			projectId,
+			draft: renaming,
+			onOpenChange: (open) => {
+				if (!open) setRenaming(null);
+			}
+		});
+		$[43] = projectId;
+		$[44] = renaming;
+		$[45] = t18;
+	} else t18 = $[45];
+	let t19;
+	if ($[46] !== discarding || $[47] !== draftId || $[48] !== leaveDraft || $[49] !== projectId || $[50] !== review) {
+		t19 = draftId && projectId && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(ReviewDraftSheet, {
+			projectId,
+			draftId,
+			open: review.open,
+			startRenaming: review.startRenaming,
+			onOpenChange: _temp7
+		}), /* @__PURE__ */ jsx(DiscardDraftDialog, {
+			projectId,
+			open: discarding,
+			onOpenChange: _temp8,
+			onDiscarded: leaveDraft
+		})] });
+		$[46] = discarding;
+		$[47] = draftId;
+		$[48] = leaveDraft;
+		$[49] = projectId;
+		$[50] = review;
+		$[51] = t19;
+	} else t19 = $[51];
+	let t20;
+	if ($[52] !== t17 || $[53] !== t18 || $[54] !== t19) {
+		t20 = /* @__PURE__ */ jsxs(Fragment, { children: [
+			t17,
+			t18,
+			t19
+		] });
+		$[52] = t17;
+		$[53] = t18;
+		$[54] = t19;
+		$[55] = t20;
+	} else t20 = $[55];
+	return t20;
+}
+function _temp8(open_1) {
+	if (!open_1) studioStore.send({ type: "closeDiscardDraftDialog" });
+}
+function _temp7(open_0) {
+	if (!open_0) studioStore.send({ type: "closeReviewDraftSheet" });
+}
+function _temp6(listed) {
+	return listed.kind === "regular";
+}
+function _temp5() {
+	return _temp4;
+}
+function _temp4() {
+	studioStore.send({ type: "closeReviewDraftSheet" });
+	studioStore.send({ type: "closeDiscardDraftDialog" });
+}
+function _temp3(t0) {
+	const { move } = t0;
+	if (move === "started") toast.success("Started a new draft");
+}
+function _temp2(state_0) {
+	return state_0.context.isDiscardDraftDialogOpen;
+}
+function _temp(state) {
+	return state.context.reviewDraftSheet;
+}
+/**
+* The current draft's pending changes, which open its review to publish or discard them. Live
+* has none, so it shows nothing there.
+*/
+function PendingChanges() {
+	const $ = c(7);
+	const { current } = useDrafts();
+	if (!current) return null;
+	let t0;
+	if ($[0] !== current.changeCount) {
+		t0 = plural(current.changeCount, "change");
+		$[0] = current.changeCount;
+		$[1] = t0;
+	} else t0 = $[1];
+	const t1 = `Review ${t0}`;
+	let t2;
+	if ($[2] !== current.changeCount) {
+		t2 = /* @__PURE__ */ jsx(Badge, {
+			className: "bg-primary-foreground/20 text-primary-foreground min-w-5 px-1.5 tabular-nums",
+			children: current.changeCount
+		});
+		$[2] = current.changeCount;
+		$[3] = t2;
+	} else t2 = $[3];
+	let t3;
+	if ($[4] !== t1 || $[5] !== t2) {
+		t3 = /* @__PURE__ */ jsxs(Button, {
+			type: "button",
+			"aria-label": t1,
+			onClick: _temp9,
+			children: ["Review changes", t2]
+		});
+		$[4] = t1;
+		$[5] = t2;
+		$[6] = t3;
+	} else t3 = $[6];
+	return t3;
+}
+function _temp9() {
+	return studioStore.send({ type: "openReviewDraftSheet" });
+}
+/**
+* The drafts controls' actions in the command palette, offered where the controls offer them. The palette only opens the review and the discard confirmation; it never publishes or
+* discards by itself.
+*/
+function useDraftsActions(t0) {
+	const $ = c(7);
+	const { enabled, draftId, developmentMode, regular, switchTo } = t0;
+	let t1;
+	let t2;
+	if ($[0] !== developmentMode || $[1] !== draftId || $[2] !== enabled || $[3] !== regular || $[4] !== switchTo) {
+		t1 = () => {
+			const inDraft = enabled && !!draftId;
+			const others = regular.filter((listed) => listed.id !== draftId);
+			const actions = [
+				{
+					id: "review-draft",
+					label: "Review and publish",
+					aliases: [
+						"Publish",
+						"Deploy",
+						"Go live",
+						"Push to production",
+						"Ship"
+					],
+					groupLabel: "Drafts",
+					checkIfAvailable: () => inDraft,
+					execute: _temp10
+				},
+				{
+					id: "discard-draft",
+					label: "Discard draft…",
+					aliases: [
+						"Delete draft",
+						"Throw away changes",
+						"Revert changes"
+					],
+					groupLabel: "Drafts",
+					checkIfAvailable: () => inDraft,
+					execute: _temp11
+				},
+				{
+					id: "rename-draft",
+					label: "Rename draft…",
+					aliases: ["Name draft"],
+					groupLabel: "Drafts",
+					checkIfAvailable: () => inDraft && !developmentMode,
+					execute: _temp12
+				},
+				{
+					id: "switch-to-live",
+					label: "Switch to Live",
+					aliases: [
+						"Leave draft",
+						"Exit draft",
+						"Production",
+						"Public website"
+					],
+					groupLabel: "Drafts",
+					checkIfAvailable: () => inDraft && !developmentMode,
+					execute: () => switchTo(null)
+				},
+				{
+					id: SWITCH_TO_DRAFT_ID,
+					label: "Switch to draft…",
+					aliases: [
+						"Open draft",
+						"Change draft",
+						"Drafts"
+					],
+					groupLabel: "Drafts",
+					checkIfAvailable: () => others.length > 0,
+					hasChildren: true,
+					execute: _temp13
+				},
+				...others.map((other) => ({
+					id: `${SWITCH_TO_DRAFT_ID}-${other.id}`,
+					parentActionId: SWITCH_TO_DRAFT_ID,
+					label: `Switch to "${draftLabel(other)}"`,
+					aliases: [other.createdBy.name],
+					groupLabel: "Drafts",
+					checkIfAvailable: _temp14,
+					execute: () => switchTo(other.id)
+				}))
+			];
+			actionsStore.send({
+				type: "registerManyActions",
+				actions
+			});
+			return () => {
+				actionsStore.send({
+					type: "unregisterManyActions",
+					ids: actions.map(_temp15)
+				});
+			};
+		};
+		t2 = [
+			enabled,
+			draftId,
+			developmentMode,
+			regular,
+			switchTo
+		];
+		$[0] = developmentMode;
+		$[1] = draftId;
+		$[2] = enabled;
+		$[3] = regular;
+		$[4] = switchTo;
+		$[5] = t1;
+		$[6] = t2;
+	} else {
+		t1 = $[5];
+		t2 = $[6];
+	}
+	React.useEffect(t1, t2);
+}
+function _temp15(a) {
+	return a.id;
+}
+function _temp14() {
+	return true;
+}
+function _temp13() {}
+function _temp12() {
+	return studioStore.send({
+		type: "openReviewDraftSheet",
+		startRenaming: true
+	});
+}
+function _temp11() {
+	return studioStore.send({ type: "openDiscardDraftDialog" });
+}
+function _temp10() {
+	return studioStore.send({ type: "openReviewDraftSheet" });
+}
+/** Who published Live last and when: a member, a release, or nobody yet. */
+function liveLine(live) {
+	if (!live?.publishedAt) return "Never published";
+	const by = live.publishedBy ? live.publishedBy.name : "a release";
+	return `Published ${timeAgo(live.publishedAt)} by ${by}`;
+}
+/** A draft to switch to, with a button to rename it that leaves the selection alone. */
+function DraftItem(t0) {
+	const $ = c(27);
+	const { draft, onRename } = t0;
+	const keep = _temp16;
+	const t1 = draft.id;
+	let t2;
+	if ($[0] !== draft) {
+		t2 = draftLabel(draft);
+		$[0] = draft;
+		$[1] = t2;
+	} else t2 = $[1];
+	let t3;
+	if ($[2] !== t2) {
+		t3 = /* @__PURE__ */ jsx("span", {
+			className: "truncate",
+			children: t2
+		});
+		$[2] = t2;
+		$[3] = t3;
+	} else t3 = $[3];
+	const t4 = draft.createdBy.name;
+	let t5;
+	if ($[4] !== draft.createdAt) {
+		t5 = timeAgo(draft.createdAt);
+		$[4] = draft.createdAt;
+		$[5] = t5;
+	} else t5 = $[5];
+	let t6;
+	if ($[6] !== draft.changeCount) {
+		t6 = plural(draft.changeCount, "change");
+		$[6] = draft.changeCount;
+		$[7] = t6;
+	} else t6 = $[7];
+	let t7;
+	if ($[8] !== draft.createdBy.name || $[9] !== t5 || $[10] !== t6) {
+		t7 = /* @__PURE__ */ jsxs("span", {
+			className: "text-muted-foreground text-xs",
+			children: [
+				t4,
+				" · ",
+				t5,
+				" ·",
+				" ",
+				t6
+			]
+		});
+		$[8] = draft.createdBy.name;
+		$[9] = t5;
+		$[10] = t6;
+		$[11] = t7;
+	} else t7 = $[11];
+	let t8;
+	if ($[12] !== t3 || $[13] !== t7) {
+		t8 = /* @__PURE__ */ jsxs("div", {
+			className: "flex min-w-0 flex-1 flex-col",
+			children: [t3, t7]
+		});
+		$[12] = t3;
+		$[13] = t7;
+		$[14] = t8;
+	} else t8 = $[14];
+	let t9;
+	if ($[15] !== draft) {
+		t9 = draftLabel(draft);
+		$[15] = draft;
+		$[16] = t9;
+	} else t9 = $[16];
+	const t10 = `Rename "${t9}"`;
+	let t11;
+	if ($[17] !== onRename) {
+		t11 = (event_0) => {
+			keep(event_0);
+			onRename();
+		};
+		$[17] = onRename;
+		$[18] = t11;
+	} else t11 = $[18];
+	let t12;
+	if ($[19] === Symbol.for("react.memo_cache_sentinel")) {
+		t12 = /* @__PURE__ */ jsx(Pencil, {});
+		$[19] = t12;
+	} else t12 = $[19];
+	let t13;
+	if ($[20] !== t10 || $[21] !== t11) {
+		t13 = /* @__PURE__ */ jsx(Button, {
+			type: "button",
+			variant: "ghost",
+			size: "icon-xs",
+			"aria-label": t10,
+			className: "opacity-0 group-data-highlighted/draft-item:opacity-100 focus-visible:opacity-100",
+			onPointerDown: keep,
+			onPointerUp: keep,
+			onMouseUp: keep,
+			onClick: t11,
+			children: t12
+		});
+		$[20] = t10;
+		$[21] = t11;
+		$[22] = t13;
+	} else t13 = $[22];
+	let t14;
+	if ($[23] !== draft.id || $[24] !== t13 || $[25] !== t8) {
+		t14 = /* @__PURE__ */ jsxs(DropdownMenuRadioItem, {
+			value: t1,
+			closeOnClick: true,
+			className: "group/draft-item",
+			children: [t8, t13]
+		});
+		$[23] = draft.id;
+		$[24] = t13;
+		$[25] = t8;
+		$[26] = t14;
+	} else t14 = $[26];
+	return t14;
+}
+function _temp16(event) {
+	return event.stopPropagation();
+}
+
+//#endregion
+export { DraftPicker, PendingChanges };