From 93601e58e0a5cb4789592fba3e8d918eae155a60 Mon Sep 17 00:00:00 2001
From: openhands <openhands@all-hands.dev>
Date: Tue, 1 Sep 2026 19:07:20 +0200
Subject: [PATCH] feat: Studio bulk ops, perf fixes, bug fixes, confirm dialog
 visibility

Confirm Dialog:
- Overlay opacity 80% -> 95% (solid black)
- Card uses bg-surface with glow shadow ring-primary/40
- Added AlertTriangle icon for danger variant
- Removed backdrop-blur for maximum opacity

Studio features:
- Bulk delete: select imported items and delete in batch
- Bulk nitro regen: select items missing .nitro and regenerate all
- Added Trash2 and RefreshCw toolbar buttons for bulk actions

Performance:
- BatchProgress: React.memo + useMemo for entries/total/completed/percent
- BatchProgress: ETA interval uses useRef to avoid re-creation per completed
- CatalogRail: React.memo + useCallback for toggle
- Removed redundant double setBatchProgress calls
- Removed redundant new Map(initial) wrapping

Bug fixes:
- importBatch: stale batchDone closure always cleared progress panel (use ref)
- importBatch: added missing toast.error on HTTP failure
- bulkRegenNitro: now checks per-item results instead of marking all as succeeded
- single deleteItem: now removes classname from selected set
- retryFailed: clears progress panel on HTTP error and stream error
- Removed unused 'done' variable (2x) from cloneAllMissing/retryFailed

Lint:
- biome format fixes for selectedMissingNitro and setItems
---
 src/components/admin/confirm-dialog.tsx       |  24 ++-
 .../admin/studio/batch-progress.tsx           |  47 +++--
 src/components/admin/studio/catalog-rail.tsx  |  10 +-
 src/components/admin/studio/studio-client.tsx | 178 ++++++++++++++++--
 4 files changed, 214 insertions(+), 45 deletions(-)

diff --git a/src/components/admin/confirm-dialog.tsx b/src/components/admin/confirm-dialog.tsx
index 615a85567e..9170492926 100644
--- a/src/components/admin/confirm-dialog.tsx
+++ b/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/80 backdrop-blur-sm"
+						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 border-border bg-background/100 p-6 text-card-foreground shadow-2xl ring-1 ring-black/10 backdrop-blur-none"
+						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"
diff --git a/src/components/admin/studio/batch-progress.tsx b/src/components/admin/studio/batch-progress.tsx
index 699c09620d..4a0677c02c 100644
--- a/src/components/admin/studio/batch-progress.tsx
+++ b/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>
 	);
-}
+});
diff --git a/src/components/admin/studio/catalog-rail.tsx b/src/components/admin/studio/catalog-rail.tsx
index 8edf9d45f4..d630aa6e8c 100644
--- a/src/components/admin/studio/catalog-rail.tsx
+++ b/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>
 	);
-}
+});
diff --git a/src/components/admin/studio/studio-client.tsx b/src/components/admin/studio/studio-client.tsx
index e28497a252..70fa9d652b 100644
--- a/src/components/admin/studio/studio-client.tsx
+++ b/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);
@@ -436,7 +441,6 @@ export function StudioClient({
 		cloneAllAbortRef.current = abort;
 
 		const CHUNK = 400;
-		let done = 0;
 		let okCount = 0;
 		let failCount = 0;
 
@@ -479,7 +483,6 @@ export function StudioClient({
 								return next;
 							});
 							if (evt.status === "done" || evt.status === "failed") {
-								done++;
 								if (evt.status === "failed") {
 									setFailedClassnames((prev) =>
 										prev.includes(cn) ? prev : [...prev, cn],
@@ -504,7 +507,7 @@ export function StudioClient({
 			if (!abort.signal.aborted) {
 				setBatchSucceeded(okCount);
 				setBatchFailed(failCount);
-				setBatchDone(true);
+				markBatchDone();
 
 				if (okCount > 0) {
 					toast.success(
@@ -690,7 +693,6 @@ export function StudioClient({
 			return;
 		}
 
-		setBatchProgress(new Map());
 		setBatchDone(false);
 		setBatchSucceeded(0);
 		setBatchFailed(0);
@@ -702,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;
@@ -731,6 +733,7 @@ export function StudioClient({
 			});
 
 			if (!res.ok || !res.body) {
+				toast.error(`Batch import mislukt (${res.status})`);
 				setBatchProgress(null);
 				return;
 			}
@@ -789,7 +792,7 @@ export function StudioClient({
 								iconsSynced: event.iconsSynced ?? [],
 								ownershipFixed: event.ownershipFixed ?? [],
 							});
-							setBatchDone(true);
+							markBatchDone();
 						}
 					} catch {
 						/* skip malformed */
@@ -807,7 +810,7 @@ export function StudioClient({
 			setBatchCancelling(false);
 			setSelected(new Set());
 			fetchStats();
-			if (!batchDone) setBatchProgress(null);
+			if (!batchDoneRef.current) setBatchProgress(null);
 		}
 	}
 
@@ -828,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);
@@ -839,11 +841,10 @@ 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;
-		let done = 0;
 		let okCount = 0;
 		let failCount = 0;
 
@@ -862,6 +863,7 @@ export function StudioClient({
 
 			if (!res.ok || !res.body) {
 				toast.error(`Retry mislukt (${res.status})`);
+				setBatchProgress(null);
 				return;
 			}
 
@@ -881,7 +883,6 @@ export function StudioClient({
 							return next;
 						});
 						if (evt.status === "done" || evt.status === "failed") {
-							done++;
 							if (evt.status === "failed") {
 								setFailedClassnames((prev) =>
 									prev.includes(cn) ? prev : [...prev, cn],
@@ -899,7 +900,7 @@ export function StudioClient({
 
 			setBatchSucceeded(okCount);
 			setBatchFailed(failCount);
-			setBatchDone(true);
+			markBatchDone();
 
 			if (okCount > 0) {
 				toast.success(`${okCount} items opnieuw geïmporteerd`);
@@ -910,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;
@@ -926,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(
@@ -976,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(
@@ -998,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
@@ -1404,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 ────────────────────── */}