Replace standalone catalog editor with the unified Visual Catalog studio

Make /admin/catalog a full-screen catalog studio that replaces the old
listing plus separate [id]/builder-club detail pages:

- Embed CatalogManagerWorkspace on /admin/catalog with a Normal/Builder
  Club toggle, Catalog Sync status, packages (normal), Organize imports
  and a diagnostics link to /admin/studio/maintenance.
- Manage BC items directly in the studio Items tab (new BcItemsEditor,
  CRUD via existing bc actions; /api/admin/catalog/items now serves BC).
- Inline editor: add pageTextTeaser field for both catalogs and remove
  the legacy full-editor links.
- Remove the 'Open full editor' context action from the tree.
- Move catalog-items-table (dir + barrel) and catalog-translate-tab out
  of the app route into src/components/admin/catalog and update all
  importers.
- Keep /admin/catalog/[id], builder-club/[id] and /admin/catalog/maintenance
  as redirects into the new studio; consolidate maintenance panels into
  /admin/studio/maintenance and point the nav item there.
- Delete the old listing/table/tabs/forms and the standalone bc-manager.

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

@@ -5,7 +5,7 @@ import { useTranslations } from "next-intl";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { toast } from "sonner";
 import { type CatalogKind, createAutoCategory } from "@/actions/catalog";
-import type { CatalogItemData } from "@/app/admin/catalog/[id]/catalog-items-table/types";
+import type { CatalogItemData } from "@/components/admin/catalog/catalog-items-table/types";
 import { IconPicker } from "@/components/admin/catalog/icon-picker";
 import { useCatalogManager } from "@/components/admin/catalog-manager/use-catalog-store";
 import { CatalogIcon, LAYOUT_COLORS } from "@/components/admin/catalog-tree";

src/components/admin/catalog-manager/auto-organize.tsx

@@ -4,7 +4,7 @@ import { ArrowDownUp, Loader2, Wand2 } from "lucide-react";
 import { useState } from "react";
 import { toast } from "sonner";
 import { reorderCatalogItems } from "@/actions/catalog-items";
