@bygghammar/cms-platform 0.6.0 → 0.8.0

package/src/backoffice/media/MediaReplaceDialog.tsx

@@ -0,0 +1,158 @@
+import { useMemo, useState } from "react";
+import { Loader2, Search } from "lucide-react";
+import { toast } from "sonner";
+
+/** Minimal library item shape this dialog needs. */
+export type MediaItem = {
+  path: string;
+  name: string;
+  contentType?: string | null;
+  url?: string;
+};
+
+/**
+ * Pick a replacement file for one library asset and swap it everywhere it is
+ * referenced on the public site. Backoffice UI is English.
+ */
+export function MediaReplaceDialog({
+  source,
+  items,
+  usageCount,
+  onClose,
+  onDone,
+  replaceMedia,
+}: {
+  source: MediaItem;
+  items: MediaItem[];
+  usageCount: number;
+  onClose: () => void;
+  onDone: () => Promise<void> | void;
+  /** Host-provided sitewide replace. */
+  replaceMedia: (input: {
+    data: { fromPath: string; toPath: string };
+  }) => Promise<{ rewritten: number }>;
+}) {
+  const replaceFn = replaceMedia;
+  const [q, setQ] = useState("");
+  const [target, setTarget] = useState<MediaItem | null>(null);
+  const [busy, setBusy] = useState(false);
+
+  const candidates = useMemo(() => {
+    const needle = q.trim().toLowerCase();
+    return items
+      .filter((i) => i.path !== source.path)
+      .filter((i) => (needle ? i.name.toLowerCase().includes(needle) : true))
+      .slice(0, 60);
+  }, [items, q, source.path]);
+
+  const run = async () => {
+    if (!target) return;
+    setBusy(true);
+    try {
+      const res = await replaceFn({ data: { fromPath: source.path, toPath: target.path } });
+      toast.success(
+        res.rewritten > 0
+          ? `Replaced in ${res.rewritten} reference(s) across the site`
+          : "No references needed changing",
+      );
+      await onDone();
+      onClose();
+    } catch (e: any) {
+      toast.error(e?.message ?? "Replace failed");
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  return (
+    <div
+      className="fixed inset-0 z-[60] grid place-items-center bg-black/50 p-4"
+      onClick={() => !busy && onClose()}
+    >
+      <div
+        className="flex max-h-[85vh] w-full max-w-2xl flex-col border border-ink/15 bg-white"
+        onClick={(e) => e.stopPropagation()}
+      >
+        <header className="border-b border-ink/10 px-4 py-3">
+          <h2 className="text-sm font-medium text-ink">Replace file everywhere</h2>
+          <p className="mt-1 text-xs text-ink/60">
+            Every place using <span className="text-ink">{source.name}</span> ({usageCount} use
+            {usageCount === 1 ? "" : "s"}) will point at the file you pick. The original file stays
+            in the library.
+          </p>
+        </header>
+
+        <div className="border-b border-ink/10 px-4 py-2">
+          <div className="flex items-center gap-2 border border-ink/15 px-2 py-1.5">
+            <Search className="size-3.5 text-ink/40" />
+            <input
+              value={q}
+              onChange={(e) => setQ(e.target.value)}
+              placeholder="Search replacement file…"
+              className="w-full bg-transparent text-xs outline-none"
+            />
+          </div>
+        </div>
+
+        <div className="grid flex-1 grid-cols-3 gap-3 overflow-auto p-4 sm:grid-cols-4">
+          {candidates.map((item) => {
+            const isImage = (item.contentType ?? "").startsWith("image/");
+            const active = target?.path === item.path;
+            return (
+              <button
+                key={item.path}
+                type="button"
+                onClick={() => setTarget(item)}
+                className={[
+                  "border text-left",
+                  active ? "border-sea ring-2 ring-sea/40" : "border-ink/10 hover:border-ink/30",
+                ].join(" ")}
+              >
+                <div className="flex aspect-square items-center justify-center overflow-hidden bg-ink/5">
+                  {isImage ? (
+                    <img src={item.url} alt={item.name} className="h-full w-full object-cover" />
+                  ) : (
+                    <span className="text-[0.6rem] uppercase tracking-widest text-ink/50">
+                      {item.contentType?.split("/")[1] ?? "file"}
+                    </span>
+                  )}
+                </div>
+                <div className="truncate p-1.5 text-[0.68rem] text-ink" title={item.name}>
+                  {item.name}
+                </div>
+              </button>
+            );
+          })}
+          {candidates.length === 0 ? (
+            <p className="col-span-full text-xs text-ink/50">No matching files.</p>
+          ) : null}
+        </div>
+
+        <footer className="flex items-center justify-between gap-2 border-t border-ink/10 px-4 py-3">
+          <span className="truncate text-[0.7rem] text-ink/60">
+            {target ? `Replacement: ${target.name}` : "Select a replacement file"}
+          </span>
+          <div className="flex gap-2">
+            <button
+              type="button"
+              disabled={busy}
+              onClick={onClose}
+              className="border border-ink/20 px-3 py-1.5 text-xs uppercase tracking-[0.18em] text-ink hover:border-ink disabled:opacity-50"
+            >
+              Cancel
+            </button>
+            <button
+              type="button"
+              disabled={!target || busy}
+              onClick={run}
+              className="inline-flex items-center gap-1.5 bg-ink px-3 py-1.5 text-xs uppercase tracking-[0.18em] text-white hover:bg-sea disabled:opacity-50"
+            >
+              {busy ? <Loader2 className="size-3.5 animate-spin" /> : null}
+              Replace everywhere
+            </button>
+          </div>
+        </footer>
+      </div>
+    </div>
+  );
+}

package/src/backoffice/media/ReuploadOverwrite.tsx

@@ -0,0 +1,226 @@
+import { useRef, useState } from "react";
+import { Loader2, RefreshCw } from "lucide-react";
+import { toast } from "sonner";
+
+import { optimizeForUpload } from "../../media/optimize";
+import { cleanFileName, splitExt } from "../../media/filename";
+
+type RunSummary = {
+  overwritten: string[];
+  skipped: string[];
+  failed: string[];
+};
+
+/**
+ * Superadmin-only bulk re-upload. Re-selects the original source files and
+ * regenerates every responsive variant at the current quality settings,
+ * writing over the existing storage paths so filenames — and therefore every
+ * reference on the site — stay exactly the same.
+ */
+export function ReuploadOverwrite({
+  onDone,
+  prepareOverwrite,
+  uploadBundle: uploadBundleFn,
+  logOverwrite,
+}: {
+  onDone: () => Promise<void> | void;
+  /** Host-provided lookup of which base names already exist in the library. */
+  prepareOverwrite: (input: {
+    data: { bases: string[] };
+  }) => Promise<Record<string, { exists: boolean } | undefined>>;
+  /** Host-provided upload of one optimized bundle. */
+  uploadBundle: (input: {
+    data: {
+      files: { name: string; contentType: string; bytes: number[] }[];
+      upsert: boolean;
+    };
+  }) => Promise<unknown>;
+  /** Host-provided audit logger for one overwrite run. */
+  logOverwrite: (input: {
+    data: { paths: string[]; skipped: string[]; failed: string[] };
+  }) => Promise<unknown>;
+}) {
+  const input = useRef<HTMLInputElement>(null);
+  const prepare = prepareOverwrite;
+  const logRun = logOverwrite;
+  const uploadBundle = uploadBundleFn;
+  const [busy, setBusy] = useState(false);
+  const [progress, setProgress] = useState<string | null>(null);
+  const [percent, setPercent] = useState(0);
+  const [addUnmatched, setAddUnmatched] = useState(false);
+  const [summary, setSummary] = useState<RunSummary | null>(null);
+
+  const run = async (files: FileList | null) => {
+    const arr = files ? Array.from(files) : [];
+    if (!arr.length) return;
+    if (
+      !confirm(
+        `Re-upload ${arr.length} file(s) and overwrite the matching files in the library?\n\n` +
+          `Filenames stay the same, so every page keeps working — the images are simply replaced with the new, higher quality versions.`,
+      )
+    )
+      return;
+
+    setBusy(true);
+    setSummary(null);
+    const overwritten: string[] = [];
+    const skipped: string[] = [];
+    const failed: string[] = [];
+
+    try {
+      const bases = arr.map((f) => splitExt(cleanFileName(f.name)).base);
+      setProgress("Checking library…");
+      const existing = await prepare({ data: { bases: Array.from(new Set(bases)) } });
+
+      for (let idx = 0; idx < arr.length; idx++) {
+        const file = arr[idx];
+        const base = bases[idx];
+        const match = existing[base];
+        if (!match?.exists && !addUnmatched) {
+          skipped.push(file.name);
+          setPercent(Math.round(((idx + 1) / arr.length) * 100));
+          continue;
+        }
+
+        try {
+          setProgress(`Optimizing ${idx + 1}/${arr.length}: ${file.name}`);
+          setPercent(Math.round(((idx + 0.1) / arr.length) * 100));
+          const bundle = await optimizeForUpload(file, base);
+
+          setProgress(`Overwriting ${idx + 1}/${arr.length}: ${file.name}`);
+          const all = [bundle.primary, ...bundle.extras];
+          const payload = await Promise.all(
+            all.map(async (part) => ({
+              name: part.name,
+              contentType: part.contentType,
+              bytes: Array.from(new Uint8Array(await part.blob.arrayBuffer())),
+            })),
+          );
+          await uploadBundle({ data: { files: payload, upsert: true } });
+          for (let f = 0; f < all.length; f++) {
+            overwritten.push(all[f].name);
+            setPercent(Math.round(((idx + 0.1 + (0.9 * (f + 1)) / all.length) / arr.length) * 100));
+          }
+        } catch (e: any) {
+          console.warn("overwrite failed", file.name, e);
+          failed.push(`${file.name} — ${e?.message ?? "upload failed"}`);
+        }
+      }
+
+      setSummary({ overwritten, skipped, failed });
+      try {
+        await logRun({ data: { paths: overwritten, skipped, failed } });
+      } catch (e) {
+        console.warn("audit log failed", e);
+      }
+
+      if (failed.length) {
+        toast.error(`${failed.length} file(s) failed — see the summary below.`);
+      } else {
+        toast.success(
+          `Overwrote ${overwritten.length} file(s)${skipped.length ? `, skipped ${skipped.length}` : ""}.`,
+        );
+      }
+      await onDone();
+    } catch (e: any) {
+      toast.error(e?.message ?? "Re-upload failed");
+    } finally {
+      setBusy(false);
+      setProgress(null);
+      setPercent(0);
+      if (input.current) input.current.value = "";
+    }
+  };
+
+  return (
+    <section className="border border-ink/10 bg-ice/40 px-3 py-3 space-y-3">
+      <div className="flex flex-wrap items-center gap-3">
+        <div className="flex-1 min-w-[16rem] text-[0.72rem] leading-relaxed text-ink/70">
+          <strong className="font-medium text-ink">Re-upload &amp; overwrite</strong> — pick the
+          original source files again. Matching library files are regenerated at the current quality
+          (480/768/1200/1920/2560, q0.90) and written over the same filenames, so nothing needs
+          re-linking. Transparent PNGs/WebPs keep alpha and regenerate their PNG fallback.
+          Superadmin only.
+        </div>
+        <label className="inline-flex items-center gap-2 text-[0.7rem] text-ink/70">
+          <input
+            type="checkbox"
+            checked={addUnmatched}
+            onChange={(e) => setAddUnmatched(e.target.checked)}
+            className="size-3.5 accent-current"
+          />
+          Also add unmatched files as new
+        </label>
+        <input
+          ref={input}
+          type="file"
+          multiple
+          accept="image/*"
+          className="hidden"
+          onChange={(e) => run(e.target.files)}
+        />
+        <button
+          type="button"
+          onClick={() => input.current?.click()}
+          disabled={busy}
+          className="inline-flex items-center gap-2 border border-ink px-3 py-1.5 text-[0.7rem] uppercase tracking-widest text-ink hover:bg-ink hover:text-paper disabled:opacity-50"
+        >
+          {busy ? (
+            <Loader2 className="size-3.5 animate-spin" />
+          ) : (
+            <RefreshCw className="size-3.5" />
+          )}
+          Re-upload &amp; overwrite
+        </button>
+      </div>
+
+      {busy ? (
+        <div className="space-y-1.5">
+          <div className="flex items-center gap-1.5 text-[0.72rem] text-ink/70">
+            <Loader2 className="size-3 animate-spin" />
+            <span>{progress ?? "Preparing…"}</span>
+            <span className="ml-auto tabular-nums text-ink/50">{percent}%</span>
+          </div>
+          <div className="h-1.5 w-full overflow-hidden bg-ink/10">
+            <div
+              className="h-full bg-sea transition-[width] duration-200"
+              style={{ width: `${percent}%` }}
+            />
+          </div>
+        </div>
+      ) : null}
+
+      {summary ? (
+        <div className="space-y-1 border-t border-ink/10 pt-2 text-[0.7rem] text-ink/70">
+          <div>
+            Overwritten: <strong className="text-ink">{summary.overwritten.length}</strong> file(s)
+          </div>
+          {summary.skipped.length ? (
+            <details>
+              <summary className="cursor-pointer">
+                Skipped (no match in library): {summary.skipped.length}
+              </summary>
+              <ul className="mt-1 list-disc pl-5">
+                {summary.skipped.map((s) => (
+                  <li key={s}>{s}</li>
+                ))}
+              </ul>
+            </details>
+          ) : null}
+          {summary.failed.length ? (
+            <details open>
+              <summary className="cursor-pointer text-red-600">
+                Failed: {summary.failed.length}
+              </summary>
+              <ul className="mt-1 list-disc pl-5 text-red-600">
+                {summary.failed.map((s) => (
+                  <li key={s}>{s}</li>
+                ))}
+              </ul>
+            </details>
+          ) : null}
+        </div>
+      ) : null}
+    </section>
+  );
+}