camox 0.44.0 → 0.45.0

package/dist/features/content/CamoxContent.js

@@ -1,296 +1,199 @@
-import { useProjectSlug } from "../../lib/auth.js";
-import { fileMutations, fileQueries, projectQueries } from "../../lib/queries.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 { 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 { useProjectUuid } from "../../lib/auth.js";
+import { Navigate, useNavigate } from "../navigation/navigation.js";
+import { reads, useReadQuery } from "../../lib/studio-reads.js";
+import { CollectionItemSheetProvider } from "./CollectionItemSheetContext.js";
+import { ContentCollection, ContentCollectionItemSheet } from "./ContentCollection.js";
+import { useLocalePath, useLocalizedPath } from "../../lib/view-locale.js";
+import { STUDIO_ASSETS_PATH, STUDIO_CONTENT_PATH, collectionContentPath, matchCollectionContentPath } from "../studio/routes.js";
 import { ContentSidebar } from "./components/ContentSidebar.js";
+import { MissingFromLocaleGroup } from "./components/MissingFromLocale.js";
+import { ContentAssets } from "./ContentAssets.js";
 import { c } from "react/compiler-runtime";
-import { useMutation, useQuery } from "@tanstack/react-query";
-import { useEffect, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Button } from "@camox/ui/button";
-import { PanelContent } from "@camox/ui/panel";
-import { FloatingToolbar } from "@camox/ui/floating-toolbar";
 
 //#region src/features/content/CamoxContent.tsx
 const CamoxContent = () => {
-	const $ = c(53);
-	if ($[0] !== "8cb16b8f9bc49d4116b9897e9fc510ae1a05eaf98230f67c2f9664ca4f86e3bd") {
-		for (let $i = 0; $i < 53; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "8cb16b8f9bc49d4116b9897e9fc510ae1a05eaf98230f67c2f9664ca4f86e3bd";
+	const $ = c(7);
+	const pathname = useLocalePath();
+	const localized = useLocalizedPath();
+	if (pathname === "/camox/content" || pathname === `${"/camox/content"}/`) {
+		let t0;
+		if ($[0] !== localized) {
+			t0 = localized(STUDIO_ASSETS_PATH);
+			$[0] = localized;
+			$[1] = t0;
+		} else t0 = $[1];
+		let t1;
+		if ($[2] !== t0) {
+			t1 = /* @__PURE__ */ jsx(Navigate, {
+				to: t0,
+				replace: true
+			});
+			$[2] = t0;
+			$[3] = t1;
+		} else t1 = $[3];
+		return t1;
+	}
+	if (typeof __CAMOX_ENABLE_EXPERIMENTAL_FEATURES__ !== "undefined" && __CAMOX_ENABLE_EXPERIMENTAL_FEATURES__) {
+		let t0;
+		if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+			t0 = /* @__PURE__ */ jsx(ExperimentalContent, {});
+			$[4] = t0;
+		} else t0 = $[4];
+		return t0;
 	}
-	const projectSlug = useProjectSlug();
 	let t0;
-	if ($[1] !== projectSlug) {
-		t0 = projectQueries.getBySlug(projectSlug);
-		$[1] = projectSlug;
-		$[2] = t0;
-	} else t0 = $[2];
-	const { data: project } = useQuery(t0);
+	if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = [];
+		$[5] = t0;
+	} else t0 = $[5];
 	let t1;
-	if ($[3] !== project?.id) {
-		t1 = fileQueries.list(project?.id ?? 0);
-		$[3] = project?.id;
-		$[4] = t1;
-	} else t1 = $[4];
-	const t2 = !!project;
+	if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = /* @__PURE__ */ jsxs("div", {
+			className: "flex min-h-0 flex-1 flex-row",
+			children: [/* @__PURE__ */ jsx(ContentSidebar, {
+				collections: t0,
+				selectedCollectionId: null,
+				collectionsError: false,
+				children: /* @__PURE__ */ jsx(MissingFromLocaleGroup, { collections: [] })
+			}), /* @__PURE__ */ jsx(ContentAssets, {})]
+		});
+		$[6] = t1;
+	} else t1 = $[6];
+	return t1;
+};
+const ExperimentalContent = () => {
+	const $ = c(38);
+	const projectUuid = useProjectUuid();
+	const navigate = useNavigate();
+	const pathname = useLocalePath();
+	const localized = useLocalizedPath();
+	let t0;
+	if ($[0] !== pathname) {
+		t0 = matchCollectionContentPath(pathname);
+		$[0] = pathname;
+		$[1] = t0;
+	} else t0 = $[1];
+	const route = t0;
+	let t1;
+	if ($[2] !== projectUuid) {
+		t1 = reads.collectionList({ projectUuid });
+		$[2] = projectUuid;
+		$[3] = t1;
+	} else t1 = $[3];
+	const { data: t2, isError, isPending } = useReadQuery(t1);
 	let t3;
-	if ($[5] !== t1 || $[6] !== t2) {
-		t3 = {
-			...t1,
-			enabled: t2
-		};
-		$[5] = t1;
-		$[6] = t2;
-		$[7] = t3;
-	} else t3 = $[7];
-	const { data: files } = useQuery(t3);
+	if ($[4] !== t2) {
+		t3 = t2 === void 0 ? [] : t2;
+		$[4] = t2;
+		$[5] = t3;
+	} else t3 = $[5];
+	const collections = t3;
 	let t4;
-	if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
-		t4 = /* @__PURE__ */ new Set();
+	if ($[6] !== collections || $[7] !== route?.collectionId) {
+		let t5;
+		if ($[9] !== route?.collectionId) {
+			t5 = (entry) => entry.collectionId === route?.collectionId;
+			$[9] = route?.collectionId;
+			$[10] = t5;
+		} else t5 = $[10];
+		t4 = collections.find(t5);
+		$[6] = collections;
+		$[7] = route?.collectionId;
 		$[8] = t4;
 	} else t4 = $[8];
-	const [selectedIds, setSelectedIds] = useState(t4);
-	const [lightboxFileId, setLightboxFileId] = useState(null);
-	const t5 = project?.id;
+	const collection = t4;
+	let t5;
+	if ($[11] !== route) {
+		t5 = route && (route.isNew || route.itemId) ? {
+			collectionId: route.collectionId,
+			itemId: route.itemId
+		} : null;
+		$[11] = route;
+		$[12] = t5;
+	} else t5 = $[12];
+	const routeTarget = t5;
 	let t6;
-	if ($[9] !== t5) {
-		t6 = { projectId: t5 };
-		$[9] = t5;
-		$[10] = t6;
-	} else t6 = $[10];
-	const { uploads, uploadFiles, clearAll } = useFileUpload(t6);
-	let t7;
-	if ($[11] === Symbol.for("react.memo_cache_sentinel")) {
-		t7 = {
-			...fileMutations.deleteMany(),
-			onSuccess: () => setSelectedIds(/* @__PURE__ */ new Set())
+	if ($[13] !== localized || $[14] !== navigate) {
+		t6 = (target) => {
+			navigate({
+				to: localized(collectionContentPath(target.collectionId)),
+				replace: true
+			});
 		};
-		$[11] = t7;
-	} else t7 = $[11];
-	const deleteFiles = useMutation(t7);
-	const containerRef = useRef(null);
+		$[13] = localized;
+		$[14] = navigate;
+		$[15] = t6;
+	} else t6 = $[15];
+	const closeRouteTarget = t6;
+	const t7 = route?.collectionId ?? null;
 	let t8;
-	if ($[12] === Symbol.for("react.memo_cache_sentinel")) {
-		t8 = (ids) => setSelectedIds(ids);
-		$[12] = t8;
-	} else t8 = $[12];
-	const { selectionRect, didDragRef, handlers } = useMarqueeSelection(containerRef, t8);
-	let t10;
+	if ($[16] !== collections) {
+		t8 = /* @__PURE__ */ jsx(MissingFromLocaleGroup, { collections });
+		$[16] = collections;
+		$[17] = t8;
+	} else t8 = $[17];
 	let t9;
-	if ($[13] !== 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];
-		$[13] = lightboxFileId;
-		$[14] = t10;
-		$[15] = t9;
-	} else {
-		t10 = $[14];
-		t9 = $[15];
-	}
-	useEffect(t9, t10);
+	if ($[18] !== collections || $[19] !== isError || $[20] !== t7 || $[21] !== t8) {
+		t9 = /* @__PURE__ */ jsx(ContentSidebar, {
+			collections,
+			selectedCollectionId: t7,
+			collectionsError: isError,
+			children: t8
+		});
+		$[18] = collections;
+		$[19] = isError;
+		$[20] = t7;
+		$[21] = t8;
+		$[22] = t9;
+	} else t9 = $[22];
+	let t10;
+	if ($[23] !== collection || $[24] !== isPending || $[25] !== projectUuid || $[26] !== route) {
+		t10 = route && !collection ? /* @__PURE__ */ jsx("div", {
+			role: isPending ? "status" : "alert",
+			className: "text-muted-foreground p-6 text-sm",
+			children: isPending ? "Loading collection…" : "Collection not found."
+		}) : collection ? /* @__PURE__ */ jsx(ContentCollection, {
+			projectUuid,
+			collection
+		}, collection.collectionId) : /* @__PURE__ */ jsx(ContentAssets, {});
+		$[23] = collection;
+		$[24] = isPending;
+		$[25] = projectUuid;
+		$[26] = route;
+		$[27] = t10;
+	} else t10 = $[27];
 	let t11;
-	if ($[16] === Symbol.for("react.memo_cache_sentinel")) {
-		t11 = /* @__PURE__ */ jsx(ContentSidebar, {});
-		$[16] = t11;
-	} else t11 = $[16];
+	if ($[28] !== t10 || $[29] !== t9) {
+		t11 = /* @__PURE__ */ jsxs("div", {
+			className: "flex min-h-0 flex-1 flex-row",
+			children: [t9, t10]
+		});
+		$[28] = t10;
+		$[29] = t9;
+		$[30] = t11;
+	} else t11 = $[30];
 	let t12;
-	if ($[17] !== didDragRef) {
-		t12 = () => {
-			if (didDragRef.current) {
-				didDragRef.current = false;
-				return;
-			}
-			setSelectedIds(/* @__PURE__ */ new Set());
-		};
-		$[17] = didDragRef;
-		$[18] = t12;
-	} else t12 = $[18];
+	if ($[31] !== projectUuid) {
+		t12 = /* @__PURE__ */ jsx(ContentCollectionItemSheet, { projectUuid });
+		$[31] = projectUuid;
+		$[32] = t12;
+	} else t12 = $[32];
 	let t13;
-	if ($[19] !== files) {
-		t13 = files === void 0 && /* @__PURE__ */ jsx("div", {
-			className: "grid grid-cols-[repeat(auto-fill,minmax(220px,1fr))] gap-4",
-			children: Array.from({ length: 12 }, _temp2)
-		});
-		$[19] = files;
-		$[20] = t13;
-	} else t13 = $[20];
-	let t14;
-	if ($[21] !== files?.length) {
-		t14 = files?.length === 0 && /* @__PURE__ */ jsx("div", {
-			className: "flex h-full flex-1 items-center justify-center",
-			children: /* @__PURE__ */ jsx("p", {
-				className: "text-muted-foreground",
-				children: "No assets yet"
-			})
-		});
-		$[21] = files?.length;
-		$[22] = t14;
-	} else t14 = $[22];
-	let t15;
-	if ($[23] !== files || $[24] !== selectedIds) {
-		t15 = 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(String(file.id)),
-				onSelect: () => {
-					setSelectedIds((prev_0) => {
-						const next = new Set(prev_0);
-						if (next.has(String(file.id))) next.delete(String(file.id));
-						else next.add(String(file.id));
-						return next;
-					});
-				},
-				onOpen: () => setLightboxFileId(file.id)
-			}, file.id))
-		});
-		$[23] = files;
-		$[24] = selectedIds;
-		$[25] = t15;
-	} else t15 = $[25];
-	let t16;
-	if ($[26] !== selectionRect) {
-		t16 = 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
-			}
-		});
-		$[26] = selectionRect;
-		$[27] = t16;
-	} else t16 = $[27];
-	let t17;
-	if ($[28] !== handlers.onPointerDown || $[29] !== handlers.onPointerMove || $[30] !== handlers.onPointerUp || $[31] !== t12 || $[32] !== t13 || $[33] !== t14 || $[34] !== t15 || $[35] !== t16) {
-		t17 = /* @__PURE__ */ jsxs(PanelContent, {
-			ref: containerRef,
-			className: "relative p-4 select-none",
-			onClick: t12,
-			onPointerDown: handlers.onPointerDown,
-			onPointerMove: handlers.onPointerMove,
-			onPointerUp: handlers.onPointerUp,
-			children: [
-				t13,
-				t14,
-				t15,
-				t16
-			]
-		});
-		$[28] = handlers.onPointerDown;
-		$[29] = handlers.onPointerMove;
-		$[30] = handlers.onPointerUp;
-		$[31] = t12;
-		$[32] = t13;
-		$[33] = t14;
-		$[34] = t15;
-		$[35] = t16;
-		$[36] = t17;
-	} else t17 = $[36];
-	let t18;
-	if ($[37] !== t17 || $[38] !== uploadFiles) {
-		t18 = /* @__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: t17
-			})
-		});
-		$[37] = t17;
-		$[38] = uploadFiles;
-		$[39] = t18;
-	} else t18 = $[39];
-	let t19;
-	if ($[40] !== clearAll || $[41] !== uploads) {
-		t19 = /* @__PURE__ */ jsx(UploadProgressDrawer, {
-			uploads,
-			onClose: clearAll
-		});
-		$[40] = clearAll;
-		$[41] = uploads;
-		$[42] = t19;
-	} else t19 = $[42];
-	let t20;
-	if ($[43] !== deleteFiles || $[44] !== selectedIds) {
-		t20 = 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].map(Number) }),
-				children: deleteFiles.isPending ? "Deleting…" : "Delete"
-			})]
-		});
-		$[43] = deleteFiles;
-		$[44] = selectedIds;
-		$[45] = t20;
-	} else t20 = $[45];
-	let t21;
-	if ($[46] !== lightboxFileId) {
-		t21 = lightboxFileId && /* @__PURE__ */ jsx(AssetLightbox, {
-			open: true,
-			onOpenChange: (open) => {
-				if (!open) setLightboxFileId(null);
-			},
-			fileId: lightboxFileId
-		});
-		$[46] = lightboxFileId;
-		$[47] = t21;
-	} else t21 = $[47];
-	let t22;
-	if ($[48] !== t18 || $[49] !== t19 || $[50] !== t20 || $[51] !== t21) {
-		t22 = /* @__PURE__ */ jsxs("div", {
-			className: "flex min-h-0 flex-1 flex-row",
-			children: [
-				t11,
-				t18,
-				t19,
-				t20,
-				t21
-			]
+	if ($[33] !== closeRouteTarget || $[34] !== routeTarget || $[35] !== t11 || $[36] !== t12) {
+		t13 = /* @__PURE__ */ jsxs(CollectionItemSheetProvider, {
+			routeTarget,
+			onRouteTargetClose: closeRouteTarget,
+			children: [t11, t12]
 		});
-		$[48] = t18;
-		$[49] = t19;
-		$[50] = t20;
-		$[51] = t21;
-		$[52] = t22;
-	} else t22 = $[52];
-	return t22;
+		$[33] = closeRouteTarget;
+		$[34] = routeTarget;
+		$[35] = t11;
+		$[36] = t12;
+		$[37] = t13;
+	} else t13 = $[37];
+	return t13;
 };
-function _temp(prev) {
-	return prev.size === 0 ? prev : /* @__PURE__ */ new Set();
-}
-function _temp2(_, i) {
-	return /* @__PURE__ */ jsx(AssetCardSkeleton, {}, i);
-}
 
 //#endregion
 export { CamoxContent };

package/dist/features/content/CollectionItemSheetContext.js

@@ -0,0 +1,106 @@
+import { c } from "react/compiler-runtime";
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/features/content/CollectionItemSheetContext.tsx
+const CollectionItemSheetContext = React.createContext(null);
+function CollectionItemSheetProvider(t0) {
+	const $ = c(18);
+	const { children, onRouteTargetClose, routeTarget: t1 } = t0;
+	const routeTarget = t1 === void 0 ? null : t1;
+	const [requestedTarget, setRequestedTarget] = React.useState(null);
+	const target = requestedTarget ?? routeTarget;
+	const activeTarget = React.useRef(target);
+	let t2;
+	if ($[0] !== target) {
+		t2 = () => {
+			activeTarget.current = target;
+		};
+		$[0] = target;
+		$[1] = t2;
+	} else t2 = $[1];
+	React.useLayoutEffect(t2);
+	let t3;
+	let t4;
+	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+		t3 = () => () => {
+			activeTarget.current = null;
+		};
+		t4 = [];
+		$[2] = t3;
+		$[3] = t4;
+	} else {
+		t3 = $[2];
+		t4 = $[3];
+	}
+	React.useEffect(t3, t4);
+	let t5;
+	if ($[4] !== onRouteTargetClose || $[5] !== requestedTarget || $[6] !== routeTarget) {
+		t5 = () => {
+			activeTarget.current = null;
+			if (requestedTarget) {
+				setRequestedTarget(null);
+				return;
+			}
+			if (routeTarget) onRouteTargetClose(routeTarget);
+		};
+		$[4] = onRouteTargetClose;
+		$[5] = requestedTarget;
+		$[6] = routeTarget;
+		$[7] = t5;
+	} else t5 = $[7];
+	const close = t5;
+	let t6;
+	if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
+		t6 = (next) => {
+			activeTarget.current = next;
+			setRequestedTarget(next);
+		};
+		$[8] = t6;
+	} else t6 = $[8];
+	const open = t6;
+	let t7;
+	if ($[9] !== close) {
+		t7 = async (savedTarget, item) => {
+			if (activeTarget.current !== savedTarget) return;
+			await savedTarget.onSaved?.(item);
+			if (activeTarget.current === savedTarget) close();
+		};
+		$[9] = close;
+		$[10] = t7;
+	} else t7 = $[10];
+	const complete = t7;
+	let t8;
+	if ($[11] !== close || $[12] !== complete || $[13] !== target) {
+		t8 = {
+			close,
+			open,
+			complete,
+			target
+		};
+		$[11] = close;
+		$[12] = complete;
+		$[13] = target;
+		$[14] = t8;
+	} else t8 = $[14];
+	const value = t8;
+	let t9;
+	if ($[15] !== children || $[16] !== value) {
+		t9 = /* @__PURE__ */ jsx(CollectionItemSheetContext.Provider, {
+			value,
+			children
+		});
+		$[15] = children;
+		$[16] = value;
+		$[17] = t9;
+	} else t9 = $[17];
+	return t9;
+}
+function useCollectionItemSheet() {
+	const context = React.useContext(CollectionItemSheetContext);
+	if (!context) throw new Error("useCollectionItemSheet must be used within CollectionItemSheetProvider");
+	return context;
+}
+
+//#endregion
+export { CollectionItemSheetProvider, useCollectionItemSheet };