feat(catalog): SSR stats in Visual Manager, honest deletes, newPageParent

Pass DB totals into StatsBar, mirror Catalog Structure delete copy, and open New Page with ?newPageParent= for shop and BC.

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

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

@@ -13,7 +13,7 @@ import { BreadcrumbBar } from "./breadcrumb-bar";
 import { InlineEditor, type PageUpdateData } from "./inline-editor";
 import { RootTabs } from "./root-tabs";
 import { SortableTree } from "./sortable-tree";
-import { StatsBar } from "./stats-bar";
+import { type CatalogStatsTotals, StatsBar } from "./stats-bar";
 import {
 	CatalogManagerProvider,
 	type CatalogManagerMode,
@@ -29,10 +29,12 @@ export function CatalogManagerDialog({
 	initialRoots = [],
 	catalogType = "normal",
 	canEdit = false,
+	totals = null,
 }: {
 	initialRoots?: RootTab[];
 	catalogType?: CatalogManagerMode;
 	canEdit?: boolean;
+	totals?: CatalogStatsTotals | null;
 }) {
 	const [open, setOpen] = useState(false);
 	const [mounted, setMounted] = useState(false);
@@ -89,6 +91,7 @@ export function CatalogManagerDialog({
 										open={open}
 										onOpenChange={setOpen}
 										initialRoots={initialRoots}
+										totals={totals}
 									/>
 								</CatalogManagerProvider>
 							</div>
@@ -104,10 +107,12 @@ function CatalogManagerInner({
 	open,
 	onOpenChange,
 	initialRoots,
+	totals,
 }: {
 	open: boolean;
 	onOpenChange: (v: boolean) => void;
 	initialRoots: RootTab[];
+	totals?: CatalogStatsTotals | null;
 }) {
 	const { state, dispatch, catalogType, canEdit } = useCatalogManager();
 	const catQs = catalogTreeQs(catalogType);
@@ -300,7 +305,7 @@ function CatalogManagerInner({
 				</div>
 			</div>
 
-			<StatsBar />
+			<StatsBar totals={totals} />
 		</TooltipProvider>
 	);
 }

src/components/admin/catalog-manager/root-tabs.tsx

@@ -127,7 +127,7 @@ export function RootTabs({
 		if (!canEdit) return;
 		const ok = await confirm({
 			title: "Delete root page",
-			description: `Delete root page "${tab.caption}"? Children will be reparented.`,
+			description: `Delete root page "${tab.caption}"? Child pages (if any) will be moved to root; items on this page will be deleted.`,
 			confirmLabel: "Delete",
 		});
 		if (!ok) return;

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

@@ -557,9 +557,17 @@ export function SortableTree({
 	const handleDelete = async (id: number) => {
 		if (!canEdit) return;
 		const node = nodes.get(id);
+		const childInfo =
+			node && node.childCount > 0
+				? ` Its ${node.childCount} child page(s) will be moved to the parent.`
+				: "";
+		const itemInfo =
+			node && node.itemCount > 0
+				? ` ${node.itemCount} item(s) on this page will be deleted.`
+				: "";
 		const ok = await confirm({
 			title: "Delete page",
-			description: `Delete "${node?.caption ?? id}"? Children will be reparented.`,
+			description: `Delete "${node?.caption ?? id}"?${childInfo}${itemInfo}`,
 			confirmLabel: "Delete",
 		});
 		if (!ok) return;
@@ -700,19 +708,41 @@ export function SortableTree({
 	const handleBulkDelete = async () => {
 		if (!canEdit) return;
 		const ids = [...multiSelectedIds];
+		let childTotal = 0;
+		let itemTotal = 0;
+		for (const id of ids) {
+			const node = nodes.get(id);
+			if (!node) continue;
+			childTotal += node.childCount;
+			itemTotal += node.itemCount;
+		}
+		const childInfo =
+			childTotal > 0
+				? ` About ${childTotal} child page(s) will be moved to parents.`
+				: "";
+		const itemInfo =
+			itemTotal > 0
+				? ` About ${itemTotal} item(s) on selected pages will be deleted.`
+				: "";
 		const ok = await confirm({
 			title: "Delete pages",
-			description: `Delete ${ids.length} page(s)? Children will be reparented.`,
+			description: `Delete ${ids.length} page(s)?${childInfo}${itemInfo}`,
 			confirmLabel: "Delete",
 		});
 		if (!ok) return;
 		const del = catalogType === "bc" ? deleteBcTreePage : deleteTreePage;
-		await Promise.allSettled(
+		const results = await Promise.allSettled(
 			ids.map((id) => del({ pageId: id, mode: "reparent" })),
 		);
+		const failed = results.filter((r) => r.status === "rejected").length;
+		const okCount = ids.length - failed;
 		dispatch({ type: "CLEAR_MULTI_SELECT" });
 		await loadFullTree();
-		toast.success(`${ids.length} page(s) deleted`);
+		if (failed > 0) {
+			toast.error(`${failed} delete(s) failed; ${okCount} succeeded`);
+		} else {
+			toast.success(`${okCount} page(s) deleted`);
+		}
 		onTreeMutation();
 	};
 

src/components/admin/catalog-manager/stats-bar.tsx

@@ -1,45 +1,50 @@
 "use client";
 
 import { FolderTree, Keyboard, Package, ToggleRight } from "lucide-react";
-import { useMemo } from "react";
 import { useCatalogManager } from "./use-catalog-store";
 
-export function StatsBar() {
-	const { state } = useCatalogManager();
+export interface CatalogStatsTotals {
+	totalPages: number;
+	enabledPages: number;
+	totalItems: number;
+}
 
-	const stats = useMemo(() => {
-		const nodes = Array.from(state.nodes.values());
-		const enabled = nodes.filter((n) => n.enabled === "1").length;
-		const totalItems = nodes.reduce((sum, n) => sum + n.itemCount, 0);
-		return {
-			rootTabs: state.rootPages.length,
-			totalPages: nodes.length,
-			enabled,
-			totalItems,
-		};
-	}, [state.nodes, state.rootPages]);
+export function StatsBar({ totals }: { totals?: CatalogStatsTotals | null }) {
+	const { state } = useCatalogManager();
+	const selected = state.multiSelectedIds.size;
+	const rootTabs = state.rootPages.length;
+
+	const pages = totals?.totalPages ?? state.nodes.size;
+	const enabled = totals?.enabledPages ?? null;
+	const items = totals?.totalItems ?? null;
+	const loadedOnly = !totals;
 
 	return (
 		<div className="flex items-center justify-between gap-4 px-4 py-1.5 border-t bg-muted/30 text-[11px] text-muted-foreground shrink-0">
 			<div className="flex items-center gap-4">
 				<span className="flex items-center gap-1">
 					<FolderTree className="h-3 w-3" />
-					{stats.rootTabs} root
+					{rootTabs} root
 				</span>
-				<span>{stats.totalPages} pages</span>
-				<span className="flex items-center gap-1">
-					<ToggleRight className="h-3 w-3" />
-					{stats.enabled} enabled
+				<span>
+					{pages} pages
+					{loadedOnly ? " loaded" : ""}
 				</span>
-				<span className="flex items-center gap-1">
-					<Package className="h-3 w-3" />
-					{stats.totalItems} items
-				</span>
-				{state.multiSelectedIds.size > 0 && (
-					<span className="text-primary font-medium">
-						{state.multiSelectedIds.size} selected
+				{enabled !== null && (
+					<span className="flex items-center gap-1">
+						<ToggleRight className="h-3 w-3" />
+						{enabled} enabled
 					</span>
 				)}
+				{items !== null && (
+					<span className="flex items-center gap-1">
+						<Package className="h-3 w-3" />
+						{items} items
+					</span>
+				)}
+				{selected > 0 && (
+					<span className="text-primary font-medium">{selected} selected</span>
+				)}
 			</div>
 			<div className="flex items-center gap-1">
 				<Keyboard className="h-3 w-3" />

src/components/admin/catalog-tree.tsx

@@ -728,7 +728,7 @@ function TreeItem({
 												e.stopPropagation();
 												router.push(
 													catalogType === "bc"
-														? `/admin/catalog/builder-club/${node.id}`
+														? `/admin/catalog?catalog=bc&newPageParent=${node.id}`
 														: `/admin/catalog?newPageParent=${node.id}`,
 												);
 											}}
@@ -872,7 +872,7 @@ function TreeItem({
 						onClick={() =>
 							router.push(
 								catalogType === "bc"
-									? `/admin/catalog/builder-club/${node.id}`
+									? `/admin/catalog?catalog=bc&newPageParent=${node.id}`
 									: `/admin/catalog?newPageParent=${node.id}`,
 							)
 						}