@bygghammar/cms-platform 0.16.0 → 0.18.0

package/src/backoffice/RedirectsView.tsx

@@ -0,0 +1,223 @@
+import { useState } from "react";
+import { toast } from "sonner";
+import { Plus, Trash2, Save } from "lucide-react";
+
+/** One stored redirect row. */
+export type RedirectRow = {
+  id: string;
+  from_path: string;
+  to_path: string;
+  status: number;
+  created_at?: string | null;
+};
+
+/** Host-provided redirect data access. */
+export type RedirectsDeps = {
+  rows: RedirectRow[];
+  saveRedirect: (input: {
+    data: { id?: string; from_path: string; to_path: string; status: number };
+  }) => Promise<unknown>;
+  deleteRedirect: (input: { data: { id: string } }) => Promise<unknown>;
+  refresh: () => Promise<unknown> | void;
+};
+
+/** Host-agnostic redirect manager: add, edit inline and delete redirects. */
+export function RedirectsView({ deps }: { deps: RedirectsDeps }) {
+  const { rows, saveRedirect, deleteRedirect, refresh } = deps;
+  const [from, setFrom] = useState("");
+  const [to, setTo] = useState("");
+  const [status, setStatus] = useState(301);
+  const [busy, setBusy] = useState(false);
+
+  const onAdd = async () => {
+    if (!from || !to) return;
+    setBusy(true);
+    try {
+      await saveRedirect({ data: { from_path: from, to_path: to, status } });
+      toast.success("Redirect saved");
+      setFrom("");
+      setTo("");
+      await refresh();
+    } catch (e) {
+      toast.error(e instanceof Error ? e.message : "Failed");
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const onUpdate = async (row: {
+    id: string;
+    from_path: string;
+    to_path: string;
+    status: number;
+  }) => {
+    try {
+      await saveRedirect({ data: row });
+      toast.success("Updated");
+      await refresh();
+    } catch (e) {
+      toast.error(e instanceof Error ? e.message : "Failed");
+    }
+  };
+
+  const onDelete = async (id: string) => {
+    if (!window.confirm("Delete this redirect?")) return;
+    try {
+      await deleteRedirect({ data: { id } });
+      toast.success("Deleted");
+      await refresh();
+    } catch (e) {
+      toast.error(e instanceof Error ? e.message : "Failed");
+    }
+  };
+
+  return (
+    <div className="p-8 md:p-12 w-full">
+      <h1 className="font-serif text-3xl md:text-4xl text-ink">Redirects</h1>
+      <p className="mt-3 max-w-2xl text-sm text-ink/60">
+        Old URLs are redirected to new ones. A 301 is created automatically whenever you change a
+        page slug in Page SEO.
+      </p>
+
+      <div className="mt-8 border border-ink/10 bg-white p-6">
+        <div className="grid gap-3 md:grid-cols-[1fr_1fr_120px_auto] md:items-end">
+          <label className="block">
+            <span className="block text-xs uppercase tracking-wider text-ink/60 mb-1">
+              From path
+            </span>
+            <input
+              value={from}
+              onChange={(e) => setFrom(e.target.value)}
+              className="w-full border border-ink/20 px-3 py-2 text-sm font-mono"
+              placeholder="/old-page"
+            />
+          </label>
+          <label className="block">
+            <span className="block text-xs uppercase tracking-wider text-ink/60 mb-1">To path</span>
+            <input
+              value={to}
+              onChange={(e) => setTo(e.target.value)}
+              className="w-full border border-ink/20 px-3 py-2 text-sm font-mono"
+              placeholder="/new-page"
+            />
+          </label>
+          <label className="block">
+            <span className="block text-xs uppercase tracking-wider text-ink/60 mb-1">Status</span>
+            <select
+              value={status}
+              onChange={(e) => setStatus(Number(e.target.value))}
+              className="w-full border border-ink/20 px-3 py-2 text-sm"
+            >
+              <option value={301}>301</option>
+              <option value={302}>302</option>
+            </select>
+          </label>
+          <button
+            onClick={onAdd}
+            disabled={busy}
+            className="inline-flex items-center gap-2 bg-ink px-4 py-2 text-sm text-white disabled:opacity-50"
+          >
+            <Plus className="size-4" /> Add
+          </button>
+        </div>
+      </div>
+
+      <div className="mt-8 border border-ink/10 bg-white">
+        <table className="w-full text-sm">
+          <thead className="bg-ink/[0.03] text-left text-[0.7rem] uppercase tracking-[0.18em] text-ink/60">
+            <tr>
+              <th className="px-4 py-3">From</th>
+              <th className="px-4 py-3">To</th>
+              <th className="px-4 py-3 w-28">Status</th>
+              <th className="px-4 py-3 w-44">Created</th>
+              <th className="px-4 py-3 w-40"></th>
+            </tr>
+          </thead>
+          <tbody>
+            {rows.map((r) => (
+              <Row key={r.id} row={r} onSave={onUpdate} onDelete={onDelete} />
+            ))}
+            {rows.length === 0 && (
+              <tr>
+                <td colSpan={5} className="px-4 py-8 text-center text-ink/50">
+                  No redirects yet.
+                </td>
+              </tr>
+            )}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+}
+
+function Row({
+  row,
+  onSave,
+  onDelete,
+}: {
+  row: RedirectRow;
+  onSave: (r: { id: string; from_path: string; to_path: string; status: number }) => void;
+  onDelete: (id: string) => void;
+}) {
+  const [from, setFrom] = useState(row.from_path);
+  const [to, setTo] = useState(row.to_path);
+  const [status, setStatus] = useState(row.status);
+  const dirty = from !== row.from_path || to !== row.to_path || status !== row.status;
+
+  return (
+    <tr className="border-t border-ink/10">
+      <td className="px-4 py-2">
+        <input
+          value={from}
+          onChange={(e) => setFrom(e.target.value)}
+          className="w-full border border-transparent hover:border-ink/20 px-2 py-1 font-mono text-sm"
+        />
+      </td>
+      <td className="px-4 py-2">
+        <input
+          value={to}
+          onChange={(e) => setTo(e.target.value)}
+          className="w-full border border-transparent hover:border-ink/20 px-2 py-1 font-mono text-sm"
+        />
+      </td>
+      <td className="px-4 py-2">
+        <select
+          value={status}
+          onChange={(e) => setStatus(Number(e.target.value))}
+          className="border border-ink/20 px-2 py-1 text-sm"
+        >
+          <option value={301}>301</option>
+          <option value={302}>302</option>
+        </select>
+      </td>
+      <td className="px-4 py-2 whitespace-nowrap text-xs text-ink/60">
+        {row.created_at
+          ? new Date(row.created_at).toLocaleString("sv-SE", {
+              year: "numeric",
+              month: "2-digit",
+              day: "2-digit",
+              hour: "2-digit",
+              minute: "2-digit",
+            })
+          : "—"}
+      </td>
+      <td className="px-4 py-2 text-right">
+        {dirty && (
+          <button
+            onClick={() => onSave({ id: row.id, from_path: from, to_path: to, status })}
+            className="inline-flex items-center gap-1 text-sea hover:underline mr-3"
+          >
+            <Save className="size-3.5" /> Save
+          </button>
+        )}
+        <button
+          onClick={() => onDelete(row.id)}
+          className="inline-flex items-center gap-1 text-red-600 hover:underline"
+        >
+          <Trash2 className="size-3.5" /> Delete
+        </button>
+      </td>
+    </tr>
+  );
+}

package/src/media/library-types.ts

@@ -0,0 +1,22 @@
+/** Shapes the shared Media Library screen needs from the host. */
+
+export type MediaLibraryItem = {
+  path: string;
+  name: string;
+  url: string;
+  size: number;
+  contentType?: string | null;
+  uploadedAt?: string | null;
+  updatedAt?: string | null;
+  uploadedBy?: string | null;
+};
+
+export type MediaTrashItem = {
+  id: string;
+  originalPath: string;
+  url: string;
+  size: number;
+  contentType?: string | null;
+  deletedAt: string;
+  deletedByEmail?: string | null;
+};

package/src/media/pick-video-poster.tsx

@@ -0,0 +1,128 @@
+/**
+ * Imperative poster-frame picker for video uploads.
+ *
+ * Mounts a small dialog on demand so any upload surface (Media Library, block
+ * media picker) can ask the editor which frame to use as the video poster.
+ * Resolves with the chosen time in seconds, or `null` to keep the automatic
+ * frame (~10% into the clip).
+ */
+import { useEffect, useRef, useState } from "react";
+import { createRoot } from "react-dom/client";
+
+function formatTime(s: number) {
+  if (!Number.isFinite(s)) return "0:00";
+  const m = Math.floor(s / 60);
+  const sec = Math.floor(s % 60);
+  return `${m}:${String(sec).padStart(2, "0")}`;
+}
+
+function PosterDialog({ file, onDone }: { file: File; onDone: (seconds: number | null) => void }) {
+  const videoRef = useRef<HTMLVideoElement>(null);
+  const [url] = useState(() => URL.createObjectURL(file));
+  const [duration, setDuration] = useState(0);
+  const [time, setTime] = useState(0);
+
+  useEffect(() => () => URL.revokeObjectURL(url), [url]);
+
+  useEffect(() => {
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === "Escape") onDone(null);
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [onDone]);
+
+  const seek = (v: number) => {
+    setTime(v);
+    if (videoRef.current) videoRef.current.currentTime = v;
+  };
+
+  return (
+    <div className="fixed inset-0 z-[300] flex items-center justify-center bg-ink/70 p-4">
+      <div className="w-full max-w-2xl border border-ink/15 bg-white shadow-xl">
+        <header className="flex items-center justify-between border-b border-ink/10 px-4 py-3">
+          <div>
+            <h2 className="text-sm font-medium text-ink">Choose poster frame</h2>
+            <p className="text-[0.7rem] text-ink/55">{file.name}</p>
+          </div>
+          <button
+            type="button"
+            onClick={() => onDone(null)}
+            className="text-[0.7rem] uppercase tracking-[0.18em] text-ink/50 hover:text-ink"
+          >
+            Cancel
+          </button>
+        </header>
+
+        <div className="space-y-3 p-4">
+          <video
+            ref={videoRef}
+            src={url}
+            muted
+            playsInline
+            preload="auto"
+            className="max-h-[50vh] w-full bg-ink/5 object-contain"
+            onLoadedMetadata={(e) => {
+              const v = e.currentTarget;
+              const d = Number.isFinite(v.duration) ? v.duration : 0;
+              setDuration(d);
+              const start = Math.min(d, d * 0.1);
+              setTime(start);
+              v.currentTime = start;
+            }}
+          />
+          <input
+            type="range"
+            min={0}
+            max={Math.max(0.1, duration)}
+            step={0.05}
+            value={time}
+            onChange={(e) => seek(Number(e.target.value))}
+            className="w-full accent-sea"
+          />
+          <div className="flex items-center justify-between text-[0.72rem] text-ink/60">
+            <span>
+              {formatTime(time)} / {formatTime(duration)}
+            </span>
+            <span>Drag the slider to the frame you want as the poster image.</span>
+          </div>
+        </div>
+
+        <footer className="flex justify-end gap-2 border-t border-ink/10 px-4 py-3">
+          <button
+            type="button"
+            onClick={() => onDone(null)}
+            className="border border-ink/15 px-3 py-1.5 text-sm hover:border-ink/40"
+          >
+            Use automatic frame
+          </button>
+          <button
+            type="button"
+            onClick={() => onDone(time)}
+            className="bg-ink px-4 py-1.5 text-sm text-paper hover:bg-sea"
+          >
+            Use this frame
+          </button>
+        </footer>
+      </div>
+    </div>
+  );
+}
+
+/** Ask the editor to pick a poster frame. Returns seconds, or null for auto. */
+export function pickVideoPoster(file: File): Promise<number | null> {
+  if (typeof document === "undefined") return Promise.resolve(null);
+  return new Promise((resolve) => {
+    const host = document.createElement("div");
+    document.body.appendChild(host);
+    const root = createRoot(host);
+    const done = (seconds: number | null) => {
+      resolve(seconds);
+      setTimeout(() => {
+        root.unmount();
+        host.remove();
+      }, 0);
+    };
+    root.render(<PosterDialog file={file} onDone={done} />);
+  });
+}