@prenta/admin 0.93.0 → 0.95.0

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

@@ -1,6 +1,7 @@
 'use client'
 
 import {
+  ChevronDown,
   Copy,
   Eye,
   EyeOff,
@@ -56,6 +57,15 @@ interface SectionsPanelProps {
   onDuplicate?: (id: string) => void
   onRequestDelete?: (id: string) => void
   onAdd?: () => void
+  /**
+   * Renders the selected section's editor as the body of its own row.
+   *
+   * A render prop rather than the form itself, so this list stays a list: it
+   * knows how to open a row and nothing about what a section's fields are.
+   * Omitted by the structural (template) list, which edits through the docked
+   * inspector instead.
+   */
+  renderEditor?: (section: PageSection) => React.ReactNode
 }
 
 /**
@@ -98,6 +108,7 @@ export function SectionsList({
   onDuplicate,
   onRequestDelete,
   onAdd,
+  renderEditor,
 }: SectionsPanelProps) {
   return (
     <>
@@ -121,17 +132,30 @@ export function SectionsList({
           />
         ) : (
           <ul className="space-y-1">
-            {sections.map((section) => (
-              <SectionRow
-                key={section.id}
-                section={section}
-                selected={section.id === selectedId}
-                canEdit={canEdit}
-                structural={false}
-                onSelect={onSelect}
-                onToggleVisibility={onToggleVisibility}
-              />
-            ))}
+            {sections.map((section) => {
+              const open = section.id === selectedId
+              return (
+                <li key={section.id}>
+                  <SectionRow
+                    section={section}
+                    selected={open}
+                    canEdit={canEdit}
+                    structural={false}
+                    expandable={renderEditor !== undefined}
+                    onSelect={onSelect}
+                    onToggleVisibility={onToggleVisibility}
+                  />
+                  {open && renderEditor && (
+                    <div
+                      id={`section-editor-${section.id}`}
+                      className="border-border overflow-hidden rounded-b-lg border border-t-0"
+                    >
+                      {renderEditor(section)}
+                    </div>
+                  )}
+                </li>
+              )
+            })}
           </ul>
         )}
       </div>
@@ -244,6 +268,8 @@ interface RowProps {
   /** Drag affordance, supplied only by the sortable wrapper. */
   dragHandle?: React.ReactNode
   dragging?: boolean
+  /** The row opens an editor beneath it, so it gets a disclosure control. */
+  expandable?: boolean
 }
 
 function SectionRow({
@@ -251,6 +277,7 @@ function SectionRow({
   selected,
   canEdit,
   structural,
+  expandable = false,
   onSelect,
   onToggleVisibility,
   onDuplicate,
@@ -266,15 +293,21 @@ function SectionRow({
 
   return (
     <div
-      className={`group flex items-center gap-2 rounded-lg border px-2 py-2 ${
-        selected ? 'border-primary bg-accent' : 'hover:bg-accent/60 border-transparent'
-      } ${dragging ? 'shadow-md' : ''}`}
+      className={`group flex items-center gap-2 border px-2 py-2 ${
+        // Square off the bottom while the editor is open beneath, so row and
+        // form read as one object rather than two stacked cards.
+        selected && expandable ? 'rounded-t-lg' : 'rounded-lg'
+      } ${selected ? 'border-primary bg-accent' : 'hover:bg-accent/60 border-transparent'} ${
+        dragging ? 'shadow-md' : ''
+      }`}
     >
       {dragHandle}
 
       <button
         type="button"
         onClick={() => onSelect(section.id)}
+        aria-expanded={expandable ? selected : undefined}
+        aria-controls={expandable && selected ? `section-editor-${section.id}` : undefined}
         className="flex min-w-0 flex-1 items-center gap-2 text-left"
       >
         <span className="bg-muted text-muted-foreground flex h-7 w-7 shrink-0 items-center justify-center rounded-md">
@@ -305,7 +338,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 />
@@ -314,6 +347,29 @@ function SectionRow({
             )}
           </button>
 
+          {/* Disclosure. The row itself already toggles, but a visible chevron
+              is what says the row opens at all — without one the list looks
+              like a set of links to somewhere else, which is what it used to
+              be when the editor lived in a docked panel. */}
+          {expandable && (
+            <button
+              type="button"
+              onClick={() => onSelect(section.id)}
+              aria-expanded={selected}
+              aria-controls={selected ? `section-editor-${section.id}` : undefined}
+              aria-label={selected ? `Close ${section.name}` : `Edit ${section.name}`}
+              title="Edit content"
+              className="prenta-touch-target text-muted-foreground hover:text-foreground shrink-0 rounded p-1"
+            >
+              <ChevronDown
+                className={`h-4 w-4 transition-transform motion-reduce:transition-none ${
+                  selected ? 'rotate-180' : ''
+                }`}
+                aria-hidden
+              />
+            </button>
+          )}
+
           {structural && (
             <DropdownMenu.Root>
               <DropdownMenu.Trigger asChild>
@@ -321,7 +377,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>

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

@@ -0,0 +1,302 @@
+'use client'
+
+import { useMemo, useState } from 'react'
+import { History, Loader2, RotateCcw, X } from 'lucide-react'
+import {
+  diffVersions,
+  groupChangesBySection,
+  type FieldChange,
+  type SectionChangeGroup,
+} from '../../lib/version-diff.js'
+import {
+  groupVersionsByDay,
+  initials,
+  timeLabel,
+  versionKind,
+  type PageVersion,
+} from '../../lib/version-history.js'
+
+export interface VersionHistoryPanelProps {
+  versions: PageVersion[]
+  loading: boolean
+  error: string | null
+  /** Index into `versions`; 0 is the newest, which is "current". */
+  selectedIndex: number
+  onSelect: (index: number) => void
+  onClose: () => void
+  onRestore: (version: PageVersion) => void
+  restoring: boolean
+  canRestore: boolean
+}
+
+/**
+ * Version history, as a takeover of the editing rail.
+ *
+ * It is deliberately NOT a dialog. History here is about comparing *renders*:
+ * picking a version puts it on the canvas, and the changed sections light up
+ * there. A modal would cover the very thing it exists to let you look at, and
+ * a right-hand drawer would push the canvas around while you compare against
+ * it. Overlaying the rail leaves the canvas exactly where it was, at exactly
+ * the size it was, so the only thing that changes between two versions is the
+ * page itself.
+ *
+ * Absolutely positioned over the rail's own box (the rail is `relative`) so it
+ * inherits the user's chosen rail width and needs no width of its own.
+ */
+export function VersionHistoryPanel({
+  versions,
+  loading,
+  error,
+  selectedIndex,
+  onSelect,
+  onClose,
+  onRestore,
+  restoring,
+  canRestore,
+}: VersionHistoryPanelProps) {
+  /**
+   * Disclosure FOLLOWS selection rather than being tracked separately.
+   *
+   * They are the same act: the selected version is what the canvas renders,
+   * and the expanded diff is the list of what to look for on it. Held apart,
+   * the two drift — the parent can move the selection (the review bar's "Back
+   * to current" does exactly that), and the diff then describes one version
+   * while the canvas shows another, with Restore stranded on a row nobody can
+   * see. Only "did the user collapse the row they are on" needs remembering.
+   */
+  const [collapsed, setCollapsed] = useState(false)
+  const expandedId = collapsed ? null : (versions[selectedIndex]?.id ?? null)
+
+  const days = useMemo(() => groupVersionsByDay(versions), [versions])
+
+  // Diff each version against the one before it, so a row reports what that
+  // save DID rather than how it differs from the present.
+  const changesByVersion = useMemo(() => {
+    const map = new Map<string, FieldChange[]>()
+    versions.forEach((version, index) => {
+      map.set(version.id, diffVersions(version.sections, versions[index + 1]?.sections))
+    })
+    return map
+  }, [versions])
+
+  return (
+    <div
+      className="bg-card absolute inset-0 z-45 flex flex-col"
+      role="region"
+      aria-label="Version history"
+    >
+      <div className="border-border flex shrink-0 items-center gap-2 border-b py-2.5 pr-2.5 pl-3.5">
+        <History className="text-brand h-3.5 w-3.5" aria-hidden />
+        <h2 className="text-foreground flex-1 text-[12.5px] font-semibold">Version history</h2>
+        <span className="text-muted-foreground text-[11px] tabular-nums">
+          {versions.length} version{versions.length === 1 ? '' : 's'}
+        </span>
+        <button
+          type="button"
+          onClick={onClose}
+          aria-label="Close version history"
+          title="Close version history"
+          className="prenta-touch-target text-muted-foreground hover:bg-accent hover:text-accent-foreground flex h-6.5 w-6.5 items-center justify-center rounded-md transition-colors"
+        >
+          <X className="h-3.5 w-3.5" aria-hidden />
+        </button>
+      </div>
+
+      <div className="min-h-0 flex-1 overflow-y-auto">
+        {loading ? (
+          <div className="flex items-center justify-center py-16">
+            <Loader2 className="text-muted-foreground h-5 w-5 animate-spin" aria-hidden />
+            <span className="sr-only">Loading version history</span>
+          </div>
+        ) : error ? (
+          <p className="text-destructive px-3.5 py-10 text-center text-sm">{error}</p>
+        ) : versions.length === 0 ? (
+          <p className="text-muted-foreground px-3.5 py-10 text-center text-sm">
+            No versions yet. Every save adds one.
+          </p>
+        ) : (
+          days.map((day) => (
+            // Keyed on the group's first version, NOT on its label. Grouping
+            // walks consecutive runs, so an out-of-order page yields two
+            // non-adjacent groups both labelled "Today" — `groupVersionsByDay`
+            // has a test asserting exactly that — and a label key would collide.
+            <section key={day.versions[0]?.id ?? day.label}>
+              <h3 className="text-muted-foreground bg-muted border-border sticky top-0 z-2 border-b px-3.5 pt-2.5 pb-1.5 text-[10px] font-bold tracking-[0.7px] uppercase">
+                {day.label}
+              </h3>
+              {day.versions.map((version) => {
+                const index = versions.indexOf(version)
+                return (
+                  <VersionRow
+                    key={version.id}
+                    version={version}
+                    index={index}
+                    changes={changesByVersion.get(version.id) ?? []}
+                    selected={index === selectedIndex}
+                    expanded={expandedId === version.id}
+                    onToggle={() => {
+                      // Re-clicking the row you are on collapses it; clicking
+                      // any other selects it, which is also what opens it.
+                      if (index === selectedIndex) setCollapsed((prev) => !prev)
+                      else {
+                        setCollapsed(false)
+                        onSelect(index)
+                      }
+                    }}
+                    onRestore={() => onRestore(version)}
+                    restoring={restoring}
+                    canRestore={canRestore}
+                  />
+                )
+              })}
+            </section>
+          ))
+        )}
+      </div>
+    </div>
+  )
+}
+
+const TONE_CLASS: Record<string, string> = {
+  live: 'bg-success/15 text-success',
+  draft: 'bg-warning/15 text-warning',
+  neutral: 'bg-muted text-muted-foreground',
+  danger: 'bg-destructive/15 text-destructive',
+}
+
+function VersionRow({
+  version,
+  index,
+  changes,
+  selected,
+  expanded,
+  onToggle,
+  onRestore,
+  restoring,
+  canRestore,
+}: {
+  version: PageVersion
+  index: number
+  changes: FieldChange[]
+  selected: boolean
+  expanded: boolean
+  onToggle: () => void
+  onRestore: () => void
+  restoring: boolean
+  canRestore: boolean
+}) {
+  const kind = versionKind(version.changeType)
+  const isCurrent = index === 0
+  const groups = groupChangesBySection(changes)
+  const time = timeLabel(version.createdAt)
+
+  return (
+    <div className="border-border border-b">
+      <button
+        type="button"
+        onClick={onToggle}
+        aria-expanded={expanded}
+        className={`flex w-full items-center gap-2.5 py-2.5 pr-2.5 pl-3 text-left transition-colors ${
+          selected ? 'bg-accent shadow-[inset_2px_0_0_var(--acc)]' : 'hover:bg-accent/60'
+        }`}
+      >
+        <span
+          className="bg-muted text-muted-foreground flex h-6 w-6 shrink-0 items-center justify-center rounded-full text-[9.5px] font-semibold"
+          aria-hidden
+        >
+          {initials(version.author.name)}
+        </span>
+
+        <span className="min-w-0 flex-1">
+          <span className="text-foreground flex items-center gap-1.5 text-xs font-semibold">
+            {time}
+            {isCurrent && (
+              <span className="bg-accent text-accent-foreground rounded px-1.5 py-px text-[8.5px] font-bold tracking-[0.4px] uppercase">
+                Current
+              </span>
+            )}
+          </span>
+          <span className="text-muted-foreground mt-px block truncate text-[10.5px]">
+            {version.author.name} ·{' '}
+            {changes.length
+              ? `${changes.length} change${changes.length === 1 ? '' : 's'}`
+              : 'no content changes'}
+          </span>
+        </span>
+
+        <span
+          className={`shrink-0 rounded px-1.5 py-px text-[8.5px] font-bold tracking-[0.4px] uppercase ${
+            TONE_CLASS[kind.tone] ?? TONE_CLASS.neutral
+          }`}
+        >
+          {kind.label}
+        </span>
+      </button>
+
+      {/*
+       * Opens on `expanded` alone — NOT on `expanded && changes.length`.
+       *
+       * Restore lives in here, and a version can legitimately have no computed
+       * diff: the oldest one held has no predecessor to compare against, and a
+       * metadata-only save changes no section. Gating the whole block on a
+       * non-empty diff makes exactly those versions reviewable but not
+       * restorable, which is the wrong way round — the oldest version is the
+       * one a rollback most often wants.
+       */}
+      {expanded && (
+        <div className="flex flex-col gap-2.5 pt-0 pr-3 pb-3 pl-[38px]">
+          {groups.length > 0 ? (
+            groups.map((group) => <ChangeGroup key={group.sectionId} group={group} />)
+          ) : (
+            <p className="text-muted-foreground text-[11px] leading-[1.45]">
+              No section changes to show against the version before it.
+            </p>
+          )}
+
+          {/* Restore is offered only on the row being reviewed, and never on the
+              newest one — "restore the version you are already looking at" is a
+              no-op dressed up as an action. */}
+          {selected && !isCurrent && canRestore && (
+            <button
+              type="button"
+              onClick={onRestore}
+              disabled={restoring}
+              className="border-border text-foreground hover:bg-accent inline-flex items-center justify-center gap-1.5 rounded-lg border px-3 py-1.5 text-xs font-medium transition-colors disabled:cursor-not-allowed disabled:opacity-50"
+            >
+              {restoring ? (
+                <Loader2 className="h-3 w-3 animate-spin" aria-hidden />
+              ) : (
+                <RotateCcw className="h-3 w-3" aria-hidden />
+              )}
+              Restore this version
+            </button>
+          )}
+        </div>
+      )}
+    </div>
+  )
+}
+
+function ChangeGroup({ group }: { group: SectionChangeGroup }) {
+  return (
+    <div>
+      <h4 className="text-foreground/80 mb-1 text-[9.5px] font-bold tracking-[0.4px] uppercase">
+        {group.sectionName}
+      </h4>
+      {group.changes.map((change, i) => (
+        <div key={`${change.field}-${i}`} className={i > 0 ? 'mt-1.5' : undefined}>
+          <div className="text-muted-foreground text-[9.5px] font-bold tracking-[0.3px]">
+            {change.field}
+          </div>
+          {/* Colour is not the only carrier: the old value is struck through
+              and the pair is ordered old-then-new, both of which survive a
+              reader who cannot separate red from green. */}
+          <div className="text-destructive text-[11px] leading-[1.45] line-through decoration-1">
+            {change.from}
+          </div>
+          <div className="text-success text-[11px] leading-[1.45]">{change.to}</div>
+        </div>
+      ))}
+    </div>
+  )
+}