camox 0.75.0 → 0.76.1

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

@@ -0,0 +1,446 @@
+import { reads, useReadQuery } from "../../../lib/studio-reads.js";
+import { useRestoreDraft } from "../useRestoreDraft.js";
+import { daysLeft, draftLabel, timeAgo } from "../draftLabel.js";
+import { DeleteDraftDialog } from "./DeleteDraftDialog.js";
+import { Td, Th } from "./SheetTable.js";
+import { PublishedTab } from "./PublishedTab.js";
+import { c } from "react/compiler-runtime";
+import * as React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Button } from "@camox/ui/button";
+import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from "@camox/ui/sheet";
+import { Spinner } from "@camox/ui/spinner";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@camox/ui/tabs";
+
+//#region src/features/studio/components/DraftsSheet.tsx
+/**
+* The drafts no longer in progress, opened from the draft picker: a tab of archived drafts to
+* restore or delete (ADR 0046), and a tab of Publications, to read why Live changed (ADR 0045).
+*/
+function DraftsSheet(t0) {
+	const $ = c(36);
+	const { projectId, open, onOpenChange } = t0;
+	let t1;
+	if ($[0] !== projectId) {
+		t1 = reads.archivedDrafts({ projectId });
+		$[0] = projectId;
+		$[1] = t1;
+	} else t1 = $[1];
+	let t2;
+	if ($[2] !== open) {
+		t2 = { enabled: open };
+		$[2] = open;
+		$[3] = t2;
+	} else t2 = $[3];
+	const archived = useReadQuery(t1, t2);
+	let t3;
+	if ($[4] !== projectId) {
+		t3 = reads.publications({ projectId });
+		$[4] = projectId;
+		$[5] = t3;
+	} else t3 = $[5];
+	let t4;
+	if ($[6] !== open) {
+		t4 = { enabled: open };
+		$[6] = open;
+		$[7] = t4;
+	} else t4 = $[7];
+	const publications = useReadQuery(t3, t4);
+	let t5;
+	if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
+		t5 = /* @__PURE__ */ jsxs(SheetHeader, {
+			className: "border-b",
+			children: [/* @__PURE__ */ jsx(SheetTitle, { children: "Drafts" }), /* @__PURE__ */ jsx(SheetDescription, { children: "Drafts set aside, to bring back or delete, and what was published." })]
+		});
+		$[8] = t5;
+	} else t5 = $[8];
+	const t6 = archived.data?.length;
+	let t7;
+	if ($[9] !== t6) {
+		t7 = /* @__PURE__ */ jsxs(TabsTrigger, {
+			value: "archived",
+			children: ["Archived ", /* @__PURE__ */ jsx(TabCount, { count: t6 })]
+		});
+		$[9] = t6;
+		$[10] = t7;
+	} else t7 = $[10];
+	const t8 = publications.data?.length;
+	let t9;
+	if ($[11] !== t8) {
+		t9 = /* @__PURE__ */ jsxs(TabsTrigger, {
+			value: "published",
+			children: ["Published ", /* @__PURE__ */ jsx(TabCount, { count: t8 })]
+		});
+		$[11] = t8;
+		$[12] = t9;
+	} else t9 = $[12];
+	let t10;
+	if ($[13] !== t7 || $[14] !== t9) {
+		t10 = /* @__PURE__ */ jsxs(TabsList, { children: [t7, t9] });
+		$[13] = t7;
+		$[14] = t9;
+		$[15] = t10;
+	} else t10 = $[15];
+	let t11;
+	if ($[16] !== onOpenChange || $[17] !== open || $[18] !== projectId) {
+		t11 = open && /* @__PURE__ */ jsx(ArchivedDrafts, {
+			projectId,
+			onRestored: () => onOpenChange(false)
+		});
+		$[16] = onOpenChange;
+		$[17] = open;
+		$[18] = projectId;
+		$[19] = t11;
+	} else t11 = $[19];
+	let t12;
+	if ($[20] !== t11) {
+		t12 = /* @__PURE__ */ jsx(TabsContent, {
+			value: "archived",
+			className: "overflow-y-auto",
+			children: t11
+		});
+		$[20] = t11;
+		$[21] = t12;
+	} else t12 = $[21];
+	let t13;
+	if ($[22] !== onOpenChange || $[23] !== open || $[24] !== projectId) {
+		t13 = open && /* @__PURE__ */ jsx(PublishedTab, {
+			projectId,
+			onEntered: () => onOpenChange(false)
+		});
+		$[22] = onOpenChange;
+		$[23] = open;
+		$[24] = projectId;
+		$[25] = t13;
+	} else t13 = $[25];
+	let t14;
+	if ($[26] !== t13) {
+		t14 = /* @__PURE__ */ jsx(TabsContent, {
+			value: "published",
+			className: "overflow-y-auto",
+			children: t13
+		});
+		$[26] = t13;
+		$[27] = t14;
+	} else t14 = $[27];
+	let t15;
+	if ($[28] !== t10 || $[29] !== t12 || $[30] !== t14) {
+		t15 = /* @__PURE__ */ jsxs(SheetContent, {
+			side: "right",
+			className: "gap-0 data-[side=right]:sm:max-w-3xl",
+			children: [t5, /* @__PURE__ */ jsxs(Tabs, {
+				defaultValue: "archived",
+				className: "flex-1 overflow-hidden p-4",
+				children: [
+					t10,
+					t12,
+					t14
+				]
+			})]
+		});
+		$[28] = t10;
+		$[29] = t12;
+		$[30] = t14;
+		$[31] = t15;
+	} else t15 = $[31];
+	let t16;
+	if ($[32] !== onOpenChange || $[33] !== open || $[34] !== t15) {
+		t16 = /* @__PURE__ */ jsx(Sheet, {
+			open,
+			onOpenChange,
+			children: t15
+		});
+		$[32] = onOpenChange;
+		$[33] = open;
+		$[34] = t15;
+		$[35] = t16;
+	} else t16 = $[35];
+	return t16;
+}
+/** How many items a tab holds, once they've loaded. */
+function TabCount(t0) {
+	const $ = c(2);
+	const { count } = t0;
+	if (count === void 0) return null;
+	let t1;
+	if ($[0] !== count) {
+		t1 = /* @__PURE__ */ jsx("span", {
+			className: "text-muted-foreground tabular-nums",
+			children: count
+		});
+		$[0] = count;
+		$[1] = t1;
+	} else t1 = $[1];
+	return t1;
+}
+/** The archived drafts, each with Restore and Delete. */
+function ArchivedDrafts(t0) {
+	const $ = c(29);
+	const { projectId, onRestored } = t0;
+	let t1;
+	if ($[0] !== projectId) {
+		t1 = reads.archivedDrafts({ projectId });
+		$[0] = projectId;
+		$[1] = t1;
+	} else t1 = $[1];
+	const archived = useReadQuery(t1);
+	const [deleting, setDeleting] = React.useState(null);
+	let t2;
+	if ($[2] !== onRestored) {
+		t2 = { onRestored };
+		$[2] = onRestored;
+		$[3] = t2;
+	} else t2 = $[3];
+	const { restore, restoring } = useRestoreDraft(projectId, t2);
+	if (!archived.data) {
+		let t3;
+		if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+			t3 = /* @__PURE__ */ jsxs("div", {
+				className: "text-muted-foreground flex items-center gap-2 py-6 text-sm",
+				children: [/* @__PURE__ */ jsx(Spinner, { className: "size-3.5" }), " Loading..."]
+			});
+			$[4] = t3;
+		} else t3 = $[4];
+		return t3;
+	}
+	if (archived.data.length === 0) {
+		let t3;
+		if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
+			t3 = /* @__PURE__ */ jsx("p", {
+				className: "text-muted-foreground py-6 text-sm",
+				children: "No archived drafts."
+			});
+			$[5] = t3;
+		} else t3 = $[5];
+		return t3;
+	}
+	let t3;
+	let t4;
+	let t5;
+	let t6;
+	let t7;
+	let t8;
+	if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
+		t3 = /* @__PURE__ */ jsx(Th, { children: "Name" });
+		t4 = /* @__PURE__ */ jsx(Th, { children: "Overview" });
+		t5 = /* @__PURE__ */ jsx(Th, { children: "Started by" });
+		t6 = /* @__PURE__ */ jsx(Th, { children: "Last activity" });
+		t7 = /* @__PURE__ */ jsx(Th, { children: "Archived by" });
+		t8 = /* @__PURE__ */ jsx(Th, { children: "Deleted in" });
+		$[6] = t3;
+		$[7] = t4;
+		$[8] = t5;
+		$[9] = t6;
+		$[10] = t7;
+		$[11] = t8;
+	} else {
+		t3 = $[6];
+		t4 = $[7];
+		t5 = $[8];
+		t6 = $[9];
+		t7 = $[10];
+		t8 = $[11];
+	}
+	let t9;
+	if ($[12] === Symbol.for("react.memo_cache_sentinel")) {
+		t9 = /* @__PURE__ */ jsx("thead", {
+			className: "text-muted-foreground text-xs",
+			children: /* @__PURE__ */ jsxs("tr", { children: [
+				t3,
+				t4,
+				t5,
+				t6,
+				t7,
+				t8,
+				/* @__PURE__ */ jsx(Th, { children: /* @__PURE__ */ jsx("span", {
+					className: "sr-only",
+					children: "Actions"
+				}) })
+			] })
+		});
+		$[12] = t9;
+	} else t9 = $[12];
+	let t10;
+	if ($[13] !== archived.data || $[14] !== restore || $[15] !== restoring) {
+		let t11;
+		if ($[17] !== restore || $[18] !== restoring) {
+			t11 = (draft) => /* @__PURE__ */ jsx(ArchivedRow, {
+				draft,
+				restoring: restoring === draft.id,
+				onRestore: () => restore(draft.id, draftLabel(draft)),
+				onDelete: () => setDeleting(draft.id)
+			}, draft.id);
+			$[17] = restore;
+			$[18] = restoring;
+			$[19] = t11;
+		} else t11 = $[19];
+		t10 = archived.data.map(t11);
+		$[13] = archived.data;
+		$[14] = restore;
+		$[15] = restoring;
+		$[16] = t10;
+	} else t10 = $[16];
+	let t11;
+	if ($[20] !== t10) {
+		t11 = /* @__PURE__ */ jsxs("table", {
+			className: "w-full text-left text-sm",
+			children: [t9, /* @__PURE__ */ jsx("tbody", { children: t10 })]
+		});
+		$[20] = t10;
+		$[21] = t11;
+	} else t11 = $[21];
+	let t12;
+	if ($[22] === Symbol.for("react.memo_cache_sentinel")) {
+		t12 = (open) => {
+			if (!open) setDeleting(null);
+		};
+		$[22] = t12;
+	} else t12 = $[22];
+	let t13;
+	if ($[23] !== deleting || $[24] !== projectId) {
+		t13 = /* @__PURE__ */ jsx(DeleteDraftDialog, {
+			projectId,
+			draftId: deleting,
+			onOpenChange: t12
+		});
+		$[23] = deleting;
+		$[24] = projectId;
+		$[25] = t13;
+	} else t13 = $[25];
+	let t14;
+	if ($[26] !== t11 || $[27] !== t13) {
+		t14 = /* @__PURE__ */ jsxs(Fragment, { children: [t11, t13] });
+		$[26] = t11;
+		$[27] = t13;
+		$[28] = t14;
+	} else t14 = $[28];
+	return t14;
+}
+function ArchivedRow(t0) {
+	const $ = c(34);
+	const { draft, restoring, onRestore, onDelete } = t0;
+	let t1;
+	if ($[0] !== draft) {
+		t1 = draftLabel(draft);
+		$[0] = draft;
+		$[1] = t1;
+	} else t1 = $[1];
+	let t2;
+	if ($[2] !== t1) {
+		t2 = /* @__PURE__ */ jsx(Td, {
+			className: "font-medium",
+			children: t1
+		});
+		$[2] = t1;
+		$[3] = t2;
+	} else t2 = $[3];
+	const t3 = draft.overviewHeadline ?? "";
+	let t4;
+	if ($[4] !== t3) {
+		t4 = /* @__PURE__ */ jsx(Td, {
+			className: "text-muted-foreground",
+			children: t3
+		});
+		$[4] = t3;
+		$[5] = t4;
+	} else t4 = $[5];
+	let t5;
+	if ($[6] !== draft.createdBy.name) {
+		t5 = /* @__PURE__ */ jsx(Td, { children: draft.createdBy.name });
+		$[6] = draft.createdBy.name;
+		$[7] = t5;
+	} else t5 = $[7];
+	let t6;
+	if ($[8] !== draft.lastActivityAt) {
+		t6 = timeAgo(draft.lastActivityAt);
+		$[8] = draft.lastActivityAt;
+		$[9] = t6;
+	} else t6 = $[9];
+	let t7;
+	if ($[10] !== t6) {
+		t7 = /* @__PURE__ */ jsx(Td, { children: t6 });
+		$[10] = t6;
+		$[11] = t7;
+	} else t7 = $[11];
+	let t8;
+	if ($[12] !== draft.archivedBy.name) {
+		t8 = /* @__PURE__ */ jsx(Td, { children: draft.archivedBy.name });
+		$[12] = draft.archivedBy.name;
+		$[13] = t8;
+	} else t8 = $[13];
+	let t9;
+	if ($[14] !== draft.deletesAt) {
+		t9 = daysLeft(draft.deletesAt);
+		$[14] = draft.deletesAt;
+		$[15] = t9;
+	} else t9 = $[15];
+	let t10;
+	if ($[16] !== t9) {
+		t10 = /* @__PURE__ */ jsx(Td, { children: t9 });
+		$[16] = t9;
+		$[17] = t10;
+	} else t10 = $[17];
+	let t11;
+	if ($[18] !== onRestore || $[19] !== restoring) {
+		t11 = /* @__PURE__ */ jsx(Button, {
+			type: "button",
+			variant: "outline",
+			size: "sm",
+			disabled: restoring,
+			onClick: onRestore,
+			children: "Restore"
+		});
+		$[18] = onRestore;
+		$[19] = restoring;
+		$[20] = t11;
+	} else t11 = $[20];
+	let t12;
+	if ($[21] !== onDelete) {
+		t12 = /* @__PURE__ */ jsx(Button, {
+			type: "button",
+			variant: "ghost",
+			size: "sm",
+			onClick: onDelete,
+			children: "Delete"
+		});
+		$[21] = onDelete;
+		$[22] = t12;
+	} else t12 = $[22];
+	let t13;
+	if ($[23] !== t11 || $[24] !== t12) {
+		t13 = /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsxs("div", {
+			className: "flex justify-end gap-2",
+			children: [t11, t12]
+		}) });
+		$[23] = t11;
+		$[24] = t12;
+		$[25] = t13;
+	} else t13 = $[25];
+	let t14;
+	if ($[26] !== t10 || $[27] !== t13 || $[28] !== t2 || $[29] !== t4 || $[30] !== t5 || $[31] !== t7 || $[32] !== t8) {
+		t14 = /* @__PURE__ */ jsxs("tr", {
+			className: "border-t align-top",
+			children: [
+				t2,
+				t4,
+				t5,
+				t7,
+				t8,
+				t10,
+				t13
+			]
+		});
+		$[26] = t10;
+		$[27] = t13;
+		$[28] = t2;
+		$[29] = t4;
+		$[30] = t5;
+		$[31] = t7;
+		$[32] = t8;
+		$[33] = t14;
+	} else t14 = $[33];
+	return t14;
+}
+
+//#endregion
+export { DraftsSheet };