Fix Visual Manager for Base UI: layout, tree load, no nested dialogs.

Move trigger outside Dialog.Root, use portal confirms and inline create forms, and load the catalog tree atomically so the manager matches the designed full-viewport UX.

Co-authored-by: Cursor <[email protected]>

src/components/admin/catalog-manager/catalog-manager-dialog.tsx

@@ -1,7 +1,7 @@
 "use client";
 
-import { LayoutGrid, Plus } from "lucide-react";
-import { useCallback, useEffect, useState } from "react";
+import { LayoutGrid, Plus, X } from "lucide-react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { toast } from "sonner";
 import { createCatalogPage } from "@/actions/catalog";
 import { useConfirmDialog } from "@/components/admin/confirm-dialog";
@@ -9,7 +9,6 @@ import { Button } from "@/components/ui/button";
 import {
 	Dialog,
 	DialogContent,
-	DialogFooter,
 	DialogHeader,
 	DialogTitle,
 } from "@/components/ui/dialog";
@@ -24,11 +23,31 @@ import { SortableTree } from "./sortable-tree";
 import { StatsBar } from "./stats-bar";
 import { CatalogManagerProvider, useCatalogManager } from "./use-catalog-store";
 
+/**
+ * Visual Catalog Manager — full-viewport editor (tree + inline page editor).
+ * Trigger stays outside Dialog.Root (Base UI); nested dialogs are avoided.
+ */
 export function CatalogManagerDialog() {
 	const [open, setOpen] = useState(false);
+	const dirtyRef = useRef(false);
+	const { confirm, dialog: closeConfirmDialog } = useConfirmDialog();
+
+	const handleOpenChange = async (next: boolean) => {
+		if (!next && dirtyRef.current) {
+			const ok = await confirm({
+				title: "Unsaved changes",
+				description: "You have unsaved changes. Discard them?",
+				confirmLabel: "Discard",
+				cancelLabel: "Keep editing",
+			});
+			if (!ok) return;
+		}
+		setOpen(next);
+	};
 
 	return (
-		<Dialog open={open} onOpenChange={setOpen} disablePointerDismissal>
+		<>
+			{closeConfirmDialog}
 			<Button
 				type="button"
 				variant="outline"
@@ -38,22 +57,38 @@ export function CatalogManagerDialog() {
 				<LayoutGrid className="h-4 w-4" />
 				Visual Manager
 			</Button>
-			<DialogContent className="max-w-full w-[98vw] h-[95vh] max-h-[95vh] p-0 flex flex-col gap-0 sm:max-w-[98vw]">
-				{open ? (
-					<CatalogManagerProvider>
-						<CatalogManagerInner open={open} onOpenChange={setOpen} />
-					</CatalogManagerProvider>
-				) : null}
-			</DialogContent>
-		</Dialog>
+			<Dialog
+				open={open}
+				onOpenChange={handleOpenChange}
+				disablePointerDismissal
+			>
+				<DialogContent
+					showCloseButton={false}
+					className="flex h-[95vh] max-h-[95vh] w-[98vw] max-w-[98vw] flex-col gap-0 overflow-hidden p-0 sm:max-w-[98vw]"
+				>
+					{open ? (
+						<CatalogManagerProvider>
+							<CatalogManagerInner
+								open={open}
+								onOpenChange={handleOpenChange}
+								dirtyRef={dirtyRef}
+							/>
+						</CatalogManagerProvider>
+					) : null}
+				</DialogContent>
+			</Dialog>
+		</>
 	);
 }
 
 function CatalogManagerInner({
 	open,
+	onOpenChange,
+	dirtyRef,
 }: {
 	open: boolean;
-	onOpenChange: (v: boolean) => void;
+	onOpenChange: (v: boolean) => void | Promise<void>;
+	dirtyRef: React.MutableRefObject<boolean>;
 }) {
 	const { state, dispatch } = useCatalogManager();
 	const { confirm, dialog: confirmDialog } = useConfirmDialog();
@@ -61,6 +96,10 @@ function CatalogManagerInner({
 	const [newRootName, setNewRootName] = useState("");
 	const [creating, setCreating] = useState(false);
 
+	useEffect(() => {
+		dirtyRef.current = state.editorDirty;
+	}, [state.editorDirty, dirtyRef]);
+
 	const loadRootPages = useCallback(async () => {
 		dispatch({ type: "SET_LOADING_ROOT", loading: true });
 		try {
@@ -171,11 +210,23 @@ function CatalogManagerInner({
 	return (
 		<TooltipProvider delayDuration={300}>
 			{confirmDialog}
-			<DialogHeader className="px-4 py-2.5 border-b shrink-0">
-				<DialogTitle className="text-base flex items-center gap-2">
-					<LayoutGrid className="h-4 w-4" />
-					Visual Catalog Manager
-				</DialogTitle>
+			<DialogHeader className="px-4 py-2.5 border-b shrink-0 space-y-0">
+				<div className="flex items-center justify-between gap-2">
+					<DialogTitle className="text-base flex items-center gap-2">
+						<LayoutGrid className="h-4 w-4" />
+						Visual Catalog Manager
+					</DialogTitle>
+					<Button
+						type="button"
+						variant="ghost"
+						size="icon"
+						className="h-8 w-8 shrink-0"
+						onClick={() => void onOpenChange(false)}
+						aria-label="Close"
+					>
+						<X className="h-4 w-4" />
+					</Button>
+				</div>
 			</DialogHeader>
 
 			<BreadcrumbBar />
@@ -185,11 +236,58 @@ function CatalogManagerInner({
 				activeTabId={state.activeTabId}
 				onTabClick={handleTabClick}
 				onEditTab={handleEditTab}
-				onCreateRoot={() => setCreateOpen(true)}
+				onCreateRoot={() => setCreateOpen((v) => !v)}
 				loading={state.loadingRoot}
 			/>
 
-			<div className="flex flex-1 min-h-0">
+			{createOpen ? (
+				<div className="flex shrink-0 items-end gap-2 border-b bg-muted/30 px-4 py-2.5">
+					<div className="min-w-0 flex-1 space-y-1">
+						<Label htmlFor="root-caption" className="text-xs">
+							New root page
+						</Label>
+						<Input
+							id="root-caption"
+							value={newRootName}
+							onChange={(e) => setNewRootName(e.target.value)}
+							placeholder="e.g. Furniture"
+							autoFocus
+							className="h-8"
+							onKeyDown={(e) => {
+								if (e.key === "Enter") void handleCreateRoot();
+								if (e.key === "Escape") {
+									setCreateOpen(false);
+									setNewRootName("");
+								}
+							}}
+						/>
+					</div>
+					<Button
+						type="button"
+						variant="outline"
+						size="sm"
+						className="h-8"
+						onClick={() => {
+							setCreateOpen(false);
+							setNewRootName("");
+						}}
+					>
+						Cancel
+					</Button>
+					<Button
+						type="button"
+						size="sm"
+						className="h-8"
+						disabled={creating || !newRootName.trim()}
+						onClick={handleCreateRoot}
+					>
+						<Plus className="mr-1 h-4 w-4" />
+						Create
+					</Button>
+				</div>
+			) : null}
+
+			<div className="flex min-h-0 flex-1 overflow-hidden">
 				<SortableTree
 					activeTabId={state.activeTabId}
 					selectedPageId={state.selectedPageId}
@@ -204,44 +302,6 @@ function CatalogManagerInner({
 			</div>
 
 			<StatsBar />
-
-			<Dialog open={createOpen} onOpenChange={setCreateOpen}>
-				<DialogContent className="sm:max-w-md">
-					<DialogHeader>
-						<DialogTitle>New root page</DialogTitle>
-					</DialogHeader>
-					<div className="space-y-2">
-						<Label htmlFor="root-caption">Name</Label>
-						<Input
-							id="root-caption"
-							value={newRootName}
-							onChange={(e) => setNewRootName(e.target.value)}
-							placeholder="e.g. Furniture"
-							autoFocus
-							onKeyDown={(e) => {
-								if (e.key === "Enter") void handleCreateRoot();
-							}}
-						/>
-					</div>
-					<DialogFooter>
-						<Button
-							type="button"
-							variant="outline"
-							onClick={() => setCreateOpen(false)}
-						>
-							Cancel
-						</Button>
-						<Button
-							type="button"
-							disabled={creating || !newRootName.trim()}
-							onClick={handleCreateRoot}
-						>
-							<Plus className="mr-1 h-4 w-4" />
-							Create
-						</Button>
-					</DialogFooter>
-				</DialogContent>
-			</Dialog>
 		</TooltipProvider>
 	);
 }