style: format code biome

2026-07-13 21:57:41 +02:00
1 parent 8efd032cc6
commit df38dccbf1
@@ -5,98 +5,115 @@ import { useEffect, useState } from "react";
 import { toast } from "sonner";
 import { getBadgeData, updateBadge } from "@/actions/badges";
 import { Button } from "@/components/ui/button";
-import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog";
+import {
+	Dialog,
+	DialogContent,
+	DialogFooter,
+	DialogHeader,
+	DialogTitle,
+} from "@/components/ui/dialog";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { useServerAction } from "@/hooks/use-server-action";

 interface BadgeEditorDialogProps {
-  code: string;
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-  /** Called after a successful save so the parent can refresh state */
-  onSaved?: () => void;
+	code: string;
+	open: boolean;
+	onOpenChange: (open: boolean) => void;
+	/** Called after a successful save so the parent can refresh state */
+	onSaved?: () => void;
 }

-export function BadgeEditorDialog({ code, open, onOpenChange, onSaved }: BadgeEditorDialogProps) {
-  const [name, setName] = useState("");
-  const [desc, setDesc] = useState("");
-  const [loading, setLoading] = useState(false);
-  const { run, isPending: saving } = useServerAction();
+export function BadgeEditorDialog({
+	code,
+	open,
+	onOpenChange,
+	onSaved,
+}: BadgeEditorDialogProps) {
+	const [name, setName] = useState("");
+	const [desc, setDesc] = useState("");
+	const [loading, setLoading] = useState(false);
+	const { run, isPending: saving } = useServerAction();

-  // Fetch current values when dialog opens
-  useEffect(() => {
-    if (!open || !code) return;
-    setLoading(true);
-    getBadgeData({ code })
-      .then((result) => {
-        if (result.ok) {
-          const data = result.data as { name: string; desc: string };
-          setName(data.name ?? "");
-          setDesc(data.desc ?? "");
-        }
-      })
-      .catch(() => {
-        toast.error("Failed to load badge data");
-      })
-      .finally(() => setLoading(false));
-  }, [open, code]);
+	// Fetch current values when dialog opens
+	useEffect(() => {
+		if (!open || !code) return;
+		setLoading(true);
+		getBadgeData({ code })
+			.then((result) => {
+				if (result.ok) {
+					const data = result.data as { name: string; desc: string };
+					setName(data.name ?? "");
+					setDesc(data.desc ?? "");
+				}
+			})
+			.catch(() => {
+				toast.error("Failed to load badge data");
+			})
+			.finally(() => setLoading(false));
+	}, [open, code]);

-  function handleSave() {
-    run(() => updateBadge({ code, name, desc }), {
-      successMessage: `Badge ${code} updated`,
-      errorMessage: "Save failed",
-      onSuccess: () => {
-        onSaved?.();
-        onOpenChange(false);
-      },
-    });
-  }
+	function handleSave() {
+		run(() => updateBadge({ code, name, desc }), {
+			successMessage: `Badge ${code} updated`,
+			errorMessage: "Save failed",
+			onSuccess: () => {
+				onSaved?.();
+				onOpenChange(false);
+			},
+		});
+	}

-  return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="sm:max-w-md">
-        <DialogHeader>
-          <DialogTitle className="flex items-center gap-2">Edit Badge — {code}</DialogTitle>
-        </DialogHeader>
+	return (
+		<Dialog open={open} onOpenChange={onOpenChange}>
+			<DialogContent className="sm:max-w-md">
+				<DialogHeader>
+					<DialogTitle className="flex items-center gap-2">
+						Edit Badge — {code}
+					</DialogTitle>
+				</DialogHeader>

-        {loading ? (
-          <div className="flex items-center justify-center py-8">
-            <Loader2 className="w-6 h-6 animate-spin text-muted-foreground" />
-          </div>
-        ) : (
-          <div className="space-y-4">
-            <div className="space-y-2">
-              <Label htmlFor="badge-name">Name</Label>
-              <Input
-                id="badge-name"
-                value={name}
-                onChange={(e) => setName(e.target.value)}
-                placeholder="Badge name"
-              />
-            </div>
-            <div className="space-y-2">
-              <Label htmlFor="badge-desc">Description</Label>
-              <Input
-                id="badge-desc"
-                value={desc}
-                onChange={(e) => setDesc(e.target.value)}
-                placeholder="Badge description"
-              />
-            </div>
-          </div>
-        )}
+				{loading ? (
+					<div className="flex items-center justify-center py-8">
+						<Loader2 className="w-6 h-6 animate-spin text-muted-foreground" />
+					</div>
+				) : (
+					<div className="space-y-4">
+						<div className="space-y-2">
+							<Label htmlFor="badge-name">Name</Label>
+							<Input
+								id="badge-name"
+								value={name}
+								onChange={(e) => setName(e.target.value)}
+								placeholder="Badge name"
+							/>
+						</div>
+						<div className="space-y-2">
+							<Label htmlFor="badge-desc">Description</Label>
+							<Input
+								id="badge-desc"
+								value={desc}
+								onChange={(e) => setDesc(e.target.value)}
+								placeholder="Badge description"
+							/>
+						</div>
+					</div>
+				)}

-        <DialogFooter>
-          <Button variant="outline" onClick={() => onOpenChange(false)} disabled={saving}>
-            Cancel
-          </Button>
-          <Button onClick={handleSave} disabled={loading || saving}>
-            {saving && <Loader2 className="w-4 h-4 animate-spin mr-1" />}
-            Save
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  );
+				<DialogFooter>
+					<Button
+						variant="outline"
+						onClick={() => onOpenChange(false)}
+						disabled={saving}
+					>
+						Cancel
+					</Button>
+					<Button onClick={handleSave} disabled={loading || saving}>
+						{saving && <Loader2 className="w-4 h-4 animate-spin mr-1" />}
+						Save
+					</Button>
+				</DialogFooter>
+			</DialogContent>
+		</Dialog>
+	);
 }
@@ -1,17 +1,17 @@
 "use client";

 import {
-  AlertCircle,
-  BadgeCheck,
-  Check,
-  CheckCircle2,
-  Download,
-  Globe,
-  Loader2,
-  Package,
-  Pencil,
-  Search,
-  X,
+	AlertCircle,
+	BadgeCheck,
+	Check,
+	CheckCircle2,
+	Download,
+	Globe,
+	Loader2,
+	Package,
+	Pencil,
+	Search,
+	X,
 } from "lucide-react";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { toast } from "sonner";
