Merge remote-tracking branch 'origin/main' into codex/housekeeping-rebuild-stepwise

src/app/api/admin/import/clone/batch/route.ts

@@ -34,6 +34,7 @@ export const POST = withAdmin(
 		const body = await request.json();
 		const sourceId: string = body.sourceId || "";
 		const rawClassnames: string[] = body.classnames || [];
+		const isFinal = body.final === true;
 
 		if (!sourceId) return apiError("Missing sourceId", 400);
 		if (rawClassnames.length === 0)
@@ -65,8 +66,8 @@ export const POST = withAdmin(
 			}
 		}
 
-		if (items.length > 500)
-			return apiError("Too many classnames (max 500)", 400);
+		if (items.length > 5000)
+			return apiError("Too many classnames (max 5000)", 400);
 
 		// FurnitureData entries for successfully cloned items are appended once
 		// at the end (single read-modify-write instead of one per item), which
@@ -138,6 +139,8 @@ export const POST = withAdmin(
 					);
 				}
 
+				if (!isFinal) return;
+
 				// Post-import consolidation, mirroring the furni batch route:
 				// force offer_id to mirror its catalog row id, keep the
 				// FurnitureData in sync with the new local sprite ids, verify

src/components/admin/confirm-dialog.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { AlertTriangle } from "lucide-react";
 import { AnimatePresence, motion } from "motion/react";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { createPortal } from "react-dom";
