@actuate-media/cms-admin 0.18.0 → 0.19.0

package/src/lib/post-editor-service.ts

@@ -34,7 +34,7 @@ import {
   updateSectionMeta,
   coerceSections,
   coercePostHeader,
-  defaultPostHeader,
+  createPostTemplate,
   validateSectionContent,
   type PageSection,
   type PostHeaderConfig,
@@ -185,59 +185,60 @@ function rowToEditorPost(postType: string, doc: DocumentApiRow): EditorPost {
 
 // ─── Templates ───────────────────────────────────────────────────────
 
-interface ListEnvelope {
-  docs: DocumentApiRow[]
-  total: number
+/**
+ * Shape returned by the dedicated `/post-templates/:type` endpoint
+ * (`{ data: { postType, docId, header, sections } }`, unwrapped by cmsApi).
+ */
+interface TemplateApiResponse {
+  postType: string
+  docId: string | null
+  header: unknown
+  sections: unknown
+}
+
+function templateEndpoint(postType: string): string {
+  return `/post-templates/${encodeURIComponent(postType)}`
 }
 
 /**
- * Load a post type's template. Looks up the single `post-templates` document
- * whose slug matches the post type. Returns an unsaved default (centered
- * header, empty section list) when the type has no template yet.
+ * Load a post type's template via the dedicated, audited `/post-templates/:type`
+ * endpoint (scoped + logged), rather than the raw collection API. When the type
+ * has no saved template yet the endpoint returns the default starting template;
+ * if the request fails outright we still hand back that default so the editor
+ * is never blank.
  */
 export async function fetchTemplateForEditor(postType: string): Promise<EditorPostTemplate> {
-  const res = await cmsApi<ListEnvelope>(`/collections/${TEMPLATES_COLLECTION}?pageSize=200`)
-  const docs = res.data?.docs ?? []
-  const match = docs.find((d) => (d.slug ?? d.data?.slug) === postType)
-  if (!match) {
-    return { docId: null, postType, header: defaultPostHeader(), sections: [] }
+  const res = await cmsApi<TemplateApiResponse>(templateEndpoint(postType))
+  if (res.error || !res.data) {
+    const seed = createPostTemplate(postType)
+    return { docId: null, postType, header: seed.header, sections: seed.sections }
   }
-  const data = match.data ?? {}
-  return {
-    docId: match.id,
-    postType,
-    header: coercePostHeader(data.header),
-    sections: coerceSections(data.sections),
+  const r = res.data
+  const docId = r.docId ?? null
+  const header = coercePostHeader(r.header)
+  let sections = coerceSections(r.sections)
+  // Defend against an older server (or an empty stored template): an unsaved
+  // type should still seed the default sections so authors aren't faced with a
+  // blank canvas.
+  if (!docId && sections.length === 0) {
+    sections = createPostTemplate(postType).sections
   }
+  return { docId, postType, header, sections }
 }
 
-function templateWriteBody(template: EditorPostTemplate, extra?: Record<string, unknown>): string {
-  return JSON.stringify({
-    title: `${template.postType} template`,
-    slug: template.postType,
-    postType: template.postType,
-    header: template.header,
-    sections: template.sections,
-    ...extra,
-  })
-}
-
-/** Persist a post type's template (creates the doc on first save). */
+/** Persist a post type's template via `PUT /post-templates/:type`. */
 export async function saveTemplate(template: EditorPostTemplate): Promise<EditorPostTemplate> {
-  const endpoint = template.docId
-    ? `/collections/${TEMPLATES_COLLECTION}/${template.docId}`
-    : `/collections/${TEMPLATES_COLLECTION}`
-  const res = await cmsApi<DocumentApiRow>(endpoint, {
-    method: template.docId ? 'PUT' : 'POST',
-    body: templateWriteBody(template, { status: 'PUBLISHED' }),
+  const res = await cmsApi<TemplateApiResponse>(templateEndpoint(template.postType), {
+    method: 'PUT',
+    body: JSON.stringify({ header: template.header, sections: template.sections }),
   })
   if (res.error || !res.data) throw new Error(res.error ?? 'Failed to save template')
-  const data = res.data.data ?? {}
+  const r = res.data
   return {
-    docId: res.data.id,
+    docId: r.docId ?? null,
     postType: template.postType,
-    header: coercePostHeader(data.header),
-    sections: coerceSections(data.sections),
+    header: coercePostHeader(r.header),
+    sections: coerceSections(r.sections),
   }
 }
 

package/src/lib/posts-service.ts

@@ -1,25 +1,16 @@
 /**
- * Posts service — thin client over the existing REST endpoints,
- * shaped around the data the Posts admin area needs.
+ * Posts service — thin client over the CMS REST endpoints, shaped around the
+ * data the Posts admin area needs.
  *
- * V1 strategy: aggregate across post-typed collections client-side
- * (one `/collections/:slug` call per type) and join authors via
- * `/users`. Each view component pulls from `fetchPosts()` so when
- * a server-side `/api/cms/posts` endpoint lands later, only this
- * file changes — callers consume the same `Post[]` / `PostType[]`
- * shapes.
+ * `fetchPosts` calls the server-side aggregate endpoint `GET /posts`, which
+ * does the cross-collection filter / sort / paginate at the DB level (one
+ * query + one count) and returns the post rows alongside dataset-wide type
+ * counts and the contributor list. This keeps the Posts list O(page) instead
+ * of pulling every document per type into the browser, and lets it scale past
+ * the old ~500-row-per-type client cap.
  *
- * Why not a single `/collections/all` call?
- *   - Each collection has its own access-control check, so listing
- *     across collections must respect per-collection `read` rules.
- *     The existing endpoint enforces this per-call; mixing them
- *     server-side would need a new auth boundary.
- *   - V1 traffic is small (the seed is 15 rows); a few extra
- *     parallel requests are well under the rate-limit budget.
- *
- * Promote to a single endpoint when:
- *   - Any post-type collection grows past ~5k rows, OR
- *   - Page-load latency exceeds 300ms in the admin metrics.
+ * Access control still lives server-side: the endpoint only returns rows from
+ * collections the caller's scope can read.
  */
 import { cmsApi } from './api.js'
 
@@ -133,204 +124,142 @@ function collectionToPostType(c: CollectionApiRow, count = 0): PostType {
   }
 }
 
-// ─── Users → Authors ─────────────────────────────────────────────────
+// ─── Authors ─────────────────────────────────────────────────────────
 
-interface UserApiRow {
-  id: string
-  name?: string | null
-  email: string
+function initialsFromName(name: string | null | undefined): string {
+  const trimmed = name?.trim()
+  if (!trimmed) return '?'
+  const parts = trimmed.split(/\s+/)
+  const first = parts[0]?.[0] ?? ''
+  const last = parts.length > 1 ? (parts[parts.length - 1]?.[0] ?? '') : ''
+  return (first + last).toUpperCase() || '?'
 }
 
-function initialsFromName(name: string | null | undefined, email: string): string {
-  if (name && name.trim().length > 0) {
-    const parts = name.trim().split(/\s+/)
-    const first = parts[0]?.[0] ?? ''
-    const last = parts.length > 1 ? (parts[parts.length - 1]?.[0] ?? '') : ''
-    return (first + last).toUpperCase() || (email[0] ?? '?').toUpperCase()
-  }
-  return (email[0] ?? '?').toUpperCase()
-}
+// ─── Posts (server-side aggregate) ───────────────────────────────────
 
-async function fetchAuthorsMap(): Promise<Map<string, PostAuthor>> {
-  const res = await cmsApi<{ users: UserApiRow[] } | UserApiRow[]>('/users?pageSize=200')
-  const list: UserApiRow[] = Array.isArray(res.data)
-    ? res.data
-    : ((res.data as { users?: UserApiRow[] } | null)?.users ?? [])
-  const map = new Map<string, PostAuthor>()
-  for (const u of list) {
-    map.set(u.id, {
-      id: u.id,
-      name: u.name?.trim() || u.email,
-      initials: initialsFromName(u.name, u.email),
-    })
-  }
-  return map
-}
-
-// ─── Posts ───────────────────────────────────────────────────────────
-
-interface DocumentApiRow {
+interface PostsApiPost {
   id: string
   collection: string
   title: string | null
   slug: string | null
   status: PostStatus
-  createdById: string | null
-  updatedById: string | null
   publishedAt: string | null
   scheduledAt: string | null
   createdAt: string
   updatedAt: string
-  data: Record<string, unknown> | null
+  seoScore: number | null
+  author: { id: string; name: string } | null
 }
 
-function extractSeoScore(data: Record<string, unknown> | null): number | null {
-  if (!data) return null
-  const candidates = ['seoScore', 'seo_score', 'metaScore']
-  for (const k of candidates) {
-    const v = data[k]
-    if (typeof v === 'number' && Number.isFinite(v)) return v
-  }
-  return null
+interface PostsApiType {
+  slug: string
+  singular: string
+  plural: string
+  description: string | null
+  urlPrefix: string
+  color: string | null
+  icon: string | null
+  fieldCount: number
+  count: number
+}
+
+interface PostsApiResponse {
+  posts: PostsApiPost[]
+  total: number
+  page: number
+  pageSize: number
+  types: PostsApiType[]
+  authors: Array<{ id: string; name: string }>
 }
 
-function pickDisplayDate(d: DocumentApiRow): string {
+/** Display date matches the old client behaviour: scheduled/published date when set, else updated. */
+function pickDisplayDate(d: PostsApiPost): string {
   if (d.status === 'SCHEDULED' && d.scheduledAt) return d.scheduledAt
   if (d.status === 'PUBLISHED' && d.publishedAt) return d.publishedAt
   return d.updatedAt
 }
 
-interface ListEnvelope {
-  docs: DocumentApiRow[]
-  total: number
+function buildPostsQueryString(query: PostsQuery): string {
+  const params = new URLSearchParams()
+  if (query.search?.trim()) params.set('search', query.search.trim())
+  if (query.postType && query.postType !== 'all') params.set('postType', query.postType)
+  if (query.status && query.status !== 'all') params.set('status', query.status)
+  if (query.author && query.author !== 'all') params.set('author', query.author)
+  if (query.sortBy) params.set('sortBy', query.sortBy)
+  if (query.sortDirection) params.set('sortDirection', query.sortDirection)
+  params.set('page', String(Math.max(1, query.page ?? 1)))
+  params.set('pageSize', String(Math.max(1, query.pageSize ?? 10)))
+  const qs = params.toString()
+  return qs ? `?${qs}` : ''
 }
 
 export async function fetchPosts(query: PostsQuery = {}): Promise<PostsResult> {
-  const cols = await fetchPostCollections()
-  const authorsMap = await fetchAuthorsMap()
-
-  // Pull every doc for each post type (cap at 500 to avoid runaway
-  // requests; pagination + filtering still happens client-side over
-  // this set). When a type grows past 500 docs we'll need the
-  // server-side aggregate endpoint described in this file's header.
-  const perTypeRaw = await Promise.all(
-    cols.map(async (c) => {
-      const res = await cmsApi<ListEnvelope>(
-        `/collections/${encodeURIComponent(c.slug)}?pageSize=500&sort=updatedAt&order=desc`,
-      )
-      const docs = (res.data?.docs ?? []) as DocumentApiRow[]
-      return { col: c, docs }
-    }),
-  )
-
-  // Map docs → Post objects.
-  const allPosts: Post[] = []
-  for (const { col, docs } of perTypeRaw) {
-    for (const d of docs) {
-      const author = (d.createdById && authorsMap.get(d.createdById)) ||
-        (d.updatedById && authorsMap.get(d.updatedById)) || {
-          id: '',
-          name: 'Unknown',
-          initials: '??',
-        }
-      allPosts.push({
-        id: d.id,
-        title: d.title ?? (d.data?.title as string) ?? '(untitled)',
-        slug: d.slug ?? (d.data?.slug as string) ?? '',
-        postTypeId: col.slug,
-        postTypeName: col.labels.singular,
-        postTypeAccentColor: col.color ?? null,
-        authorId: author.id,
-        authorName: author.name,
-        authorInitials: author.initials,
-        status: d.status,
-        publishDate: d.publishedAt ?? d.scheduledAt ?? null,
-        updatedDate: pickDisplayDate(d),
-        seoScore: extractSeoScore(d.data),
-        createdAt: d.createdAt,
-        updatedAt: d.updatedAt,
-      })
-    }
-  }
+  const page = Math.max(1, query.page ?? 1)
+  const pageSize = Math.max(1, query.pageSize ?? 10)
 
-  // Compute per-type counts BEFORE filtering — the tabs at the top
-  // of the page reflect the dataset, not the active query.
-  const countsBySlug = new Map<string, number>()
-  for (const p of allPosts) {
-    countsBySlug.set(p.postTypeId, (countsBySlug.get(p.postTypeId) ?? 0) + 1)
+  const res = await cmsApi<PostsApiResponse>(`/posts${buildPostsQueryString(query)}`)
+  if (res.error || !res.data) {
+    throw new Error(res.error ?? 'Failed to load posts')
   }
-  const types: PostType[] = cols.map((c) => collectionToPostType(c, countsBySlug.get(c.slug) ?? 0))
-
-  // Apply filters / search.
-  const search = (query.search ?? '').trim().toLowerCase()
-  const filtered = allPosts.filter((p) => {
-    if (query.postType && query.postType !== 'all' && p.postTypeId !== query.postType) return false
-    if (query.status && query.status !== 'all' && p.status !== query.status) return false
-    if (query.author && query.author !== 'all' && p.authorId !== query.author) return false
-    if (search) {
-      const haystack = `${p.title} ${p.slug} ${p.authorName} ${p.postTypeName}`.toLowerCase()
-      if (!haystack.includes(search)) return false
+  const r = res.data
+
+  const typeBySlug = new Map<string, PostsApiType>()
+  for (const t of r.types) typeBySlug.set(t.slug, t)
+
+  const types: PostType[] = r.types.map((t) => ({
+    id: t.slug,
+    slug: t.slug,
+    name: t.plural,
+    singularName: t.singular,
+    description: t.description ?? null,
+    urlBase: `/${t.urlPrefix || t.slug}`,
+    accentColor: t.color ?? null,
+    icon: t.icon ?? null,
+    postCount: t.count,
+    fieldCount: t.fieldCount,
+    active: true,
+  }))
+
+  const posts: Post[] = r.posts.map((d) => {
+    const type = typeBySlug.get(d.collection)
+    const authorName = d.author?.name?.trim() || 'Unknown'
+    return {
+      id: d.id,
+      title: d.title ?? '(untitled)',
+      slug: d.slug ?? '',
+      postTypeId: d.collection,
+      postTypeName: type?.singular ?? d.collection,
+      postTypeAccentColor: type?.color ?? null,
+      authorId: d.author?.id ?? '',
+      authorName,
+      authorInitials: d.author ? initialsFromName(d.author.name) : '??',
+      status: d.status,
+      publishDate: d.publishedAt ?? d.scheduledAt ?? null,
+      updatedDate: pickDisplayDate(d),
+      seoScore: d.seoScore,
+      createdAt: d.createdAt,
+      updatedAt: d.updatedAt,
     }
-    return true
   })
 
-  // Sort.
-  const sortBy = query.sortBy ?? 'date'
-  const dir = query.sortDirection ?? 'desc'
-  filtered.sort((a, b) => {
-    const cmp = comparePostsFor(sortBy, a, b)
-    return dir === 'asc' ? cmp : -cmp
-  })
-
-  // Paginate.
-  const page = Math.max(1, query.page ?? 1)
-  const pageSize = Math.max(1, query.pageSize ?? 10)
-  const start = (page - 1) * pageSize
-  const paged = filtered.slice(start, start + pageSize)
-
-  // Unique authors from the full set (so the dropdown lists every
-  // contributor, not just the currently visible page).
-  const authorIds = new Set<string>()
-  const authors: PostAuthor[] = []
-  for (const p of allPosts) {
-    if (p.authorId && !authorIds.has(p.authorId)) {
-      authorIds.add(p.authorId)
-      authors.push({ id: p.authorId, name: p.authorName, initials: p.authorInitials })
-    }
-  }
-  authors.sort((a, b) => a.name.localeCompare(b.name))
+  const authors: PostAuthor[] = r.authors
+    .map((a) => ({
+      id: a.id,
+      name: a.name?.trim() || 'Unknown',
+      initials: initialsFromName(a.name),
+    }))
+    .sort((a, b) => a.name.localeCompare(b.name))
 
   return {
-    posts: paged,
-    total: filtered.length,
-    page,
-    pageSize,
+    posts,
+    total: r.total,
+    page: r.page ?? page,
+    pageSize: r.pageSize ?? pageSize,
     types,
     authors,
   }
 }
 
-function comparePostsFor(by: NonNullable<PostsQuery['sortBy']>, a: Post, b: Post): number {
-  switch (by) {
-    case 'title':
-      return a.title.localeCompare(b.title)
-    case 'type':
-      return a.postTypeName.localeCompare(b.postTypeName)
-    case 'author':
-      return a.authorName.localeCompare(b.authorName)
-    case 'status':
-      return a.status.localeCompare(b.status)
-    case 'seo': {
-      const av = a.seoScore ?? -1
-      const bv = b.seoScore ?? -1
-      return av - bv
-    }
-    case 'date':
-    default:
-      return new Date(a.updatedDate).getTime() - new Date(b.updatedDate).getTime()
-  }
-}
-
 // ─── Bulk mutations ──────────────────────────────────────────────────
 
 export async function bulkUpdatePosts(

package/src/views/Posts/NewPostPicker.tsx

@@ -9,10 +9,11 @@ import { resolvePostTypeIcon } from '../../components/posts/icons.js'
 /**
  * Type-picker landing page for "+ New Post".
  *
- * When zero or one post type is configured we'd ordinarily auto-route
- * to the per-collection editor, but the spec calls out always showing
- * a chooser when "+ New Post" is clicked. We keep that behavior so
- * the experience is consistent regardless of how many types exist.
+ * Behavior by number of configured post types:
+ *   - exactly one  → skip the picker and forward straight to that type's
+ *     new-post editor (a one-card chooser adds nothing but a flash)
+ *   - two or more  → show the chooser cards
+ *   - zero         → show a "no post types configured" setup hint
  *
  * Picking a card navigates to the section-based Post editor's new-post
  * route (`/posts/<slug>/new`), which seeds the post from that type's

package/src/views/Posts/PostTypesView.tsx

@@ -14,10 +14,11 @@ import { resolvePostTypeIcon } from '../../components/posts/icons.js'
  *   - title + description
  *   - footer row: post count · field count · URL base
  *
- * Cards open the per-collection settings (`/collections/:slug/settings`
- * in the existing admin) when clicked. The dashed "+ New Post Type"
- * card routes to /posts/types/new where users get instructions for
- * adding a new collection to the config file.
+ * Clicking a card opens that type's settings (`/posts/types/:slug/edit`);
+ * each card also has an "Edit Template" action (`/posts/types/:slug/template`)
+ * for the type's default layout. The dashed "+ New Post Type" card routes to
+ * `/posts/types/new`, where users get instructions for adding a new collection
+ * to the config file.
  *
  * Why no in-app create/edit flow yet:
  *   Collections are file-defined (actuate.config.ts). Writing to that

package/src/views/Posts/PostsListView.tsx

@@ -118,6 +118,15 @@ export function PostsListView({ onNavigate }: PostsListViewProps) {
     setSelected(new Set())
   }, [activeType, debouncedSearch, status, author])
 
+  // Selection is scoped to the rows visible on the current page: bulk
+  // actions only ever touch `selectedPosts` (the current page's selected
+  // rows), so clear the selection whenever the page changes. Without this
+  // the bulk bar count keeps counting rows from earlier pages while the
+  // publish/delete handlers silently operate on nothing.
+  useEffect(() => {
+    setSelected(new Set())
+  }, [page])
+
   const total = data?.total ?? 0
   const totalAll = useMemo(
     () => (data?.types ?? []).reduce((sum, t) => sum + t.postCount, 0),

package/src/views/page-editor/sections/ArticleBodySection.tsx

@@ -4,8 +4,12 @@ import { bool, str, type PostRenderContext } from './parts.js'
 /**
  * Renders the post's main body. When `source === 'field'` it shows the
  * post's own Body field (passed via context); otherwise it renders the
- * section's own `body` copy. Body text is treated as plain paragraphs split
- * on blank lines — the renderer never injects raw HTML.
+ * section's own `body` copy.
+ *
+ * The Body field is a `richText` field (sanitized HTML on write), so this
+ * canvas preview renders it as HTML — exactly like the public site's
+ * article-body renderer — to stay WYSIWYG. It previews the author's own
+ * in-progress draft; the server sanitizes (sanitize-html) on save.
  */
 export function ArticleBodySection({
   section,
@@ -16,15 +20,10 @@ export function ArticleBodySection({
 }) {
   const c = section.content
   const source = str(c, 'source', 'field')
-  const raw = source === 'field' ? (context?.body ?? '') : str(c, 'body')
+  const html = source === 'field' ? (context?.body ?? '') : str(c, 'body')
   const wide = str(c, 'width', 'normal') === 'wide'
   const showToc = bool(c, 'showToc')
 
-  const paragraphs = raw
-    .split(/\n{2,}/)
-    .map((p) => p.trim())
-    .filter(Boolean)
-
   return (
     <div className={`mx-auto px-6 ${wide ? 'max-w-4xl' : 'max-w-2xl'}`}>
       {showToc && (
@@ -37,14 +36,11 @@ export function ArticleBodySection({
           </p>
         </div>
       )}
-      {paragraphs.length > 0 ? (
-        <div className="space-y-4">
-          {paragraphs.map((p, i) => (
-            <p key={i} className="text-base leading-relaxed text-zinc-700">
-              {p}
-            </p>
-          ))}
-        </div>
+      {html.trim() ? (
+        <div
+          className="prose prose-zinc max-w-none text-base leading-relaxed text-zinc-700"
+          dangerouslySetInnerHTML={{ __html: html }}
+        />
       ) : (
         <p className="text-base leading-relaxed text-zinc-400 italic">
           {source === 'field'

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

@@ -102,6 +102,12 @@ export function PostEditorCanvas({
 }
 
 function EmptyBody({ onAddSection }: { onAddSection: () => void }) {
+  // This block sits inside the fixed-white preview surface, so the neutral
+  // greys intentionally match the website-preview palette used by PostHeader
+  // and the section renderers (not the admin theme tokens, which flip in dark
+  // mode and would lose contrast on the always-white surface). The CTA is the
+  // one true admin affordance here, so it uses the brand `primary` token,
+  // which carries a guaranteed-contrast foreground in both modes.
   return (
     <div className="flex flex-col items-center justify-center gap-3 border-t border-zinc-100 px-6 py-16 text-center">
       <span className="flex h-12 w-12 items-center justify-center rounded-full bg-zinc-100">
@@ -113,7 +119,7 @@ function EmptyBody({ onAddSection }: { onAddSection: () => void }) {
       <button
         type="button"
         onClick={onAddSection}
-        className="inline-flex items-center gap-2 rounded-lg bg-violet-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-violet-700"
+        className="bg-primary text-primary-foreground hover:bg-primary/90 inline-flex items-center gap-2 rounded-lg px-4 py-2 text-sm font-medium transition-colors"
       >
         <Plus className="h-4 w-4" aria-hidden />
         Add Section