@@ -19,465 +19,524 @@ import { importBadgeFromRemote } from "@/actions/import-badges";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
+import {
+	Tooltip,
+	TooltipContent,
+	TooltipProvider,
+	TooltipTrigger,
+} from "@/components/ui/tooltip";
 import { cn } from "@/lib/utils";
 import { BadgeEditorDialog } from "./badge-editor-dialog";

 interface BadgeItem {
-  id: number;
-  code: string;
-  name: string;
-  description: string;
-  hotel: string;
-  url_habbo: string;
-  url_habboassets: string;
-  alreadyImported: boolean;
+	id: number;
+	code: string;
+	name: string;
+	description: string;
+	hotel: string;
+	url_habbo: string;
+	url_habboassets: string;
+	alreadyImported: boolean;
 }

 const PAGE_SIZE = 100;

 export function ImportBadgesClient() {
-  const [searchTerm, setSearchTerm] = useState("");
-  const [activeSearch, setActiveSearch] = useState("");
-  const [badges, setBadges] = useState<BadgeItem[]>([]);
-  const [offset, setOffset] = useState(0);
-  const [hasMore, setHasMore] = useState(false);
-  const [loading, setLoading] = useState(false);
-  const [importingCode, setImportingCode] = useState<string | null>(null);
-  const [error, setError] = useState("");
-  const [allHotels, setAllHotels] = useState(true);
-  const [editingCode, setEditingCode] = useState<string | null>(null);
-  const [selected, setSelected] = useState<Set<string>>(new Set());
-  const [batchImporting, setBatchImporting] = useState(false);
-  const searchRef = useRef<HTMLInputElement>(null);
+	const [searchTerm, setSearchTerm] = useState("");
+	const [activeSearch, setActiveSearch] = useState("");
+	const [badges, setBadges] = useState<BadgeItem[]>([]);
+	const [offset, setOffset] = useState(0);
+	const [hasMore, setHasMore] = useState(false);
+	const [loading, setLoading] = useState(false);
+	const [importingCode, setImportingCode] = useState<string | null>(null);
+	const [error, setError] = useState("");
+	const [allHotels, setAllHotels] = useState(true);
+	const [editingCode, setEditingCode] = useState<string | null>(null);
+	const [selected, setSelected] = useState<Set<string>>(new Set());
+	const [batchImporting, setBatchImporting] = useState(false);
+	const searchRef = useRef<HTMLInputElement>(null);

-  const fetchBadges = useCallback(async (search: string, off: number, all: boolean) => {
-    setLoading(true);
-    setError("");
-    try {
-      const params = new URLSearchParams({ offset: String(off) });
-      if (search) params.set("search", search);
-      if (all) params.set("allHotels", "1");
-      const res = await fetch(`/api/admin/import/badges?${params}`);
-      const data = await res.json();
-      if (!res.ok) {
-        setError(data.error || "Failed to load");
-        return;
-      }
-      const list = data.badges || [];
-      setBadges(list);
-      setHasMore(list.length >= PAGE_SIZE);
-      setSelected(new Set());
-    } catch {
-      setError("Network error");
-    } finally {
-      setLoading(false);
-    }
-  }, []);
+	const fetchBadges = useCallback(
+		async (search: string, off: number, all: boolean) => {
+			setLoading(true);
+			setError("");
+			try {
+				const params = new URLSearchParams({ offset: String(off) });
+				if (search) params.set("search", search);
+				if (all) params.set("allHotels", "1");
+				const res = await fetch(`/api/admin/import/badges?${params}`);
+				const data = await res.json();
+				if (!res.ok) {
+					setError(data.error || "Failed to load");
+					return;
+				}
+				const list = data.badges || [];
+				setBadges(list);
+				setHasMore(list.length >= PAGE_SIZE);
+				setSelected(new Set());
+			} catch {
+				setError("Network error");
+			} finally {
+				setLoading(false);
+			}
+		},
+		[],
+	);

-  // Auto-load on mount and when allHotels changes
-  // biome-ignore lint/correctness/useExhaustiveDependencies: explicitly chosen here, see surrounding code
-  useEffect(() => {
-    setOffset(0);
-    fetchBadges(activeSearch, 0, allHotels);
-  }, [fetchBadges, allHotels]);
+	// Auto-load on mount and when allHotels changes
+	// biome-ignore lint/correctness/useExhaustiveDependencies: explicitly chosen here, see surrounding code
+	useEffect(() => {
+		setOffset(0);
+		fetchBadges(activeSearch, 0, allHotels);
+	}, [fetchBadges, allHotels]);

-  // "/" keyboard shortcut to focus search
-  useEffect(() => {
-    function onKeyDown(e: KeyboardEvent) {
-      if (e.key === "/" && !e.metaKey && !e.ctrlKey && !e.altKey) {
-        const tag = (e.target as HTMLElement)?.tagName;
-        if (tag === "INPUT" || tag === "TEXTAREA" || tag === "SELECT") return;
-        e.preventDefault();
-        searchRef.current?.focus();
-      }
-    }
-    document.addEventListener("keydown", onKeyDown);
-    return () => document.removeEventListener("keydown", onKeyDown);
-  }, []);
+	// "/" keyboard shortcut to focus search
+	useEffect(() => {
+		function onKeyDown(e: KeyboardEvent) {
+			if (e.key === "/" && !e.metaKey && !e.ctrlKey && !e.altKey) {
+				const tag = (e.target as HTMLElement)?.tagName;
+				if (tag === "INPUT" || tag === "TEXTAREA" || tag === "SELECT") return;
+				e.preventDefault();
+				searchRef.current?.focus();
+			}
+		}
+		document.addEventListener("keydown", onKeyDown);
+		return () => document.removeEventListener("keydown", onKeyDown);
+	}, []);

-  function doSearch() {
-    setActiveSearch(searchTerm);
-    setOffset(0);
-    fetchBadges(searchTerm, 0, allHotels);
-  }
+	function doSearch() {
+		setActiveSearch(searchTerm);
+		setOffset(0);
+		fetchBadges(searchTerm, 0, allHotels);
+	}

-  function goPage(direction: "prev" | "next") {
-    const newOffset = direction === "next" ? offset + PAGE_SIZE : Math.max(0, offset - PAGE_SIZE);
-    setOffset(newOffset);
-    fetchBadges(activeSearch, newOffset, allHotels);
-  }
+	function goPage(direction: "prev" | "next") {
+		const newOffset =
+			direction === "next"
+				? offset + PAGE_SIZE
+				: Math.max(0, offset - PAGE_SIZE);
+		setOffset(newOffset);
+		fetchBadges(activeSearch, newOffset, allHotels);
+	}

-  async function doImport(badge: BadgeItem) {
-    setImportingCode(badge.code);
-    try {
-      const result = await importBadgeFromRemote({
-        code: badge.code,
-        name: badge.name,
-        description: badge.description,
-      });
-      if (result.ok) {
-        toast.success(`${badge.code} imported`);
-        setBadges((prev) => prev.map((b) => (b.code === badge.code ? { ...b, alreadyImported: true } : b)));
-        setSelected((prev) => {
-          const n = new Set(prev);
-          n.delete(badge.code);
-          return n;
-        });
-      } else {
-        toast.error(result.error || `Failed to import ${badge.code}`);
-      }
-    } catch {
-      toast.error(`Network error importing ${badge.code}`);
-    } finally {
-      setImportingCode(null);
-    }
-  }
+	async function doImport(badge: BadgeItem) {
+		setImportingCode(badge.code);
+		try {
+			const result = await importBadgeFromRemote({
+				code: badge.code,
+				name: badge.name,
+				description: badge.description,
+			});
+			if (result.ok) {
+				toast.success(`${badge.code} imported`);
+				setBadges((prev) =>
+					prev.map((b) =>
+						b.code === badge.code ? { ...b, alreadyImported: true } : b,
+					),
+				);
+				setSelected((prev) => {
+					const n = new Set(prev);
+					n.delete(badge.code);
+					return n;
+				});
+			} else {
+				toast.error(result.error || `Failed to import ${badge.code}`);
+			}
+		} catch {
+			toast.error(`Network error importing ${badge.code}`);
+		} finally {
+			setImportingCode(null);
+		}
+	}

-  async function doBatchImport() {
-    const toImport = badges.filter((b) => selected.has(b.code) && !b.alreadyImported);
-    if (toImport.length === 0) return;
-    setBatchImporting(true);
-    let ok = 0,
-      fail = 0;
-    for (const badge of toImport) {
-      try {
-        const result = await importBadgeFromRemote({
-          code: badge.code,
-          name: badge.name,
-          description: badge.description,
-        });
-        if (result.ok) {
-          ok++;
-          setBadges((prev) => prev.map((b) => (b.code === badge.code ? { ...b, alreadyImported: true } : b)));
-        } else {
-          fail++;
-        }
-      } catch {
-        fail++;
-      }
-    }
-    setBatchImporting(false);
-    setSelected(new Set());
-    if (ok > 0) toast.success(`${ok} badge(s) imported`);
-    if (fail > 0) toast.error(`${fail} failed`);
-  }
+	async function doBatchImport() {
+		const toImport = badges.filter(
+			(b) => selected.has(b.code) && !b.alreadyImported,
+		);
+		if (toImport.length === 0) return;
+		setBatchImporting(true);
+		let ok = 0,
+			fail = 0;
+		for (const badge of toImport) {
+			try {
+				const result = await importBadgeFromRemote({
+					code: badge.code,
+					name: badge.name,
+					description: badge.description,
+				});
+				if (result.ok) {
+					ok++;
+					setBadges((prev) =>
+						prev.map((b) =>
+							b.code === badge.code ? { ...b, alreadyImported: true } : b,
+						),
+					);
+				} else {
+					fail++;
+				}
+			} catch {
+				fail++;
+			}
+		}
+		setBatchImporting(false);
+		setSelected(new Set());
+		if (ok > 0) toast.success(`${ok} badge(s) imported`);
+		if (fail > 0) toast.error(`${fail} failed`);
+	}

-  function toggleSelect(code: string) {
-    setSelected((prev) => {
-      const next = new Set(prev);
-      if (next.has(code)) next.delete(code);
-      else next.add(code);
-      return next;
-    });
-  }
+	function toggleSelect(code: string) {
+		setSelected((prev) => {
+			const next = new Set(prev);
+			if (next.has(code)) next.delete(code);
+			else next.add(code);
+			return next;
+		});
+	}

-  const importableBadges = useMemo(() => badges.filter((b) => !b.alreadyImported), [badges]);
+	const importableBadges = useMemo(
+		() => badges.filter((b) => !b.alreadyImported),
+		[badges],
+	);

-  function toggleSelectAll() {
-    if (selected.size === importableBadges.length) {
-      setSelected(new Set());
-    } else {
-      setSelected(new Set(importableBadges.map((b) => b.code)));
-    }
-  }
+	function toggleSelectAll() {
+		if (selected.size === importableBadges.length) {
+			setSelected(new Set());
+		} else {
+			setSelected(new Set(importableBadges.map((b) => b.code)));
+		}
+	}

-  // Stats
-  const importedCount = useMemo(() => badges.filter((b) => b.alreadyImported).length, [badges]);
-  const currentPage = Math.floor(offset / PAGE_SIZE) + 1;
+	// Stats
+	const importedCount = useMemo(
+		() => badges.filter((b) => b.alreadyImported).length,
+		[badges],
+	);
+	const currentPage = Math.floor(offset / PAGE_SIZE) + 1;

-  return (
-    <TooltipProvider delayDuration={300}>
-      <div className="space-y-4">
-        {/* Stats bar */}
-        {badges.length > 0 && (
-          <div className="flex items-center gap-3 flex-wrap">
-            <div className="flex items-center gap-1.5 text-sm">
-              <Package className="h-4 w-4 text-muted-foreground" />
-              <span className="font-medium">{badges.length}</span>
-              <span className="text-muted-foreground">results</span>
-            </div>
-            <div className="flex items-center gap-1.5 text-sm">
-              <CheckCircle2 className="h-4 w-4 text-[var(--admin-success)]" />
-              <span className="font-medium text-[var(--admin-success)]">{importedCount}</span>
-              <span className="text-muted-foreground">imported</span>
-            </div>
-            {importableBadges.length > 0 && (
-              <div className="flex items-center gap-1.5 text-sm">
-                <Download className="h-4 w-4 text-muted-foreground" />
-                <span className="font-medium">{importableBadges.length}</span>
-                <span className="text-muted-foreground">available</span>
-              </div>
-            )}
-          </div>
-        )}
+	return (
+		<TooltipProvider delayDuration={300}>
+			<div className="space-y-4">
+				{/* Stats bar */}
+				{badges.length > 0 && (
+					<div className="flex items-center gap-3 flex-wrap">
+						<div className="flex items-center gap-1.5 text-sm">
+							<Package className="h-4 w-4 text-muted-foreground" />
+							<span className="font-medium">{badges.length}</span>
+							<span className="text-muted-foreground">results</span>
+						</div>
+						<div className="flex items-center gap-1.5 text-sm">
+							<CheckCircle2 className="h-4 w-4 text-[var(--admin-success)]" />
+							<span className="font-medium text-[var(--admin-success)]">
+								{importedCount}
+							</span>
+							<span className="text-muted-foreground">imported</span>
+						</div>
+						{importableBadges.length > 0 && (
+							<div className="flex items-center gap-1.5 text-sm">
+								<Download className="h-4 w-4 text-muted-foreground" />
+								<span className="font-medium">{importableBadges.length}</span>
+								<span className="text-muted-foreground">available</span>
+							</div>
+						)}
+					</div>
+				)}

-        {/* Search bar */}
-        <div className="flex gap-2">
-          <div className="relative flex-1 max-w-md">
-            <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
-            <Input
-              ref={searchRef}
-              placeholder="Search badges by name...  /"
-              value={searchTerm}
-              onChange={(e) => setSearchTerm(e.target.value)}
-              onKeyDown={(e) => {
-                if (e.key === "Enter") doSearch();
-                if (e.key === "Escape") {
-                  setSearchTerm("");
-                  searchRef.current?.blur();
-                }
-              }}
-              className="pl-9 pr-8"
-            />
-            {searchTerm && (
-              <button
-                type="button"
-                onClick={() => {
-                  setSearchTerm("");
-                  setActiveSearch("");
-                  fetchBadges("", 0, allHotels);
-                }}
-                className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
-              >
-                <X className="h-3.5 w-3.5" />
-              </button>
-            )}
-          </div>
-          <Button onClick={doSearch} size="sm" disabled={loading}>
-            {loading ? <Loader2 className="w-4 h-4 animate-spin" /> : <Search className="w-4 h-4" />}
-          </Button>
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <Button
-                variant={allHotels ? "default" : "outline"}
-                size="sm"
-                onClick={() => setAllHotels((v) => !v)}
-              >
-                <Globe className="w-4 h-4 mr-1" />
-                {allHotels ? "All" : "IT"}
-              </Button>
-            </TooltipTrigger>
-            <TooltipContent>
-              <p>
-                {allHotels
-                  ? "Showing all hotels — click for Italian only"
-                  : "Showing Italian only — click for all hotels"}
-              </p>
-            </TooltipContent>
-          </Tooltip>
-        </div>
+				{/* Search bar */}
+				<div className="flex gap-2">
+					<div className="relative flex-1 max-w-md">
+						<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+						<Input
+							ref={searchRef}
+							placeholder="Search badges by name...  /"
+							value={searchTerm}
+							onChange={(e) => setSearchTerm(e.target.value)}
+							onKeyDown={(e) => {
+								if (e.key === "Enter") doSearch();
+								if (e.key === "Escape") {
+									setSearchTerm("");
+									searchRef.current?.blur();
+								}
+							}}
+							className="pl-9 pr-8"
+						/>
+						{searchTerm && (
+							<button
+								type="button"
+								onClick={() => {
+									setSearchTerm("");
+									setActiveSearch("");
+									fetchBadges("", 0, allHotels);
+								}}
+								className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
+							>
+								<X className="h-3.5 w-3.5" />
+							</button>
+						)}
+					</div>
+					<Button onClick={doSearch} size="sm" disabled={loading}>
+						{loading ? (
+							<Loader2 className="w-4 h-4 animate-spin" />
+						) : (
+							<Search className="w-4 h-4" />
+						)}
+					</Button>
+					<Tooltip>
+						<TooltipTrigger asChild>
+							<Button
+								variant={allHotels ? "default" : "outline"}
+								size="sm"
+								onClick={() => setAllHotels((v) => !v)}
+							>
+								<Globe className="w-4 h-4 mr-1" />
+								{allHotels ? "All" : "IT"}
+							</Button>
+						</TooltipTrigger>
+						<TooltipContent>
+							<p>
+								{allHotels
+									? "Showing all hotels — click for Italian only"
+									: "Showing Italian only — click for all hotels"}
+							</p>
+						</TooltipContent>
+					</Tooltip>
+				</div>

-        {/* Bulk actions */}
-        {importableBadges.length > 0 && (
-          <div className="flex items-center gap-2 flex-wrap">
-            <Button
-              variant="outline"
-              size="sm"
-              onClick={toggleSelectAll}
-              className="text-xs h-8"
-              disabled={batchImporting}
-            >
-              {selected.size === importableBadges.length
-                ? "Deselect All"
-                : `Select All (${importableBadges.length})`}
-            </Button>
-            {selected.size > 0 && (
-              <Button size="sm" className="h-8" onClick={doBatchImport} disabled={batchImporting}>
-                {batchImporting ? (
-                  <Loader2 className="w-4 h-4 animate-spin mr-1" />
-                ) : (
-                  <Download className="w-4 h-4 mr-1" />
-                )}
-                Import {selected.size} selected
-              </Button>
-            )}
-          </div>
-        )}
+				{/* Bulk actions */}
+				{importableBadges.length > 0 && (
+					<div className="flex items-center gap-2 flex-wrap">
+						<Button
+							variant="outline"
+							size="sm"
+							onClick={toggleSelectAll}
+							className="text-xs h-8"
+							disabled={batchImporting}
+						>
+							{selected.size === importableBadges.length
+								? "Deselect All"
+								: `Select All (${importableBadges.length})`}
+						</Button>
+						{selected.size > 0 && (
+							<Button
+								size="sm"
+								className="h-8"
+								onClick={doBatchImport}
+								disabled={batchImporting}
+							>
+								{batchImporting ? (
+									<Loader2 className="w-4 h-4 animate-spin mr-1" />
+								) : (
+									<Download className="w-4 h-4 mr-1" />
+								)}
+								Import {selected.size} selected
+							</Button>
+						)}
+					</div>
+				)}

-        {/* Error */}
-        {error && (
-          <div className="rounded-lg border px-4 py-3 text-sm bg-destructive/10 border-destructive/20 text-destructive flex items-center gap-2">
-            <AlertCircle className="w-4 h-4 shrink-0" />
-            {error}
-          </div>
-        )}
+				{/* Error */}
+				{error && (
+					<div className="rounded-lg border px-4 py-3 text-sm bg-destructive/10 border-destructive/20 text-destructive flex items-center gap-2">
+						<AlertCircle className="w-4 h-4 shrink-0" />
+						{error}
+					</div>
+				)}

-        {/* Loading skeleton */}
-        {loading && badges.length === 0 && (
-          <div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-3">
-            {Array.from({ length: 18 }).map((_, i) => (
-              // biome-ignore lint/suspicious/noArrayIndexKey: static skeleton placeholders
-              <div key={i} className="rounded-lg border bg-card p-3 animate-pulse">
-                <div className="h-12 w-12 bg-muted rounded mx-auto mb-2" />
-                <div className="h-4 bg-muted rounded w-3/4 mx-auto mb-1" />
-                <div className="h-3 bg-muted rounded w-1/2 mx-auto mb-2" />
-                <div className="h-7 bg-muted rounded" />
-              </div>
-            ))}
-          </div>
-        )}
+				{/* Loading skeleton */}
+				{loading && badges.length === 0 && (
+					<div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-3">
+						{Array.from({ length: 18 }).map((_, i) => (
+							// biome-ignore lint/suspicious/noArrayIndexKey: static skeleton placeholders
+							<div
+								key={i}
+								className="rounded-lg border bg-card p-3 animate-pulse"
+							>
+								<div className="h-12 w-12 bg-muted rounded mx-auto mb-2" />
+								<div className="h-4 bg-muted rounded w-3/4 mx-auto mb-1" />
+								<div className="h-3 bg-muted rounded w-1/2 mx-auto mb-2" />
+								<div className="h-7 bg-muted rounded" />
+							</div>
+						))}
+					</div>
+				)}

-        {/* Empty state */}
-        {!loading && badges.length === 0 && !error && (
-          <div className="text-center py-12 text-muted-foreground">
-            <BadgeCheck className="w-12 h-12 mx-auto mb-3 opacity-50" />
-            <p className="text-sm">No badges found{activeSearch ? ` for "${activeSearch}"` : ""}</p>
-            {!activeSearch && <p className="text-xs mt-1">Try searching by badge name or code</p>}
-          </div>
-        )}
+				{/* Empty state */}
+				{!loading && badges.length === 0 && !error && (
+					<div className="text-center py-12 text-muted-foreground">
+						<BadgeCheck className="w-12 h-12 mx-auto mb-3 opacity-50" />
+						<p className="text-sm">
+							No badges found{activeSearch ? ` for "${activeSearch}"` : ""}
+						</p>
+						{!activeSearch && (
+							<p className="text-xs mt-1">
+								Try searching by badge name or code
+							</p>
+						)}
+					</div>
+				)}

-        {/* Badge grid */}
-        {badges.length > 0 && (
-          <div
-            className={cn("grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-3", loading && "opacity-50")}
-          >
-            {badges.map((badge) => {
-              const isSelected = selected.has(badge.code);
-              return (
-                <div
-                  key={badge.code}
-                  className={cn(
-                    "rounded-lg border overflow-hidden bg-card group relative hover:border-border transition-all",
-                    badge.alreadyImported && "ring-1 ring-[var(--admin-success)]/30",
-                    isSelected && "ring-2 ring-primary border-primary",
-                  )}
-                >
-                  {/* Checkbox for non-imported */}
-                  {!badge.alreadyImported && (
-                    <button
-                      type="button"
-                      onClick={() => toggleSelect(badge.code)}
-                      className={cn(
-                        "absolute top-1.5 left-1.5 z-10 w-5 h-5 rounded border-2 flex items-center justify-center transition-colors",
-                        isSelected
-                          ? "bg-primary border-primary text-primary-foreground"
-                          : "bg-background/80 border-muted-foreground/30 hover:border-muted-foreground",
-                      )}
-                    >
-                      {isSelected && <Check className="w-3 h-3" />}
-                    </button>
-                  )}
+				{/* Badge grid */}
+				{badges.length > 0 && (
+					<div
+						className={cn(
+							"grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-3",
+							loading && "opacity-50",
+						)}
+					>
+						{badges.map((badge) => {
+							const isSelected = selected.has(badge.code);
+							return (
+								<div
+									key={badge.code}
+									className={cn(
+										"rounded-lg border overflow-hidden bg-card group relative hover:border-border transition-all",
+										badge.alreadyImported &&
+											"ring-1 ring-[var(--admin-success)]/30",
+										isSelected && "ring-2 ring-primary border-primary",
+									)}
+								>
+									{/* Checkbox for non-imported */}
+									{!badge.alreadyImported && (
+										<button
+											type="button"
+											onClick={() => toggleSelect(badge.code)}
+											className={cn(
+												"absolute top-1.5 left-1.5 z-10 w-5 h-5 rounded border-2 flex items-center justify-center transition-colors",
+												isSelected
+													? "bg-primary border-primary text-primary-foreground"
+													: "bg-background/80 border-muted-foreground/30 hover:border-muted-foreground",
+											)}
+										>
+											{isSelected && <Check className="w-3 h-3" />}
+										</button>
+									)}

-                  {/* Badge image area */}
-                  <div className="flex items-center justify-center h-20 bg-accent/20">
-                    <img
-                      src={badge.url_habbo}
-                      alt={badge.code}
-                      className="image-pixelated drop-shadow-sm"
-                      style={{ maxHeight: 48, maxWidth: 48 }}
-                      onError={(e) => {
-                        const img = e.target as HTMLImageElement;
-                        if (!img.dataset.fallback) {
-                          img.dataset.fallback = "1";
-                          img.src = badge.url_habboassets;
-                        } else {
-                          img.style.opacity = "0.3";
-                        }
-                      }}
-                    />
-                  </div>
+									{/* Badge image area */}
+									<div className="flex items-center justify-center h-20 bg-accent/20">
+										<img
+											src={badge.url_habbo}
+											alt={badge.code}
+											className="image-pixelated drop-shadow-sm"
+											style={{ maxHeight: 48, maxWidth: 48 }}
+											onError={(e) => {
+												const img = e.target as HTMLImageElement;
+												if (!img.dataset.fallback) {
+													img.dataset.fallback = "1";
+													img.src = badge.url_habboassets;
+												} else {
+													img.style.opacity = "0.3";
+												}
+											}}
+										/>
+									</div>

-                  {/* Info */}
-                  <div className="px-2.5 py-2 border-t space-y-1">
-                    <div className="text-xs font-bold truncate">{badge.code}</div>
-                    {badge.name && (
-                      <Tooltip>
-                        <TooltipTrigger asChild>
-                          <div className="text-[11px] text-muted-foreground truncate cursor-default">
-                            {badge.name}
-                          </div>
-                        </TooltipTrigger>
-                        <TooltipContent side="bottom" className="max-w-64">
-                          <p className="font-medium">{badge.name}</p>
-                          {badge.description && (
-                            <p className="text-muted-foreground text-xs mt-1">{badge.description}</p>
-                          )}
-                        </TooltipContent>
-                      </Tooltip>
-                    )}
-                    {allHotels && badge.hotel && (
-                      <Badge variant="outline" className="text-[9px] px-1 h-4">
-                        {badge.hotel.toUpperCase()}
-                      </Badge>
-                    )}
+									{/* Info */}
+									<div className="px-2.5 py-2 border-t space-y-1">
+										<div className="text-xs font-bold truncate">
+											{badge.code}
+										</div>
+										{badge.name && (
+											<Tooltip>
+												<TooltipTrigger asChild>
+													<div className="text-[11px] text-muted-foreground truncate cursor-default">
+														{badge.name}
+													</div>
+												</TooltipTrigger>
+												<TooltipContent side="bottom" className="max-w-64">
+													<p className="font-medium">{badge.name}</p>
+													{badge.description && (
+														<p className="text-muted-foreground text-xs mt-1">
+															{badge.description}
+														</p>
+													)}
+												</TooltipContent>
+											</Tooltip>
+										)}
+										{allHotels && badge.hotel && (
+											<Badge variant="outline" className="text-[9px] px-1 h-4">
+												{badge.hotel.toUpperCase()}
+											</Badge>
+										)}

-                    {/* Action */}
-                    <div className="pt-1">
-                      {badge.alreadyImported ? (
-                        <div className="flex items-center gap-1">
-                          <Badge className="text-[10px] px-1.5 py-0 bg-[var(--admin-success-subtle)] text-[var(--admin-success)] border-0 gap-0.5 flex-1 justify-center">
-                            <Check className="w-2.5 h-2.5" />
-                            Imported
-                          </Badge>
-                          <Button
-                            variant="ghost"
-                            size="sm"
-                            className="h-5 w-5 p-0 shrink-0"
-                            title="Edit badge name/description"
-                            onClick={() => setEditingCode(badge.code)}
-                          >
-                            <Pencil className="w-3 h-3" />
-                          </Button>
-                        </div>
-                      ) : (
-                        <Button
-                          size="sm"
-                          variant="outline"
-                          className="w-full text-xs h-7"
-                          onClick={() => doImport(badge)}
-                          disabled={importingCode === badge.code || batchImporting}
-                        >
-                          {importingCode === badge.code ? (
-                            <Loader2 className="w-3 h-3 animate-spin mr-1" />
-                          ) : (
-                            <Download className="w-3 h-3 mr-1" />
-                          )}
-                          Import
-                        </Button>
-                      )}
-                    </div>
-                  </div>
-                </div>
-              );
-            })}
-          </div>
-        )}
+										{/* Action */}
+										<div className="pt-1">
+											{badge.alreadyImported ? (
+												<div className="flex items-center gap-1">
+													<Badge className="text-[10px] px-1.5 py-0 bg-[var(--admin-success-subtle)] text-[var(--admin-success)] border-0 gap-0.5 flex-1 justify-center">
+														<Check className="w-2.5 h-2.5" />
+														Imported
+													</Badge>
+													<Button
+														variant="ghost"
+														size="sm"
+														className="h-5 w-5 p-0 shrink-0"
+														title="Edit badge name/description"
+														onClick={() => setEditingCode(badge.code)}
+													>
+														<Pencil className="w-3 h-3" />
+													</Button>
+												</div>
+											) : (
+												<Button
+													size="sm"
+													variant="outline"
+													className="w-full text-xs h-7"
+													onClick={() => doImport(badge)}
+													disabled={
+														importingCode === badge.code || batchImporting
+													}
+												>
+													{importingCode === badge.code ? (
+														<Loader2 className="w-3 h-3 animate-spin mr-1" />
+													) : (
+														<Download className="w-3 h-3 mr-1" />
+													)}
+													Import
+												</Button>
+											)}
+										</div>
+									</div>
+								</div>
+							);
+						})}
+					</div>
+				)}

-        {/* Pagination */}
-        {(offset > 0 || hasMore) && (
-          <div className="flex items-center justify-between">
-            <span className="text-sm text-muted-foreground">Page {currentPage}</span>
-            <div className="flex gap-1">
-              <Button
-                variant="outline"
-                size="sm"
-                disabled={offset <= 0 || loading}
-                onClick={() => goPage("prev")}
-              >
-                &larr; Prev
-              </Button>
-              <Button
-                variant="outline"
-                size="sm"
-                disabled={!hasMore || loading}
-                onClick={() => goPage("next")}
-              >
-                Next &rarr;
-              </Button>
-            </div>
-          </div>
-        )}
+				{/* Pagination */}
+				{(offset > 0 || hasMore) && (
+					<div className="flex items-center justify-between">
+						<span className="text-sm text-muted-foreground">
+							Page {currentPage}
+						</span>
+						<div className="flex gap-1">
+							<Button
+								variant="outline"
+								size="sm"
+								disabled={offset <= 0 || loading}
+								onClick={() => goPage("prev")}
+							>
+								&larr; Prev
+							</Button>
+							<Button
+								variant="outline"
+								size="sm"
+								disabled={!hasMore || loading}
+								onClick={() => goPage("next")}
+							>
+								Next &rarr;
+							</Button>
+						</div>
+					</div>
+				)}

-        {/* Badge Editor Dialog */}
-        <BadgeEditorDialog
-          code={editingCode ?? ""}
-          open={!!editingCode}
-          onOpenChange={(open) => {
-            if (!open) setEditingCode(null);
-          }}
-        />
-      </div>
-    </TooltipProvider>
-  );
+				{/* Badge Editor Dialog */}
+				<BadgeEditorDialog
+					code={editingCode ?? ""}
+					open={!!editingCode}
+					onOpenChange={(open) => {
+						if (!open) setEditingCode(null);
+					}}
+				/>
+			</div>
+		</TooltipProvider>
+	);
 }
