Fix Visual Manager opacity and load categories like CatalogTree.

Use an opaque admin-canvas portal and lazy parentId fetches instead of mode=full, which fails on large catalogs. Search no longer loads the entire tree.

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

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

@@ -59,13 +59,14 @@ export function CatalogManagerDialog({
 			</Button>
 			{mounted && open
 				? createPortal(
-						<div className="fixed inset-0 z-50">
-							<div className="absolute inset-0 bg-black/50" />
+						<div className="fixed inset-0 z-[200]">
+							<div className="absolute inset-0 bg-black/70" />
 							<div
 								role="dialog"
 								aria-modal="true"
 								aria-labelledby="visual-catalog-manager-title"
-								className="fixed top-1/2 left-1/2 z-50 flex h-[95vh] max-h-[95vh] w-[98vw] max-w-[98vw] -translate-x-1/2 -translate-y-1/2 flex-col overflow-hidden rounded-lg border bg-card text-card-foreground shadow-lg"
+								className="fixed top-[2.5vh] left-[1vw] z-[201] flex h-[95vh] max-h-[95vh] w-[98vw] max-w-[98vw] flex-col overflow-hidden rounded-lg border border-[var(--admin-border)] bg-[var(--admin-canvas)] text-[var(--admin-text)] shadow-2xl"
+								style={{ backgroundColor: "var(--admin-canvas)" }}
 							>
 								<CatalogManagerProvider>
 									<CatalogManagerInner
@@ -212,7 +213,10 @@ function CatalogManagerInner({
 
 	return (
 		<TooltipProvider delayDuration={300}>
-			<div className="flex shrink-0 items-center justify-between gap-2 border-b px-4 py-2.5">
+			<div
+				className="flex shrink-0 items-center justify-between gap-2 border-b border-[var(--admin-border)] px-4 py-2.5"
+				style={{ backgroundColor: "var(--admin-surface)" }}
+			>
 				<h2
 					id="visual-catalog-manager-title"
 					className="flex items-center gap-2 text-base font-semibold leading-none"
@@ -243,7 +247,10 @@ function CatalogManagerInner({
 				loading={state.loadingRoot}
 			/>
 
-			<div className="flex min-h-0 flex-1 overflow-hidden">
+			<div
+				className="flex min-h-0 flex-1 overflow-hidden"
+				style={{ backgroundColor: "var(--admin-canvas)" }}
+			>
 				<SortableTree
 					activeTabId={state.activeTabId}
 					selectedPageId={state.selectedPageId}
@@ -251,10 +258,15 @@ function CatalogManagerInner({
 					onTreeMutation={loadRootPages}
 					nodeUpdate={null}
 				/>
-				<InlineEditor
-					pageId={state.selectedPageId}
-					onSaved={handleEditorSaved}
-				/>
+				<div
+					className="flex min-h-0 min-w-0 flex-1 flex-col"
+					style={{ backgroundColor: "var(--admin-canvas)" }}
+				>
+					<InlineEditor
+						pageId={state.selectedPageId}
+						onSaved={handleEditorSaved}
+					/>
+				</div>
 			</div>
 
 			<StatsBar />