@prenta/admin 0.93.0 → 0.94.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,
@@ -221,6 +228,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 +338,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
@@ -610,24 +722,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 +750,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.
@@ -807,12 +904,12 @@ export function PageSectionEditor({
 
   const selected = page.sections.find((s) => s.id === selectedId) ?? null
 
-  // 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
+  // `readOnly` / `effectiveCanEdit` / `canRestoreVersion` are computed above,
+  // with the hooks, so the callbacks defined there share this one gate.
+
+  // 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 +954,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 +1024,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 }) => (
                 <>
@@ -992,6 +1090,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 +1127,7 @@ export function PageSectionEditor({
                 />
               ) : (
                 <EditorCanvas
-                  sections={page.sections}
+                  sections={canvasSections}
                   selectedId={selectedId}
                   breakpoint={viewport}
                   zoom={zoom}
@@ -1021,11 +1136,25 @@ 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' && (
+            {selected && railTab === 'sections' && !reviewing && (
               <SectionInspector
                 section={selected}
                 canEdit={effectiveCanEdit}
@@ -1040,16 +1169,6 @@ export function PageSectionEditor({
         </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/SectionInspector.tsx

@@ -51,7 +51,8 @@ interface SectionInspectorProps {
 const LABEL = 'text-foreground mb-1 block text-xs font-medium'
 const INPUT =
   'border-input bg-input-background text-foreground focus-visible:ring-ring w-full rounded-md border px-2.5 py-1.5 text-sm focus-visible:ring-2 focus-visible:outline-none'
-const INSPECTOR_SHELL = 'bg-card border-border flex h-full flex-col border-l'
+const INSPECTOR_SHELL =
+  'prenta-editor-inspector bg-card border-border flex h-full flex-col border-l'
 
 function InspectorHeaderActions({
   onClose,

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

@@ -305,7 +305,7 @@ function SectionRow({
             disabled={!canEdit}
             aria-pressed={!section.visible}
             aria-label={section.visible ? `Hide ${section.name}` : `Show ${section.name}`}
-            className="text-muted-foreground hover:text-foreground shrink-0 rounded p-1 disabled:opacity-40"
+            className="prenta-touch-target text-muted-foreground hover:text-foreground shrink-0 rounded p-1 disabled:opacity-40"
           >
             {section.visible ? (
               <Eye className="h-4 w-4" aria-hidden />
@@ -321,7 +321,7 @@ function SectionRow({
                   type="button"
                   disabled={!canEdit}
                   aria-label={`More actions for ${section.name}`}
-                  className="text-muted-foreground hover:text-foreground shrink-0 rounded p-1 disabled:opacity-40"
+                  className="prenta-touch-target text-muted-foreground hover:text-foreground shrink-0 rounded p-1 disabled:opacity-40"
                 >
                   <MoreVertical className="h-4 w-4" aria-hidden />
                 </button>