Initial commit

2026-05-26 22:46:00 +02:00
commit 7e2c2ff89c
256 changed files with 51523 additions and 0 deletions
@@ -0,0 +1,119 @@
+"use client";
+import { useState, useTransition } from "react";
+import { ImageIcon, Loader2, CheckCircle2 } from "lucide-react";
+import { previewRegenThumbnails, regenerateThumbnails } from "@/app/actions/maintenance";
+
+type State =
+  | { kind: "idle" }
+  | { kind: "scanning" }
+  | { kind: "preview"; total: number; missing: number; staleNames: number }
+  | { kind: "running" }
+  | { kind: "done"; regenerated: number; renamed: number; skipped: number; errors: number };
+
+export function RegenThumbnailsButton() {
+  const [state, setState] = useState<State>({ kind: "idle" });
+  const [pending, start] = useTransition();
+
+  const scan = () => {
+    setState({ kind: "scanning" });
+    start(async () => {
+      const r = await previewRegenThumbnails();
+      setState({ kind: "preview", total: r.total, missing: r.missing, staleNames: r.staleNames });
+    });
+  };
+
+  const run = (force: boolean) => {
+    if (state.kind !== "preview") return;
+    const count = force ? state.total : state.missing + state.staleNames;
+    const verb = force ? "Re-encode" : "Regenerate missing + rename stale";
+    if (!confirm(`${verb} for ${count} thumbnail${count === 1 ? "" : "s"}? Reads each cover from library/ when it needs encoding and renames legacy files in place when possible. Cannot be undone.`)) return;
+    setState({ kind: "running" });
+    start(async () => {
+      const r = await regenerateThumbnails({ force });
+      setState({ kind: "done", ...r });
+    });
+  };
+
+  return (
+    <div className="flex items-start justify-between gap-4 py-2">
+      <div className="min-w-0">
+        <div className="text-sm font-medium">Regenerate Thumbnails</div>
+        <div className="text-xs text-[var(--color-fg-muted)] mt-0.5">
+          Rebuild the grid-preview WebP files in <code className="font-mono">data/thumbs/</code> from the
+          originals in <code className="font-mono">library/</code>, and rename legacy <code className="font-mono">&lt;sha&gt;.webp</code>
+          files to the new <code className="font-mono">&lt;CODE&gt;-&lt;sha&gt;.webp</code> format. Use this if your thumbs folder
+          was wiped, restored from an incomplete backup, or you upgraded to the code-prefix naming.
+        </div>
+        {state.kind === "preview" && (
+          <div className="text-xs mt-2 text-[var(--color-fg-dim)] space-y-0.5">
+            <div>
+              <span className="font-mono text-[var(--color-cyan)]">{state.missing}</span> missing on disk
+              {" · "}
+              <span className="font-mono text-[var(--color-cyan)]">{state.staleNames}</span> with legacy filename
+              {" · "}of {state.total} total
+            </div>
+          </div>
+        )}
+        {state.kind === "done" && (
+          <div className="flex items-center gap-1.5 text-xs text-[var(--color-mint)] mt-2 flex-wrap">
+            <CheckCircle2 className="w-3.5 h-3.5" />
+            <span>Encoded {state.regenerated} · renamed {state.renamed} · skipped {state.skipped}</span>
+            {state.errors > 0 && <span className="text-[var(--color-coral)]">· {state.errors} error{state.errors === 1 ? "" : "s"}</span>}
+          </div>
+        )}
+      </div>
+      <div className="flex-shrink-0 flex items-center gap-2">
+        {state.kind === "idle" && (
+          <button
+            onClick={scan}
+            disabled={pending}
+            className="inline-flex items-center justify-center gap-1.5 min-w-[100px] text-xs px-3 py-1.5 rounded-lg glass glass-hover text-[var(--color-fg-dim)] hover:text-[var(--color-fg)] whitespace-nowrap"
+          >
+            Scan
+          </button>
+        )}
+        {(state.kind === "scanning" || state.kind === "running") && (
+          <span className="flex items-center gap-1.5 text-xs text-[var(--color-fg-dim)]">
+            <Loader2 className="w-3.5 h-3.5 animate-spin" />
+            {state.kind === "scanning" ? "Scanning…" : "Regenerating…"}
+          </span>
+        )}
+        {state.kind === "preview" && (
+          <>
+            <button
+              onClick={() => setState({ kind: "idle" })}
+              className="inline-flex items-center justify-center min-w-[80px] text-xs px-3 py-1.5 rounded-lg text-[var(--color-fg-muted)] hover:text-[var(--color-fg)] hover:bg-[var(--color-glass)]"
+            >
+              Cancel
+            </button>
+            {(state.missing > 0 || state.staleNames > 0) && (
+              <button
+                onClick={() => run(false)}
+                disabled={pending}
+                className="inline-flex items-center justify-center gap-1.5 min-w-[100px] text-xs px-3 py-1.5 rounded-lg bg-[var(--color-cyan)]/15 text-[var(--color-cyan)] border border-[var(--color-cyan)]/40 hover:bg-[var(--color-cyan)]/25 disabled:opacity-40 whitespace-nowrap"
+              >
+                <ImageIcon className="w-3.5 h-3.5" /> Fix {state.missing + state.staleNames}
+              </button>
+            )}
+            <button
+              onClick={() => run(true)}
+              disabled={pending}
+              className="flex items-center gap-1.5 text-xs px-3 py-1.5 rounded-lg border border-[var(--color-glass-border-strong)] text-[var(--color-fg-dim)] hover:text-[var(--color-fg)] hover:bg-[var(--color-glass)] disabled:opacity-40 whitespace-nowrap"
+              title="Re-encode all thumbnails, replacing existing files. Useful after changing sharp/quality settings."
+            >
+              Re-encode all
+            </button>
+          </>
+        )}
+        {state.kind === "done" && (
+          <button
+            onClick={() => setState({ kind: "idle" })}
+            className="inline-flex items-center justify-center min-w-[80px] text-xs px-3 py-1.5 rounded-lg text-[var(--color-fg-muted)] hover:text-[var(--color-fg)] hover:bg-[var(--color-glass)]"
+          >
+            Done
+          </button>
+        )}
+      </div>
+    </div>
+  );
+}