@bygghammar/cms-platform 0.45.0 → 0.46.1

package/src/backoffice/PageBuilderView.tsx

@@ -0,0 +1,587 @@
+/**
+ * Page builder screen — host-agnostic.
+ *
+ * Owns the whole builder chrome: rename, public-URL preview, locale switch,
+ * save/publish, scheduling, version history, the block canvas slot and the SEO
+ * panel slot. A site supplies its server calls, its locale set and its editor
+ * components through `deps`; nothing in here is site-specific.
+ */
+
+import { useEffect, useState, type ReactNode } from "react";
+import {
+  ArrowLeft,
+  Save,
+  Rocket,
+  History,
+  Clock,
+  Eye,
+  X,
+  ExternalLink,
+  Copy,
+  Check,
+} from "lucide-react";
+
+/** A page row as the builder needs it. */
+export type BuilderPage = { id: string; key: string; name: string; status: string };
+
+/** One saved version, with its computed change summary. */
+export type BuilderVersion = {
+  id: string;
+  version_no: number;
+  created_at: string;
+  author: string;
+  block_count: number;
+  note?: string | null;
+  summary: string;
+  changes: { kind: string; blockType: string; detail?: string | null }[];
+};
+
+/** One scheduled publication row. */
+export type BuilderPublication = {
+  id: string;
+  publish_at: string;
+  unpublish_at?: string | null;
+  note?: string | null;
+  is_active: boolean;
+  page_versions?: { version_no: number } | null;
+};
+
+/** Everything the builder needs from its host site. */
+export type PageBuilderDeps<TBlock> = {
+  pageKey: string;
+  page?: BuilderPage;
+  blocksFromServer?: TBlock[];
+  isLoading: boolean;
+  error: Error | null;
+  /** Global sections/blocks available in the picker. */
+  globalSections: { key: string; name: string; kind: "block" | "section"; blocks: TBlock[] }[];
+  /** Resolved global content keyed by global key. */
+  globals: Record<string, TBlock[]>;
+
+  locales: readonly string[];
+  localeLabels: Record<string, string>;
+  defaultLocale: string;
+  /** Public path for this page in the given locale. */
+  publicPath: (locale: string) => string;
+  /** Host name to build the absolute URL with, for the given locale. */
+  publicHost: (locale: string) => string;
+
+  versions: BuilderVersion[] | undefined;
+  publications: BuilderPublication[] | undefined;
+  /** Told when the History / Schedule panels open, so the host can enable queries. */
+  onPanelToggle?: (panel: "history" | "schedule", open: boolean) => void;
+
+  save: (input: {
+    pageId: string;
+    blocks: TBlock[];
+    publish: boolean;
+    note?: string;
+  }) => Promise<{ versionId: string }>;
+  /** Persists unsaved shared-content edits; returns the keys it saved. */
+  flushSharedDrafts?: () => Promise<string[]>;
+  schedule: (input: {
+    versionId: string;
+    publishAt: string;
+    unpublishAt: string | null;
+    note?: string;
+  }) => Promise<unknown>;
+  cancelPublication: (publicationId: string) => Promise<unknown>;
+  restoreVersion: (versionId: string) => Promise<unknown>;
+  rename: (input: { pageId: string; name: string }) => Promise<unknown>;
+  refetchPage: () => void;
+  refetchVersions: () => void;
+  refetchPublications: () => void;
+
+  goToPages: () => void;
+  /** Opens the draft preview for the given locale. */
+  openPreview: (locale: string) => void;
+  /** Rendered block canvas. */
+  renderEditor: (args: {
+    blocks: TBlock[];
+    setBlocks: (next: TBlock[]) => void;
+    locale: string;
+    setLocale: (next: string) => void;
+    setDirty: (next: boolean) => void;
+  }) => ReactNode;
+  /** Page SEO panel for this page. */
+  seoPanel?: ReactNode;
+  /** Footer hint, e.g. a link to the shared-sections screen. */
+  footer?: ReactNode;
+  notify: { success: (m: string) => void; error: (m: string) => void };
+};
+
+/** Host-agnostic page builder. */
+export function PageBuilderView<TBlock>({ deps }: { deps: PageBuilderDeps<TBlock> }) {
+  const {
+    page,
+    blocksFromServer,
+    isLoading,
+    error,
+    locales,
+    localeLabels,
+    defaultLocale,
+    notify,
+  } = deps;
+
+  const [blocks, setBlocks] = useState<TBlock[]>([]);
+  const [dirty, setDirty] = useState(false);
+  const [busy, setBusy] = useState(false);
+  const [showHistory, setShowHistory] = useState(false);
+  const [expandedVersion, setExpandedVersion] = useState<string | null>(null);
+  const [showSchedule, setShowSchedule] = useState(false);
+  const [publishAt, setPublishAt] = useState("");
+  const [unpublishAt, setUnpublishAt] = useState("");
+  const [scheduleNote, setScheduleNote] = useState("");
+  const [renameValue, setRenameValue] = useState<string | null>(null);
+  const [locale, setLocale] = useState<string>(defaultLocale);
+  const [copied, setCopied] = useState(false);
+
+  useEffect(() => {
+    if (blocksFromServer) {
+      setBlocks(blocksFromServer);
+      setDirty(false);
+    }
+  }, [blocksFromServer]);
+
+  const slugPath = deps.publicPath(locale);
+  const host = deps.publicHost(locale);
+  const absoluteUrl = host ? `https://${host}${slugPath}` : slugPath;
+
+  const togglePanel = (panel: "history" | "schedule") => {
+    if (panel === "history") {
+      const next = !showHistory;
+      setShowHistory(next);
+      deps.onPanelToggle?.("history", next);
+    } else {
+      const next = !showSchedule;
+      setShowSchedule(next);
+      deps.onPanelToggle?.("schedule", next);
+    }
+  };
+
+  const onCopyUrl = async () => {
+    try {
+      await navigator.clipboard.writeText(absoluteUrl);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 1500);
+    } catch {
+      notify.error("Could not copy");
+    }
+  };
+
+  const onRename = async () => {
+    if (!page || !renameValue?.trim()) return;
+    try {
+      await deps.rename({ pageId: page.id, name: renameValue.trim() });
+      notify.success("Page renamed");
+      setRenameValue(null);
+      deps.refetchPage();
+    } catch (e) {
+      notify.error(e instanceof Error ? e.message : "Failed");
+    }
+  };
+
+  const onSave = async (publish: boolean) => {
+    if (!page) return;
+    setBusy(true);
+    try {
+      // Shared content-section edits made in the inspector are part of the page
+      // from the editor's point of view, so Save/Publish must cover them too.
+      await deps.flushSharedDrafts?.();
+      await deps.save({ pageId: page.id, blocks, publish });
+      notify.success(publish ? "Published" : "Draft saved");
+      setDirty(false);
+      deps.refetchPage();
+    } catch (e) {
+      notify.error(e instanceof Error ? e.message : "Failed");
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const onSchedule = async () => {
+    if (!page) return;
+    if (!publishAt) {
+      notify.error("Pick a publish date/time");
+      return;
+    }
+    setBusy(true);
+    try {
+      const res = await deps.save({
+        pageId: page.id,
+        blocks,
+        publish: false,
+        note: scheduleNote || "Scheduled draft",
+      });
+      await deps.schedule({
+        versionId: res.versionId,
+        publishAt: new Date(publishAt).toISOString(),
+        unpublishAt: unpublishAt ? new Date(unpublishAt).toISOString() : null,
+        note: scheduleNote || undefined,
+      });
+      notify.success("Scheduled");
+      setDirty(false);
+      setPublishAt("");
+      setUnpublishAt("");
+      setScheduleNote("");
+      deps.refetchPublications();
+      deps.refetchPage();
+    } catch (e) {
+      notify.error(e instanceof Error ? e.message : "Failed");
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const onCancelPub = async (id: string) => {
+    if (!confirm("Cancel this scheduled publication?")) return;
+    try {
+      await deps.cancelPublication(id);
+      notify.success("Cancelled");
+      deps.refetchPublications();
+    } catch (e) {
+      notify.error(e instanceof Error ? e.message : "Failed");
+    }
+  };
+
+  const onRestore = async (versionId: string) => {
+    if (!confirm("Restore this version? This will publish it as the current live version.")) return;
+    try {
+      await deps.restoreVersion(versionId);
+      notify.success("Restored");
+      setShowHistory(false);
+      deps.refetchPage();
+    } catch (e) {
+      notify.error(e instanceof Error ? e.message : "Failed");
+    }
+  };
+
+  if (isLoading) return <div className="p-12 text-ink/60">Loading…</div>;
+  if (error) return <div className="p-12 text-red-600">Failed to load page.</div>;
+  if (!page) return null;
+
+  return (
+    <div className="p-6 md:p-10 w-full">
+      <button
+        onClick={deps.goToPages}
+        className="inline-flex items-center gap-2 text-sm text-ink/60 hover:text-ink"
+      >
+        <ArrowLeft className="size-4" /> All pages
+      </button>
+
+      <div className="mt-3 flex flex-wrap items-end justify-between gap-4">
+        <div>
+          <div className="text-[0.7rem] uppercase tracking-[0.22em] text-ink/55">Page builder</div>
+          {renameValue === null ? (
+            <h1 className="font-serif text-3xl md:text-4xl text-ink mt-1 flex items-center gap-3">
+              {page.name}
+              <button
+                onClick={() => setRenameValue(page.name)}
+                className="text-xs font-sans text-ink/50 hover:text-sea underline"
+              >
+                rename
+              </button>
+            </h1>
+          ) : (
+            <div className="mt-1 flex items-center gap-2">
+              <input
+                autoFocus
+                value={renameValue}
+                onChange={(e) => setRenameValue(e.target.value)}
+                onKeyDown={(e) => {
+                  if (e.key === "Enter") onRename();
+                  if (e.key === "Escape") setRenameValue(null);
+                }}
+                className="border border-ink/20 px-3 py-2 text-lg"
+              />
+              <button onClick={onRename} className="text-sm text-sea hover:underline">
+                Save
+              </button>
+              <button
+                onClick={() => setRenameValue(null)}
+                className="text-sm text-ink/50 hover:underline"
+              >
+                Cancel
+              </button>
+            </div>
+          )}
+          <div className="mt-2 flex flex-wrap items-center gap-2">
+            <a
+              href={absoluteUrl}
+              target="_blank"
+              rel="noreferrer"
+              title={`Open ${absoluteUrl}`}
+              className="inline-flex items-center gap-1.5 border border-ink/15 bg-white px-2.5 py-1 font-mono text-xs text-ink hover:border-sea"
+            >
+              {slugPath}
+              <ExternalLink className="size-3 text-ink/40" />
+            </a>
+            <button
+              onClick={onCopyUrl}
+              title="Copy full URL"
+              className="inline-flex items-center gap-1.5 border border-ink/15 px-2 py-1 text-xs text-ink/60 hover:border-sea hover:text-ink"
+            >
+              {copied ? <Check className="size-3" /> : <Copy className="size-3" />}
+              {copied ? "Copied" : "Copy URL"}
+            </button>
+            {locales.length > 1 && (
+              <div className="flex items-center gap-1">
+                {locales.map((loc) => (
+                  <button
+                    key={loc}
+                    onClick={() => setLocale(loc)}
+                    className={`px-2 py-1 text-[0.7rem] uppercase tracking-widest border ${
+                      locale === loc
+                        ? "border-sea bg-ice/50 text-ink"
+                        : "border-ink/15 text-ink/50 hover:text-ink"
+                    }`}
+                  >
+                    {localeLabels[loc] ?? loc}
+                  </button>
+                ))}
+              </div>
+            )}
+          </div>
+          <div className="text-xs text-ink/50 font-mono mt-2">
+            {page.key} · {page.status}
+            {dirty && " · unsaved changes"}
+          </div>
+        </div>
+        <div className="flex flex-wrap items-center gap-2">
+          <button
+            onClick={() => deps.openPreview(locale)}
+            className="inline-flex items-center gap-2 border border-ink/20 px-4 py-2 text-sm hover:border-sea"
+          >
+            <Eye className="size-4" /> Preview
+          </button>
+          <button
+            onClick={() => togglePanel("schedule")}
+            className="inline-flex items-center gap-2 border border-ink/20 px-4 py-2 text-sm hover:border-sea"
+          >
+            <Clock className="size-4" /> Schedule
+          </button>
+          <button
+            onClick={() => togglePanel("history")}
+            className="inline-flex items-center gap-2 border border-ink/20 px-4 py-2 text-sm hover:border-sea"
+          >
+            <History className="size-4" /> History
+          </button>
+          <button
+            disabled={busy || !dirty}
+            onClick={() => onSave(false)}
+            className="inline-flex items-center gap-2 border border-ink/30 px-4 py-2 text-sm text-ink hover:border-sea disabled:opacity-40"
+          >
+            <Save className="size-4" /> Save draft
+          </button>
+          <button
+            disabled={busy}
+            onClick={() => onSave(true)}
+            className="inline-flex items-center gap-2 bg-ink text-white px-4 py-2 text-sm disabled:opacity-40"
+          >
+            <Rocket className="size-4" /> Publish now
+          </button>
+        </div>
+      </div>
+
+      {showSchedule && (
+        <div className="mt-6 border border-ink/10 bg-white p-4">
+          <div className="flex items-center justify-between mb-3">
+            <div className="text-[0.7rem] uppercase tracking-[0.22em] text-ink/60">
+              Schedule a publication
+            </div>
+            <button onClick={() => togglePanel("schedule")} className="text-ink/40 hover:text-ink">
+              <X className="size-4" />
+            </button>
+          </div>
+          <div className="grid gap-3 md:grid-cols-4">
+            <label className="block md:col-span-1">
+              <span className="block text-xs uppercase tracking-wider text-ink/60 mb-1">
+                Publish at
+              </span>
+              <input
+                type="datetime-local"
+                value={publishAt}
+                onChange={(e) => setPublishAt(e.target.value)}
+                className="w-full border border-ink/20 px-2 py-1.5 text-sm"
+              />
+            </label>
+            <label className="block md:col-span-1">
+              <span className="block text-xs uppercase tracking-wider text-ink/60 mb-1">
+                Unpublish at (optional)
+              </span>
+              <input
+                type="datetime-local"
+                value={unpublishAt}
+                onChange={(e) => setUnpublishAt(e.target.value)}
+                className="w-full border border-ink/20 px-2 py-1.5 text-sm"
+              />
+            </label>
+            <label className="block md:col-span-1">
+              <span className="block text-xs uppercase tracking-wider text-ink/60 mb-1">Note</span>
+              <input
+                value={scheduleNote}
+                onChange={(e) => setScheduleNote(e.target.value)}
+                className="w-full border border-ink/20 px-2 py-1.5 text-sm"
+                placeholder="Winter campaign"
+              />
+            </label>
+            <div className="flex items-end">
+              <button
+                disabled={busy || !publishAt}
+                onClick={onSchedule}
+                className="w-full inline-flex items-center justify-center gap-2 bg-sea text-ink px-4 py-2 text-sm disabled:opacity-40 border border-ink/10"
+              >
+                <Clock className="size-4" /> Schedule current draft
+              </button>
+            </div>
+          </div>
+          <p className="mt-3 text-xs text-ink/60">
+            The current canvas is saved as a new draft version and scheduled to become live at that
+            time. The site auto-selects the newest active publication whose window is open.
+          </p>
+
+          <div className="mt-6">
+            <div className="text-[0.7rem] uppercase tracking-[0.22em] text-ink/60 mb-2">
+              Publications
+            </div>
+            <div className="space-y-2">
+              {deps.publications?.map((p) => {
+                const now = Date.now();
+                const start = new Date(p.publish_at).getTime();
+                const end = p.unpublish_at ? new Date(p.unpublish_at).getTime() : null;
+                const status = !p.is_active
+                  ? "cancelled"
+                  : start > now
+                    ? "scheduled"
+                    : end && end <= now
+                      ? "expired"
+                      : "active";
+                const badge = {
+                  scheduled: "bg-blue-100 text-blue-800",
+                  active: "bg-green-100 text-green-800",
+                  expired: "bg-ink/10 text-ink/60",
+                  cancelled: "bg-red-100 text-red-800",
+                }[status];
+                return (
+                  <div
+                    key={p.id}
+                    className="flex items-center justify-between border border-ink/10 px-3 py-2 text-sm"
+                  >
+                    <div>
+                      <span
+                        className={`inline-block px-2 py-0.5 text-[0.65rem] uppercase tracking-wider ${badge}`}
+                      >
+                        {status}
+                      </span>
+                      <span className="ml-3 font-mono text-ink">
+                        v{p.page_versions?.version_no ?? "?"}
+                      </span>
+                      <span className="ml-3 text-ink/70">
+                        {new Date(p.publish_at).toLocaleString()}
+                      </span>
+                      {p.unpublish_at && (
+                        <span className="ml-2 text-ink/50">
+                          → {new Date(p.unpublish_at).toLocaleString()}
+                        </span>
+                      )}
+                      {p.note && <span className="ml-3 text-ink/60 italic">{p.note}</span>}
+                    </div>
+                    {p.is_active && status !== "expired" && (
+                      <button
+                        className="text-red-600 hover:underline"
+                        onClick={() => onCancelPub(p.id)}
+                      >
+                        Cancel
+                      </button>
+                    )}
+                  </div>
+                );
+              })}
+              {deps.publications?.length === 0 && (
+                <p className="text-sm text-ink/50">No publications yet.</p>
+              )}
+            </div>
+          </div>
+        </div>
+      )}
+
+      {showHistory && (
+        <div className="mt-6 border border-ink/10 bg-white p-4">
+          <div className="text-[0.7rem] uppercase tracking-[0.22em] text-ink/60 mb-3">
+            Version history
+          </div>
+          <div className="space-y-2">
+            {deps.versions?.map((v) => {
+              const open = expandedVersion === v.id;
+              return (
+                <div key={v.id} className="border border-ink/10 px-3 py-2 text-sm">
+                  <div className="flex items-start justify-between gap-4">
+                    <div className="min-w-0">
+                      <div className="flex flex-wrap items-center gap-x-3 gap-y-1">
+                        <span className="font-mono text-ink">v{v.version_no}</span>
+                        <span className="text-ink/50">
+                          {new Date(v.created_at).toLocaleString()}
+                        </span>
+                        <span className="text-ink/70">by {v.author}</span>
+                        <span className="text-ink/50">{v.block_count} blocks</span>
+                        {v.note && <span className="text-ink/60 italic">{v.note}</span>}
+                      </div>
+                      <div className="mt-1 text-xs text-ink/60">{v.summary}</div>
+                    </div>
+                    <div className="flex shrink-0 items-center gap-3">
+                      {v.changes.length > 0 && (
+                        <button
+                          className="text-ink/60 hover:underline"
+                          onClick={() => setExpandedVersion(open ? null : v.id)}
+                        >
+                          {open ? "Hide changes" : "View changes"}
+                        </button>
+                      )}
+                      <button className="text-sea hover:underline" onClick={() => onRestore(v.id)}>
+                        Restore
+                      </button>
+                    </div>
+                  </div>
+                  {open && (
+                    <ul className="mt-2 space-y-1 border-t border-ink/10 pt-2 text-xs text-ink/70">
+                      {v.changes.map((c, i) => (
+                        <li key={i}>
+                          <span className="font-mono uppercase tracking-wider text-ink/50">
+                            {c.kind}
+                          </span>{" "}
+                          <span className="text-ink">{c.blockType}</span>
+                          {c.detail ? <span className="text-ink/50"> — {c.detail}</span> : null}
+                        </li>
+                      ))}
+                    </ul>
+                  )}
+                </div>
+              );
+            })}
+            {deps.versions?.length === 0 && <p className="text-sm text-ink/50">No versions yet.</p>}
+          </div>
+        </div>
+      )}
+
+      <div className="mt-6">
+        {deps.renderEditor({ blocks, setBlocks, locale, setLocale, setDirty })}
+      </div>
+
+      {deps.seoPanel && (
+        <div className="mt-12 border-t border-ink/10 pt-8">
+          <div className="text-[0.7rem] uppercase tracking-[0.22em] text-ink/55">
+            Page SEO &amp; URL
+          </div>
+          <h2 className="mt-2 font-serif text-2xl text-ink">{page.name}</h2>
+          <p className="mt-2 text-sm text-ink/60 max-w-xl">
+            Slug, title, meta description and social preview for this page. Saved per language and
+            used by canonical, hreflang and Open Graph.
+          </p>
+          <div className="mt-6">{deps.seoPanel}</div>
+        </div>
+      )}
+
+      {deps.footer && <div className="mt-6 text-xs text-ink/50">{deps.footer}</div>}
+    </div>
+  );
+}

package/src/backoffice/ResetPasswordView.tsx

@@ -0,0 +1,78 @@
+/**
+ * Password-reset screen — host-agnostic.
+ *
+ * Waits for the recovery session the auth provider establishes from the emailed
+ * link, then sets a new password. The site supplies both calls.
+ */
+
+import { useEffect, useState } from "react";
+
+/** Everything the reset screen needs from its host. */
+export type ResetPasswordDeps = {
+  /** Subscribes to recovery/sign-in; call `ready()` once a session exists. */
+  onRecoverySession: (ready: () => void) => () => void;
+  updatePassword: (password: string) => Promise<void>;
+  onDone: () => void;
+  notify: { success: (m: string) => void; error: (m: string) => void };
+};
+
+/** Host-agnostic password-reset screen. */
+export function ResetPasswordView({ deps }: { deps: ResetPasswordDeps }) {
+  const [ready, setReady] = useState(false);
+  const [password, setPassword] = useState("");
+  const [busy, setBusy] = useState(false);
+
+  useEffect(() => deps.onRecoverySession(() => setReady(true)), [deps]);
+
+  const onSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setBusy(true);
+    try {
+      await deps.updatePassword(password);
+      deps.notify.success("Password updated");
+      deps.onDone();
+    } catch (err) {
+      deps.notify.error(err instanceof Error ? err.message : "Could not update");
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  return (
+    <main className="min-h-screen bg-ink text-paper grid place-items-center px-6 py-16">
+      <div className="w-full max-w-sm">
+        <div className="text-[0.7rem] uppercase tracking-[0.22em] text-paper/60">Backoffice</div>
+        <h1 className="mt-3 font-serif text-3xl">New password</h1>
+        {!ready ? (
+          <p className="mt-6 text-sm text-paper/60">
+            Waiting for the reset link… open the link from the email in the same browser.
+          </p>
+        ) : (
+          <form onSubmit={onSubmit} className="mt-8 space-y-4">
+            <label className="block">
+              <span className="text-[0.65rem] uppercase tracking-[0.22em] text-paper/60">
+                New password
+              </span>
+              <input
+                type="password"
+                minLength={8}
+                required
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                className="mt-2 w-full bg-transparent border border-paper/25 px-4 py-3 text-paper focus:border-sea focus:outline-none"
+                autoComplete="new-password"
+              />
+            </label>
+            <button
+              type="submit"
+              disabled={busy}
+              className="w-full inline-flex items-center justify-center border border-paper bg-paper text-ink px-6 py-3 text-xs uppercase tracking-[0.22em] hover:bg-transparent hover:text-paper transition-colors disabled:opacity-60"
+            >
+              {busy ? "Saving…" : "Update password"}
+            </button>
+          </form>
+        )}
+      </div>
+    </main>
+  );
+}