Fix Visual Manager empty categories: seed roots, harden tree API.

Seed root tabs from SSR, load the full tree without CLEAR_TREE races, coerce parent ids, and tolerate catalog_items page_id type mismatches so category pages actually appear.

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

src/components/admin/catalog-manager/sortable-tree.tsx

@@ -120,26 +120,36 @@ export function SortableTree({
 		setTreeLoading(true);
 		try {
 			const res = await fetch("/api/admin/catalog/tree?mode=full");
-			if (!res.ok) throw new Error();
+			const data = await res.json().catch(() => ({}));
-			const data = await res.json();
+			if (!res.ok) throw new Error(data.error || "Tree request failed");
 			const pages: TreeNodeData[] = data.pages || [];
 			dispatch({ type: "SET_FULL_TREE", nodes: pages });
+
+			// Auto-expand first level under the active root so categories are visible.
+			if (activeTabId !== null) {
+				const firstLevel = pages
+					.filter((p) => Number(p.parentId) === activeTabId)
+					.map((p) => Number(p.id));
+				if (firstLevel.length > 0) {
+					dispatch({ type: "EXPAND_PATH", ids: firstLevel });
+				}
+			}
 		} catch {
 			toast.error("Failed to load catalog tree");
 		} finally {
 			setTreeLoading(false);
 		}
-	}, [dispatch]);
+	}, [dispatch, activeTabId]);
 
-	// Load full tree when tab changes
+	// Load full tree when tab changes — replace atomically (no CLEAR_TREE race).
 	// biome-ignore lint/correctness/useExhaustiveDependencies: explicitly chosen here, see surrounding code
 	useEffect(() => {
 		if (activeTabId === null) return;
-		dispatch({ type: "CLEAR_TREE" });
 		setSearchQuery("");
 		setSearchResults(null);
 		setFilter("all");
-		loadFullTree();
+		dispatch({ type: "COLLAPSE_ALL" });
+		void loadFullTree();
 	}, [activeTabId]); // eslint-disable-line react-hooks/exhaustive-deps
 
 	// Debounced search
@@ -198,7 +208,6 @@ export function SortableTree({
 			for (const cid of childIds) {
 				const node = nodes.get(cid);
 				if (!node) continue;
-				// Apply filter
 				if (filter === "enabled" && node.enabled !== "1") continue;
 				if (filter === "disabled" && node.enabled === "1") continue;
 				const isExpanded = expandedIds.has(cid);
@@ -207,6 +216,20 @@ export function SortableTree({
 			}
 		};
 		traverse(activeTabId, 0);
+
+		// If this root has no children yet, still show the root page itself
+		// so categories are editable (matches page CatalogTree expectations).
+		if (result.length === 0) {
+			const rootNode = nodes.get(activeTabId);
+			if (rootNode) {
+				if (
+					!(filter === "enabled" && rootNode.enabled !== "1") &&
+					!(filter === "disabled" && rootNode.enabled === "1")
+				) {
+					result.push({ ...rootNode, depth: 0, isExpanded: false });
+				}
+			}
+		}
 		return result;
 	}, [activeTabId, nodes, childrenMap, expandedIds, searchResults, filter]);
 

src/components/admin/catalog-manager/use-catalog-store.tsx

@@ -142,12 +142,35 @@ function reducer(
 		case "SET_FULL_TREE": {
 			const nodes = new Map<number, TreeNodeData>();
 			const childrenMap = new Map<number, number[]>();
-			for (const n of action.nodes) {
+			for (const raw of action.nodes) {
-				nodes.set(n.id, n);
+				const id = Number(raw.id);
+				const parentId = Number(raw.parentId);
+				if (!Number.isFinite(id)) continue;
+				const n: TreeNodeData = {
+					...raw,
+					id,
+					parentId: Number.isFinite(parentId) ? parentId : -1,
+					enabled: String(raw.enabled ?? "0"),
+					visible: String(raw.visible ?? "0"),
+					childCount: Number(raw.childCount) || 0,
+					itemCount: Number(raw.itemCount) || 0,
+					iconImage: Number(raw.iconImage) || 0,
+					iconColor: Number(raw.iconColor) || 0,
+					orderNum: Number(raw.orderNum) || 0,
+				};
+				nodes.set(id, n);
 				const siblings = childrenMap.get(n.parentId) || [];
-				siblings.push(n.id);
+				siblings.push(id);
 				childrenMap.set(n.parentId, siblings);
 			}
+			// Roots may be parent_id -1 or 0 — mirror both keys so tabs resolve children.
+			const underNeg1 = childrenMap.get(-1) || [];
+			const under0 = childrenMap.get(0) || [];
+			if (underNeg1.length || under0.length) {
+				const merged = [...new Set([...underNeg1, ...under0])];
+				childrenMap.set(-1, merged);
+				childrenMap.set(0, merged);
+			}
 			for (const [parentId, ids] of childrenMap) {
 				ids.sort(
 					(a, b) =>