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

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>