camox 0.40.0 → 0.41.0

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

@@ -1,13 +1,15 @@
 import { useLocation, useNavigate } from "../../navigation/navigation.js";
 import { useProjectSlug } from "../../../lib/auth.js";
-import { pageMutations, pageQueries, projectQueries } from "../../../lib/queries.js";
+import { layoutQueries, pageMutations, pageQueries, projectQueries } from "../../../lib/queries.js";
 import { cn } from "../../../lib/utils.js";
+import { useCamoxApp } from "../../provider/components/CamoxAppContext.js";
 import { previewStore } from "../previewStore.js";
+import { matchDerivedLayout, routeSegments } from "../../../core/derivedRoutes.js";
+import { DerivedLayoutDialog } from "./DerivedLayoutDialog.js";
 import { PageStatusBadge } from "./PageStatusBadge.js";
 import { useMutation, useQuery } from "@tanstack/react-query";
 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 { Check, ChevronsUpDown, Pencil, Plus, Trash2 } from "lucide-react";
 import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle } from "@camox/ui/alert-dialog";
@@ -18,12 +20,19 @@ import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, Command
 
 //#region src/features/preview/components/PagePicker.tsx
 const CREATE_PAGE_VALUE = "__create_page__";
+const DERIVED_LAYOUT_PREFIX = "__derived_layout__:";
 const PagePicker = () => {
 	const [open, setOpen] = React.useState(false);
+	const derivedLayouts = useCamoxApp().getLayouts().filter((layout) => layout._internal.kind === "derived");
+	const [layoutToPreview, setLayoutToPreview] = React.useState(null);
 	const [pageToDelete, setPageToDelete] = React.useState(null);
-	const peekedPagePathname = useSelector(previewStore, (state) => state.context.peekedPagePathname);
 	const projectSlug = useProjectSlug();
 	const { data: project } = useQuery(projectQueries.getBySlug(projectSlug));
+	const { data: layoutRecords } = useQuery({
+		...layoutQueries.list(project?.id ?? 0),
+		enabled: !!project
+	});
+	const layoutStatusById = new Map(layoutRecords?.map((layout_0) => [layout_0.layoutId, layout_0.status]));
 	const deletePage = useMutation(pageMutations.delete());
 	const { data: pages } = useQuery({
 		...pageQueries.list(project?.id ?? 0),
@@ -32,7 +41,6 @@ const PagePicker = () => {
 	const { pathname } = useLocation();
 	const navigate = useNavigate();
 	const closePopover = () => {
-		previewStore.send({ type: "clearPeekedPage" });
 		setOpen(false);
 	};
 	const handleDeletePage = async (page) => {
@@ -54,159 +62,203 @@ const PagePicker = () => {
 	});
 	if (!pages) return skeleton;
 	const currentPage = pages.find((page_0) => page_0.fullPath === pathname);
-	if (!currentPage) return skeleton;
-	const peekedFullPath = peekedPagePathname ?? currentPage.fullPath;
-	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs(Popover, {
-		open,
-		onOpenChange: (value) => {
-			if (!value) {
-				closePopover();
-				return;
-			}
-			setOpen(value);
-		},
-		children: [/* @__PURE__ */ jsxs(PopoverTrigger, {
-			render: /* @__PURE__ */ jsx(Button, {
-				variant: "outline",
-				role: "combobox",
-				className: "min-w-0 flex-1 justify-between"
-			}),
-			children: [/* @__PURE__ */ jsxs("div", {
-				className: "flex min-w-0 flex-1 items-center gap-2",
-				children: [/* @__PURE__ */ jsx("span", {
-					className: "truncate",
-					children: currentPage.nickname
-				}), /* @__PURE__ */ jsx(PageStatusBadge, {
-					size: "sm",
-					status: currentPage.status,
-					modifiedReason: currentPage.modifiedReason
-				})]
-			}), /* @__PURE__ */ jsx(ChevronsUpDown, { className: "ml-2 h-4 w-4 shrink-0 opacity-50" })]
-		}), /* @__PURE__ */ jsx(PopoverContent, {
-			className: "flex h-[300px] w-[400px] flex-col p-0",
-			align: "start",
-			side: "bottom",
-			children: /* @__PURE__ */ jsxs(Command, {
-				value: peekedFullPath,
-				onValueChange: (value_0) => {
-					if (value_0 === CREATE_PAGE_VALUE) {
-						previewStore.send({ type: "clearPeekedPage" });
-						return;
-					}
-					previewStore.send({
-						type: "setPeekedPage",
-						pathname: value_0
-					});
-				},
-				className: "flex flex-1 flex-col overflow-hidden",
-				children: [
-					/* @__PURE__ */ jsx(CommandInput, {
-						placeholder: "Search page...",
-						className: "h-9"
-					}),
-					/* @__PURE__ */ jsxs(CommandList, {
-						className: "flex-1 overflow-y-auto",
-						children: [/* @__PURE__ */ jsx(CommandEmpty, { children: "No page found." }), /* @__PURE__ */ jsx(CommandGroup, { children: pages.map((page_1) => /* @__PURE__ */ jsxs(CommandItem, {
-							value: page_1.fullPath,
-							className: "group/item justify-between",
-							hideCheck: true,
-							onSelect: () => {
-								navigate({ to: page_1.fullPath });
-								closePopover();
-							},
-							children: [/* @__PURE__ */ jsxs("div", {
-								className: "flex min-w-0 flex-1 items-start gap-2",
-								children: [/* @__PURE__ */ jsx(Check, { className: cn("size-4 mt-0.5 shrink-0", currentPage.fullPath !== page_1.fullPath && "invisible") }), /* @__PURE__ */ jsxs("div", {
-									className: "flex min-w-0 flex-col",
+	const currentDerived = currentPage ? null : matchDerivedLayout(derivedLayouts, pathname);
+	const currentLayoutStatus = currentDerived ? layoutStatusById.get(currentDerived.layout._internal.id) : void 0;
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsxs(Popover, {
+			open,
+			onOpenChange: (value) => {
+				if (!value) {
+					closePopover();
+					return;
+				}
+				setOpen(value);
+			},
+			children: [/* @__PURE__ */ jsxs(PopoverTrigger, {
+				render: /* @__PURE__ */ jsx(Button, {
+					variant: "outline",
+					role: "combobox",
+					className: "min-w-0 flex-1 justify-between"
+				}),
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "flex min-w-0 flex-1 items-center gap-2",
+					children: [
+						/* @__PURE__ */ jsx("span", {
+							className: "truncate",
+							children: currentPage?.nickname ?? currentDerived?.layout._internal.title ?? "Select page"
+						}),
+						currentPage && /* @__PURE__ */ jsx(PageStatusBadge, {
+							size: "sm",
+							status: currentPage.status,
+							modifiedReason: currentPage.modifiedReason
+						}),
+						currentLayoutStatus && /* @__PURE__ */ jsx(PageStatusBadge, {
+							size: "sm",
+							status: currentLayoutStatus
+						})
+					]
+				}), /* @__PURE__ */ jsx(ChevronsUpDown, { className: "ml-2 h-4 w-4 shrink-0 opacity-50" })]
+			}), /* @__PURE__ */ jsx(PopoverContent, {
+				className: "flex h-[300px] w-[400px] flex-col p-0",
+				align: "start",
+				side: "bottom",
+				children: /* @__PURE__ */ jsxs(Command, {
+					className: "flex flex-1 flex-col overflow-hidden",
+					children: [
+						/* @__PURE__ */ jsx(CommandInput, {
+							placeholder: "Search page...",
+							className: "h-9"
+						}),
+						/* @__PURE__ */ jsxs(CommandList, {
+							className: "flex-1 overflow-y-auto",
+							children: [
+								/* @__PURE__ */ jsx(CommandEmpty, { children: "No page found." }),
+								/* @__PURE__ */ jsx(CommandGroup, { children: pages.map((page_1) => /* @__PURE__ */ jsxs(CommandItem, {
+									value: page_1.fullPath,
+									className: "group/item justify-between",
+									hideCheck: true,
+									onSelect: () => {
+										navigate({ to: page_1.fullPath });
+										closePopover();
+									},
 									children: [/* @__PURE__ */ jsxs("div", {
-										className: "flex min-w-0 items-center gap-1.5",
-										children: [/* @__PURE__ */ jsx("p", {
-											className: "truncate",
-											children: page_1.nickname
-										}), /* @__PURE__ */ jsx(PageStatusBadge, {
-											size: "sm",
-											status: page_1.status,
-											modifiedReason: page_1.modifiedReason
+										className: "flex min-w-0 flex-1 items-start gap-2",
+										children: [/* @__PURE__ */ jsx(Check, { className: cn("size-4 mt-0.5 shrink-0", currentPage?.fullPath !== page_1.fullPath && "invisible") }), /* @__PURE__ */ jsxs("div", {
+											className: "flex min-w-0 flex-col",
+											children: [/* @__PURE__ */ jsxs("div", {
+												className: "flex min-w-0 items-center gap-1.5",
+												children: [/* @__PURE__ */ jsx("p", {
+													className: "truncate",
+													children: page_1.nickname
+												}), /* @__PURE__ */ jsx(PageStatusBadge, {
+													size: "sm",
+													status: page_1.status,
+													modifiedReason: page_1.modifiedReason
+												})]
+											}), /* @__PURE__ */ jsx("p", {
+												className: "text-muted-foreground truncate font-mono text-xs",
+												children: page_1.fullPath
+											})]
+										})]
+									}), /* @__PURE__ */ jsxs("div", {
+										className: "hidden gap-1 group-data-[selected=true]/item:flex",
+										children: [/* @__PURE__ */ jsx(Button, {
+											variant: "ghost",
+											size: "icon-sm",
+											onClick: (e) => {
+												e.stopPropagation();
+												previewStore.send({
+													type: "openEditPageModal",
+													pageId: page_1.id
+												});
+												closePopover();
+											},
+											onKeyDown: (e_0) => {
+												if (e_0.key === "Enter" || e_0.key === " ") {
+													e_0.preventDefault();
+													e_0.stopPropagation();
+													previewStore.send({
+														type: "openEditPageModal",
+														pageId: page_1.id
+													});
+													closePopover();
+												}
+											},
+											children: /* @__PURE__ */ jsx(Pencil, { className: "size-4" })
+										}), page_1.fullPath !== "/" && /* @__PURE__ */ jsx(Button, {
+											variant: "ghost",
+											size: "icon-sm",
+											onClick: (e_1) => {
+												e_1.stopPropagation();
+												setPageToDelete(page_1);
+											},
+											onKeyDown: (e_2) => {
+												if (e_2.key === "Enter" || e_2.key === " ") {
+													e_2.preventDefault();
+													e_2.stopPropagation();
+													setPageToDelete(page_1);
+												}
+											},
+											children: /* @__PURE__ */ jsx(Trash2, { className: "size-4" })
 										})]
-									}), /* @__PURE__ */ jsx("p", {
-										className: "text-muted-foreground truncate font-mono text-xs",
-										children: page_1.fullPath
 									})]
-								})]
-							}), /* @__PURE__ */ jsxs("div", {
-								className: "hidden gap-1 group-data-[selected=true]/item:flex",
-								children: [/* @__PURE__ */ jsx(Button, {
-									variant: "ghost",
-									size: "icon-sm",
-									onClick: (e) => {
-										e.stopPropagation();
-										previewStore.send({
-											type: "openEditPageModal",
-											pageId: page_1.id
-										});
-										closePopover();
-									},
-									onKeyDown: (e_0) => {
-										if (e_0.key === "Enter" || e_0.key === " ") {
-											e_0.preventDefault();
-											e_0.stopPropagation();
-											previewStore.send({
-												type: "openEditPageModal",
-												pageId: page_1.id
-											});
+								}, page_1.id)) }),
+								derivedLayouts.length > 0 && /* @__PURE__ */ jsx(CommandGroup, {
+									heading: "Derived pages",
+									children: derivedLayouts.map((layout_1) => /* @__PURE__ */ jsx(CommandItem, {
+										value: `${DERIVED_LAYOUT_PREFIX}${layout_1._internal.id}`,
+										keywords: [layout_1._internal.title],
+										hideCheck: true,
+										onSelect: () => {
 											closePopover();
-										}
-									},
-									children: /* @__PURE__ */ jsx(Pencil, { className: "size-4" })
-								}), page_1.fullPath !== "/" && /* @__PURE__ */ jsx(Button, {
-									variant: "ghost",
-									size: "icon-sm",
-									onClick: (e_1) => {
-										e_1.stopPropagation();
-										setPageToDelete(page_1);
-									},
-									onKeyDown: (e_2) => {
-										if (e_2.key === "Enter" || e_2.key === " ") {
-											e_2.preventDefault();
-											e_2.stopPropagation();
-											setPageToDelete(page_1);
-										}
-									},
-									children: /* @__PURE__ */ jsx(Trash2, { className: "size-4" })
-								})]
-							})]
-						}, page_1.id)) })]
-					}),
-					/* @__PURE__ */ jsx(CommandSeparator, {}),
-					/* @__PURE__ */ jsx(CommandGroup, { children: /* @__PURE__ */ jsxs(CommandItem, {
-						onSelect: () => {
-							closePopover();
-							previewStore.send({ type: "openCreatePageModal" });
-						},
-						value: CREATE_PAGE_VALUE,
-						children: [/* @__PURE__ */ jsx(Plus, { className: "size-4" }), "Create page"]
-					}) })
-				]
-			})
-		})]
-	}), /* @__PURE__ */ jsx(AlertDialog, {
-		open: !!pageToDelete,
-		onOpenChange: (open_0) => !open_0 && setPageToDelete(null),
-		children: /* @__PURE__ */ jsxs(AlertDialogContent, { children: [/* @__PURE__ */ jsxs(AlertDialogHeader, { children: [/* @__PURE__ */ jsx(AlertDialogTitle, { children: "Delete page" }), /* @__PURE__ */ jsxs(AlertDialogDescription, { children: [
-			"Are you sure you want to delete",
-			" ",
-			/* @__PURE__ */ jsx("strong", { children: pageToDelete ? pageToDelete.nickname : "" }),
-			"? This action cannot be undone."
-		] })] }), /* @__PURE__ */ jsxs(AlertDialogFooter, { children: [/* @__PURE__ */ jsx(AlertDialogCancel, {
-			variant: "outline",
-			size: "default",
-			children: "Cancel"
-		}), /* @__PURE__ */ jsx(AlertDialogAction, {
-			variant: "destructive",
-			onClick: () => pageToDelete && handleDeletePage(pageToDelete),
-			children: "Delete"
-		})] })] })
-	})] });
+											const segments = routeSegments(layout_1._internal.id);
+											if (!segments.some((segment) => segment.startsWith("$"))) {
+												navigate({ to: `/${segments.map(encodeURIComponent).join("/")}` });
+												return;
+											}
+											setLayoutToPreview(layout_1);
+										},
+										children: /* @__PURE__ */ jsxs("div", {
+											className: "flex min-w-0 flex-1 items-start gap-2",
+											children: [/* @__PURE__ */ jsx(Check, { className: cn("size-4 mt-0.5 shrink-0", currentDerived?.layout._internal.id !== layout_1._internal.id && "invisible") }), /* @__PURE__ */ jsxs("div", {
+												className: "flex min-w-0 flex-col",
+												children: [/* @__PURE__ */ jsxs("div", {
+													className: "flex min-w-0 items-center gap-1.5",
+													children: [/* @__PURE__ */ jsx("p", {
+														className: "truncate",
+														children: layout_1._internal.title
+													}), layoutStatusById.has(layout_1._internal.id) && /* @__PURE__ */ jsx(PageStatusBadge, {
+														size: "sm",
+														status: layoutStatusById.get(layout_1._internal.id)
+													})]
+												}), /* @__PURE__ */ jsxs("p", {
+													className: "text-muted-foreground truncate font-mono text-xs",
+													children: ["/", routeSegments(layout_1._internal.id).join("/")]
+												})]
+											})]
+										})
+									}, layout_1._internal.id))
+								})
+							]
+						}),
+						/* @__PURE__ */ jsx(CommandSeparator, {}),
+						/* @__PURE__ */ jsx(CommandGroup, { children: /* @__PURE__ */ jsxs(CommandItem, {
+							onSelect: () => {
+								closePopover();
+								previewStore.send({ type: "openCreatePageModal" });
+							},
+							value: CREATE_PAGE_VALUE,
+							children: [/* @__PURE__ */ jsx(Plus, { className: "size-4" }), "Create page"]
+						}) })
+					]
+				})
+			})]
+		}),
+		layoutToPreview && /* @__PURE__ */ jsx(DerivedLayoutDialog, {
+			layout: layoutToPreview,
+			projectSlug,
+			currentParams: currentDerived?.layout._internal.id === layoutToPreview._internal.id ? currentDerived.params : void 0,
+			onClose: () => setLayoutToPreview(null)
+		}, layoutToPreview._internal.id),
+		/* @__PURE__ */ jsx(AlertDialog, {
+			open: !!pageToDelete,
+			onOpenChange: (open_0) => !open_0 && setPageToDelete(null),
+			children: /* @__PURE__ */ jsxs(AlertDialogContent, { children: [/* @__PURE__ */ jsxs(AlertDialogHeader, { children: [/* @__PURE__ */ jsx(AlertDialogTitle, { children: "Delete page" }), /* @__PURE__ */ jsxs(AlertDialogDescription, { children: [
+				"Are you sure you want to delete",
+				" ",
+				/* @__PURE__ */ jsx("strong", { children: pageToDelete ? pageToDelete.nickname : "" }),
+				"? This action cannot be undone."
+			] })] }), /* @__PURE__ */ jsxs(AlertDialogFooter, { children: [/* @__PURE__ */ jsx(AlertDialogCancel, {
+				variant: "outline",
+				size: "default",
+				children: "Cancel"
+			}), /* @__PURE__ */ jsx(AlertDialogAction, {
+				variant: "destructive",
+				onClick: () => pageToDelete && handleDeletePage(pageToDelete),
+				children: "Delete"
+			})] })] })
+		})
+	] });
 };
 
 //#endregion