@prenta/admin 1.4.0 → 1.6.0

package/src/views/ApiKeys.tsx

@@ -285,7 +285,6 @@ interface CreateApiKeyDialogProps {
 function CreateApiKeyDialog({ open, onClose, onCreated }: CreateApiKeyDialogProps) {
   const [name, setName] = useState('')
   const [preset, setPreset] = useState<'admin' | 'content' | 'readonly' | 'custom'>('content')
-  const [pageBuilder, setPageBuilder] = useState(true)
   const [media, setMedia] = useState(true)
   const [expiresInDays, setExpiresInDays] = useState<string>('')
   const [password, setPassword] = useState('')
@@ -299,7 +298,6 @@ function CreateApiKeyDialog({ open, onClose, onCreated }: CreateApiKeyDialogProp
         actions: ['read'],
         globals: ['*'],
         media: false,
-        pageBuilder: false,
       }
     }
     if (preset === 'content') {
@@ -308,14 +306,12 @@ function CreateApiKeyDialog({ open, onClose, onCreated }: CreateApiKeyDialogProp
         actions: ['read', 'create', 'update'],
         globals: ['*'],
         media,
-        pageBuilder,
       }
     }
     return {
       collections: ['*'],
       actions: ['read'],
       media,
-      pageBuilder,
     }
   }
 
@@ -418,15 +414,6 @@ function CreateApiKeyDialog({ open, onClose, onCreated }: CreateApiKeyDialogProp
                   />
                   Allow media uploads
                 </label>
-                <label className="text-foreground flex items-center gap-2 text-sm">
-                  <input
-                    type="checkbox"
-                    checked={pageBuilder}
-                    onChange={(e) => setPageBuilder(e.target.checked)}
-                    className="accent-brand h-4 w-4"
-                  />
-                  Allow AI page generation
-                </label>
               </div>
             )}
 

package/src/views/SEO.tsx

@@ -241,11 +241,6 @@ export function SEO({ onNavigate, initialTab = 'overview' }: SEOProps) {
                 <OverviewTab
                   resource={overviewResource}
                   onOpenIssue={(issueId) => onNavigate?.(`/seo?tab=audit&issueId=${issueId}`)}
-                  onConnectSearchConsole={() =>
-                    toast.info(
-                      'Google Search Console integration is coming soon. Demo performance data is available in local development.',
-                    )
-                  }
                 />
               )}
             </Tabs.Content>

package/src/views/Trash.tsx

