camox 0.44.0 → 0.45.0

package/dist/features/content/ContentAssets.js

@@ -0,0 +1,315 @@
+import { useProjectUuid } from "../../lib/auth.js";
+import { reads, useReadQuery } from "../../lib/studio-reads.js";
+import { checkIfInputFocused } from "../../lib/utils.js";
+import { UploadDropZone } from "./components/UploadDropZone.js";
+import { UploadProgressDrawer } from "./components/UploadProgressDrawer.js";
+import { useFileUpload } from "../../hooks/use-file-upload.js";
+import { fileMutations } from "../../lib/queries.js";
+import { AssetLightbox } from "../preview/components/AssetLightbox.js";
+import { AssetCard } from "./components/AssetCard.js";
+import { useMarqueeSelection } from "../../hooks/use-marquee-selection.js";
+import { AssetCardSkeleton } from "./components/AssetCardSkeleton.js";
+import { c } from "react/compiler-runtime";
+import { useEffect, useRef, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useMutation } from "@tanstack/react-query";
+import { Button } from "@camox/ui/button";
+import { PanelContent } from "@camox/ui/panel";
+import { ImageIcon, UploadIcon } from "lucide-react";
+import { FloatingToolbar } from "@camox/ui/floating-toolbar";
+
+//#region src/features/content/ContentAssets.tsx
+const ContentAssets = () => {
+	const $ = c(51);
+	const projectUuid = useProjectUuid();
+	let t0;
+	if ($[0] !== projectUuid) {
+		t0 = reads.project({ projectUuid });
+		$[0] = projectUuid;
+		$[1] = t0;
+	} else t0 = $[1];
+	const { data: project } = useReadQuery(t0);
+	let t1;
+	if ($[2] !== project?.id) {
+		t1 = reads.fileList({ projectId: project?.id ?? 0 });
+		$[2] = project?.id;
+		$[3] = t1;
+	} else t1 = $[3];
+	const t2 = !!project;
+	let t3;
+	if ($[4] !== t2) {
+		t3 = { enabled: t2 };
+		$[4] = t2;
+		$[5] = t3;
+	} else t3 = $[5];
+	const { data: files } = useReadQuery(t1, t3);
+	let t4;
+	if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
+		t4 = /* @__PURE__ */ new Set();
+		$[6] = t4;
+	} else t4 = $[6];
+	const [selectedIds, setSelectedIds] = useState(t4);
+	const [lightboxFileId, setLightboxFileId] = useState(null);
+	const t5 = project?.id;
+	let t6;
+	if ($[7] !== t5) {
+		t6 = { projectId: t5 };
+		$[7] = t5;
+		$[8] = t6;
+	} else t6 = $[8];
+	const { uploads, uploadFiles, clearAll } = useFileUpload(t6);
+	let t7;
+	if ($[9] === Symbol.for("react.memo_cache_sentinel")) {
+		t7 = {
+			...fileMutations.deleteMany(),
+			onSuccess: () => setSelectedIds(/* @__PURE__ */ new Set())
+		};
+		$[9] = t7;
+	} else t7 = $[9];
+	const deleteFiles = useMutation(t7);
+	const containerRef = useRef(null);
+	let t8;
+	if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
+		t8 = (ids) => setSelectedIds(ids);
+		$[10] = t8;
+	} else t8 = $[10];
+	const { selectionRect, didDragRef, handlers } = useMarqueeSelection(containerRef, t8);
+	let t10;
+	let t9;
+	if ($[11] !== lightboxFileId) {
+		t9 = () => {
+			const handleKeyDown = (event) => {
+				if (event.key !== "Escape") return;
+				if (lightboxFileId !== null) return;
+				if (checkIfInputFocused()) return;
+				setSelectedIds(_temp);
+			};
+			document.addEventListener("keydown", handleKeyDown);
+			return () => document.removeEventListener("keydown", handleKeyDown);
+		};
+		t10 = [lightboxFileId];
+		$[11] = lightboxFileId;
+		$[12] = t10;
+		$[13] = t9;
+	} else {
+		t10 = $[12];
+		t9 = $[13];
+	}
+	useEffect(t9, t10);
+	let t11;
+	if ($[14] !== didDragRef) {
+		t11 = () => {
+			if (didDragRef.current) {
+				didDragRef.current = false;
+				return;
+			}
+			setSelectedIds(/* @__PURE__ */ new Set());
+		};
+		$[14] = didDragRef;
+		$[15] = t11;
+	} else t11 = $[15];
+	let t12;
+	if ($[16] !== files) {
+		t12 = files === void 0 && /* @__PURE__ */ jsx("div", {
+			className: "grid grid-cols-[repeat(auto-fill,minmax(220px,1fr))] gap-4",
+			children: Array.from({ length: 12 }, _temp2)
+		});
+		$[16] = files;
+		$[17] = t12;
+	} else t12 = $[17];
+	let t13;
+	if ($[18] !== files?.length || $[19] !== uploadFiles) {
+		t13 = files?.length === 0 && /* @__PURE__ */ jsx("div", {
+			className: "flex h-full items-center justify-center",
+			children: /* @__PURE__ */ jsxs("div", {
+				className: "flex max-w-sm flex-col items-center gap-2 text-center",
+				children: [
+					/* @__PURE__ */ jsx(ImageIcon, {
+						"aria-hidden": true,
+						className: "text-muted-foreground mb-2 h-8 w-8"
+					}),
+					/* @__PURE__ */ jsx("h2", {
+						className: "font-medium",
+						children: "No assets yet"
+					}),
+					/* @__PURE__ */ jsx("p", {
+						className: "text-muted-foreground text-sm",
+						children: "Upload images, videos, and files to use in your content."
+					}),
+					/* @__PURE__ */ jsxs(Button, {
+						variant: "outline",
+						className: "mt-2",
+						render: /* @__PURE__ */ jsx("label", {}),
+						children: [
+							/* @__PURE__ */ jsx(UploadIcon, {
+								"aria-hidden": true,
+								className: "size-4"
+							}),
+							"Upload assets",
+							/* @__PURE__ */ jsx("input", {
+								type: "file",
+								className: "sr-only",
+								multiple: true,
+								onChange: (event_0) => {
+									if (event_0.target.files) uploadFiles(event_0.target.files);
+									event_0.target.value = "";
+								}
+							})
+						]
+					})
+				]
+			})
+		});
+		$[18] = files?.length;
+		$[19] = uploadFiles;
+		$[20] = t13;
+	} else t13 = $[20];
+	let t14;
+	if ($[21] !== files || $[22] !== selectedIds) {
+		t14 = files && files.length > 0 && /* @__PURE__ */ jsx("div", {
+			className: "grid grid-cols-[repeat(auto-fill,minmax(220px,1fr))] gap-4",
+			children: files.map((file) => /* @__PURE__ */ jsx(AssetCard, {
+				file,
+				selected: selectedIds.has(file.id),
+				onSelect: () => {
+					setSelectedIds((prev_0) => {
+						const next = new Set(prev_0);
+						if (next.has(file.id)) next.delete(file.id);
+						else next.add(file.id);
+						return next;
+					});
+				},
+				onOpen: () => setLightboxFileId(file.id)
+			}, file.id))
+		});
+		$[21] = files;
+		$[22] = selectedIds;
+		$[23] = t14;
+	} else t14 = $[23];
+	let t15;
+	if ($[24] !== selectionRect) {
+		t15 = selectionRect && /* @__PURE__ */ jsx("div", {
+			className: "border-primary bg-primary/10 pointer-events-none absolute z-50 border",
+			style: {
+				left: selectionRect.left,
+				top: selectionRect.top,
+				width: selectionRect.width,
+				height: selectionRect.height
+			}
+		});
+		$[24] = selectionRect;
+		$[25] = t15;
+	} else t15 = $[25];
+	let t16;
+	if ($[26] !== handlers.onPointerDown || $[27] !== handlers.onPointerMove || $[28] !== handlers.onPointerUp || $[29] !== t11 || $[30] !== t12 || $[31] !== t13 || $[32] !== t14 || $[33] !== t15) {
+		t16 = /* @__PURE__ */ jsxs(PanelContent, {
+			ref: containerRef,
+			className: "relative p-4 select-none",
+			onClick: t11,
+			onPointerDown: handlers.onPointerDown,
+			onPointerMove: handlers.onPointerMove,
+			onPointerUp: handlers.onPointerUp,
+			children: [
+				t12,
+				t13,
+				t14,
+				t15
+			]
+		});
+		$[26] = handlers.onPointerDown;
+		$[27] = handlers.onPointerMove;
+		$[28] = handlers.onPointerUp;
+		$[29] = t11;
+		$[30] = t12;
+		$[31] = t13;
+		$[32] = t14;
+		$[33] = t15;
+		$[34] = t16;
+	} else t16 = $[34];
+	let t17;
+	if ($[35] !== t16 || $[36] !== uploadFiles) {
+		t17 = /* @__PURE__ */ jsx("div", {
+			className: "flex min-h-0 min-w-0 flex-1 flex-col",
+			children: /* @__PURE__ */ jsx(UploadDropZone, {
+				onDrop: uploadFiles,
+				className: "flex min-h-0 flex-1 flex-col",
+				children: t16
+			})
+		});
+		$[35] = t16;
+		$[36] = uploadFiles;
+		$[37] = t17;
+	} else t17 = $[37];
+	let t18;
+	if ($[38] !== clearAll || $[39] !== uploads) {
+		t18 = /* @__PURE__ */ jsx(UploadProgressDrawer, {
+			uploads,
+			onClose: clearAll
+		});
+		$[38] = clearAll;
+		$[39] = uploads;
+		$[40] = t18;
+	} else t18 = $[40];
+	let t19;
+	if ($[41] !== deleteFiles || $[42] !== selectedIds) {
+		t19 = selectedIds.size > 0 && /* @__PURE__ */ jsxs(FloatingToolbar, {
+			className: "bottom-4 min-w-xs justify-between gap-4 pl-3",
+			children: [/* @__PURE__ */ jsxs("span", {
+				className: "text-muted-foreground",
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						className: "font-semibold",
+						children: selectedIds.size
+					}),
+					" asset",
+					selectedIds.size > 1 ? "s" : "",
+					" selected"
+				]
+			}), /* @__PURE__ */ jsx(Button, {
+				variant: "destructive",
+				disabled: deleteFiles.isPending,
+				onClick: () => deleteFiles.mutate({ ids: [...selectedIds] }),
+				children: deleteFiles.isPending ? "Deleting…" : "Delete"
+			})]
+		});
+		$[41] = deleteFiles;
+		$[42] = selectedIds;
+		$[43] = t19;
+	} else t19 = $[43];
+	let t20;
+	if ($[44] !== lightboxFileId) {
+		t20 = lightboxFileId && /* @__PURE__ */ jsx(AssetLightbox, {
+			open: true,
+			onOpenChange: (open) => {
+				if (!open) setLightboxFileId(null);
+			},
+			fileId: lightboxFileId
+		});
+		$[44] = lightboxFileId;
+		$[45] = t20;
+	} else t20 = $[45];
+	let t21;
+	if ($[46] !== t17 || $[47] !== t18 || $[48] !== t19 || $[49] !== t20) {
+		t21 = /* @__PURE__ */ jsxs(Fragment, { children: [
+			t17,
+			t18,
+			t19,
+			t20
+		] });
+		$[46] = t17;
+		$[47] = t18;
+		$[48] = t19;
+		$[49] = t20;
+		$[50] = t21;
+	} else t21 = $[50];
+	return t21;
+};
+function _temp(prev) {
+	return prev.size === 0 ? prev : /* @__PURE__ */ new Set();
+}
+function _temp2(_, i) {
+	return /* @__PURE__ */ jsx(AssetCardSkeleton, {}, i);
+}
+
+//#endregion
+export { ContentAssets };