@prenta/admin 0.92.0 → 0.94.0

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

@@ -0,0 +1,433 @@
+'use client'
+
+import { useMemo, useState } from 'react'
+import { AlertTriangle, Check, Copy, ExternalLink, Layers, Lock, Trash2 } from 'lucide-react'
+import { toast } from 'sonner'
+import {
+  restrictedCount,
+  robotsMetaLine,
+  type MaxImagePreview,
+  type RobotsPermissions,
+} from '@prenta/core/seo/robots-directives'
+import {
+  SeoAccordion,
+  SeoAccordionBadge,
+  SeoAccordionItem,
+} from '../../components/seo/SeoAccordion.js'
+import { AuthorPicker } from '../../components/page-tab/AuthorPicker.js'
+import { DirectiveSwitch } from '../../components/page-tab/DirectiveSwitch.js'
+import { pendingSlugChange } from '../../lib/page-redirect.js'
+import type { EditorPage } from '../../lib/page-editor-service.js'
+
+const INPUT =
+  'border-border bg-input-background text-foreground focus-visible:border-ring focus-visible:ring-ring/50 w-full rounded-lg border px-3 py-2 text-sm focus-visible:ring-2 focus-visible:outline-none'
+const LABEL = 'text-foreground mb-1 block text-xs font-medium'
+
+export interface PageTabProps {
+  page: EditorPage
+  canEdit: boolean
+  /** Path as it is on the live site, or null when never published. */
+  publishedPath: string | null
+  /** Site origin, for resolving the full URL. */
+  siteUrl: string
+  directives: RobotsPermissions
+  onDirectivesChange: (next: RobotsPermissions) => void
+  /** Whether a 301 should be created when the moved page is published. */
+  redirectOnPublish: boolean
+  onRedirectOnPublishChange: (next: boolean) => void
+  /**
+   * Whether this user can create redirects. `POST /redirects` is limited to
+   * publishers who may also publish the page; when false the URL-changed
+   * warning still shows, but the checkbox that would promise a 301 does not.
+   */
+  canCreateRedirect?: boolean
+  onPageChange: (patch: Partial<EditorPage>) => void
+  onDuplicate: () => void
+  onTrash: () => void
+  /** Template/schema binding, shown read-only. */
+  templateName?: string
+  schemaType?: string
+  /** Offered as the brand byline in the author picker. */
+  brandName?: string
+}
+
+/**
+ * Rail tab 3 — everything about the page that is not its content or its search
+ * copy: where it lives, when it goes live, what crawlers may do with it, what
+ * owns its layout, and how to get rid of it.
+ */
+export function PageTab({
+  page,
+  canEdit,
+  publishedPath,
+  siteUrl,
+  directives,
+  onDirectivesChange,
+  redirectOnPublish,
+  onRedirectOnPublishChange,
+  canCreateRedirect = true,
+  onPageChange,
+  onDuplicate,
+  onTrash,
+  templateName,
+  schemaType,
+  brandName,
+}: PageTabProps) {
+  const [copied, setCopied] = useState(false)
+  const [confirmTrash, setConfirmTrash] = useState(false)
+
+  const fullUrl = useMemo(() => {
+    const origin = siteUrl.replace(/\/+$/, '')
+    const path = page.path.startsWith('/') ? page.path : `/${page.path}`
+    return `${origin}${path}`
+  }, [siteUrl, page.path])
+
+  const move = pendingSlugChange(publishedPath, page.path)
+  const restricted = restrictedCount(directives)
+  const set = (patch: Partial<RobotsPermissions>) => onDirectivesChange({ ...directives, ...patch })
+
+  async function copyUrl() {
+    try {
+      await navigator.clipboard.writeText(fullUrl)
+      setCopied(true)
+      setTimeout(() => setCopied(false), 1600)
+    } catch {
+      toast.error('Could not copy — your browser blocked clipboard access.')
+    }
+  }
+
+  return (
+    <SeoAccordion defaultOpen={['address', 'publishing']}>
+      {/* ── Address ────────────────────────────────────────────────────── */}
+      <SeoAccordionItem
+        value="address"
+        title="Address"
+        badge={move ? <SeoAccordionBadge tone="warn">URL CHANGED</SeoAccordionBadge> : undefined}
+      >
+        <div>
+          <label className={LABEL} htmlFor="pt-slug">
+            URL slug
+          </label>
+          <input
+            id="pt-slug"
+            className={INPUT}
+            value={page.slug}
+            disabled={!canEdit}
+            onChange={(e) => {
+              // Path is the public URL the redirect detector and the displayed
+              // full link both read. Keep it in lockstep when it was derived
+              // from the previous slug — the same rule as PageSettingsModal.
+              // A custom path (e.g. `/team/about` while slug is `about`) is
+              // left alone; the editor must change that elsewhere on purpose.
+              const slug = e.target.value
+              const patch: Partial<EditorPage> = { slug }
+              if (!page.path || page.path === `/${page.slug}`) {
+                patch.path = slug ? `/${slug}` : '/'
+              }
+              onPageChange(patch)
+            }}
+          />
+          <div className="mt-1.5 flex items-center gap-1.5">
+            {/* `data-volatile` so visual baselines mask it: the origin comes
+                from `NEXT_PUBLIC_SITE_URL`, which is set in some environments
+                and not others, and a screenshot that bakes one in fails in the
+                other. */}
+            <code
+              data-volatile
+              className="text-muted-foreground min-w-0 flex-1 truncate font-mono text-[11px]"
+            >
+              {fullUrl}
+            </code>
+            <button
+              type="button"
+              onClick={copyUrl}
+              className="text-muted-foreground hover:text-foreground shrink-0 rounded p-1"
+              aria-label={copied ? 'Full URL copied' : 'Copy full URL'}
+            >
+              {copied ? (
+                <Check size={13} className="text-success" aria-hidden />
+              ) : (
+                <Copy size={13} aria-hidden />
+              )}
+            </button>
+          </div>
+        </div>
+
+        {/* Only for a page that is actually live. A slug change on a draft
+            breaks nothing, and warning about it would train editors to dismiss
+            the warning that matters. */}
+        {move && (
+          <div className="bg-warning/10 border-warning/30 space-y-2 rounded-lg border p-2.5">
+            <div className="flex gap-2">
+              <AlertTriangle size={14} className="text-warning mt-px shrink-0" aria-hidden />
+              <p className="text-[11.5px] leading-normal">
+                This page is live at <b className="font-medium">{move.from}</b>. Publishing moves
+                it, and every existing link to the old address will 404.
+              </p>
+            </div>
+            {canCreateRedirect ? (
+              <label className="flex cursor-pointer items-start gap-2 text-[11.5px]">
+                <input
+                  type="checkbox"
+                  checked={redirectOnPublish}
+                  disabled={!canEdit}
+                  onChange={(e) => onRedirectOnPublishChange(e.target.checked)}
+                  className="accent-primary mt-0.5"
+                />
+                <span>
+                  Create a 301 redirect on publish
+                  <span className="text-muted-foreground mt-0.5 block font-mono text-[10.5px]">
+                    {move.from} → {move.to}
+                  </span>
+                </span>
+              </label>
+            ) : (
+              <p className="text-muted-foreground text-[11.5px] leading-normal">
+                Ask an admin to create a 301 from{' '}
+                <span className="font-mono text-[10.5px]">
+                  {move.from} → {move.to}
+                </span>{' '}
+                so existing links keep working.
+              </p>
+            )}
+          </div>
+        )}
+
+        {page.status === 'PUBLISHED' && (
+          <a
+            href={fullUrl}
+            target="_blank"
+            rel="noreferrer"
+            className="border-border hover:bg-accent inline-flex items-center gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs font-medium"
+          >
+            <ExternalLink size={12} aria-hidden />
+            Open live page
+          </a>
+        )}
+      </SeoAccordionItem>
+
+      {/* ── Publishing ─────────────────────────────────────────────────── */}
+      <SeoAccordionItem
+        value="publishing"
+        title="Publishing"
+        badge={
+          <SeoAccordionBadge tone={page.status === 'PUBLISHED' ? 'good' : 'neutral'}>
+            {page.status}
+          </SeoAccordionBadge>
+        }
+      >
+        <dl className="grid grid-cols-[auto_1fr] gap-x-3 gap-y-1.5 text-[11.5px]">
+          <dt className="text-muted-foreground">Last edited</dt>
+          <dd data-volatile>{formatStamp(page.updatedAt) ?? '—'}</dd>
+          <dt className="text-muted-foreground">Published</dt>
+          <dd data-volatile>{formatStamp(page.publishedAt) ?? 'Not yet published'}</dd>
+          {page.scheduledAt && (
+            <>
+              <dt className="text-muted-foreground">Goes live</dt>
+              <dd data-volatile>{formatStamp(page.scheduledAt)}</dd>
+            </>
+          )}
+          {page.scheduledUnpublishAt && (
+            <>
+              <dt className="text-muted-foreground">Comes down</dt>
+              <dd data-volatile>{formatStamp(page.scheduledUnpublishAt)}</dd>
+            </>
+          )}
+        </dl>
+        <div>
+          <p className={LABEL}>Byline</p>
+          <AuthorPicker
+            value={{ name: page.authorName, id: page.authorId }}
+            onChange={(next) => onPageChange({ authorName: next.name, authorId: next.id })}
+            brandName={brandName}
+            disabled={!canEdit}
+          />
+          <p className="text-muted-foreground mt-1 text-[11px] leading-snug">
+            Shown on the page and in its structured data. Separate from who created the record,
+            which is not reassigned.
+          </p>
+        </div>
+
+        <p className="text-muted-foreground text-[11px] leading-snug">
+          Status is changed with Publish and Schedule in the toolbar, so there is one way to do it
+          rather than two that can disagree.
+        </p>
+      </SeoAccordionItem>
+
+      {/* ── Search directives ──────────────────────────────────────────── */}
+      <SeoAccordionItem
+        value="directives"
+        title="Search directives"
+        badge={
+          restricted === 0 ? (
+            <SeoAccordionBadge tone="good">OPEN</SeoAccordionBadge>
+          ) : (
+            <SeoAccordionBadge tone="warn">{restricted} RESTRICTED</SeoAccordionBadge>
+          )
+        }
+      >
+        <div className="divide-border divide-y">
+          <DirectiveSwitch
+            id="pt-index"
+            label="Show in search results"
+            hint="Off removes the page from Google and every other index."
+            checked={directives.index}
+            onChange={(v) => set({ index: v })}
+            permissiveToken="index"
+            restrictiveToken="noindex"
+            disabled={!canEdit}
+          />
+          <DirectiveSwitch
+            id="pt-follow"
+            label="Follow links on this page"
+            hint="Off stops crawlers passing authority to anything this page links to."
+            checked={directives.follow}
+            onChange={(v) => set({ follow: v })}
+            permissiveToken="follow"
+            restrictiveToken="nofollow"
+            disabled={!canEdit}
+          />
+          <DirectiveSwitch
+            id="pt-snippet"
+            label="Allow text snippets"
+            hint="Off blocks AI Overviews and chat citations entirely."
+            checked={directives.snippet}
+            onChange={(v) => set({ snippet: v })}
+            permissiveToken="snippet"
+            restrictiveToken="nosnippet"
+            disabled={!canEdit || !directives.index}
+          />
+          <DirectiveSwitch
+            id="pt-archive"
+            label="Allow cached copies"
+            checked={directives.archive}
+            onChange={(v) => set({ archive: v })}
+            permissiveToken="archive"
+            restrictiveToken="noarchive"
+            disabled={!canEdit || !directives.index}
+          />
+        </div>
+
+        <div>
+          <label className={LABEL} htmlFor="pt-img-preview">
+            Image preview size
+          </label>
+          <select
+            id="pt-img-preview"
+            className={INPUT}
+            value={directives.maxImagePreview}
+            disabled={!canEdit || !directives.index || !directives.snippet}
+            onChange={(e) => set({ maxImagePreview: e.target.value as MaxImagePreview })}
+          >
+            <option value="large">Large — full-width image in results</option>
+            <option value="standard">Standard — thumbnail</option>
+            <option value="none">None</option>
+          </select>
+        </div>
+
+        <div>
+          <p className={LABEL}>What ships in the page head</p>
+          {/* The literal line, composed by the same function the renderer uses.
+              An editor should never have to trust that this UI and the output
+              agree — they are the same code. */}
+          <code className="bg-muted text-muted-foreground block overflow-x-auto rounded-lg px-2.5 py-2 font-mono text-[10.5px] whitespace-pre">
+            {robotsMetaLine(directives)}
+          </code>
+        </div>
+
+        {!directives.index && (
+          <div className="bg-warning/10 border-warning/30 flex gap-2 rounded-lg border p-2.5">
+            <AlertTriangle size={14} className="text-warning mt-px shrink-0" aria-hidden />
+            <p className="text-[11.5px] leading-normal">
+              <b className="font-semibold">This page is hidden from search.</b> Publishing will not
+              make it findable.
+            </p>
+          </div>
+        )}
+      </SeoAccordionItem>
+
+      {/* ── Layout ─────────────────────────────────────────────────────── */}
+      <SeoAccordionItem
+        value="layout"
+        title="Layout"
+        badge={<SeoAccordionBadge tone="neutral">LOCKED</SeoAccordionBadge>}
+      >
+        <dl className="grid grid-cols-[auto_1fr] gap-x-3 gap-y-1.5 text-[11.5px]">
+          <dt className="text-muted-foreground">Template</dt>
+          <dd className="flex items-center gap-1.5">
+            <Layers size={12} className="text-muted-foreground" aria-hidden />
+            {templateName ?? 'Default'}
+          </dd>
+          <dt className="text-muted-foreground">Schema</dt>
+          <dd>{schemaType ?? 'WebPage'}</dd>
+        </dl>
+        <div className="text-muted-foreground flex gap-2 text-[11px] leading-snug">
+          <Lock size={13} className="mt-px shrink-0" aria-hidden />
+          <p>
+            Layout and styling are design-owned — built in code, not configured here. This tab edits
+            where the page lives and how it is indexed.
+          </p>
+        </div>
+      </SeoAccordionItem>
+
+      {/* ── Danger zone ────────────────────────────────────────────────── */}
+      <SeoAccordionItem value="danger" title="Danger zone">
+        <button
+          type="button"
+          onClick={onDuplicate}
+          disabled={!canEdit || !page.id}
+          className="border-border hover:border-destructive hover:bg-destructive/10 hover:text-destructive flex w-full items-center gap-2 rounded-lg border px-3 py-2 text-xs font-medium transition-colors disabled:opacity-50"
+        >
+          <Copy size={13} aria-hidden />
+          Duplicate page
+        </button>
+
+        {confirmTrash ? (
+          <div className="border-destructive/40 bg-destructive/10 space-y-2 rounded-lg border p-2.5">
+            <p className="text-[11.5px] leading-normal">
+              Move <b className="font-semibold">{page.title || 'this page'}</b> to trash?
+              {page.status === 'PUBLISHED' && ' It is live, and will stop being served.'}
+            </p>
+            <div className="flex gap-2">
+              <button
+                type="button"
+                onClick={onTrash}
+                className="bg-destructive text-destructive-foreground rounded-md px-2.5 py-1 text-[11px] font-semibold"
+              >
+                Move to trash
+              </button>
+              <button
+                type="button"
+                onClick={() => setConfirmTrash(false)}
+                className="border-border rounded-md border px-2.5 py-1 text-[11px] font-medium"
+              >
+                Cancel
+              </button>
+            </div>
+          </div>
+        ) : (
+          <button
+            type="button"
+            onClick={() => setConfirmTrash(true)}
+            disabled={!canEdit || !page.id}
+            className="border-border hover:border-destructive hover:bg-destructive/10 hover:text-destructive flex w-full items-center gap-2 rounded-lg border px-3 py-2 text-xs font-medium transition-colors disabled:opacity-50"
+          >
+            <Trash2 size={13} aria-hidden />
+            Move to trash
+          </button>
+        )}
+      </SeoAccordionItem>
+    </SeoAccordion>
+  )
+}
+
+/** `null` rather than a placeholder string, so callers choose their own dash. */
+function formatStamp(value: string | null): string | null {
+  if (!value) return null
+  const d = new Date(value)
+  if (Number.isNaN(d.getTime())) return null
+  return d.toLocaleString(undefined, {
+    dateStyle: 'medium',
+    timeStyle: 'short',
+  })
+}

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