camox 0.44.0 → 0.46.0

package/dist/features/preview/components/MobilePreviewDrawer.js

@@ -1,19 +1,16 @@
 import { useAuthContext } from "../../../lib/auth.js";
-import { projectQueries } from "../../../lib/queries.js";
+import { reads, useReadQuery } from "../../../lib/studio-reads.js";
 import { cn } from "../../../lib/utils.js";
-import { previewStore, selectionBlockId } from "../previewStore.js";
+import { previewStore, selectionBlockId, selectionForPage } from "../previewStore.js";
 import { UserButton } from "../../studio/components/UserButton.js";
+import { PageInfo, PageMarkdownContent, PageSeoContent } from "./PageInfo.js";
+import { PageNavigatorHeader } from "./PageNavigatorHeader.js";
 import { PageTree } from "./PageTree.js";
-import { PageNavigatorHeader } from "./PageNavigatorSidebar.js";
-import { AddBlockSidebar } from "./AddBlockSidebar.js";
-import { PageEditorSidebar } from "./PageEditorSidebar.js";
-import { PageInfoSidebar, PageMarkdownContent, PageSeoContent } from "./PageInfoSidebar.js";
+import { SelectionEditor } from "./SelectionEditor.js";
 import { c } from "react/compiler-runtime";
-import { useQuery } from "@tanstack/react-query";
 import * as React from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { useSelector } from "@xstate/store-react";
-import { Button } from "@camox/ui/button";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { ArrowLeft, FileText, Info, Layers, Search, Settings } from "lucide-react";
 
 //#region src/features/preview/components/MobilePreviewDrawer.tsx
