Improve Catalog Studio navigation and import workflow
This commit is contained in:
Simo committed
1 parent
bfdf4def0f
commit
bf126fd825
4 files changed
+687
-492
No files matched your search
+105
-24
@@ -3,6 +3,7 @@
|
||||
import {
|
||||
BadgeCheck,
|
||||
Cat,
|
||||
ChevronDown,
|
||||
ClipboardCheck,
|
||||
Copy,
|
||||
Dumbbell,
|
||||
@@ -15,30 +16,93 @@ import {
|
||||
Wrench,
|
||||
} from "lucide-react";
|
||||
import { usePathname } from "next/navigation";
|
||||
import { useState } from "react";
|
||||
import Link from "@/components/link";
|
||||
import {
|
||||
Popover,
|
||||
PopoverContent,
|
||||
PopoverTrigger,
|
||||
} from "@/components/ui/popover";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
const TABS: { href: string; label: string; icon: LucideIcon }[] = [
|
||||
{ href: "/admin/studio/furni", label: "Furni", icon: Puzzle },
|
||||
{ href: "/admin/studio/upload", label: "Upload", icon: Upload },
|
||||
type StudioLink = { href: string; label: string; icon: LucideIcon };
|
||||
const assets: StudioLink[] = [
|
||||
{ href: "/admin/studio/furni", label: "Furniture", icon: Puzzle },
|
||||
{ href: "/admin/studio/badges", label: "Badges", icon: BadgeCheck },
|
||||
{ href: "/admin/studio/clothing", label: "Clothing", icon: Shirt },
|
||||
{ href: "/admin/studio/effects", label: "Effects", icon: Dumbbell },
|
||||
{ href: "/admin/studio/pets", label: "Pets", icon: Cat },
|
||||
{ href: "/admin/studio/clone", label: "Clone", icon: Copy },
|
||||
{ href: "/admin/studio/sync", label: "Sync", icon: RefreshCw },
|
||||
];
|
||||
const imports: StudioLink[] = [
|
||||
{ href: "/admin/studio/upload", label: "Upload files", icon: Upload },
|
||||
{ href: "/admin/studio/clone", label: "Import from a source", icon: Copy },
|
||||
{ href: "/admin/studio/sync", label: "Sync & repository", icon: RefreshCw },
|
||||
];
|
||||
const maintenance: StudioLink[] = [
|
||||
{ href: "/admin/studio/audit", label: "Catalog audit", icon: ClipboardCheck },
|
||||
{
|
||||
href: "/admin/studio/repair-icons",
|
||||
label: "Repair Icons",
|
||||
label: "Repair icons",
|
||||
icon: ImageIcon,
|
||||
},
|
||||
{ href: "/admin/studio/audit", label: "Audit", icon: ClipboardCheck },
|
||||
{
|
||||
href: "/admin/studio/maintenance",
|
||||
label: "Catalogus onderhoud",
|
||||
label: "Catalog maintenance",
|
||||
icon: Wrench,
|
||||
},
|
||||
];
|
||||
const activePath = (path: string, href: string) =>
|
||||
path === href || path.startsWith(`${href}/`);
|
||||
|
||||
function StudioMenu({
|
||||
label,
|
||||
links,
|
||||
pathname,
|
||||
}: {
|
||||
label: string;
|
||||
links: StudioLink[];
|
||||
pathname: string;
|
||||
}) {
|
||||
const [open, setOpen] = useState(false);
|
||||
const active = links.find((link) => activePath(pathname, link.href));
|
||||
return (
|
||||
<Popover open={open} onOpenChange={setOpen}>
|
||||
<PopoverTrigger
|
||||
className={cn(
|
||||
"flex min-h-10 items-center gap-2 rounded-lg px-3 text-sm font-medium",
|
||||
active
|
||||
? "bg-[var(--admin-accent)]/10 text-[var(--admin-text)]"
|
||||
: "text-[var(--admin-text-muted)] hover:bg-[var(--admin-accent)]/10",
|
||||
)}
|
||||
>
|
||||
{label}
|
||||
<ChevronDown size={14} />
|
||||
</PopoverTrigger>
|
||||
<PopoverContent
|
||||
align="end"
|
||||
className="w-64 border-[var(--admin-border)] bg-[var(--admin-surface)] p-1.5 text-[var(--admin-text)]"
|
||||
>
|
||||
{links.map(({ href, label: title, icon: Icon }) => (
|
||||
<Link
|
||||
key={href}
|
||||
href={href}
|
||||
style={{
|
||||
color: activePath(pathname, href)
|
||||
? "var(--admin-text)"
|
||||
: "var(--admin-text-muted)",
|
||||
}}
|
||||
onClick={() => setOpen(false)}
|
||||
aria-current={activePath(pathname, href) ? "page" : undefined}
|
||||
className="flex min-h-11 items-center gap-3 rounded-md px-3 text-sm hover:bg-[var(--admin-accent)]/10 aria-[current=page]:bg-[var(--admin-accent)]/15"
|
||||
>
|
||||
<Icon size={16} />
|
||||
{title}
|
||||
</Link>
|
||||
))}
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
);
|
||||
}
|
||||
|
||||
export default function StudioLayout({
|
||||
children,
|
||||
@@ -47,31 +111,48 @@ export default function StudioLayout({
|
||||
}) {
|
||||
const pathname = usePathname() ?? "";
|
||||
return (
|
||||
<div
|
||||
className="flex h-[calc(100dvh-7rem)] min-h-[520px] flex-col overflow-hidden rounded-xl border border-[var(--admin-border)]"
|
||||
style={{ backgroundColor: "var(--admin-canvas)" }}
|
||||
>
|
||||
<div className="flex shrink-0 items-center gap-1 overflow-x-auto border-b border-[var(--admin-border)] bg-[var(--admin-surface)] px-2 py-1.5">
|
||||
{TABS.map(({ href, label, icon: Icon }) => {
|
||||
const active = pathname === href || pathname.startsWith(`${href}/`);
|
||||
return (
|
||||
<div className="flex h-[calc(100dvh-7rem)] min-h-[600px] min-w-0 flex-col overflow-hidden rounded-xl border border-[var(--admin-border)] bg-[var(--admin-canvas)] text-[var(--admin-text)]">
|
||||
<nav
|
||||
aria-label="Catalog Studio"
|
||||
className="flex shrink-0 flex-wrap items-center justify-between gap-1 border-b border-[var(--admin-border)] bg-[var(--admin-surface)] p-2"
|
||||
>
|
||||
<div className="flex flex-wrap gap-1">
|
||||
{assets.map(({ href, label, icon: Icon }) => (
|
||||
<Link
|
||||
key={href}
|
||||
href={href}
|
||||
style={{
|
||||
color: activePath(pathname, href)
|
||||
? "var(--admin-accent-foreground)"
|
||||
: "var(--admin-text-muted)",
|
||||
}}
|
||||
aria-current={activePath(pathname, href) ? "page" : undefined}
|
||||
className={cn(
|
||||
"flex shrink-0 items-center gap-1.5 rounded-md px-2.5 py-1.5 text-xs font-medium transition-colors",
|
||||
active
|
||||
"flex min-h-10 items-center gap-2 rounded-lg px-3 text-sm font-medium transition-colors",
|
||||
activePath(pathname, href)
|
||||
? "bg-[var(--admin-accent)] text-[var(--admin-accent-foreground)]"
|
||||
: "text-[var(--admin-text-muted)] hover:bg-[var(--admin-accent)]/10 hover:text-[var(--admin-text)]",
|
||||
: "text-[var(--admin-text-muted)] hover:bg-[var(--admin-accent)]/10",
|
||||
)}
|
||||
>
|
||||
<Icon size={13} />
|
||||
<Icon size={16} />
|
||||
{label}
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
<div className="min-h-0 flex-1 overflow-auto">{children}</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-1">
|
||||
<StudioMenu
|
||||
label="Import & sync"
|
||||
links={imports}
|
||||
pathname={pathname}
|
||||
/>
|
||||
<StudioMenu
|
||||
label="Maintenance"
|
||||
links={maintenance}
|
||||
pathname={pathname}
|
||||
/>
|
||||
</div>
|
||||
</nav>
|
||||
<div className="min-h-0 min-w-0 flex-1 overflow-auto">{children}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,44 +1,19 @@
|
||||
"use client";
|
||||
|
||||
import { Ban, Check, Loader2, ShieldCheck, X } from "lucide-react";
|
||||
import { memo, useEffect, useMemo, useRef, useState } from "react";
|
||||
|
||||
import { Ban, Check, Circle, Loader2, RefreshCw, X } from "lucide-react";
|
||||
import { memo } from "react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { cn } from "@/lib/utils";
|
||||
import type { BatchItemStatus, VerificationSummary } from "./studio-types";
|
||||
|
||||
function SummaryRow({
|
||||
label,
|
||||
value,
|
||||
tone,
|
||||
}: {
|
||||
label: string;
|
||||
value: string | number;
|
||||
tone?: "ok" | "warn";
|
||||
}) {
|
||||
return (
|
||||
<div className="flex items-center justify-between gap-2 text-xs">
|
||||
<span className="text-[var(--admin-text-muted)]">{label}</span>
|
||||
<span
|
||||
className={cn(
|
||||
"font-mono font-semibold",
|
||||
tone === "warn"
|
||||
? "text-[var(--admin-warning)]"
|
||||
: "text-[var(--admin-success)]",
|
||||
)}
|
||||
>
|
||||
{value}
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function formatEta(ms: number): string {
|
||||
if (ms < 60_000) return `${Math.ceil(ms / 1000)}s`;
|
||||
const min = Math.floor(ms / 60_000);
|
||||
const sec = Math.ceil((ms % 60_000) / 1000);
|
||||
return `${min}m ${sec}s`;
|
||||
}
|
||||
const statusLabels: Record<BatchItemStatus["status"], string> = {
|
||||
pending: "Waiting",
|
||||
started: "Starting",
|
||||
downloading: "Downloading assets",
|
||||
converting: "Preparing assets",
|
||||
writing_db: "Saving",
|
||||
done: "Imported",
|
||||
failed: "Failed",
|
||||
};
|
||||
|
||||
export const BatchProgress = memo(function BatchProgress({
|
||||
progress,
|
||||
@@ -47,7 +22,6 @@ export const BatchProgress = memo(function BatchProgress({
|
||||
failed,
|
||||
cancelling,
|
||||
verification,
|
||||
startTime,
|
||||
failedClassnames,
|
||||
onCancel,
|
||||
onDismiss,
|
||||
@@ -65,192 +39,151 @@ export const BatchProgress = memo(function BatchProgress({
|
||||
onDismiss?: () => void;
|
||||
onRetry?: (classnames: string[]) => void;
|
||||
}) {
|
||||
const { entries, total, completed, percent } = useMemo(() => {
|
||||
const e = [...progress.entries()];
|
||||
const t = e.length;
|
||||
const c = e.filter(
|
||||
([, s]) => s.status === "done" || s.status === "failed",
|
||||
).length;
|
||||
return {
|
||||
entries: e,
|
||||
total: t,
|
||||
completed: c,
|
||||
percent: t > 0 ? Math.round((c / t) * 100) : 0,
|
||||
};
|
||||
}, [progress]);
|
||||
|
||||
// Live ETA calculation
|
||||
const [eta, setEta] = useState<string | null>(null);
|
||||
const completedRef = useRef(completed);
|
||||
const totalRef = useRef(total);
|
||||
completedRef.current = completed;
|
||||
totalRef.current = total;
|
||||
|
||||
useEffect(() => {
|
||||
if (done || !startTime || completed === 0) {
|
||||
setEta(null);
|
||||
return;
|
||||
}
|
||||
const calc = () => {
|
||||
const elapsed = Date.now() - startTime;
|
||||
const avgPerItem = elapsed / completedRef.current;
|
||||
const remaining = (totalRef.current - completedRef.current) * avgPerItem;
|
||||
setEta(formatEta(remaining));
|
||||
};
|
||||
calc();
|
||||
const interval = setInterval(calc, 2000);
|
||||
return () => clearInterval(interval);
|
||||
}, [done, startTime, completed]);
|
||||
|
||||
const entries = [...progress.values()];
|
||||
const completed = entries.filter(
|
||||
(item) => item.status === "done" || item.status === "failed",
|
||||
).length;
|
||||
const total = entries.length;
|
||||
const percent = total ? Math.round((completed / total) * 100) : 0;
|
||||
const imported = done
|
||||
? succeeded
|
||||
: entries.filter((item) => item.status === "done").length;
|
||||
const errors = done
|
||||
? failed
|
||||
: entries.filter((item) => item.status === "failed").length;
|
||||
const unfinished = Math.max(0, total - completed);
|
||||
const heading = !done
|
||||
? cancelling
|
||||
? "Stopping import…"
|
||||
: "Importing furniture…"
|
||||
: unfinished
|
||||
? "Import stopped"
|
||||
: errors
|
||||
? "Import completed with errors"
|
||||
: "Import completed";
|
||||
const issues = verification
|
||||
? verification.furniDataMissing + verification.furniDataConflicts
|
||||
: 0;
|
||||
return (
|
||||
<div className="border-t border-[var(--admin-border)] p-3">
|
||||
<div className="mb-2 flex items-center justify-between gap-3">
|
||||
<span className="text-xs font-bold uppercase tracking-wider text-[var(--admin-text-muted)]">
|
||||
{done ? "Import finished" : "Importing…"}
|
||||
</span>
|
||||
{done ? (
|
||||
<span
|
||||
className={cn(
|
||||
"text-xs font-bold",
|
||||
failed > 0
|
||||
? "text-[var(--admin-warning)]"
|
||||
: "text-[var(--admin-success)]",
|
||||
)}
|
||||
<section
|
||||
aria-label="Import progress"
|
||||
className="max-h-[45%] shrink-0 overflow-auto border-t border-[var(--admin-border)] bg-[var(--admin-surface)] p-4"
|
||||
>
|
||||
<div className="flex flex-wrap items-center justify-between gap-3">
|
||||
<div role="status" aria-live="polite">
|
||||
<h2
|
||||
style={{ fontSize: 14, margin: 0 }}
|
||||
className="text-sm font-semibold"
|
||||
>
|
||||
{completed}/{total} · {succeeded} ok
|
||||
{failed > 0 ? ` · ${failed} failed` : ""}
|
||||
</span>
|
||||
) : (
|
||||
<span className="flex items-center gap-2">
|
||||
<span className="text-xs font-mono text-[var(--admin-text-muted)]">
|
||||
{completed}/{total}
|
||||
</span>
|
||||
{eta && (
|
||||
<span className="text-xs font-mono text-[var(--admin-accent)]">
|
||||
~{eta}
|
||||
</span>
|
||||
)}
|
||||
<Loader2
|
||||
size={14}
|
||||
className="animate-spin text-[var(--admin-accent)]"
|
||||
/>
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{!done && (
|
||||
<div className="mb-2 flex items-center gap-2">
|
||||
<div className="h-1.5 flex-1 overflow-hidden rounded-full bg-[var(--admin-accent)]/10">
|
||||
<div
|
||||
className="h-full rounded-full bg-[var(--admin-accent)] transition-all duration-300"
|
||||
style={{ width: `${percent}%` }}
|
||||
/>
|
||||
</div>
|
||||
<span className="text-xs font-mono font-bold text-[var(--admin-text)]">
|
||||
{percent}%
|
||||
</span>
|
||||
{heading}
|
||||
</h2>
|
||||
<p className="mt-1 text-xs text-[var(--admin-text-muted)]">
|
||||
{imported} imported · {errors} failed
|
||||
{unfinished > 0 &&
|
||||
` · ${unfinished} ${done ? "not completed" : "remaining"}`}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="max-h-44 space-y-1 overflow-y-auto pr-1">
|
||||
{entries.map(([classname, s]) => (
|
||||
<div key={classname} className="flex items-center gap-2 text-xs">
|
||||
{s.status === "done" ? (
|
||||
<Check
|
||||
size={12}
|
||||
className="shrink-0 text-[var(--admin-success)]"
|
||||
/>
|
||||
) : s.status === "failed" ? (
|
||||
<X size={12} className="shrink-0 text-[var(--admin-warning)]" />
|
||||
) : (
|
||||
<Loader2
|
||||
size={12}
|
||||
className="shrink-0 animate-spin text-[var(--admin-accent)]"
|
||||
/>
|
||||
)}
|
||||
<span className="min-w-0 flex-1 truncate font-mono">
|
||||
{classname}
|
||||
</span>
|
||||
<span className="shrink-0 capitalize text-[var(--admin-text-muted)]">
|
||||
{s.status.replace(/_/g, " ")}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{done && verification && (
|
||||
<div className="mt-2 space-y-1.5 rounded-lg border border-[var(--admin-border)] bg-[var(--admin-canvas)] p-2.5">
|
||||
<div className="flex items-center gap-1.5 text-xs font-bold uppercase tracking-wider text-[var(--admin-text-muted)]">
|
||||
<ShieldCheck size={13} className="text-[var(--admin-success)]" />
|
||||
Post-import verification
|
||||
</div>
|
||||
<SummaryRow
|
||||
label="Catalog offer_id fixed"
|
||||
value={verification.offerIdsFixed}
|
||||
/>
|
||||
<SummaryRow
|
||||
label="Furnidata ids fixed"
|
||||
value={verification.furniDataFixedIds}
|
||||
/>
|
||||
<SummaryRow
|
||||
label="Furnidata entries missing"
|
||||
value={verification.furniDataMissing}
|
||||
tone={verification.furniDataMissing > 0 ? "warn" : "ok"}
|
||||
/>
|
||||
<SummaryRow
|
||||
label="Furnidata id conflicts"
|
||||
value={verification.furniDataConflicts}
|
||||
tone={verification.furniDataConflicts > 0 ? "warn" : "ok"}
|
||||
/>
|
||||
<SummaryRow
|
||||
label="Nitros synced"
|
||||
value={verification.nitrosSynced.length}
|
||||
/>
|
||||
<SummaryRow
|
||||
label="Icons synced"
|
||||
value={verification.iconsSynced.length}
|
||||
/>
|
||||
<SummaryRow
|
||||
label="Folders chowned"
|
||||
value={verification.ownershipFixed.length}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="mt-2 flex justify-end gap-2">
|
||||
{done ? (
|
||||
<>
|
||||
{failedClassnames && failedClassnames.length > 0 && onRetry && (
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
onClick={() => onRetry(failedClassnames)}
|
||||
>
|
||||
<Loader2 size={14} />
|
||||
Retry {failedClassnames.length} failed
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{done ? (
|
||||
<>
|
||||
{!!failedClassnames?.length && onRetry && (
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
onClick={() => onRetry(failedClassnames)}
|
||||
>
|
||||
<RefreshCw size={14} />
|
||||
Retry failed ({failedClassnames.length})
|
||||
</Button>
|
||||
)}
|
||||
<Button size="sm" variant="secondary" onClick={onDismiss}>
|
||||
<Check size={14} />
|
||||
Close summary
|
||||
</Button>
|
||||
)}
|
||||
<Button size="sm" variant="secondary" onClick={onDismiss}>
|
||||
<Check size={14} />
|
||||
Dismiss
|
||||
</>
|
||||
) : (
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
onClick={onCancel}
|
||||
disabled={cancelling}
|
||||
>
|
||||
{cancelling ? (
|
||||
<Loader2 className="animate-spin" size={14} />
|
||||
) : (
|
||||
<Ban size={14} />
|
||||
)}
|
||||
Stop import
|
||||
</Button>
|
||||
</>
|
||||
) : (
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
onClick={onCancel}
|
||||
disabled={cancelling}
|
||||
>
|
||||
{cancelling ? (
|
||||
<Loader2 size={14} className="animate-spin" />
|
||||
) : (
|
||||
<Ban size={14} />
|
||||
)}
|
||||
Cancel
|
||||
</Button>
|
||||
)}
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
role="progressbar"
|
||||
aria-label="Furniture processed"
|
||||
aria-valuemin={0}
|
||||
aria-valuemax={total || 1}
|
||||
aria-valuenow={completed}
|
||||
className="my-3 h-2 overflow-hidden rounded-full bg-[var(--admin-accent)]/10"
|
||||
>
|
||||
<div
|
||||
className="h-full rounded-full bg-[var(--admin-accent)] transition-all"
|
||||
style={{ width: `${percent}%` }}
|
||||
/>
|
||||
</div>
|
||||
{done && verification && (
|
||||
<p className="mb-2 text-sm text-[var(--admin-text-muted)]">
|
||||
{issues
|
||||
? `${issues} catalog data issue(s) still need attention. Open Catalog audit to review them.`
|
||||
: "Catalog data verification completed."}
|
||||
</p>
|
||||
)}
|
||||
<details>
|
||||
<summary className="cursor-pointer text-xs font-medium">
|
||||
View item details ({total})
|
||||
</summary>
|
||||
<div className="mt-2 max-h-44 space-y-2 overflow-auto">
|
||||
{entries.map((item) => (
|
||||
<div
|
||||
key={item.classname}
|
||||
className="rounded-md bg-[var(--admin-canvas)] p-2 text-xs"
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
{item.status === "done" ? (
|
||||
<Check size={14} className="text-[var(--admin-success)]" />
|
||||
) : item.status === "failed" ? (
|
||||
<X size={14} className="text-[var(--admin-warning)]" />
|
||||
) : done || item.status === "pending" ? (
|
||||
<Circle size={12} />
|
||||
) : (
|
||||
<Loader2 size={14} className="animate-spin" />
|
||||
)}
|
||||
<span className="min-w-0 flex-1 break-all font-medium">
|
||||
{item.classname}
|
||||
</span>
|
||||
<span className="shrink-0 text-[var(--admin-text-muted)]">
|
||||
{done && item.status !== "done" && item.status !== "failed"
|
||||
? "Not completed"
|
||||
: statusLabels[item.status]}
|
||||
</span>
|
||||
</div>
|
||||
{item.message && (
|
||||
<p className="mt-1 break-words text-[var(--admin-text-muted)]">
|
||||
{item.message}
|
||||
</p>
|
||||
)}
|
||||
{[...new Set(item.warnings ?? [])].map((warning) => (
|
||||
<p
|
||||
key={warning}
|
||||
className="mt-1 break-words text-[var(--admin-warning)]"
|
||||
>
|
||||
{warning}
|
||||
</p>
|
||||
))}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</details>
|
||||
</section>
|
||||
);
|
||||
});
|
||||
@@ -1,8 +1,7 @@
|
||||
"use client";
|
||||
|
||||
import { ChevronDown, ChevronRight, FolderTree } from "lucide-react";
|
||||
import { memo, useCallback, useMemo, useState } from "react";
|
||||
|
||||
import { ChevronDown, ChevronRight, FolderTree, Search, X } from "lucide-react";
|
||||
import { memo, useMemo, useState } from "react";
|
||||
import { cn } from "@/lib/utils";
|
||||
import type { TreeNode } from "@/types/catalog";
|
||||
|
||||
@@ -10,93 +9,122 @@ export const CatalogRail = memo(function CatalogRail({
|
||||
tree,
|
||||
selectedId,
|
||||
onSelect,
|
||||
onClose,
|
||||
}: {
|
||||
tree: TreeNode[];
|
||||
selectedId: number | null;
|
||||
onSelect: (id: number | null) => void;
|
||||
onClose?: () => void;
|
||||
}) {
|
||||
const [collapsed, setCollapsed] = useState<Set<number>>(new Set());
|
||||
|
||||
const [search, setSearch] = useState("");
|
||||
const visible = useMemo(() => {
|
||||
if (search.trim())
|
||||
return tree.filter((node) =>
|
||||
node.caption.toLowerCase().includes(search.trim().toLowerCase()),
|
||||
);
|
||||
const hidden = new Set<number>();
|
||||
for (const node of tree) {
|
||||
if (hidden.has(node.parentId)) {
|
||||
for (const node of tree)
|
||||
if (hidden.has(node.parentId) || collapsed.has(node.parentId))
|
||||
hidden.add(node.id);
|
||||
continue;
|
||||
}
|
||||
if (collapsed.has(node.parentId)) {
|
||||
hidden.add(node.id);
|
||||
}
|
||||
}
|
||||
return tree.filter((n) => !hidden.has(n.id));
|
||||
}, [tree, collapsed]);
|
||||
|
||||
const toggle = useCallback((id: number) => {
|
||||
setCollapsed((prev) => {
|
||||
const next = new Set(prev);
|
||||
return tree.filter((node) => !hidden.has(node.id));
|
||||
}, [tree, collapsed, search]);
|
||||
function toggle(id: number) {
|
||||
setCollapsed((previous) => {
|
||||
const next = new Set(previous);
|
||||
if (next.has(id)) next.delete(id);
|
||||
else next.add(id);
|
||||
return next;
|
||||
});
|
||||
}, []);
|
||||
|
||||
}
|
||||
return (
|
||||
<aside className="flex h-full min-h-0 w-64 shrink-0 flex-col border-r border-[var(--admin-border)] bg-[var(--admin-surface)]">
|
||||
<div className="flex items-center gap-2 border-b border-[var(--admin-border)] px-3 py-2.5">
|
||||
<FolderTree size={14} className="text-[var(--admin-accent)]" />
|
||||
<span className="text-xs font-bold uppercase tracking-wider text-[var(--admin-text-muted)]">
|
||||
Catalog
|
||||
</span>
|
||||
<aside
|
||||
aria-label="Catalog categories"
|
||||
className="absolute inset-y-0 left-0 z-30 flex w-64 max-w-[85%] flex-col border-r border-[var(--admin-border)] bg-[var(--admin-surface)] shadow-xl lg:static lg:z-auto lg:shrink-0 lg:shadow-none"
|
||||
>
|
||||
<div className="flex items-center gap-2 px-3 pt-3">
|
||||
<FolderTree size={16} />
|
||||
<h2
|
||||
style={{ fontSize: 14, margin: 0 }}
|
||||
className="flex-1 text-sm font-semibold"
|
||||
>
|
||||
Categories
|
||||
</h2>
|
||||
<button
|
||||
type="button"
|
||||
onClick={onClose}
|
||||
aria-label="Close categories"
|
||||
className="grid h-9 w-9 place-items-center rounded-md hover:bg-[var(--admin-accent)]/10"
|
||||
>
|
||||
<X size={16} />
|
||||
</button>
|
||||
</div>
|
||||
<div className="min-h-0 flex-1 overflow-y-auto p-1.5">
|
||||
{visible.length === 0 ? (
|
||||
<p className="px-2 py-4 text-xs text-[var(--admin-text-muted)]">
|
||||
No catalog pages found.
|
||||
<label className="mx-3 my-3 flex items-center gap-2 rounded-md border border-[var(--admin-border)] px-2">
|
||||
<Search size={14} />
|
||||
<input
|
||||
value={search}
|
||||
onChange={(event) => setSearch(event.target.value)}
|
||||
placeholder="Find a category…"
|
||||
aria-label="Find a category"
|
||||
className="h-9 min-w-0 w-full border-0 bg-transparent text-sm outline-none"
|
||||
/>
|
||||
</label>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => onSelect(null)}
|
||||
aria-pressed={selectedId === null}
|
||||
className="mx-2 mb-2 rounded-md px-3 py-2 text-left text-sm hover:bg-[var(--admin-accent)]/10 aria-pressed:bg-[var(--admin-accent)]/15"
|
||||
>
|
||||
All categories
|
||||
</button>
|
||||
<div className="min-h-0 flex-1 overflow-y-auto px-2 pb-3">
|
||||
{visible.length === 0 && (
|
||||
<p className="p-3 text-sm text-[var(--admin-text-muted)]">
|
||||
No matching categories.
|
||||
</p>
|
||||
) : (
|
||||
visible.map((node) => {
|
||||
const isRoot = node.parentId <= 0;
|
||||
const hasChildren = node.childCount > 0;
|
||||
const isCollapsed = collapsed.has(node.id);
|
||||
return (
|
||||
<button
|
||||
key={node.id}
|
||||
type="button"
|
||||
onClick={() => {
|
||||
if (hasChildren) toggle(node.id);
|
||||
onSelect(selectedId === node.id ? null : node.id);
|
||||
}}
|
||||
className={cn(
|
||||
"group flex w-full cursor-pointer items-center gap-1.5 rounded-md px-1.5 py-1.5 text-left text-xs transition-colors outline-none focus-visible:ring-2 focus-visible:ring-[var(--admin-accent)]",
|
||||
selectedId === node.id
|
||||
? "bg-[var(--admin-accent)]/15 text-[var(--admin-text)]"
|
||||
: "text-[var(--admin-text-muted)] hover:bg-[var(--admin-accent)]/10 hover:text-[var(--admin-text)]",
|
||||
)}
|
||||
style={{ paddingLeft: `${6 + node.depth * 12}px` }}
|
||||
>
|
||||
{hasChildren ? (
|
||||
isCollapsed ? (
|
||||
<ChevronRight size={12} className="shrink-0" />
|
||||
) : (
|
||||
<ChevronDown size={12} className="shrink-0" />
|
||||
)
|
||||
) : (
|
||||
<span className="w-3 shrink-0" />
|
||||
)}
|
||||
<span className="min-w-0 flex-1 truncate">
|
||||
{isRoot ? (
|
||||
<span className="font-semibold">{node.caption}</span>
|
||||
) : (
|
||||
node.caption
|
||||
)}
|
||||
</span>
|
||||
<span className="shrink-0 rounded-full bg-[var(--admin-accent)]/10 px-1.5 text-[0.6rem] font-semibold text-[var(--admin-accent)]">
|
||||
{node.itemCount}
|
||||
</span>
|
||||
</button>
|
||||
);
|
||||
})
|
||||
)}
|
||||
{visible.map((node) => (
|
||||
<div
|
||||
key={node.id}
|
||||
className={cn(
|
||||
"flex items-center rounded-md",
|
||||
selectedId === node.id && "bg-[var(--admin-accent)]/15",
|
||||
)}
|
||||
style={{
|
||||
paddingLeft: search.trim() ? 0 : Math.min(node.depth * 12, 60),
|
||||
}}
|
||||
>
|
||||
{node.childCount > 0 && !search.trim() ? (
|
||||
<button
|
||||
type="button"
|
||||
aria-label={`${collapsed.has(node.id) ? "Expand" : "Collapse"} ${node.caption}`}
|
||||
aria-expanded={!collapsed.has(node.id)}
|
||||
onClick={() => toggle(node.id)}
|
||||
className="grid h-10 w-8 shrink-0 place-items-center rounded-md hover:bg-[var(--admin-accent)]/10"
|
||||
>
|
||||
{collapsed.has(node.id) ? (
|
||||
<ChevronRight size={14} />
|
||||
) : (
|
||||
<ChevronDown size={14} />
|
||||
)}
|
||||
</button>
|
||||
) : (
|
||||
<span className="w-8 shrink-0" />
|
||||
)}
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => onSelect(node.id)}
|
||||
aria-pressed={selectedId === node.id}
|
||||
title={node.caption}
|
||||
className="flex min-h-10 min-w-0 flex-1 items-center gap-2 rounded-md py-2 pr-2 text-left text-sm hover:bg-[var(--admin-accent)]/10"
|
||||
>
|
||||
<span className="min-w-0 flex-1 truncate">{node.caption}</span>
|
||||
<span className="text-xs tabular-nums text-[var(--admin-text-muted)]">
|
||||
{node.itemCount}
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</aside>
|
||||
);
|
||||
|
||||
@@ -111,7 +111,10 @@ export function StudioClient({
|
||||
// Catalog tree
|
||||
const [tree] = useState<TreeNode[]>(initialTree);
|
||||
const [selectedPage, setSelectedPage] = useState<number | null>(null);
|
||||
const [railOpen, setRailOpen] = useState(true);
|
||||
const [railOpen, setRailOpen] = useState(false);
|
||||
useEffect(() => {
|
||||
setRailOpen(window.matchMedia("(min-width: 1024px)").matches);
|
||||
}, []);
|
||||
|
||||
// Search & list
|
||||
const [searchTerm, setSearchTerm] = useState("");
|
||||
@@ -133,7 +136,7 @@ export function StudioClient({
|
||||
const [categoryFilter, setCategoryFilter] = useState<string>("all");
|
||||
const [statusFilter, setStatusFilter] = useState<string>("all");
|
||||
const [sortBy, setSortBy] = useState<string>("default");
|
||||
const [viewMode, setViewMode] = useState<"grid" | "list">("grid");
|
||||
const [viewMode, setViewMode] = useState<"grid" | "list">("list");
|
||||
const searchRef = useRef<HTMLInputElement>(null);
|
||||
const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null);
|
||||
|
||||
@@ -154,7 +157,7 @@ export function StudioClient({
|
||||
const batchDoneRef = useRef(false);
|
||||
const markBatchDone = useCallback(() => {
|
||||
batchDoneRef.current = true;
|
||||
markBatchDone();
|
||||
setBatchDone(true);
|
||||
}, []);
|
||||
const [batchSucceeded, setBatchSucceeded] = useState(0);
|
||||
const [batchFailed, setBatchFailed] = useState(0);
|
||||
@@ -218,13 +221,13 @@ export function StudioClient({
|
||||
const langs = data.languages ?? [];
|
||||
const okCount = langs.filter((l) => l.ok).length;
|
||||
toast.success(
|
||||
`Alle talen vertaald (${okCount}/${langs.length} gelukt)`,
|
||||
`Languages translated (${okCount}/${langs.length} completed)`,
|
||||
);
|
||||
} else {
|
||||
toast.error(data.error ?? "Vertaling mislukt");
|
||||
toast.error(data.error ?? "Translation failed");
|
||||
}
|
||||
} catch {
|
||||
toast.error("Netwerkfout bij het vertalen van alle talen");
|
||||
toast.error("Network error while translating languages");
|
||||
} finally {
|
||||
setBuildingLanguages(false);
|
||||
}
|
||||
@@ -241,7 +244,7 @@ export function StudioClient({
|
||||
try {
|
||||
await setFurnidataTranslateEnabled({ enabled: next });
|
||||
} catch {
|
||||
toast.error("Kon de globale vertaal-instelling niet opslaan");
|
||||
toast.error("Could not save the default translation setting");
|
||||
}
|
||||
};
|
||||
|
||||
@@ -410,7 +413,7 @@ export function StudioClient({
|
||||
}
|
||||
|
||||
if (classnames.length === 0) {
|
||||
toast.info("Alles is al geïmporteerd voor deze bron");
|
||||
toast.info("All items from this source are already imported");
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -418,9 +421,9 @@ export function StudioClient({
|
||||
sources.find((s) => s.id === activeSource)?.name || activeSource;
|
||||
|
||||
const confirmed = await confirm({
|
||||
title: "Alles importeren",
|
||||
description: `${classnames.length} items importeren uit "${sourceName}"? Dit kan even duren.`,
|
||||
confirmLabel: "Alles importeren",
|
||||
title: "Import all missing",
|
||||
description: `${classnames.length} items to import from "${sourceName}"? This may take a while.`,
|
||||
confirmLabel: "Import all missing",
|
||||
});
|
||||
if (!confirmed) return;
|
||||
|
||||
@@ -430,6 +433,7 @@ export function StudioClient({
|
||||
initial.set(cn, { classname: cn, status: "pending" });
|
||||
}
|
||||
setBatchProgress(initial);
|
||||
batchDoneRef.current = false;
|
||||
setBatchDone(false);
|
||||
setBatchSucceeded(0);
|
||||
setBatchFailed(0);
|
||||
@@ -543,7 +547,7 @@ export function StudioClient({
|
||||
|
||||
// Auto-translate after clone all if translation is enabled
|
||||
if (translate && okCount > 0) {
|
||||
toast.info("Automatisch vertalen van alle talen...");
|
||||
toast.info("Translating all languages...");
|
||||
buildAllLanguages();
|
||||
}
|
||||
} else {
|
||||
@@ -589,6 +593,12 @@ export function StudioClient({
|
||||
if (updated) setDetail(updated);
|
||||
}, [items, detail]);
|
||||
|
||||
const clearFilters = () => {
|
||||
setTypeFilter("all");
|
||||
setCategoryFilter("all");
|
||||
setStatusFilter("all");
|
||||
setSelectedPage(null);
|
||||
};
|
||||
const clearSearch = () => {
|
||||
setSearchTerm("");
|
||||
setActiveSearch("");
|
||||
@@ -701,15 +711,19 @@ export function StudioClient({
|
||||
}
|
||||
}
|
||||
|
||||
async function importBatch() {
|
||||
const toImport = filteredItems.filter(
|
||||
(i) => selected.has(i.classname) && !i.alreadyImported,
|
||||
async function importBatch(requested?: string[]) {
|
||||
const toImport = (requested ? items : filteredItems).filter(
|
||||
(i) =>
|
||||
(requested
|
||||
? requested.includes(i.classname)
|
||||
: selected.has(i.classname)) && !i.alreadyImported,
|
||||
);
|
||||
if (toImport.length === 0) {
|
||||
toast.info("Select furni that isn't imported yet");
|
||||
return;
|
||||
}
|
||||
|
||||
batchDoneRef.current = false;
|
||||
setBatchDone(false);
|
||||
setBatchSucceeded(0);
|
||||
setBatchFailed(0);
|
||||
@@ -750,7 +764,7 @@ export function StudioClient({
|
||||
});
|
||||
|
||||
if (!res.ok || !res.body) {
|
||||
toast.error(`Batch import mislukt (${res.status})`);
|
||||
toast.error(`Batch import failed (${res.status})`);
|
||||
setBatchProgress(null);
|
||||
return;
|
||||
}
|
||||
@@ -818,18 +832,16 @@ export function StudioClient({
|
||||
}
|
||||
} catch (err) {
|
||||
if ((err as Error).name === "AbortError") {
|
||||
toast.info("Batch import geannuleerd door gebruiker");
|
||||
toast.info("Import cancelled");
|
||||
} else if ((err as Error).name === "TimeoutError") {
|
||||
toast.error(
|
||||
"Import tijdelijkstop gedurende te lange tijd – probeer het opnieuw of verlaag de concurrentie",
|
||||
);
|
||||
toast.error("Import timed out. Retry or reduce concurrency.");
|
||||
} else if (err instanceof TypeError && err.message?.includes("fetch")) {
|
||||
toast.error(
|
||||
"Netwerkfout tijdens upload – controleer je internetverbinding en probeer opnieuw",
|
||||
"Network error during upload. Check your connection and retry.",
|
||||
);
|
||||
} else {
|
||||
toast.error(
|
||||
"Onverwende fout tijdens import: " +
|
||||
"Unexpected import error: " +
|
||||
(err instanceof Error ? err.message : String(err)),
|
||||
);
|
||||
}
|
||||
@@ -838,7 +850,7 @@ export function StudioClient({
|
||||
setBatchCancelling(false);
|
||||
setSelected(new Set());
|
||||
fetchStats();
|
||||
if (!batchDoneRef.current) setBatchProgress(null);
|
||||
if (!batchDoneRef.current) markBatchDone();
|
||||
}
|
||||
}
|
||||
|
||||
@@ -857,8 +869,13 @@ export function StudioClient({
|
||||
};
|
||||
|
||||
async function retryFailed(failed: string[]) {
|
||||
if (!activeSource || failed.length === 0) return;
|
||||
if (failed.length === 0) return;
|
||||
if (!activeSource) {
|
||||
await importBatch(failed);
|
||||
return;
|
||||
}
|
||||
// For clone sources, re-run cloneAllMissing with only the failed classnames
|
||||
batchDoneRef.current = false;
|
||||
setBatchDone(false);
|
||||
setBatchSucceeded(0);
|
||||
setBatchFailed(0);
|
||||
@@ -890,7 +907,7 @@ export function StudioClient({
|
||||
});
|
||||
|
||||
if (!res.ok || !res.body) {
|
||||
toast.error(`Retry mislukt (${res.status})`);
|
||||
toast.error(`Retry failed (${res.status})`);
|
||||
setBatchProgress(null);
|
||||
return;
|
||||
}
|
||||
@@ -931,14 +948,14 @@ export function StudioClient({
|
||||
markBatchDone();
|
||||
|
||||
if (okCount > 0) {
|
||||
toast.success(`${okCount} items opnieuw geïmporteerd`);
|
||||
toast.success(`${okCount} items imported again`);
|
||||
}
|
||||
fetchItems(activeSearch, 1, activeSource);
|
||||
fetchStats();
|
||||
fetchCloneStats(activeSource);
|
||||
} catch (err) {
|
||||
if ((err as Error)?.name !== "AbortError") {
|
||||
toast.error("Verbindingsfout tijdens retry");
|
||||
toast.error("Connection failed while retrying");
|
||||
setBatchProgress(null);
|
||||
}
|
||||
} finally {
|
||||
@@ -1153,7 +1170,7 @@ export function StudioClient({
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="flex h-full min-h-[520px] flex-col overflow-hidden">
|
||||
<div className="flex h-full min-h-0 min-w-0 flex-col overflow-hidden">
|
||||
{/* ── Header ─────────────────────────────────────────── */}
|
||||
<header className="flex shrink-0 flex-wrap items-center gap-3 border-b border-[var(--admin-border)] bg-[var(--admin-surface)] px-4 py-3">
|
||||
<div className="flex items-center gap-2.5">
|
||||
@@ -1161,7 +1178,10 @@ export function StudioClient({
|
||||
<Sparkles size={16} className="text-[var(--admin-accent)]" />
|
||||
</div>
|
||||
<div>
|
||||
<h1 className="text-base font-extrabold leading-tight text-[var(--admin-text)]">
|
||||
<h1
|
||||
style={{ fontSize: 20, margin: 0 }}
|
||||
className="text-base font-extrabold leading-tight text-[var(--admin-text)]"
|
||||
>
|
||||
Studio
|
||||
</h1>
|
||||
<p className="text-[0.65rem] uppercase tracking-wider text-[var(--admin-text-muted)]">
|
||||
@@ -1170,13 +1190,14 @@ export function StudioClient({
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-1 items-center gap-2">
|
||||
<div className="flex min-w-[180px] flex-1 items-center gap-2">
|
||||
<div className="relative w-full max-w-md">
|
||||
<Search
|
||||
size={14}
|
||||
className="absolute left-2.5 top-1/2 -translate-y-1/2 text-[var(--admin-text-muted)]"
|
||||
/>
|
||||
<Input
|
||||
aria-label="Search furniture"
|
||||
ref={searchRef}
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
@@ -1185,6 +1206,7 @@ export function StudioClient({
|
||||
if (e.key === "Escape") clearSearch();
|
||||
}}
|
||||
placeholder="Search furni, classnames, keywords… (/)"
|
||||
style={{ paddingLeft: 32, paddingRight: 32 }}
|
||||
className="pl-8 pr-8"
|
||||
/>
|
||||
{searchTerm ? (
|
||||
@@ -1232,7 +1254,7 @@ export function StudioClient({
|
||||
</Badge>
|
||||
<Badge variant="secondary" className="gap-1">
|
||||
<Check size={11} className="text-[var(--admin-success)]" />{" "}
|
||||
{cloneStats.present} aanwezig
|
||||
{cloneStats.present} present
|
||||
</Badge>
|
||||
{cloneStats.clonable > 0 && (
|
||||
<Badge
|
||||
@@ -1246,18 +1268,6 @@ export function StudioClient({
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-1.5 rounded-md border border-[var(--admin-border)] px-2.5 py-1">
|
||||
<Switch
|
||||
checked={globalTranslate}
|
||||
onCheckedChange={onGlobalTranslateChange}
|
||||
aria-label="Globale vertaling"
|
||||
/>
|
||||
<Globe size={13} className="text-[var(--admin-text-muted)]" />
|
||||
<span className="text-xs font-medium text-[var(--admin-text-muted)]">
|
||||
Vertaling (globaal)
|
||||
</span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* ── Filters + actions ─────────────────────────────── */}
|
||||
@@ -1283,8 +1293,14 @@ export function StudioClient({
|
||||
</button>
|
||||
|
||||
<Select value={activeSource} onValueChange={changeSource}>
|
||||
<SelectTrigger className="h-8 w-44 text-xs">
|
||||
<SelectValue placeholder="Furni source" />
|
||||
<SelectTrigger
|
||||
aria-label="Furniture source"
|
||||
className="h-8 w-44 text-xs"
|
||||
>
|
||||
<SelectValue>
|
||||
{sources.find((entry) => entry.id === activeSource)?.name ??
|
||||
`${source.label} (official)`}
|
||||
</SelectValue>
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="">{source.label} (official)</SelectItem>
|
||||
@@ -1297,8 +1313,17 @@ export function StudioClient({
|
||||
</Select>
|
||||
|
||||
<Select value={typeFilter} onValueChange={setTypeFilter}>
|
||||
<SelectTrigger className="h-8 w-32 text-xs">
|
||||
<SelectValue placeholder="Type" />
|
||||
<SelectTrigger
|
||||
aria-label="Furniture type"
|
||||
className="h-8 w-32 text-xs"
|
||||
>
|
||||
<SelectValue>
|
||||
{typeFilter === "all"
|
||||
? "All types"
|
||||
: typeFilter === "flooritem"
|
||||
? "Floor items"
|
||||
: "Wall items"}
|
||||
</SelectValue>
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all">All types</SelectItem>
|
||||
@@ -1308,8 +1333,13 @@ export function StudioClient({
|
||||
</Select>
|
||||
|
||||
<Select value={categoryFilter} onValueChange={setCategoryFilter}>
|
||||
<SelectTrigger className="h-8 w-40 text-xs">
|
||||
<SelectValue placeholder="Category" />
|
||||
<SelectTrigger
|
||||
aria-label="Furniture category"
|
||||
className="h-8 w-40 text-xs"
|
||||
>
|
||||
<SelectValue>
|
||||
{categoryFilter === "all" ? "All categories" : categoryFilter}
|
||||
</SelectValue>
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{categories.map((cat) => (
|
||||
@@ -1321,13 +1351,31 @@ export function StudioClient({
|
||||
</Select>
|
||||
|
||||
<Select value={statusFilter} onValueChange={setStatusFilter}>
|
||||
<SelectTrigger className="h-8 w-36 text-xs">
|
||||
<SelectValue placeholder="Status" />
|
||||
<SelectTrigger
|
||||
aria-label="Import status"
|
||||
className="h-8 w-36 text-xs"
|
||||
>
|
||||
<SelectValue>
|
||||
{
|
||||
(
|
||||
{
|
||||
all: "All statuses",
|
||||
notImported: "Not imported",
|
||||
imported: "Imported",
|
||||
inCatalog: "In catalog",
|
||||
missingNitro: "Missing nitro",
|
||||
missingFurnidata: "Missing furnidata",
|
||||
missingCatalog: "Missing catalog entry",
|
||||
} as Record<string, string>
|
||||
)[statusFilter]
|
||||
}
|
||||
</SelectValue>
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all">
|
||||
All statuses{" "}
|
||||
{notImportedCount > 0 && `(${notImportedCount} te importeren)`}
|
||||
{notImportedCount > 0 &&
|
||||
`(${notImportedCount} available to import)`}
|
||||
</SelectItem>
|
||||
<SelectItem value="notImported">Not imported</SelectItem>
|
||||
<SelectItem value="imported">Imported</SelectItem>
|
||||
@@ -1341,9 +1389,25 @@ export function StudioClient({
|
||||
</Select>
|
||||
|
||||
<Select value={sortBy} onValueChange={setSortBy}>
|
||||
<SelectTrigger className="h-8 w-44 text-xs">
|
||||
<SelectTrigger
|
||||
aria-label="Sort furniture"
|
||||
className="h-8 w-44 text-xs"
|
||||
>
|
||||
<ArrowUpDown size={12} className="mr-1" />
|
||||
<SelectValue placeholder="Sort" />
|
||||
<SelectValue>
|
||||
{
|
||||
(
|
||||
{
|
||||
default: "Default order",
|
||||
name: "Name A–Z",
|
||||
classname: "Classname A–Z",
|
||||
category: "Category",
|
||||
"imported-first": "Imported first",
|
||||
"not-imported-first": "Not imported first",
|
||||
} as Record<string, string>
|
||||
)[sortBy]
|
||||
}
|
||||
</SelectValue>
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="default">Default order</SelectItem>
|
||||
@@ -1357,6 +1421,14 @@ export function StudioClient({
|
||||
</SelectContent>
|
||||
</Select>
|
||||
|
||||
{(typeFilter !== "all" ||
|
||||
categoryFilter !== "all" ||
|
||||
statusFilter !== "all" ||
|
||||
selectedPage !== null) && (
|
||||
<Button variant="ghost" size="sm" onClick={clearFilters}>
|
||||
Reset filters
|
||||
</Button>
|
||||
)}
|
||||
{missingNitroCount > 0 && (
|
||||
<button
|
||||
type="button"
|
||||
@@ -1378,6 +1450,7 @@ export function StudioClient({
|
||||
type="button"
|
||||
onClick={() => setViewMode("grid")}
|
||||
aria-label="Grid view"
|
||||
aria-pressed={viewMode === "grid"}
|
||||
className={cn(
|
||||
"grid h-8 w-8 place-items-center transition-colors",
|
||||
viewMode === "grid"
|
||||
@@ -1391,6 +1464,7 @@ export function StudioClient({
|
||||
type="button"
|
||||
onClick={() => setViewMode("list")}
|
||||
aria-label="List view"
|
||||
aria-pressed={viewMode === "list"}
|
||||
className={cn(
|
||||
"grid h-8 w-8 place-items-center transition-colors",
|
||||
viewMode === "list"
|
||||
@@ -1401,19 +1475,152 @@ export function StudioClient({
|
||||
<List size={13} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<details className="shrink-0 border-b border-[var(--admin-border)] bg-[var(--admin-surface)] px-4 py-2">
|
||||
<summary className="cursor-pointer py-1 text-sm font-medium">
|
||||
Import options{" "}
|
||||
<span className="font-normal text-[var(--admin-text-muted)]">
|
||||
· Translation {translate ? "on" : "off"}
|
||||
</span>
|
||||
</summary>
|
||||
<div className="flex max-h-48 flex-wrap items-center gap-3 overflow-auto py-3">
|
||||
{" "}
|
||||
{/* ── Translate control (per-import) ─────────────── */}
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="flex h-8 items-center gap-1.5 rounded-md border border-[var(--admin-border)] px-2.5">
|
||||
<Switch
|
||||
checked={translate}
|
||||
onCheckedChange={setTranslate}
|
||||
aria-label="Translate this import"
|
||||
/>
|
||||
<span className="text-xs font-medium text-[var(--admin-text-muted)]">
|
||||
Translate
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<Popover open={langPickerOpen} onOpenChange={setLangPickerOpen}>
|
||||
<PopoverTrigger asChild>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="h-8 gap-1.5"
|
||||
disabled={!translate}
|
||||
>
|
||||
<Languages size={13} />
|
||||
{translateLangs.length === 0
|
||||
? "No languages"
|
||||
: translateLangs.length === ALL_LANGS.length
|
||||
? "All languages"
|
||||
: `${translateLangs.length} languages`}
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="w-60 p-2">
|
||||
<div className="mb-2 flex items-center justify-between">
|
||||
<span className="text-xs font-semibold text-[var(--admin-text)]">
|
||||
Languages
|
||||
</span>
|
||||
<div className="flex gap-1">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="h-6 px-2 text-[0.65rem]"
|
||||
onClick={() => setTranslateLangs([...ALL_LANGS])}
|
||||
>
|
||||
All
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="h-6 px-2 text-[0.65rem]"
|
||||
onClick={() => setTranslateLangs([])}
|
||||
>
|
||||
None
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid max-h-56 grid-cols-2 gap-1 overflow-y-auto">
|
||||
{ALL_LANGS.map((lang) => {
|
||||
const on = translateLangs.includes(lang);
|
||||
return (
|
||||
<button
|
||||
key={lang}
|
||||
type="button"
|
||||
onClick={() => toggleLang(lang)}
|
||||
className={cn(
|
||||
"flex items-center gap-1.5 rounded-md border px-2 py-1 text-xs transition-colors",
|
||||
on
|
||||
? "border-[var(--admin-accent)] bg-[var(--admin-accent)]/10 text-[var(--admin-text)]"
|
||||
: "border-[var(--admin-border)] text-[var(--admin-text-muted)] hover:bg-[var(--admin-accent)]/10",
|
||||
)}
|
||||
>
|
||||
<Checkbox
|
||||
style={{
|
||||
display: "inline-flex",
|
||||
width: 18,
|
||||
height: 18,
|
||||
}}
|
||||
className="border-[var(--admin-border)] bg-[var(--admin-surface)] data-checked:border-[var(--admin-accent)] data-checked:bg-[var(--admin-accent)] data-checked:text-[var(--admin-accent-foreground)]"
|
||||
checked={on}
|
||||
aria-label={`Language ${lang}`}
|
||||
tabIndex={-1}
|
||||
/>
|
||||
{lang.toUpperCase()}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="h-8 gap-1.5"
|
||||
disabled={buildingLanguages}
|
||||
onClick={buildAllLanguages}
|
||||
title="Translate the entire catalog into all languages"
|
||||
>
|
||||
{buildingLanguages ? (
|
||||
<Loader2 size={13} className="animate-spin" />
|
||||
) : (
|
||||
<Globe size={13} />
|
||||
)}
|
||||
Translate entire catalog
|
||||
</Button>
|
||||
</div>
|
||||
<div className="flex items-center gap-1.5 rounded-md border border-[var(--admin-border)] px-2.5 py-1">
|
||||
<Switch
|
||||
checked={globalTranslate}
|
||||
onCheckedChange={onGlobalTranslateChange}
|
||||
aria-label="Default translation"
|
||||
/>
|
||||
<Globe size={13} className="text-[var(--admin-text-muted)]" />
|
||||
<span className="text-xs font-medium text-[var(--admin-text-muted)]">
|
||||
Default for future imports
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</details>
|
||||
<fieldset
|
||||
aria-label="Furniture selection"
|
||||
className="flex shrink-0 flex-wrap items-center gap-2 border-b border-[var(--admin-border)] bg-[var(--admin-canvas)] px-4 py-2"
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
onClick={toggleAll}
|
||||
className="flex h-8 items-center gap-1.5 rounded-md border border-[var(--admin-border)] px-2.5 text-xs font-medium text-[var(--admin-text-muted)] transition-colors hover:bg-[var(--admin-accent)]/10 hover:text-[var(--admin-text)]"
|
||||
>
|
||||
<CheckboxDot checked={allSelected} />
|
||||
Select all
|
||||
{allSelected ? "Deselect visible" : "Select visible"}
|
||||
</button>
|
||||
|
||||
{selected.size > 0 && (
|
||||
<span className="flex h-8 items-center gap-1.5 rounded-md border border-[var(--admin-border)] bg-[var(--admin-accent)]/5 px-2.5 text-xs font-medium text-[var(--admin-text)]">
|
||||
{selected.size} selected
|
||||
{
|
||||
filteredItems.filter((item) => selected.has(item.classname))
|
||||
.length
|
||||
}{" "}
|
||||
selected in this view
|
||||
</span>
|
||||
)}
|
||||
|
||||
@@ -1428,110 +1635,12 @@ export function StudioClient({
|
||||
</button>
|
||||
)}
|
||||
|
||||
{/* ── Translate control (per-import) ─────────────── */}
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="flex h-8 items-center gap-1.5 rounded-md border border-[var(--admin-border)] px-2.5">
|
||||
<Switch
|
||||
checked={translate}
|
||||
onCheckedChange={setTranslate}
|
||||
aria-label="Vertalen bij import"
|
||||
/>
|
||||
<span className="text-xs font-medium text-[var(--admin-text-muted)]">
|
||||
Vertalen
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<Popover open={langPickerOpen} onOpenChange={setLangPickerOpen}>
|
||||
<PopoverTrigger asChild>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="h-8 gap-1.5"
|
||||
disabled={!translate}
|
||||
>
|
||||
<Languages size={13} />
|
||||
{translateLangs.length === 0
|
||||
? "Geen talen"
|
||||
: translateLangs.length === ALL_LANGS.length
|
||||
? "Alle talen"
|
||||
: `${translateLangs.length} talen`}
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="w-60 p-2">
|
||||
<div className="mb-2 flex items-center justify-between">
|
||||
<span className="text-xs font-semibold text-[var(--admin-text)]">
|
||||
Talen
|
||||
</span>
|
||||
<div className="flex gap-1">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="h-6 px-2 text-[0.65rem]"
|
||||
onClick={() => setTranslateLangs([...ALL_LANGS])}
|
||||
>
|
||||
Alles
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="h-6 px-2 text-[0.65rem]"
|
||||
onClick={() => setTranslateLangs([])}
|
||||
>
|
||||
Geen
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid max-h-56 grid-cols-2 gap-1 overflow-y-auto">
|
||||
{ALL_LANGS.map((lang) => {
|
||||
const on = translateLangs.includes(lang);
|
||||
return (
|
||||
<button
|
||||
key={lang}
|
||||
type="button"
|
||||
onClick={() => toggleLang(lang)}
|
||||
className={cn(
|
||||
"flex items-center gap-1.5 rounded-md border px-2 py-1 text-xs transition-colors",
|
||||
on
|
||||
? "border-[var(--admin-accent)] bg-[var(--admin-accent)]/10 text-[var(--admin-text)]"
|
||||
: "border-[var(--admin-border)] text-[var(--admin-text-muted)] hover:bg-[var(--admin-accent)]/10",
|
||||
)}
|
||||
>
|
||||
<Checkbox
|
||||
checked={on}
|
||||
aria-label={`Taal ${lang}`}
|
||||
tabIndex={-1}
|
||||
/>
|
||||
{lang.toUpperCase()}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="h-8 gap-1.5"
|
||||
disabled={buildingLanguages}
|
||||
onClick={buildAllLanguages}
|
||||
title="Vertaal de hele catalogus in alle talen (achteraf)"
|
||||
>
|
||||
{buildingLanguages ? (
|
||||
<Loader2 size={13} className="animate-spin" />
|
||||
) : (
|
||||
<Globe size={13} />
|
||||
)}
|
||||
Alles vertalen
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="flex-1" />
|
||||
|
||||
{cloneStats && cloneStats.clonable > 0 && !batchProgress && (
|
||||
<Button size="sm" className="gap-1.5" onClick={cloneAllMissing}>
|
||||
<CloudDownload size={14} />
|
||||
Alles importeren ({cloneStats.clonable})
|
||||
Import all missing ({cloneStats.clonable})
|
||||
</Button>
|
||||
)}
|
||||
|
||||
@@ -1540,14 +1649,14 @@ export function StudioClient({
|
||||
size="sm"
|
||||
className="gap-1.5"
|
||||
disabled={!!batchProgress}
|
||||
onClick={importBatch}
|
||||
onClick={() => importBatch()}
|
||||
>
|
||||
{batchProgress ? (
|
||||
<Loader2 size={14} className="animate-spin" />
|
||||
) : (
|
||||
<CloudDownload size={14} />
|
||||
)}
|
||||
Import {selectedNonImported} auto
|
||||
Import selected ({selectedNonImported})
|
||||
</Button>
|
||||
)}
|
||||
|
||||
@@ -1564,7 +1673,7 @@ export function StudioClient({
|
||||
) : (
|
||||
<RefreshCw size={14} />
|
||||
)}
|
||||
Nitro regeneren ({selectedMissingNitro.length})
|
||||
Rebuild Nitro ({selectedMissingNitro.length})
|
||||
</Button>
|
||||
)}
|
||||
|
||||
@@ -1581,25 +1690,45 @@ export function StudioClient({
|
||||
) : (
|
||||
<Trash2 size={14} />
|
||||
)}
|
||||
Verwijder ({selectedImported.length})
|
||||
Delete ({selectedImported.length})
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
{selected.size >
|
||||
filteredItems.filter((item) => selected.has(item.classname)).length && (
|
||||
<p className="shrink-0 px-4 py-1 text-xs text-[var(--admin-text-muted)]">
|
||||
Some selected furniture is hidden by your filters. Actions apply to
|
||||
the visible selection.
|
||||
</p>
|
||||
)}
|
||||
{/* ── Body: rail + grid + drawer ────────────────────── */}
|
||||
<div className="relative flex min-h-0 flex-1">
|
||||
{railOpen && (
|
||||
<button
|
||||
type="button"
|
||||
aria-label="Close category panel"
|
||||
onClick={() => setRailOpen(false)}
|
||||
className="absolute inset-0 z-20 bg-[var(--admin-text)]/30 lg:hidden"
|
||||
/>
|
||||
)}
|
||||
{railOpen ? (
|
||||
<CatalogRail
|
||||
tree={tree}
|
||||
selectedId={selectedPage}
|
||||
onSelect={setSelectedPage}
|
||||
onSelect={(id) => {
|
||||
setSelectedPage(id);
|
||||
if (!window.matchMedia("(min-width: 1024px)").matches)
|
||||
setRailOpen(false);
|
||||
}}
|
||||
onClose={() => setRailOpen(false)}
|
||||
/>
|
||||
) : null}
|
||||
|
||||
<main className="flex min-h-0 flex-1 flex-col">
|
||||
<main className="flex min-h-0 min-w-0 flex-1 flex-col">
|
||||
<div className="min-h-0 flex-1 overflow-y-auto p-3">
|
||||
{loading && items.length === 0 ? (
|
||||
<div className="grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5">
|
||||
<div className="grid grid-cols-[repeat(auto-fill,minmax(150px,1fr))] gap-3">
|
||||
{Array.from({ length: 10 }, (_, i) => i).map((n) => (
|
||||
<div
|
||||
key={`skeleton-${n}`}
|
||||
@@ -1616,6 +1745,13 @@ export function StudioClient({
|
||||
) : error ? (
|
||||
<div className="py-16 text-center text-sm text-[var(--admin-warning)]">
|
||||
{error}
|
||||
<Button
|
||||
variant="outline"
|
||||
className="ml-3"
|
||||
onClick={() => fetchItems(activeSearch, 1, activeSource)}
|
||||
>
|
||||
Try again
|
||||
</Button>
|
||||
</div>
|
||||
) : filteredItems.length === 0 ? (
|
||||
<div className="flex flex-col items-center py-16 text-center">
|
||||
@@ -1639,7 +1775,7 @@ export function StudioClient({
|
||||
) : (
|
||||
<>
|
||||
{viewMode === "grid" ? (
|
||||
<div className="grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5">
|
||||
<div className="grid grid-cols-[repeat(auto-fill,minmax(150px,1fr))] gap-3">
|
||||
{filteredItems.map((item) => {
|
||||
const isSel = selected.has(item.classname);
|
||||
return (
|
||||
@@ -1647,7 +1783,6 @@ export function StudioClient({
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setDetail(item)}
|
||||
onDoubleClick={() => toggleSelect(item.classname)}
|
||||
className={cn(
|
||||
"flex w-full flex-col overflow-hidden rounded-xl border text-left transition-all outline-none focus-visible:ring-2 focus-visible:ring-[var(--admin-accent)]",
|
||||
isSel
|
||||
@@ -1683,7 +1818,7 @@ export function StudioClient({
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-1 px-2 pb-1.5">
|
||||
<Badge className="h-4 text-[var(--admin-accent-foreground)]">
|
||||
<Badge className="h-4 bg-[var(--admin-accent)] text-[var(--admin-accent-foreground)]">
|
||||
{TYPE_LABELS[item.type] ?? item.type}
|
||||
</Badge>
|
||||
{item.alreadyImported ? (
|
||||
@@ -1724,7 +1859,7 @@ export function StudioClient({
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
<Badge className="h-4 text-[var(--admin-accent-foreground)]">
|
||||
<Badge className="h-4 bg-[var(--admin-accent)] text-[var(--admin-accent-foreground)]">
|
||||
New
|
||||
</Badge>
|
||||
)}
|
||||
@@ -1737,12 +1872,13 @@ export function StudioClient({
|
||||
toggleSelect(item.classname);
|
||||
}}
|
||||
className={cn(
|
||||
"absolute right-1.5 top-1.5 grid h-5 w-5 place-items-center rounded-md border transition-colors",
|
||||
"absolute right-2 top-2 grid h-8 w-8 place-items-center rounded-md border transition-colors",
|
||||
isSel
|
||||
? "border-[var(--admin-accent)] bg-[var(--admin-accent)]"
|
||||
: "border-[var(--admin-border)] bg-[var(--admin-surface)] hover:border-[var(--admin-accent)]/60",
|
||||
)}
|
||||
aria-label={isSel ? "Deselect" : "Select"}
|
||||
aria-label={`${isSel ? "Deselect" : "Select"} ${item.name}`}
|
||||
aria-pressed={isSel}
|
||||
>
|
||||
{isSel ? (
|
||||
<Check
|
||||
@@ -1757,11 +1893,17 @@ export function StudioClient({
|
||||
</div>
|
||||
) : (
|
||||
<div className="overflow-x-auto rounded-lg border border-[var(--admin-border)]">
|
||||
<table className="w-full text-xs">
|
||||
<thead className="bg-[var(--admin-accent)]/8">
|
||||
<table className="w-full min-w-[660px] text-sm">
|
||||
<thead className="sticky top-0 z-10 bg-[var(--admin-surface)]">
|
||||
<tr>
|
||||
<th className="w-9 px-2 py-2 text-left">
|
||||
<Checkbox
|
||||
style={{
|
||||
display: "inline-flex",
|
||||
width: 18,
|
||||
height: 18,
|
||||
}}
|
||||
className="border-[var(--admin-border)] bg-[var(--admin-surface)] data-checked:border-[var(--admin-accent)] data-checked:bg-[var(--admin-accent)] data-checked:text-[var(--admin-accent-foreground)]"
|
||||
checked={allSelected}
|
||||
onCheckedChange={toggleAll}
|
||||
aria-label="Select all"
|
||||
@@ -1794,10 +1936,20 @@ export function StudioClient({
|
||||
return (
|
||||
<tr
|
||||
key={item.classname}
|
||||
className="border-t border-[var(--admin-border)] transition-colors hover:bg-[var(--admin-accent)]/5"
|
||||
aria-selected={isSel}
|
||||
className={cn(
|
||||
"border-t border-[var(--admin-border)] transition-colors hover:bg-[var(--admin-accent)]/5",
|
||||
isSel && "bg-[var(--admin-accent)]/10",
|
||||
)}
|
||||
>
|
||||
<td className="px-2 py-1.5">
|
||||
<Checkbox
|
||||
style={{
|
||||
display: "inline-flex",
|
||||
width: 18,
|
||||
height: 18,
|
||||
}}
|
||||
className="border-[var(--admin-border)] bg-[var(--admin-surface)] data-checked:border-[var(--admin-accent)] data-checked:bg-[var(--admin-accent)] data-checked:text-[var(--admin-accent-foreground)]"
|
||||
checked={isSel}
|
||||
onCheckedChange={() =>
|
||||
toggleSelect(item.classname)
|
||||
@@ -1873,7 +2025,7 @@ export function StudioClient({
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<Badge className="h-4 text-[var(--admin-accent-foreground)]">
|
||||
<Badge className="h-4 bg-[var(--admin-accent)] text-[var(--admin-accent-foreground)]">
|
||||
New
|
||||
</Badge>
|
||||
)}
|
||||
@@ -1886,7 +2038,7 @@ export function StudioClient({
|
||||
onClick={() => importSingle(item)}
|
||||
disabled={importingId !== null}
|
||||
aria-label={`Import ${item.classname}`}
|
||||
className="grid h-6 w-6 place-items-center rounded-md text-[var(--admin-text-muted)] transition-colors hover:bg-[var(--admin-accent)]/10 hover:text-[var(--admin-text)] disabled:opacity-50"
|
||||
className="grid h-9 w-9 place-items-center rounded-md text-[var(--admin-text-muted)] transition-colors hover:bg-[var(--admin-accent)]/10 hover:text-[var(--admin-text)] disabled:opacity-50"
|
||||
>
|
||||
{importingId === item.classname ? (
|
||||
<Loader2
|
||||
@@ -1905,7 +2057,7 @@ export function StudioClient({
|
||||
setEditingClassname(item.classname)
|
||||
}
|
||||
aria-label={`Edit nitro ${item.classname}`}
|
||||
className="grid h-6 w-6 place-items-center rounded-md text-[var(--admin-text-muted)] transition-colors hover:bg-[var(--admin-accent)]/10 hover:text-[var(--admin-text)]"
|
||||
className="grid h-9 w-9 place-items-center rounded-md text-[var(--admin-text-muted)] transition-colors hover:bg-[var(--admin-accent)]/10 hover:text-[var(--admin-text)]"
|
||||
>
|
||||
<Pencil size={12} />
|
||||
</button>
|
||||
@@ -1919,7 +2071,7 @@ export function StudioClient({
|
||||
item.classname,
|
||||
)}
|
||||
aria-label={`Regenerate nitro ${item.classname}`}
|
||||
className="grid h-6 w-6 place-items-center rounded-md text-[var(--admin-warning)] transition-colors hover:bg-[var(--admin-warning)]/10 disabled:opacity-50"
|
||||
className="grid h-9 w-9 place-items-center rounded-md text-[var(--admin-warning)] transition-colors hover:bg-[var(--admin-warning)]/10 disabled:opacity-50"
|
||||
>
|
||||
{regeneratingNitro.has(
|
||||
item.classname,
|
||||
@@ -1985,11 +2137,12 @@ export function StudioClient({
|
||||
onCancel={cloneAllAbortRef.current ? cancelCloneAll : cancelBatch}
|
||||
onDismiss={() => {
|
||||
setBatchProgress(null);
|
||||
batchDoneRef.current = false;
|
||||
setBatchDone(false);
|
||||
setVerification(null);
|
||||
setFailedClassnames([]);
|
||||
}}
|
||||
onRetry={activeSource ? retryFailed : undefined}
|
||||
onRetry={retryFailed}
|
||||
/>
|
||||
) : null}
|
||||
</main>
|
||||
|
||||
Reference in new issue
Block a user