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/app/api/admin/catalog/tree/route.ts

@@ -184,13 +184,79 @@ async function getChildren(
 }
 
 async function searchPages(q: string, isBc: boolean): Promise<TreeNode[]> {
-	const flat = isBc ? await getBcTreeFlat() : await getTreeFlat();
-	const needle = q.toLowerCase();
-	return flat.filter(
-		(p) =>
-			p.caption.toLowerCase().includes(needle) ||
-			String(p.id) === needle,
+	const needle = q.trim();
+	const idExact = Number.parseInt(needle, 10);
+	const idFilter =
+		Number.isFinite(idExact) && String(idExact) === needle
+			? [{ id: idExact }]
+			: [];
+
+	if (isBc) {
+		const pages = await prisma.catalogPagesBc.findMany({
+			where: {
+				OR: [{ caption: { contains: needle } }, ...idFilter],
+			},
+			orderBy: { orderNum: "asc" },
+			take: 50,
+		});
+		return pages.map((p) =>
+			toTreeNode(
+				{
+					id: toInt(p.id),
+					caption: p.caption,
+					parentId: toInt(p.parentId, -1),
+					orderNum: toInt(p.orderNum),
+					enabled: String(p.enabled ?? "0"),
+					visible: String(p.visible ?? "0"),
+					iconImage: toInt(p.iconImage),
+					iconColor: toInt(p.iconColor),
+					pageLayout: p.pageLayout,
+				},
+				0,
+				0,
+			),
+		);
+	}
+
+	const pages = await prisma.catalogPages.findMany({
+		where: {
+			OR: [{ caption: { contains: needle } }, ...idFilter],
+		},
+		orderBy: { orderNum: "asc" },
+		take: 50,
+	});
+	const ids = pages.map((p) => toInt(p.id));
+	const [childCounts, itemMap] = await Promise.all([
+		ids.length
+			? prisma.catalogPages.groupBy({
+					by: ["parentId"],
+					where: { parentId: { in: ids } },
+					_count: true,
+				})
+			: Promise.resolve([]),
+		safeItemCounts(ids),
+	]);
+	const childMap = Object.fromEntries(
+		childCounts.map((c) => [toInt(c.parentId), c._count]),
 	);
+	return pages.map((p) => {
+		const id = toInt(p.id);
+		return toTreeNode(
+			{
+				id,
+				caption: p.caption,
+				parentId: toInt(p.parentId, -1),
+				orderNum: toInt(p.orderNum),
+				enabled: String(p.enabled ?? "0"),
+				visible: String(p.visible ?? "0"),
+				iconImage: toInt(p.iconImage),
+				iconColor: toInt(p.iconColor),
+				pageLayout: p.pageLayout,
+			},
+			childMap[id] ?? 0,
+			itemMap.get(id) ?? 0,
+		);
+	});
 }
 
 export const GET = withAdmin(