@@ -32,17 +29,16 @@ function MobilePreviewDrawer({ page, projectName }) {
 	const [isDragging, setIsDragging] = React.useState(false);
 	const [screen, setScreen] = React.useState("root");
 	const authCtx = useAuthContext();
-	const { data: project } = useQuery(projectQueries.getBySlug(authCtx.projectSlug));
+	const { data: project } = useReadQuery(reads.project({ projectUuid: authCtx.projectUuid }));
 	const dragStartRef = React.useRef({
 		y: 0,
 		height: COLLAPSED_HEIGHT
 	});
 	const dragDistanceRef = React.useRef(0);
 	const rootContentRef = React.useRef(null);
-	const selection = useSelector(previewStore, (state) => state.context.selection);
-	const isAddBlockSidebarOpen = useSelector(previewStore, (state_0) => state_0.context.isAddBlockSidebarOpen);
+	const selection = useSelector(previewStore, (state) => selectionForPage(state.context, page.id));
 	const selectedBlockId = selectionBlockId(selection);
-	const isContentScreen = selectedBlockId != null || isAddBlockSidebarOpen;
+	const isContentScreen = selectedBlockId != null;
 	const isTileScreen = screen !== "root" || isContentScreen;
 	const showScreenHeader = isExpanded && isTileScreen;
 	const getExpandedHeight = React.useCallback(() => {
@@ -54,7 +50,6 @@ function MobilePreviewDrawer({ page, projectName }) {
 	const goBack = () => {
 		if (isContentScreen) {
 			previewStore.send({ type: "clearSelection" });
-			previewStore.send({ type: "closeAddBlockSidebar" });
 			setScreen("blocks");
 			return;
 		}
@@ -64,9 +59,11 @@ function MobilePreviewDrawer({ page, projectName }) {
 		setIsExpanded(expanded);
 		setHeight(expanded ? getExpandedHeight() : COLLAPSED_HEIGHT);
 	}, [getExpandedHeight]);
-	React.useEffect(() => {
+	const [previousPageId, setPreviousPageId] = React.useState(page.id);
+	if (page.id !== previousPageId) {
+		setPreviousPageId(page.id);
 		setScreen("root");
-	}, [page.id]);
+	}
 	React.useEffect(() => {
 		const handleResize = () => {
 			if (!isExpanded || isDragging) return;
@@ -94,29 +91,31 @@ function MobilePreviewDrawer({ page, projectName }) {
 		dragDistanceRef.current = 0;
 		setIsDragging(true);
 	};
-	const handlePointerMove = (event_0) => {
-		if (!event_0.currentTarget.hasPointerCapture(event_0.pointerId)) return;
-		const distance = dragStartRef.current.y - event_0.clientY;
+	const handlePointerMove = (event) => {
+		if (!event.currentTarget.hasPointerCapture(event.pointerId)) return;
+		const distance = dragStartRef.current.y - event.clientY;
 		dragDistanceRef.current = distance;
 		const nextHeight = dragStartRef.current.height + distance;
 		setHeight(Math.min(getExpandedHeight(), Math.max(COLLAPSED_HEIGHT, nextHeight)));
 	};
-	const finishDrag = (event_1, onTap = () => snapTo(!isExpanded)) => {
-		if (event_1.currentTarget.hasPointerCapture(event_1.pointerId)) event_1.currentTarget.releasePointerCapture(event_1.pointerId);
+	const finishDrag = (event, onTap = () => snapTo(!isExpanded)) => {
+		if (event.currentTarget.hasPointerCapture(event.pointerId)) event.currentTarget.releasePointerCapture(event.pointerId);
 		setIsDragging(false);
-		const distance_0 = dragDistanceRef.current;
-		if (Math.abs(distance_0) < DRAG_THRESHOLD) {
+		const distance = dragDistanceRef.current;
+		if (Math.abs(distance) < DRAG_THRESHOLD) {
 			onTap();
 			return;
 		}
-		if (isExpanded && distance_0 < -40) {
+		if (isExpanded && distance < -40) {
 			snapTo(false);
 			return;
 		}
-		snapTo(dragStartRef.current.height + distance_0 >= (COLLAPSED_HEIGHT + getExpandedHeight()) / 2);
+		const draggedHeight = dragStartRef.current.height + distance;
+		const midpoint = (COLLAPSED_HEIGHT + getExpandedHeight()) / 2;
+		snapTo(draggedHeight >= midpoint);
 	};
-	const cancelDrag = (event_2) => {
-		if (event_2.currentTarget.hasPointerCapture(event_2.pointerId)) event_2.currentTarget.releasePointerCapture(event_2.pointerId);
+	const cancelDrag = (event) => {
+		if (event.currentTarget.hasPointerCapture(event.pointerId)) event.currentTarget.releasePointerCapture(event.pointerId);
 		setIsDragging(false);
 		snapTo(isExpanded);
 	};
@@ -131,12 +130,12 @@ function MobilePreviewDrawer({ page, projectName }) {
 			className: "relative h-12 touch-none border-b px-3 pt-2.5 pb-1.5 select-none",
 			onPointerDown: handlePointerDown,
 			onPointerMove: handlePointerMove,
-			onPointerUp: (event_3) => finishDrag(event_3, goBack),
+			onPointerUp: (event) => finishDrag(event, goBack),
 			onPointerCancel: cancelDrag,
 			children: [/* @__PURE__ */ jsx("span", { className: "bg-muted-foreground/60 absolute top-1 left-1/2 h-1 w-12 -translate-x-1/2 rounded-full" }), /* @__PURE__ */ jsxs("button", {
 				type: "button",
-				onClick: (event_4) => {
-					if (event_4.detail === 0) goBack();
+				onClick: (event) => {
+					if (event.detail === 0) goBack();
 				},
 				className: "hover:bg-accent flex h-8 w-full items-center gap-2 rounded-lg px-2 text-left text-sm font-semibold",
 				"aria-label": isContentScreen ? "Back to page content" : "Back to page overview",
@@ -151,10 +150,10 @@ function MobilePreviewDrawer({ page, projectName }) {
 				"aria-expanded": isExpanded,
 				onPointerDown: handlePointerDown,
 				onPointerMove: handlePointerMove,
-				onPointerUp: (event_5) => finishDrag(event_5),
+				onPointerUp: (event) => finishDrag(event),
 				onPointerCancel: cancelDrag,
-				onClick: (event_6) => {
-					if (event_6.detail === 0) snapTo(!isExpanded);
+				onClick: (event) => {
+					if (event.detail === 0) snapTo(!isExpanded);
 				},
 				children: [/* @__PURE__ */ jsx("span", { className: "bg-muted-foreground/60 absolute top-2 left-1/2 h-1 w-12 -translate-x-1/2 rounded-full" }), /* @__PURE__ */ jsx("span", {
 					className: "truncate pr-4 text-sm font-medium",
@@ -168,67 +167,53 @@ function MobilePreviewDrawer({ page, projectName }) {
 			id: "camox-mobile-drawer-content",
 			inert: !isExpanded,
 			className: cn("flex min-h-0 flex-col overflow-hidden", isTileScreen && "pb-[env(safe-area-inset-bottom)]", showScreenHeader ? "h-[calc(100%-3rem)]" : "h-[calc(100%-5rem)]"),
-			children: selectedBlockId != null ? /* @__PURE__ */ jsx(PageEditorSidebar, {}) : isAddBlockSidebarOpen ? /* @__PURE__ */ jsx(AddBlockSidebar, {}) : /* @__PURE__ */ jsxs("div", {
+			children: selectedBlockId != null ? /* @__PURE__ */ jsx(SelectionEditor, {}) : /* @__PURE__ */ jsxs("div", {
 				className: "min-h-0 flex-1 overflow-auto",
 				children: [
 					screen === "root" && /* @__PURE__ */ jsxs("div", {
 						ref: rootContentRef,
 						className: "pb-[env(safe-area-inset-bottom)]",
-						children: [
-							/* @__PURE__ */ jsx(PageNavigatorHeader, { page }),
-							/* @__PURE__ */ jsx("div", {
-								className: "px-3 pt-3",
-								children: /* @__PURE__ */ jsx(Button, {
-									type: "button",
-									variant: "outline",
-									className: "w-full",
-									disabled: page.status === "published" || page.livePublishedCheckpointId == null,
-									onClick: () => previewStore.send({ type: "viewLivePage" }),
-									children: "View live page"
+						children: [/* @__PURE__ */ jsx(PageNavigatorHeader, {}), /* @__PURE__ */ jsxs("div", {
+							className: "grid grid-cols-2 gap-2 p-3",
+							children: [
+								/* @__PURE__ */ jsx(DrawerTile, {
+									title: "Page content",
+									icon: Layers,
+									onClick: () => setScreen("blocks"),
+									fullWidth: true
+								}),
+								/* @__PURE__ */ jsx(DrawerTile, {
+									title: "About this page",
+									icon: Info,
+									onClick: () => setScreen("about")
+								}),
+								/* @__PURE__ */ jsx(DrawerTile, {
+									title: "SEO metadata",
+									icon: Search,
+									onClick: () => setScreen("seo")
+								}),
+								/* @__PURE__ */ jsx(DrawerTile, {
+									title: "Page markdown",
+									icon: FileText,
+									onClick: () => setScreen("markdown")
+								}),
+								/* @__PURE__ */ jsx(DrawerTile, {
+									title: "Project settings",
+									icon: Settings,
+									onClick: () => {
+										if (!project) return;
+										window.open(`${authCtx.authenticationUrl}/${project.organizationSlug}/${project.slug}/overview`, "_blank", "noopener,noreferrer");
+									},
+									disabled: !project
 								})
-							}),
-							/* @__PURE__ */ jsxs("div", {
-								className: "grid grid-cols-2 gap-2 p-3",
-								children: [
-									/* @__PURE__ */ jsx(DrawerTile, {
-										title: "Page content",
-										icon: Layers,
-										onClick: () => setScreen("blocks"),
-										fullWidth: true
-									}),
-									/* @__PURE__ */ jsx(DrawerTile, {
-										title: "About this page",
-										icon: Info,
-										onClick: () => setScreen("about")
-									}),
-									/* @__PURE__ */ jsx(DrawerTile, {
-										title: "SEO metadata",
-										icon: Search,
-										onClick: () => setScreen("seo")
-									}),
-									/* @__PURE__ */ jsx(DrawerTile, {
-										title: "Page markdown",
-										icon: FileText,
-										onClick: () => setScreen("markdown")
-									}),
-									/* @__PURE__ */ jsx(DrawerTile, {
-										title: "Project settings",
-										icon: Settings,
-										onClick: () => {
-											if (!project) return;
-											window.open(`${authCtx.authenticationUrl}/${project.organizationSlug}/${project.slug}/overview`, "_blank", "noopener,noreferrer");
-										},
-										disabled: !project
-									})
-								]
-							})
-						]
+							]
+						})]
 					}),
 					screen === "blocks" && /* @__PURE__ */ jsx("div", {
 						className: "flex flex-col gap-2 p-2",
 						children: /* @__PURE__ */ jsx(PageTree, {})
 					}),
-					screen === "about" && /* @__PURE__ */ jsx(PageInfoSidebar, {
+					screen === "about" && /* @__PURE__ */ jsx(PageInfo, {
 						pageId: page.id,
 						scrollable: false,
 						aboutOnly: true
@@ -250,38 +235,34 @@ function MobilePreviewDrawer({ page, projectName }) {
 	});
 }
 function DrawerTile(t0) {
-	const $ = c(13);
-	if ($[0] !== "621776a19ae594038e7ff74376eaee55067cbd45ac5f2b72eb73e9a66d3c4ae0") {
-		for (let $i = 0; $i < 13; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "621776a19ae594038e7ff74376eaee55067cbd45ac5f2b72eb73e9a66d3c4ae0";
-	}
+	const $ = c(12);
 	const { title, icon: Icon, onClick, fullWidth: t1, disabled: t2 } = t0;
 	const fullWidth = t1 === void 0 ? false : t1;
 	const disabled = t2 === void 0 ? false : t2;
 	const t3 = fullWidth && "col-span-2";
 	let t4;
-	if ($[1] !== t3) {
+	if ($[0] !== t3) {
 		t4 = cn("bg-muted/40 hover:bg-muted flex flex-col items-start justify-between rounded-xl border p-3 text-left transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring", t3);
-		$[1] = t3;
-		$[2] = t4;
-	} else t4 = $[2];
+		$[0] = t3;
+		$[1] = t4;
+	} else t4 = $[1];
 	let t5;
-	if ($[3] !== Icon) {
+	if ($[2] !== Icon) {
 		t5 = /* @__PURE__ */ jsx(Icon, { className: "text-muted-foreground size-5" });
-		$[3] = Icon;
-		$[4] = t5;
-	} else t5 = $[4];
+		$[2] = Icon;
+		$[3] = t5;
+	} else t5 = $[3];
 	let t6;
-	if ($[5] !== title) {
+	if ($[4] !== title) {
 		t6 = /* @__PURE__ */ jsx("span", {
 			className: "mt-3 text-xs font-medium",
 			children: title
 		});
-		$[5] = title;
-		$[6] = t6;
-	} else t6 = $[6];
+		$[4] = title;
+		$[5] = t6;
+	} else t6 = $[5];
 	let t7;
-	if ($[7] !== disabled || $[8] !== onClick || $[9] !== t4 || $[10] !== t5 || $[11] !== t6) {
+	if ($[6] !== disabled || $[7] !== onClick || $[8] !== t4 || $[9] !== t5 || $[10] !== t6) {
 		t7 = /* @__PURE__ */ jsxs("button", {
 			type: "button",
 			onClick,
@@ -289,13 +270,13 @@ function DrawerTile(t0) {
 			className: t4,
 			children: [t5, t6]
 		});
-		$[7] = disabled;
-		$[8] = onClick;
-		$[9] = t4;
-		$[10] = t5;
-		$[11] = t6;
-		$[12] = t7;
-	} else t7 = $[12];
+		$[6] = disabled;
+		$[7] = onClick;
+		$[8] = t4;
+		$[9] = t5;
+		$[10] = t6;
+		$[11] = t7;
+	} else t7 = $[11];
 	return t7;
 }