@actuate-media/cms-admin 0.15.0 → 0.16.1

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

@@ -0,0 +1,196 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { Modal } from '../../components/ui/Modal.js'
+import { Button } from '../../components/ui/Button.js'
+import type { EditorPost } from '../../lib/post-editor-service.js'
+
+interface PostFieldsModalProps {
+  open: boolean
+  post: EditorPost
+  canEdit: boolean
+  onClose: () => void
+  onSave: (patch: Partial<EditorPost>) => void
+}
+
+const LABEL = 'text-foreground mb-1 block text-xs font-medium'
+const INPUT =
+  'border-input bg-input-background text-foreground focus-visible:ring-ring w-full rounded-md border px-2.5 py-1.5 text-sm focus-visible:ring-2 focus-visible:outline-none'
+
+function slugify(value: string): string {
+  return value
+    .toLowerCase()
+    .trim()
+    .replace(/[^a-z0-9]+/g, '-')
+    .replace(/^-+|-+$/g, '')
+}
+
+/** Edits post-level fields: title, slug, excerpt, featured image, category, body, SEO. */
+export function PostFieldsModal({ open, post, canEdit, onClose, onSave }: PostFieldsModalProps) {
+  const [title, setTitle] = useState(post.title)
+  const [slug, setSlug] = useState(post.slug)
+  const [excerpt, setExcerpt] = useState(post.excerpt)
+  const [featuredImage, setFeaturedImage] = useState(post.featuredImage)
+  const [category, setCategory] = useState(post.category)
+  const [body, setBody] = useState(post.body)
+  const [seoTitle, setSeoTitle] = useState(post.seoTitle)
+  const [seoDescription, setSeoDescription] = useState(post.seoDescription)
+  const [slugTouched, setSlugTouched] = useState(Boolean(post.slug))
+
+  useEffect(() => {
+    if (!open) return
+    setTitle(post.title)
+    setSlug(post.slug)
+    setExcerpt(post.excerpt)
+    setFeaturedImage(post.featuredImage)
+    setCategory(post.category)
+    setBody(post.body)
+    setSeoTitle(post.seoTitle)
+    setSeoDescription(post.seoDescription)
+    setSlugTouched(Boolean(post.slug))
+  }, [open, post])
+
+  function handleTitle(next: string) {
+    setTitle(next)
+    if (!slugTouched) setSlug(slugify(next))
+  }
+
+  function handleSave() {
+    onSave({ title, slug, excerpt, featuredImage, category, body, seoTitle, seoDescription })
+    onClose()
+  }
+
+  return (
+    <Modal
+      open={open}
+      onClose={onClose}
+      title="Post details"
+      actions={
+        <>
+          <Button variant="ghost" onClick={onClose}>
+            Cancel
+          </Button>
+          <Button variant="primary" onClick={handleSave} disabled={!canEdit}>
+            Done
+          </Button>
+        </>
+      }
+    >
+      <div className="space-y-3">
+        <div>
+          <label className={LABEL} htmlFor="pf-title">
+            Title <span className="text-destructive">*</span>
+          </label>
+          <input
+            id="pf-title"
+            className={INPUT}
+            value={title}
+            disabled={!canEdit}
+            onChange={(e) => handleTitle(e.target.value)}
+          />
+        </div>
+        <div className="grid grid-cols-2 gap-3">
+          <div>
+            <label className={LABEL} htmlFor="pf-slug">
+              Slug <span className="text-destructive">*</span>
+            </label>
+            <input
+              id="pf-slug"
+              className={INPUT}
+              value={slug}
+              disabled={!canEdit}
+              onChange={(e) => {
+                setSlugTouched(true)
+                setSlug(slugify(e.target.value))
+              }}
+            />
+          </div>
+          <div>
+            <label className={LABEL} htmlFor="pf-category">
+              Category
+            </label>
+            <input
+              id="pf-category"
+              className={INPUT}
+              value={category}
+              disabled={!canEdit}
+              placeholder="e.g. Product"
+              onChange={(e) => setCategory(e.target.value)}
+            />
+          </div>
+        </div>
+        <div>
+          <label className={LABEL} htmlFor="pf-excerpt">
+            Excerpt
+          </label>
+          <textarea
+            id="pf-excerpt"
+            className={`${INPUT} min-h-[60px] resize-y`}
+            value={excerpt}
+            disabled={!canEdit}
+            placeholder="A short summary shown in listings and the header."
+            onChange={(e) => setExcerpt(e.target.value)}
+          />
+        </div>
+        <div>
+          <label className={LABEL} htmlFor="pf-image">
+            Featured image URL
+          </label>
+          <input
+            id="pf-image"
+            className={INPUT}
+            value={featuredImage}
+            disabled={!canEdit}
+            placeholder="https://…"
+            onChange={(e) => setFeaturedImage(e.target.value)}
+          />
+          {featuredImage && (
+            <div className="border-border bg-muted mt-2 overflow-hidden rounded-md border">
+              <img src={featuredImage} alt="" className="h-28 w-full object-cover" />
+            </div>
+          )}
+        </div>
+        <div>
+          <label className={LABEL} htmlFor="pf-body">
+            Body
+          </label>
+          <textarea
+            id="pf-body"
+            className={`${INPUT} min-h-[120px] resize-y`}
+            value={body}
+            disabled={!canEdit}
+            placeholder="The main post content. Shown by the Article Body section."
+            onChange={(e) => setBody(e.target.value)}
+          />
+          <p className="text-muted-foreground mt-1 text-xs">
+            Rendered by the Article Body section when its source is set to the post Body field.
+          </p>
+        </div>
+        <div>
+          <label className={LABEL} htmlFor="pf-seo-title">
+            SEO title
+          </label>
+          <input
+            id="pf-seo-title"
+            className={INPUT}
+            value={seoTitle}
+            disabled={!canEdit}
+            onChange={(e) => setSeoTitle(e.target.value)}
+          />
+        </div>
+        <div>
+          <label className={LABEL} htmlFor="pf-seo-desc">
+            SEO description
+          </label>
+          <textarea
+            id="pf-seo-desc"
+            className={`${INPUT} min-h-[60px] resize-y`}
+            value={seoDescription}
+            disabled={!canEdit}
+            onChange={(e) => setSeoDescription(e.target.value)}
+          />
+        </div>
+      </div>
+    </Modal>
+  )
+}

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

