@bygghammar/cms-platform 0.28.0 → 0.30.0

package/src/backoffice/GlobalSectionBuilderView.tsx

@@ -0,0 +1,225 @@
+import { useEffect, useState, type ComponentType, type ReactNode } from "react";
+import { toast } from "sonner";
+import { ArrowLeft, Save, Pencil, Layers, Globe } from "lucide-react";
+
+export type GlobalSectionKind = "block" | "section";
+
+/** Props the host editor component must accept — matches PageEditorView's contract. */
+export type GlobalSectionEditorProps<TBlock> = {
+  pageKey: string;
+  initialBlocks: TBlock[];
+  blocks: TBlock[];
+  globals: Record<string, TBlock[]>;
+  globalSections: { key: string; name: string; kind: GlobalSectionKind; blocks: TBlock[] }[];
+  onBlocksChange: (blocks: TBlock[]) => void;
+  onDirtyChange: (dirty: boolean) => void;
+  singleBlock: boolean;
+};
+
+export type GlobalSectionBuilderDeps<TBlock> = {
+  sectionKey: string;
+  section: { id: string; key: string; name: string; kind?: string } | undefined;
+  blocksFromServer: TBlock[] | undefined;
+  isLoading: boolean;
+  error?: Error | null;
+  /** Every global for the picker, including this one — it is filtered out here. */
+  allGlobals: { key: string; name: string; kind?: string; blocks?: unknown }[];
+  /** Places this global is used, shown as a save-impact note. */
+  usage: { name: string }[];
+  save: (input: { sectionId: string; blocks: TBlock[] }) => Promise<unknown>;
+  rename: (input: { sectionId: string; name: string }) => Promise<unknown>;
+  setKind: (input: { sectionId: string; kind: GlobalSectionKind }) => Promise<unknown>;
+  refetch: () => void;
+  /** Navigates back to the blocks or global-sections library. */
+  goToLibrary: (kind: GlobalSectionKind) => void;
+  Editor: ComponentType<GlobalSectionEditorProps<TBlock>>;
+};
+
+/** Controlled failure screen — an auth rejection must never blank the shell. */
+export function GlobalSectionEditorError({ error }: { error: Error }): ReactNode {
+  const message = error?.message ?? "";
+  const unauthorized = /unauthor|forbidden|sign in|401/i.test(message);
+  return (
+    <div className="p-12">
+      <h1 className="font-serif text-2xl text-ink">
+        {unauthorized ? "Your session expired" : "This editor could not load"}
+      </h1>
+      <p className="mt-3 text-sm text-ink/60">
+        {unauthorized
+          ? "Sign in again to continue editing this global section."
+          : "Something went wrong while loading this global section."}
+      </p>
+      <button
+        onClick={() => window.location.reload()}
+        className="mt-6 inline-flex items-center bg-ink text-white px-4 py-2 text-sm"
+      >
+        Reload
+      </button>
+    </div>
+  );
+}
+
+/**
+ * Editor for one global section or global block: rename, convert kind, edit its
+ * blocks and save to every place that uses it.
+ */
+export function GlobalSectionBuilderView<TBlock>({
+  deps,
+}: {
+  deps: GlobalSectionBuilderDeps<TBlock>;
+}): ReactNode {
+  const {
+    sectionKey,
+    section,
+    blocksFromServer,
+    isLoading,
+    error,
+    allGlobals,
+    usage,
+    save,
+    rename,
+    setKind,
+    refetch,
+    goToLibrary,
+    Editor,
+  } = deps;
+
+  const [blocks, setBlocks] = useState<TBlock[]>([]);
+  const [initialBlocks, setInitialBlocks] = useState<TBlock[]>([]);
+  const [dirty, setDirty] = useState(false);
+  const [busy, setBusy] = useState(false);
+
+  useEffect(() => {
+    if (blocksFromServer) {
+      setBlocks(blocksFromServer);
+      setInitialBlocks(blocksFromServer);
+      setDirty(false);
+    }
+  }, [blocksFromServer]);
+
+  const onSave = async () => {
+    if (!section) return;
+    setBusy(true);
+    try {
+      await save({ sectionId: section.id, blocks });
+      toast.success("Saved");
+      setDirty(false);
+      refetch();
+    } catch (e) {
+      toast.error(e instanceof Error ? e.message : "Failed");
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const onRename = async () => {
+    if (!section) return;
+    const next = window.prompt("Name", section.name);
+    if (!next || next.trim() === "" || next === section.name) return;
+    try {
+      await rename({ sectionId: section.id, name: next.trim() });
+      toast.success("Renamed");
+      refetch();
+    } catch (e) {
+      toast.error(e instanceof Error ? e.message : "Failed");
+    }
+  };
+
+  const onConvert = async (kind: GlobalSectionKind) => {
+    if (!section) return;
+    if (dirty) {
+      toast.error("Save your changes first");
+      return;
+    }
+    try {
+      await setKind({ sectionId: section.id, kind });
+      toast.success(kind === "block" ? "Now a global block" : "Now a global section");
+      refetch();
+    } catch (e) {
+      toast.error(e instanceof Error ? e.message : "Failed");
+    }
+  };
+
+  if (isLoading) return <div className="p-12 text-ink/60">Loading…</div>;
+  if (error) return <GlobalSectionEditorError error={error} />;
+  if (!section) return null;
+
+  const kind: GlobalSectionKind = section.kind === "block" ? "block" : "section";
+  const isBlock = kind === "block";
+
+  // Prevent self-reference in the picker, and never offer globals inside a global block.
+  const globalOptions = allGlobals
+    .filter((g) => g.key !== sectionKey)
+    .map((g) => ({
+      key: g.key,
+      name: g.name,
+      kind: (g.kind === "block" ? "block" : "section") as GlobalSectionKind,
+      blocks: (g.blocks ?? []) as TBlock[],
+    }));
+  // Resolve nested global blocks so the preview renders them.
+  const globalsMap: Record<string, TBlock[]> = {};
+  for (const g of allGlobals) globalsMap[g.key] = (g.blocks ?? []) as TBlock[];
+
+  return (
+    <div className="p-6 md:p-10 w-full">
+      <button
+        onClick={() => goToLibrary(kind)}
+        className="inline-flex items-center gap-2 text-sm text-ink/60 hover:text-ink"
+      >
+        <ArrowLeft className="size-4" /> {isBlock ? "All global blocks" : "All global sections"}
+      </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 flex items-center gap-1.5">
+            {isBlock ? <Globe className="size-3" /> : <Layers className="size-3" />}
+            {isBlock ? "Global block — one block" : "Global section — several blocks"}
+          </div>
+          <div className="flex items-center gap-2 mt-1">
+            <h1 className="font-serif text-3xl md:text-4xl text-ink">{section.name}</h1>
+            <button onClick={onRename} title="Rename" className="text-ink/40 hover:text-ink">
+              <Pencil className="size-4" />
+            </button>
+          </div>
+          <div className="text-xs text-ink/50 font-mono mt-1">
+            {section.key}
+            {dirty && " · unsaved changes"}
+          </div>
+          <div className="mt-2 text-xs text-ink/60">
+            {usage.length === 0
+              ? "Not used anywhere yet."
+              : `Used in ${usage.length} place${usage.length === 1 ? "" : "s"}: ${usage
+                  .map((u) => u.name)
+                  .join(", ")} — saving updates them all.`}
+          </div>
+          <button
+            onClick={() => onConvert(isBlock ? "section" : "block")}
+            className="mt-2 text-xs text-sea hover:underline"
+          >
+            {isBlock ? "Convert to global section" : "Convert to global block"}
+          </button>
+        </div>
+        <button
+          disabled={busy || !dirty}
+          onClick={onSave}
+          className="inline-flex items-center gap-2 bg-ink text-white px-4 py-2 text-sm disabled:opacity-40"
+        >
+          <Save className="size-4" /> Save
+        </button>
+      </div>
+
+      <div className="mt-6">
+        <Editor
+          pageKey={`gs:${sectionKey}`}
+          initialBlocks={initialBlocks}
+          blocks={blocks}
+          globals={globalsMap}
+          globalSections={globalOptions}
+          onBlocksChange={setBlocks}
+          onDirtyChange={setDirty}
+          singleBlock={isBlock}
+        />
+      </div>
+    </div>
+  );
+}

package/src/backoffice/GlobalSectionsListView.tsx

@@ -0,0 +1,193 @@
+import { useState, type ReactNode } from "react";
+import { toast } from "sonner";
+import { Plus, Trash2, Pencil, Eye } from "lucide-react";
+import { DataThumb } from "./SectionThumb";
+import { PreviewLightbox } from "./PreviewLightbox";
+
+/** One reusable group of blocks as returned by the host's list function. */
+export type GlobalSectionRow = {
+  id: string;
+  key: string;
+  name: string;
+  updated_at: string;
+  blocks?: unknown;
+  kind?: string;
+};
+
+export type GlobalSectionsListDeps = {
+  rows: GlobalSectionRow[];
+  /** Maps a block instance to the label shown as a chip. */
+  blockLabels: (blocks: unknown) => string[];
+  create: (input: { key: string; name: string }) => Promise<unknown>;
+  remove: (sectionId: string) => Promise<unknown>;
+  refetch: () => void;
+  /** Navigates to the editor for one section key. */
+  openEditor: (key: string) => void;
+  /** Preview URL for a section key, e.g. `/preview/gs:${key}`. */
+  previewSrc: (key: string) => string;
+};
+
+/**
+ * Library screen listing global sections — reusable groups of blocks that update
+ * everywhere at once. All data access and navigation is host-supplied.
+ */
+export function GlobalSectionsListView({ deps }: { deps: GlobalSectionsListDeps }): ReactNode {
+  const { rows, blockLabels, create, remove, refetch, openEditor, previewSrc } = deps;
+  const [newKey, setNewKey] = useState("");
+  const [newName, setNewName] = useState("");
+  const [busy, setBusy] = useState(false);
+  const [preview, setPreview] = useState<{ key: string; name: string } | null>(null);
+
+  const onCreate = async () => {
+    if (!newKey || !newName) return;
+    setBusy(true);
+    try {
+      await create({ key: newKey, name: newName });
+      toast.success("Global section created");
+      setNewKey("");
+      setNewName("");
+      refetch();
+    } catch (e) {
+      toast.error(e instanceof Error ? e.message : "Failed");
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const onDelete = async (id: string, name: string) => {
+    if (!confirm(`Delete "${name}"? Pages referencing it will render nothing there.`)) return;
+    try {
+      await remove(id);
+      toast.success("Deleted");
+      refetch();
+    } catch (e) {
+      toast.error(e instanceof Error ? e.message : "Failed");
+    }
+  };
+
+  return (
+    <div className="p-8 md:p-12 w-full">
+      <div className="text-[0.7rem] uppercase tracking-[0.22em] text-ink/55">Library</div>
+      <h1 className="mt-2 font-serif text-3xl md:text-4xl text-ink">Global Sections</h1>
+      <p className="mt-4 max-w-2xl text-sm text-ink/60">
+        A global section holds several blocks that belong together. Reuse it on any page. Edit it
+        here and every place that uses it updates at the same time. For a single reusable block, use
+        Global blocks in the Blocks library instead.
+      </p>
+
+      <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 w-36">Preview</th>
+              <th className="px-4 py-3">Name</th>
+              <th className="px-4 py-3">Key</th>
+              <th className="px-4 py-3">Updated</th>
+              <th className="px-4 py-3 w-40"></th>
+            </tr>
+          </thead>
+          <tbody>
+            {rows.map((g) => {
+              const labels = blockLabels(g.blocks);
+              return (
+                <tr key={g.id} className="border-t border-ink/10">
+                  <td className="px-4 py-3 align-top">
+                    <button
+                      type="button"
+                      title="Preview section"
+                      onClick={() => setPreview({ key: g.key, name: g.name })}
+                      className="group relative block"
+                    >
+                      <DataThumb data={g.blocks} />
+                      <span className="absolute inset-0 hidden items-center justify-center bg-ink/50 text-white group-hover:flex">
+                        <Eye className="size-4" />
+                      </span>
+                    </button>
+                  </td>
+                  <td className="px-4 py-3 align-top">
+                    <div className="text-ink">{g.name}</div>
+                    {labels.length > 0 && (
+                      <div className="mt-1 flex flex-wrap gap-1.5">
+                        {labels.map((label, i) => (
+                          <span
+                            key={i}
+                            className="inline-block text-[0.65rem] leading-none px-1.5 py-1 bg-ink/[0.06] text-ink/60 rounded"
+                          >
+                            {label}
+                          </span>
+                        ))}
+                      </div>
+                    )}
+                  </td>
+                  <td className="px-4 py-3 text-ink/70 font-mono align-top">{g.key}</td>
+                  <td className="px-4 py-3 text-ink/50 align-top">
+                    {new Date(g.updated_at).toLocaleString()}
+                  </td>
+                  <td className="px-4 py-3 text-right align-top">
+                    <button
+                      onClick={() => openEditor(g.key)}
+                      className="inline-flex items-center gap-1 text-sea hover:underline mr-3"
+                    >
+                      <Pencil className="size-3.5" /> Edit
+                    </button>
+                    <button
+                      onClick={() => onDelete(g.id, g.name)}
+                      className="inline-flex items-center gap-1 text-red-600 hover:underline"
+                    >
+                      <Trash2 className="size-3.5" /> Delete
+                    </button>
+                  </td>
+                </tr>
+              );
+            })}
+            {rows.length === 0 && (
+              <tr>
+                <td colSpan={5} className="px-4 py-8 text-center text-ink/50">
+                  No global sections yet.
+                </td>
+              </tr>
+            )}
+          </tbody>
+        </table>
+      </div>
+
+      <div className="mt-10 border border-ink/10 bg-white p-6">
+        <div className="font-serif text-lg text-ink">New global section</div>
+        <div className="mt-4 grid gap-3 md:grid-cols-[1fr_1fr_auto]">
+          <label className="block">
+            <span className="block text-xs uppercase tracking-wider text-ink/60 mb-1">Name</span>
+            <input
+              value={newName}
+              onChange={(e) => setNewName(e.target.value)}
+              className="w-full border border-ink/20 px-3 py-2 text-sm"
+              placeholder="Site-wide FAQ"
+            />
+          </label>
+          <label className="block">
+            <span className="block text-xs uppercase tracking-wider text-ink/60 mb-1">Key</span>
+            <input
+              value={newKey}
+              onChange={(e) => setNewKey(e.target.value.toLowerCase().replace(/[^a-z0-9_-]/g, ""))}
+              className="w-full border border-ink/20 px-3 py-2 text-sm font-mono"
+              placeholder="site-faq"
+            />
+          </label>
+          <button
+            disabled={busy || !newKey || !newName}
+            onClick={onCreate}
+            className="inline-flex items-center gap-2 bg-ink text-white px-5 py-2 text-sm disabled:opacity-40 self-end"
+          >
+            <Plus className="size-4" /> Create
+          </button>
+        </div>
+      </div>
+
+      <PreviewLightbox
+        open={preview != null}
+        onClose={() => setPreview(null)}
+        src={preview ? previewSrc(preview.key) : ""}
+        title={preview?.name ?? ""}
+      />
+    </div>
+  );
+}