@prenta/admin 1.5.1 → 1.6.0

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

@@ -1,5 +1,6 @@
 'use client'
 
+import { useState, type ReactNode } from 'react'
 import * as DropdownMenu from '@radix-ui/react-dropdown-menu'
 import {
   Calendar,
@@ -14,11 +15,20 @@ import {
 } from 'lucide-react'
 import { EditorSeoScoreBadge } from '../../components/seo/EditorSeoScoreBadge.js'
 import { BreakpointPicker } from '../../components/BreakpointPicker.js'
+import { RequestChangesDialog } from '../../components/RequestChangesDialog.js'
 import { ZoomChip } from '../../components/ZoomChip.js'
 import { adminPortalContainer } from '../../lib/portal-container.js'
 import type { PageStatus } from '../../lib/page-editor-service.js'
 import type { Zoom } from '../../lib/breakpoints.js'
 import { resolveViewSiteChrome, type ViewSiteIntent } from '../../lib/view-site-chrome.js'
+import {
+  APPROVE_LABEL,
+  REQUEST_CHANGES_LABEL,
+  REVIEWER_NOTE_PREFIX,
+  SUBMIT_FOR_REVIEW_LABEL,
+  resolveWorkflowChrome,
+  type WorkflowStage,
+} from '../../lib/workflow-chrome.js'
 import { type ViewportId } from './viewports.js'
 
 export type SaveState = 'idle' | 'saving' | 'saved' | 'error'
@@ -26,14 +36,16 @@ export type SaveState = 'idle' | 'saving' | 'saved' | 'error'
 interface EditorTopBarProps {
   title: string
   status: PageStatus
+  workflowStage: WorkflowStage
+  reviewNote?: string | null
+  role: string
   dirty: boolean
   saveState: SaveState
   publishing: boolean
   canEdit: boolean
-  canPublish: boolean
-  /** When false, Publish stays disabled even if the user has publish permission. */
+  /** When false, Approve stays disabled even if the user can review. */
   publishReady?: boolean
-  /** Shown on hover/focus when publish is blocked by validation (not role). */
+  /** Shown on hover/focus when approve is blocked by validation (not role). */
   publishDisabledReason?: string
   viewport: ViewportId
   /** Canvas zoom mode; omit to hide the zoom chip. */
@@ -82,7 +94,9 @@ interface EditorTopBarProps {
   /** Band for `seoScore`; omit to derive from the content-analysis scale. */
   seoScoreBand?: 'good' | 'fair' | 'poor'
   onSaveDraft: () => void
-  onPublish: () => void
+  onSubmitForReview: () => void
+  onApprove: () => void
+  onRequestChanges: (note: string) => void
   /** Open the schedule-publish dialog. Omitted when the document is unsaved. */
   onSchedule?: () => void
   /** When false, Schedule stays disabled (e.g. unsaved document). Defaults to true. */
@@ -97,21 +111,16 @@ interface EditorTopBarProps {
   structuralTypes?: string[]
 }
 
-const STATUS_TEXT: Record<PageStatus, { label: string; className: string }> = {
-  DRAFT: { label: 'Draft', className: 'text-warning dark:text-amber-400' },
-  PUBLISHED: { label: 'Published', className: 'text-emerald-600 dark:text-emerald-400' },
-  SCHEDULED: { label: 'Scheduled', className: 'text-warning dark:text-amber-400' },
-  ARCHIVED: { label: 'Archived', className: 'text-muted-foreground' },
-}
-
 export function EditorTopBar({
   title,
   status,
+  workflowStage,
+  reviewNote,
+  role,
   dirty,
   saveState,
   publishing,
   canEdit,
-  canPublish,
   publishReady = true,
   publishDisabledReason,
   viewport,
@@ -133,13 +142,16 @@ export function EditorTopBar({
   seoScore,
   seoScoreBand,
   onSaveDraft,
-  onPublish,
+  onSubmitForReview,
+  onApprove,
+  onRequestChanges,
   onSchedule,
   scheduleReady = true,
   scheduledAt = null,
   scheduledUnpublishAt = null,
 }: EditorTopBarProps) {
-  const statusInfo = STATUS_TEXT[status]
+  const [requestChangesOpen, setRequestChangesOpen] = useState(false)
+  const workflow = resolveWorkflowChrome({ stage: workflowStage, status, role, canEdit })
   const chrome = onViewOnSite
     ? resolveViewSiteChrome({
         status,
@@ -150,36 +162,74 @@ export function EditorTopBar({
       })
     : null
 
-  const publishBlocked = !canPublish || !publishReady || publishing || saveState === 'saving'
-  const publishTitle = publishing
+  const approveBlocked = !publishReady || publishing || saveState === 'saving'
+  const approveTitle = publishing
     ? 'Publishing…'
     : saveState === 'saving'
       ? 'Wait for the current save to finish'
-      : canPublish && !publishReady && publishDisabledReason
+      : !publishReady && publishDisabledReason
         ? publishDisabledReason
-        : !canPublish
-          ? 'You do not have permission to publish'
-          : undefined
+        : undefined
 
-  const scheduleBlocked =
-    !onSchedule ||
-    !canPublish ||
-    !publishReady ||
-    !scheduleReady ||
-    publishing ||
-    saveState === 'saving'
+  const scheduleBlocked = !publishReady || !scheduleReady || publishing || saveState === 'saving'
   const scheduleTitle =
     saveState === 'saving'
       ? 'Wait for the current save to finish'
       : !scheduleReady
         ? 'Save before scheduling'
-        : canPublish && !publishReady && publishDisabledReason
+        : !publishReady && publishDisabledReason
           ? publishDisabledReason
-          : !canPublish
-            ? 'You do not have permission to schedule'
-            : scheduledAt
-              ? `Reschedule — currently publishes ${formatScheduleLabel(scheduledAt)}`
-              : 'Schedule a future publish date'
+          : scheduledAt
+            ? `Reschedule — currently publishes ${formatScheduleLabel(scheduledAt)}`
+            : 'Schedule a future publish date'
+
+  const submitBlocked = !canEdit || publishing || saveState === 'saving'
+  const requestChangesBlocked = publishing || saveState === 'saving'
+  let primaryAction: ReactNode
+  switch (workflow.primary) {
+    case 'submit':
+      primaryAction = (
+        <button
+          type="button"
+          onClick={onSubmitForReview}
+          disabled={submitBlocked}
+          className="bg-primary text-primary-foreground hover:bg-primary/90 inline-flex items-center gap-1.5 rounded-lg px-3.5 py-1.5 text-sm font-medium transition-colors disabled:cursor-not-allowed disabled:opacity-50"
+        >
+          {publishing && <Loader2 className="h-3.5 w-3.5 animate-spin" aria-hidden />}
+          {SUBMIT_FOR_REVIEW_LABEL}
+        </button>
+      )
+      break
+    case 'approve':
+      primaryAction = (
+        <button
+          type="button"
+          onClick={onApprove}
+          disabled={approveBlocked}
+          title={approveTitle}
+          aria-disabled={approveBlocked}
+          className="bg-primary text-primary-foreground hover:bg-primary/90 inline-flex items-center gap-1.5 rounded-lg px-3.5 py-1.5 text-sm font-medium transition-colors disabled:cursor-not-allowed disabled:opacity-50"
+        >
+          {publishing && <Loader2 className="h-3.5 w-3.5 animate-spin" aria-hidden />}
+          {APPROVE_LABEL}
+        </button>
+      )
+      break
+    case 'waiting':
+      primaryAction = (
+        <span className="text-muted-foreground text-sm" aria-live="polite">
+          {workflow.waitingLabel}
+        </span>
+      )
+      break
+    case null:
+      primaryAction = null
+      break
+    default: {
+      const _exhaustive: never = workflow.primary
+      primaryAction = _exhaustive
+    }
+  }
 
   return (
     <header className="prenta-editor-header bg-card border-border flex h-14 shrink-0 items-center justify-between gap-4 border-b px-4">
@@ -199,11 +249,16 @@ export function EditorTopBar({
           <span className="text-foreground truncate font-medium">{title || 'Untitled page'}</span>
         </nav>
         <span
-          className={`ml-2 shrink-0 text-xs font-medium ${statusInfo.className}`}
-          aria-label={`Status: ${statusInfo.label}`}
+          className={`ml-2 shrink-0 text-xs font-medium ${workflow.statusClassName}`}
+          aria-label={`Status: ${workflow.statusLabel}`}
         >
-          {statusInfo.label}
+          {workflow.statusLabel}
         </span>
+        {reviewNote ? (
+          <span className="text-muted-foreground text-xs">
+            {REVIEWER_NOTE_PREFIX} {reviewNote}
+          </span>
+        ) : null}
         {scheduledAt && (
           <span
             className="text-muted-foreground ml-1 hidden shrink-0 text-xs sm:inline"
@@ -351,7 +406,7 @@ export function EditorTopBar({
           {saveState === 'saving' ? 'Saving…' : 'Save Draft'}
         </button>
 
-        {onSchedule && (
+        {onSchedule && workflow.showSchedule && (
           <button
             type="button"
             onClick={onSchedule}
@@ -365,17 +420,24 @@ export function EditorTopBar({
           </button>
         )}
 
-        <button
-          type="button"
-          onClick={onPublish}
-          disabled={publishBlocked}
-          title={publishTitle}
-          aria-disabled={publishBlocked}
-          className="bg-primary text-primary-foreground hover:bg-primary/90 inline-flex items-center gap-1.5 rounded-lg px-3.5 py-1.5 text-sm font-medium transition-colors disabled:cursor-not-allowed disabled:opacity-50"
-        >
-          {publishing && <Loader2 className="h-3.5 w-3.5 animate-spin" aria-hidden />}
-          Publish
-        </button>
+        {primaryAction}
+
+        {workflow.showRequestChanges && (
+          <button
+            type="button"
+            onClick={() => setRequestChangesOpen(true)}
+            disabled={requestChangesBlocked}
+            className="border-border text-foreground hover:bg-accent rounded-lg border px-3 py-1.5 text-sm font-medium transition-colors disabled:cursor-not-allowed disabled:opacity-50"
+          >
+            {REQUEST_CHANGES_LABEL}
+          </button>
+        )}
+
+        <RequestChangesDialog
+          open={requestChangesOpen}
+          onClose={() => setRequestChangesOpen(false)}
+          onConfirm={onRequestChanges}
+        />
       </div>
     </header>
   )

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

@@ -22,16 +22,17 @@ import {
   emptyPage,
   fetchPageForEditor,
   missingPageFields,
-  publishPage,
   PAGES_COLLECTION,
   savePageDraft,
   toggleSectionVisibility,
+  transitionPageWorkflow,
   updateSectionContent,
   updateSectionMeta,
   validatePage,
   type EditorPage,
   type ValidationResult,
 } from '../../lib/page-editor-service.js'
+import { resolveWorkflowChrome, type WorkflowStage } from '../../lib/workflow-chrome.js'
 import { SharePreviewLinkDialog } from '../../components/SharePreviewLinkDialog.js'
 import { openPublicSiteTab } from '../../lib/open-public-site-tab.js'
 import type { ViewSiteIntent } from '../../lib/view-site-chrome.js'
@@ -210,13 +211,13 @@ export function PageSectionEditor({
   /** 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 [shareOpen, setShareOpen] = useState(false)
   const [leaveTarget, setLeaveTarget] = useState<string | null>(null)
   const [validation, setValidation] = useState<ValidationResult | null>(null)
 
-  const { canEdit, canPublish, canCreateRedirect } = useMemo(() => deriveCan(session), [session])
+  const { canEdit, canCreateRedirect } = useMemo(() => deriveCan(session), [session])
+  const sessionRole = String(session?.user?.role ?? '')
   const customRenderers = useAdminSectionRenderers()
   const {
     siteUrl: publicSiteUrl,
@@ -535,43 +536,115 @@ export function PageSectionEditor({
     [directives, reloadAudit],
   )
 
-  const handleSaveDraft = useCallback(async (): Promise<boolean> => {
-    if (!page) return false
-    const result = validatePage(page, false)
-    if (result.errors.length > 0) {
-      setValidation(result)
-      toast.error(result.errors[0]!)
-      setSettingsOpen(true)
-      return false
-    }
-    setSaveState('saving')
-    try {
-      const saved = await savePageDraft(page)
-      if (saved.id) await saveDirectives(saved.id)
-      acceptPage(saved)
-      setDirty(false)
-      setSaveState('saved')
-      setValidation(null)
-      toast.success('Draft saved')
-      if (!documentId && saved.id) onNavigate(`/pages/${saved.id}/edit`)
-      return true
-    } catch (err) {
-      setSaveState('error')
-      toast.error(err instanceof Error ? err.message : 'Failed to save draft')
-      return false
-    }
-  }, [page, documentId, onNavigate, saveDirectives, acceptPage])
+  const handleSaveDraft = useCallback(
+    async (options?: { navigate?: boolean }): Promise<EditorPage | false> => {
+      if (!page) return false
+      const result = validatePage(page, false)
+      if (result.errors.length > 0) {
+        setValidation(result)
+        toast.error(result.errors[0]!)
+        setSettingsOpen(true)
+        return false
+      }
+      setSaveState('saving')
+      try {
+        const saved = await savePageDraft(page)
+        if (saved.id) await saveDirectives(saved.id)
+        acceptPage(saved)
+        setDirty(false)
+        setSaveState('saved')
+        setValidation(null)
+        toast.success('Draft saved')
+        if ((options?.navigate ?? true) && !documentId && saved.id) {
+          onNavigate(`/pages/${saved.id}/edit`)
+        }
+        return saved
+      } catch (err) {
+        setSaveState('error')
+        toast.error(err instanceof Error ? err.message : 'Failed to save draft')
+        return false
+      }
+    },
+    [page, documentId, onNavigate, saveDirectives, acceptPage],
+  )
+
+  const runWorkflow = useCallback(
+    async (stage: WorkflowStage, note?: string, toastOk?: string) => {
+      if (!page) return
+      let current = page
+      if (dirty || !current.id) {
+        const saved = await handleSaveDraft({ navigate: false })
+        if (!saved) return
+        current = saved
+      }
+      setPublishing(true)
+      try {
+        // The move has to be read BEFORE the transition — `acceptPage` moves
+        // the published path to the new one, after which there is nothing to
+        // detect. Same block as the old `doPublish`.
+        const move =
+          stage === 'PUBLISHED' && redirectOnPublish && canCreateRedirect
+            ? pendingSlugChange(publishedPath, current.path)
+            : null
+
+        const next = await transitionPageWorkflow(current, stage, note)
+
+        if (move) {
+          const { error } = await createPublishRedirect(move)
+          if (error) {
+            // Loud, and naming both paths: the page has already moved, so a
+            // silently-failed redirect leaves exactly the broken links the
+            // switch promised to prevent.
+            toast.error(`Published, but the redirect ${move.from} → ${move.to} failed: ${error}`)
+          } else {
+            toast.success(`Redirect created: ${move.from} → ${move.to}`)
+          }
+        }
+
+        if (stage === 'PUBLISHED' && next.id) await saveDirectives(next.id)
+
+        acceptPage(next)
+        if (!documentId && next.id) onNavigate(`/pages/${next.id}/edit`)
+        if (toastOk) toast.success(toastOk)
+      } catch (err) {
+        toast.error(err instanceof Error ? err.message : 'Transition failed')
+      } finally {
+        setPublishing(false)
+      }
+    },
+    [
+      page,
+      dirty,
+      documentId,
+      handleSaveDraft,
+      redirectOnPublish,
+      canCreateRedirect,
+      publishedPath,
+      acceptPage,
+      saveDirectives,
+      onNavigate,
+    ],
+  )
 
-  const requestPublish = useCallback(() => {
+  const handleSubmitForReview = useCallback(
+    () => runWorkflow('IN_REVIEW', undefined, 'Submitted for review.'),
+    [runWorkflow],
+  )
+
+  const handleApprove = useCallback(() => {
     if (!page) return
     const result = validatePage(page, true)
-    setValidation(result.errors.length || result.warnings.length ? result : null)
     if (result.errors.length > 0) {
       toast.error('Resolve the listed issues before publishing')
       return
     }
-    setConfirmPublish(true)
-  }, [page])
+    void runWorkflow('PUBLISHED', undefined, 'Published.')
+  }, [page, runWorkflow])
+
+  const handleRequestChanges = useCallback(
+    (note: string) => runWorkflow('DRAFT', note || undefined, 'Sent back to draft.'),
+    [runWorkflow],
+  )
 
   const requestSchedule = useCallback(async () => {
     if (!page) return
@@ -589,8 +662,15 @@ export function PageSectionEditor({
       const ok = await handleSaveDraft()
       if (!ok) return
     }
+    const chrome = resolveWorkflowChrome({
+      stage: page.workflowStage,
+      status: page.status,
+      role: sessionRole,
+      canEdit: effectiveCanEdit,
+    })
+    if (!chrome.showSchedule) return
     setScheduleOpen(true)
-  }, [page, dirty, handleSaveDraft])
+  }, [page, dirty, handleSaveDraft, sessionRole, effectiveCanEdit])
 
   const handleScheduled = useCallback(
     (next: { status: string; scheduledAt: string | null; scheduledUnpublishAt: string | null }) => {
@@ -609,52 +689,6 @@ export function PageSectionEditor({
     [],
   )
 
-  const doPublish = useCallback(async () => {
-    if (!page) return
-    setPublishing(true)
-    try {
-      // The move has to be read BEFORE publishing — `acceptPage` moves the
-      // published path to the new one, after which there is nothing to detect.
-      const move =
-        redirectOnPublish && canCreateRedirect ? pendingSlugChange(publishedPath, page.path) : null
-
-      const published = await publishPage(page)
-      if (published.id) await saveDirectives(published.id)
-
-      if (move) {
-        const { error } = await createPublishRedirect(move)
-        if (error) {
-          // Loud, and naming both paths: the page has already moved, so a
-          // silently-failed redirect leaves exactly the broken links the switch
-          // promised to prevent.
-          toast.error(`Published, but the redirect ${move.from} → ${move.to} failed: ${error}`)
-        } else {
-          toast.success(`Redirect created: ${move.from} → ${move.to}`)
-        }
-      }
-
-      acceptPage(published)
-      setDirty(false)
-      setSaveState('saved')
-      setValidation(null)
-      toast.success('Page published')
-      if (!documentId && published.id) onNavigate(`/pages/${published.id}/edit`)
-    } catch (err) {
-      toast.error(err instanceof Error ? err.message : 'Failed to publish page')
-    } finally {
-      setPublishing(false)
-    }
-  }, [
-    page,
-    documentId,
-    onNavigate,
-    saveDirectives,
-    redirectOnPublish,
-    canCreateRedirect,
-    publishedPath,
-    acceptPage,
-  ])
-
   const handleDuplicate = useCallback(async () => {
     if (!page?.id) return
     const { id, error } = await duplicatePage(page.id)
@@ -754,7 +788,7 @@ export function PageSectionEditor({
         path: page.path,
         trailingSlash,
         dirty,
-        saveDraft: handleSaveDraft,
+        saveDraft: async () => Boolean(await handleSaveDraft()),
       }).catch((err) => {
         toast.error(err instanceof Error ? err.message : 'Failed to open the site')
       })
@@ -833,11 +867,13 @@ export function PageSectionEditor({
         <EditorTopBar
           title={page.title}
           status={page.status}
+          workflowStage={page.workflowStage}
+          reviewNote={page.reviewNote}
+          role={sessionRole}
           dirty={dirty}
           saveState={saveState}
           publishing={publishing}
           canEdit={effectiveCanEdit}
-          canPublish={canPublish && effectiveCanEdit}
           publishReady={publishReady}
           publishDisabledReason={publishDisabledReason}
           viewport={viewport}
@@ -863,7 +899,9 @@ export function PageSectionEditor({
             typeof audit?.seo.score === 'number' ? scoreBand(audit.seo.score) : undefined
           }
           onSaveDraft={handleSaveDraft}
-          onPublish={requestPublish}
+          onSubmitForReview={handleSubmitForReview}
+          onApprove={handleApprove}
+          onRequestChanges={handleRequestChanges}
           onSchedule={page.id ? requestSchedule : undefined}
           scheduleReady={Boolean(page.id)}
           scheduledAt={page.scheduledAt}
@@ -1037,15 +1075,6 @@ export function PageSectionEditor({
         onSave={handlePageSettings}
       />
 
-      <ConfirmDialog
-        open={confirmPublish}
-        onClose={() => setConfirmPublish(false)}
-        onConfirm={doPublish}
-        title="Publish this page?"
-        description="The current content will go live and replace the published version."
-        confirmLabel="Publish"
-      />
-
       {page.id && (
         <SchedulePublishDialog
           collectionSlug={PAGES_COLLECTION}