camox 0.44.0 → 0.46.0

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

@@ -1,22 +1,23 @@
-import { useLocation, useNavigate } from "../../navigation/navigation.js";
-import { useProjectSlug } from "../../../lib/auth.js";
+import { useProjectUuid } from "../../../lib/auth.js";
+import { useNavigate } from "../../navigation/navigation.js";
 import { useCamoxApp } from "../../provider/components/CamoxAppContext.js";
-import { layoutQueries, pageMutations, pageQueries, projectQueries } from "../../../lib/queries.js";
+import { reads, useReadQuery } from "../../../lib/studio-reads.js";
 import { cn } from "../../../lib/utils.js";
+import { pageMutations } from "../../../lib/queries.js";
+import { useLocalePath, useLocalizedPath } from "../../../lib/view-locale.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 { useMutation } from "@tanstack/react-query";
 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";
-import { Popover, PopoverContent, PopoverTrigger } from "@camox/ui/popover";
 import { toast } from "@camox/ui/toaster";
 import { Skeleton } from "@camox/ui/skeleton";
-import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator } from "@camox/ui/command";
+import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle } from "@camox/ui/alert-dialog";
+import { Command as Command$1, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator } from "@camox/ui/command";
+import { Popover, PopoverContent, PopoverTrigger } from "@camox/ui/popover";
 
 //#region src/features/preview/components/PagePicker.tsx
 const CREATE_PAGE_VALUE = "__create_page__";
@@ -26,19 +27,12 @@ const PagePicker = () => {
 	const derivedLayouts = useCamoxApp().getLayouts().filter((layout) => layout._internal.kind !== "curated");
 	const [layoutToPreview, setLayoutToPreview] = React.useState(null);
 	const [pageToDelete, setPageToDelete] = React.useState(null);
-	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 projectUuid = useProjectUuid();
+	const { data: project } = useReadQuery(reads.project({ projectUuid }));
 	const deletePage = useMutation(pageMutations.delete());
-	const { data: pages } = useQuery({
-		...pageQueries.list(project?.id ?? 0),
-		enabled: !!project
-	});
-	const { pathname } = useLocation();
+	const { data: pages } = useReadQuery(reads.pageList({ projectUuid }), { enabled: !!project });
+	const pathname = useLocalePath();
+	const localized = useLocalizedPath();
 	const navigate = useNavigate();
 	const closePopover = () => {
 		setOpen(false);
@@ -48,7 +42,7 @@ const PagePicker = () => {
 		try {
 			await deletePage.mutateAsync({ id: page.id });
 			toast.success(`Deleted ${displayName} page`);
-			if (pathname === page.fullPath) await navigate({ to: "/" });
+			if (pathname === page.fullPath) await navigate({ to: localized("/") });
 		} catch (error) {
 			console.error("Failed to delete page:", error);
 			toast.error(`Could not delete ${displayName} page`);
@@ -61,9 +55,95 @@ const PagePicker = () => {
 		children: [/* @__PURE__ */ jsx(Skeleton, { className: "h-3 flex-1" }), /* @__PURE__ */ jsx(ChevronsUpDown, { className: "ml-2 h-4 w-4 shrink-0 opacity-50" })]
 	});
 	if (!pages) return skeleton;
-	const currentPage = pages.find((page_0) => page_0.fullPath === pathname);
+	const servedPages = pages.filter((page) => !page.needsLayout);
+	const pagesNeedingLayout = pages.filter((page) => page.needsLayout);
+	const currentPage = pages.find((page) => page.fullPath === pathname);
+	const renderPage = (page) => /* @__PURE__ */ jsxs(CommandItem, {
+		value: page.fullPath,
+		className: "group/item justify-between",
+		hideCheck: true,
+		onSelect: () => {
+			closePopover();
+			if (page.needsLayout) {
+				previewStore.send({
+					type: "openEditPageModal",
+					pageId: page.id
+				});
+				return;
+			}
+			navigate({ to: localized(page.fullPath) });
+		},
+		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.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.nickname
+						}),
+						page.shadowed && /* @__PURE__ */ jsx("span", {
+							className: "text-muted-foreground shrink-0 text-xs",
+							title: "A singleton layout serves this URL, so this page isn't shown.",
+							children: "Shadowed"
+						}),
+						page.duplicatePath && /* @__PURE__ */ jsx("span", {
+							className: "text-destructive shrink-0 text-xs",
+							title: "Another page uses this URL. Change one of them before publishing.",
+							children: "Duplicate URL"
+						})
+					]
+				}), /* @__PURE__ */ jsx("p", {
+					className: "text-muted-foreground truncate font-mono text-xs",
+					children: page.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.id
+					});
+					closePopover();
+				},
+				onKeyDown: (e) => {
+					if (e.key === "Enter" || e.key === " ") {
+						e.preventDefault();
+						e.stopPropagation();
+						previewStore.send({
+							type: "openEditPageModal",
+							pageId: page.id
+						});
+						closePopover();
+					}
+				},
+				children: /* @__PURE__ */ jsx(Pencil, { className: "size-4" })
+			}), page.fullPath !== "/" && /* @__PURE__ */ jsx(Button, {
+				variant: "ghost",
+				size: "icon-sm",
+				onClick: (e) => {
+					e.stopPropagation();
+					setPageToDelete(page);
+				},
+				onKeyDown: (e) => {
+					if (e.key === "Enter" || e.key === " ") {
+						e.preventDefault();
+						e.stopPropagation();
+						setPageToDelete(page);
+					}
+				},
+				children: /* @__PURE__ */ jsx(Trash2, { className: "size-4" })
+			})]
+		})]
+	}, page.id);
 	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,
