1258 lines
37 KiB
TypeScript
1258 lines
37 KiB
TypeScript
"use client";
|
|
|
|
import { useVirtualizer } from "@tanstack/react-virtual";
|
|
import {
|
|
AlertTriangle,
|
|
CheckCircle2,
|
|
Clock,
|
|
Download,
|
|
FileX2,
|
|
Loader2,
|
|
ScanSearch,
|
|
ScrollText,
|
|
Sparkles,
|
|
Trash2,
|
|
Wrench,
|
|
X,
|
|
} from "lucide-react";
|
|
import { useTranslations } from "next-intl";
|
|
import { useCallback, useEffect, useRef, useState } from "react";
|
|
import { toast } from "sonner";
|
|
import { useConfirmDialog } from "@/components/admin/confirm-dialog";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Checkbox } from "@/components/ui/checkbox";
|
|
import { Input } from "@/components/ui/input";
|
|
import { adminFetch } from "@/lib/admin-fetch";
|
|
import { formatBytes } from "@/lib/services/disk-usage";
|
|
import { readSseStream } from "@/lib/sse-client";
|
|
|
|
interface AssetEntry {
|
|
fileName: string;
|
|
base: string;
|
|
size: number;
|
|
dirs: string[];
|
|
lastModified: number;
|
|
error?: string;
|
|
}
|
|
|
|
type GroupKey = "fake" | "broken" | "orphanedSwf" | "orphanedIcon";
|
|
|
|
interface ScanData {
|
|
fake: AssetEntry[];
|
|
broken: AssetEntry[];
|
|
orphanedSwf: AssetEntry[];
|
|
orphanedIcon: AssetEntry[];
|
|
total: number;
|
|
cached: boolean;
|
|
}
|
|
|
|
interface ScanSession {
|
|
id: string;
|
|
state: "running" | "done" | "cancelled" | "error";
|
|
startedAt: string;
|
|
updatedAt: string;
|
|
force?: boolean;
|
|
progress?: { phase: string; scanned: number };
|
|
cached?: boolean;
|
|
total?: number;
|
|
error?: string;
|
|
}
|
|
|
|
interface DeleteResponse {
|
|
deleted: number;
|
|
copiesRemoved: number;
|
|
errors?: string[];
|
|
}
|
|
|
|
interface RepairResponse {
|
|
repaired: number;
|
|
failed: number;
|
|
errors?: string[];
|
|
}
|
|
|
|
interface AutoCleanResponse {
|
|
deleted: number;
|
|
copiesRemoved: number;
|
|
skippedRecent: number;
|
|
skippedBroken: number;
|
|
errors?: string[];
|
|
}
|
|
|
|
interface HistoryEntry {
|
|
triggeredAt: string;
|
|
triggeredBy: "manual" | "scheduled";
|
|
maxAgeDays: number;
|
|
deleted: number;
|
|
copiesRemoved: number;
|
|
skippedRecent: number;
|
|
skippedBroken: number;
|
|
errors: string[];
|
|
}
|
|
|
|
type GroupTone = "error" | "warning" | "neutral";
|
|
type AssetKind = "nitro" | "swf" | "icon";
|
|
|
|
const DAY_MS = 24 * 60 * 60 * 1000;
|
|
const SESSION_POLL_MS = 1500;
|
|
const DATA_IDLE_TIMEOUT_MS = 90_000;
|
|
const SESSION_URL = "/api/admin/studio/nitro-cleanup/session";
|
|
const DATA_URL = "/api/admin/studio/nitro-cleanup";
|
|
|
|
function ageLabel(t: (key: string) => string, lastModified: number): string {
|
|
if (!lastModified) return t("ageUnknown");
|
|
const days = Math.floor((Date.now() - lastModified) / DAY_MS);
|
|
if (days < 1) return t("ageBelow");
|
|
if (days < 30) return `${days}d`;
|
|
if (days < 365) return `${Math.floor(days / 30)}mo`;
|
|
return `${Math.floor(days / 365)}y`;
|
|
}
|
|
|
|
function downloadJson(filename: string, data: unknown): void {
|
|
const blob = new Blob([JSON.stringify(data, null, 2)], {
|
|
type: "application/json",
|
|
});
|
|
const url = URL.createObjectURL(blob);
|
|
const anchor = document.createElement("a");
|
|
anchor.href = url;
|
|
anchor.download = filename;
|
|
anchor.click();
|
|
URL.revokeObjectURL(url);
|
|
}
|
|
|
|
/**
|
|
* Virtualized list for one cleanup group. Directories can hold tens of
|
|
* thousands of leftover files; only the visible rows are mounted as DOM nodes,
|
|
* so the tab never freezes no matter how long the list is.
|
|
*/
|
|
function VirtualAssetList({
|
|
entries,
|
|
selected,
|
|
disabled = false,
|
|
onToggle,
|
|
copiesLabel,
|
|
formatAge,
|
|
}: {
|
|
entries: AssetEntry[];
|
|
selected: Set<string>;
|
|
disabled?: boolean;
|
|
onToggle: (fileName: string) => void;
|
|
copiesLabel: string;
|
|
formatAge: (lastModified: number) => string;
|
|
}) {
|
|
const parentRef = useRef<HTMLDivElement>(null);
|
|
const virtualizer = useVirtualizer({
|
|
count: entries.length,
|
|
getScrollElement: () => parentRef.current,
|
|
estimateSize: () => 30,
|
|
overscan: 10,
|
|
});
|
|
|
|
return (
|
|
<div
|
|
ref={parentRef}
|
|
className="max-h-80 overflow-auto rounded-lg border border-[var(--admin-border)] bg-[var(--admin-surface)] p-2"
|
|
>
|
|
<div style={{ height: virtualizer.getTotalSize(), position: "relative" }}>
|
|
{virtualizer.getVirtualItems().map((virtualItem) => {
|
|
const entry = entries[virtualItem.index];
|
|
return (
|
|
<div
|
|
key={entry.fileName}
|
|
data-index={virtualItem.index}
|
|
ref={virtualizer.measureElement}
|
|
className="absolute left-0 top-0 flex w-full items-center gap-2 rounded-md px-2 text-sm hover:bg-[var(--admin-accent)]/5"
|
|
style={{
|
|
height: virtualItem.size,
|
|
transform: `translateY(${virtualItem.start}px)`,
|
|
}}
|
|
>
|
|
<Checkbox
|
|
style={{ display: "inline-flex", width: 16, height: 16 }}
|
|
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={selected.has(entry.fileName)}
|
|
disabled={disabled}
|
|
onCheckedChange={() => onToggle(entry.fileName)}
|
|
aria-label={`Select ${entry.fileName}`}
|
|
/>
|
|
<code className="min-w-0 flex-1 truncate font-mono text-xs">
|
|
{entry.fileName}
|
|
</code>
|
|
<span className="shrink-0 text-xs text-[var(--admin-text-muted)]">
|
|
{formatBytes(entry.size)}
|
|
</span>
|
|
<span className="shrink-0 text-xs text-[var(--admin-text-muted)]">
|
|
{formatAge(entry.lastModified)}
|
|
</span>
|
|
{entry.error && (
|
|
<span
|
|
title={entry.error}
|
|
className="hidden max-w-[320px] truncate text-xs text-[var(--admin-error)] lg:block"
|
|
>
|
|
{entry.error}
|
|
</span>
|
|
)}
|
|
{entry.dirs.length > 1 && (
|
|
<span className="shrink-0 rounded bg-[var(--admin-accent)]/10 px-1.5 py-0.5 text-[10px] font-medium text-[var(--admin-text-muted)]">
|
|
{copiesLabel.replace("{count}", String(entry.dirs.length))}
|
|
</span>
|
|
)}
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function CleanupGroup({
|
|
label,
|
|
description,
|
|
tone,
|
|
entries,
|
|
selected,
|
|
disabled = false,
|
|
onToggle,
|
|
onToggleAll,
|
|
emptyLabel,
|
|
selectedLabel,
|
|
copiesLabel,
|
|
formatAge,
|
|
}: {
|
|
label: string;
|
|
description: string;
|
|
tone: GroupTone;
|
|
entries: AssetEntry[];
|
|
selected: Set<string>;
|
|
disabled?: boolean;
|
|
onToggle: (fileName: string) => void;
|
|
onToggleAll: (names: string[]) => void;
|
|
emptyLabel: string;
|
|
selectedLabel: string;
|
|
copiesLabel: string;
|
|
formatAge: (lastModified: number) => string;
|
|
}) {
|
|
const checked = entries.filter((e) => selected.has(e.fileName));
|
|
const allChecked = entries.length > 0 && checked.length === entries.length;
|
|
const toneClass =
|
|
tone === "error"
|
|
? "border-[var(--admin-error-border)] bg-[var(--admin-error-subtle)]"
|
|
: tone === "warning"
|
|
? "border-[var(--admin-warning-border)] bg-[var(--admin-warning-subtle)]"
|
|
: "border-[var(--admin-border)] bg-[var(--admin-surface)]";
|
|
|
|
return (
|
|
<section className="space-y-2">
|
|
<div
|
|
className={`flex flex-wrap items-center gap-2 rounded-lg border p-3 ${entries.length > 0 ? toneClass : "border-[var(--admin-border)] bg-[var(--admin-surface)]"}`}
|
|
>
|
|
<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={allChecked}
|
|
disabled={disabled || entries.length === 0}
|
|
onCheckedChange={() => onToggleAll(entries.map((e) => e.fileName))}
|
|
aria-label={`Select all ${label}`}
|
|
/>
|
|
<div className="min-w-0 flex-1">
|
|
<h3
|
|
className={`text-sm font-medium ${entries.length > 0 ? "text-[var(--admin-text)]" : "text-[var(--admin-text-muted)]"}`}
|
|
>
|
|
{label} ({entries.length})
|
|
</h3>
|
|
<p className="text-xs text-[var(--admin-text-muted)]">
|
|
{description}
|
|
</p>
|
|
</div>
|
|
{checked.length > 0 && (
|
|
<span className="text-xs font-medium text-[var(--admin-accent)]">
|
|
{selectedLabel.replace("{count}", String(checked.length))}
|
|
</span>
|
|
)}
|
|
</div>
|
|
|
|
{entries.length === 0 ? (
|
|
<p className="flex items-center gap-1.5 px-2 text-xs text-[var(--admin-success)]">
|
|
<CheckCircle2 size={13} />
|
|
{emptyLabel}
|
|
</p>
|
|
) : (
|
|
<VirtualAssetList
|
|
entries={entries}
|
|
selected={selected}
|
|
disabled={disabled}
|
|
onToggle={onToggle}
|
|
copiesLabel={copiesLabel}
|
|
formatAge={formatAge}
|
|
/>
|
|
)}
|
|
</section>
|
|
);
|
|
}
|
|
|
|
export function NitroCleanupPanel() {
|
|
const t = useTranslations("admin.studio.nitroCleanup");
|
|
const formatAge = (lastModified: number): string => ageLabel(t, lastModified);
|
|
|
|
const [scanning, setScanning] = useState(false);
|
|
const [deleting, setDeleting] = useState(false);
|
|
const [repairing, setRepairing] = useState(false);
|
|
const [autoCleaning, setAutoCleaning] = useState(false);
|
|
const [exporting, setExporting] = useState(false);
|
|
const [loading, setLoading] = useState(false);
|
|
const [autoAge, setAutoAge] = useState(30);
|
|
const [minAgeDays, setMinAgeDays] = useState(0);
|
|
const [onlyOld, setOnlyOld] = useState(false);
|
|
const [session, setSession] = useState<ScanSession | null>(null);
|
|
const [attachedToExisting, setAttachedToExisting] = useState(false);
|
|
const [scan, setScan] = useState<ScanData | null>(null);
|
|
const [history, setHistory] = useState<HistoryEntry[]>([]);
|
|
const [showHistory, setShowHistory] = useState(false);
|
|
const [selected, setSelected] = useState<Set<string>>(new Set());
|
|
const [selectedSwf, setSelectedSwf] = useState<Set<string>>(new Set());
|
|
const [selectedIcon, setSelectedIcon] = useState<Set<string>>(new Set());
|
|
const [repairProgress, setRepairProgress] = useState<{
|
|
completed: number;
|
|
total: number;
|
|
ok: number;
|
|
failed: number;
|
|
} | null>(null);
|
|
const abortRef = useRef<AbortController | null>(null);
|
|
const loadAbortRef = useRef<AbortController | null>(null);
|
|
const { confirm, dialog } = useConfirmDialog();
|
|
// Latest filter values, read from effects without putting them in deps.
|
|
const filterRef = useRef({ onlyOld, minAgeDays });
|
|
useEffect(() => {
|
|
filterRef.current = { onlyOld, minAgeDays };
|
|
});
|
|
|
|
const busy = scanning || deleting || repairing || autoCleaning || exporting;
|
|
const running = session?.state === "running" || (scanning && !session);
|
|
|
|
const fetchSession = useCallback(async (): Promise<ScanSession | null> => {
|
|
const res = await adminFetch(SESSION_URL, {
|
|
headers: { Accept: "application/json" },
|
|
});
|
|
if (!res.ok) return null;
|
|
const data = (await res.json()) as { session?: ScanSession | null };
|
|
return data.session ?? null;
|
|
}, []);
|
|
|
|
/** Assemble the persisted result from the chunked /data stream. */
|
|
const loadData = useCallback(async (minAge: number): Promise<void> => {
|
|
loadAbortRef.current?.abort();
|
|
const abort = new AbortController();
|
|
loadAbortRef.current = abort;
|
|
setLoading(true);
|
|
const params = new URLSearchParams();
|
|
if (minAge > 0) params.set("minAgeDays", String(minAge));
|
|
const holder: {
|
|
summary: {
|
|
total: number;
|
|
cached: boolean;
|
|
groups: Record<GroupKey, number>;
|
|
} | null;
|
|
arrays: Partial<Record<GroupKey, AssetEntry[]>>;
|
|
error: string | null;
|
|
} = { summary: null, arrays: {}, error: null };
|
|
try {
|
|
const res = await adminFetch(
|
|
`${DATA_URL}${params.size > 0 ? `?${params.toString()}` : ""}`,
|
|
{
|
|
headers: { Accept: "text/event-stream" },
|
|
signal: abort.signal,
|
|
credentials: "same-origin",
|
|
},
|
|
);
|
|
if (!res.ok) {
|
|
const body = (await res.json().catch(() => null)) as {
|
|
error?: string;
|
|
} | null;
|
|
throw new Error(
|
|
typeof body?.error === "string"
|
|
? body.error
|
|
: `Failed to load scan result (HTTP ${res.status})`,
|
|
);
|
|
}
|
|
if (!res.body) throw new Error("No response stream");
|
|
await readSseStream(
|
|
res.body,
|
|
(evt) => {
|
|
if (evt.type === "summary") {
|
|
holder.summary = {
|
|
total: Number(evt.total ?? 0),
|
|
cached: evt.cached === true,
|
|
groups: (evt.groups as Record<GroupKey, number>) ?? {
|
|
fake: 0,
|
|
broken: 0,
|
|
orphanedSwf: 0,
|
|
orphanedIcon: 0,
|
|
},
|
|
};
|
|
for (const group of Object.keys(
|
|
holder.summary.groups,
|
|
) as GroupKey[]) {
|
|
holder.arrays[group] = new Array(
|
|
holder.summary.groups[group] ?? 0,
|
|
).fill(null);
|
|
}
|
|
} else if (evt.type === "chunk") {
|
|
const group = evt.group as GroupKey;
|
|
const offset = Number(evt.offset ?? 0);
|
|
const entries = (evt.entries ?? []) as AssetEntry[];
|
|
const target = holder.arrays[group];
|
|
if (target) {
|
|
for (let i = 0; i < entries.length; i++) {
|
|
target[offset + i] = entries[i];
|
|
}
|
|
}
|
|
} else if (evt.type === "error") {
|
|
holder.error = String(evt.message ?? "Failed to load scan result");
|
|
}
|
|
},
|
|
abort.signal,
|
|
DATA_IDLE_TIMEOUT_MS,
|
|
);
|
|
if (holder.error) throw new Error(holder.error);
|
|
if (abort.signal.aborted) return;
|
|
if (!holder.summary) throw new Error("No scan result yet");
|
|
const arr = (g: GroupKey): AssetEntry[] =>
|
|
(holder.arrays[g] ?? []) as AssetEntry[];
|
|
setScan({
|
|
fake: arr("fake"),
|
|
broken: arr("broken"),
|
|
orphanedSwf: arr("orphanedSwf"),
|
|
orphanedIcon: arr("orphanedIcon"),
|
|
total: holder.summary.total,
|
|
cached: holder.summary.cached,
|
|
});
|
|
} catch (err) {
|
|
if ((err as Error).name !== "AbortError" && !abort.signal.aborted) {
|
|
toast.error(
|
|
err instanceof Error ? err.message : "Failed to load scan result",
|
|
);
|
|
}
|
|
} finally {
|
|
setLoading(false);
|
|
if (loadAbortRef.current === abort) loadAbortRef.current = null;
|
|
}
|
|
}, []);
|
|
|
|
/** Attach to whatever scan is currently persisted, restarting the poll
|
|
* when a new one begins in another tab. */
|
|
useEffect(() => {
|
|
let active = true;
|
|
const attach = async () => {
|
|
const s = await fetchSession();
|
|
if (active) setSession(s);
|
|
};
|
|
void attach();
|
|
return () => {
|
|
active = false;
|
|
};
|
|
}, [fetchSession]);
|
|
|
|
// Poll while a scan is running; the detached server process keeps updating
|
|
// the session file even if this exact tab reloaded between polls.
|
|
useEffect(() => {
|
|
if (session?.state !== "running") return;
|
|
const timer = setInterval(async () => {
|
|
const s = await fetchSession();
|
|
if (s) setSession(s);
|
|
}, SESSION_POLL_MS);
|
|
return () => clearInterval(timer);
|
|
}, [session?.state, fetchSession]);
|
|
|
|
// When the persisted session turns done, load the result (also covers the
|
|
// very first mount where a previous scan already completed). Filter changes
|
|
// re-fetch through the toggle handlers; the effect is idempotent while the
|
|
// session object stays the same, and running sessions no-op here.
|
|
useEffect(() => {
|
|
if (session?.state === "error" && session.error) {
|
|
toast.error(session.error);
|
|
}
|
|
if (session?.state === "done") {
|
|
const filter = filterRef.current;
|
|
void loadData(filter.onlyOld ? filter.minAgeDays : 0);
|
|
}
|
|
}, [session, loadData]);
|
|
|
|
useEffect(() => {
|
|
const loadHistory = async () => {
|
|
const res = await adminFetch("/api/admin/studio/nitro-cleanup/history", {
|
|
headers: { Accept: "application/json" },
|
|
});
|
|
if (!res.ok) return;
|
|
const data = (await res.json()) as { history?: HistoryEntry[] };
|
|
setHistory(data.history ?? []);
|
|
};
|
|
void loadHistory();
|
|
}, []);
|
|
|
|
const startScan = useCallback(
|
|
async (force: boolean) => {
|
|
if (busy || running) return;
|
|
setScanning(true);
|
|
setAttachedToExisting(false);
|
|
try {
|
|
const res = await adminFetch("/api/admin/studio/nitro-cleanup/run", {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({ force }),
|
|
});
|
|
const data = (await res.json()) as {
|
|
session?: ScanSession;
|
|
conflict?: boolean;
|
|
error?: string;
|
|
};
|
|
if (!res.ok || !data.session) {
|
|
throw new Error(
|
|
data.error || `Failed to start scan (HTTP ${res.status})`,
|
|
);
|
|
}
|
|
setSession(data.session);
|
|
setScan(null);
|
|
setSelected(new Set());
|
|
setSelectedSwf(new Set());
|
|
setSelectedIcon(new Set());
|
|
if (data.conflict) {
|
|
setAttachedToExisting(true);
|
|
toast.info(t("alreadyRunning"));
|
|
}
|
|
} catch (err) {
|
|
toast.error(
|
|
err instanceof Error ? err.message : "Failed to start scan",
|
|
);
|
|
} finally {
|
|
setScanning(false);
|
|
}
|
|
},
|
|
[busy, running, t],
|
|
);
|
|
|
|
const cancelScan = useCallback(async () => {
|
|
await adminFetch("/api/admin/studio/nitro-cleanup/cancel", {
|
|
method: "POST",
|
|
headers: { Accept: "application/json" },
|
|
});
|
|
setScanning(false);
|
|
}, []);
|
|
|
|
const toggle = (kind: AssetKind) => (fileName: string) => {
|
|
const setter =
|
|
kind === "swf"
|
|
? setSelectedSwf
|
|
: kind === "icon"
|
|
? setSelectedIcon
|
|
: setSelected;
|
|
setter((prev) => {
|
|
const next = new Set(prev);
|
|
if (next.has(fileName)) next.delete(fileName);
|
|
else next.add(fileName);
|
|
return next;
|
|
});
|
|
};
|
|
|
|
const toggleAll = (kind: AssetKind) => (names: string[]) => {
|
|
const setter =
|
|
kind === "swf"
|
|
? setSelectedSwf
|
|
: kind === "icon"
|
|
? setSelectedIcon
|
|
: setSelected;
|
|
setter((prev) => {
|
|
const next = new Set(prev);
|
|
const allChecked = names.every((n) => next.has(n));
|
|
for (const name of names) {
|
|
if (allChecked) next.delete(name);
|
|
else next.add(name);
|
|
}
|
|
return next;
|
|
});
|
|
};
|
|
|
|
const totalSelected = selected.size + selectedSwf.size + selectedIcon.size;
|
|
|
|
/** Drop deleted/attempted files from the loaded scan without re-scanning. */
|
|
const dropFromScan = (kind: AssetKind, names: string[], removed = 0) => {
|
|
const remove = new Set(names);
|
|
if (remove.size === 0) return;
|
|
setScan((prev) => {
|
|
if (!prev) return prev;
|
|
const drop = <T extends { fileName: string }>(list: T[]): T[] =>
|
|
list.filter((entry) => !remove.has(entry.fileName));
|
|
return {
|
|
...prev,
|
|
fake: kind === "nitro" ? drop(prev.fake) : prev.fake,
|
|
broken: kind === "nitro" ? drop(prev.broken) : prev.broken,
|
|
orphanedSwf: kind === "swf" ? drop(prev.orphanedSwf) : prev.orphanedSwf,
|
|
orphanedIcon:
|
|
kind === "icon" ? drop(prev.orphanedIcon) : prev.orphanedIcon,
|
|
total: Math.max(0, prev.total - removed),
|
|
};
|
|
});
|
|
};
|
|
|
|
const removeSelected = async () => {
|
|
const groups: Array<{ kind: AssetKind; names: string[] }> = [];
|
|
for (const [kind, set] of [
|
|
["nitro", selected],
|
|
["swf", selectedSwf],
|
|
["icon", selectedIcon],
|
|
] as const) {
|
|
const names = [...set];
|
|
if (names.length > 0) groups.push({ kind, names });
|
|
}
|
|
if (groups.length === 0) return;
|
|
const confirmed = await confirm({
|
|
title: t("confirmDeleteTitle", { count: totalSelected }),
|
|
description: t("confirmDeleteDescription"),
|
|
confirmLabel: t("confirmDeleteLabel"),
|
|
variant: "danger",
|
|
});
|
|
if (!confirmed) return;
|
|
setDeleting(true);
|
|
try {
|
|
let copiesRemoved = 0;
|
|
let deleted = 0;
|
|
let hadErrors = false;
|
|
for (const group of groups) {
|
|
const res = await adminFetch(DATA_URL, {
|
|
method: "DELETE",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({
|
|
fileNames: group.names.sort(),
|
|
kind: group.kind,
|
|
}),
|
|
});
|
|
const data = (await res.json()) as DeleteResponse & {
|
|
error?: string;
|
|
};
|
|
if (!res.ok) throw new Error(data.error || "Delete failed");
|
|
deleted += data.deleted ?? 0;
|
|
copiesRemoved += data.copiesRemoved ?? 0;
|
|
if (data.errors?.length) hadErrors = true;
|
|
dropFromScan(group.kind, group.names, data.deleted ?? 0);
|
|
}
|
|
if (hadErrors) {
|
|
toast.warning(t("toastDeletePartial", { copies: copiesRemoved }));
|
|
} else {
|
|
toast.success(t("toastDeleteDone", { copies: copiesRemoved, deleted }));
|
|
}
|
|
setSelected(new Set());
|
|
setSelectedSwf(new Set());
|
|
setSelectedIcon(new Set());
|
|
} catch (err) {
|
|
toast.error(err instanceof Error ? err.message : "Delete failed");
|
|
} finally {
|
|
setDeleting(false);
|
|
}
|
|
};
|
|
|
|
const repairSelected = async () => {
|
|
const fileNames = [...selected]
|
|
.filter((name) => scan?.broken.some((e) => e.fileName === name))
|
|
.sort();
|
|
if (fileNames.length === 0) return;
|
|
const confirmed = await confirm({
|
|
title: t("confirmRepairTitle", { count: fileNames.length }),
|
|
description: t("confirmRepairDescription"),
|
|
confirmLabel: t("confirmRepairLabel"),
|
|
variant: "default",
|
|
});
|
|
if (!confirmed) return;
|
|
abortRef.current?.abort();
|
|
setRepairing(true);
|
|
setRepairProgress(null);
|
|
const abort = new AbortController();
|
|
abortRef.current = abort;
|
|
|
|
const holder: { result: RepairResponse | null } = { result: null };
|
|
let lastError: string | null = null;
|
|
try {
|
|
const res = await adminFetch("/api/admin/studio/nitro-cleanup/rebuild", {
|
|
method: "POST",
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
Accept: "text/event-stream",
|
|
},
|
|
body: JSON.stringify({ fileNames }),
|
|
signal: abort.signal,
|
|
});
|
|
if (!res.ok) {
|
|
const body = (await res.json().catch(() => null)) as {
|
|
error?: string;
|
|
} | null;
|
|
throw new Error(
|
|
typeof body?.error === "string"
|
|
? body.error
|
|
: `Repair failed (HTTP ${res.status})`,
|
|
);
|
|
}
|
|
if (!res.body) throw new Error("Repair returned no response body");
|
|
|
|
await readSseStream(
|
|
res.body,
|
|
(evt) => {
|
|
if (evt.type === "progress") {
|
|
setRepairProgress({
|
|
completed: Number(evt.completed ?? 0),
|
|
total: Number(evt.total ?? fileNames.length),
|
|
ok: Number(evt.ok ?? 0),
|
|
failed: Number(evt.failed ?? 0),
|
|
});
|
|
} else if (evt.type === "result") {
|
|
holder.result = {
|
|
repaired: Number(evt.repaired ?? 0),
|
|
failed: Number(evt.failed ?? 0),
|
|
errors: Array.isArray(evt.errors)
|
|
? evt.errors.map(String)
|
|
: undefined,
|
|
};
|
|
} else if (evt.type === "error") {
|
|
lastError = String(evt.message ?? "Repair failed");
|
|
}
|
|
},
|
|
abort.signal,
|
|
120_000,
|
|
);
|
|
|
|
if (lastError) throw new Error(lastError);
|
|
const data = holder.result;
|
|
if (data && data.repaired > 0) {
|
|
toast.success(t("toastRepairDone", { count: data.repaired }));
|
|
} else if (data) {
|
|
toast.warning(t("toastRepairFailed", { failed: data.failed }));
|
|
}
|
|
// Only drop the attempted bundles when every one succeeded; partial
|
|
// failures stay visible so they can be retried.
|
|
if (data && data.repaired >= fileNames.length) {
|
|
dropFromScan("nitro", fileNames);
|
|
}
|
|
setSelected(new Set());
|
|
} catch (err) {
|
|
if ((err as Error).name === "AbortError") {
|
|
toast.info(t("toastRepairCancelled"));
|
|
} else {
|
|
toast.error(err instanceof Error ? err.message : "Repair failed");
|
|
}
|
|
} finally {
|
|
setRepairing(false);
|
|
setRepairProgress(null);
|
|
if (abortRef.current === abort) abortRef.current = null;
|
|
}
|
|
};
|
|
|
|
const autoClean = async () => {
|
|
if (scan === null) return;
|
|
const confirmed = await confirm({
|
|
title: t("confirmAutoCleanTitle", { days: autoAge }),
|
|
description: t("confirmAutoCleanDescription"),
|
|
confirmLabel: t("confirmAutoCleanLabel"),
|
|
variant: "danger",
|
|
});
|
|
if (!confirmed) return;
|
|
setAutoCleaning(true);
|
|
try {
|
|
const res = await adminFetch(
|
|
"/api/admin/studio/nitro-cleanup/auto-clean",
|
|
{
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({ maxAgeDays: autoAge }),
|
|
},
|
|
);
|
|
const data = (await res.json()) as AutoCleanResponse & {
|
|
error?: string;
|
|
};
|
|
if (!res.ok) throw new Error(data.error || "Auto-clean failed");
|
|
if (data.deleted > 0) {
|
|
toast.success(
|
|
t("toastAutoCleanDone", {
|
|
deleted: data.deleted,
|
|
copies: data.copiesRemoved,
|
|
recent: data.skippedRecent,
|
|
broken: data.skippedBroken,
|
|
}),
|
|
);
|
|
const removable = (scan.fake ?? [])
|
|
.filter(
|
|
(entry) =>
|
|
Math.floor((Date.now() - entry.lastModified) / DAY_MS) >= autoAge,
|
|
)
|
|
.map((entry) => entry.fileName);
|
|
dropFromScan("nitro", removable, data.deleted);
|
|
} else {
|
|
toast.info(
|
|
t("toastAutoCleanNothing", {
|
|
recent: data.skippedRecent,
|
|
broken: data.skippedBroken,
|
|
}),
|
|
);
|
|
}
|
|
const hres = await adminFetch("/api/admin/studio/nitro-cleanup/history", {
|
|
headers: { Accept: "application/json" },
|
|
});
|
|
const hdata = (await hres.json()) as { history?: HistoryEntry[] };
|
|
setHistory(hdata.history ?? []);
|
|
} catch (err) {
|
|
toast.error(err instanceof Error ? err.message : "Auto-clean failed");
|
|
} finally {
|
|
setAutoCleaning(false);
|
|
}
|
|
};
|
|
|
|
const exportManifest = async () => {
|
|
if (scan === null) return;
|
|
setExporting(true);
|
|
try {
|
|
const res = await adminFetch(`${DATA_URL}?full=1`, {
|
|
headers: { Accept: "application/json" },
|
|
});
|
|
const data = (await res.json()) as ScanData & {
|
|
error?: string;
|
|
};
|
|
if (!res.ok || data.error) {
|
|
throw new Error(data.error || `Export failed (HTTP ${res.status})`);
|
|
}
|
|
const entries = {
|
|
scannedAt: new Date().toISOString(),
|
|
total: data.total ?? 0,
|
|
fake: data.fake ?? [],
|
|
broken: data.broken ?? [],
|
|
orphanedSwf: data.orphanedSwf ?? [],
|
|
orphanedIcon: data.orphanedIcon ?? [],
|
|
selected: {
|
|
nitro: [...selected].sort(),
|
|
swf: [...selectedSwf].sort(),
|
|
icon: [...selectedIcon].sort(),
|
|
},
|
|
};
|
|
downloadJson(`nitro-cleanup-scan-${Date.now()}.json`, entries);
|
|
toast.success(t("toastManifestDownload"));
|
|
} catch (err) {
|
|
toast.error(err instanceof Error ? err.message : "Export failed");
|
|
} finally {
|
|
setExporting(false);
|
|
}
|
|
};
|
|
|
|
const toggleOnlyOld = (value: boolean) => {
|
|
setOnlyOld(value);
|
|
const threshold = value ? Math.max(0, minAgeDays) : 0;
|
|
if (session?.state === "done") void loadData(threshold);
|
|
};
|
|
|
|
const changeMinAgeDays = (value: number) => {
|
|
const days = Number.isFinite(value) && value >= 0 ? Math.floor(value) : 0;
|
|
setMinAgeDays(days);
|
|
if (onlyOld && session?.state === "done") void loadData(days);
|
|
};
|
|
|
|
const phaseLabel = (phase: string): string =>
|
|
phase === "stems"
|
|
? t("phaseStems")
|
|
: phase === "readdir"
|
|
? t("phaseReaddir")
|
|
: phase === "validate"
|
|
? t("phaseValidate")
|
|
: t("phaseScanning");
|
|
|
|
const groupProps = (
|
|
key: GroupKey,
|
|
): {
|
|
label: string;
|
|
description: string;
|
|
tone: GroupTone;
|
|
} => {
|
|
switch (key) {
|
|
case "fake":
|
|
return {
|
|
label: t("groupFakeLabel"),
|
|
description: t("groupFakeDescription"),
|
|
tone: "error",
|
|
};
|
|
case "broken":
|
|
return {
|
|
label: t("groupBrokenLabel"),
|
|
description: t("groupBrokenDescription"),
|
|
tone: "warning",
|
|
};
|
|
case "orphanedSwf":
|
|
return {
|
|
label: t("groupSwfLabel"),
|
|
description: t("groupSwfDescription"),
|
|
tone: "warning",
|
|
};
|
|
default:
|
|
return {
|
|
label: t("groupIconLabel"),
|
|
description: t("groupIconDescription"),
|
|
tone: "neutral",
|
|
};
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="space-y-4">
|
|
{dialog}
|
|
<div className="flex flex-wrap items-center gap-2">
|
|
<Button
|
|
onClick={() => startScan(true)}
|
|
disabled={busy || running}
|
|
size="lg"
|
|
>
|
|
{running ? (
|
|
<Loader2 className="w-4 h-4 animate-spin mr-2" />
|
|
) : (
|
|
<ScanSearch className="w-4 h-4 mr-2" />
|
|
)}
|
|
{running ? t("scanningAssets") : t("scanButton")}
|
|
</Button>
|
|
{running && (
|
|
<Button
|
|
variant="outline"
|
|
size="lg"
|
|
disabled={deleting || repairing || autoCleaning}
|
|
onClick={cancelScan}
|
|
>
|
|
<X className="w-4 h-4 mr-2" />
|
|
{t("cancelButton")}
|
|
</Button>
|
|
)}
|
|
{scan && (
|
|
<Button
|
|
variant="destructive"
|
|
size="lg"
|
|
disabled={busy || running || totalSelected === 0}
|
|
onClick={removeSelected}
|
|
>
|
|
{deleting ? (
|
|
<Loader2 className="w-4 h-4 animate-spin mr-2" />
|
|
) : (
|
|
<Trash2 className="w-4 h-4 mr-2" />
|
|
)}
|
|
{deleting
|
|
? t("deleting")
|
|
: t("deleteSelected", { count: totalSelected })}
|
|
</Button>
|
|
)}
|
|
{scan && scan.broken.length > 0 && (
|
|
<Button
|
|
size="lg"
|
|
disabled={
|
|
busy ||
|
|
running ||
|
|
![...selected].some((n) =>
|
|
scan.broken.some((e) => e.fileName === n),
|
|
)
|
|
}
|
|
onClick={repairSelected}
|
|
>
|
|
{repairing ? (
|
|
<Loader2 className="w-4 h-4 animate-spin mr-2" />
|
|
) : (
|
|
<Wrench className="w-4 h-4 mr-2" />
|
|
)}
|
|
{repairing ? t("redownloading") : t("redownloadBroken")}
|
|
</Button>
|
|
)}
|
|
{scan && scan.fake.length > 0 && (
|
|
<>
|
|
<Button size="lg" disabled={busy || running} onClick={autoClean}>
|
|
{autoCleaning ? (
|
|
<Loader2 className="w-4 h-4 animate-spin mr-2" />
|
|
) : (
|
|
<Sparkles className="w-4 h-4 mr-2" />
|
|
)}
|
|
{autoCleaning ? t("cleaning") : t("autoClean")}
|
|
</Button>
|
|
<div className="flex items-center gap-1.5">
|
|
<Input
|
|
type="number"
|
|
min={0}
|
|
className="w-20"
|
|
value={autoAge}
|
|
disabled={busy || running}
|
|
onChange={(e) => setAutoAge(Number(e.target.value))}
|
|
aria-label={t("autoAgeLabel")}
|
|
/>
|
|
<span className="text-xs text-[var(--admin-text-muted)]">
|
|
{t("daysLabel")}
|
|
</span>
|
|
</div>
|
|
</>
|
|
)}
|
|
{scan && (
|
|
<Button
|
|
variant="outline"
|
|
size="lg"
|
|
disabled={busy || running}
|
|
onClick={exportManifest}
|
|
>
|
|
{exporting ? (
|
|
<Loader2 className="w-4 h-4 animate-spin mr-2" />
|
|
) : (
|
|
<Download className="w-4 h-4 mr-2" />
|
|
)}
|
|
{exporting ? t("exporting") : t("exportManifest")}
|
|
</Button>
|
|
)}
|
|
</div>
|
|
|
|
{running && session?.progress && (
|
|
<div className="flex items-center gap-2 rounded-lg border border-[var(--admin-border)] bg-[var(--admin-surface)] p-3 text-sm text-[var(--admin-text-muted)]">
|
|
<Loader2 className="w-4 h-4 animate-spin shrink-0" />
|
|
{phaseLabel(session.progress.phase)}
|
|
{session.progress.scanned > 0 && (
|
|
<span className="font-mono text-xs">
|
|
{t("scanProgressFiles", {
|
|
count: session.progress.scanned,
|
|
})}
|
|
</span>
|
|
)}
|
|
{attachedToExisting && (
|
|
<span className="text-xs text-[var(--admin-accent)]">
|
|
{t("attachedNotice")}
|
|
</span>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{repairing && repairProgress && (
|
|
<div className="flex items-center gap-2 rounded-lg border border-[var(--admin-border)] bg-[var(--admin-surface)] p-3 text-sm text-[var(--admin-text-muted)]">
|
|
<Loader2 className="w-4 h-4 animate-spin shrink-0" />
|
|
{t("redownloading")}
|
|
<span className="font-mono text-xs">
|
|
{repairProgress.completed}/{repairProgress.total} —{" "}
|
|
{t("repairProgress", {
|
|
ok: repairProgress.ok,
|
|
failed: repairProgress.failed,
|
|
})}
|
|
</span>
|
|
</div>
|
|
)}
|
|
|
|
{session?.state === "cancelled" && (
|
|
<p className="rounded-lg border border-[var(--admin-border)] bg-[var(--admin-surface)] p-3 text-xs text-[var(--admin-text-muted)]">
|
|
{t("sessionCancelled")}
|
|
</p>
|
|
)}
|
|
|
|
{scan && (
|
|
<div className="space-y-4">
|
|
<div className="flex flex-wrap items-center gap-3 rounded-lg border border-[var(--admin-border)] bg-[var(--admin-surface)] p-3">
|
|
<div className="flex items-center gap-2 text-sm text-[var(--admin-text-muted)]">
|
|
<ScrollText size={15} className="shrink-0" />
|
|
<span>{t("onlyOldLabel")}</span>
|
|
</div>
|
|
<Input
|
|
type="number"
|
|
min={0}
|
|
className="w-20"
|
|
value={minAgeDays}
|
|
disabled={busy || running}
|
|
onChange={(e) => changeMinAgeDays(Number(e.target.value))}
|
|
aria-label={t("onlyOldAgeLabel")}
|
|
/>
|
|
<span className="text-xs text-[var(--admin-text-muted)]">
|
|
{t("daysLabel")}
|
|
</span>
|
|
<label
|
|
htmlFor="nitro-hide-recent"
|
|
className="flex items-center gap-1.5 text-sm"
|
|
>
|
|
<Checkbox
|
|
id="nitro-hide-recent"
|
|
checked={onlyOld}
|
|
disabled={busy || running}
|
|
onCheckedChange={(value) => toggleOnlyOld(value === true)}
|
|
/>
|
|
<span>{t("onlyOldToggle")}</span>
|
|
</label>
|
|
</div>
|
|
|
|
{loading && (
|
|
<div className="flex items-center gap-2 rounded-lg border border-[var(--admin-border)] bg-[var(--admin-surface)] p-3 text-xs text-[var(--admin-text-muted)]">
|
|
<Loader2 className="w-4 h-4 animate-spin shrink-0" />
|
|
{t("loadingResult")}
|
|
</div>
|
|
)}
|
|
|
|
<div className="grid gap-3 sm:grid-cols-3">
|
|
<div className="rounded-xl border bg-card p-3 space-y-1">
|
|
<div className="text-xl font-bold">{scan.total}</div>
|
|
<div className="text-xs text-muted-foreground">
|
|
{t("scannedStat")}
|
|
{scan.cached && (
|
|
<span className="text-[var(--admin-accent)]">
|
|
{" "}
|
|
{t("cachedNotice")}
|
|
</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
<div className="rounded-xl border bg-card p-3 space-y-1">
|
|
<div className="text-xl font-bold text-[var(--admin-text)]">
|
|
{scan.fake.length}
|
|
</div>
|
|
<div className="text-xs text-[var(--admin-text-muted)]">
|
|
{t("fakeStat")}
|
|
</div>
|
|
</div>
|
|
<div className="rounded-xl border bg-card p-3 space-y-1">
|
|
<div className="text-xl font-bold text-[var(--admin-text)]">
|
|
{scan.broken.length}
|
|
</div>
|
|
<div className="text-xs text-[var(--admin-text-muted)]">
|
|
{t("brokenStat")}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{(
|
|
[
|
|
["fake", selected],
|
|
["broken", selected],
|
|
["orphanedSwf", selectedSwf],
|
|
["orphanedIcon", selectedIcon],
|
|
] as Array<[GroupKey, Set<string>]>
|
|
).map(([key, set]) => {
|
|
const props = groupProps(key);
|
|
const entries =
|
|
key === "fake"
|
|
? scan.fake
|
|
: key === "broken"
|
|
? scan.broken
|
|
: key === "orphanedSwf"
|
|
? scan.orphanedSwf
|
|
: scan.orphanedIcon;
|
|
return (
|
|
<CleanupGroup
|
|
key={key}
|
|
{...props}
|
|
entries={entries}
|
|
selected={set}
|
|
onToggle={toggle(
|
|
key === "fake" || key === "broken"
|
|
? "nitro"
|
|
: key === "orphanedSwf"
|
|
? "swf"
|
|
: "icon",
|
|
)}
|
|
onToggleAll={toggleAll(
|
|
key === "fake" || key === "broken"
|
|
? "nitro"
|
|
: key === "orphanedSwf"
|
|
? "swf"
|
|
: "icon",
|
|
)}
|
|
disabled={key === "broken" && onlyOld}
|
|
emptyLabel={t("groupEmpty")}
|
|
selectedLabel={t("selectedCount")}
|
|
copiesLabel={t("copiesBadge")}
|
|
formatAge={formatAge}
|
|
/>
|
|
);
|
|
})}
|
|
|
|
{(scan.fake.length > 0 || scan.broken.length > 0) && (
|
|
<p className="flex items-start gap-1.5 rounded-lg border border-[var(--admin-warning-border)] bg-[var(--admin-warning-subtle)] p-3 text-xs text-[var(--admin-text-muted)]">
|
|
<AlertTriangle
|
|
size={14}
|
|
className="mt-0.5 shrink-0 text-[var(--admin-warning)]"
|
|
/>
|
|
{t("warningText")}
|
|
</p>
|
|
)}
|
|
|
|
<div className="flex items-center gap-1.5 text-xs text-[var(--admin-text-muted)]">
|
|
<FileX2 size={14} className="shrink-0" />
|
|
{t("onlyAssetsTouched")}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{!scan && !session && !running && !loading && (
|
|
<div className="rounded-xl border bg-card p-6 text-center text-muted-foreground">
|
|
<ScanSearch className="mx-auto mb-3 h-10 w-10 opacity-40" />
|
|
<p>{t("emptyHint")}</p>
|
|
</div>
|
|
)}
|
|
|
|
{!scan && session?.state === "done" && !loading && (
|
|
<div className="rounded-xl border bg-card p-6 text-center text-muted-foreground">
|
|
<p>{t("noResult")}</p>
|
|
</div>
|
|
)}
|
|
|
|
{!scan && session?.state === "error" && !loading && (
|
|
<div className="rounded-xl border bg-card p-6 text-center text-muted-foreground">
|
|
<p>{t("scanFailed")}</p>
|
|
{session.error && (
|
|
<p className="mt-2 font-mono text-xs text-[var(--admin-error)]">
|
|
{session.error}
|
|
</p>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{history.length > 0 && (
|
|
<section className="space-y-2 rounded-lg border border-[var(--admin-border)] bg-[var(--admin-surface)] p-3">
|
|
<button
|
|
type="button"
|
|
onClick={() => setShowHistory((v) => !v)}
|
|
className="flex w-full items-center gap-2 text-left text-sm font-medium text-[var(--admin-text)]"
|
|
>
|
|
<Clock
|
|
size={14}
|
|
className="shrink-0 text-[var(--admin-text-muted)]"
|
|
/>
|
|
{t("historyTitle")} ({history.length})
|
|
<span className="ml-auto text-xs text-[var(--admin-text-muted)]">
|
|
{showHistory ? "—" : "+"}
|
|
</span>
|
|
</button>
|
|
{showHistory && (
|
|
<ul className="space-y-1.5">
|
|
{history.map((entry) => (
|
|
<li
|
|
key={`${entry.triggeredAt}-${entry.triggeredBy}-${entry.deleted}-${entry.copiesRemoved}`}
|
|
className="flex flex-wrap items-center gap-2 text-xs text-[var(--admin-text-muted)]"
|
|
>
|
|
<span
|
|
className={`shrink-0 rounded px-1.5 py-0.5 font-medium ${
|
|
entry.triggeredBy === "scheduled"
|
|
? "bg-[var(--admin-accent)]/10 text-[var(--admin-accent)]"
|
|
: "bg-[var(--admin-border)]/60"
|
|
}`}
|
|
>
|
|
{entry.triggeredBy === "scheduled"
|
|
? t("historyScheduled")
|
|
: t("historyManual")}
|
|
</span>
|
|
<span className="shrink-0">
|
|
{new Date(entry.triggeredAt).toLocaleString()}
|
|
</span>
|
|
<span>
|
|
{t("historyEntry", {
|
|
deleted: entry.deleted,
|
|
copies: entry.copiesRemoved,
|
|
recent: entry.skippedRecent,
|
|
broken: entry.skippedBroken,
|
|
})}
|
|
</span>
|
|
{entry.errors.length > 0 && (
|
|
<span className="text-[var(--admin-error)]">
|
|
{t("historyErrors", { count: entry.errors.length })}
|
|
</span>
|
|
)}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
)}
|
|
</section>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|