@@ -0,0 +1,87 @@
+import type { PostHeaderConfig } from '../page-editor/section-types.js'
+import type { PostRenderContext } from '../page-editor/sections/index.js'
+
+interface PostHeaderProps {
+  config: PostHeaderConfig
+  context: PostRenderContext
+}
+
+function formatDate(value?: string | null): string {
+  if (!value) return ''
+  const d = new Date(value)
+  if (Number.isNaN(d.getTime())) return ''
+  return d.toLocaleDateString(undefined, { year: 'numeric', month: 'long', day: 'numeric' })
+}
+
+/**
+ * Renders a post's header region from the template's design config plus the
+ * post's own field values. Uses the same fixed website palette as the
+ * section renderers (see sections/parts.tsx) so the editor canvas and the
+ * public preview match.
+ */
+export function PostHeader({ config, context }: PostHeaderProps) {
+  const title = context.title || 'Untitled post'
+  const date = config.showDate ? formatDate(context.publishDate) : ''
+  const overlay =
+    config.layout === 'overlay' && config.showFeaturedImage && context.featuredImageUrl
+  const align = config.layout === 'centered' ? 'text-center mx-auto items-center' : 'text-left'
+
+  const meta = (
+    <div
+      className={`mt-4 flex flex-wrap gap-x-3 gap-y-1 text-sm ${
+        config.layout === 'centered' ? 'justify-center' : ''
+      } ${overlay ? 'text-white/80' : 'text-zinc-500'}`}
+    >
+      {config.showCategory && context.category && (
+        <span className="font-medium text-violet-500">{context.category}</span>
+      )}
+      {config.showAuthor && <span>{context.author?.name || 'Author name'}</span>}
+      {date && <span>{date}</span>}
+      {config.showReadingTime && <span>5 min read</span>}
+    </div>
+  )
+
+  if (overlay) {
+    return (
+      <header className="relative">
+        <img src={context.featuredImageUrl} alt="" className="h-[360px] w-full object-cover" />
+        <div className="absolute inset-0 bg-gradient-to-t from-black/70 to-black/10" aria-hidden />
+        <div className="absolute inset-x-0 bottom-0 px-6 pb-8">
+          <div className={`mx-auto flex max-w-3xl flex-col ${align}`}>
+            <h1 className="text-3xl font-semibold tracking-tight text-white sm:text-4xl">
+              {title}
+            </h1>
+            {config.showExcerpt && context.excerpt && (
+              <p className="mt-3 max-w-2xl text-lg text-white/90">{context.excerpt}</p>
+            )}
+            {meta}
+          </div>
+        </div>
+      </header>
+    )
+  }
+
+  return (
+    <header className="bg-white px-6 pt-12 pb-2">
+      <div
+        className={`flex max-w-3xl flex-col ${align} ${config.layout === 'centered' ? 'mx-auto' : ''}`}
+      >
+        {config.showCategory && context.category && config.layout !== 'centered' && null}
+        <h1 className="text-3xl font-semibold tracking-tight text-zinc-900 sm:text-4xl">{title}</h1>
+        {config.showExcerpt && context.excerpt && (
+          <p className="mt-3 max-w-2xl text-lg text-zinc-600">{context.excerpt}</p>
+        )}
+        {meta}
+      </div>
+      {config.showFeaturedImage && context.featuredImageUrl && (
+        <div className="mx-auto mt-8 max-w-4xl">
+          <img
+            src={context.featuredImageUrl}
+            alt=""
+            className="aspect-[16/9] w-full rounded-xl object-cover"
+          />
+        </div>
+      )}
+    </header>
+  )
+}

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

