@bygghammar/cms-platform 0.28.0 → 0.29.0

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # Changelog
 
+## 0.29.0
+
+- Added `backoffice/GlobalSectionsListView` — the global-sections library with
+  previews, block chips, create and delete.
+- Added `backoffice/GlobalSectionBuilderView` — editor for one global section or
+  global block: rename, convert kind, usage note, save; the block editor and
+  data access are host-injected.
+- Added `backoffice/ReviewsView` — the reviews/testimonials slider editor with
+  host-supplied media picker and uploader.
+
 ## 0.28.0
 
 - Added `backoffice/FormSubmissionsView` — the submissions inbox (filters, bulk

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bygghammar/cms-platform",
-  "version": "0.28.0",
+  "version": "0.29.0",
   "description": "Shared CMS platform: blocks, block types, i18n core, UI primitives and design-token contract used by every Bygghammar/Voyara site.",
   "type": "module",
   "sideEffects": false,
@@ -130,7 +130,10 @@
     "./backoffice/BackupView": "./src/backoffice/BackupView.tsx",
     "./backoffice/FormSubmissionsView": "./src/backoffice/FormSubmissionsView.tsx",
     "./backoffice/FormDeliveriesView": "./src/backoffice/FormDeliveriesView.tsx",
-    "./backoffice/FormSettingsView": "./src/backoffice/FormSettingsView.tsx"
+    "./backoffice/FormSettingsView": "./src/backoffice/FormSettingsView.tsx",
+    "./backoffice/GlobalSectionsListView": "./src/backoffice/GlobalSectionsListView.tsx",
+    "./backoffice/GlobalSectionBuilderView": "./src/backoffice/GlobalSectionBuilderView.tsx",
+    "./backoffice/ReviewsView": "./src/backoffice/ReviewsView.tsx"
   },
   "dependencies": {
     "fflate": "^0.8.3"

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>
+  );
+}

package/src/backoffice/ReviewsView.tsx

