camox 0.41.1 → 0.43.0

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

@@ -10,9 +10,9 @@ import { useSelector } from "@xstate/store-react";
 //#region src/features/preview/components/Overlays.tsx
 function CuratedAddBlockListener() {
 	const $ = c(4);
-	if ($[0] !== "4124232297ed208895aa29251e0b658d39227311caca40cca61d1b2baedf5559") {
+	if ($[0] !== "6fe49b666f3f81b9063fd01dd7ea74a4df9732064d2b113c5ce2770c9992f6b4") {
 		for (let $i = 0; $i < 4; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "4124232297ed208895aa29251e0b658d39227311caca40cca61d1b2baedf5559";
+		$[0] = "6fe49b666f3f81b9063fd01dd7ea74a4df9732064d2b113c5ce2770c9992f6b4";
 	}
 	const { pageBlocks } = usePageBlocks(usePreviewedPage());
 	let t0;
@@ -35,8 +35,7 @@ function CuratedAddBlockListener() {
 					}
 					previewStore.send({
 						type: "openAddBlockSidebar",
-						afterPosition,
-						via: "overlay"
+						afterPosition
 					});
 				}
 			};
@@ -55,20 +54,18 @@ function CuratedAddBlockListener() {
 	return null;
 }
 const Overlays = (t0) => {
-	const $ = c(13);
-	if ($[0] !== "4124232297ed208895aa29251e0b658d39227311caca40cca61d1b2baedf5559") {
-		for (let $i = 0; $i < 13; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "4124232297ed208895aa29251e0b658d39227311caca40cca61d1b2baedf5559";
+	const $ = c(11);
+	if ($[0] !== "6fe49b666f3f81b9063fd01dd7ea74a4df9732064d2b113c5ce2770c9992f6b4") {
+		for (let $i = 0; $i < 11; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
+		$[0] = "6fe49b666f3f81b9063fd01dd7ea74a4df9732064d2b113c5ce2770c9992f6b4";
 	}
 	const { iframeElement, canAddBlocks: t1 } = t0;
 	const canAddBlocks = t1 === void 0 ? false : t1;
-	const isPageEditorSidebarOpen = useSelector(previewStore, _temp);
-	const selection = useSelector(previewStore, _temp2);
-	const peekedBlock = useSelector(previewStore, _temp3);
+	const selection = useSelector(previewStore, _temp);
+	const peekedBlock = useSelector(previewStore, _temp2);
 	let t2;
-	if ($[1] !== iframeElement?.contentWindow || $[2] !== isPageEditorSidebarOpen || $[3] !== peekedBlock || $[4] !== selection) {
+	if ($[1] !== iframeElement?.contentWindow || $[2] !== peekedBlock || $[3] !== selection) {
 		t2 = () => {
-			if (isPageEditorSidebarOpen) return;
 			if (peekedBlock) return;
 			if (!selection) return;
 			if (selection.type !== "block-field" && selection.type !== "item-field") return;
@@ -82,42 +79,36 @@ const Overlays = (t0) => {
 			iframeElement?.contentWindow?.postMessage(message, "*");
 		};
 		$[1] = iframeElement?.contentWindow;
-		$[2] = isPageEditorSidebarOpen;
-		$[3] = peekedBlock;
-		$[4] = selection;
-		$[5] = t2;
-	} else t2 = $[5];
+		$[2] = peekedBlock;
+		$[3] = selection;
+		$[4] = t2;
+	} else t2 = $[4];
 	let t3;
-	if ($[6] !== iframeElement || $[7] !== isPageEditorSidebarOpen || $[8] !== peekedBlock || $[9] !== selection) {
+	if ($[5] !== iframeElement || $[6] !== peekedBlock || $[7] !== selection) {
 		t3 = [
 			selection,
-			isPageEditorSidebarOpen,
 			peekedBlock,
 			iframeElement
 		];
-		$[6] = iframeElement;
-		$[7] = isPageEditorSidebarOpen;
-		$[8] = peekedBlock;
-		$[9] = selection;
-		$[10] = t3;
-	} else t3 = $[10];
+		$[5] = iframeElement;
+		$[6] = peekedBlock;
+		$[7] = selection;
+		$[8] = t3;
+	} else t3 = $[8];
 	React.useEffect(t2, t3);
 	let t4;
-	if ($[11] !== canAddBlocks) {
+	if ($[9] !== canAddBlocks) {
 		t4 = canAddBlocks ? /* @__PURE__ */ jsx(CuratedAddBlockListener, {}) : null;
-		$[11] = canAddBlocks;
-		$[12] = t4;
-	} else t4 = $[12];
+		$[9] = canAddBlocks;
+		$[10] = t4;
+	} else t4 = $[10];
 	return t4;
 };
 function _temp(state) {
-	return state.context.isPageEditorSidebarOpen;
+	return state.context.selection;
 }
 function _temp2(state_0) {
-	return state_0.context.selection;
-}
-function _temp3(state_1) {
-	return state_1.context.peekedBlock;
+	return state_0.context.peekedBlock;
 }
 
 //#endregion

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

@@ -1,12 +1,14 @@
 import { isFileMarker } from "../../../lib/normalized-data.js";
+import { useCamoxApp } from "../../provider/components/CamoxAppContext.js";
 import { blockMutations, blockQueries, fileQueries, repeatableItemMutations } from "../../../lib/queries.js";
 import { cn } from "../../../lib/utils.js";
-import { useCamoxApp } from "../../provider/components/CamoxAppContext.js";
-import { trackClientEvent } from "../../../lib/telemetry-client.js";
+import { areCommentsEnabled } from "../commentsEnabled.js";
 import { previewStore, selectionBlockId, selectionField, selectionItemId } from "../previewStore.js";
 import { useRequireDraftSource } from "../../../core/hooks/useRequireDraftSource.js";
 import { fieldTypesDictionary } from "../../../core/lib/fieldTypes.js";
 import { SingleAssetFieldEditor } from "./AssetFieldEditor.js";
+import { SidebarSection, SidebarSectionContent, SidebarSectionHeader } from "./SidebarSection.js";
+import { AttachedComments } from "./AttachedComments.js";
 import { useRepeatableItemActions } from "./useRepeatableItemActions.js";
 import { ItemFieldsEditor, formatFieldName } from "./ItemFieldsEditor.js";
 import { LinkFieldEditor } from "./LinkFieldEditor.js";
@@ -16,10 +18,11 @@ import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useSelector } from "@xstate/store-react";
 import { Button } from "@camox/ui/button";
-import { CircleMinus, CirclePlus, CornerLeftUp } from "lucide-react";
+import { CirclePlus, Trash2 } from "lucide-react";
 import { Spinner } from "@camox/ui/spinner";
 import { Label } from "@camox/ui/label";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@camox/ui/select";
+import { ButtonGroup } from "@camox/ui/button-group";
 import { Switch } from "@camox/ui/switch";
 
 //#region src/features/preview/components/PageEditorSidebar.tsx
@@ -89,7 +92,7 @@ const buildAncestorChain = (itemId, itemsMap) => {
 	}
 	return chain;
 };
-const PageEditorSidebar = () => {
+const PageEditorSidebar = ({ pageId }) => {
 	const camoxApp = useCamoxApp();
 	const updateContent = useMutation(blockMutations.updateContent());
 	const updateSettings = useMutation(blockMutations.updateSettings());
@@ -104,7 +107,7 @@ const PageEditorSidebar = () => {
 	}, [iframeElement]);
 	const blockId = selectionBlockId(selection);
 	const currentItemId = selectionItemId(selection);
-	const fieldInfo = selectionField(selection);
+	const selectedField = selectionField(selection);
 	const { data: blockBundle } = useQuery({
 		...blockQueries.get(blockId),
 		enabled: blockId != null
@@ -196,11 +199,15 @@ const PageEditorSidebar = () => {
 		for (const [key, value_0] of Object.entries(rawCurrentData)) resolved_0[key] = resolveValue(value_0);
 		return resolved_0;
 	}, [rawCurrentData, filesMap]);
+	const fieldInfo = selectedField ? {
+		...selectedField,
+		fieldType: currentSchema?.properties?.[selectedField.fieldName]?.fieldType ?? selectedField.fieldType
+	} : null;
 	const isViewingLink = fieldInfo?.fieldType === "Link";
 	const linkFieldName = isViewingLink ? fieldInfo.fieldName : null;
-	const isViewingImage = fieldInfo?.fieldType === "Image";
+	const isViewingImage = fieldInfo?.fieldType === "Image" || fieldInfo?.fieldType === "ImageList";
 	const imageFieldName = isViewingImage ? fieldInfo.fieldName : null;
-	const isViewingFile = fieldInfo?.fieldType === "File";
+	const isViewingFile = fieldInfo?.fieldType === "File" || fieldInfo?.fieldType === "FileList";
 	const fileFieldName = isViewingFile ? fieldInfo.fieldName : null;
 	const isViewingAsset = isViewingImage || isViewingFile;
 	const assetFieldName = imageFieldName ?? fileFieldName;
@@ -214,34 +221,10 @@ const PageEditorSidebar = () => {
 		assetFieldName,
 		currentSchema
 	]);
-	const sessionDirtyRef = React.useRef(false);
-	const trackedBlockIdRef = React.useRef(null);
-	React.useEffect(() => {
-		if (!block) {
-			trackedBlockIdRef.current = null;
-			return;
-		}
-		if (trackedBlockIdRef.current === block.id) return;
-		trackedBlockIdRef.current = block.id;
-		sessionDirtyRef.current = false;
-		trackClientEvent("page_editor_sidebar_opened", { blockType: block.type });
-	}, [block]);
-	React.useEffect(() => {
-		if (!block) return;
-		return () => {
-			if (!sessionDirtyRef.current) return;
-			trackClientEvent("block_edited", {
-				via: "page-editor-sidebar",
-				blockType: block.type
-			});
-			sessionDirtyRef.current = false;
-		};
-	}, [block]);
 	const fieldIdPrefix = React.useId();
 	const handleBlockFieldChange = React.useCallback((fieldName, value_1) => {
 		if (!block) return;
 		if (!requireDraft()) return;
-		sessionDirtyRef.current = true;
 		updateContent.mutate({
 			id: block.id,
 			content: { [fieldName]: value_1 }
@@ -254,7 +237,6 @@ const PageEditorSidebar = () => {
 	const handleItemFieldChange = React.useCallback((fieldName_0, value_2) => {
 		if (currentItemId == null) return;
 		if (!requireDraft()) return;
-		sessionDirtyRef.current = true;
 		updateRepeatableContent.mutate({
 			id: currentItemId,
 			content: { [fieldName_0]: value_2 }
@@ -287,16 +269,35 @@ const PageEditorSidebar = () => {
 				blockId: block.id
 			})
 		},
-		...ancestorChain.map((ancestor) => ({
-			key: `item-${ancestor.id}`,
+		...ancestorChain.flatMap((ancestor) => [{
+			key: `repeater-${ancestor.id}`,
 			label: getArraySchemaForItem(blockDef._internal.contentSchema, ancestor.id, itemsMap)?.title ?? formatFieldName(ancestor.fieldName),
+			isCurrent: false,
+			onClick: () => previewStore.send({
+				type: "setSelection",
+				selection: ancestor.parentItemId == null ? {
+					type: "block-field",
+					blockId: block.id,
+					fieldName: ancestor.fieldName,
+					fieldType: "Repeater"
+				} : {
+					type: "item-field",
+					blockId: block.id,
+					itemId: ancestor.parentItemId,
+					fieldName: ancestor.fieldName,
+					fieldType: "Repeater"
+				}
+			})
+		}, {
+			key: `item-${ancestor.id}`,
+			label: ancestor.summary || "Item",
 			isCurrent: ancestor.id === currentItemId && !fieldHasOwnView && ancestor.id === ancestorChain[ancestorChain.length - 1]?.id,
 			onClick: () => previewStore.send({
 				type: "selectItem",
 				blockId: block.id,
 				itemId: ancestor.id
 			})
-		})),
+		}]),
 		...fieldHasOwnView && fieldInfo ? [{
 			key: `field-${fieldInfo.fieldName}`,
 			label: currentSchema?.properties?.[fieldInfo.fieldName]?.title ?? formatFieldName(fieldInfo.fieldName),
@@ -304,8 +305,8 @@ const PageEditorSidebar = () => {
 			onClick: void 0
 		}] : []
 	];
-	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
-		className: "border-border flex flex-col gap-1.5 border-b px-2 py-4",
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(SidebarSection, {
+		divider: "bottom",
 		children: /* @__PURE__ */ jsx("nav", {
 			"aria-label": "Selection path",
 			className: "text-muted-foreground text-sm",
@@ -359,17 +360,43 @@ const PageEditorSidebar = () => {
 			})
 		})
 	}), /* @__PURE__ */ jsx("div", {
-		className: "relative flex-1 overflow-auto",
+		className: "relative min-w-0 flex-1 overflow-x-hidden overflow-y-auto",
 		children: /* @__PURE__ */ jsx("div", { children: isItemLoading ? /* @__PURE__ */ jsx("div", {
 			className: "flex h-full items-center justify-center py-12",
 			children: /* @__PURE__ */ jsx(Spinner, {})
 		}) : /* @__PURE__ */ jsxs(Fragment, { children: [
-			currentItemId == null && !fieldHasOwnView && settingsFields.length > 0 && /* @__PURE__ */ jsxs("div", {
-				className: "border-border space-y-4 border-b px-2 py-4",
-				children: [/* @__PURE__ */ jsx(Label, {
-					className: "text-muted-foreground",
-					children: "Settings"
-				}), settingsFields.map((field) => {
+			!fieldHasOwnView && currentItemId != null && currentItem && /* @__PURE__ */ jsxs(SidebarSection, {
+				divider: "bottom",
+				"aria-label": "List actions",
+				children: [/* @__PURE__ */ jsx(SidebarSectionHeader, { children: "List actions" }), /* @__PURE__ */ jsx(SidebarSectionContent, { children: /* @__PURE__ */ jsxs(ButtonGroup, {
+					"aria-label": "List actions",
+					children: [/* @__PURE__ */ jsxs(Button, {
+						type: "button",
+						variant: "outline",
+						size: "sm",
+						disabled: !canAddSibling,
+						onClick: () => {
+							if (!canAddSibling || !requireDraft()) return;
+							addSibling({ afterPosition: currentItem.position });
+						},
+						children: [/* @__PURE__ */ jsx(CirclePlus, { className: "text-muted-foreground h-4 w-4" }), "Add sibling"]
+					}), /* @__PURE__ */ jsxs(Button, {
+						type: "button",
+						variant: "outline",
+						size: "sm",
+						disabled: !canRemoveCurrent,
+						onClick: () => {
+							if (!canRemoveCurrent || !requireDraft()) return;
+							removeCurrent(currentItemId, { onSuccess: () => previewStore.send({ type: "selectParent" }) });
+						},
+						children: [/* @__PURE__ */ jsx(Trash2, { className: "text-muted-foreground h-4 w-4" }), "Delete"]
+					})]
+				}) })]
+			}),
+			currentItemId == null && !fieldHasOwnView && settingsFields.length > 0 && /* @__PURE__ */ jsxs(SidebarSection, {
+				divider: "bottom",
+				"aria-label": "Block settings",
+				children: [/* @__PURE__ */ jsx(SidebarSectionHeader, { children: "Settings" }), /* @__PURE__ */ jsx(SidebarSectionContent, { children: settingsFields.map((field) => {
 					const label = field.label ?? formatFieldName(field.name);
 					const settingsValues = block.settings ?? {};
 					if (field.fieldType === "Enum") {
@@ -383,7 +410,6 @@ const PageEditorSidebar = () => {
 								value: value_3,
 								onValueChange: (newValue) => {
 									if (!requireDraft()) return;
-									sessionDirtyRef.current = true;
 									updateSettings.mutate({
 										id: block.id,
 										settings: { [field.name]: newValue }
@@ -411,7 +437,6 @@ const PageEditorSidebar = () => {
 								checked,
 								onCheckedChange: (newValue_0) => {
 									if (!requireDraft()) return;
-									sessionDirtyRef.current = true;
 									updateSettings.mutate({
 										id: block.id,
 										settings: { [field.name]: newValue_0 }
@@ -421,14 +446,12 @@ const PageEditorSidebar = () => {
 						}, field.name);
 					}
 					return null;
-				})]
+				}) })]
 			}),
-			currentItemId != null && !fieldHasOwnView && itemSettingsFields.length > 0 && /* @__PURE__ */ jsxs("div", {
-				className: "border-border space-y-4 border-b px-2 py-4",
-				children: [/* @__PURE__ */ jsx(Label, {
-					className: "text-muted-foreground",
-					children: "Settings"
-				}), itemSettingsFields.map((field_0) => {
+			currentItemId != null && !fieldHasOwnView && itemSettingsFields.length > 0 && /* @__PURE__ */ jsxs(SidebarSection, {
+				divider: "bottom",
+				"aria-label": "Item settings",
+				children: [/* @__PURE__ */ jsx(SidebarSectionHeader, { children: "Settings" }), /* @__PURE__ */ jsx(SidebarSectionContent, { children: itemSettingsFields.map((field_0) => {
 					const label_0 = field_0.label ?? formatFieldName(field_0.name);
 					const itemSettingsValues = currentItem?.settings ?? {};
 					const itemSettingsSchemaProps = itemArraySchema?.itemSettingsSchema?.properties;
@@ -443,7 +466,6 @@ const PageEditorSidebar = () => {
 								value: value_4,
 								onValueChange: (newValue_1) => {
 									if (!requireDraft()) return;
-									sessionDirtyRef.current = true;
 									updateRepeatableSettings.mutate({
 										id: currentItemId,
 										settings: { [field_0.name]: newValue_1 }
@@ -471,7 +493,6 @@ const PageEditorSidebar = () => {
 								checked: checked_0,
 								onCheckedChange: (newValue_2) => {
 									if (!requireDraft()) return;
-									sessionDirtyRef.current = true;
 									updateRepeatableSettings.mutate({
 										id: currentItemId,
 										settings: { [field_0.name]: newValue_2 }
@@ -481,7 +502,7 @@ const PageEditorSidebar = () => {
 						}, field_0.name);
 					}
 					return null;
-				})]
+				}) })]
 			}),
 			isViewingAsset && assetFieldName && isMultipleAsset && /* @__PURE__ */ jsx(MultipleAssetFieldEditor, {
 				fieldName: assetFieldName,
@@ -511,6 +532,7 @@ const PageEditorSidebar = () => {
 				})
 			}),
 			!isViewingAsset && !isViewingLink && (currentItemId == null || currentItem) && /* @__PURE__ */ jsx(ItemFieldsEditor, {
+				selectedFieldName: fieldInfo?.fieldName,
 				schema: currentSchema,
 				data: currentData,
 				blockId: block.id,
@@ -520,41 +542,18 @@ const PageEditorSidebar = () => {
 				filesMap,
 				itemsMap,
 				fieldIdPrefix
-			}, currentItemId ?? `block-${block.id}`),
-			!isViewingAsset && !isViewingLink && currentItemId != null && currentItem && /* @__PURE__ */ jsxs("div", {
-				className: "border-border flex items-center gap-1 border-t px-2 py-4",
-				children: [
-					canAddSibling && /* @__PURE__ */ jsxs(Button, {
-						type: "button",
-						variant: "ghost",
-						size: "sm",
-						className: "text-muted-foreground justify-start",
-						onClick: () => {
-							if (!requireDraft()) return;
-							addSibling({ afterPosition: currentItem.position });
-						},
-						children: [/* @__PURE__ */ jsx(CirclePlus, { className: "h-4 w-4" }), "Add item"]
-					}),
-					canRemoveCurrent && /* @__PURE__ */ jsxs(Button, {
-						type: "button",
-						variant: "ghost",
-						size: "sm",
-						className: "text-muted-foreground justify-start",
-						onClick: () => {
-							if (!requireDraft()) return;
-							removeCurrent(currentItemId, { onSuccess: () => previewStore.send({ type: "selectParent" }) });
-						},
-						children: [/* @__PURE__ */ jsx(CircleMinus, { className: "h-4 w-4" }), "Remove item"]
-					}),
-					/* @__PURE__ */ jsxs(Button, {
-						type: "button",
-						variant: "ghost",
-						size: "sm",
-						className: "text-muted-foreground justify-start",
-						onClick: () => previewStore.send({ type: "selectParent" }),
-						children: [/* @__PURE__ */ jsx(CornerLeftUp, { className: "h-4 w-4" }), "Select parent"]
-					})
-				]
+			}, `${block.id}-${currentItemId ?? "block"}-${fieldInfo?.fieldName ?? "fields"}`),
+			areCommentsEnabled() && !fieldHasOwnView && (currentItemId == null || currentItem) && /* @__PURE__ */ jsx(AttachedComments, {
+				pageId,
+				blockId: block.id,
+				itemId: currentItemId ?? void 0
+			}),
+			areCommentsEnabled() && fieldHasOwnView && fieldInfo && /* @__PURE__ */ jsx(AttachedComments, {
+				pageId,
+				blockId: block.id,
+				itemId: currentItemId ?? void 0,
+				fieldName: fieldInfo.fieldName,
+				fieldType: fieldInfo.fieldType
 			})
 		] }) })
 	})] });