@@ -0,0 +1,207 @@
+'use client'
+
+import { useCallback, useEffect, useMemo, useState } from 'react'
+import { Loader2, RotateCcw, Trash2 } from 'lucide-react'
+import { toast } from 'sonner'
+import { cmsApi } from '../lib/api.js'
+import { EmptyState } from '../components/ui/EmptyState.js'
+
+export interface TrashProps {
+  onNavigate: (path: string) => void
+  config?: {
+    collections?:
+      | Record<string, { slug?: string; admin?: { hidden?: boolean } } | undefined>
+      | Array<{ slug?: string; admin?: { hidden?: boolean } }>
+  }
+}
+
+interface TrashRow {
+  id: string
+  collection: string
+  title: string
+  slug: string | null
+  deletedAt: string | null
+  updatedAt: string | null
+}
+
+interface ListEnvelope {
+  docs?: Array<Record<string, unknown>>
+}
+
+function editorPath(collection: string, id: string): string {
+  if (collection === 'pages') return `/pages/${id}`
+  if (collection === 'posts') return `/posts/posts/${id}/edit`
+  return `/collections/${collection}/${id}`
+}
+
+function formatWhen(value: string | null): string {
+  if (!value) return '—'
+  const date = new Date(value)
+  if (Number.isNaN(date.getTime())) return '—'
+  return date.toLocaleString(undefined, {
+    month: 'short',
+    day: 'numeric',
+    year: 'numeric',
+    hour: 'numeric',
+    minute: '2-digit',
+  })
+}
+
+function asRow(collection: string, doc: Record<string, unknown>): TrashRow {
+  const data = doc.data && typeof doc.data === 'object' ? (doc.data as Record<string, unknown>) : {}
+  const title =
+    (typeof doc.title === 'string' && doc.title) ||
+    (typeof data.title === 'string' && data.title) ||
+    'Untitled'
+  const slug =
+    (typeof doc.slug === 'string' && doc.slug) ||
+    (typeof data.slug === 'string' && data.slug) ||
+    null
+  return {
+    id: String(doc.id ?? ''),
+    collection,
+    title,
+    slug,
+    deletedAt: typeof doc.deletedAt === 'string' ? doc.deletedAt : null,
+    updatedAt: typeof doc.updatedAt === 'string' ? doc.updatedAt : null,
+  }
+}
+
+export function Trash({ onNavigate, config }: TrashProps) {
+  const collections = useMemo(() => {
+    const raw = config?.collections
+    const list = Array.isArray(raw) ? raw : Object.values(raw ?? {})
+    const fromConfig = list
+      .filter((c): c is { slug: string; admin?: { hidden?: boolean } } => {
+        if (!c?.slug) return false
+        return !c.admin?.hidden
+      })
+      .map((c) => c.slug)
+    return [...new Set(['pages', 'posts', ...fromConfig])]
+  }, [config])
+
+  const [rows, setRows] = useState<TrashRow[]>([])
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+  const [restoringId, setRestoringId] = useState<string | null>(null)
+
+  const load = useCallback(async () => {
+    setLoading(true)
+    setError(null)
+    const results = await Promise.all(
+      collections.map(async (slug) => {
+        const res = await cmsApi<ListEnvelope>(
+          `/collections/${encodeURIComponent(slug)}?includeDeleted=true&pageSize=50&sort=updatedAt&order=desc`,
+        )
+        if (res.error) return [] as TrashRow[]
+        return (res.data?.docs ?? []).map((doc) => asRow(slug, doc))
+      }),
+    )
+    const merged = results.flat().filter((row) => row.id)
+    merged.sort((a, b) => {
+      const aTime = a.deletedAt ?? a.updatedAt ?? ''
+      const bTime = b.deletedAt ?? b.updatedAt ?? ''
+      return bTime.localeCompare(aTime)
+    })
+    setRows(merged)
+    setLoading(false)
+  }, [collections])
+
+  useEffect(() => {
+    void load()
+  }, [load])
+
+  async function handleRestore(row: TrashRow) {
+    setRestoringId(row.id)
+    const res = await cmsApi<{
+      document?: { id?: string }
+      slugConflict?: boolean
+      previousSlug?: string | null
+    }>(`/collections/${encodeURIComponent(row.collection)}/${encodeURIComponent(row.id)}/restore`, {
+      method: 'POST',
+    })
+    setRestoringId(null)
+    if (res.error) {
+      toast.error(res.error)
+      return
+    }
+    if (res.data?.slugConflict) {
+      toast.success(
+        `Restored "${row.title}". The slug "${res.data.previousSlug ?? row.slug}" is in use — set a new URL before publishing.`,
+      )
+    } else {
+      toast.success(`Restored "${row.title}"`)
+    }
+    onNavigate(editorPath(row.collection, row.id))
+  }
+
+  return (
+    <div className="p-4 pr-8">
+      <div className="mb-4">
+        <h1 className="text-foreground mb-1">Trash</h1>
+        <p className="text-muted-foreground text-sm">
+          Soft-deleted pages and posts stay here for 30 days, then are permanently removed.
+        </p>
+      </div>
+
+      {loading ? (
+        <div className="text-muted-foreground flex items-center gap-2 py-12 text-sm">
+          <Loader2 className="h-4 w-4 animate-spin" aria-hidden />
+          Loading trash…
+        </div>
+      ) : error ? (
+        <p className="text-destructive text-sm">{error}</p>
+      ) : rows.length === 0 ? (
+        <EmptyState
+          icon={<Trash2 size={24} />}
+          title="Trash is empty"
+          description="Deleted pages and posts will appear here so you can restore them."
+        />
+      ) : (
+        <div className="border-border overflow-x-auto rounded-lg border">
+          <table className="w-full min-w-[640px] text-sm" aria-label="Deleted documents">
+            <thead>
+              <tr className="text-muted-foreground border-border border-b text-left">
+                <th className="px-4 py-2.5 font-medium">Title</th>
+                <th className="px-4 py-2.5 font-medium">Collection</th>
+                <th className="px-4 py-2.5 font-medium">Slug</th>
+                <th className="px-4 py-2.5 font-medium">Deleted</th>
+                <th className="px-4 py-2.5 text-right font-medium">
+                  <span className="sr-only">Actions</span>
+                </th>
+              </tr>
+            </thead>
+            <tbody className="divide-border divide-y">
+              {rows.map((row) => (
+                <tr key={`${row.collection}:${row.id}`}>
+                  <td className="text-foreground px-4 py-2.5 font-medium">{row.title}</td>
+                  <td className="text-muted-foreground px-4 py-2.5">{row.collection}</td>
+                  <td className="text-muted-foreground px-4 py-2.5">{row.slug ?? '—'}</td>
+                  <td className="text-muted-foreground px-4 py-2.5">
+                    {formatWhen(row.deletedAt ?? row.updatedAt)}
+                  </td>
+                  <td className="px-4 py-2.5 text-right">
+                    <button
+                      type="button"
+                      className="text-foreground hover:bg-accent focus-visible:ring-ring inline-flex min-h-11 items-center gap-1.5 rounded-md px-3 py-2 text-sm font-medium focus-visible:ring-2 focus-visible:outline-none disabled:opacity-50"
+                      onClick={() => void handleRestore(row)}
+                      disabled={restoringId === row.id}
+                      aria-label={`Restore ${row.title}`}
+                    >
+                      {restoringId === row.id ? (
+                        <Loader2 className="h-4 w-4 animate-spin" aria-hidden />
+                      ) : (
+                        <RotateCcw className="h-4 w-4" aria-hidden />
+                      )}
+                      Restore
+                    </button>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      )}
+    </div>
+  )
+}

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>
   )