@@ -1,21 +1,21 @@
 import { Skeleton } from "@/components/ui/skeleton";

 export default function ImportBadgesLoading() {
-  return (
-    <div className="space-y-6">
-      <div>
-        <Skeleton className="h-9 w-48" />
-        <Skeleton className="h-5 w-72 mt-2" />
-      </div>
-      <div className="rounded-lg border bg-card p-6 space-y-4">
-        {Array.from({ length: 6 }).map((_, i) => (
-          <div key={i} className="space-y-2">
-            <Skeleton className="h-4 w-24" />
-            <Skeleton className="h-10 w-full" />
-          </div>
-        ))}
-        <Skeleton className="h-10 w-24 mt-4" />
-      </div>
-    </div>
-  );
+	return (
+		<div className="space-y-6">
+			<div>
+				<Skeleton className="h-9 w-48" />
+				<Skeleton className="h-5 w-72 mt-2" />
+			</div>
+			<div className="rounded-lg border bg-card p-6 space-y-4">
+				{Array.from({ length: 6 }).map((_, i) => (
+					<div key={i} className="space-y-2">
+						<Skeleton className="h-4 w-24" />
+						<Skeleton className="h-10 w-full" />
+					</div>
+				))}
+				<Skeleton className="h-10 w-24 mt-4" />
+			</div>
+		</div>
+	);
 }
