@prenta/admin 1.2.0 → 1.3.1

package/src/views/post-editor/PostSectionEditor.tsx

@@ -10,7 +10,16 @@ import { EditorRail, RailHeader } from '../../components/EditorRail.js'
 import { EditorRailTabs, type RailTab, type RailTabId } from '../../components/EditorRailTabs.js'
 import { SeoEditorPane } from '../../components/seo/SeoEditorPane.js'
 import { ErrorBoundary } from '../../components/ErrorBoundary.js'
-import { VersionHistory } from '../../components/VersionHistory.js'
+import { VersionHistoryPanel } from '../page-editor/VersionHistoryPanel.js'
+import { ReviewBar } from '../page-editor/ReviewBar.js'
+import {
+  fetchPageVersions,
+  restorePageVersion,
+  type PageVersion,
+} from '../../lib/version-history.js'
+import { changedSectionIds, diffVersions } from '../../lib/version-diff.js'
+import { scoreBand, type PageAuditResult } from '@prenta/core/seo/page-audit'
+import { usePageAudit } from '../../hooks/usePageAudit.js'
 import {
   emptyPostFromTemplate,
   fetchPostForEditor,
@@ -41,13 +50,25 @@ import { EditorTopBar, type SaveState } from '../page-editor/EditorTopBar.js'
 import { SectionsList } from '../page-editor/SectionsPanel.js'
 import { SectionEditForm } from '../page-editor/SectionEditForm.js'
 import { ValidationSummary } from '../page-editor/ValidationSummary.js'
-import { buildEditorContentHtml, computeLiveSeoScore } from '../../lib/editor-seo-content.js'
+import { buildEditorContentHtml } from '../../lib/editor-seo-content.js'
 import { snapshotBaseline, type ReflowBaseline } from '../../lib/reflow-baseline.js'
 import { ReflowContext } from '../page-editor/reflow-context.js'
 import type { Zoom } from '../../lib/breakpoints.js'
 import { inspectorIdFromFieldPath } from '../../lib/preview-bridge.js'
 import { PostEditorCanvas } from './PostEditorCanvas.js'
 import { PostFieldsModal, type PostFieldConfig } from './PostFieldsModal.js'
+import { PostTab } from './PostTab.js'
+
+/**
+ * The lower of the two audit scores — the tab dot should reflect the half that
+ * needs work, not an average that hides it. Same three-valued contract as the
+ * page editor: undefined = not reported yet, null = gated off, number = score.
+ */
+function weakestAuditScore(audit: PageAuditResult | null): number | null | undefined {
+  if (!audit) return undefined
+  const scores = [audit.seo.score, audit.geo.score].filter((s): s is number => s !== null)
+  return scores.length ? Math.min(...scores) : null
+}
 
 /** The slice of the resolved CMS config this editor reads. */
 interface EditorConfig {
@@ -127,6 +148,18 @@ export function PostSectionEditor({
   const [railTab, setRailTab] = useState<RailTabId>('sections')
   const seoOpen = railTab === 'seo'
   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)
+  /**
+   * Live audit reported by the SEO pane, built from unsaved form state. Null
+   * until that pane has mounted — `audit` below falls back to the saved-record
+   * audit so the header chip and tab dot always have a number.
+   */
+  const [liveAudit, setLiveAudit] = useState<PageAuditResult | null>(null)
   const [confirmPublish, setConfirmPublish] = useState(false)
   const [scheduleOpen, setScheduleOpen] = useState(false)
   const [shareOpen, setShareOpen] = useState(false)
@@ -179,6 +212,20 @@ export function PostSectionEditor({
   )
   const publishReady = Boolean(post) && publishCheck.errors.length === 0
 
+  const { audit: savedAudit } = usePageAudit({
+    entityType: 'post',
+    entityId: post?.id ?? null,
+    sections: post?.sections ?? [],
+    slug: post?.slug ?? '',
+    fallback: { title: post?.seoTitle, description: post?.seoDescription },
+    post: {
+      title: post?.title,
+      bodyHtml: post?.body,
+      featuredImage: post?.featuredImage,
+    },
+  })
+  const audit = liveAudit ?? savedAudit
+
   const railTabs = useMemo<RailTab[]>(
     () => [
       {
@@ -187,13 +234,19 @@ export function PostSectionEditor({
         title: 'Post content',
         count: post?.sections.length ?? 0,
       },
-      // No score dot yet. The page editor's comes from the page audit, which
-      // is page-scoped; wiring a number here from `computeLiveSeoScore` would
-      // put a different model's score on a tab, which is the disagreement the
-      // page editor was rewired to remove.
-      { id: 'seo', label: 'SEO & GEO', title: 'Search & AI readiness' },
+      {
+        id: 'seo',
+        label: 'SEO & GEO',
+        title: 'Search & AI readiness',
+        score: weakestAuditScore(audit),
+      },
+      {
+        id: 'page',
+        label: 'Post',
+        title: 'Post settings',
+      },
     ],
-    [post?.sections.length],
+    [post?.sections.length, audit],
   )
   const activeRailTab = railTabs.find((tab) => tab.id === railTab) ?? railTabs[0]!
 
@@ -218,17 +271,6 @@ export function PostSectionEditor({
     [canvasEl, selectedId, baseline, viewport],
   )
 
-  const liveSeoScore = useMemo(() => {
-    if (!post) return 0
-    return computeLiveSeoScore({
-      title: post.title,
-      slug: post.slug,
-      seoTitle: post.seoTitle,
-      seoDescription: post.seoDescription,
-      sections: post.sections,
-      bodyHtml: post.body,
-    })
-  }, [post])
   const publishDisabledReason = publishCheck.errors[0]
 
   // ─── Load ──────────────────────────────────────────────────────────
@@ -437,23 +479,77 @@ export function PostSectionEditor({
     }
   }, [post, documentId, postType, 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(() => {
+  // ─── 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 (postId: string) => {
+      setVersionsLoading(true)
+      setVersionsError(null)
+      try {
+        setVersions(await fetchPageVersions(postType, postId))
+      } catch (err) {
+        setVersions([])
+        setVersionsError(err instanceof Error ? err.message : 'Failed to load version history')
+      } finally {
+        setVersionsLoading(false)
+      }
+    },
+    [postType],
+  )
+
+  const openHistory = useCallback(() => {
     if (!post?.id) return
-    fetchPostForEditor(postType, post.id)
-      .then((p) => {
-        acceptPost(p)
+    setHistoryOpen(true)
+    setVersionIndex(0)
+    void loadVersions(post.id)
+  }, [post?.id, loadVersions])
+
+  const closeHistory = useCallback(() => {
+    setHistoryOpen(false)
+    setVersionIndex(0)
+  }, [])
+
+  const reviewing = historyOpen && versionIndex > 0
+  const reviewVersion = reviewing ? (versions[versionIndex] ?? null) : null
+
+  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 (!post?.id) return
+      setRestoring(true)
+      try {
+        await restorePageVersion(postType, post.id, version.id)
+        const restored = await fetchPostForEditor(postType, post.id)
+        acceptPost(restored)
         setSelectedId(null)
-        setRailTab('sections')
         setDirty(false)
         setSaveState('idle')
         setValidation(null)
-      })
-      .catch(() => {
-        toast.error('Version restored — refresh the page to see it.')
-      })
-  }, [postType, post?.id])
+        closeHistory()
+        void loadVersions(post.id)
+        toast.success('Version restored')
+      } catch (err) {
+        toast.error(err instanceof Error ? err.message : 'Failed to restore version')
+      } finally {
+        setRestoring(false)
+      }
+    },
+    [post?.id, postType, acceptPost, closeHistory, loadVersions],
+  )
+
+  const effectiveCanEdit = canEdit && !reviewing
+  const canRestoreVersion = canEdit
 
   const handleSeoSaved = useCallback(() => {
     if (!post?.id) return
@@ -590,8 +686,8 @@ export function PostSectionEditor({
           dirty={dirty}
           saveState={saveState}
           publishing={publishing}
-          canEdit={canEdit}
-          canPublish={canPublish && canEdit}
+          canEdit={effectiveCanEdit}
+          canPublish={canPublish && effectiveCanEdit}
           publishReady={publishReady}
           publishDisabledReason={publishDisabledReason}
           viewport={viewport}
@@ -605,11 +701,15 @@ export function PostSectionEditor({
           onShare={post.id ? handleShare : undefined}
           hasPublicSiteUrl={Boolean(publicSiteUrl)}
           matchesAdminOrigin={matchesAdminOrigin}
-          onHistory={post.id ? () => setHistoryOpen(true) : undefined}
+          historyOpen={historyOpen}
+          onHistory={post.id ? () => (historyOpen ? closeHistory() : openHistory()) : undefined}
           onOpenSettings={() => setFieldsOpen(true)}
           onOpenSeo={handleToggleSeo}
           seoOpen={seoOpen}
-          seoScore={liveSeoScore}
+          seoScore={audit?.seo.score ?? undefined}
+          seoScoreBand={
+            typeof audit?.seo.score === 'number' ? scoreBand(audit.seo.score) : undefined
+          }
           onSaveDraft={handleSaveDraft}
           onPublish={requestPublish}
           onSchedule={post.id ? requestSchedule : undefined}
@@ -667,27 +767,44 @@ export function PostSectionEditor({
                       <SectionsList
                         sections={post.sections}
                         selectedId={selectedId}
-                        canEdit={canEdit}
+                        canEdit={effectiveCanEdit}
                         onSelect={handleSelectSection}
                         onToggleVisibility={handleToggleVisibility}
-                        renderEditor={(section) => (
-                          <SectionEditForm
-                            section={section}
-                            canEdit={canEdit}
-                            onContentChange={handleContentChange}
-                            onMetaChange={handleMetaChange}
-                            postBody={post.body}
-                            onPostBodyChange={handlePostBodyChange}
-                          />
-                        )}
+                        renderEditor={
+                          reviewing
+                            ? undefined
+                            : (section) => (
+                                <SectionEditForm
+                                  section={section}
+                                  canEdit={effectiveCanEdit}
+                                  onContentChange={handleContentChange}
+                                  onMetaChange={handleMetaChange}
+                                  postBody={post.body}
+                                  onPostBodyChange={handlePostBodyChange}
+                                />
+                              )
+                        }
                       />
+                    ) : railTab === 'page' ? (
+                      <div className="min-h-0 flex-1 overflow-y-auto">
+                        <PostTab
+                          post={post}
+                          canEdit={effectiveCanEdit}
+                          fields={config?.collections?.[postType]?.fields}
+                          onChange={handleFields}
+                        />
+                      </div>
                     ) : (
                       <SeoEditorPane
                         entityType="post"
                         entityId={post.id}
                         slug={post.slug}
                         auditSections={post.sections}
+                        onAuditChange={setLiveAudit}
                         contentHtml={seoContentHtml}
+                        title={post.title}
+                        bodyHtml={post.body}
+                        featuredImage={post.featuredImage}
                         draftMeta={{
                           seoTitle: post.seoTitle,
                           seoDescription: post.seoDescription,
@@ -698,15 +815,39 @@ export function PostSectionEditor({
                       />
                     )}
                   </div>
+
+                  {historyOpen && (
+                    <VersionHistoryPanel
+                      versions={versions}
+                      loading={versionsLoading}
+                      error={versionsError}
+                      selectedIndex={versionIndex}
+                      onSelect={setVersionIndex}
+                      onClose={closeHistory}
+                      onRestore={handleRestoreVersion}
+                      restoring={restoring}
+                      canRestore={canRestoreVersion}
+                    />
+                  )}
                 </>
               )}
             </EditorRail>
 
             <div className="flex-1 overflow-hidden">
               <PostEditorCanvas
-                sections={post.sections}
+                sections={reviewVersion ? reviewVersion.sections : post.sections}
                 header={header}
-                context={context}
+                context={
+                  reviewVersion
+                    ? {
+                        ...context,
+                        title: reviewVersion.title ?? context.title,
+                        excerpt: reviewVersion.excerpt ?? context.excerpt,
+                        body: reviewVersion.body ?? context.body,
+                        featuredImageUrl: reviewVersion.featuredImage ?? context.featuredImageUrl,
+                      }
+                    : context
+                }
                 selectedId={selectedId}
                 viewport={viewport}
                 zoom={zoom}
@@ -714,26 +855,30 @@ export function PostSectionEditor({
                 onCanvasElement={setCanvasEl}
                 onSelect={handleSelectSection}
                 structuralTypes={structuralTypes}
+                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>
           </div>
         </ReflowContext.Provider>
       </div>
 
-      {post.id && (
-        <VersionHistory
-          collectionSlug={postType}
-          documentId={post.id}
-          open={historyOpen}
-          onClose={() => setHistoryOpen(false)}
-          onRestore={handleRestored}
-        />
-      )}
-
       <PostFieldsModal
         open={fieldsOpen}
         post={post}
-        canEdit={canEdit}
+        canEdit={effectiveCanEdit}
         fields={config?.collections?.[postType]?.fields}
         onClose={() => setFieldsOpen(false)}
         onSave={handleFields}

package/src/views/post-editor/PostTab.tsx

@@ -0,0 +1,46 @@
+'use client'
+
+import { useState } from 'react'
+import type { EditorPost } from '../../lib/post-editor-service.js'
+import { PostFieldsForm, type PostFieldConfig } from './PostFieldsForm.js'
+
+export interface PostTabProps {
+  post: EditorPost
+  canEdit: boolean
+  fields?: Record<string, PostFieldConfig | undefined>
+  onChange: (patch: Partial<EditorPost>) => void
+}
+
+/**
+ * Rail tab 3 — post identity fields only.
+ *
+ * Title, slug, excerpt, featured image, category, and tags. Layout, header
+ * chrome, and template controls stay design-owned on the type template.
+ * Address / 301 / robots / author / danger-zone belong to pages, not posts.
+ */
+export function PostTab({ post, canEdit, fields, onChange }: PostTabProps) {
+  const [slugTouched, setSlugTouched] = useState(Boolean(post.slug))
+
+  return (
+    <div className="p-3">
+      <PostFieldsForm
+        idPrefix="post"
+        values={{
+          title: post.title,
+          slug: post.slug,
+          excerpt: post.excerpt,
+          featuredImage: post.featuredImage,
+          category: post.category,
+          tags: post.tags,
+        }}
+        canEdit={canEdit}
+        fields={fields}
+        postType={post.postType}
+        bodyHtml={post.body}
+        slugTouched={slugTouched}
+        onSlugTouched={() => setSlugTouched(true)}
+        onChange={(patch) => onChange(patch)}
+      />
+    </div>
+  )
+}

package/src/views/settings/useAppearanceSettings.ts

@@ -153,7 +153,7 @@ const DEFAULT_FORM: AppearanceForm = {
   colorMode: 'system',
   accent: 'purple',
   density: 'default',
-  font: 'DM Sans',
+  font: 'System UI',
   reduceMotion: false,
 }