@@ -0,0 +1,107 @@
+'use client'
+
+import { X } from 'lucide-react'
+import type { PostHeaderConfig } from '../../lib/post-editor-service.js'
+
+interface PostHeaderPanelProps {
+  header: PostHeaderConfig
+  canEdit: boolean
+  onClose: () => void
+  onChange: (patch: Partial<PostHeaderConfig>) => void
+}
+
+const LABEL = 'text-foreground mb-1 block text-xs font-medium'
+const INPUT =
+  'border-input bg-input-background text-foreground focus-visible:ring-ring w-full rounded-md border px-2.5 py-1.5 text-sm focus-visible:ring-2 focus-visible:outline-none'
+
+const TOGGLES: Array<{ key: keyof PostHeaderConfig; label: string }> = [
+  { key: 'showFeaturedImage', label: 'Featured image' },
+  { key: 'showExcerpt', label: 'Excerpt' },
+  { key: 'showAuthor', label: 'Author' },
+  { key: 'showDate', label: 'Date' },
+  { key: 'showCategory', label: 'Category' },
+  { key: 'showReadingTime', label: 'Reading time' },
+]
+
+/** Inspector panel for the post header layout (template-level design config). */
+export function PostHeaderPanel({ header, canEdit, onClose, onChange }: PostHeaderPanelProps) {
+  return (
+    <aside
+      role="dialog"
+      aria-label="Edit post header"
+      className="bg-card border-border flex h-full w-80 shrink-0 flex-col border-l"
+    >
+      <div className="border-border flex items-center justify-between border-b px-4 py-3">
+        <div className="min-w-0">
+          <h2 className="text-foreground truncate text-sm font-medium">Post header</h2>
+          <p className="text-muted-foreground text-xs">Layout for every post of this type</p>
+        </div>
+        <button
+          type="button"
+          onClick={onClose}
+          aria-label="Close header panel"
+          className="text-muted-foreground hover:text-foreground hover:bg-accent rounded p-1"
+        >
+          <X className="h-4 w-4" aria-hidden />
+        </button>
+      </div>
+
+      <div className="flex-1 space-y-6 overflow-y-auto p-4">
+        <fieldset disabled={!canEdit} className="space-y-3">
+          <legend className="text-muted-foreground mb-2 text-[10px] font-semibold tracking-wider uppercase">
+            Layout
+          </legend>
+          <div>
+            <label className={LABEL} htmlFor="ph-layout">
+              Header style
+            </label>
+            <select
+              id="ph-layout"
+              className={INPUT}
+              value={header.layout}
+              onChange={(e) => onChange({ layout: e.target.value as PostHeaderConfig['layout'] })}
+            >
+              <option value="centered">Centered</option>
+              <option value="left">Left-aligned</option>
+              <option value="overlay">Image overlay</option>
+            </select>
+          </div>
+        </fieldset>
+
+        <fieldset disabled={!canEdit} className="space-y-2">
+          <legend className="text-muted-foreground mb-2 text-[10px] font-semibold tracking-wider uppercase">
+            Show in header
+          </legend>
+          {TOGGLES.map((t) => {
+            const value = header[t.key] === true
+            return (
+              <button
+                key={t.key}
+                type="button"
+                role="switch"
+                aria-checked={value}
+                disabled={!canEdit}
+                onClick={() => onChange({ [t.key]: !value } as Partial<PostHeaderConfig>)}
+                className="border-border text-foreground hover:bg-accent flex w-full items-center justify-between rounded-md border px-2.5 py-1.5 text-sm disabled:opacity-50"
+              >
+                <span>{t.label}</span>
+                <span
+                  aria-hidden
+                  className={`relative inline-flex h-5 w-9 shrink-0 items-center rounded-full transition-colors ${
+                    value ? 'bg-primary' : 'bg-muted'
+                  }`}
+                >
+                  <span
+                    className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${
+                      value ? 'translate-x-4' : 'translate-x-0.5'
+                    }`}
+                  />
+                </span>
+              </button>
+            )
+          })}
+        </fieldset>
+      </div>
+    </aside>
+  )
+}

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

@@ -0,0 +1,114 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { AlertTriangle, Loader2, Pencil, X } from 'lucide-react'
+import {
+  fetchPostForEditor,
+  fetchTemplateForEditor,
+  type EditorPost,
+  type PostHeaderConfig,
+} from '../../lib/post-editor-service.js'
+import { defaultPostHeader } from '@actuate-media/cms-core/page-sections'
+import { SectionRenderer, type PostRenderContext } from '../page-editor/sections/index.js'
+import { PostHeader } from './PostHeader.js'
+
+interface PostPreviewProps {
+  postType: string
+  documentId: string
+  session?: any
+  onNavigate: (path: string) => void
+}
+
+/**
+ * Chrome-free render of a post using the same header + section renderers as
+ * the editor canvas, so the preview reflects what ships. Only visible
+ * sections render (hidden ones are omitted, like the public page).
+ */
+export function PostPreview({ postType, documentId, session, onNavigate }: PostPreviewProps) {
+  const [post, setPost] = useState<EditorPost | null>(null)
+  const [header, setHeader] = useState<PostHeaderConfig>(defaultPostHeader())
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+
+  useEffect(() => {
+    let cancelled = false
+    setLoading(true)
+    fetchTemplateForEditor(postType)
+      .then((t) => !cancelled && setHeader(t.header))
+      .catch(() => {
+        /* default header */
+      })
+    fetchPostForEditor(postType, documentId)
+      .then((p) => !cancelled && setPost(p))
+      .catch((err) => !cancelled && setError(err instanceof Error ? err.message : 'Failed to load'))
+      .finally(() => !cancelled && setLoading(false))
+    return () => {
+      cancelled = true
+    }
+  }, [postType, documentId])
+
+  if (loading) {
+    return (
+      <div className="bg-background flex h-full items-center justify-center">
+        <Loader2 className="text-muted-foreground h-6 w-6 animate-spin" aria-hidden />
+        <span className="sr-only">Loading preview…</span>
+      </div>
+    )
+  }
+
+  if (error || !post) {
+    return (
+      <div className="bg-background flex h-full items-center justify-center p-6">
+        <div className="border-destructive/30 bg-destructive/5 flex max-w-md items-center gap-3 rounded-lg border p-4">
+          <AlertTriangle className="text-destructive shrink-0" size={20} aria-hidden />
+          <p className="text-foreground text-sm font-medium">{error ?? 'Post not found.'}</p>
+        </div>
+      </div>
+    )
+  }
+
+  const context: PostRenderContext = {
+    title: post.title,
+    excerpt: post.excerpt,
+    body: post.body,
+    featuredImageUrl: post.featuredImage,
+    publishDate: post.publishDate ?? post.updatedAt ?? null,
+    category: post.category,
+    author: { name: session?.user?.name || session?.user?.email },
+  }
+  const visible = post.sections.filter((s) => s.visible)
+
+  return (
+    <div className="flex h-full flex-col">
+      {/* Slim preview bar. This view opens in its own browser tab, so
+          actions are tab-scoped. */}
+      <div className="bg-card border-border flex h-12 shrink-0 items-center justify-between border-b px-4">
+        <button
+          type="button"
+          onClick={() => window.close()}
+          className="text-muted-foreground hover:text-foreground inline-flex items-center gap-1.5 text-sm"
+          aria-label="Close preview tab"
+        >
+          <X className="h-4 w-4" aria-hidden />
+          Close
+        </button>
+        <span className="text-muted-foreground text-xs">Preview · {post.title || 'Untitled'}</span>
+        <button
+          type="button"
+          onClick={() => onNavigate(`/posts/${postType}/${documentId}/edit`)}
+          className="bg-primary text-primary-foreground hover:bg-primary/90 inline-flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-sm font-medium"
+        >
+          <Pencil className="h-3.5 w-3.5" aria-hidden />
+          Open editor
+        </button>
+      </div>
+
+      <div className="flex-1 overflow-auto bg-white">
+        <PostHeader config={header} context={context} />
+        {visible.map((section) => (
+          <SectionRenderer key={section.id} section={section} context={context} />
+        ))}
+      </div>
+    </div>
+  )
+}