@@ -2,11 +2,13 @@ import { redirect } from "next/navigation";
 import { canAccess, getAdminContext, PERMS } from "@/lib/permissions";
 import { ImportBadgesClient } from "./import-badges-client";

-export default async function ImportBadgesPage(_props: { params: Promise<{ locale: string }> }) {
-  const { session, permissions } = await getAdminContext();
-  if (!canAccess(permissions, PERMS.ASSETS_IMPORT, session.user.rank)) {
-    redirect("/admin");
-  }
+export default async function ImportBadgesPage(_props: {
+	params: Promise<{ locale: string }>;
+}) {
+	const { session, permissions } = await getAdminContext();
+	if (!canAccess(permissions, PERMS.ASSETS_IMPORT, session.user.rank)) {
+		redirect("/admin");
+	}

-  return <ImportBadgesClient />;
+	return <ImportBadgesClient />;
 }
@@ -2,10 +2,12 @@ import { redirect } from "next/navigation";
 import { canAccess, getAdminContext, PERMS } from "@/lib/permissions";
 import { ImportCloneClient } from "./import-clone-client";

-export default async function ImportClonePage(_props: { params: Promise<{ locale: string }> }) {
-  const { session, permissions } = await getAdminContext();
-  if (!canAccess(permissions, PERMS.ASSETS_IMPORT, session.user.rank)) {
-    redirect("/admin");
-  }
-  return <ImportCloneClient />;
+export default async function ImportClonePage(_props: {
+	params: Promise<{ locale: string }>;
+}) {
+	const { session, permissions } = await getAdminContext();
+	if (!canAccess(permissions, PERMS.ASSETS_IMPORT, session.user.rank)) {
+		redirect("/admin");
+	}
+	return <ImportCloneClient />;
 }
@@ -1,13 +1,16 @@
 export default function Loading() {
-  return (
-    <div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-3">
-      {Array.from({ length: 18 }).map((_, i) => (
-        <div key={`figure-skeleton-${i}`} className="rounded-lg border bg-card p-3 animate-pulse">
-          <div className="h-12 w-12 bg-muted rounded mx-auto mb-2" />
-          <div className="h-4 bg-muted rounded w-3/4 mx-auto mb-1" />
-          <div className="h-7 bg-muted rounded" />
-        </div>
-      ))}
-    </div>
-  );
+	return (
+		<div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-3">
+			{Array.from({ length: 18 }).map((_, i) => (
+				<div
+					key={`figure-skeleton-${i}`}
+					className="rounded-lg border bg-card p-3 animate-pulse"
+				>
+					<div className="h-12 w-12 bg-muted rounded mx-auto mb-2" />
+					<div className="h-4 bg-muted rounded w-3/4 mx-auto mb-1" />
+					<div className="h-7 bg-muted rounded" />
+				</div>
+			))}
+		</div>
+	);
 }
@@ -2,10 +2,12 @@ import { redirect } from "next/navigation";
 import { canAccess, getAdminContext, PERMS } from "@/lib/permissions";
 import { ImportClothingClient } from "./import-clothing-client";

-export default async function ImportClothingPage(_props: { params: Promise<{ locale: string }> }) {
-  const { session, permissions } = await getAdminContext();
-  if (!canAccess(permissions, PERMS.ASSETS_IMPORT, session.user.rank)) {
-    redirect("/admin");
-  }
-  return <ImportClothingClient />;
+export default async function ImportClothingPage(_props: {
+	params: Promise<{ locale: string }>;
+}) {
+	const { session, permissions } = await getAdminContext();
+	if (!canAccess(permissions, PERMS.ASSETS_IMPORT, session.user.rank)) {
+		redirect("/admin");
+	}
+	return <ImportClothingClient />;
 }
@@ -2,16 +2,16 @@
 "use client";

 import {
-  AlertCircle,
-  Check,
-  Download,
-  Loader2,
-  Music,
-  Package,
-  Search,
-  Sparkles,
-  Trash2,
-  X,
+	AlertCircle,
+	Check,
+	Download,
+	Loader2,
+	Music,
+	Package,
+	Search,
+	Sparkles,
+	Trash2,
+	X,
 } from "lucide-react";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { toast } from "sonner";
@@ -21,362 +21,408 @@ import { Input } from "@/components/ui/input";
 import { cn } from "@/lib/utils";

 interface EffectItem {
-  id: string;
-  lib: string;
-  type: string;
-  revision: number;
-  present: boolean;
-  nitroExists: boolean;
+	id: string;
+	lib: string;
+	type: string;
+	revision: number;
+	present: boolean;
+	nitroExists: boolean;
 }

 type Filter = "all" | "fx" | "dance";

 export function ImportEffectsClient() {
-  const [searchTerm, setSearchTerm] = useState("");
-  const [effects, setEffects] = useState<EffectItem[]>([]);
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState("");
-  const [filter, setFilter] = useState<Filter>("all");
-  const [selected, setSelected] = useState<Set<string>>(new Set());
-  const [batchProgress, setBatchProgress] = useState<{ done: number; total: number } | null>(null);
-  const [busyLib, setBusyLib] = useState<string | null>(null);
+	const [searchTerm, setSearchTerm] = useState("");
+	const [effects, setEffects] = useState<EffectItem[]>([]);
+	const [loading, setLoading] = useState(false);
+	const [error, setError] = useState("");
+	const [filter, setFilter] = useState<Filter>("all");
+	const [selected, setSelected] = useState<Set<string>>(new Set());
+	const [batchProgress, setBatchProgress] = useState<{
+		done: number;
+		total: number;
+	} | null>(null);
+	const [busyLib, setBusyLib] = useState<string | null>(null);

-  const fetchEffects = useCallback(async (search: string) => {
-    setLoading(true);
-    setError("");
-    try {
-      const params = new URLSearchParams();
-      if (search) params.set("search", search);
-      const res = await fetch(`/api/admin/import/effects?${params}`);
-      const data = await res.json();
-      if (!res.ok) {
-        setError(data.error || "Failed to load");
-        return;
-      }
-      setEffects(data.effects || []);
-      setSelected(new Set());
-    } catch {
-      setError("Network error");
-    } finally {
-      setLoading(false);
-    }
-  }, []);
+	const fetchEffects = useCallback(async (search: string) => {
+		setLoading(true);
+		setError("");
+		try {
+			const params = new URLSearchParams();
+			if (search) params.set("search", search);
+			const res = await fetch(`/api/admin/import/effects?${params}`);
+			const data = await res.json();
+			if (!res.ok) {
+				setError(data.error || "Failed to load");
+				return;
+			}
+			setEffects(data.effects || []);
+			setSelected(new Set());
+		} catch {
+			setError("Network error");
+		} finally {
+			setLoading(false);
+		}
+	}, []);

-  useEffect(() => {
-    fetchEffects("");
-  }, [fetchEffects]);
+	useEffect(() => {
+		fetchEffects("");
+	}, [fetchEffects]);

-  const visible = useMemo(
-    () => effects.filter((e) => filter === "all" || e.type === filter),
-    [effects, filter],
-  );
-  const importable = useMemo(() => visible.filter((e) => !e.present || !e.nitroExists), [visible]);
-  const importedCount = useMemo(() => visible.filter((e) => e.present && e.nitroExists).length, [visible]);
+	const visible = useMemo(
+		() => effects.filter((e) => filter === "all" || e.type === filter),
+		[effects, filter],
+	);
+	const importable = useMemo(
+		() => visible.filter((e) => !e.present || !e.nitroExists),
+		[visible],
+	);
+	const importedCount = useMemo(
+		() => visible.filter((e) => e.present && e.nitroExists).length,
+		[visible],
+	);

-  function toggle(lib: string) {
-    setSelected((prev) => {
-      const n = new Set(prev);
-      if (n.has(lib)) n.delete(lib);
-      else n.add(lib);
-      return n;
-    });
-  }
+	function toggle(lib: string) {
+		setSelected((prev) => {
+			const n = new Set(prev);
+			if (n.has(lib)) n.delete(lib);
+			else n.add(lib);
+			return n;
+		});
+	}

-  function markDone(lib: string) {
-    setEffects((prev) => prev.map((e) => (e.lib === lib ? { ...e, present: true, nitroExists: true } : e)));
-  }
+	function markDone(lib: string) {
+		setEffects((prev) =>
+			prev.map((e) =>
+				e.lib === lib ? { ...e, present: true, nitroExists: true } : e,
+			),
+		);
+	}

-  async function importViaSse(items: EffectItem[]) {
-    setBatchProgress({ done: 0, total: items.length });
-    const res = await fetch("/api/admin/import/effects/batch", {
-      method: "POST",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({ items, concurrency: 3 }),
-    });
-    if (!res.body) {
-      toast.error("No response stream");
-      setBatchProgress(null);
-      return;
-    }
-    const reader = res.body.getReader();
-    const decoder = new TextDecoder();
-    let buf = "";
-    let done = 0;
-    let succeeded = 0;
-    let failed = 0;
-    while (true) {
-      const { value, done: streamDone } = await reader.read();
-      if (streamDone) break;
-      buf += decoder.decode(value, { stream: true });
-      const parts = buf.split("\n\n");
-      buf = parts.pop() ?? "";
-      for (const part of parts) {
-        if (!part.startsWith("data: ")) continue;
-        const evt = JSON.parse(part.slice(6));
-        if (evt.type === "item_progress" && evt.status === "done") {
-          done++;
-          succeeded++;
-          markDone(evt.classname);
-          setBatchProgress({ done, total: items.length });
-        } else if (evt.type === "item_progress" && evt.status === "failed") {
-          done++;
-          failed++;
-          setBatchProgress({ done, total: items.length });
-        } else if (evt.type === "batch_complete") {
-          succeeded = evt.succeeded;
-          failed = evt.failed;
-        }
-      }
-    }
-    setBatchProgress(null);
-    setSelected(new Set());
-    if (succeeded > 0) toast.success(`${succeeded} effect(s) imported`);
-    if (failed > 0) toast.error(`${failed} failed`);
-  }
+	async function importViaSse(items: EffectItem[]) {
+		setBatchProgress({ done: 0, total: items.length });
+		const res = await fetch("/api/admin/import/effects/batch", {
+			method: "POST",
+			headers: { "Content-Type": "application/json" },
+			body: JSON.stringify({ items, concurrency: 3 }),
+		});
+		if (!res.body) {
+			toast.error("No response stream");
+			setBatchProgress(null);
+			return;
+		}
+		const reader = res.body.getReader();
+		const decoder = new TextDecoder();
+		let buf = "";
+		let done = 0;
+		let succeeded = 0;
+		let failed = 0;
+		while (true) {
+			const { value, done: streamDone } = await reader.read();
+			if (streamDone) break;
+			buf += decoder.decode(value, { stream: true });
+			const parts = buf.split("\n\n");
+			buf = parts.pop() ?? "";
+			for (const part of parts) {
+				if (!part.startsWith("data: ")) continue;
+				const evt = JSON.parse(part.slice(6));
+				if (evt.type === "item_progress" && evt.status === "done") {
+					done++;
+					succeeded++;
+					markDone(evt.classname);
+					setBatchProgress({ done, total: items.length });
+				} else if (evt.type === "item_progress" && evt.status === "failed") {
+					done++;
+					failed++;
+					setBatchProgress({ done, total: items.length });
+				} else if (evt.type === "batch_complete") {
+					succeeded = evt.succeeded;
+					failed = evt.failed;
+				}
+			}
+		}
+		setBatchProgress(null);
+		setSelected(new Set());
+		if (succeeded > 0) toast.success(`${succeeded} effect(s) imported`);
+		if (failed > 0) toast.error(`${failed} failed`);
+	}

-  async function importOne(e: EffectItem) {
-    setBusyLib(e.lib);
-    try {
-      await importViaSse([e]);
-    } finally {
-      setBusyLib(null);
-    }
-  }
+	async function importOne(e: EffectItem) {
+		setBusyLib(e.lib);
+		try {
+			await importViaSse([e]);
+		} finally {
+			setBusyLib(null);
+		}
+	}

-  async function importSelected() {
-    const items = visible.filter((e) => selected.has(e.lib) && (!e.present || !e.nitroExists));
-    if (items.length === 0) return;
-    await importViaSse(items);
-  }
+	async function importSelected() {
+		const items = visible.filter(
+			(e) => selected.has(e.lib) && (!e.present || !e.nitroExists),
+		);
+		if (items.length === 0) return;
+		await importViaSse(items);
+	}

-  async function remove(e: EffectItem) {
-    setBusyLib(e.lib);
-    try {
-      const res = await fetch(`/api/admin/import/effects?lib=${encodeURIComponent(e.lib)}`, {
-        method: "DELETE",
-      });
-      const data = await res.json();
-      if (res.ok) {
-        toast.success(`${e.lib} removed`);
-        setEffects((prev) =>
-          prev.map((x) => (x.lib === e.lib ? { ...x, present: false, nitroExists: false } : x)),
-        );
-      } else {
-        toast.error(data.error || "Delete failed");
-      }
-    } finally {
-      setBusyLib(null);
-    }
-  }
+	async function remove(e: EffectItem) {
+		setBusyLib(e.lib);
+		try {
+			const res = await fetch(
+				`/api/admin/import/effects?lib=${encodeURIComponent(e.lib)}`,
+				{
+					method: "DELETE",
+				},
+			);
+			const data = await res.json();
+			if (res.ok) {
+				toast.success(`${e.lib} removed`);
+				setEffects((prev) =>
+					prev.map((x) =>
+						x.lib === e.lib ? { ...x, present: false, nitroExists: false } : x,
+					),
+				);
+			} else {
+				toast.error(data.error || "Delete failed");
+			}
+		} finally {
+			setBusyLib(null);
+		}
+	}

-  return (
-    <div className="space-y-4">
-      {/* Stats */}
-      {effects.length > 0 && (
-        <div className="flex items-center gap-3 flex-wrap">
-          <div className="flex items-center gap-1.5 text-sm">
-            <Package className="h-4 w-4 text-muted-foreground" />
-            <span className="font-medium">{visible.length}</span>
-            <span className="text-muted-foreground">effects</span>
-          </div>
-          <div className="flex items-center gap-1.5 text-sm">
-            <Check className="h-4 w-4 text-[var(--admin-success)]" />
-            <span className="font-medium text-[var(--admin-success)]">{importedCount}</span>
-            <span className="text-muted-foreground">imported</span>
-          </div>
-          <div className="flex items-center gap-1.5 text-sm">
-            <Download className="h-4 w-4 text-muted-foreground" />
-            <span className="font-medium">{importable.length}</span>
-            <span className="text-muted-foreground">available</span>
-          </div>
-        </div>
-      )}
+	return (
+		<div className="space-y-4">
+			{/* Stats */}
+			{effects.length > 0 && (
+				<div className="flex items-center gap-3 flex-wrap">
+					<div className="flex items-center gap-1.5 text-sm">
+						<Package className="h-4 w-4 text-muted-foreground" />
+						<span className="font-medium">{visible.length}</span>
+						<span className="text-muted-foreground">effects</span>
+					</div>
+					<div className="flex items-center gap-1.5 text-sm">
+						<Check className="h-4 w-4 text-[var(--admin-success)]" />
+						<span className="font-medium text-[var(--admin-success)]">
+							{importedCount}
+						</span>
+						<span className="text-muted-foreground">imported</span>
+					</div>
+					<div className="flex items-center gap-1.5 text-sm">
+						<Download className="h-4 w-4 text-muted-foreground" />
+						<span className="font-medium">{importable.length}</span>
+						<span className="text-muted-foreground">available</span>
+					</div>
+				</div>
+			)}

-      {/* Search + filter */}
-      <div className="flex gap-2 flex-wrap">
-        <div className="relative flex-1 max-w-md">
-          <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
-          <Input
-            placeholder="Search effects by lib / id..."
-            value={searchTerm}
-            onChange={(e) => setSearchTerm(e.target.value)}
-            onKeyDown={(e) => {
-              if (e.key === "Enter") fetchEffects(searchTerm);
-              if (e.key === "Escape") {
-                setSearchTerm("");
-                fetchEffects("");
-              }
-            }}
-            className="pl-9 pr-8"
-          />
-          {searchTerm && (
-            <button
-              type="button"
-              onClick={() => {
-                setSearchTerm("");
-                fetchEffects("");
-              }}
-              className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
-            >
-              <X className="h-3.5 w-3.5" />
-            </button>
-          )}
-        </div>
-        <Button onClick={() => fetchEffects(searchTerm)} size="sm" disabled={loading}>
-          {loading ? <Loader2 className="w-4 h-4 animate-spin" /> : <Search className="w-4 h-4" />}
-        </Button>
-        {(["all", "fx", "dance"] as Filter[]).map((f) => (
-          <Button
-            key={f}
-            size="sm"
-            variant={filter === f ? "default" : "outline"}
-            onClick={() => setFilter(f)}
-          >
-            {f.toUpperCase()}
-          </Button>
-        ))}
-      </div>
+			{/* Search + filter */}
+			<div className="flex gap-2 flex-wrap">
+				<div className="relative flex-1 max-w-md">
+					<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+					<Input
+						placeholder="Search effects by lib / id..."
+						value={searchTerm}
+						onChange={(e) => setSearchTerm(e.target.value)}
+						onKeyDown={(e) => {
+							if (e.key === "Enter") fetchEffects(searchTerm);
+							if (e.key === "Escape") {
+								setSearchTerm("");
+								fetchEffects("");
+							}
+						}}
+						className="pl-9 pr-8"
+					/>
+					{searchTerm && (
+						<button
+							type="button"
+							onClick={() => {
+								setSearchTerm("");
+								fetchEffects("");
+							}}
+							className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
+						>
+							<X className="h-3.5 w-3.5" />
+						</button>
+					)}
+				</div>
+				<Button
+					onClick={() => fetchEffects(searchTerm)}
+					size="sm"
+					disabled={loading}
+				>
+					{loading ? (
+						<Loader2 className="w-4 h-4 animate-spin" />
+					) : (
+						<Search className="w-4 h-4" />
+					)}
+				</Button>
+				{(["all", "fx", "dance"] as Filter[]).map((f) => (
+					<Button
+						key={f}
+						size="sm"
+						variant={filter === f ? "default" : "outline"}
+						onClick={() => setFilter(f)}
+					>
+						{f.toUpperCase()}
+					</Button>
+				))}
+			</div>

-      {/* Bulk actions */}
-      {importable.length > 0 && (
-        <div className="flex items-center gap-2 flex-wrap">
-          <Button
-            variant="outline"
-            size="sm"
-            className="text-xs h-8"
-            disabled={!!batchProgress}
-            onClick={() =>
-              setSelected((prev) =>
-                prev.size === importable.length ? new Set() : new Set(importable.map((e) => e.lib)),
-              )
-            }
-          >
-            {selected.size === importable.length ? "Deselect All" : `Select All (${importable.length})`}
-          </Button>
-          {selected.size > 0 && (
-            <Button size="sm" className="h-8" onClick={importSelected} disabled={!!batchProgress}>
-              {batchProgress ? (
-                <Loader2 className="w-4 h-4 animate-spin mr-1" />
-              ) : (
-                <Download className="w-4 h-4 mr-1" />
-              )}
-              Import {selected.size} selected
-            </Button>
-          )}
-          {batchProgress && (
-            <span className="text-xs text-muted-foreground">
-              {batchProgress.done}/{batchProgress.total}
-            </span>
-          )}
-        </div>
-      )}
+			{/* Bulk actions */}
+			{importable.length > 0 && (
+				<div className="flex items-center gap-2 flex-wrap">
+					<Button
+						variant="outline"
+						size="sm"
+						className="text-xs h-8"
+						disabled={!!batchProgress}
+						onClick={() =>
+							setSelected((prev) =>
+								prev.size === importable.length
+									? new Set()
+									: new Set(importable.map((e) => e.lib)),
+							)
+						}
+					>
+						{selected.size === importable.length
+							? "Deselect All"
+							: `Select All (${importable.length})`}
+					</Button>
+					{selected.size > 0 && (
+						<Button
+							size="sm"
+							className="h-8"
+							onClick={importSelected}
+							disabled={!!batchProgress}
+						>
+							{batchProgress ? (
+								<Loader2 className="w-4 h-4 animate-spin mr-1" />
+							) : (
+								<Download className="w-4 h-4 mr-1" />
+							)}
+							Import {selected.size} selected
+						</Button>
+					)}
+					{batchProgress && (
+						<span className="text-xs text-muted-foreground">
+							{batchProgress.done}/{batchProgress.total}
+						</span>
+					)}
+				</div>
+			)}

-      {/* Error */}
-      {error && (
-        <div className="rounded-lg border px-4 py-3 text-sm bg-destructive/10 border-destructive/20 text-destructive flex items-center gap-2">
-          <AlertCircle className="w-4 h-4 shrink-0" />
-          {error}
-        </div>
-      )}
+			{/* Error */}
+			{error && (
+				<div className="rounded-lg border px-4 py-3 text-sm bg-destructive/10 border-destructive/20 text-destructive flex items-center gap-2">
+					<AlertCircle className="w-4 h-4 shrink-0" />
+					{error}
+				</div>
+			)}

-      {/* Empty */}
-      {!loading && visible.length === 0 && !error && (
-        <div className="text-center py-12 text-muted-foreground">
-          <Sparkles className="w-12 h-12 mx-auto mb-3 opacity-50" />
-          <p className="text-sm">No effects found</p>
-        </div>
-      )}
+			{/* Empty */}
+			{!loading && visible.length === 0 && !error && (
+				<div className="text-center py-12 text-muted-foreground">
+					<Sparkles className="w-12 h-12 mx-auto mb-3 opacity-50" />
+					<p className="text-sm">No effects found</p>
+				</div>
+			)}

-      {/* Grid */}
-      {visible.length > 0 && (
-        <div className={cn("grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-3", loading && "opacity-50")}>
-          {visible.map((e) => {
-            const imported = e.present && e.nitroExists;
-            const isSelected = selected.has(e.lib);
-            return (
-              <div
-                key={e.lib}
-                className={cn(
-                  "rounded-lg border overflow-hidden bg-card relative hover:border-border transition-all",
-                  imported && "ring-1 ring-[var(--admin-success)]/30",
-                  isSelected && "ring-2 ring-primary border-primary",
-                )}
-              >
-                {!imported && (
-                  <button
-                    type="button"
-                    onClick={() => toggle(e.lib)}
-                    className={cn(
-                      "absolute top-1.5 left-1.5 z-10 w-5 h-5 rounded border-2 flex items-center justify-center transition-colors",
-                      isSelected
-                        ? "bg-primary border-primary text-primary-foreground"
-                        : "bg-background/80 border-muted-foreground/30 hover:border-muted-foreground",
-                    )}
-                  >
-                    {isSelected && <Check className="w-3 h-3" />}
-                  </button>
-                )}
-                <div
-                  className={cn(
-                    "flex flex-col items-center justify-center h-20 gap-1",
-                    e.type === "dance"
-                      ? "bg-gradient-to-br from-[var(--admin-warning)]/25 to-[var(--admin-warning)]/10"
-                      : "bg-gradient-to-br from-[var(--admin-accent)]/25 to-[var(--admin-accent)]/10",
-                  )}
-                >
-                  {e.type === "dance" ? (
-                    <Music className="w-7 h-7 text-[var(--admin-warning)]/80" />
-                  ) : (
-                    <Sparkles className="w-7 h-7 text-[var(--admin-accent-text)]" />
-                  )}
-                  <span className="text-[10px] font-semibold uppercase tracking-wide text-muted-foreground">
-                    {e.type}
-                  </span>
-                </div>
-                <div className="px-2.5 py-2 border-t space-y-1">
-                  <div className="text-xs font-bold truncate">{e.lib}</div>
-                  <div className="text-[10px] text-muted-foreground truncate">id {e.id}</div>
-                  <div className="pt-1">
-                    {imported ? (
-                      <div className="flex items-center gap-1">
-                        <Badge className="text-[10px] px-1.5 py-0 bg-[var(--admin-success-subtle)] text-[var(--admin-success)] border-0 gap-0.5 flex-1 justify-center">
-                          <Check className="w-2.5 h-2.5" />
-                          Imported
-                        </Badge>
-                        <Button
-                          variant="ghost"
-                          size="sm"
-                          className="h-5 w-5 p-0 shrink-0"
-                          title="Remove effect"
-                          disabled={busyLib === e.lib || !!batchProgress}
-                          onClick={() => remove(e)}
-                        >
-                          <Trash2 className="w-3 h-3" />
-                        </Button>
-                      </div>
-                    ) : (
-                      <Button
-                        size="sm"
-                        variant="outline"
-                        className="w-full text-xs h-7"
-                        disabled={busyLib === e.lib || !!batchProgress}
-                        onClick={() => importOne(e)}
-                      >
-                        {busyLib === e.lib ? (
-                          <Loader2 className="w-3 h-3 animate-spin mr-1" />
-                        ) : (
-                          <Download className="w-3 h-3 mr-1" />
-                        )}
-                        Import
-                      </Button>
-                    )}
-                  </div>
-                </div>
-              </div>
-            );
-          })}
-        </div>
-      )}
-    </div>
-  );
+			{/* Grid */}
+			{visible.length > 0 && (
+				<div
+					className={cn(
+						"grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-3",
+						loading && "opacity-50",
+					)}
+				>
+					{visible.map((e) => {
+						const imported = e.present && e.nitroExists;
+						const isSelected = selected.has(e.lib);
+						return (
+							<div
+								key={e.lib}
+								className={cn(
+									"rounded-lg border overflow-hidden bg-card relative hover:border-border transition-all",
+									imported && "ring-1 ring-[var(--admin-success)]/30",
+									isSelected && "ring-2 ring-primary border-primary",
+								)}
+							>
+								{!imported && (
+									<button
+										type="button"
+										onClick={() => toggle(e.lib)}
+										className={cn(
+											"absolute top-1.5 left-1.5 z-10 w-5 h-5 rounded border-2 flex items-center justify-center transition-colors",
+											isSelected
+												? "bg-primary border-primary text-primary-foreground"
+												: "bg-background/80 border-muted-foreground/30 hover:border-muted-foreground",
+										)}
+									>
+										{isSelected && <Check className="w-3 h-3" />}
+									</button>
+								)}
+								<div
+									className={cn(
+										"flex flex-col items-center justify-center h-20 gap-1",
+										e.type === "dance"
+											? "bg-gradient-to-br from-[var(--admin-warning)]/25 to-[var(--admin-warning)]/10"
+											: "bg-gradient-to-br from-[var(--admin-accent)]/25 to-[var(--admin-accent)]/10",
+									)}
+								>
+									{e.type === "dance" ? (
+										<Music className="w-7 h-7 text-[var(--admin-warning)]/80" />
+									) : (
+										<Sparkles className="w-7 h-7 text-[var(--admin-accent-text)]" />
+									)}
+									<span className="text-[10px] font-semibold uppercase tracking-wide text-muted-foreground">
+										{e.type}
+									</span>
+								</div>
+								<div className="px-2.5 py-2 border-t space-y-1">
+									<div className="text-xs font-bold truncate">{e.lib}</div>
+									<div className="text-[10px] text-muted-foreground truncate">
+										id {e.id}
+									</div>
+									<div className="pt-1">
+										{imported ? (
+											<div className="flex items-center gap-1">
+												<Badge className="text-[10px] px-1.5 py-0 bg-[var(--admin-success-subtle)] text-[var(--admin-success)] border-0 gap-0.5 flex-1 justify-center">
+													<Check className="w-2.5 h-2.5" />
+													Imported
+												</Badge>
+												<Button
+													variant="ghost"
+													size="sm"
+													className="h-5 w-5 p-0 shrink-0"
+													title="Remove effect"
+													disabled={busyLib === e.lib || !!batchProgress}
+													onClick={() => remove(e)}
+												>
+													<Trash2 className="w-3 h-3" />
+												</Button>
+											</div>
+										) : (
+											<Button
+												size="sm"
+												variant="outline"
+												className="w-full text-xs h-7"
+												disabled={busyLib === e.lib || !!batchProgress}
+												onClick={() => importOne(e)}
+											>
+												{busyLib === e.lib ? (
+													<Loader2 className="w-3 h-3 animate-spin mr-1" />
+												) : (
+													<Download className="w-3 h-3 mr-1" />
+												)}
+												Import
+											</Button>
+										)}
+									</div>
+								</div>
+							</div>
+						);
+					})}
+				</div>
+			)}
+		</div>
+	);
 }
@@ -1,14 +1,17 @@
 // src/app/[locale]/admin/import/effects/loading.tsx
 export default function Loading() {
-  return (
-    <div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-3">
-      {Array.from({ length: 18 }).map((_, i) => (
-        <div key={`effect-skeleton-${i}`} className="rounded-lg border bg-card p-3 animate-pulse">
-          <div className="h-12 w-12 bg-muted rounded mx-auto mb-2" />
-          <div className="h-4 bg-muted rounded w-3/4 mx-auto mb-1" />
-          <div className="h-7 bg-muted rounded" />
-        </div>
-      ))}
-    </div>
-  );
+	return (
+		<div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-3">
+			{Array.from({ length: 18 }).map((_, i) => (
+				<div
+					key={`effect-skeleton-${i}`}
+					className="rounded-lg border bg-card p-3 animate-pulse"
+				>
+					<div className="h-12 w-12 bg-muted rounded mx-auto mb-2" />
+					<div className="h-4 bg-muted rounded w-3/4 mx-auto mb-1" />
+					<div className="h-7 bg-muted rounded" />
+				</div>
+			))}
+		</div>
+	);
 }
@@ -3,10 +3,12 @@ import { redirect } from "next/navigation";
 import { canAccess, getAdminContext, PERMS } from "@/lib/permissions";
 import { ImportEffectsClient } from "./import-effects-client";

-export default async function ImportEffectsPage(_props: { params: Promise<{ locale: string }> }) {
-  const { session, permissions } = await getAdminContext();
-  if (!canAccess(permissions, PERMS.ASSETS_IMPORT, session.user.rank)) {
-    redirect("/admin");
-  }
-  return <ImportEffectsClient />;
+export default async function ImportEffectsPage(_props: {
+	params: Promise<{ locale: string }>;
+}) {
+	const { session, permissions } = await getAdminContext();
+	if (!canAccess(permissions, PERMS.ASSETS_IMPORT, session.user.rank)) {
+		redirect("/admin");
+	}
+	return <ImportEffectsClient />;
 }
@@ -1,21 +1,21 @@
 import { Skeleton } from "@/components/ui/skeleton";

 export default function ImportFurniLoading() {
-  return (
-    <div className="space-y-6">
-      <div>
-        <Skeleton className="h-9 w-48" />
-        <Skeleton className="h-5 w-72 mt-2" />
-      </div>
-      <div className="rounded-lg border bg-card p-6 space-y-4">
-        {Array.from({ length: 6 }).map((_, i) => (
-          <div key={i} className="space-y-2">
-            <Skeleton className="h-4 w-24" />
-            <Skeleton className="h-10 w-full" />
-          </div>
-        ))}
-        <Skeleton className="h-10 w-24 mt-4" />
-      </div>
-    </div>
-  );
+	return (
+		<div className="space-y-6">
+			<div>
+				<Skeleton className="h-9 w-48" />
+				<Skeleton className="h-5 w-72 mt-2" />
+			</div>
+			<div className="rounded-lg border bg-card p-6 space-y-4">
+				{Array.from({ length: 6 }).map((_, i) => (
+					<div key={i} className="space-y-2">
+						<Skeleton className="h-4 w-24" />
+						<Skeleton className="h-10 w-full" />
+					</div>
+				))}
+				<Skeleton className="h-10 w-24 mt-4" />
+			</div>
+		</div>
+	);
 }
@@ -2,11 +2,13 @@ import { redirect } from "next/navigation";
 import { canAccess, getAdminContext, PERMS } from "@/lib/permissions";
 import { ImportFurniClient } from "./import-furni-client";

-export default async function ImportFurniPage(_props: { params: Promise<{ locale: string }> }) {
-  const { session, permissions } = await getAdminContext();
-  if (!canAccess(permissions, PERMS.ASSETS_IMPORT, session.user.rank)) {
-    redirect("/admin");
-  }
+export default async function ImportFurniPage(_props: {
+	params: Promise<{ locale: string }>;
+}) {
+	const { session, permissions } = await getAdminContext();
+	if (!canAccess(permissions, PERMS.ASSETS_IMPORT, session.user.rank)) {
+		redirect("/admin");
+	}

-  return <ImportFurniClient />;
+	return <ImportFurniClient />;
 }
@@ -1,67 +1,97 @@
-import { getTranslations } from "next-intl/server";
-import { BadgeCheck, Cat, Copy, Dumbbell, Puzzle, Shirt, Wrench } from "lucide-react";
+import {
+	BadgeCheck,
+	Cat,
+	Copy,
+	Dumbbell,
+	Puzzle,
+	Shirt,
+	Wrench,
+} from "lucide-react";
 import Link from "next/link";
 import { redirect } from "next/navigation";
+import { getTranslations } from "next-intl/server";
 import { canAccess, getAdminContext, PERMS } from "@/lib/permissions";

 export default async function ImportPage() {
-  const t = await getTranslations("pages.admin.import");
-  const { session, permissions } = await getAdminContext();
-  if (!canAccess(permissions, PERMS.ASSETS_IMPORT, session.user.rank)) {
-    redirect("/admin");
-  }
+	const t = await getTranslations("pages.admin.import");
+	const { session, permissions } = await getAdminContext();
+	if (!canAccess(permissions, PERMS.ASSETS_IMPORT, session.user.rank)) {
+		redirect("/admin");
+	}

-  const SECTIONS = [
-    {
-      href: "/admin/import/badges",
-      label: t("badges"),
-      icon: BadgeCheck,
-      description: t("badgesDescription"),
-    },
-    { href: "/admin/import/furni", label: t("furni"), icon: Puzzle, description: t("furniDescription") },
-    {
-      href: "/admin/import/clothing",
-      label: t("clothing"),
-      icon: Shirt,
-      description: t("clothingDescription"),
-    },
-    {
-      href: "/admin/import/effects",
-      label: t("effects"),
-      icon: Dumbbell,
-      description: t("effectsDescription"),
-    },
-    { href: "/admin/import/pets", label: t("pets"), icon: Cat, description: t("petsDescription") },
-    { href: "/admin/import/clone", label: t("clone"), icon: Copy, description: t("cloneDescription") },
-    { href: "/admin/import/repair", label: t("repair"), icon: Wrench, description: t("repairDescription") },
-  ] as const;
+	const SECTIONS = [
+		{
+			href: "/admin/import/badges",
+			label: t("badges"),
+			icon: BadgeCheck,
+			description: t("badgesDescription"),
+		},
+		{
+			href: "/admin/import/furni",
+			label: t("furni"),
+			icon: Puzzle,
+			description: t("furniDescription"),
+		},
+		{
+			href: "/admin/import/clothing",
+			label: t("clothing"),
+			icon: Shirt,
+			description: t("clothingDescription"),
+		},
+		{
+			href: "/admin/import/effects",
+			label: t("effects"),
+			icon: Dumbbell,
+			description: t("effectsDescription"),
+		},
+		{
+			href: "/admin/import/pets",
+			label: t("pets"),
+			icon: Cat,
+			description: t("petsDescription"),
+		},
+		{
+			href: "/admin/import/clone",
+			label: t("clone"),
+			icon: Copy,
+			description: t("cloneDescription"),
+		},
+		{
+			href: "/admin/import/repair",
+			label: t("repair"),
+			icon: Wrench,
+			description: t("repairDescription"),
+		},
+	] as const;

-  return (
-    <div className="space-y-6">
-      <div>
-        <h1 className="text-2xl font-bold">{t("title")}</h1>
-        <p className="text-muted-foreground">{t("subtitle")}</p>
-      </div>
+	return (
+		<div className="space-y-6">
+			<div>
+				<h1 className="text-2xl font-bold">{t("title")}</h1>
+				<p className="text-muted-foreground">{t("subtitle")}</p>
+			</div>

-      <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
-        {SECTIONS.map(({ href, label, icon: Icon, description }) => (
-          <Link
-            key={href}
-            href={href}
-            className="group rounded-lg border bg-card p-4 transition-colors hover:border-primary hover:bg-accent"
-          >
-            <div className="flex items-center gap-3">
-              <div className="rounded-md bg-primary/10 p-2 text-primary">
-                <Icon className="h-5 w-5" />
-              </div>
-              <div>
-                <h2 className="font-semibold group-hover:text-primary">{label}</h2>
-                <p className="text-xs text-muted-foreground">{description}</p>
-              </div>
-            </div>
-          </Link>
-        ))}
-      </div>
-    </div>
-  );
+			<div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+				{SECTIONS.map(({ href, label, icon: Icon, description }) => (
+					<Link
+						key={href}
+						href={href}
+						className="group rounded-lg border bg-card p-4 transition-colors hover:border-primary hover:bg-accent"
+					>
+						<div className="flex items-center gap-3">
+							<div className="rounded-md bg-primary/10 p-2 text-primary">
+								<Icon className="h-5 w-5" />
+							</div>
+							<div>
+								<h2 className="font-semibold group-hover:text-primary">
+									{label}
+								</h2>
+								<p className="text-xs text-muted-foreground">{description}</p>
+							</div>
+						</div>
+					</Link>
+				))}
+			</div>
+		</div>
+	);
 }
@@ -1,6 +1,16 @@
 "use client";

-import { AlertCircle, Check, Download, Loader2, Package, PawPrint, Search, Trash2, X } from "lucide-react";
+import {
+	AlertCircle,
+	Check,
+	Download,
+	Loader2,
+	Package,
+	PawPrint,
+	Search,
+	Trash2,
+	X,
+} from "lucide-react";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { toast } from "sonner";
 import { Badge } from "@/components/ui/badge";
@@ -9,331 +19,368 @@ import { Input } from "@/components/ui/input";
 import { cn } from "@/lib/utils";

 interface PetItem {
-  lib: string;
-  nitroExists: boolean;
+	lib: string;
+	nitroExists: boolean;
 }

 /** Real pet preview cropped from its .nitro; falls back to the paw glyph. */
 function PetIcon({ lib }: { lib: string }) {
-  const [failed, setFailed] = useState(false);
-  if (failed) return <PawPrint className="w-8 h-8 text-muted-foreground/60" />;
-  return (
-    // biome-ignore lint/performance/noImgElement: tiny dynamic sprite, not a Next asset
-    <img
-      src={`/api/admin/import/pets/icon?lib=${encodeURIComponent(lib)}&v=6`}
-      alt={lib}
-      className="image-pixelated"
-      style={{ maxHeight: 56, maxWidth: 56 }}
-      onError={() => setFailed(true)}
-    />
-  );
+	const [failed, setFailed] = useState(false);
+	if (failed) return <PawPrint className="w-8 h-8 text-muted-foreground/60" />;
+	return (
+		// biome-ignore lint/performance/noImgElement: tiny dynamic sprite, not a Next asset
+		<img
+			src={`/api/admin/import/pets/icon?lib=${encodeURIComponent(lib)}&v=6`}
+			alt={lib}
+			className="image-pixelated"
+			style={{ maxHeight: 56, maxWidth: 56 }}
+			onError={() => setFailed(true)}
+		/>
+	);
 }

 export function ImportPetsClient() {
-  const [searchTerm, setSearchTerm] = useState("");
-  const [pets, setPets] = useState<PetItem[]>([]);
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState("");
-  const [selected, setSelected] = useState<Set<string>>(new Set());
-  const [batchProgress, setBatchProgress] = useState<{ done: number; total: number } | null>(null);
-  const [busyLib, setBusyLib] = useState<string | null>(null);
+	const [searchTerm, setSearchTerm] = useState("");
+	const [pets, setPets] = useState<PetItem[]>([]);
+	const [loading, setLoading] = useState(false);
+	const [error, setError] = useState("");
+	const [selected, setSelected] = useState<Set<string>>(new Set());
+	const [batchProgress, setBatchProgress] = useState<{
+		done: number;
+		total: number;
+	} | null>(null);
+	const [busyLib, setBusyLib] = useState<string | null>(null);

-  const fetchPets = useCallback(async (search: string) => {
-    setLoading(true);
-    setError("");
-    try {
-      const params = new URLSearchParams();
-      if (search) params.set("search", search);
-      const res = await fetch(`/api/admin/import/pets?${params}`);
-      const data = await res.json();
-      if (!res.ok) {
-        setError(data.error || "Failed to load");
-        return;
-      }
-      setPets(data.pets || []);
-      setSelected(new Set());
-    } catch {
-      setError("Network error");
-    } finally {
-      setLoading(false);
-    }
-  }, []);
+	const fetchPets = useCallback(async (search: string) => {
+		setLoading(true);
+		setError("");
+		try {
+			const params = new URLSearchParams();
+			if (search) params.set("search", search);
+			const res = await fetch(`/api/admin/import/pets?${params}`);
+			const data = await res.json();
+			if (!res.ok) {
+				setError(data.error || "Failed to load");
+				return;
+			}
+			setPets(data.pets || []);
+			setSelected(new Set());
+		} catch {
+			setError("Network error");
+		} finally {
+			setLoading(false);
+		}
+	}, []);

-  useEffect(() => {
-    fetchPets("");
-  }, [fetchPets]);
+	useEffect(() => {
+		fetchPets("");
+	}, [fetchPets]);

-  const importable = useMemo(() => pets.filter((p) => !p.nitroExists), [pets]);
-  const importedCount = useMemo(() => pets.filter((p) => p.nitroExists).length, [pets]);
+	const importable = useMemo(() => pets.filter((p) => !p.nitroExists), [pets]);
+	const importedCount = useMemo(
+		() => pets.filter((p) => p.nitroExists).length,
+		[pets],
+	);

-  function toggle(lib: string) {
-    setSelected((prev) => {
-      const n = new Set(prev);
-      if (n.has(lib)) n.delete(lib);
-      else n.add(lib);
-      return n;
-    });
-  }
+	function toggle(lib: string) {
+		setSelected((prev) => {
+			const n = new Set(prev);
+			if (n.has(lib)) n.delete(lib);
+			else n.add(lib);
+			return n;
+		});
+	}

-  function markDone(lib: string) {
-    setPets((prev) => prev.map((p) => (p.lib === lib ? { ...p, nitroExists: true } : p)));
-  }
+	function markDone(lib: string) {
+		setPets((prev) =>
+			prev.map((p) => (p.lib === lib ? { ...p, nitroExists: true } : p)),
+		);
+	}

-  async function importViaSse(items: PetItem[]) {
-    setBatchProgress({ done: 0, total: items.length });
-    const res = await fetch("/api/admin/import/pets/batch", {
-      method: "POST",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({ items, concurrency: 3 }),
-    });
-    if (!res.body) {
-      toast.error("No response stream");
-      setBatchProgress(null);
-      return;
-    }
-    const reader = res.body.getReader();
-    const decoder = new TextDecoder();
-    let buf = "";
-    let done = 0;
-    let succeeded = 0;
-    let failed = 0;
-    while (true) {
-      const { value, done: streamDone } = await reader.read();
-      if (streamDone) break;
-      buf += decoder.decode(value, { stream: true });
-      const parts = buf.split("\n\n");
-      buf = parts.pop() ?? "";
-      for (const part of parts) {
-        if (!part.startsWith("data: ")) continue;
-        const evt = JSON.parse(part.slice(6));
-        if (evt.type === "item_progress" && evt.status === "done") {
-          done++;
-          markDone(evt.classname);
-          setBatchProgress({ done, total: items.length });
-        } else if (evt.type === "item_progress" && evt.status === "failed") {
-          done++;
-          setBatchProgress({ done, total: items.length });
-        } else if (evt.type === "batch_complete") {
-          succeeded = evt.succeeded;
-          failed = evt.failed;
-        }
-      }
-    }
-    setBatchProgress(null);
-    setSelected(new Set());
-    if (succeeded > 0) toast.success(`${succeeded} pet(s) imported`);
-    if (failed > 0) toast.error(`${failed} failed`);
-  }
+	async function importViaSse(items: PetItem[]) {
+		setBatchProgress({ done: 0, total: items.length });
+		const res = await fetch("/api/admin/import/pets/batch", {
+			method: "POST",
+			headers: { "Content-Type": "application/json" },
+			body: JSON.stringify({ items, concurrency: 3 }),
+		});
+		if (!res.body) {
+			toast.error("No response stream");
+			setBatchProgress(null);
+			return;
+		}
+		const reader = res.body.getReader();
+		const decoder = new TextDecoder();
+		let buf = "";
+		let done = 0;
+		let succeeded = 0;
+		let failed = 0;
+		while (true) {
+			const { value, done: streamDone } = await reader.read();
+			if (streamDone) break;
+			buf += decoder.decode(value, { stream: true });
+			const parts = buf.split("\n\n");
+			buf = parts.pop() ?? "";
+			for (const part of parts) {
+				if (!part.startsWith("data: ")) continue;
+				const evt = JSON.parse(part.slice(6));
+				if (evt.type === "item_progress" && evt.status === "done") {
+					done++;
+					markDone(evt.classname);
+					setBatchProgress({ done, total: items.length });
+				} else if (evt.type === "item_progress" && evt.status === "failed") {
+					done++;
+					setBatchProgress({ done, total: items.length });
+				} else if (evt.type === "batch_complete") {
+					succeeded = evt.succeeded;
+					failed = evt.failed;
+				}
+			}
+		}
+		setBatchProgress(null);
+		setSelected(new Set());
+		if (succeeded > 0) toast.success(`${succeeded} pet(s) imported`);
+		if (failed > 0) toast.error(`${failed} failed`);
+	}

-  async function importOne(p: PetItem) {
-    setBusyLib(p.lib);
-    try {
-      await importViaSse([p]);
-    } finally {
-      setBusyLib(null);
-    }
-  }
+	async function importOne(p: PetItem) {
+		setBusyLib(p.lib);
+		try {
+			await importViaSse([p]);
+		} finally {
+			setBusyLib(null);
+		}
+	}

-  async function importSelected() {
-    const items = pets.filter((p) => selected.has(p.lib) && !p.nitroExists);
-    if (items.length === 0) return;
-    await importViaSse(items);
-  }
+	async function importSelected() {
+		const items = pets.filter((p) => selected.has(p.lib) && !p.nitroExists);
+		if (items.length === 0) return;
+		await importViaSse(items);
+	}

-  async function remove(p: PetItem) {
-    setBusyLib(p.lib);
-    try {
-      const res = await fetch(`/api/admin/import/pets?lib=${encodeURIComponent(p.lib)}`, {
-        method: "DELETE",
-      });
-      const data = await res.json();
-      if (res.ok) {
-        toast.success(`${p.lib} removed`);
-        setPets((prev) => prev.map((x) => (x.lib === p.lib ? { ...x, nitroExists: false } : x)));
-      } else {
-        toast.error(data.error || "Delete failed");
-      }
-    } finally {
-      setBusyLib(null);
-    }
-  }
+	async function remove(p: PetItem) {
+		setBusyLib(p.lib);
+		try {
+			const res = await fetch(
+				`/api/admin/import/pets?lib=${encodeURIComponent(p.lib)}`,
+				{
+					method: "DELETE",
+				},
+			);
+			const data = await res.json();
+			if (res.ok) {
+				toast.success(`${p.lib} removed`);
+				setPets((prev) =>
+					prev.map((x) => (x.lib === p.lib ? { ...x, nitroExists: false } : x)),
+				);
+			} else {
+				toast.error(data.error || "Delete failed");
+			}
+		} finally {
+			setBusyLib(null);
+		}
+	}

-  return (
-    <div className="space-y-4">
-      {pets.length > 0 && (
-        <div className="flex items-center gap-3 flex-wrap">
-          <div className="flex items-center gap-1.5 text-sm">
-            <Package className="h-4 w-4 text-muted-foreground" />
-            <span className="font-medium">{pets.length}</span>
-            <span className="text-muted-foreground">pets</span>
-          </div>
-          <div className="flex items-center gap-1.5 text-sm">
-            <Check className="h-4 w-4 text-[var(--admin-success)]" />
-            <span className="font-medium text-[var(--admin-success)]">{importedCount}</span>
-            <span className="text-muted-foreground">imported</span>
-          </div>
-          <div className="flex items-center gap-1.5 text-sm">
-            <Download className="h-4 w-4 text-muted-foreground" />
-            <span className="font-medium">{importable.length}</span>
-            <span className="text-muted-foreground">missing</span>
-          </div>
-        </div>
-      )}
+	return (
+		<div className="space-y-4">
+			{pets.length > 0 && (
+				<div className="flex items-center gap-3 flex-wrap">
+					<div className="flex items-center gap-1.5 text-sm">
+						<Package className="h-4 w-4 text-muted-foreground" />
+						<span className="font-medium">{pets.length}</span>
+						<span className="text-muted-foreground">pets</span>
+					</div>
+					<div className="flex items-center gap-1.5 text-sm">
+						<Check className="h-4 w-4 text-[var(--admin-success)]" />
+						<span className="font-medium text-[var(--admin-success)]">
+							{importedCount}
+						</span>
+						<span className="text-muted-foreground">imported</span>
+					</div>
+					<div className="flex items-center gap-1.5 text-sm">
+						<Download className="h-4 w-4 text-muted-foreground" />
+						<span className="font-medium">{importable.length}</span>
+						<span className="text-muted-foreground">missing</span>
+					</div>
+				</div>
+			)}

-      <div className="flex gap-2 flex-wrap">
-        <div className="relative flex-1 max-w-md">
-          <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
-          <Input
-            placeholder="Search pets..."
-            value={searchTerm}
-            onChange={(e) => setSearchTerm(e.target.value)}
-            onKeyDown={(e) => {
-              if (e.key === "Enter") fetchPets(searchTerm);
-              if (e.key === "Escape") {
-                setSearchTerm("");
-                fetchPets("");
-              }
-            }}
-            className="pl-9 pr-8"
-          />
-          {searchTerm && (
-            <button
-              type="button"
-              onClick={() => {
-                setSearchTerm("");
-                fetchPets("");
-              }}
-              className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
-            >
-              <X className="h-3.5 w-3.5" />
-            </button>
-          )}
-        </div>
-        <Button onClick={() => fetchPets(searchTerm)} size="sm" disabled={loading}>
-          {loading ? <Loader2 className="w-4 h-4 animate-spin" /> : <Search className="w-4 h-4" />}
-        </Button>
-      </div>
+			<div className="flex gap-2 flex-wrap">
+				<div className="relative flex-1 max-w-md">
+					<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+					<Input
+						placeholder="Search pets..."
+						value={searchTerm}
+						onChange={(e) => setSearchTerm(e.target.value)}
+						onKeyDown={(e) => {
+							if (e.key === "Enter") fetchPets(searchTerm);
+							if (e.key === "Escape") {
+								setSearchTerm("");
+								fetchPets("");
+							}
+						}}
+						className="pl-9 pr-8"
+					/>
+					{searchTerm && (
+						<button
+							type="button"
+							onClick={() => {
+								setSearchTerm("");
+								fetchPets("");
+							}}
+							className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
+						>
+							<X className="h-3.5 w-3.5" />
+						</button>
+					)}
+				</div>
+				<Button
+					onClick={() => fetchPets(searchTerm)}
+					size="sm"
+					disabled={loading}
+				>
+					{loading ? (
+						<Loader2 className="w-4 h-4 animate-spin" />
+					) : (
+						<Search className="w-4 h-4" />
+					)}
+				</Button>
+			</div>

-      {importable.length > 0 && (
-        <div className="flex items-center gap-2 flex-wrap">
-          <Button
-            variant="outline"
-            size="sm"
-            className="text-xs h-8"
-            disabled={!!batchProgress}
-            onClick={() =>
-              setSelected((prev) =>
-                prev.size === importable.length ? new Set() : new Set(importable.map((p) => p.lib)),
-              )
-            }
-          >
-            {selected.size === importable.length ? "Deselect All" : `Select All (${importable.length})`}
-          </Button>
-          {selected.size > 0 && (
-            <Button size="sm" className="h-8" onClick={importSelected} disabled={!!batchProgress}>
-              {batchProgress ? (
-                <Loader2 className="w-4 h-4 animate-spin mr-1" />
-              ) : (
-                <Download className="w-4 h-4 mr-1" />
-              )}
-              Import {selected.size} selected
-            </Button>
-          )}
-          {batchProgress && (
-            <span className="text-xs text-muted-foreground">
-              {batchProgress.done}/{batchProgress.total}
-            </span>
-          )}
-        </div>
-      )}
+			{importable.length > 0 && (
+				<div className="flex items-center gap-2 flex-wrap">
+					<Button
+						variant="outline"
+						size="sm"
+						className="text-xs h-8"
+						disabled={!!batchProgress}
+						onClick={() =>
+							setSelected((prev) =>
+								prev.size === importable.length
+									? new Set()
+									: new Set(importable.map((p) => p.lib)),
+							)
+						}
+					>
+						{selected.size === importable.length
+							? "Deselect All"
+							: `Select All (${importable.length})`}
+					</Button>
+					{selected.size > 0 && (
+						<Button
+							size="sm"
+							className="h-8"
+							onClick={importSelected}
+							disabled={!!batchProgress}
+						>
+							{batchProgress ? (
+								<Loader2 className="w-4 h-4 animate-spin mr-1" />
+							) : (
+								<Download className="w-4 h-4 mr-1" />
+							)}
+							Import {selected.size} selected
+						</Button>
+					)}
+					{batchProgress && (
+						<span className="text-xs text-muted-foreground">
+							{batchProgress.done}/{batchProgress.total}
+						</span>
+					)}
+				</div>
+			)}

-      {error && (
-        <div className="rounded-lg border px-4 py-3 text-sm bg-destructive/10 border-destructive/20 text-destructive flex items-center gap-2">
-          <AlertCircle className="w-4 h-4 shrink-0" />
-          {error}
-        </div>
-      )}
+			{error && (
+				<div className="rounded-lg border px-4 py-3 text-sm bg-destructive/10 border-destructive/20 text-destructive flex items-center gap-2">
+					<AlertCircle className="w-4 h-4 shrink-0" />
+					{error}
+				</div>
+			)}

-      {!loading && pets.length === 0 && !error && (
-        <div className="text-center py-12 text-muted-foreground">
-          <PawPrint className="w-12 h-12 mx-auto mb-3 opacity-50" />
-          <p className="text-sm">No pets found</p>
-        </div>
-      )}
+			{!loading && pets.length === 0 && !error && (
+				<div className="text-center py-12 text-muted-foreground">
+					<PawPrint className="w-12 h-12 mx-auto mb-3 opacity-50" />
+					<p className="text-sm">No pets found</p>
+				</div>
+			)}

-      {pets.length > 0 && (
-        <div className={cn("grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-3", loading && "opacity-50")}>
-          {pets.map((p) => {
-            const isSelected = selected.has(p.lib);
-            return (
-              <div
-                key={p.lib}
-                className={cn(
-                  "rounded-lg border overflow-hidden bg-card relative hover:border-border transition-all",
-                  p.nitroExists && "ring-1 ring-[var(--admin-success)]/30",
-                  isSelected && "ring-2 ring-primary border-primary",
-                )}
-              >
-                {!p.nitroExists && (
-                  <button
-                    type="button"
-                    onClick={() => toggle(p.lib)}
-                    className={cn(
-                      "absolute top-1.5 left-1.5 z-10 w-5 h-5 rounded border-2 flex items-center justify-center transition-colors",
-                      isSelected
-                        ? "bg-primary border-primary text-primary-foreground"
-                        : "bg-background/80 border-muted-foreground/30 hover:border-muted-foreground",
-                    )}
-                  >
-                    {isSelected && <Check className="w-3 h-3" />}
-                  </button>
-                )}
-                <div className="flex items-center justify-center h-20 bg-accent/20">
-                  <PetIcon lib={p.lib} />
-                </div>
-                <div className="px-2.5 py-2 border-t space-y-1">
-                  <div className="text-xs font-bold truncate">{p.lib}</div>
-                  <div className="pt-1">
-                    {p.nitroExists ? (
-                      <div className="flex items-center gap-1">
-                        <Badge className="text-[10px] px-1.5 py-0 bg-[var(--admin-success-subtle)] text-[var(--admin-success)] border-0 gap-0.5 flex-1 justify-center">
-                          <Check className="w-2.5 h-2.5" />
-                          Imported
-                        </Badge>
-                        <Button
-                          variant="ghost"
-                          size="sm"
-                          className="h-5 w-5 p-0 shrink-0"
-                          title="Remove pet"
-                          disabled={busyLib === p.lib || !!batchProgress}
-                          onClick={() => remove(p)}
-                        >
-                          <Trash2 className="w-3 h-3" />
-                        </Button>
-                      </div>
-                    ) : (
-                      <Button
-                        size="sm"
-                        variant="outline"
-                        className="w-full text-xs h-7"
-                        disabled={busyLib === p.lib || !!batchProgress}
-                        onClick={() => importOne(p)}
-                      >
-                        {busyLib === p.lib ? (
-                          <Loader2 className="w-3 h-3 animate-spin mr-1" />
-                        ) : (
-                          <Download className="w-3 h-3 mr-1" />
-                        )}
-                        Import
-                      </Button>
-                    )}
-                  </div>
-                </div>
-              </div>
-            );
-          })}
-        </div>
-      )}
-    </div>
-  );
+			{pets.length > 0 && (
+				<div
+					className={cn(
+						"grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-3",
+						loading && "opacity-50",
+					)}
+				>
+					{pets.map((p) => {
+						const isSelected = selected.has(p.lib);
+						return (
+							<div
+								key={p.lib}
+								className={cn(
+									"rounded-lg border overflow-hidden bg-card relative hover:border-border transition-all",
+									p.nitroExists && "ring-1 ring-[var(--admin-success)]/30",
+									isSelected && "ring-2 ring-primary border-primary",
+								)}
+							>
+								{!p.nitroExists && (
+									<button
+										type="button"
+										onClick={() => toggle(p.lib)}
+										className={cn(
+											"absolute top-1.5 left-1.5 z-10 w-5 h-5 rounded border-2 flex items-center justify-center transition-colors",
+											isSelected
+												? "bg-primary border-primary text-primary-foreground"
+												: "bg-background/80 border-muted-foreground/30 hover:border-muted-foreground",
+										)}
+									>
+										{isSelected && <Check className="w-3 h-3" />}
+									</button>
+								)}
+								<div className="flex items-center justify-center h-20 bg-accent/20">
+									<PetIcon lib={p.lib} />
+								</div>
+								<div className="px-2.5 py-2 border-t space-y-1">
+									<div className="text-xs font-bold truncate">{p.lib}</div>
+									<div className="pt-1">
+										{p.nitroExists ? (
+											<div className="flex items-center gap-1">
+												<Badge className="text-[10px] px-1.5 py-0 bg-[var(--admin-success-subtle)] text-[var(--admin-success)] border-0 gap-0.5 flex-1 justify-center">
+													<Check className="w-2.5 h-2.5" />
+													Imported
+												</Badge>
+												<Button
+													variant="ghost"
+													size="sm"
+													className="h-5 w-5 p-0 shrink-0"
+													title="Remove pet"
+													disabled={busyLib === p.lib || !!batchProgress}
+													onClick={() => remove(p)}
+												>
+													<Trash2 className="w-3 h-3" />
+												</Button>
+											</div>
+										) : (
+											<Button
+												size="sm"
+												variant="outline"
+												className="w-full text-xs h-7"
+												disabled={busyLib === p.lib || !!batchProgress}
+												onClick={() => importOne(p)}
+											>
+												{busyLib === p.lib ? (
+													<Loader2 className="w-3 h-3 animate-spin mr-1" />
+												) : (
+													<Download className="w-3 h-3 mr-1" />
+												)}
+												Import
+											</Button>
+										)}
+									</div>
+								</div>
+							</div>
+						);
+					})}
+				</div>
+			)}
+		</div>
+	);
 }
@@ -1,13 +1,16 @@
 export default function Loading() {
-  return (
-    <div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-3">
-      {Array.from({ length: 18 }).map((_, i) => (
-        <div key={`pet-skeleton-${i}`} className="rounded-lg border bg-card p-3 animate-pulse">
-          <div className="h-12 w-12 bg-muted rounded mx-auto mb-2" />
-          <div className="h-4 bg-muted rounded w-3/4 mx-auto mb-1" />
-          <div className="h-7 bg-muted rounded" />
-        </div>
-      ))}
-    </div>
-  );
+	return (
+		<div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-3">
+			{Array.from({ length: 18 }).map((_, i) => (
+				<div
+					key={`pet-skeleton-${i}`}
+					className="rounded-lg border bg-card p-3 animate-pulse"
+				>
+					<div className="h-12 w-12 bg-muted rounded mx-auto mb-2" />
+					<div className="h-4 bg-muted rounded w-3/4 mx-auto mb-1" />
+					<div className="h-7 bg-muted rounded" />
+				</div>
+			))}
+		</div>
+	);
 }
@@ -2,10 +2,12 @@ import { redirect } from "next/navigation";
 import { canAccess, getAdminContext, PERMS } from "@/lib/permissions";
 import { ImportPetsClient } from "./import-pets-client";

-export default async function ImportPetsPage(_props: { params: Promise<{ locale: string }> }) {
-  const { session, permissions } = await getAdminContext();
-  if (!canAccess(permissions, PERMS.ASSETS_IMPORT, session.user.rank)) {
-    redirect("/admin");
-  }
-  return <ImportPetsClient />;
+export default async function ImportPetsPage(_props: {
+	params: Promise<{ locale: string }>;
+}) {
+	const { session, permissions } = await getAdminContext();
+	if (!canAccess(permissions, PERMS.ASSETS_IMPORT, session.user.rank)) {
+		redirect("/admin");
+	}
+	return <ImportPetsClient />;
 }
@@ -3,10 +3,10 @@ import { canAccess, getAdminContext, PERMS } from "@/lib/permissions";
 import { RepairClient } from "./repair-client";

 export default async function RepairImportedPage() {
-  const { session, permissions } = await getAdminContext();
-  if (!canAccess(permissions, PERMS.ASSETS_IMPORT, session.user.rank)) {
-    redirect("/admin");
-  }
+	const { session, permissions } = await getAdminContext();
+	if (!canAccess(permissions, PERMS.ASSETS_IMPORT, session.user.rank)) {
+		redirect("/admin");
+	}

-  return <RepairClient />;
+	return <RepairClient />;
 }