Merge pull request 'feat(catalog): Visual Manager polish (stats, deletes, newPageParent)' (#4) from feat/vm-polish into main

Reviewed-on: #4

src/app/admin/catalog/catalog-actions.tsx

@@ -1,7 +1,8 @@
 "use client";
 
 import { Loader2, Plus } from "lucide-react";
-import { useState } from "react";
+import { useRouter } from "next/navigation";
+import { useEffect, useState } from "react";
 import { toast } from "sonner";
 import { createCatalogPage } from "@/actions/catalog";
 import { createBcPage } from "@/actions/catalog-bc";
@@ -26,18 +27,40 @@ import { CATALOG_LAYOUTS } from "@/lib/catalog-layouts";
 
 interface CatalogActionsProps {
 	catalogType?: "normal" | "bc";
+	/** Prefill parent and auto-open create dialog (from ?newPageParent=). */
+	initialParentId?: string | null;
 }
 
 export function CatalogActions({
 	catalogType = "normal",
+	initialParentId = null,
 }: CatalogActionsProps) {
 	const { run, isPending } = useServerAction();
+	const router = useRouter();
 	const [open, setOpen] = useState(false);
 	const [caption, setCaption] = useState("");
 	const [parentId, setParentId] = useState("-1");
 	const [pageLayout, setPageLayout] = useState("default_3x3");
 	const isBc = catalogType === "bc";
 
+	useEffect(() => {
+		if (initialParentId == null || initialParentId === "") return;
+		const n = Number.parseInt(initialParentId, 10);
+		if (!Number.isFinite(n)) return;
+		setParentId(String(n));
+		setOpen(true);
+
+		if (typeof window === "undefined") return;
+		const url = new URL(window.location.href);
+		if (url.searchParams.has("newPageParent")) {
+			url.searchParams.delete("newPageParent");
+			const qs = url.searchParams.toString();
+			router.replace(`${url.pathname}${qs ? `?${qs}` : ""}`, {
+				scroll: false,
+			});
+		}
+	}, [initialParentId, router]);
+
 	function handleCreate() {
 		if (!caption.trim()) {
 			toast.error("Caption is required");

src/app/admin/catalog/page.tsx

@@ -212,6 +212,11 @@ export default async function CatalogPagesPage({
 							<CatalogManagerDialog
 								catalogType="bc"
 								canEdit={canEdit}
+								totals={{
+									totalPages: totalBcPages,
+									enabledPages: enabledBcPages,
+									totalItems: totalBcItems,
+								}}
 								initialRoots={bcRootPages.map((p) => ({
 									id: p.id,
 									caption: p.caption,
@@ -221,7 +226,12 @@ export default async function CatalogPagesPage({
 								}))}
 							/>
 						)}
-						{canEdit && <CatalogActions catalogType="bc" />}
+						{canEdit && (
+							<CatalogActions
+								catalogType="bc"
+								initialParentId={sp.get("newPageParent")}
+							/>
+						)}
 					</div>
 				</div>
 				{viewMode === "tree" ? (
@@ -398,6 +408,11 @@ export default async function CatalogPagesPage({
 						<CatalogManagerDialog
 							catalogType="normal"
 							canEdit={canEdit}
+							totals={{
+								totalPages,
+								enabledPages,
+								totalItems,
+							}}
 							initialRoots={rootPages.map((p) => ({
 								id: p.id,
 								caption: p.caption,
@@ -407,7 +422,9 @@ export default async function CatalogPagesPage({
 							}))}
 						/>
 					)}
-					{canEdit && <CatalogActions />}
+					{canEdit && (
+						<CatalogActions initialParentId={sp.get("newPageParent")} />
+					)}
 				</div>
 			</div>
 

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() {
+export interface CatalogStatsTotals {
-	const { state } = useCatalogManager();
+	totalPages: number;
+	enabledPages: number;
+	totalItems: number;
+}
 
-	const stats = useMemo(() => {
+export function StatsBar({ totals }: { totals?: CatalogStatsTotals | null }) {
-		const nodes = Array.from(state.nodes.values());
+	const { state } = useCatalogManager();
-		const enabled = nodes.filter((n) => n.enabled === "1").length;
+	const selected = state.multiSelectedIds.size;
-		const totalItems = nodes.reduce((sum, n) => sum + n.itemCount, 0);
+	const rootTabs = state.rootPages.length;
-		return {
+
-			rootTabs: state.rootPages.length,
+	const pages = totals?.totalPages ?? state.nodes.size;
-			totalPages: nodes.length,
+	const enabled = totals?.enabledPages ?? null;
-			enabled,
+	const items = totals?.totalItems ?? null;
-			totalItems,
+	const loadedOnly = !totals;
-		};
-	}, [state.nodes, state.rootPages]);
 
 	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>
-				<span className="flex items-center gap-1">
+					{pages} pages
-					<ToggleRight className="h-3 w-3" />
+					{loadedOnly ? " loaded" : ""}
-					{stats.enabled} enabled
 				</span>
-				<span className="flex items-center gap-1">
+				{enabled !== null && (
-					<Package className="h-3 w-3" />
+					<span className="flex items-center gap-1">
-					{stats.totalItems} items
+						<ToggleRight className="h-3 w-3" />
-				</span>
+						{enabled} enabled
-				{state.multiSelectedIds.size > 0 && (
-					<span className="text-primary font-medium">
-						{state.multiSelectedIds.size} selected
 					</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}`,
 							)
 						}