-import type { CatalogItemData } from "@/app/admin/catalog/[id]/catalog-items-table/types";
+import type { CatalogItemData } from "@/components/admin/catalog/catalog-items-table/types";
 import { Button } from "@/components/ui/button";
 import {
 	Select,

src/components/admin/catalog-manager/bc-items-editor.tsx

@@ -0,0 +1,333 @@
+"use client";
+
+import { Loader2, Package, Pencil, Plus, Trash2 } from "lucide-react";
+import { useCallback, useEffect, useState } from "react";
+import {
+	createBcItem,
+	deleteBcItem,
+	updateBcItem,
+} from "@/actions/catalog-bc";
+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 {
+	Table,
+	TableBody,
+	TableCell,
+	TableHead,
+	TableHeader,
+	TableRow,
+} from "@/components/ui/table";
+import { useLatestRequest } from "@/features/catalog/client/use-latest-request";
+import { useServerAction } from "@/hooks/use-server-action";
+
+interface BcItem {
+	id: number;
+	pageId: number;
+	itemIds: string;
+	catalogName: string;
+	orderNumber: number;
+	extradata: string;
+}
+
+interface BcItemsEditorProps {
+	pageId: number;
+	canEdit: boolean;
+}
+
+export function BcItemsEditor({ pageId, canEdit }: BcItemsEditorProps) {
+	const { confirm, dialog: confirmDialog } = useConfirmDialog();
+	const requests = useLatestRequest();
+	const [items, setItems] = useState<BcItem[]>([]);
+	const [loading, setLoading] = useState(false);
+	const [error, setError] = useState(false);
+	const [editingItem, setEditingItem] = useState<BcItem | null>(null);
+	const [addingItem, setAddingItem] = useState(false);
+
+	const load = useCallback(async () => {
+		const request = requests.start();
+		setError(false);
+		setLoading(true);
+		try {
+			const res = await fetch(
+				`/api/admin/catalog/items?pageId=${pageId}&catalog=bc`,
+				{ signal: request.signal },
+			);
+			if (!res.ok) throw new Error();
+			const data = await res.json();
+			if (!request.isCurrent()) return;
+			setItems(Array.isArray(data.items) ? data.items : []);
+		} catch {
+			if (!request.isCurrent()) return;
+			setError(true);
+		} finally {
+			if (request.isCurrent()) setLoading(false);
+		}
+	}, [pageId, requests]);
+
+	useEffect(() => {
+		if (pageId > 0) void load();
+		return () => requests.cancel();
+	}, [pageId, load, requests]);
+
+	return (
+		<div className="space-y-3">
+			{confirmDialog}
+			<div className="flex items-center justify-between">
+				<div className="flex items-center gap-2 text-sm font-medium">
+					<Package className="h-4 w-4 text-muted-foreground" />
+					BC Items ({items.length})
+				</div>
+				{canEdit && (
+					<Button
+						type="button"
+						variant="outline"
+						size="sm"
+						className="h-7 text-xs"
+						onClick={() => setAddingItem(true)}
+					>
+						<Plus className="h-3 w-3 mr-1" />
+						Add Item
+					</Button>
+				)}
+			</div>
+
+			{loading ? (
+				<div className="flex items-center justify-center py-12">
+					<Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
+				</div>
+			) : error ? (
+				<div className="flex items-center justify-center py-12">
+					<Button variant="outline" size="sm" onClick={() => void load()}>
+						Retry
+					</Button>
+				</div>
+			) : items.length === 0 ? (
+				<p className="text-sm text-muted-foreground text-center py-8 rounded-md border border-dashed">
+					No items in this page.
+				</p>
+			) : (
+				<div className="rounded-md border overflow-auto">
+					<Table>
+						<TableHeader>
+							<TableRow>
+								<TableHead className="text-xs w-16">ID</TableHead>
+								<TableHead className="text-xs">Name</TableHead>
+								<TableHead className="text-xs">Item IDs</TableHead>
+								<TableHead className="text-xs w-20">Order</TableHead>
+								<TableHead className="text-xs">Extra Data</TableHead>
+								{canEdit && <TableHead className="text-xs w-20">Actions</TableHead>}
+							</TableRow>
+						</TableHeader>
+						<TableBody>
+							{items.map((item) => (
+								<TableRow key={item.id}>
+									<TableCell className="text-xs font-mono">{item.id}</TableCell>
+									<TableCell className="text-xs font-medium">
+										{item.catalogName}
+									</TableCell>
+									<TableCell className="text-xs font-mono text-muted-foreground">
+										{item.itemIds}
+									</TableCell>
+									<TableCell className="text-xs">
+										{item.orderNumber}
+									</TableCell>
+									<TableCell className="text-xs text-muted-foreground max-w-32 truncate">
+										{item.extradata || "\u2014"}
+									</TableCell>
+									{canEdit && (
+										<TableCell>
+											<div className="flex gap-1">
+												<Button
+													type="button"
+													variant="ghost"
+													size="sm"
+													className="h-6 w-6 p-0"
+													onClick={() => setEditingItem(item)}
+												>
+													<Pencil className="h-3 w-3" />
+												</Button>
+												<Button
+													type="button"
+													variant="ghost"
+													size="sm"
+													className="h-6 w-6 p-0 text-[var(--admin-error)] hover:text-[var(--admin-error)]"
+													onClick={async () => {
+														const ok = await confirm({
+															title: "Delete BC item",
+															description: `Delete item "${item.catalogName}"?`,
+															confirmLabel: "Delete",
+														});
+														if (!ok) return;
+														const result = await deleteBcItem({
+															id: item.id,
+														});
+														if (result.ok) {
+															setItems((prev) =>
+																prev.filter((i) => i.id !== item.id),
+															);
+														}
+													}}
+												>
+													<Trash2 className="h-3 w-3" />
+												</Button>
+											</div>
+										</TableCell>
+									)}
+								</TableRow>
+							))}
+						</TableBody>
+					</Table>
+				</div>
+			)}
+
+			{editingItem && (
+				<BcItemDialog
+					item={editingItem}
+					mode="edit"
+					onClose={() => setEditingItem(null)}
+					onSubmit={async (data) => {
+						const result = await updateBcItem({ id: editingItem.id, ...data });
+						if (result.ok) {
+							setItems((prev) =>
+								prev.map((i) =>
+									i.id === editingItem.id ? { ...i, ...data } : i,
+								),
+							);
+						}
+						return result;
+					}}
+				/>
+			)}
+
+			{addingItem && (
+				<BcItemDialog
+					item={{
+						id: 0,
+						pageId,
+						itemIds: "",
+						catalogName: "",
+						orderNumber: 1,
+						extradata: "",
+					}}
+					mode="add"
+					onClose={() => setAddingItem(false)}
+					onSubmit={async (data) => {
+						const result = await createBcItem({ pageId, ...data });
+						if (result.ok) await load();
+						return result;
+					}}
+				/>
+			)}
+		</div>
+	);
+}
+
+function BcItemDialog({
+	item,
+	mode,
+	onClose,
+	onSubmit,
+}: {
+	item: BcItem;
+	mode: "add" | "edit";
+	onClose: () => void;
+	onSubmit: (data: {
+		itemIds: string;
+		catalogName: string;
+		orderNumber: number;
+		extradata: string;
+	}) => Promise<{ ok: boolean; error?: string }>;
+}) {
+	const { run, isPending } = useServerAction();
+	const [form, setForm] = useState({
+		itemIds: item.itemIds,
+		catalogName: item.catalogName,
+		orderNumber: item.orderNumber,
+		extradata: item.extradata,
+	});
+
+	return (
+		<Dialog open onOpenChange={(open) => !open && onClose()}>
+			<DialogContent>
+				<DialogHeader>
+					<DialogTitle>
+						{mode === "add" ? "Add BC Item" : `Edit Item #${item.id}`}
+					</DialogTitle>
+				</DialogHeader>
+				<div className="space-y-4 py-2">
+					<div className="space-y-2">
+						<Label>Catalog Name</Label>
+						<Input
+							value={form.catalogName}
+							onChange={(e) =>
+								setForm((f) => ({ ...f, catalogName: e.target.value }))
+							}
+						/>
+					</div>
+					<div className="space-y-2">
+						<Label>Item IDs (semicolon-separated)</Label>
+						<Input
+							value={form.itemIds}
+							onChange={(e) =>
+								setForm((f) => ({ ...f, itemIds: e.target.value }))
+							}
+						/>
+					</div>
+					<div className="grid grid-cols-2 gap-4">
+						<div className="space-y-2">
+							<Label>Order</Label>
+							<Input
+								type="number"
+								value={form.orderNumber}
+								onChange={(e) =>
+									setForm((f) => ({
+										...f,
+										orderNumber: parseInt(e.target.value, 10) || 0,
+									}))
+								}
+							/>
+						</div>
+						<div className="space-y-2">
+							<Label>Extra Data</Label>
+							<Input
+								value={form.extradata}
+								onChange={(e) =>
+									setForm((f) => ({ ...f, extradata: e.target.value }))
+								}
+								placeholder="Optional"
+							/>
+						</div>
+					</div>
+				</div>
+				<DialogFooter>
+					<Button variant="outline" onClick={onClose} disabled={isPending}>
+						Cancel
+					</Button>
+					<Button
+						onClick={() => {
+							run(() => onSubmit(form), {
+								successMessage:
+									mode === "add" ? "Item created." : "Item updated.",
+								errorMessage: "Failed to save.",
+								onSuccess: () => onClose(),
+							});
+						}}
+						disabled={isPending || !form.catalogName || !form.itemIds}
+					>
+						{isPending && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+						{mode === "add" ? "Add Item" : "Save"}
+					</Button>
+				</DialogFooter>
+			</DialogContent>
+		</Dialog>
+	);
+}

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

@@ -47,7 +47,7 @@ export function CatalogManagerWorkspace({
 	return (
 		<section
 			aria-label={t("manager")}
-			className="flex h-[calc(100dvh-12rem)] min-h-[32rem] min-w-0 flex-col overflow-hidden rounded-lg border border-[var(--admin-border)] bg-[var(--admin-canvas)] text-[var(--admin-text)]"
+			className="flex h-full min-h-0 min-w-0 flex-col overflow-hidden rounded-lg border border-[var(--admin-border)] bg-[var(--admin-canvas)] text-[var(--admin-text)]"
 		>
 			<CatalogManagerProvider
 				key={catalogType}

src/components/admin/catalog-manager/inline-editor.tsx

@@ -4,7 +4,6 @@ import {
 	AlertCircle,
 	ChevronDown,
 	ChevronRight,
-	ExternalLink,
 	Languages,
 	Loader2,
 	MonitorPlay,
@@ -20,16 +19,16 @@ import { updateBcPage } from "@/actions/catalog-bc";
 import {
 	type CatalogItemData,
 	CatalogItemsTable,
-} from "@/app/admin/catalog/[id]/catalog-items-table";
-import { CatalogTranslateTab } from "@/app/admin/catalog/[id]/catalog-translate-tab";
+} from "@/components/admin/catalog/catalog-items-table";
+import { CatalogTranslateTab } from "@/components/admin/catalog/catalog-translate-tab";
 import { BulkImportItems } from "@/components/admin/catalog/bulk-import-items";
 import { CatalogImagePicker } from "@/components/admin/catalog/catalog-image-picker";
 import { IconPicker } from "@/components/admin/catalog/icon-picker";
 import { QuickAddFurni } from "@/components/admin/catalog/quick-add-furni";
 import { AutoOrganize } from "@/components/admin/catalog-manager/auto-organize";
+import { BcItemsEditor } from "@/components/admin/catalog-manager/bc-items-editor";
 import { LiveCatalogPreview } from "@/components/admin/catalog-manager/live-catalog-preview";
 import { CatalogIcon, LAYOUT_COLORS } from "@/components/admin/catalog-tree";
-import Link from "@/components/link";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
@@ -133,10 +132,6 @@ function InlineEditorSession({
 	const [offersDirty, setOffersDirty] = useState(false);
 	const { dispatch, catalogType, canEdit } = useCatalogManager();
 	const catQs = catalogTreeQs(catalogType);
-	const pageHref =
-		catalogType === "bc"
-			? `/admin/catalog/builder-club/${pageId}`
-			: `/admin/catalog/${pageId}`;
 	const [page, setPage] = useState<PageDetail | null>(null);
 	const [loading, setLoading] = useState(false);
 	const [saving, setSaving] = useState(false);
@@ -425,17 +420,7 @@ function InlineEditorSession({
 							{t("preview.title")}
 						</Button>
 					)}
-					<Link href={pageHref} target="_blank">
-						<Button
-							variant="ghost"
-							size="sm"
-							className="h-7 text-xs gap-1 text-[var(--admin-text)]"
-						>
-							<ExternalLink className="h-3 w-3" />
-							{t("fullEditor")}
-						</Button>
-					</Link>
-				</div>
+					</div>
 			</div>
 
 			{/* Dirty banner */}
@@ -671,7 +656,10 @@ function InlineEditorSession({
 									<ChevronRight className="h-3.5 w-3.5" />
 								)}
 								Text fields
-								{(form.pageText1 || form.pageText2 || form.pageTextDetails) && (
+								{(form.pageText1 ||
+									form.pageText2 ||
+									form.pageTextDetails ||
+									form.pageTextTeaser) && (
 									<Badge variant="secondary" className="h-4 px-1 text-[9px]">
 										has content
 									</Badge>
@@ -713,6 +701,17 @@ function InlineEditorSession({
 											className="text-sm"
 										/>
 									</div>
+									<div className="space-y-1.5">
+										<Label className="text-xs">Text Teaser</Label>
+										<Textarea
+											rows={2}
+											value={String(form.pageTextTeaser || "")}
+											onChange={(e) =>
+												update("pageTextTeaser", e.target.value || null)
+											}
+											className="text-sm"
+										/>
+									</div>
 									<div className="space-y-1.5">
 										<Label className="text-xs">Special</Label>
 										<Input
@@ -750,17 +749,7 @@ function InlineEditorSession({
 						className="flex-1 overflow-y-auto px-4 pb-4 mt-2"
 					>
 						{catalogType === "bc" ? (
-							<div className="rounded-md border border-dashed px-4 py-8 text-center text-sm text-muted-foreground space-y-3">
-								<p>
-									BC items are managed on the full Builder Club page editor.
-								</p>
-								<Link href={pageHref} target="_blank">
-									<Button variant="outline" size="sm" className="gap-1">
-										<ExternalLink className="h-3 w-3" />
-										Open BC page editor
-									</Button>
-								</Link>
-							</div>
+							<BcItemsEditor pageId={page.id} canEdit={canEdit} />
 						) : itemsError && !itemsData ? (
 							<div className="flex items-center justify-center py-12">
 								<Button variant="outline" onClick={reloadItems}>

src/components/admin/catalog-manager/live-catalog-preview.tsx

@@ -10,7 +10,7 @@ import {
 	Wand2,
 } from "lucide-react";
 import { useTranslations } from "next-intl";
-import type { CatalogItemData } from "@/app/admin/catalog/[id]/catalog-items-table/types";
+import type { CatalogItemData } from "@/components/admin/catalog/catalog-items-table/types";
 import {
 	getShopGridClass,
 	getShopTileSize,

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

@@ -97,8 +97,6 @@ export function SortableTree({
 	const { state, dispatch, catalogType, canEdit } = useCatalogManager();
 	const t = useTranslations("pages.admin.catalog.workspace.duplicate");
 	const catQs = catalogTreeQs(catalogType);
-	const pageBase =
-		catalogType === "bc" ? "/admin/catalog/builder-club" : "/admin/catalog";
 	const { confirm, dialog: confirmDialog } = useConfirmDialog();
 	const {
 		nodes,
@@ -713,8 +711,6 @@ export function SortableTree({
 		},
 		[state.editorDirty, t, canEdit, nodes, catalogType],
 	);
-	const handleOpenFull = (id: number) =>
-		window.open(`${pageBase}/${id}`, "_blank");
 
 	// ── Expand/Collapse all ─────────────────────────────────────
 	const handleExpandAll = useCallback(() => {
@@ -813,10 +809,8 @@ export function SortableTree({
 	};
 
 	const activeNode = activeId ? flatItems.find((n) => n.id === activeId) : null;
-	const noop = () => {};
+const noop = () => {};
 
-	// Shared props builder for tree items
-	// biome-ignore lint/correctness/useExhaustiveDependencies: explicitly chosen here, see surrounding code
 	const getItemProps = useCallback(
 		(node: FlatTreeNode): Omit<TreeItemProps, "sortMode" | "isOverlay"> => ({
 			node,
@@ -831,7 +825,6 @@ export function SortableTree({
 			onToggleVisible: handleToggleVisible,
 			onDuplicate: handleDuplicate,
 			onDelete: handleDelete,
-			onOpenFull: handleOpenFull,
 			isLoading: loadingIds.has(node.id),
 		}),
 		[
@@ -1129,7 +1122,6 @@ export function SortableTree({
 									onToggleVisible={noop}
 									onDuplicate={noop}
 									onDelete={noop}
-									onOpenFull={noop}
 								/>
 							)}
 						</DragOverlay>

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

@@ -5,7 +5,6 @@ import { CSS } from "@dnd-kit/utilities";
 import {
 	ChevronRight,
 	Copy as CopyIcon,
-	ExternalLink,
 	Eye,
 	EyeOff,
 	EyeOff as EyeOffIcon,
@@ -61,7 +60,6 @@ export interface TreeItemProps {
 	onToggleVisible: (id: number, currentVisible: string) => void;
 	onDuplicate: (id: number) => void;
 	onDelete: (id: number) => void;
-	onOpenFull: (id: number) => void;
 	isLoading?: boolean;
 }
 
@@ -114,7 +112,6 @@ export const TreeItemContent = React.memo(
 		onToggleVisible,
 		onDuplicate,
 		onDelete,
-		onOpenFull,
 		isLoading,
 	}: TreeItemProps & {
 		isDragging?: boolean;
@@ -262,10 +259,6 @@ export const TreeItemContent = React.memo(
 						<Pencil className="mr-2 h-3.5 w-3.5" />
 						Edit
 					</ContextMenuItem>
-					<ContextMenuItem onClick={() => onOpenFull(node.id)}>
-						<ExternalLink className="mr-2 h-3.5 w-3.5" />
-						Open full editor
-					</ContextMenuItem>
 					<ContextMenuItem
 						onClick={() => navigator.clipboard.writeText(String(node.id))}
 					>

src/components/admin/catalog/catalog-items-table.tsx

@@ -0,0 +1,10 @@
+/**
+ * Re-export barrel for backward compatibility.
+ * Implementation moved to ./catalog-items-table/ directory.
+ */
+export { CatalogItemsTable } from "./catalog-items-table/catalog-items-table";
+export { FurniIcon } from "./catalog-items-table/furni-icon";
+export type {
+	BaseItemData,
+	CatalogItemData,
+} from "./catalog-items-table/types";

src/components/admin/catalog/catalog-items-table/field-helpers.tsx

@@ -0,0 +1,300 @@
+"use client";
+
+import { Check, ChevronsUpDown, Star } from "lucide-react";
+import { useId, useMemo, useState } from "react";
+import { Button } from "@/components/ui/button";
+import {
+	Command,
+	CommandEmpty,
+	CommandGroup,
+	CommandInput,
+	CommandItem,
+	CommandList,
+} from "@/components/ui/command";
+import { Label } from "@/components/ui/label";
+import {
+	Popover,
+	PopoverContent,
+	PopoverTrigger,
+} from "@/components/ui/popover";
+import { Switch } from "@/components/ui/switch";
+import { cn } from "@/lib/utils";
+
+// ── Toggle field ──────────────────────────────────────────────
+
+export function ToggleField({
+	label,
+	checked,
+	value,
+	onChange,
+	disabled,
+}: {
+	label: string;
+	/** Boolean checked state */
+	checked?: boolean;
+	/** Number or string (0/1 or '0'/'1') — converted to boolean automatically */
+	value?: number | string;
+	onChange: (v: boolean) => void;
+	disabled?: boolean;
+}) {
+	const id = useId();
+	const isChecked = checked ?? (value === 1 || value === "1");
+	return (
+		<div className="flex items-center justify-between gap-2">
+			<Label htmlFor={id} className="text-xs">
+				{label}
+			</Label>
+			<Switch
+				id={id}
+				checked={isChecked}
+				onCheckedChange={onChange}
+				disabled={disabled}
+				size="sm"
+			/>
+		</div>
+	);
+}
+
+// ── Interaction Type Combobox ──────────────────────────────────
+
+export function InteractionTypeCombobox({
+	value,
+	onChange,
+	types,
+	disabled,
+}: {
+	value: string;
+	onChange: (v: string) => void;
+	types: string[];
+	disabled?: boolean;
+}) {
+	const [open, setOpen] = useState(false);
+	const [inputValue, setInputValue] = useState("");
+
+	const filtered = useMemo(() => {
+		if (!inputValue.trim()) return types.slice(0, 50);
+		const q = inputValue.toLowerCase();
+		return types.filter((t) => t.toLowerCase().includes(q)).slice(0, 50);
+	}, [types, inputValue]);
+
+	return (
+		<Popover open={open} onOpenChange={setOpen}>
+			<PopoverTrigger asChild>
+				<Button
+					variant="outline"
+					role="combobox"
+					aria-expanded={open}
+					disabled={disabled}
+					className="w-full justify-between font-normal h-8 text-sm"
+				>
+					<span className="truncate">{value || "Select type..."}</span>
+					<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+				</Button>
+			</PopoverTrigger>
+			<PopoverContent
+				className="w-[--radix-popover-trigger-width] p-0"
+				align="start"
+			>
+				<Command shouldFilter={false}>
+					<CommandInput
+						placeholder="Search or type custom..."
+						value={inputValue}
+						onValueChange={setInputValue}
+					/>
+					<CommandList>
+						<CommandEmpty>
+							{inputValue.trim() ? (
+								<button
+									type="button"
+									className="w-full px-2 py-1.5 text-left text-sm hover:bg-accent rounded"
+									onClick={() => {
+										onChange(inputValue.trim());
+										setOpen(false);
+										setInputValue("");
+									}}
+								>
+									Use &quot;{inputValue.trim()}&quot;
+								</button>
+							) : (
+								"No types found."
+							)}
+						</CommandEmpty>
+						<CommandGroup>
+							{filtered.map((t) => (
+								<CommandItem
+									key={t}
+									value={t}
+									onSelect={() => {
+										onChange(t);
+										setOpen(false);
+										setInputValue("");
+									}}
+								>
+									<Check
+										className={cn(
+											"mr-2 h-4 w-4",
+											value === t ? "opacity-100" : "opacity-0",
+										)}
+									/>
+									<span className="truncate">{t}</span>
+								</CommandItem>
+							))}
+						</CommandGroup>
+					</CommandList>
+				</Command>
+			</PopoverContent>
+		</Popover>
+	);
+}
+
+// ── Move Page Combobox with smart suggestions ─────────────────
+
+export function MovePageCombobox({
+	value,
+	onChange,
+	pages,
+	currentPageId,
+	suggestedPageIds,
+	disabled = false,
+	labels,
+}: {
+	value: number | null;
+	onChange: (id: number | null) => void;
+	pages: { id: number; caption: string }[];
+	currentPageId: number;
+	/** Page IDs to show first as suggestions (from move-suggestions.ts) */
+	suggestedPageIds?: number[];
+	disabled?: boolean;
+	labels?: {
+		placeholder: string;
+		search: string;
+		empty: string;
+		suggested: string;
+		all: string;
+	};
+}) {
+	const [open, setOpen] = useState(false);
+
+	const options = useMemo(
+		() => pages.filter((p) => p.id !== currentPageId),
+		[pages, currentPageId],
+	);
+
+	const selectedPage = value ? pages.find((p) => p.id === value) : null;
+
+	// Build suggested pages list
+	const suggested = useMemo(() => {
+		if (!suggestedPageIds?.length) return [];
+		const pageMap = new Map(options.map((p) => [p.id, p]));
+		return suggestedPageIds.map((id) => pageMap.get(id)).filter(Boolean) as {
+			id: number;
+			caption: string;
+		}[];
+	}, [suggestedPageIds, options]);
+
+	// Non-suggested pages (exclude those already in suggestions)
+	const suggestedSet = useMemo(
+		() => new Set(suggested.map((s) => s.id)),
+		[suggested],
+	);
+	const remaining = useMemo(
+		() => options.filter((p) => !suggestedSet.has(p.id)),
+		[options, suggestedSet],
+	);
+
+	return (
+		<Popover open={open} onOpenChange={setOpen}>
+			<PopoverTrigger asChild>
+				<Button
+					variant="outline"
+					role="combobox"
+					disabled={disabled}
+					aria-expanded={open}
+					className="w-full justify-between font-normal"
+				>
+					{selectedPage ? (
+						<span className="truncate">
+							<span className="text-muted-foreground font-mono text-xs mr-1.5">
+								#{selectedPage.id}
+							</span>
+							{selectedPage.caption}
+						</span>
+					) : (
+						<span className="text-muted-foreground">
+							{labels?.placeholder ?? "Select target page..."}
+						</span>
+					)}
+					<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+				</Button>
+			</PopoverTrigger>
+			<PopoverContent
+				className="w-[--radix-popover-trigger-width] p-0"
+				align="start"
+			>
+				<Command>
+					<CommandInput placeholder={labels?.search ?? "Search pages..."} />
+					<CommandList>
+						<CommandEmpty>{labels?.empty ?? "No page found."}</CommandEmpty>
+
+						{/* Suggested pages */}
+						{suggested.length > 0 && (
+							<CommandGroup heading={labels?.suggested ?? "Suggested"}>
+								{suggested.map((page) => (
+									<CommandItem
+										key={`s-${page.id}`}
+										value={`${page.id} ${page.caption}`}
+										onSelect={() => {
+											onChange(page.id);
+											setOpen(false);
+										}}
+									>
+										<Check
+											className={cn(
+												"mr-2 h-4 w-4",
+												value === page.id ? "opacity-100" : "opacity-0",
+											)}
+										/>
+										<Star className="mr-1.5 h-3 w-3 text-[var(--admin-warning)]" />
+										<span className="text-muted-foreground font-mono text-xs mr-1.5">
+											#{page.id}
+										</span>
+										<span className="truncate">{page.caption}</span>
+									</CommandItem>
+								))}
+							</CommandGroup>
+						)}
+
+						{/* All pages */}
+						<CommandGroup
+							heading={
+								suggested.length > 0 ? (labels?.all ?? "All pages") : undefined
+							}
+						>
+							{remaining.map((page) => (
+								<CommandItem
+									key={page.id}
+									value={`${page.id} ${page.caption}`}
+									onSelect={() => {
+										onChange(page.id);
+										setOpen(false);
+									}}
+								>
+									<Check
+										className={cn(
+											"mr-2 h-4 w-4",
+											value === page.id ? "opacity-100" : "opacity-0",
+										)}
+									/>
+									<span className="text-muted-foreground font-mono text-xs mr-1.5">
+										#{page.id}
+									</span>
+									<span className="truncate">{page.caption}</span>
+								</CommandItem>
+							))}
+						</CommandGroup>
+					</CommandList>
+				</Command>
+			</PopoverContent>
+		</Popover>
+	);
+}

src/components/admin/catalog/catalog-items-table/furni-icon.tsx

@@ -0,0 +1,48 @@
+"use client";
+
+import { Image as ImageIcon } from "lucide-react";
+import { getHabboCdnIconUrl, getLocalIconUrl } from "@/lib/furni/classname";
+
+export function FurniIcon({
+	classname,
+	revision,
+}: {
+	classname: string;
+	revision: number;
+}) {
+	if (!classname) {
+		return (
+			<div className="w-10 h-10 rounded bg-muted flex items-center justify-center">
+				<ImageIcon className="h-4 w-4 text-muted-foreground" />
+			</div>
+		);
+	}
+
+	const localUrl = getLocalIconUrl(classname);
+
+	function handleError(e: React.SyntheticEvent<HTMLImageElement>) {
+		const img = e.target as HTMLImageElement;
+		const stage = img.dataset.fallback;
+		if (!stage && revision > 0) {
+			img.dataset.fallback = "cdn";
+			img.src = getHabboCdnIconUrl(classname, revision);
+		} else {
+			img.dataset.fallback = "none";
+			img.style.opacity = "0";
+		}
+	}
+
+	return (
+		<div className="w-10 h-10 rounded bg-muted/50 flex items-center justify-center overflow-hidden">
+			{/* eslint-disable-next-line @next/next/no-img-element */}
+			<img
+				src={localUrl}
+				alt={classname}
+				className="max-w-full max-h-full object-contain"
+				style={{ imageRendering: "pixelated" }}
+				onError={handleError}
+				loading="lazy"
+			/>
+		</div>
+	);
+}

src/components/admin/catalog/catalog-items-table/song-picker.tsx

@@ -0,0 +1,99 @@
+"use client";
+
+import { Loader2, Music } from "lucide-react";
+import { useEffect, useState } from "react";
+import {
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+	SelectValue,
+} from "@/components/ui/select";
+import {
+	getCachedSongPickerOptions,
+	invalidateSongPickerCache,
+	loadSongPickerOptions,
+	type SoundtrackOption,
+} from "@/lib/client-cache/song-picker-cache";
+
+// Re-export so existing `import { invalidateSongPickerCache } from '.../song-picker'`
+// callsites keep working. New code should import from the lib module directly.
+export { invalidateSongPickerCache };
+
+interface Props {
+	value: number;
+	onChange: (id: number) => void;
+	disabled?: boolean;
+}
+
+function formatLength(seconds: number): string {
+	if (!seconds || seconds <= 0) return "";
+	const m = Math.floor(seconds / 60);
+	const s = seconds % 60;
+	return `${m}:${String(s).padStart(2, "0")}`;
+}
+
+export function SongPicker({ value, onChange, disabled }: Props) {
+	const initial = getCachedSongPickerOptions();
+	const [options, setOptions] = useState<SoundtrackOption[]>(initial ?? []);
+	const [loading, setLoading] = useState(!initial);
+
+	useEffect(() => {
+		if (getCachedSongPickerOptions()) return;
+		let cancelled = false;
+		loadSongPickerOptions()
+			.then((items) => {
+				if (!cancelled) setOptions(items);
+			})
+			.catch(() => {
+				if (!cancelled) setOptions([]);
+			})
+			.finally(() => {
+				if (!cancelled) setLoading(false);
+			});
+		return () => {
+			cancelled = true;
+		};
+	}, []);
+
+	return (
+		<Select
+			value={String(value)}
+			onValueChange={(v) => onChange(parseInt(v, 10) || 0)}
+			disabled={disabled || loading}
+		>
+			<SelectTrigger>
+				{loading ? (
+					<span className="flex items-center gap-2 text-muted-foreground">
+						<Loader2 className="h-3 w-3 animate-spin" /> Loading…
+					</span>
+				) : (
+					<SelectValue placeholder="No song" />
+				)}
+			</SelectTrigger>
+			<SelectContent>
+				<SelectItem value="0">
+					<span className="text-muted-foreground">— No song —</span>
+				</SelectItem>
+				{options.map((opt) => (
+					<SelectItem key={opt.id} value={String(opt.id)}>
+						<span className="inline-flex items-center gap-2">
+							<Music className="h-3 w-3 text-muted-foreground" />
+							<span className="font-medium">{opt.name}</span>
+							{opt.author && (
+								<span className="text-xs text-muted-foreground">
+									— {opt.author}
+								</span>
+							)}
+							{opt.length > 0 && (
+								<span className="text-xs text-muted-foreground font-mono">
+									{formatLength(opt.length)}
+								</span>
+							)}
+						</span>
+					</SelectItem>
+				))}
+			</SelectContent>
+		</Select>
+	);
+}

src/components/admin/catalog/catalog-items-table/types.ts

@@ -0,0 +1,87 @@
+export interface BaseItemData {
+	id: number;
+	spriteId: number;
+	publicName: string;
+	itemName: string;
+	type: string;
+	width: number;
+	length: number;
+	stackHeight: number;
+	allowStack: number;
+	allowSit: number;
+	allowLay: number;
+	allowWalk: number;
+	allowGift: number;
+	allowTrade: number;
+	allowRecycle: number;
+	allowMarketplaceSell: number;
+	allowInventoryStack: number;
+	interactionType: string;
+	interactionModesCount: number;
+	vendingIds: string;
+	customparams: string;
+	effectIdMale: number;
+	effectIdFemale: number;
+	clothingOnWalk: string;
+}
+
+export interface CatalogItemData {
+	id: number;
+	catalogName: string;
+	itemIds: string;
+	costCredits: number;
+	costPoints: number;
+	pointsType: number;
+	amount: number;
+	limitedSells: number;
+	limitedStack: number;
+	orderNumber: number;
+	offerId: number;
+	songId: number;
+	haveOffer: string;
+	clubOnly: string;
+	extradata: string;
+	baseName: string;
+	baseItemName: string;
+	spriteId: number;
+	baseItem: BaseItemData | null;
+}
+
+export interface InlineEdit {
+	costCredits: number;
+	costPoints: number;
+	pointsType: number;
+	amount: number;
+}
+
+export const POINTS_TYPES: Record<number, { label: string; color: string }> = {
+	0: { label: "Duckets", color: "text-[var(--admin-info)]" },
+	5: { label: "Diamonds", color: "text-[var(--admin-accent-text)]" },
+	101: { label: "Snowflakes", color: "text-[var(--admin-info)]" },
+	103: { label: "Hearts", color: "text-[var(--admin-error)]" },
+	104: { label: "Stars", color: "text-[var(--admin-warning)]" },
+	105: { label: "Shells", color: "text-[var(--admin-warning)]" },
+};
+
+export const DEFAULT_NEW_ITEM = {
+	catalogName: "",
+	itemIds: "0",
+	costCredits: 0,
+	costPoints: 0,
+	pointsType: 0,
+	amount: 1,
+	limitedSells: 0,
+	limitedStack: 0,
+	orderNumber: 1,
+	offerId: -1,
+	songId: 0,
+	haveOffer: "1",
+	clubOnly: "0",
+	extradata: "",
+};
+
+export function getPointsLabel(type: number) {
+	return (
+		POINTS_TYPES[type] || { label: `Type ${type}`, color: "theme-text-muted" }
+	);
+}

src/components/admin/catalog/catalog-translate-tab.tsx

@@ -0,0 +1,617 @@
+"use client";
+
+import {
+	AlertTriangle,
+	CheckCircle2,
+	Database,
+	FileJson,
+	Filter,
+	Loader2,
+	RotateCcw,
+	Save,
+	ShoppingCart,
+	Sparkles,
+} from "lucide-react";
+import { useRouter } from "next/navigation";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { toast } from "sonner";
+import { translateCatalogItems } from "@/actions/catalog-items";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Input } from "@/components/ui/input";
+import {
+	Table,
+	TableBody,
+	TableCell,
+	TableHead,
+	TableHeader,
+	TableRow,
+} from "@/components/ui/table";
+import {
+	Tooltip,
+	TooltipContent,
+	TooltipProvider,
+	TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { useServerAction } from "@/hooks/use-server-action";
+import {
+	habboGamedataHotelLabel,
+	habboGamedataHotelShort,
+	normalizeHabboGamedataHotel,
+} from "@/lib/habbo-gamedata-hotel";
+import { FurniIcon } from "./catalog-items-table";
+
+interface BaseItemForTranslation {
+	id: number;
+	publicName: string;
+	itemName: string;
+	spriteId: number;
+	type: string;
+}
+
+interface CatalogTranslateTabProps {
+	baseItems: BaseItemForTranslation[];
+	catalogNameMap: Record<number, string>;
+	canEdit: boolean;
+	furniDataIdList: number[];
+	furniDescriptionMap: Record<number, string>;
+	furniRevisionMap?: Record<number, { classname: string; revision: number }>;
+	/** CMS setting `habbo_gamedata_hotel` — which official Habbo locale to suggest from */
+	gamedataHotel?: string;
+}
+
+type FilterMode = "all" | "missing" | "modified";
+
+export function CatalogTranslateTab({
+	baseItems,
+	catalogNameMap,
+	canEdit,
+	furniDataIdList,
+	furniDescriptionMap,
+	furniRevisionMap = {},
+	gamedataHotel = "it",
+}: CatalogTranslateTabProps) {
+	const router = useRouter();
+	const { run, isPending } = useServerAction();
+	const [isSuggesting, setIsSuggesting] = useState(false);
+	const [filterMode, setFilterMode] = useState<FilterMode>("all");
+	const [activeHotel, setActiveHotel] = useState(() =>
+		normalizeHabboGamedataHotel(gamedataHotel),
+	);
+	useEffect(() => {
+		setActiveHotel(normalizeHabboGamedataHotel(gamedataHotel));
+	}, [gamedataHotel]);
+
+	// Always refresh from CMS settings so the button label tracks hotel changes
+	// without requiring a full page remount after saving Settings.
+	useEffect(() => {
+		let cancelled = false;
+		async function refreshHotel() {
+			try {
+				const res = await fetch("/api/admin/catalog/suggest", {
+					cache: "no-store",
+				});
+				if (!res.ok) return;
+				const data = (await res.json()) as { hotel?: string };
+				if (!cancelled && typeof data.hotel === "string") {
+					setActiveHotel(normalizeHabboGamedataHotel(data.hotel));
+				}
+			} catch {
+				// keep prop/default
+			}
+		}
+		void refreshHotel();
+		const onFocus = () => void refreshHotel();
+		const onVisibility = () => {
+			if (document.visibilityState === "visible") void refreshHotel();
+		};
+		window.addEventListener("focus", onFocus);
+		document.addEventListener("visibilitychange", onVisibility);
+		return () => {
+			cancelled = true;
+			window.removeEventListener("focus", onFocus);
+			document.removeEventListener("visibilitychange", onVisibility);
+		};
+	}, []);
+
+	const hotelShort = habboGamedataHotelShort(activeHotel);
+	const hotelLabel = habboGamedataHotelLabel(activeHotel);
+
+	const furniDataIdSet = useMemo(
+		() => new Set(furniDataIdList),
+		[furniDataIdList],
+	);
+	const [selected, setSelected] = useState<Set<number>>(new Set());
+
+	// ── Editable state: names + descriptions ─────────────────────────
+	const [editedNames, setEditedNames] = useState<Record<number, string>>(
+		Object.fromEntries(baseItems.map((item) => [item.id, item.publicName])),
+	);
+
+	const [editedDescs, setEditedDescs] = useState<Record<number, string>>(
+		Object.fromEntries(
+			baseItems.map((item) => [item.id, furniDescriptionMap[item.id] ?? ""]),
+		),
+	);
+
+	// Track which items have name or description changes
+	const isNameChanged = useCallback(
+		(item: BaseItemForTranslation) => editedNames[item.id] !== item.publicName,
+		[editedNames],
+	);
+
+	const isDescChanged = useCallback(
+		(item: BaseItemForTranslation) =>
+			editedDescs[item.id] !== (furniDescriptionMap[item.id] ?? ""),
+		[editedDescs, furniDescriptionMap],
+	);
+
+	const changedItems = useMemo(
+		() =>
+			baseItems.filter((item) => isNameChanged(item) || isDescChanged(item)),
+		[baseItems, isNameChanged, isDescChanged],
+	);
+
+	const missingItems = useMemo(
+		() => baseItems.filter((item) => !furniDataIdSet.has(item.id)),
+		[baseItems, furniDataIdSet],
+	);
+
+	const filteredItems = useMemo(() => {
+		switch (filterMode) {
+			case "missing":
+				return baseItems.filter((item) => !furniDataIdSet.has(item.id));
+			case "modified":
+				return baseItems.filter(
+					(item) => isNameChanged(item) || isDescChanged(item),
+				);
+			default:
+				return baseItems;
+		}
+	}, [baseItems, filterMode, furniDataIdSet, isNameChanged, isDescChanged]);
+
+	const toggleOne = useCallback((id: number) => {
+		setSelected((prev) => {
+			const next = new Set(prev);
+			if (next.has(id)) next.delete(id);
+			else next.add(id);
+			return next;
+		});
+	}, []);
+
+	const toggleAll = useCallback(() => {
+		setSelected((prev) =>
+			prev.size === filteredItems.length
+				? new Set()
+				: new Set(filteredItems.map((i) => i.id)),
+		);
+	}, [filteredItems]);
+
+	// Items to act on: selected ones if any, otherwise all
+	const targetItems = useMemo(() => {
+		if (selected.size === 0) return baseItems;
+		return baseItems.filter((i) => selected.has(i.id));
+	}, [baseItems, selected]);
+
+	function handleNameChange(id: number, value: string) {
+		setEditedNames((prev) => ({ ...prev, [id]: value }));
+	}
+
+	function handleDescChange(id: number, value: string) {
+		setEditedDescs((prev) => ({ ...prev, [id]: value }));
+	}
+
+	function handleReset() {
+		setEditedNames(
+			Object.fromEntries(baseItems.map((item) => [item.id, item.publicName])),
+		);
+		setEditedDescs(
+			Object.fromEntries(
+				baseItems.map((item) => [item.id, furniDescriptionMap[item.id] ?? ""]),
+			),
+		);
+	}
+
+	async function handleSuggestFromHabboFurni() {
+		if (targetItems.length === 0) return;
+		setIsSuggesting(true);
+
+		try {
+			// Collect classnames from selected items (or all if none selected)
+			const classnames = targetItems
+				.map((item) => item.itemName)
+				.filter(Boolean);
+			if (classnames.length === 0) {
+				toast.info("No classnames found to look up.");
+				setIsSuggesting(false);
+				return;
+			}
+
+			// Batch in chunks of 50 to avoid too-long URLs
+			const CHUNK_SIZE = 50;
+			const allSuggestions: Record<
+				string,
+				{ name: string; description: string }
+			> = {};
+			let suggestHotel = activeHotel;
+
+			for (let i = 0; i < classnames.length; i += CHUNK_SIZE) {
+				const chunk = classnames.slice(i, i + CHUNK_SIZE);
+				const res = await fetch(
+					`/api/admin/catalog/suggest?classnames=${encodeURIComponent(chunk.join(","))}`,
+				);
+				if (res.ok) {
+					const data = await res.json();
+					if (typeof data.hotel === "string") {
+						suggestHotel = normalizeHabboGamedataHotel(data.hotel);
+						setActiveHotel(suggestHotel);
+					}
+					Object.assign(allSuggestions, data.suggestions || {});
+				}
+			}
+			const suggestLabel = habboGamedataHotelLabel(suggestHotel);
+
+			// Apply suggestions to items that have a match (names + descriptions)
+			let nameCount = 0;
+			let descCount = 0;
+			const newNames = { ...editedNames };
+			const newDescs = { ...editedDescs };
+
+			for (const item of targetItems) {
+				const suggestion = allSuggestions[item.itemName];
+				if (!suggestion) continue;
+
+				if (suggestion.name && suggestion.name !== item.publicName) {
+					newNames[item.id] = suggestion.name;
+					nameCount++;
+				}
+
+				const currentDesc = furniDescriptionMap[item.id] ?? "";
+				if (suggestion.description && suggestion.description !== currentDesc) {
+					newDescs[item.id] = suggestion.description;
+					descCount++;
+				}
+			}
+
+			setEditedNames(newNames);
+			setEditedDescs(newDescs);
+
+			const total = nameCount + descCount;
+			if (total > 0) {
+				const parts = [];
+				if (nameCount > 0) parts.push(`${nameCount} name(s)`);
+				if (descCount > 0) parts.push(`${descCount} description(s)`);
+				toast.success(
+					`${parts.join(" + ")} suggested from ${suggestLabel}. Review and save.`,
+				);
+			} else {
+				toast.info(
+					`No new suggestions from ${suggestLabel} (${Object.keys(allSuggestions).length} looked up, all already match).`,
+				);
+			}
+		} catch (err) {
+			toast.error(`Suggest error: ${(err as Error).message}`);
+		} finally {
+			setIsSuggesting(false);
+		}
+	}
+
+	async function handleSaveAll() {
+		if (changedItems.length === 0) return;
+
+		run(
+			() =>
+				translateCatalogItems({
+					items: changedItems.map((item) => ({
+						id: item.id,
+						publicName: editedNames[item.id],
+						description: editedDescs[item.id],
+					})),
+				}),
+			{
+				successMessage: "Translations saved.",
+				errorMessage: "Failed to save translations.",
+				onSuccess: (data) => {
+					const d = data as Record<string, number | boolean>;
+					const parts = [];
+					if (d.namesUpdated && (d.namesUpdated as number) > 0)
+						parts.push(`${d.namesUpdated} name(s) updated`);
+					if (d.descriptionsUpdated && (d.descriptionsUpdated as number) > 0)
+						parts.push(`${d.descriptionsUpdated} description(s) updated`);
+					if (parts.length === 0)
+						parts.push(`${d.updated ?? 0} item(s) processed`);
+					if (d.furniDataUpdated) parts.push("FurnitureData.json synced");
+					if (d.furniDataInserted && (d.furniDataInserted as number) > 0) {
+						parts.push(
+							`${d.furniDataInserted} new item(s) added to FurnitureData.json`,
+						);
+					}
+					parts.push("emulator cache refreshed");
+					toast.success(`${parts.join(" · ")}.`);
+					router.refresh();
+				},
+			},
+		);
+	}
+
+	return (
+		<Card>
+			<CardHeader className="flex flex-row items-center justify-between gap-4">
+				<div className="min-w-0">
+					<CardTitle>Translate Item Names</CardTitle>
+					<p className="text-sm text-muted-foreground mt-1">
+						Edit the public name and description of furniture items. Saving will
+						update:
+					</p>
+					<div className="flex gap-3 mt-2 flex-wrap">
+						<span className="inline-flex items-center gap-1 text-xs text-muted-foreground">
+							<Database className="h-3 w-3" /> items_base (name)
+						</span>
+						<span className="inline-flex items-center gap-1 text-xs text-muted-foreground">
+							<ShoppingCart className="h-3 w-3" /> catalogName (auto)
+						</span>
+						<span className="inline-flex items-center gap-1 text-xs text-muted-foreground">
+							<FileJson className="h-3 w-3" /> FurnitureData.json (name + desc)
+						</span>
+					</div>
+					{missingItems.length > 0 && (
+						<div className="flex items-center gap-1.5 mt-2 text-xs text-[var(--admin-warning)] dark:text-[var(--admin-warning)]">
+							<AlertTriangle className="h-3.5 w-3.5" />
+							<span>
+								{missingItems.length} item(s) missing from FurnitureData.json —
+								will be auto-inserted on save
+							</span>
+						</div>
+					)}
+				</div>
+				{canEdit && (
+					<div className="flex gap-2 flex-shrink-0 flex-wrap justify-end">
+						<Button
+							variant="outline"
+							size="sm"
+							onClick={handleSuggestFromHabboFurni}
+							disabled={isSuggesting || isPending || targetItems.length === 0}
+							title={`Suggest names + descriptions from ${hotelLabel}. Change hotel in Admin → Settings → Game assets.`}
+						>
+							{isSuggesting ? (
+								<Loader2 className="mr-2 h-4 w-4 animate-spin" />
+							) : (
+								<Sparkles className="mr-2 h-4 w-4" />
+							)}
+							Suggest {hotelShort}
+							{selected.size > 0 ? ` (${selected.size})` : ""}
+						</Button>
+						<Button
+							variant="outline"
+							size="sm"
+							onClick={handleReset}
+							disabled={changedItems.length === 0 || isPending}
+						>
+							<RotateCcw className="mr-2 h-4 w-4" />
+							Reset
+						</Button>
+						<Button
+							size="sm"
+							onClick={handleSaveAll}
+							disabled={isPending || changedItems.length === 0}
+						>
+							{isPending ? (
+								<Loader2 className="mr-2 h-4 w-4 animate-spin" />
+							) : (
+								<Save className="mr-2 h-4 w-4" />
+							)}
+							Save All ({changedItems.length})
+						</Button>
+					</div>
+				)}
+			</CardHeader>
+			<CardContent>
+				{/* Filter bar */}
+				{baseItems.length > 0 && (
+					<div className="flex items-center gap-2 mb-4">
+						<Filter className="h-4 w-4 text-muted-foreground" />
+						<div className="flex gap-1">
+							<Button
+								variant={filterMode === "all" ? "default" : "outline"}
+								size="sm"
+								className="h-7 text-xs"
+								onClick={() => setFilterMode("all")}
+							>
+								All ({baseItems.length})
+							</Button>
+							<Button
+								variant={filterMode === "missing" ? "default" : "outline"}
+								size="sm"
+								className="h-7 text-xs"
+								onClick={() => setFilterMode("missing")}
+								disabled={missingItems.length === 0}
+							>
+								<AlertTriangle className="mr-1 h-3 w-3" />
+								Missing ({missingItems.length})
+							</Button>
+							<Button
+								variant={filterMode === "modified" ? "default" : "outline"}
+								size="sm"
+								className="h-7 text-xs"
+								onClick={() => setFilterMode("modified")}
+								disabled={changedItems.length === 0}
+							>
+								Modified ({changedItems.length})
+							</Button>
+						</div>
+					</div>
+				)}
+
+				{baseItems.length === 0 ? (
+					<p className="text-sm text-muted-foreground text-center py-8">
+						No items to translate in this page.
+					</p>
+				) : filteredItems.length === 0 ? (
+					<p className="text-sm text-muted-foreground text-center py-8">
+						No items match the current filter.
+					</p>
+				) : (
+					<TooltipProvider>
+						<div className="rounded-md border overflow-auto max-h-[600px]">
+							<Table>
+								<TableHeader>
+									<TableRow>
+										<TableHead className="w-[40px] px-2">
+											<Checkbox
+												checked={
+													filteredItems.length > 0 &&
+													selected.size === filteredItems.length
+												}
+												onCheckedChange={toggleAll}
+												aria-label="Select all"
+											/>
+										</TableHead>
+										<TableHead className="w-[50px]"></TableHead>
+										<TableHead className="w-[60px]">ID</TableHead>
+										<TableHead className="w-[80px]">Type</TableHead>
+										<TableHead>Item Name</TableHead>
+										<TableHead className="min-w-[200px]">Public Name</TableHead>
+										<TableHead className="min-w-[200px]">Description</TableHead>
+										<TableHead className="w-[100px]">Status</TableHead>
+									</TableRow>
+								</TableHeader>
+								<TableBody>
+									{filteredItems.map((item) => {
+										const nameChanged = isNameChanged(item);
+										const descChanged = isDescChanged(item);
+										const isChanged = nameChanged || descChanged;
+										const isMissing = !furniDataIdSet.has(item.id);
+										const currentCatalogName = catalogNameMap[item.id];
+										return (
+											<TableRow
+												key={item.id}
+												className={
+													isChanged
+														? "bg-[var(--admin-warning-subtle)] dark:bg-[var(--admin-warning-subtle)]"
+														: isMissing
+															? "bg-[var(--admin-warning-subtle)] dark:bg-[var(--admin-warning-subtle)]"
+															: undefined
+												}
+											>
+												<TableCell className="px-2">
+													<Checkbox
+														checked={selected.has(item.id)}
+														onCheckedChange={() => toggleOne(item.id)}
+														aria-label={`Select ${item.itemName}`}
+													/>
+												</TableCell>
+												<TableCell className="px-1">
+													{(() => {
+														const revInfo = furniRevisionMap[item.id];
+														return revInfo ? (
+															<FurniIcon
+																classname={revInfo.classname}
+																revision={revInfo.revision}
+															/>
+														) : (
+															<FurniIcon
+																classname={item.itemName}
+																revision={0}
+															/>
+														);
+													})()}
+												</TableCell>
+												<TableCell className="font-mono text-xs">
+													{item.id}
+												</TableCell>
+												<TableCell>
+													<Badge
+														variant={
+															item.type === "s" ? "default" : "secondary"
+														}
+														className="text-xs"
+													>
+														{item.type === "s"
+															? "Floor"
+															: item.type === "i"
+																? "Wall"
+																: item.type}
+													</Badge>
+												</TableCell>
+												<TableCell className="text-xs text-muted-foreground font-mono">
+													{item.itemName}
+												</TableCell>
+												<TableCell>
+													<Input
+														value={editedNames[item.id] || ""}
+														onChange={(e) =>
+															handleNameChange(item.id, e.target.value)
+														}
+														disabled={!canEdit}
+														className={`h-8 text-sm ${nameChanged ? "border-[var(--admin-warning-border)] dark:border-[var(--admin-warning-border)]" : ""}`}
+													/>
+													{currentCatalogName &&
+														currentCatalogName !== item.publicName && (
+															<p className="text-[11px] text-muted-foreground mt-0.5 truncate">
+																catalog: {currentCatalogName}
+															</p>
+														)}
+												</TableCell>
+												<TableCell>
+													<Input
+														value={editedDescs[item.id] || ""}
+														onChange={(e) =>
+															handleDescChange(item.id, e.target.value)
+														}
+														disabled={!canEdit}
+														placeholder="No description"
+														className={`h-8 text-sm ${descChanged ? "border-[var(--admin-warning-border)] dark:border-[var(--admin-warning-border)]" : ""}`}
+													/>
+												</TableCell>
+												<TableCell>
+													<div className="flex items-center gap-1.5">
+														{isChanged ? (
+															<Badge
+																variant="secondary"
+																className="text-xs bg-[var(--admin-warning-subtle)] text-[var(--admin-warning)]"
+															>
+																Modified
+															</Badge>
+														) : (
+															<span className="text-xs text-muted-foreground">
+																—
+															</span>
+														)}
+														{isMissing ? (
+															<Tooltip>
+																<TooltipTrigger asChild>
+																	<AlertTriangle className="h-3.5 w-3.5 text-[var(--admin-warning)] flex-shrink-0" />
+																</TooltipTrigger>
+																<TooltipContent>
+																	<p>Missing from FurnitureData.json</p>
+																	<p className="text-xs text-muted-foreground">
+																		Will be auto-inserted on save
+																	</p>
+																</TooltipContent>
+															</Tooltip>
+														) : (
+															<Tooltip>
+																<TooltipTrigger asChild>
+																	<CheckCircle2 className="h-3.5 w-3.5 text-[var(--admin-success)] flex-shrink-0" />
+																</TooltipTrigger>
+																<TooltipContent>
+																	In FurnitureData.json
+																</TooltipContent>
+															</Tooltip>
+														)}
+													</div>
+												</TableCell>
+											</TableRow>
+										);
+									})}
+								</TableBody>
+							</Table>
+						</div>
+					</TooltipProvider>
+				)}
+			</CardContent>
+		</Card>
+	);
+}

src/components/admin/catalog/items-shop-preview.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { Package } from "lucide-react";
-import type { CatalogItemData } from "@/app/admin/catalog/[id]/catalog-items-table/types";
+import type { CatalogItemData } from "@/components/admin/catalog/catalog-items-table/types";
 import { cn } from "@/lib/utils";
 import {
 	getShopGridClass,

src/components/admin/catalog/shop-tile.tsx

@@ -1,8 +1,8 @@
 "use client";
 
 import { Crown, Package, Sparkles } from "lucide-react";
-import type { CatalogItemData } from "@/app/admin/catalog/[id]/catalog-items-table/types";
-import { getPointsLabel } from "@/app/admin/catalog/[id]/catalog-items-table/types";
+import type { CatalogItemData } from "@/components/admin/catalog/catalog-items-table/types";
+import { getPointsLabel } from "@/components/admin/catalog/catalog-items-table/types";
 import {
 	CurrencyIcon,
 	currencyKindFromPointsType,