Harden catalog admin: fix translate/quick-add, RCON sync, and confirm UX.

Restore broken Quick Add search, correct Translate saves to items_base and FurnitureData, reparent page deletes, sync RCON on create/toggle/BC mutations, and replace native confirms/prompts with dialogs.

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

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

@@ -1,16 +1,20 @@
 "use client";
 
-import { LayoutGrid } from "lucide-react";
+import { LayoutGrid, Plus } from "lucide-react";
 import { useCallback, useEffect, useState } from "react";
 import { toast } from "sonner";
 import { createCatalogPage } from "@/actions/catalog";
+import { useConfirmDialog } from "@/components/admin/confirm-dialog";
 import { Button } from "@/components/ui/button";
 import {
 	Dialog,
 	DialogContent,
+	DialogFooter,
 	DialogHeader,
 	DialogTitle,
 } from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
 import { TooltipProvider } from "@/components/ui/tooltip";
 import type { RootTab } from "@/types/catalog";
 import { BreadcrumbBar } from "./breadcrumb-bar";
@@ -47,15 +51,16 @@ export function CatalogManagerDialog() {
 
 function CatalogManagerInner({
 	open,
-	// biome-ignore lint/correctness/noUnusedFunctionParameters: part of the dialog public API
-	onOpenChange,
 }: {
 	open: boolean;
 	onOpenChange: (v: boolean) => void;
 }) {
 	const { state, dispatch } = useCatalogManager();
+	const { confirm, dialog: confirmDialog } = useConfirmDialog();
+	const [createOpen, setCreateOpen] = useState(false);
+	const [newRootName, setNewRootName] = useState("");
+	const [creating, setCreating] = useState(false);
 
-	// Load root pages when dialog opens
 	const loadRootPages = useCallback(async () => {
 		dispatch({ type: "SET_LOADING_ROOT", loading: true });
 		try {
@@ -73,7 +78,6 @@ function CatalogManagerInner({
 			);
 			dispatch({ type: "SET_ROOT_PAGES", pages });
 
-			// Auto-select first tab if none or missing
 			if (
 				pages.length > 0 &&
 				(!state.activeTabId || !pages.find((p) => p.id === state.activeTabId))
@@ -86,53 +90,65 @@ function CatalogManagerInner({
 		}
 	}, [dispatch, state.activeTabId]);
 
-	// biome-ignore lint/correctness/useExhaustiveDependencies: explicitly chosen here, see surrounding code
+	// biome-ignore lint/correctness/useExhaustiveDependencies: load once when dialog opens
 	useEffect(() => {
 		if (open) loadRootPages();
-	}, [open]); // eslint-disable-line react-hooks/exhaustive-deps
+	}, [open]);
 
-	// Handle dialog close: preserve tree state, clear selection
 	useEffect(() => {
 		if (!open) dispatch({ type: "ON_DIALOG_CLOSE" });
 	}, [open, dispatch]);
 
-	const handleTabClick = (id: number) => {
-		if (state.editorDirty && !confirm("You have unsaved changes. Discard?"))
-			return;
+	async function confirmDiscardIfDirty(): Promise<boolean> {
+		if (!state.editorDirty) return true;
+		return confirm({
+			title: "Unsaved changes",
+			description: "You have unsaved changes. Discard them?",
+			confirmLabel: "Discard",
+			cancelLabel: "Keep editing",
+		});
+	}
+
+	const handleTabClick = async (id: number) => {
+		if (!(await confirmDiscardIfDirty())) return;
 		dispatch({ type: "SET_ACTIVE_TAB", id });
 		dispatch({ type: "CLEAR_TREE" });
 	};
 
 	const handleCreateRoot = async () => {
-		const caption = prompt("Root page name:");
-		if (!caption?.trim()) return;
+		const caption = newRootName.trim();
+		if (!caption) return;
+		setCreating(true);
 		try {
 			const result = await createCatalogPage({
 				parentId: -1,
-				caption: caption.trim(),
+				caption,
 			});
 			if (!result.ok) throw new Error(result.error);
+			setCreateOpen(false);
+			setNewRootName("");
 			await loadRootPages();
 			toast.success("Root page created");
 		} catch {
 			toast.error("Failed to create root page");
+		} finally {
+			setCreating(false);
 		}
 	};
 
-	const handleSelectPage = (id: number) => {
-		if (state.editorDirty && !confirm("You have unsaved changes. Discard?"))
-			return;
+	const handleSelectPage = async (id: number) => {
+		if (!(await confirmDiscardIfDirty())) return;
 		dispatch({ type: "SELECT_PAGE", id: id > 0 ? id : null });
 	};
 
-	const handleEditTab = (id: number) => {
-		// First ensure this tab is active, then select it in the editor
+	const handleEditTab = async (id: number) => {
 		if (state.activeTabId !== id) {
+			if (!(await confirmDiscardIfDirty())) return;
 			dispatch({ type: "SET_ACTIVE_TAB", id });
 			dispatch({ type: "CLEAR_TREE" });
-		}
-		if (state.editorDirty && !confirm("You have unsaved changes. Discard?"))
+		} else if (!(await confirmDiscardIfDirty())) {
 			return;
+		}
 		dispatch({ type: "SELECT_PAGE", id });
 	};
 
@@ -140,7 +156,6 @@ function CatalogManagerInner({
 		dispatch({ type: "UPDATE_NODE", update: { ...updated } });
 		dispatch({ type: "SET_DIRTY", dirty: false });
 
-		// Update root tabs if root page
 		const rootIdx = state.rootPages.findIndex((p) => p.id === updated.id);
 		if (rootIdx !== -1) {
 			const pages = [...state.rootPages];
@@ -155,7 +170,7 @@ function CatalogManagerInner({
 
 	return (
 		<TooltipProvider delayDuration={300}>
-			{/* Header */}
+			{confirmDialog}
 			<DialogHeader className="px-4 py-2.5 border-b shrink-0">
 				<DialogTitle className="text-base flex items-center gap-2">
 					<LayoutGrid className="h-4 w-4" />
@@ -163,20 +178,17 @@ function CatalogManagerInner({
 				</DialogTitle>
 			</DialogHeader>
 
-			{/* Breadcrumb */}
 			<BreadcrumbBar />
 
-			{/* Root tabs */}
 			<RootTabs
 				tabs={state.rootPages}
 				activeTabId={state.activeTabId}
 				onTabClick={handleTabClick}
 				onEditTab={handleEditTab}
-				onCreateRoot={handleCreateRoot}
+				onCreateRoot={() => setCreateOpen(true)}
 				loading={state.loadingRoot}
 			/>
 
-			{/* Main content: tree + editor */}
 			<div className="flex flex-1 min-h-0">
 				<SortableTree
 					activeTabId={state.activeTabId}
@@ -191,8 +203,45 @@ function CatalogManagerInner({
 				/>
 			</div>
 
-			{/* Stats bar */}
 			<StatsBar />
+
+			<Dialog open={createOpen} onOpenChange={setCreateOpen}>
+				<DialogContent className="sm:max-w-md">
+					<DialogHeader>
+						<DialogTitle>New root page</DialogTitle>
+					</DialogHeader>
+					<div className="space-y-2">
+						<Label htmlFor="root-caption">Name</Label>
+						<Input
+							id="root-caption"
+							value={newRootName}
+							onChange={(e) => setNewRootName(e.target.value)}
+							placeholder="e.g. Furniture"
+							autoFocus
+							onKeyDown={(e) => {
+								if (e.key === "Enter") void handleCreateRoot();
+							}}
+						/>
+					</div>
+					<DialogFooter>
+						<Button
+							type="button"
+							variant="outline"
+							onClick={() => setCreateOpen(false)}
+						>
+							Cancel
+						</Button>
+						<Button
+							type="button"
+							disabled={creating || !newRootName.trim()}
+							onClick={handleCreateRoot}
+						>
+							<Plus className="mr-1 h-4 w-4" />
+							Create
+						</Button>
+					</DialogFooter>
+				</DialogContent>
+			</Dialog>
 		</TooltipProvider>
 	);
 }

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

@@ -25,6 +25,7 @@ import {
 	reorderTreePage,
 	toggleCatalogPage,
 } from "@/actions/catalog";
+import { useConfirmDialog } from "@/components/admin/confirm-dialog";
 import { CatalogIcon } from "@/components/admin/catalog-tree";
 import { Button } from "@/components/ui/button";
 import {
@@ -48,8 +49,8 @@ import type { RootTab } from "@/types/catalog";
 interface RootTabsProps {
 	tabs: RootTab[];
 	activeTabId: number | null;
-	onTabClick: (id: number) => void;
-	onEditTab: (id: number) => void;
+	onTabClick: (id: number) => void | Promise<void>;
+	onEditTab: (id: number) => void | Promise<void>;
 	onCreateRoot: () => void;
 	loading?: boolean;
 }
@@ -62,6 +63,7 @@ export function RootTabs({
 	onCreateRoot,
 	loading,
 }: RootTabsProps) {
+	const { confirm, dialog: confirmDialog } = useConfirmDialog();
 	const [activeDragId, setActiveDragId] = useState<number | null>(null);
 	const sensors = useSensors(
 		useSensor(PointerSensor, { activationConstraint: { distance: 8 } }),
@@ -112,12 +114,12 @@ export function RootTabs({
 	};
 
 	const handleDelete = async (tab: RootTab) => {
-		if (
-			!confirm(
-				`Delete root page "${tab.caption}"? Children will be reparented.`,
-			)
-		)
-			return;
+		const ok = await confirm({
+			title: "Delete root page",
+			description: `Delete root page "${tab.caption}"? Children will be reparented.`,
+			confirmLabel: "Delete",
+		});
+		if (!ok) return;
 		try {
 			await deleteTreePage({ pageId: tab.id, mode: "reparent" });
 			toast.success(`"${tab.caption}" deleted`);
@@ -132,6 +134,7 @@ export function RootTabs({
 
 	return (
 		<div className="flex items-center gap-1 border-b bg-muted/30 px-2 py-1.5 overflow-x-auto shrink-0">
+			{confirmDialog}
 			{loading && (
 				<Loader2 className="h-4 w-4 animate-spin text-muted-foreground mx-2" />
 			)}

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

@@ -40,9 +40,18 @@ import {
 	toggleCatalogPage,
 	updateCatalogPage,
 } from "@/actions/catalog";
+import { useConfirmDialog } from "@/components/admin/confirm-dialog";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
+import {
+	Dialog,
+	DialogContent,
+	DialogFooter,
+	DialogHeader,
+	DialogTitle,
+} from "@/components/ui/dialog";
 import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
 import {
 	Tooltip,
 	TooltipContent,
@@ -66,7 +75,7 @@ import type { TreeNodeData, TreeNodeUpdate } from "@/types/catalog";
 interface SortableTreeProps {
 	activeTabId: number | null;
 	selectedPageId: number | null;
-	onSelectPage: (id: number) => void;
+	onSelectPage: (id: number) => void | Promise<void>;
 	onTreeMutation: () => void;
 	nodeUpdate?: TreeNodeUpdate | null;
 }
@@ -83,6 +92,7 @@ export function SortableTree({
 	nodeUpdate,
 }: SortableTreeProps) {
 	const { state, dispatch } = useCatalogManager();
+	const { confirm, dialog: confirmDialog } = useConfirmDialog();
 	const {
 		nodes,
 		childrenMap,
@@ -97,6 +107,9 @@ export function SortableTree({
 	const [searchResults, setSearchResults] = useState<TreeNodeData[] | null>(
 		null,
 	);
+	const [subpageParentId, setSubpageParentId] = useState<number | null>(null);
+	const [subpageName, setSubpageName] = useState("");
+	const [creatingSubpage, setCreatingSubpage] = useState(false);
 	const [searching, setSearching] = useState(false);
 	const searchTimeout = useRef<ReturnType<typeof setTimeout> | null>(null);
 	const [activeId, setActiveId] = useState<number | null>(null);
@@ -412,22 +425,32 @@ export function SortableTree({
 	};
 
 	// ── Actions ─────────────────────────────────────────────────
-	const handleAddSubpage = async (parentId: number) => {
-		const caption = prompt("Subpage name:");
-		if (!caption?.trim()) return;
+	const handleAddSubpage = (parentId: number) => {
+		setSubpageParentId(parentId);
+		setSubpageName("");
+	};
+
+	const handleCreateSubpage = async () => {
+		if (subpageParentId === null || !subpageName.trim()) return;
+		setCreatingSubpage(true);
 		try {
 			const result = await createCatalogPage({
-				parentId,
-				caption: caption.trim(),
+				parentId: subpageParentId,
+				caption: subpageName.trim(),
 			});
 			if (!result.ok) throw new Error(result.error);
-			dispatch({ type: "SET_EXPANDED", id: parentId, expanded: true });
+			dispatch({ type: "SET_EXPANDED", id: subpageParentId, expanded: true });
 			await loadFullTree();
 			const data = result.data as Record<string, unknown>;
 			onSelectPage(data.id as number);
 			onTreeMutation();
+			setSubpageParentId(null);
+			setSubpageName("");
+			toast.success("Subpage created");
 		} catch {
 			toast.error("Failed to create subpage");
+		} finally {
+			setCreatingSubpage(false);
 		}
 	};
 
@@ -457,10 +480,12 @@ export function SortableTree({
 
 	const handleDelete = async (id: number) => {
 		const node = nodes.get(id);
-		if (
-			!confirm(`Delete "${node?.caption ?? id}"? Children will be reparented.`)
-		)
-			return;
+		const ok = await confirm({
+			title: "Delete page",
+			description: `Delete "${node?.caption ?? id}"? Children will be reparented.`,
+			confirmLabel: "Delete",
+		});
+		if (!ok) return;
 		try {
 			const result = await deleteTreePage({ pageId: id, mode: "reparent" });
 			if (!result.ok) throw new Error();
@@ -548,7 +573,12 @@ export function SortableTree({
 
 	const handleBulkDelete = async () => {
 		const ids = [...multiSelectedIds];
-		if (!confirm(`Delete ${ids.length} page(s)?`)) return;
+		const ok = await confirm({
+			title: "Delete pages",
+			description: `Delete ${ids.length} page(s)? Children will be reparented.`,
+			confirmLabel: "Delete",
+		});
+		if (!ok) return;
 		await Promise.allSettled(
 			ids.map((id) => deleteTreePage({ pageId: id, mode: "reparent" })),
 		);
@@ -598,6 +628,7 @@ export function SortableTree({
 			tabIndex={0}
 			className="flex flex-col h-full border-r w-80 shrink-0"
 		>
+			{confirmDialog}
 			{/* Header */}
 			<div className="border-b px-3 py-2 space-y-2 shrink-0">
 				<div className="flex items-center gap-1.5">
@@ -895,6 +926,59 @@ export function SortableTree({
 					</Button>
 				</div>
 			)}
+
+			<Dialog
+				open={subpageParentId !== null}
+				onOpenChange={(open) => {
+					if (!open) {
+						setSubpageParentId(null);
+						setSubpageName("");
+					}
+				}}
+			>
+				<DialogContent className="sm:max-w-md">
+					<DialogHeader>
+						<DialogTitle>New subpage</DialogTitle>
+					</DialogHeader>
+					<div className="space-y-2">
+						<Label htmlFor="subpage-caption">Name</Label>
+						<Input
+							id="subpage-caption"
+							value={subpageName}
+							onChange={(e) => setSubpageName(e.target.value)}
+							placeholder="e.g. Sofas"
+							autoFocus
+							onKeyDown={(e) => {
+								if (e.key === "Enter") void handleCreateSubpage();
+							}}
+						/>
+					</div>
+					<DialogFooter>
+						<Button
+							type="button"
+							variant="outline"
+							onClick={() => {
+								setSubpageParentId(null);
+								setSubpageName("");
+							}}
+						>
+							Cancel
+						</Button>
+						<Button
+							type="button"
+							disabled={creatingSubpage || !subpageName.trim()}
+							onClick={handleCreateSubpage}
+						>
+							{creatingSubpage ? (
+								<Loader2 className="mr-1 h-4 w-4 animate-spin" />
+							) : (
+								<Plus className="mr-1 h-4 w-4" />
+							)}
+							Create
+						</Button>
+					</DialogFooter>
+				</DialogContent>
+			</Dialog>
 		</div>
 	);
 }