@prenta/admin 0.93.0 → 0.95.0

package/src/views/page-editor/PageSectionEditor.tsx

@@ -10,7 +10,14 @@ import { SeoEditorPane } from '../../components/seo/SeoEditorPane.js'
 import { EditorRail, RailHeader } from '../../components/EditorRail.js'
 import { EditorRailTabs, type RailTab, type RailTabId } from '../../components/EditorRailTabs.js'
 import { ErrorBoundary } from '../../components/ErrorBoundary.js'
-import { VersionHistory } from '../../components/VersionHistory.js'
+import { VersionHistoryPanel } from './VersionHistoryPanel.js'
+import { ReviewBar } from './ReviewBar.js'
+import {
+  fetchPageVersions,
+  restorePageVersion,
+  type PageVersion,
+} from '../../lib/version-history.js'
+import { changedSectionIds, diffVersions } from '../../lib/version-diff.js'
 import {
   emptyPage,
   fetchPageForEditor,
@@ -22,7 +29,6 @@ import {
   updateSectionContent,
   updateSectionContentAtPath,
   updateSectionMeta,
-  updateSectionSettings,
   validatePage,
   type EditorPage,
   type ValidationResult,
@@ -34,7 +40,6 @@ import {
   createPreviewToken,
 } from '../../lib/preview-link.js'
 import { usePublicSiteUrl } from '../../hooks/usePublicSiteUrl.js'
-import type { SectionSettings } from './section-types.js'
 import { DEFAULT_VIEWPORT, type ViewportId } from './viewports.js'
 import type { Zoom } from '../../lib/breakpoints.js'
 import { snapshotBaseline, type ReflowBaseline } from '../../lib/reflow-baseline.js'
@@ -56,7 +61,7 @@ import { EditorCanvas } from './EditorCanvas.js'
 import { ReflowContext } from './reflow-context.js'
 import { SitePreviewFrame } from './SitePreviewFrame.js'
 import { useSitePreview } from './useSitePreview.js'
-import { SectionInspector } from './SectionInspector.js'
+import { SectionEditForm } from './SectionEditForm.js'
 import { PageSettingsModal } from './PageSettingsModal.js'
 import { ValidationSummary } from './ValidationSummary.js'
 import { resolveDefaultSitePreview } from '../../lib/editor-preview.js'
@@ -221,6 +226,12 @@ export function PageSectionEditor({
   /** Active rail tab. Replaces the old boolean `seoOpen` right-hand aside. */
   const [railTab, setRailTab] = useState<RailTabId>('sections')
   const [historyOpen, setHistoryOpen] = useState(false)
+  const [versions, setVersions] = useState<PageVersion[]>([])
+  const [versionsLoading, setVersionsLoading] = useState(false)
+  const [versionsError, setVersionsError] = useState<string | null>(null)
+  /** Index into `versions`; 0 is the newest, which is the current content. */
+  const [versionIndex, setVersionIndex] = useState(0)
+  const [restoring, setRestoring] = useState(false)
   const [confirmPublish, setConfirmPublish] = useState(false)
   const [scheduleOpen, setScheduleOpen] = useState(false)
   const [leaveTarget, setLeaveTarget] = useState<string | null>(null)
@@ -325,6 +336,105 @@ export function PageSectionEditor({
 
   const activeRailTab = railTabs.find((tab) => tab.id === railTab) ?? railTabs[0]!
 
+  // ─── Version history ─────────────────────────────────────────────────
+  // History is a MODE, not a dialog: it overlays the rail and drives the
+  // canvas, so the version being reviewed is editor state rather than
+  // something owned by a panel that can be unmounted.
+
+  const loadVersions = useCallback(async (pageId: string) => {
+    setVersionsLoading(true)
+    setVersionsError(null)
+    try {
+      setVersions(await fetchPageVersions(PAGES_COLLECTION, pageId))
+    } catch (err) {
+      setVersions([])
+      setVersionsError(err instanceof Error ? err.message : 'Failed to load version history')
+    } finally {
+      setVersionsLoading(false)
+    }
+  }, [])
+
+  const openHistory = useCallback(() => {
+    if (!page?.id) return
+    setHistoryOpen(true)
+    // Always land on "current" so opening history never silently swaps the
+    // canvas out from under the editor.
+    setVersionIndex(0)
+    void loadVersions(page.id)
+  }, [page?.id, loadVersions])
+
+  const closeHistory = useCallback(() => {
+    setHistoryOpen(false)
+    setVersionIndex(0)
+  }, [])
+
+  /**
+   * Index 0 is the current content, which the canvas is already showing — so
+   * selecting it is "back to current", not a review. Only an older index puts
+   * the editor into review mode.
+   */
+  const reviewing = historyOpen && versionIndex > 0
+  const reviewVersion = reviewing ? (versions[versionIndex] ?? null) : null
+
+  // What that version's save CHANGED — diffed against the one before it, which
+  // is the question the outlines on the canvas answer.
+  const reviewChanges = useMemo(
+    () =>
+      reviewVersion
+        ? diffVersions(reviewVersion.sections, versions[versionIndex + 1]?.sections)
+        : [],
+    [reviewVersion, versions, versionIndex],
+  )
+  const reviewChangedIds = useMemo(() => changedSectionIds(reviewChanges), [reviewChanges])
+
+  const handleRestoreVersion = useCallback(
+    async (version: PageVersion) => {
+      if (!page?.id) return
+      setRestoring(true)
+      try {
+        await restorePageVersion(PAGES_COLLECTION, page.id, version.id)
+        // Re-read rather than trusting the snapshot we already hold: the
+        // restore goes through the normal update path, so hooks and derived
+        // fields may have altered what actually landed.
+        const restored = await fetchPageForEditor(page.id)
+        acceptPage(restored)
+        setSelectedId(null)
+        setDirty(false)
+        setSaveState('idle')
+        setValidation(null)
+        closeHistory()
+        void loadVersions(page.id)
+        toast.success('Version restored')
+      } catch (err) {
+        toast.error(err instanceof Error ? err.message : 'Failed to restore version')
+      } finally {
+        setRestoring(false)
+      }
+    },
+    [page?.id, acceptPage, closeHistory, loadVersions],
+  )
+
+  // ─── Edit permission ─────────────────────────────────────────────────
+  /**
+   * ADR 0002: a Page-Builder-owned page (it has a `_layout`) compiles its
+   * sections from the builder layout on every save, so editing them here would
+   * be overwritten. The server independently refuses such edits with 409.
+   */
+  const readOnly = page?.builderOwned ?? false
+  /**
+   * The single gate every writing surface reads.
+   *
+   * Hoisted above the callbacks rather than derived at render time, because
+   * the two that were left behind were the ones that mattered: the site
+   * preview's in-place edit handlers close over `canEdit` (the raw role) and
+   * so kept accepting edits while a past version was under review — and while
+   * a builder-owned page was supposedly read-only. The iframe is a second
+   * editing surface, and a lock that only covers the rail is not a lock.
+   */
+  const effectiveCanEdit = canEdit && !readOnly && !reviewing
+  /** Restoring is not editing: it is allowed precisely while reviewing. */
+  const canRestoreVersion = canEdit && !readOnly
+
   // ─── Load ──────────────────────────────────────────────────────────
   useEffect(() => {
     let cancelled = false
@@ -396,13 +506,12 @@ export function PageSectionEditor({
     [selectedId, mutateSections],
   )
 
-  const handleSettingsChange = useCallback(
-    (patch: Partial<SectionSettings>) => {
-      if (!selectedId) return
-      mutateSections((s) => updateSectionSettings(s, selectedId, patch))
-    },
-    [selectedId, mutateSections],
-  )
+  // NOTE: there is deliberately no `handleSettingsChange` here any more.
+  // `settings` holds background, spacing, anchor and CSS class — the template's
+  // business, not the editor's (docs/design-owned-sections.md). The values
+  // still round-trip through save untouched and the renderers still read them;
+  // this editor simply no longer offers to change them. The post TEMPLATE
+  // editor keeps the full set, because that is the surface that authors one.
 
   const handleMetaChange = useCallback(
     (patch: { name?: string; internalLabel?: string }) => {
@@ -610,24 +719,6 @@ export function PageSectionEditor({
     onNavigate('/pages')
   }, [page?.id, onNavigate])
 
-  // After a version restore the server has already written the restored
-  // data — refetch so the editor reflects it instead of the stale state.
-  const handleRestored = useCallback(() => {
-    if (!page?.id) return
-    fetchPageForEditor(page.id)
-      .then((p) => {
-        acceptPage(p)
-        setSelectedId(null)
-        setRailTab('sections')
-        setDirty(false)
-        setSaveState('idle')
-        setValidation(null)
-      })
-      .catch(() => {
-        toast.error('Version restored — refresh the page to see it.')
-      })
-  }, [page?.id])
-
   const handleSeoSaved = useCallback(() => {
     reloadAudit()
     if (!page?.id) return
@@ -656,25 +747,28 @@ export function PageSectionEditor({
     setPendingFocusPath(fieldPath ?? null)
   }, [])
 
+  // `effectiveCanEdit`, not `canEdit`: the site preview is a second editing
+  // surface, so a role check alone let it write through both the version-review
+  // lock and the builder-owned lock the rest of the editor honours.
   const handleCanvasEdit = useCallback(
     (edit: { sectionId: string; fieldPath: string; value: string }) => {
-      if (!canEdit) return
+      if (!effectiveCanEdit) return
       setSuppressSectionsEcho((n) => n + 1)
       mutateSections((s) =>
         updateSectionContentAtPath(s, edit.sectionId, edit.fieldPath, edit.value),
       )
       setSelectedId(edit.sectionId)
     },
-    [canEdit, mutateSections],
+    [effectiveCanEdit, mutateSections],
   )
 
   const handleCanvasRequestMedia = useCallback(
     (request: { sectionId: string; fieldPath: string }) => {
-      if (!canEdit) return
+      if (!effectiveCanEdit) return
       setSelectedId(request.sectionId)
       setCanvasMediaTarget(request)
     },
-    [canEdit],
+    [effectiveCanEdit],
   )
 
   // After a canvas field click, focus the matching inspector input once painted.
@@ -805,14 +899,12 @@ export function PageSectionEditor({
     )
   }
 
-  const selected = page.sections.find((s) => s.id === selectedId) ?? null
+  // `readOnly` / `effectiveCanEdit` / `canRestoreVersion` are computed above,
+  // with the hooks, so the callbacks defined there share this one gate.
 
-  // ADR 0002: a Page-Builder-owned page (it has a `_layout`) compiles its
-  // sections from the builder layout on every save, so editing them here would
-  // be overwritten. Open this editor read-only and route the user to the
-  // builder. The server independently refuses such edits with 409.
-  const readOnly = page.builderOwned
-  const effectiveCanEdit = canEdit && !readOnly
+  // The canvas shows the reviewed snapshot, but `page.sections` stays the
+  // editor's own content throughout — nothing about review mode writes to it.
+  const canvasSections = reviewVersion ? reviewVersion.sections : page.sections
 
   // Sections whose type has no registered definition (seed/code-owned, e.g.
   // `opal-*`). They are preserved verbatim on save but can't be edited here.
@@ -857,7 +949,8 @@ export function PageSectionEditor({
           onViewOnSite={page.id ? handleViewOnSite : undefined}
           sitePreview={sitePreview.active}
           onToggleSitePreview={page.id && page.slug ? sitePreview.toggle : undefined}
-          onHistory={page.id ? () => setHistoryOpen(true) : undefined}
+          historyOpen={historyOpen}
+          onHistory={page.id ? () => (historyOpen ? closeHistory() : openHistory()) : undefined}
           onOpenSettings={() => setSettingsOpen(true)}
           onOpenSeo={handleToggleSeo}
           seoOpen={railTab === 'seo'}
@@ -926,7 +1019,7 @@ export function PageSectionEditor({
         )}
 
         <ReflowContext.Provider value={reflowContext}>
-          <div className="relative flex flex-1 overflow-hidden">
+          <div className="prenta-editor-body relative flex flex-1 overflow-hidden">
             <EditorRail collapsedLabel={activeRailTab.label}>
               {({ width, dragging, collapse }) => (
                 <>
@@ -951,6 +1044,21 @@ export function PageSectionEditor({
                         canEdit={effectiveCanEdit}
                         onSelect={handleSelectSection}
                         onToggleVisibility={handleToggleVisibility}
+                        // The editor opens inside the row it belongs to. While
+                        // reviewing a past version there is nothing to edit, so
+                        // rows stay closed rather than opening a dead form.
+                        renderEditor={
+                          reviewing
+                            ? undefined
+                            : (section) => (
+                                <SectionEditForm
+                                  section={section}
+                                  canEdit={effectiveCanEdit}
+                                  onContentChange={handleContentChange}
+                                  onMetaChange={handleMetaChange}
+                                />
+                              )
+                        }
                       />
                     ) : railTab === 'page' ? (
                       <div className="min-h-0 flex-1 overflow-y-auto">
@@ -992,6 +1100,23 @@ export function PageSectionEditor({
                       />
                     )}
                   </div>
+
+                  {/* Overlays the rail rather than replacing its contents, so
+                      closing history returns to exactly the tab and scroll
+                      position it was opened from. */}
+                  {historyOpen && (
+                    <VersionHistoryPanel
+                      versions={versions}
+                      loading={versionsLoading}
+                      error={versionsError}
+                      selectedIndex={versionIndex}
+                      onSelect={setVersionIndex}
+                      onClose={closeHistory}
+                      onRestore={handleRestoreVersion}
+                      restoring={restoring}
+                      canRestore={canRestoreVersion}
+                    />
+                  )}
                 </>
               )}
             </EditorRail>
@@ -1012,7 +1137,7 @@ export function PageSectionEditor({
                 />
               ) : (
                 <EditorCanvas
-                  sections={page.sections}
+                  sections={canvasSections}
                   selectedId={selectedId}
                   breakpoint={viewport}
                   zoom={zoom}
@@ -1021,35 +1146,27 @@ export function PageSectionEditor({
                   onSelect={handleSelectSection}
                   structuralTypes={structuralTypes}
                   sitePreviewAvailable={sitePreviewAvailable && !sitePreview.active}
+                  reviewing={reviewing}
+                  changedSectionIds={reviewChangedIds}
+                  reviewBar={
+                    reviewVersion ? (
+                      <ReviewBar
+                        version={reviewVersion}
+                        changedCount={reviewChangedIds.size}
+                        onRestore={() => void handleRestoreVersion(reviewVersion)}
+                        onBackToCurrent={() => setVersionIndex(0)}
+                        restoring={restoring}
+                        canRestore={canRestoreVersion}
+                      />
+                    ) : null
+                  }
                 />
               )}
             </div>
-
-            {selected && railTab === 'sections' && (
-              <SectionInspector
-                section={selected}
-                canEdit={effectiveCanEdit}
-                onClose={() => setSelectedId(null)}
-                onContentChange={handleContentChange}
-                onSettingsChange={handleSettingsChange}
-                onMetaChange={handleMetaChange}
-                onToggleVisibility={() => handleToggleVisibility(selected.id)}
-              />
-            )}
           </div>
         </ReflowContext.Provider>
       </div>
 
-      {page.id && (
-        <VersionHistory
-          collectionSlug="pages"
-          documentId={page.id}
-          open={historyOpen}
-          onClose={() => setHistoryOpen(false)}
-          onRestore={handleRestored}
-        />
-      )}
-
       <PageSettingsModal
         open={settingsOpen}
         page={page}

package/src/views/page-editor/ReviewBar.tsx

@@ -0,0 +1,76 @@
+'use client'
+
+import { History, Loader2 } from 'lucide-react'
+import { dayLabel, timeLabel, type PageVersion } from '../../lib/version-history.js'
+
+export interface ReviewBarProps {
+  version: PageVersion
+  changedCount: number
+  onRestore: () => void
+  onBackToCurrent: () => void
+  restoring: boolean
+  canRestore: boolean
+}
+
+/**
+ * The strip above the canvas while a past version is on it.
+ *
+ * Occupies the same slot as the editing tip and the structure notice, and
+ * replaces both rather than stacking with them: everything that slot normally
+ * says is about editing the current page, which is precisely what you cannot
+ * do here. It also has to be unmissable — the canvas below looks like a
+ * perfectly ordinary editable page, and the only thing separating "reviewing
+ * history" from "editing" is this bar.
+ */
+export function ReviewBar({
+  version,
+  changedCount,
+  onRestore,
+  onBackToCurrent,
+  restoring,
+  canRestore,
+}: ReviewBarProps) {
+  return (
+    <div
+      // `status`, not a bare div: entering review mode is a change of what the
+      // whole canvas means, and a screen-reader user gets no equivalent of the
+      // amber colour that announces it to everyone else.
+      role="status"
+      className="border-warning/35 bg-warning/10 text-foreground mx-auto mb-3 flex w-fit max-w-full flex-wrap items-center gap-2.5 rounded-full border py-1.5 pr-1.5 pl-3.5 text-[11.5px]"
+    >
+      <History className="text-warning h-3.5 w-3.5 shrink-0" aria-hidden />
+      <span className="min-w-0">
+        Viewing{' '}
+        <strong className="font-semibold">
+          {dayLabel(version.createdAt)} {timeLabel(version.createdAt)}
+        </strong>{' '}
+        by <strong className="font-semibold">{version.author.name}</strong>
+        {changedCount > 0 && (
+          <>
+            {' · '}
+            {changedCount} section{changedCount === 1 ? '' : 's'} changed
+          </>
+        )}
+      </span>
+
+      {canRestore && (
+        <button
+          type="button"
+          onClick={onRestore}
+          disabled={restoring}
+          className="border-border bg-card text-foreground hover:bg-accent inline-flex shrink-0 items-center gap-1.5 rounded-full border px-2.5 py-1 text-[11px] font-medium transition-colors disabled:cursor-not-allowed disabled:opacity-50"
+        >
+          {restoring && <Loader2 className="h-3 w-3 animate-spin" aria-hidden />}
+          Restore
+        </button>
+      )}
+      <button
+        type="button"
+        onClick={onBackToCurrent}
+        className="border-border bg-card text-foreground hover:bg-accent shrink-0 rounded-full border px-2.5 py-1 text-[11px] font-medium transition-colors"
+      >
+        Back to current
+      </button>
+    </div>
+  )
+}

package/src/views/page-editor/SectionEditForm.tsx

@@ -0,0 +1,161 @@
+'use client'
+
+import { ExternalLink, Lock } from 'lucide-react'
+import { RichTextField } from '../../fields/RichTextField.js'
+import type { PageSection } from '../../lib/page-editor-service.js'
+import { ContentField, FIELD_INPUT, FIELD_LABEL } from './section-fields.js'
+import { getSectionType } from './section-types.js'
+
+export interface SectionEditFormProps {
+  section: PageSection
+  canEdit: boolean
+  onContentChange: (patch: Record<string, unknown>) => void
+  onMetaChange: (patch: { name?: string; internalLabel?: string }) => void
+  /** Post body field — shown when an Article Body section is bound to the post field. */
+  postBody?: string
+  onPostBodyChange?: (html: string) => void
+}
+
+/**
+ * The section editor, rendered inline as the body of its row.
+ *
+ * ── Why inline, and not a docked panel ────────────────────────────────────
+ *
+ * The design puts the form inside the row it belongs to: click a section, it
+ * opens underneath. It never had a right-hand panel. The panel that existed
+ * here was left over from the pre-handoff editor, and the rail work that
+ * introduced the tab strip explicitly retired the OTHER right-hand aside — the
+ * SEO one — on the grounds that "the editor has one settings surface rather
+ * than two competing ones". This is that same second surface, finally closed.
+ *
+ * ── Why there is no Appearance group ──────────────────────────────────────
+ *
+ * This CMS edits words, images and embed code. Background, colour and spacing
+ * are the template's business, and `docs/design-owned-sections.md` already
+ * says so in as many words: the editor changes "copy, CTAs, and imagery —
+ * never layout, order, or styling". The controls contradicted that rule while
+ * sitting one panel away from the sentence stating it.
+ *
+ * The VALUES are untouched. `settings` round-trips through save exactly as
+ * before, the renderers keep reading it, and every existing page renders
+ * identically — the editor simply stops offering to change it. Removing the
+ * controls and dropping the data are very different changes, and this is only
+ * the first. The template editor keeps the full set: it is the surface that
+ * authors a template, and styling genuinely belongs there.
+ */
+export function SectionEditForm({
+  section,
+  canEdit,
+  onContentChange,
+  onMetaChange,
+  postBody,
+  onPostBodyChange,
+}: SectionEditFormProps) {
+  const def = getSectionType(section.sectionType)
+
+  // Unmanaged types have no registered field schema, so there is nothing to
+  // render a form from. Say why rather than showing an empty box.
+  if (section.unmanaged) {
+    return (
+      <div className="border-border bg-muted/40 border-t px-3 py-3">
+        <p className="text-muted-foreground flex items-start gap-2 text-xs leading-relaxed">
+          <Lock className="mt-0.5 h-3.5 w-3.5 shrink-0" aria-hidden />
+          <span>
+            <span className="text-foreground font-medium">Managed outside the editor</span> — this
+            section&rsquo;s type (<code className="font-mono">{section.sectionType}</code>) is not
+            registered, so it is preserved on save but edited in code.
+          </span>
+        </p>
+      </div>
+    )
+  }
+
+  const bodySource = String(section.content.source ?? 'field')
+  const editPostBodyField =
+    section.sectionType === 'article-body' &&
+    bodySource === 'field' &&
+    onPostBodyChange !== undefined
+  const contentFields = def?.fields.filter((f) => !(editPostBodyField && f.key === 'body')) ?? []
+
+  return (
+    <div className="border-border bg-muted/40 border-t px-3 py-3.5">
+      <fieldset disabled={!canEdit} className="space-y-3">
+        {editPostBodyField && (
+          <RichTextField
+            label="Body"
+            value={postBody ?? ''}
+            onChange={onPostBodyChange}
+            className="[&_.ProseMirror]:min-h-[240px]"
+            helpText="Main article copy — rendered in the canvas preview and on the live site."
+          />
+        )}
+
+        {contentFields.map((field) => (
+          <ContentField
+            key={field.key}
+            id={`sec-${section.id}-${field.key}`}
+            field={field}
+            value={section.content[field.key]}
+            onChange={(v) => onContentChange({ [field.key]: v })}
+            onPatch={(patch) => onContentChange(patch)}
+          />
+        ))}
+
+        {contentFields.length === 0 && !editPostBodyField && (
+          <p className="text-muted-foreground text-xs">
+            This section has no editable content — it is rendered entirely from the template.
+          </p>
+        )}
+
+        <details className="group">
+          <summary className="text-muted-foreground hover:text-foreground cursor-pointer list-none text-[11px] font-medium tracking-wider uppercase">
+            Section settings
+          </summary>
+          <div className="mt-2.5 space-y-3">
+            <div>
+              <label className={FIELD_LABEL} htmlFor={`sec-${section.id}-name`}>
+                Section name
+              </label>
+              <input
+                id={`sec-${section.id}-name`}
+                className={FIELD_INPUT}
+                value={section.name}
+                onChange={(e) => onMetaChange({ name: e.target.value })}
+              />
+            </div>
+            <div>
+              <label className={FIELD_LABEL} htmlFor={`sec-${section.id}-internal`}>
+                Internal label
+              </label>
+              <input
+                id={`sec-${section.id}-internal`}
+                className={FIELD_INPUT}
+                placeholder="Team-only note (optional)"
+                value={section.internalLabel ?? ''}
+                onChange={(e) => onMetaChange({ internalLabel: e.target.value })}
+              />
+            </div>
+          </div>
+        </details>
+      </fieldset>
+
+      {/* The design's locked note, per section rather than once per rail: this
+          is where an editor looks for the control that is missing. */}
+      <p className="text-muted-foreground mt-3 flex items-start gap-1.5 text-[11px] leading-relaxed">
+        <Lock className="mt-0.5 h-3 w-3 shrink-0" aria-hidden />
+        <span>
+          Background, spacing and layout come from the template.{' '}
+          <a
+            href="https://github.com/actuate-media/prenta/blob/main/docs/design-owned-sections.md"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="text-brand inline-flex items-center gap-0.5 hover:underline"
+          >
+            Why
+            <ExternalLink className="h-2.5 w-2.5" aria-hidden />
+          </a>
+        </span>
+      </p>
+    </div>
+  )
+}