@@ -77,7 +78,7 @@ export function ConfirmDialog({
 					<button
 						type="button"
 						aria-label="Dismiss"
-						className="absolute inset-0 bg-black/50"
+						className="absolute inset-0 bg-black/95"
 						disabled={isLoading}
 						onClick={() => {
 							if (!isLoading) onOpenChange(false);
@@ -89,19 +90,26 @@ export function ConfirmDialog({
 						aria-modal="true"
 						aria-labelledby="confirm-dialog-title"
 						aria-describedby="confirm-dialog-desc"
-						className="relative z-10 w-full max-w-md rounded-lg border bg-card p-6 text-card-foreground shadow-lg"
+						className="relative z-10 w-full max-w-md rounded-xl border-2 border-primary/40 bg-surface p-6 text-card-foreground shadow-[0_0_60px_-10px_rgba(245,158,11,0.3)]"
 						variants={modalContentVariants}
 						initial="hidden"
 						animate="visible"
 						exit="exit"
 					>
 						<div className="flex flex-col gap-2 text-left">
-							<h2
-								id="confirm-dialog-title"
-								className="text-lg font-semibold leading-none"
-							>
-								{title}
-							</h2>
+							<div className="flex items-center gap-3">
+								{variant === "danger" && (
+									<div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-destructive/15">
+										<AlertTriangle className="h-5 w-5 text-destructive" />
+									</div>
+								)}
+								<h2
+									id="confirm-dialog-title"
+									className="text-lg font-semibold leading-none"
+								>
+									{title}
+								</h2>
+							</div>
 							<p
 								id="confirm-dialog-desc"
 								className="text-sm text-muted-foreground"

src/components/admin/studio/batch-progress.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { Ban, Check, Loader2, ShieldCheck, X } from "lucide-react";
-import { useEffect, useState } from "react";
+import { memo, useEffect, useMemo, useRef, useState } from "react";
 
 import { Button } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
@@ -40,7 +40,7 @@ function formatEta(ms: number): string {
 	return `${min}m ${sec}s`;
 }
 
-export function BatchProgress({
+export const BatchProgress = memo(function BatchProgress({
 	progress,
 	done,
 	succeeded,
@@ -65,33 +65,42 @@ export function BatchProgress({
 	onDismiss?: () => void;
 	onRetry?: (classnames: string[]) => void;
 }) {
-	const entries = [...progress.entries()];
-	const total = entries.length;
-	const completed = entries.filter(
-		([, s]) => s.status === "done" || s.status === "failed",
-	).length;
-	const percent = total > 0 ? Math.round((completed / total) * 100) : 0;
+	const { entries, total, completed, percent } = useMemo(() => {
+		const e = [...progress.entries()];
+		const t = e.length;
+		const c = e.filter(
+			([, s]) => s.status === "done" || s.status === "failed",
+		).length;
+		return {
+			entries: e,
+			total: t,
+			completed: c,
+			percent: t > 0 ? Math.round((c / t) * 100) : 0,
+		};
+	}, [progress]);
 
 	// Live ETA calculation
 	const [eta, setEta] = useState<string | null>(null);
+	const completedRef = useRef(completed);
+	const totalRef = useRef(total);
+	completedRef.current = completed;
+	totalRef.current = total;
+
 	useEffect(() => {
 		if (done || !startTime || completed === 0) {
 			setEta(null);
 			return;
 		}
-		const elapsed = Date.now() - startTime;
-		const avgPerItem = elapsed / completed;
-		const remaining = (total - completed) * avgPerItem;
-		setEta(formatEta(remaining));
-
-		const interval = setInterval(() => {
+		const calc = () => {
 			const elapsed = Date.now() - startTime;
-			const avgPerItem = elapsed / completed;
-			const remaining = (total - completed) * avgPerItem;
+			const avgPerItem = elapsed / completedRef.current;
+			const remaining = (totalRef.current - completedRef.current) * avgPerItem;
 			setEta(formatEta(remaining));
-		}, 2000);
+		};
+		calc();
+		const interval = setInterval(calc, 2000);
 		return () => clearInterval(interval);
-	}, [done, startTime, completed, total]);
+	}, [done, startTime, completed]);
 
 	return (
 		<div className="border-t border-[var(--admin-border)] p-3">
@@ -244,4 +253,4 @@ export function BatchProgress({
 			</div>
 		</div>
 	);
-}
+});

src/components/admin/studio/catalog-rail.tsx

@@ -1,12 +1,12 @@
 "use client";
 
 import { ChevronDown, ChevronRight, FolderTree } from "lucide-react";
-import { useMemo, useState } from "react";
+import { memo, useCallback, useMemo, useState } from "react";
 
 import { cn } from "@/lib/utils";
 import type { TreeNode } from "@/types/catalog";
 
-export function CatalogRail({
+export const CatalogRail = memo(function CatalogRail({
 	tree,
 	selectedId,
 	onSelect,
@@ -31,14 +31,14 @@ export function CatalogRail({
 		return tree.filter((n) => !hidden.has(n.id));
 	}, [tree, collapsed]);
 
-	const toggle = (id: number) => {
+	const toggle = useCallback((id: number) => {
 		setCollapsed((prev) => {
 			const next = new Set(prev);
 			if (next.has(id)) next.delete(id);
 			else next.add(id);
 			return next;
 		});
-	};
+	}, []);
 
 	return (
 		<aside className="flex h-full min-h-0 w-64 shrink-0 flex-col border-r border-[var(--admin-border)] bg-[var(--admin-surface)]">
@@ -100,4 +100,4 @@ export function CatalogRail({
 			</div>
 		</aside>
 	);
-}
+});

src/components/admin/studio/studio-client.tsx

@@ -151,6 +151,11 @@ export function StudioClient({
 		BatchItemStatus
 	> | null>(null);
 	const [batchDone, setBatchDone] = useState(false);
+	const batchDoneRef = useRef(false);
+	const markBatchDone = useCallback(() => {
+		batchDoneRef.current = true;
+		markBatchDone();
+	}, []);
 	const [batchSucceeded, setBatchSucceeded] = useState(0);
 	const [batchFailed, setBatchFailed] = useState(0);
 	const [batchCancelling, setBatchCancelling] = useState(false);
@@ -424,7 +429,7 @@ export function StudioClient({
 		for (const cn of classnames) {
 			initial.set(cn, { classname: cn, status: "pending" });
 		}
-		setBatchProgress(new Map(initial));
+		setBatchProgress(initial);
 		setBatchDone(false);
 		setBatchSucceeded(0);
 		setBatchFailed(0);
@@ -443,6 +448,7 @@ export function StudioClient({
 			for (let i = 0; i < classnames.length; i += CHUNK) {
 				if (abort.signal.aborted) break;
 				const chunk = classnames.slice(i, i + CHUNK);
+				const isLast = i + CHUNK >= classnames.length;
 
 				const res = await adminFetch("/api/admin/import/clone/batch", {
 					method: "POST",
@@ -451,6 +457,7 @@ export function StudioClient({
 						sourceId: activeSource,
 						classnames: chunk,
 						concurrency: 10,
+						final: isLast,
 					}),
 					signal: abort.signal,
 				});
@@ -500,7 +507,7 @@ export function StudioClient({
 			if (!abort.signal.aborted) {
 				setBatchSucceeded(okCount);
 				setBatchFailed(failCount);
-				setBatchDone(true);
+				markBatchDone();
 
 				if (okCount > 0) {
 					toast.success(
@@ -686,7 +693,6 @@ export function StudioClient({
 			return;
 		}
 
-		setBatchProgress(new Map());
 		setBatchDone(false);
 		setBatchSucceeded(0);
 		setBatchFailed(0);
@@ -698,7 +704,7 @@ export function StudioClient({
 		for (const i of toImport) {
 			initial.set(i.classname, { classname: i.classname, status: "pending" });
 		}
-		setBatchProgress(new Map(initial));
+		setBatchProgress(initial);
 
 		const abort = new AbortController();
 		batchAbortRef.current = abort;
@@ -727,6 +733,7 @@ export function StudioClient({
 			});
 
 			if (!res.ok || !res.body) {
+				toast.error(`Batch import mislukt (${res.status})`);
 				setBatchProgress(null);
 				return;
 			}
@@ -785,7 +792,7 @@ export function StudioClient({
 								iconsSynced: event.iconsSynced ?? [],
 								ownershipFixed: event.ownershipFixed ?? [],
 							});
-							setBatchDone(true);
+							markBatchDone();
 						}
 					} catch {
 						/* skip malformed */
@@ -803,7 +810,7 @@ export function StudioClient({
 			setBatchCancelling(false);
 			setSelected(new Set());
 			fetchStats();
-			if (!batchDone) setBatchProgress(null);
+			if (!batchDoneRef.current) setBatchProgress(null);
 		}
 	}
 
@@ -824,7 +831,6 @@ export function StudioClient({
 	async function retryFailed(failed: string[]) {
 		if (!activeSource || failed.length === 0) return;
 		// For clone sources, re-run cloneAllMissing with only the failed classnames
-		setBatchProgress(new Map());
 		setBatchDone(false);
 		setBatchSucceeded(0);
 		setBatchFailed(0);
@@ -835,7 +841,7 @@ export function StudioClient({
 		for (const cn of failed) {
 			initial.set(cn, { classname: cn, status: "pending" });
 		}
-		setBatchProgress(new Map(initial));
+		setBatchProgress(initial);
 
 		const abort = new AbortController();
 		cloneAllAbortRef.current = abort;
@@ -850,12 +856,14 @@ export function StudioClient({
 					sourceId: activeSource,
 					classnames: failed,
 					concurrency: 10,
+					final: true,
 				}),
 				signal: abort.signal,
 			});
 
 			if (!res.ok || !res.body) {
 				toast.error(`Retry mislukt (${res.status})`);
+				setBatchProgress(null);
 				return;
 			}
 
@@ -892,7 +900,7 @@ export function StudioClient({
 
 			setBatchSucceeded(okCount);
 			setBatchFailed(failCount);
-			setBatchDone(true);
+			markBatchDone();
 
 			if (okCount > 0) {
 				toast.success(`${okCount} items opnieuw geïmporteerd`);
@@ -903,6 +911,7 @@ export function StudioClient({
 		} catch (err) {
 			if ((err as Error)?.name !== "AbortError") {
 				toast.error("Verbindingsfout tijdens retry");
+				setBatchProgress(null);
 			}
 		} finally {
 			cloneAllAbortRef.current = null;
@@ -919,6 +928,11 @@ export function StudioClient({
 					errors?: string[];
 				};
 				setItems((prev) => prev.filter((i) => i.classname !== deleting));
+				setSelected((prev) => {
+					const next = new Set(prev);
+					next.delete(deleting);
+					return next;
+				});
 				if (detail?.classname === deleting) setDetail(null);
 				fetchStats();
 				toast.success(
@@ -969,6 +983,104 @@ export function StudioClient({
 		}
 	}
 
+	const [bulkDeleting, setBulkDeleting] = useState(false);
+	const [bulkRegenning, setBulkRegenning] = useState(false);
+
+	async function bulkDeleteSelected() {
+		if (selectedImported.length === 0) return;
+		const confirmed = await confirm({
+			title: `${selectedImported.length} items verwijderen?`,
+			description: `Alle ${selectedImported.length} geselecteerde geïmporteerde items worden permanent verwijderd uit de database en het bestandssysteem.`,
+			confirmLabel: "Verwijderen",
+			variant: "danger",
+		});
+		if (!confirmed) return;
+
+		setBulkDeleting(true);
+		let deleted = 0;
+		let failed = 0;
+		try {
+			for (const item of selectedImported) {
+				try {
+					const result = await deleteImportedFurni({
+						classname: item.classname,
+					});
+					if (result.ok) {
+						deleted++;
+					} else {
+						failed++;
+					}
+				} catch {
+					failed++;
+				}
+			}
+			setItems((prev) => prev.filter((i) => !selected.has(i.classname)));
+			setSelected(new Set());
+			fetchStats();
+			toast.success(
+				`Verwijderd: ${deleted}${failed > 0 ? `, mislukt: ${failed}` : ""}`,
+			);
+		} catch {
+			toast.error("Bulk delete mislukt");
+		} finally {
+			setBulkDeleting(false);
+		}
+	}
+
+	async function bulkRegenNitro() {
+		if (selectedMissingNitro.length === 0) return;
+		setBulkRegenning(true);
+		const cns = selectedMissingNitro.map((i) => i.classname);
+		setRegeneratingNitro((prev) => {
+			const next = new Set(prev);
+			for (const cn of cns) next.add(cn);
+			return next;
+		});
+		try {
+			const res = await adminFetch("/api/admin/import/furni", {
+				method: "PATCH",
+				headers: { "Content-Type": "application/json" },
+				body: JSON.stringify({
+					items: selectedMissingNitro.map((i) => ({
+						classname: i.classname,
+						revision: i.revision,
+					})),
+				}),
+			});
+			const data = await res.json();
+			if (res.ok) {
+				const succeededClassnames = new Set<string>(
+					(data.results ?? [])
+						.filter((r: { ok: boolean }) => r.ok)
+						.map((r: { classname: string }) => r.classname),
+				);
+				setItems((prev) =>
+					prev.map((i) =>
+						succeededClassnames.has(i.classname)
+							? { ...i, nitroExists: true }
+							: i,
+					),
+				);
+				const succeeded = Number(data.succeeded ?? 0);
+				const failed = Number(data.failed ?? 0);
+				toast.success(
+					`Nitro geregenereerd: ${succeeded}${failed > 0 ? `, mislukt: ${failed}` : ""}`,
+				);
+			} else {
+				toast.error(data.error || "Regeneratie mislukt");
+			}
+		} catch {
+			toast.error("Network error");
+		} finally {
+			setRegeneratingNitro((prev) => {
+				const next = new Set(prev);
+				for (const cn of cns) next.delete(cn);
+				return next;
+			});
+			setBulkRegenning(false);
+		}
+	}
+
 	const detailPreview = useMemo<AutoCatalogPreview | null>(() => {
 		if (!detail) return null;
 		return previewAutoCatalog(
@@ -991,6 +1103,19 @@ export function StudioClient({
 		[filteredItems],
 	);
 
+	const selectedImported = useMemo(
+		() =>
+			filteredItems.filter(
+				(i) => selected.has(i.classname) && i.alreadyImported,
+			),
+		[filteredItems, selected],
+	);
+
+	const selectedMissingNitro = useMemo(
+		() => selectedImported.filter((i) => !i.nitroExists),
+		[selectedImported],
+	);
+
 	const notImportedCount = useMemo(
 		() =>
 			activeSource && cloneStats
@@ -1397,6 +1522,40 @@ export function StudioClient({
 						Import {selectedNonImported} auto
 					</Button>
 				)}
+
+				{selectedMissingNitro.length > 0 && !batchProgress && (
+					<Button
+						size="sm"
+						variant="outline"
+						className="gap-1.5"
+						disabled={bulkRegenning}
+						onClick={bulkRegenNitro}
+					>
+						{bulkRegenning ? (
+							<Loader2 size={14} className="animate-spin" />
+						) : (
+							<RefreshCw size={14} />
+						)}
+						Nitro regeneren ({selectedMissingNitro.length})
+					</Button>
+				)}
+
+				{selectedImported.length > 0 && !batchProgress && (
+					<Button
+						size="sm"
+						variant="destructive"
+						className="gap-1.5"
+						disabled={bulkDeleting}
+						onClick={bulkDeleteSelected}
+					>
+						{bulkDeleting ? (
+							<Loader2 size={14} className="animate-spin" />
+						) : (
+							<Trash2 size={14} />
+						)}
+						Verwijder ({selectedImported.length})
+					</Button>
+				)}
 			</div>
 
 			{/* ── Body: rail + grid + drawer ────────────────────── */}