@@ -0,0 +1,231 @@
+import { useEffect, useState, type ReactNode } from "react";
+import { toast } from "sonner";
+import { Plus, Trash2, ArrowUp, ArrowDown, Save, ChevronLeft } from "lucide-react";
+import type { ComponentType } from "react";
+
+type LocalizedText = Record<string, string>;
+
+/** One quote in the reviews slider. */
+export type ReviewItem = {
+  quote: LocalizedText;
+  name: LocalizedText;
+  role: LocalizedText;
+  image?: string;
+  imageAlt?: LocalizedText;
+};
+
+export type ReviewsSection = {
+  eyebrow: LocalizedText;
+  title: LocalizedText;
+  autoplayMs: number;
+  items: ReviewItem[];
+};
+
+export type ReviewsDeps = {
+  /** Current section content, already merged from overrides and code defaults. */
+  source: ReviewsSection | undefined;
+  /** Locale the editor writes to; the public site of a single-locale host uses this. */
+  locale: string;
+  save: (section: ReviewsSection) => Promise<unknown>;
+  /** Host media picker — usually the project's wrapper around `inspectors/fields`. */
+  MediaField: ComponentType<{
+    label: string;
+    value: string | undefined;
+    onChange: (url: string) => void;
+    accept?: "image" | "video" | "any";
+  }>;
+  /** Host review-image uploader, already wired to its storage. */
+  ReviewImageUpload: ComponentType<{ onUploaded: (url: string) => void }>;
+  BackLink: (props: { className?: string; children: ReactNode }) => ReactNode;
+};
+
+/** Editor for the reviews/testimonials slider content section. */
+export function ReviewsView({ deps }: { deps: ReviewsDeps }): ReactNode {
+  const { source, locale, save, BackLink, MediaField, ReviewImageUpload } = deps;
+  const [section, setSection] = useState<ReviewsSection | null>(null);
+  const [busy, setBusy] = useState(false);
+
+  useEffect(() => {
+    if (source) setSection(structuredClone(source));
+  }, [source]);
+
+  if (!section) return <div className="p-8">Loading…</div>;
+
+  const one = (value: string): LocalizedText => ({ [locale]: value });
+  const update = (patch: Partial<ReviewsSection>) => setSection({ ...section, ...patch });
+  const updateItem = (i: number, patch: Partial<ReviewItem>) => {
+    const items = section.items.slice();
+    items[i] = { ...items[i], ...patch } as ReviewItem;
+    update({ items });
+  };
+  const removeItem = (i: number) => update({ items: section.items.filter((_, idx) => idx !== i) });
+  const move = (i: number, dir: -1 | 1) => {
+    const items = section.items.slice();
+    const j = i + dir;
+    if (j < 0 || j >= items.length) return;
+    [items[i], items[j]] = [items[j]!, items[i]!];
+    update({ items });
+  };
+  const addItem = () =>
+    update({ items: [...section.items, { quote: one(""), name: one(""), role: one("") }] });
+
+  const onSave = async () => {
+    setBusy(true);
+    try {
+      await save(section);
+      toast.success("Reviews saved");
+    } catch (err) {
+      toast.error(err instanceof Error ? err.message : "Could not save");
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  return (
+    <div className="p-8 md:p-12 w-full">
+      <BackLink className="inline-flex items-center gap-2 text-xs uppercase tracking-[0.22em] text-ink/60 hover:text-ink">
+        <>
+          <ChevronLeft className="size-4" />
+          Dashboard
+        </>
+      </BackLink>
+      <h1 className="mt-4 font-serif text-3xl md:text-4xl text-ink">Reviews</h1>
+      <p className="mt-3 text-ink/65 max-w-xl">
+        Edit the quotes shown in the slider. Changes appear after saving.
+      </p>
+
+      <div className="mt-8 grid gap-3 md:grid-cols-2">
+        <label className="block">
+          <span className="text-[0.65rem] uppercase tracking-[0.22em] text-ink/55">Eyebrow</span>
+          <input
+            className="mt-2 w-full border border-ink/15 bg-white px-4 py-3"
+            value={section.eyebrow[locale] ?? ""}
+            onChange={(e) => update({ eyebrow: one(e.target.value) })}
+          />
+        </label>
+        <label className="block">
+          <span className="text-[0.65rem] uppercase tracking-[0.22em] text-ink/55">Title</span>
+          <input
+            className="mt-2 w-full border border-ink/15 bg-white px-4 py-3"
+            value={section.title[locale] ?? ""}
+            onChange={(e) => update({ title: one(e.target.value) })}
+          />
+        </label>
+        <label className="block">
+          <span className="text-[0.65rem] uppercase tracking-[0.22em] text-ink/55">
+            Autoplay (ms)
+          </span>
+          <input
+            type="number"
+            min={0}
+            className="mt-2 w-full border border-ink/15 bg-white px-4 py-3"
+            value={section.autoplayMs}
+            onChange={(e) => update({ autoplayMs: Number(e.target.value) || 0 })}
+          />
+        </label>
+      </div>
+
+      <div className="mt-8 space-y-4">
+        {section.items.map((it, i) => (
+          <div key={i} className="border border-ink/10 bg-white p-5">
+            <div className="flex items-center justify-between gap-3">
+              <div className="text-[0.65rem] uppercase tracking-[0.22em] text-ink/55">#{i + 1}</div>
+              <div className="flex items-center gap-1">
+                <button
+                  onClick={() => move(i, -1)}
+                  disabled={i === 0}
+                  className="p-2 hover:bg-ink/5 disabled:opacity-30"
+                >
+                  <ArrowUp className="size-4" />
+                </button>
+                <button
+                  onClick={() => move(i, 1)}
+                  disabled={i === section.items.length - 1}
+                  className="p-2 hover:bg-ink/5 disabled:opacity-30"
+                >
+                  <ArrowDown className="size-4" />
+                </button>
+                <button onClick={() => removeItem(i)} className="p-2 hover:bg-red-50 text-red-600">
+                  <Trash2 className="size-4" />
+                </button>
+              </div>
+            </div>
+            <div className="mt-4 grid gap-3">
+              <label className="block">
+                <span className="text-[0.65rem] uppercase tracking-[0.22em] text-ink/55">
+                  Quote
+                </span>
+                <textarea
+                  className="mt-2 w-full border border-ink/15 bg-white px-3 py-2 text-sm min-h-[90px]"
+                  value={it.quote[locale] ?? ""}
+                  onChange={(e) => updateItem(i, { quote: one(e.target.value) })}
+                />
+              </label>
+              <div className="grid gap-3 md:grid-cols-2">
+                <label className="block">
+                  <span className="text-[0.65rem] uppercase tracking-[0.22em] text-ink/55">
+                    Name
+                  </span>
+                  <input
+                    className="mt-2 w-full border border-ink/15 bg-white px-3 py-2 text-sm"
+                    value={it.name[locale] ?? ""}
+                    onChange={(e) => updateItem(i, { name: one(e.target.value) })}
+                  />
+                </label>
+                <label className="block">
+                  <span className="text-[0.65rem] uppercase tracking-[0.22em] text-ink/55">
+                    Role
+                  </span>
+                  <input
+                    className="mt-2 w-full border border-ink/15 bg-white px-3 py-2 text-sm"
+                    value={it.role[locale] ?? ""}
+                    onChange={(e) => updateItem(i, { role: one(e.target.value) })}
+                  />
+                </label>
+              </div>
+              <div className="grid gap-3 md:grid-cols-2">
+                <div className="space-y-2">
+                  <MediaField
+                    label="Image"
+                    accept="image"
+                    value={it.image}
+                    onChange={(url) => updateItem(i, { image: url || undefined })}
+                  />
+                  <ReviewImageUpload onUploaded={(url) => updateItem(i, { image: url })} />
+                </div>
+                <label className="block">
+                  <span className="text-[0.65rem] uppercase tracking-[0.22em] text-ink/55">
+                    Image alt text
+                  </span>
+                  <input
+                    className="mt-2 w-full border border-ink/15 bg-white px-3 py-2 text-sm"
+                    value={it.imageAlt?.[locale] ?? ""}
+                    onChange={(e) => updateItem(i, { imageAlt: one(e.target.value) })}
+                  />
+                </label>
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+
+      <div className="mt-6 flex flex-wrap items-center gap-3">
+        <button
+          onClick={addItem}
+          className="inline-flex items-center gap-2 border border-ink/20 px-5 py-2.5 text-xs uppercase tracking-[0.22em] hover:border-ink"
+        >
+          <Plus className="size-4" />
+          Add review
+        </button>
+        <button
+          onClick={onSave}
+          disabled={busy}
+          className="inline-flex items-center gap-2 bg-ink text-paper px-6 py-3 text-xs uppercase tracking-[0.22em] hover:bg-ink/85 disabled:opacity-50"
+        >
+          <Save className="size-4" />
+          {busy ? "Saving…" : "Save all changes"}
+        </button>
+      </div>
+    </div>
+  );
+}