@@ -80,29 +160,18 @@ const PagePicker = () => {
 					role: "combobox",
 					className: "min-w-0 flex-1 justify-between"
 				}),
-				children: [/* @__PURE__ */ jsxs("div", {
+				children: [/* @__PURE__ */ jsx("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
-						})
-					]
+					children: /* @__PURE__ */ jsx("span", {
+						className: "truncate",
+						children: currentPage?.nickname ?? currentDerived?.layout._internal.title ?? "Select page"
+					})
 				}), /* @__PURE__ */ jsx(ChevronsUpDown, { className: "ml-2 h-4 w-4 shrink-0 opacity-50" })]
 			}), /* @__PURE__ */ jsx(PopoverContent, {
 				className: "w-[400px] p-0",
 				align: "start",
 				side: "bottom",
-				children: /* @__PURE__ */ jsxs(Command, {
+				children: /* @__PURE__ */ jsxs(Command$1, {
 					className: "h-auto",
 					children: [
 						/* @__PURE__ */ jsx(CommandInput, {
@@ -113,112 +182,41 @@ const PagePicker = () => {
 							/* @__PURE__ */ jsx(CommandEmpty, { children: "No page found." }),
 							/* @__PURE__ */ jsx(CommandGroup, {
 								heading: "Curated pages",
-								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",
-											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" })
-										})]
-									})]
-								}, page_1.id))
+								children: servedPages.map(renderPage)
+							}),
+							pagesNeedingLayout.length > 0 && /* @__PURE__ */ jsx(CommandGroup, {
+								heading: "Needing a layout",
+								children: pagesNeedingLayout.map(renderPage)
 							}),
 							["singleton", "derived"].map((kind) => /* @__PURE__ */ jsx(CommandGroup, {
 								heading: kind === "singleton" ? "Singleton pages" : "Derived pages",
-								children: derivedLayouts.filter((layout_1) => layout_1._internal.kind === kind).map((layout_2) => /* @__PURE__ */ jsx(CommandItem, {
-									value: `${DERIVED_LAYOUT_PREFIX}${layout_2._internal.id}`,
-									keywords: [layout_2._internal.title],
+								children: derivedLayouts.filter((layout) => layout._internal.kind === kind).map((layout) => /* @__PURE__ */ jsx(CommandItem, {
+									value: `${DERIVED_LAYOUT_PREFIX}${layout._internal.id}`,
+									keywords: [layout._internal.title],
 									hideCheck: true,
 									onSelect: () => {
 										closePopover();
-										const segments = routeSegments(layout_2._internal.id);
+										const segments = routeSegments(layout._internal.id);
 										if (!segments.some((segment) => segment.startsWith("$"))) {
-											navigate({ to: `/${segments.map(encodeURIComponent).join("/")}` });
+											navigate({ to: localized(`/${segments.map(encodeURIComponent).join("/")}`) });
 											return;
 										}
-										setLayoutToPreview(layout_2);
+										setLayoutToPreview(layout);
 									},
 									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_2._internal.id && "invisible") }), /* @__PURE__ */ jsxs("div", {
+										children: [/* @__PURE__ */ jsx(Check, { className: cn("size-4 mt-0.5 shrink-0", currentDerived?.layout._internal.id !== layout._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_2._internal.title
-												}), layoutStatusById.has(layout_2._internal.id) && /* @__PURE__ */ jsx(PageStatusBadge, {
-													size: "sm",
-													status: layoutStatusById.get(layout_2._internal.id)
-												})]
+											children: [/* @__PURE__ */ jsx("p", {
+												className: "truncate",
+												children: layout._internal.title
 											}), /* @__PURE__ */ jsxs("p", {
 												className: "text-muted-foreground truncate font-mono text-xs",
-												children: ["/", routeSegments(layout_2._internal.id).join("/")]
+												children: ["/", routeSegments(layout._internal.id).join("/")]
 											})]
 										})]
 									})
-								}, layout_2._internal.id))
+								}, layout._internal.id))
 							}, kind))
 						] }),
 						/* @__PURE__ */ jsx(CommandSeparator, {}),
@@ -241,13 +239,13 @@ const PagePicker = () => {
 		}),
 		layoutToPreview && /* @__PURE__ */ jsx(DerivedLayoutDialog, {
 			layout: layoutToPreview,
-			projectSlug,
+			projectUuid,
 			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),
+			onOpenChange: (open) => !open && 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",
 				" ",