@bygghammar/cms-platform 0.28.0 → 0.30.0

package/src/backoffice/PagesListView.tsx

@@ -0,0 +1,369 @@
+import { useState, type ReactNode } from "react";
+import { toast } from "sonner";
+import { Plus, Trash2, Pencil, Globe as GlobeIcon, ExternalLink, Undo2 } from "lucide-react";
+
+/** A page row as listed by the host. */
+export type PageListRow = {
+  id: string;
+  key: string;
+  name: string;
+  status: string;
+  updated_at: string;
+  is_system?: boolean | null;
+};
+
+/** A soft-deleted page kept in the trash bin. */
+export type DeletedPageRow = {
+  id: string;
+  key: string;
+  name: string;
+  deleted_at?: string | null;
+  deleted_by?: string | null;
+  deleted_by_email?: string | null;
+};
+
+export type PagesListDeps = {
+  pages: PageListRow[] | undefined;
+  trash: { rows: DeletedPageRow[]; canPurge: boolean } | undefined;
+  /** Locale switcher — pass a single locale to hide the switcher. */
+  locales: { value: string; label: string }[];
+  locale: string;
+  setLocale: (locale: string) => void;
+  /** Public path for a page key in the active locale. */
+  pathFor: (key: string) => string;
+  /** Absolute URL for a page key, including the locale's domain when known. */
+  hrefFor: (key: string) => string;
+  createPage: (input: { key: string; name: string }) => Promise<unknown>;
+  renamePage: (input: { pageId: string; name: string }) => Promise<unknown>;
+  deletePage: (pageId: string) => Promise<unknown>;
+  restorePage: (pageId: string) => Promise<unknown>;
+  purgePage: (pageId: string) => Promise<unknown>;
+  refetchPages: () => void;
+  refetchTrash: () => void;
+  openEditor: (key: string) => void;
+  GlobalsLink: (props: { className?: string; children: ReactNode }) => ReactNode;
+};
+
+/** Page builder index: page list with public URLs, trash bin and page creation. */
+export function PagesListView({ deps }: { deps: PagesListDeps }): ReactNode {
+  const {
+    pages,
+    trash,
+    locales,
+    locale,
+    setLocale,
+    pathFor,
+    hrefFor,
+    createPage,
+    renamePage,
+    deletePage,
+    restorePage,
+    purgePage,
+    refetchPages,
+    refetchTrash,
+    openEditor,
+    GlobalsLink,
+  } = deps;
+
+  const [newKey, setNewKey] = useState("");
+  const [newName, setNewName] = useState("");
+  const [busy, setBusy] = useState(false);
+  const [renaming, setRenaming] = useState<{ id: string; name: string } | null>(null);
+
+  const fail = (e: unknown) => toast.error(e instanceof Error ? e.message : "Failed");
+
+  const onRename = async () => {
+    if (!renaming || !renaming.name.trim()) return;
+    try {
+      await renamePage({ pageId: renaming.id, name: renaming.name.trim() });
+      toast.success("Page renamed");
+      setRenaming(null);
+      refetchPages();
+    } catch (e) {
+      fail(e);
+    }
+  };
+
+  const onCreate = async () => {
+    if (!newKey || !newName) return;
+    setBusy(true);
+    try {
+      await createPage({ key: newKey, name: newName });
+      toast.success("Page created");
+      setNewKey("");
+      setNewName("");
+      refetchPages();
+    } catch (e) {
+      fail(e);
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const onDelete = async (id: string, name: string) => {
+    if (!confirm(`Move page "${name}" to the trash bin? It can be restored later.`)) return;
+    try {
+      await deletePage(id);
+      toast.success("Moved to trash");
+      refetchPages();
+      refetchTrash();
+    } catch (e) {
+      fail(e);
+    }
+  };
+
+  const onRestore = async (id: string) => {
+    try {
+      await restorePage(id);
+      toast.success("Page restored");
+      refetchPages();
+      refetchTrash();
+    } catch (e) {
+      fail(e);
+    }
+  };
+
+  const onPurge = async (id: string, name: string) => {
+    if (!confirm(`Permanently delete "${name}"? This cannot be undone.`)) return;
+    try {
+      await purgePage(id);
+      toast.success("Permanently deleted");
+      refetchTrash();
+    } catch (e) {
+      fail(e);
+    }
+  };
+
+  return (
+    <div className="p-8 md:p-12 w-full">
+      <div className="text-[0.7rem] uppercase tracking-[0.22em] text-ink/55">Page builder</div>
+      <div className="mt-2 flex flex-wrap items-end justify-between gap-4">
+        <h1 className="font-serif text-3xl md:text-4xl text-ink">Pages</h1>
+        <div className="flex items-center gap-3">
+          {locales.length > 1 && (
+            <div className="flex items-center gap-1">
+              {locales.map((loc) => (
+                <button
+                  key={loc.value}
+                  onClick={() => setLocale(loc.value)}
+                  className={`px-2 py-1 text-[0.7rem] uppercase tracking-widest border ${
+                    locale === loc.value
+                      ? "border-sea bg-ice/50 text-ink"
+                      : "border-ink/15 text-ink/50 hover:text-ink"
+                  }`}
+                >
+                  {loc.label}
+                </button>
+              ))}
+            </div>
+          )}
+          <GlobalsLink className="inline-flex items-center gap-2 border border-ink/20 px-4 py-2 text-sm text-ink hover:border-sea">
+            <>
+              <GlobeIcon className="size-4" /> Global blocks
+            </>
+          </GlobalsLink>
+        </div>
+      </div>
+
+      <p className="mt-4 max-w-2xl text-sm text-ink/60">
+        Compose each page from blocks and global blocks. Every save creates a new version — publish
+        when ready.
+      </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">Name</th>
+              <th className="px-4 py-3">Key</th>
+              <th className="px-4 py-3">URL</th>
+              <th className="px-4 py-3">Status</th>
+              <th className="px-4 py-3">Updated</th>
+              <th className="px-4 py-3 w-40"></th>
+            </tr>
+          </thead>
+          <tbody>
+            {pages?.map((p) => (
+              <tr key={p.id} className="border-t border-ink/10">
+                <td className="px-4 py-3 text-ink">
+                  {renaming?.id === p.id ? (
+                    <span className="flex items-center gap-2">
+                      <input
+                        autoFocus
+                        value={renaming.name}
+                        onChange={(e) => setRenaming({ id: p.id, name: e.target.value })}
+                        onKeyDown={(e) => {
+                          if (e.key === "Enter") onRename();
+                          if (e.key === "Escape") setRenaming(null);
+                        }}
+                        className="border border-ink/20 px-2 py-1 text-sm"
+                      />
+                      <button onClick={onRename} className="text-sea hover:underline text-xs">
+                        Save
+                      </button>
+                      <button
+                        onClick={() => setRenaming(null)}
+                        className="text-ink/50 hover:underline text-xs"
+                      >
+                        Cancel
+                      </button>
+                    </span>
+                  ) : (
+                    <>
+                      {p.name}{" "}
+                      {p.is_system && (
+                        <span className="ml-2 text-[0.65rem] text-ink/50">SYSTEM</span>
+                      )}
+                      <button
+                        onClick={() => setRenaming({ id: p.id, name: p.name })}
+                        className="ml-3 text-[0.7rem] text-ink/50 hover:text-sea underline"
+                      >
+                        rename
+                      </button>
+                    </>
+                  )}
+                </td>
+                <td className="px-4 py-3 text-ink/70 font-mono">{p.key}</td>
+                <td className="px-4 py-3">
+                  <a
+                    href={hrefFor(p.key)}
+                    target="_blank"
+                    rel="noreferrer"
+                    title={`Open ${hrefFor(p.key)}`}
+                    className="inline-flex items-center gap-1.5 font-mono text-xs text-sea hover:underline"
+                  >
+                    {pathFor(p.key)}
+                    <ExternalLink className="size-3 text-ink/40" />
+                  </a>
+                </td>
+                <td className="px-4 py-3 text-ink/70">{p.status}</td>
+                <td className="px-4 py-3 text-ink/50">{new Date(p.updated_at).toLocaleString()}</td>
+                <td className="px-4 py-3 text-right">
+                  <button
+                    onClick={() => openEditor(p.key)}
+                    className="inline-flex items-center gap-1 text-sea hover:underline mr-3"
+                  >
+                    <Pencil className="size-3.5" /> Edit
+                  </button>
+                  {!p.is_system && (
+                    <button
+                      onClick={() => onDelete(p.id, p.name)}
+                      className="inline-flex items-center gap-1 text-red-600 hover:underline"
+                    >
+                      <Trash2 className="size-3.5" /> Delete
+                    </button>
+                  )}
+                </td>
+              </tr>
+            ))}
+            {pages?.length === 0 && (
+              <tr>
+                <td colSpan={6} className="px-4 py-8 text-center text-ink/50">
+                  No pages yet.
+                </td>
+              </tr>
+            )}
+          </tbody>
+        </table>
+      </div>
+
+      <div className="mt-10 border border-ink/10 bg-white">
+        <div className="flex items-center justify-between px-6 py-4 border-b border-ink/10">
+          <div>
+            <div className="font-serif text-lg text-ink">Trash bin</div>
+            <p className="text-sm text-ink/60 mt-1">
+              Deleted pages are kept here with a record of who deleted them. Only a superadmin can
+              delete them permanently.
+            </p>
+          </div>
+        </div>
+        <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">Name</th>
+              <th className="px-4 py-3">Key</th>
+              <th className="px-4 py-3">Deleted by</th>
+              <th className="px-4 py-3">Deleted at</th>
+              <th className="px-4 py-3 w-56"></th>
+            </tr>
+          </thead>
+          <tbody>
+            {trash?.rows.map((p) => (
+              <tr key={p.id} className="border-t border-ink/10">
+                <td className="px-4 py-3 text-ink">{p.name}</td>
+                <td className="px-4 py-3 font-mono text-ink/70">{p.key}</td>
+                <td className="px-4 py-3 text-ink/70">
+                  {p.deleted_by_email ?? p.deleted_by ?? "Unknown user"}
+                </td>
+                <td className="px-4 py-3 text-ink/50">
+                  {p.deleted_at ? new Date(p.deleted_at).toLocaleString() : "—"}
+                </td>
+                <td className="px-4 py-3 text-right">
+                  <button
+                    onClick={() => onRestore(p.id)}
+                    className="inline-flex items-center gap-1 text-sea hover:underline mr-3"
+                  >
+                    <Undo2 className="size-3.5" /> Restore
+                  </button>
+                  {trash?.canPurge ? (
+                    <button
+                      onClick={() => onPurge(p.id, p.name)}
+                      className="inline-flex items-center gap-1 text-red-600 hover:underline"
+                    >
+                      <Trash2 className="size-3.5" /> Delete forever
+                    </button>
+                  ) : (
+                    <span className="text-[0.7rem] uppercase tracking-widest text-ink/40">
+                      Superadmin only
+                    </span>
+                  )}
+                </td>
+              </tr>
+            ))}
+            {(trash?.rows.length ?? 0) === 0 && (
+              <tr>
+                <td colSpan={5} className="px-4 py-8 text-center text-ink/50">
+                  Trash bin is empty.
+                </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 page</div>
+        <p className="text-sm text-ink/60 mt-1">Create a blank page — you can add blocks after.</p>
+        <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="About us"
+            />
+          </label>
+          <label className="block">
+            <span className="block text-xs uppercase tracking-wider text-ink/60 mb-1">
+              Key (URL-safe)
+            </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="about-us"
+            />
+          </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>
+    </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>
+  );
+}