refactor(catalog): unify commands and embed guarded catalog workspace

src/app/admin/catalog/[id]/catalog-items-table/catalog-items-table.tsx

@@ -144,6 +144,8 @@ function SortableRow({
 }
 
 interface CatalogItemsTableProps {
+	onDirtyChange?: (dirty: boolean) => void;
+	onRefresh?: () => void;
 	items: CatalogItemData[];
 	pageId: number;
 	pageLayout: string;
@@ -154,6 +156,8 @@ interface CatalogItemsTableProps {
 }
 
 export function CatalogItemsTable({
+	onDirtyChange,
+	onRefresh,
 	items,
 	pageId,
 	pageLayout,
@@ -291,6 +295,9 @@ export function CatalogItemsTable({
 	}, [items, itemOrder]);
 
 	const hasUnsavedChanges = modifiedItems.length > 0 || hasOrderChanges;
+	useEffect(() => {
+		onDirtyChange?.(hasUnsavedChanges);
+	}, [hasUnsavedChanges, onDirtyChange]);
 
 	// Warn before navigating away with unsaved changes
 	useEffect(() => {
@@ -383,7 +390,8 @@ export function CatalogItemsTable({
 				errorMessage: `Failed to save item #${item.id}.`,
 				onSuccess: () => {
 					setSavingItemId(null);
-					router.refresh();
+					if (onRefresh) onRefresh();
+					else router.refresh();
 				},
 				onError: () => setSavingItemId(null),
 			},
@@ -426,6 +434,10 @@ export function CatalogItemsTable({
 					else failedCount++;
 				}
 
+				if (savedCount > 0) {
+					if (onRefresh) onRefresh();
+					else router.refresh();
+				}
 				if (failedCount > 0) {
 					return {
 						ok: false as const,
@@ -456,7 +468,8 @@ export function CatalogItemsTable({
 			errorMessage: "Failed to delete items.",
 			onSuccess: () => {
 				setSelected(new Set());
-				router.refresh();
+				if (onRefresh) onRefresh();
+				else router.refresh();
 			},
 		});
 	}
@@ -490,7 +503,8 @@ export function CatalogItemsTable({
 					setSelected(new Set());
 					setMoveOpen(false);
 					setMoveTargetPageId(null);
-					router.refresh();
+					if (onRefresh) onRefresh();
+					else router.refresh();
 				},
 			},
 		);
@@ -590,7 +604,8 @@ export function CatalogItemsTable({
 				onSuccess: () => {
 					setAddOpen(false);
 					setNewItem({ ...DEFAULT_NEW_ITEM });
-					router.refresh();
+					if (onRefresh) onRefresh();
+					else router.refresh();
 				},
 			},
 		);
@@ -641,7 +656,8 @@ export function CatalogItemsTable({
 				onSuccess: () => {
 					setMoveOneId(null);
 					setMoveOneTarget(null);
-					router.refresh();
+					if (onRefresh) onRefresh();
+					else router.refresh();
 				},
 			},
 		);
@@ -711,7 +727,8 @@ export function CatalogItemsTable({
 				onSuccess: () => {
 					setEditingItem(null);
 					setEditingBase(null);
-					router.refresh();
+					if (onRefresh) onRefresh();
+					else router.refresh();
 				},
 			},
 		);

src/app/admin/catalog/[id]/catalog-page-form.tsx

@@ -136,10 +136,18 @@ export function CatalogPageForm({
 
 	function handleSubmit(e: React.FormEvent) {
 		e.preventDefault();
-		run(() => updateCatalogPage({ id: catalogPage.id, ...form }), {
-			successMessage: "Page updated and catalog synced.",
-			errorMessage: "Failed to update.",
-		});
+		run(
+			() =>
+				updateCatalogPage({
+					id: catalogPage.id,
+					...form,
+					expected: catalogPage as unknown as Record<string, unknown>,
+				}),
+			{
+				successMessage: "Page saved.",
+				errorMessage: "Failed to update.",
+			},
+		);
 	}
 
 	async function handleDelete() {

src/app/admin/catalog/catalog-manager-dialog-wrapper.tsx

@@ -11,3 +11,11 @@ export const CatalogManagerDialog = dynamic(
 		),
 	{ ssr: false },
 );
+
+export const CatalogManagerWorkspace = dynamic(
+	() =>
+		import("@/components/admin/catalog-manager/catalog-manager-dialog").then(
+			(m) => ({ default: m.CatalogManagerWorkspace }),
+		),
+	{ ssr: false },
+);

src/app/admin/catalog/catalog-view-toggle.tsx

@@ -1,8 +1,10 @@
 "use client";
 
-import { FolderTree, HardHat, List, Package } from "lucide-react";
+import { FolderTree, HardHat, LayoutGrid, List, Package } from "lucide-react";
 import { useRouter, useSearchParams } from "next/navigation";
+import { useTranslations } from "next-intl";
 import { Button } from "@/components/ui/button";
+import { requestCatalogNavigation } from "@/features/catalog/client/use-catalog-navigation";
 import { cn } from "@/lib/utils";
 
 interface CatalogViewToggleProps {
@@ -15,11 +17,13 @@ export function CatalogViewToggle({
 	catalogType = "normal",
 }: CatalogViewToggleProps) {
 	const router = useRouter();
+	const t = useTranslations("pages.admin.catalog.workspace");
 	const searchParams = useSearchParams();
 
 	function setView(view: string) {
+		if (view === currentView || !requestCatalogNavigation()) return;
 		const params = new URLSearchParams(searchParams.toString());
-		if (view === "tree") {
+		if (view === "manager") {
 			params.delete("view");
 		} else {
 			params.set("view", view);
@@ -28,18 +32,21 @@ export function CatalogViewToggle({
 	}
 
 	function setCatalog(type: string) {
+		if (type === catalogType || !requestCatalogNavigation()) return;
 		const params = new URLSearchParams(searchParams.toString());
 		if (type === "normal") {
 			params.delete("catalog");
 		} else {
 			params.set("catalog", type);
 		}
-		params.delete("view"); // reset to tree when switching
+		params.delete("view");
+		params.delete("root");
+		params.delete("category");
 		router.push(`?${params.toString()}`);
 	}
 
 	return (
-		<div className="flex items-center gap-2">
+		<div className="flex flex-wrap items-center gap-2">
 			{/* Catalog type selector */}
 			<div className="flex items-center rounded-md border bg-card">
 				<Button
@@ -52,7 +59,7 @@ export function CatalogViewToggle({
 					onClick={() => setCatalog("normal")}
 				>
 					<Package className="mr-1.5 h-4 w-4" />
-					Catalog
+					{t("normal")}
 				</Button>
 				<Button
 					variant="ghost"
@@ -69,6 +76,14 @@ export function CatalogViewToggle({
 			</div>
 
 			{/* View mode selector */}
+			<Button
+				variant={currentView === "manager" ? "default" : "ghost"}
+				size="sm"
+				onClick={() => setView("manager")}
+			>
+				<LayoutGrid className="mr-1.5 h-4 w-4" />
+				{t("editor")}
+			</Button>
 			<div className="flex items-center rounded-md border bg-card">
 				<Button
 					variant="ghost"
@@ -80,7 +95,7 @@ export function CatalogViewToggle({
 					onClick={() => setView("tree")}
 				>
 					<FolderTree className="mr-1.5 h-4 w-4" />
-					Tree
+					{t("tree")}
 				</Button>
 				<Button
 					variant="ghost"
@@ -92,7 +107,7 @@ export function CatalogViewToggle({
 					onClick={() => setView("table")}
 				>
 					<List className="mr-1.5 h-4 w-4" />
-					Table
+					{t("table")}
 				</Button>
 			</div>
 		</div>