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/confirm-dialog.tsx

@@ -1,15 +1,9 @@
 "use client";
 
-import { useCallback, useRef, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
 import { Button } from "@/components/ui/button";
-import {
-	Dialog,
-	DialogContent,
-	DialogDescription,
-	DialogFooter,
-	DialogHeader,
-	DialogTitle,
-} from "@/components/ui/dialog";
+import { cn } from "@/lib/utils";
 
 export type ConfirmDialogProps = {
 	open: boolean;
@@ -23,6 +17,10 @@ export type ConfirmDialogProps = {
 	onConfirm: () => void | Promise<void>;
 };
 
+/**
+ * Portal-based confirm modal (not Dialog.Root) so it can safely stack
+ * above Visual Manager / other Base UI dialogs without nested-root bugs.
+ */
 export function ConfirmDialog({
 	open,
 	onOpenChange,
@@ -35,8 +33,20 @@ export function ConfirmDialog({
 	onConfirm,
 }: ConfirmDialogProps) {
 	const [busy, setBusy] = useState(false);
+	const [mounted, setMounted] = useState(false);
 	const isLoading = loading ?? busy;
 
+	useEffect(() => setMounted(true), []);
+
+	useEffect(() => {
+		if (!open) return;
+		const onKey = (e: KeyboardEvent) => {
+			if (e.key === "Escape" && !isLoading) onOpenChange(false);
+		};
+		document.addEventListener("keydown", onKey);
+		return () => document.removeEventListener("keydown", onKey);
+	}, [open, isLoading, onOpenChange]);
+
 	async function handleConfirm() {
 		setBusy(true);
 		try {
@@ -47,20 +57,38 @@ export function ConfirmDialog({
 		}
 	}
 
-	return (
-		<Dialog
-			open={open}
-			onOpenChange={(next) => {
-				if (isLoading) return;
-				onOpenChange(next);
-			}}
-		>
-			<DialogContent showCloseButton={!isLoading}>
-				<DialogHeader>
-					<DialogTitle>{title}</DialogTitle>
-					<DialogDescription>{description}</DialogDescription>
-				</DialogHeader>
-				<DialogFooter>
+	if (!open || !mounted) return null;
+
+	return createPortal(
+		<div className="fixed inset-0 z-[200] flex items-center justify-center p-4">
+			<button
+				type="button"
+				aria-label="Dismiss"
+				className="absolute inset-0 bg-black/50"
+				disabled={isLoading}
+				onClick={() => {
+					if (!isLoading) onOpenChange(false);
+				}}
+			/>
+			<div
+				role="alertdialog"
+				aria-modal="true"
+				aria-labelledby="confirm-dialog-title"
+				aria-describedby="confirm-dialog-desc"
+				className="relative z-10 w-full max-w-md rounded-lg border bg-card p-6 text-card-foreground shadow-lg"
+			>
+				<div className="flex flex-col gap-2 text-left">
+					<h2
+						id="confirm-dialog-title"
+						className="text-lg font-semibold leading-none"
+					>
+						{title}
+					</h2>
+					<p id="confirm-dialog-desc" className="text-sm text-muted-foreground">
+						{description}
+					</p>
+				</div>
+				<div className="mt-6 flex flex-col-reverse gap-2 sm:flex-row sm:justify-end">
 					<Button
 						type="button"
 						variant="outline"
@@ -74,12 +102,15 @@ export function ConfirmDialog({
 						variant={variant === "danger" ? "destructive" : "default"}
 						disabled={isLoading}
 						onClick={handleConfirm}
+						className={cn(variant === "danger" && "bg-destructive text-white")}
+						autoFocus
 					>
 						{confirmLabel}
 					</Button>
-				</DialogFooter>
-			</DialogContent>
-		</Dialog>
+				</div>
+			</div>
+		</div>,
+		document.body,
 	);
 }