@actuate-media/cms-admin 0.15.0 → 0.16.1

package/src/AdminRoot.tsx

@@ -1,6 +1,7 @@
 'use client'
 
-import { useState, useMemo, useEffect, useRef } from 'react'
+import { useState, useMemo, useEffect, useRef, useCallback } from 'react'
+import { toast } from 'sonner'
 import { Layout } from './layout/Layout.js'
 import { useAdminRouter } from './router/index.js'
 import { ensureCsrfToken } from './lib/api.js'
@@ -26,8 +27,20 @@ import { ThemeProvider } from './components/ThemeProvider.js'
 import { LocaleProvider } from './components/LocaleProvider.js'
 import { useKeyboardShortcuts } from './hooks/useKeyboardShortcuts.js'
 import { PageBuilder } from './views/page-builder/PageBuilder.js'
+import { PageSectionEditor } from './views/page-editor/PageSectionEditor.js'
+import { PagePreview } from './views/page-editor/PagePreview.js'
 import { SavedSections } from './views/page-builder/SavedSections.js'
 import { PageTemplates } from './views/page-builder/PageTemplates.js'
+import { Widgets } from './views/page-builder/Widgets.js'
+import { PagesListView } from './views/Pages/PagesListView.js'
+import { PageTagManager } from './views/Pages/PageTagManager.js'
+import { PostsListView } from './views/Posts/PostsListView.js'
+import { PostTypesView } from './views/Posts/PostTypesView.js'
+import { NewPostPicker } from './views/Posts/NewPostPicker.js'
+import { NewPostTypeInstructions } from './views/Posts/NewPostTypeInstructions.js'
+import { PostSectionEditor } from './views/post-editor/PostSectionEditor.js'
+import { PostTemplateEditor } from './views/post-editor/PostTemplateEditor.js'
+import { PostPreview } from './views/post-editor/PostPreview.js'
 
 export interface AdminRootProps {
   config: any
@@ -58,9 +71,45 @@ function AdminShell({
   onLogin,
   captchaConfig,
 }: AdminRootProps) {
-  const { currentPath, navigate, matchRoute } = useAdminRouter(basePath, initialPath)
+  const { currentPath, navigate, matchRoute, buildHref } = useAdminRouter(basePath, initialPath)
   const [shortcutHelpOpen, setShortcutHelpOpen] = useState(false)
 
+  // Open a preview route in a new browser tab so it behaves like a normal,
+  // shareable page (its own URL, no admin chrome — see the standalone branch
+  // below). The blank tab is opened synchronously inside the click gesture so
+  // popup blockers permit it; `prepare` (e.g. saving an unsaved draft) runs
+  // before we point the tab at the URL, guaranteeing the preview reflects the
+  // latest saved content. If `prepare` rejects, the tab is closed.
+  const openPreview = useCallback(
+    (path: string, prepare?: () => Promise<boolean | void> | boolean | void) => {
+      if (typeof window === 'undefined') return
+      const tab = window.open('about:blank', '_blank')
+      if (!tab) {
+        toast.error('Enable pop-ups for this site to open the preview in a new tab.')
+        return
+      }
+      const go = (ok: boolean | void) => {
+        if (ok === false) {
+          tab?.close()
+          return
+        }
+        if (tab && !tab.closed) {
+          // Sever the opener link for safety, then load the real URL.
+          try {
+            tab.opener = null
+          } catch {
+            /* cross-origin guard — never throws for same-origin admin */
+          }
+          tab.location.replace(buildHref(path))
+        }
+      }
+      Promise.resolve(prepare?.())
+        .then(go)
+        .catch(() => tab?.close())
+    },
+    [buildHref],
+  )
+
   useBranding(config)
   useAdminPageTitle(config, currentPath)
 
@@ -178,6 +227,143 @@ function AdminShell({
       return <MediaBrowser onNavigate={navigate} />
     }
 
+    // ─── Posts area ────────────────────────────────────────────────
+    // These take priority over the per-collection `/<slug>` matcher
+    // below so a consumer-defined `posts` collection can't accidentally
+    // shadow the aggregate Posts view.
+    if (matchRoute('/posts/types/new')) {
+      return <NewPostTypeInstructions onNavigate={navigate} />
+    }
+    // Per-type template editor — must match before `/posts/types/:slug/edit`
+    // is irrelevant (distinct last segment) but stays grouped with the type
+    // routes so it can't be shadowed by the generic `/posts/:type/*` block.
+    const postTypeTemplate = matchRoute('/posts/types/:slug/template')
+    if (postTypeTemplate?.slug) {
+      return (
+        <PostTemplateEditor
+          postType={postTypeTemplate.slug}
+          config={config}
+          session={session}
+          onNavigate={navigate}
+        />
+      )
+    }
+    const postTypeEdit = matchRoute('/posts/types/:slug/edit')
+    if (postTypeEdit?.slug) {
+      // V1 falls through to the per-collection list view; future
+      // PR introduces a dedicated PostTypeEditor with field-level
+      // metadata. The list view is the natural per-type management
+      // surface today (it already shows posts in that type).
+      return (
+        <CollectionList collectionSlug={postTypeEdit.slug} config={config} onNavigate={navigate} />
+      )
+    }
+    if (matchRoute('/posts/types')) {
+      return <PostTypesView onNavigate={navigate} />
+    }
+    if (matchRoute('/posts/new')) {
+      return <NewPostPicker onNavigate={navigate} />
+    }
+    if (matchRoute('/posts')) {
+      return <PostsListView onNavigate={navigate} />
+    }
+    // Section-based Post editor. These `/posts/:type/*` patterns are tested
+    // AFTER every `/posts/types/*` route above so `:type` cannot swallow the
+    // reserved "types" segment.
+    const postNew = matchRoute('/posts/:type/new')
+    if (postNew?.type) {
+      return (
+        <PostSectionEditor
+          postType={postNew.type}
+          config={config}
+          session={session}
+          onNavigate={navigate}
+          onOpenPreview={openPreview}
+        />
+      )
+    }
+    const postPreview = matchRoute('/posts/:type/:id/preview')
+    if (postPreview?.type && postPreview?.id) {
+      return (
+        <PostPreview
+          postType={postPreview.type}
+          documentId={postPreview.id}
+          session={session}
+          onNavigate={navigate}
+        />
+      )
+    }
+    const postEdit = matchRoute('/posts/:type/:id/edit')
+    if (postEdit?.type && postEdit?.id) {
+      return (
+        <PostSectionEditor
+          postType={postEdit.type}
+          documentId={postEdit.id}
+          config={config}
+          session={session}
+          onNavigate={navigate}
+          onOpenPreview={openPreview}
+        />
+      )
+    }
+
+    // ─── Pages area ────────────────────────────────────────────────
+    // Ordering matters: tag routes and /pages/new must be tested before
+    // the `/pages/:id` matcher, otherwise `:id` swallows "tags"/"new".
+    if (matchRoute('/pages/tags/new')) {
+      return <PageTagManager onNavigate={navigate} startCreating />
+    }
+    const pageTagEdit = matchRoute('/pages/tags/:id/edit')
+    if (pageTagEdit?.id) {
+      // The manager is a single CRUD surface; deep-linking to a tag just
+      // opens the manager (inline edit lives per-row).
+      return <PageTagManager onNavigate={navigate} />
+    }
+    if (matchRoute('/pages/tags')) {
+      return <PageTagManager onNavigate={navigate} />
+    }
+    if (matchRoute('/pages/new')) {
+      return (
+        <PageSectionEditor
+          config={config}
+          session={session}
+          onNavigate={navigate}
+          onOpenPreview={openPreview}
+        />
+      )
+    }
+    const pagePreview = matchRoute('/pages/:id/preview')
+    if (pagePreview?.id) {
+      return <PagePreview documentId={pagePreview.id} onNavigate={navigate} />
+    }
+    const pageEdit = matchRoute('/pages/:id/edit')
+    if (pageEdit?.id) {
+      return (
+        <PageSectionEditor
+          documentId={pageEdit.id}
+          config={config}
+          session={session}
+          onNavigate={navigate}
+          onOpenPreview={openPreview}
+        />
+      )
+    }
+    const pageEditBare = matchRoute('/pages/:id')
+    if (pageEditBare?.id) {
+      return (
+        <PageSectionEditor
+          documentId={pageEditBare.id}
+          config={config}
+          session={session}
+          onNavigate={navigate}
+          onOpenPreview={openPreview}
+        />
+      )
+    }
+    if (matchRoute('/pages')) {
+      return <PagesListView onNavigate={navigate} />
+    }
+
     if (matchRoute('/forms/new')) {
       return <FormEditor onNavigate={navigate} />
     }
@@ -225,6 +411,10 @@ function AdminShell({
       return <PageTemplates onNavigate={navigate} />
     }
 
+    if (matchRoute('/widgets')) {
+      return <Widgets onNavigate={navigate} />
+    }
+
     if (matchRoute('/users')) {
       return <Users onNavigate={navigate} />
     }
@@ -264,10 +454,21 @@ function AdminShell({
       'script-tags',
       'saved-sections',
       'page-templates',
+      'widgets',
       'users',
       'settings',
       'page-builder',
       'collections',
+      // `pages` is reserved so the Pages list/editor/tag routes above
+      // own the `/pages/*` namespace and can't be shadowed by a
+      // consumer-defined `pages` collection. The per-collection list is
+      // still reachable via `/collections/pages`.
+      'pages',
+      // `posts` is reserved so the aggregate Posts area is reachable
+      // even if a consumer defines a collection literally called
+      // `posts`. The per-type collection list is still available via
+      // `/collections/posts`.
+      'posts',
     ])
 
     for (const [slug, def] of collectionMap) {
@@ -354,6 +555,17 @@ function AdminShell({
     )
   }
 
+  // Preview routes render as standalone pages (no sidebar/header) so a
+  // new-tab preview looks like the real published page rather than an
+  // embedded admin view. Everything else gets the full admin chrome.
+  if (currentPath.endsWith('/preview')) {
+    return (
+      <div className="bg-background h-full min-h-screen">
+        <ErrorBoundary>{renderView()}</ErrorBoundary>
+      </div>
+    )
+  }
+
   return (
     <Layout config={config} session={session} currentPath={currentPath} onNavigate={navigate}>
       <ErrorBoundary>{renderView()}</ErrorBoundary>

package/src/__tests__/components/posts-badges.test.tsx

@@ -0,0 +1,77 @@
+// @vitest-environment happy-dom
+import { describe, expect, it } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import {
+  PostStatusBadge,
+  PostTypeBadge,
+  SeoScoreIndicator,
+  seoScorePalette,
+  paletteFor,
+} from '../../components/posts/badges.js'
+
+describe('seoScorePalette', () => {
+  it('returns gray for null', () => {
+    expect(seoScorePalette(null)).toBe('gray')
+  })
+  it.each([
+    [80, 'green'],
+    [100, 'green'],
+    [79, 'orange'],
+    [60, 'orange'],
+    [59, 'red'],
+    [1, 'red'],
+    [0, 'gray'],
+  ])('score %i → %s', (input, expected) => {
+    expect(seoScorePalette(input)).toBe(expected)
+  })
+})
+
+describe('paletteFor', () => {
+  it('falls back to gray for unknown colors', () => {
+    const p = paletteFor('chartreuse')
+    expect(p.bg).toContain('muted')
+  })
+  it('returns gray for null', () => {
+    const p = paletteFor(null)
+    expect(p.bg).toContain('muted')
+  })
+  it('returns purple tokens for "purple"', () => {
+    const p = paletteFor('purple')
+    expect(p.bg).toMatch(/violet/)
+    expect(p.border).toMatch(/violet/)
+  })
+})
+
+describe('SeoScoreIndicator', () => {
+  it('renders a dash for missing score', () => {
+    render(<SeoScoreIndicator score={null} />)
+    expect(screen.getByText('—')).toBeTruthy()
+  })
+  it('renders the numeric score when present', () => {
+    render(<SeoScoreIndicator score={88} />)
+    expect(screen.getByText('88')).toBeTruthy()
+  })
+})
+
+describe('PostStatusBadge', () => {
+  it('renders the human label for each status', () => {
+    render(<PostStatusBadge status="PUBLISHED" />)
+    expect(screen.getByText('Published')).toBeTruthy()
+  })
+  it('uses an aria-label so screen readers get a clean Status: foo announcement', () => {
+    const { container } = render(<PostStatusBadge status="SCHEDULED" />)
+    expect(container.querySelector('[aria-label="Status: Scheduled"]')).toBeTruthy()
+  })
+})
+
+describe('PostTypeBadge', () => {
+  it('renders as a static span when no onClick is provided', () => {
+    const { container } = render(<PostTypeBadge label="Blog" color="purple" />)
+    expect(container.querySelector('span')?.textContent).toBe('Blog')
+    expect(container.querySelector('button')).toBeNull()
+  })
+  it('renders as a button when onClick is provided', () => {
+    render(<PostTypeBadge label="Blog" color="purple" onClick={() => {}} />)
+    expect(screen.getByRole('button', { name: 'Blog' })).toBeTruthy()
+  })
+})

package/src/__tests__/layout/sidebar-posts.test.ts

@@ -0,0 +1,179 @@
+import { describe, expect, it } from 'vitest'
+import { buildNavItems } from '../../layout/Sidebar.js'
+
+/**
+ * Regression coverage for the Posts area sidebar grouping.
+ *
+ * The reference design shows a single "Posts" parent with two fixed
+ * children — All Posts and Post Types — even when the config defines
+ * multiple post-type collections (Blog, Case Studies, News, ...). That
+ * collapsing is fragile (it's tempting to enumerate each collection
+ * as its own sidebar entry) so we lock the contract with explicit
+ * tests.
+ */
+
+describe('buildNavItems', () => {
+  it('returns the default tree when no collections are provided', () => {
+    const items = buildNavItems({})
+    const posts = items.find((i) => i.path === '/posts')
+    expect(posts).toBeDefined()
+    expect(posts?.children?.map((c) => c.path)).toEqual(['/posts', '/posts/types'])
+    // Pages no longer carries children — Saved Sections / Templates moved
+    // under the dedicated Templates parent.
+    const pages = items.find((i) => i.path === '/pages')
+    expect(pages?.children ?? []).toEqual([])
+    // Templates is its own item with Saved Sections + Widgets.
+    const templates = items.find((i) => i.path === '/page-templates')
+    expect(templates?.children?.map((c) => c.path)).toEqual(['/saved-sections', '/widgets'])
+  })
+
+  it('exposes Templates as a top-level Content item with Saved Sections + Widgets', () => {
+    const items = buildNavItems({
+      collections: {
+        pages: { slug: 'pages', labels: { singular: 'Page', plural: 'Pages' }, type: 'page' },
+      },
+    })
+    const templates = items.find((i) => i.path === '/page-templates')
+    expect(templates).toBeDefined()
+    expect(templates?.group).toBe('Content')
+    expect(templates?.children?.map((c) => c.label)).toEqual(['Saved Sections', 'Widgets'])
+    // Templates is NOT nested under Pages.
+    const pages = items.find((i) => i.path === '/pages')
+    expect(pages?.children ?? []).toEqual([])
+  })
+
+  it('collapses every type:post collection under a single Posts parent', () => {
+    const items = buildNavItems({
+      collections: {
+        blog: { slug: 'blog', labels: { singular: 'Blog Post', plural: 'Blog' }, type: 'post' },
+        'case-studies': {
+          slug: 'case-studies',
+          labels: { singular: 'Case Study', plural: 'Case Studies' },
+          type: 'post',
+        },
+        news: { slug: 'news', labels: { singular: 'News Item', plural: 'News' }, type: 'post' },
+        pages: { slug: 'pages', labels: { singular: 'Page', plural: 'Pages' }, type: 'page' },
+      },
+    })
+
+    // Exactly one /posts entry, regardless of how many post types exist.
+    const postEntries = items.filter((i) => i.path === '/posts')
+    expect(postEntries).toHaveLength(1)
+
+    // Children are still the fixed pair — the per-type collections
+    // are NOT enumerated as sidebar siblings.
+    const children = postEntries[0]?.children?.map((c) => c.path)
+    expect(children).toEqual(['/posts', '/posts/types'])
+
+    // No per-type slug ended up as a top-level sidebar item.
+    const slugPaths = items.map((i) => i.path)
+    for (const slug of ['blog', 'case-studies', 'news']) {
+      expect(slugPaths).not.toContain(`/${slug}`)
+    }
+  })
+
+  it('treats admin.group=Posts (case-insensitive) as a synonym for type=post', () => {
+    const items = buildNavItems({
+      collections: {
+        reviews: {
+          slug: 'reviews',
+          labels: { singular: 'Review', plural: 'Reviews' },
+          // Intentionally NOT type:'post' — relying on the group marker.
+          admin: { group: 'posts' },
+        },
+      },
+    })
+    expect(items.some((i) => i.path === '/posts')).toBe(true)
+    expect(items.some((i) => i.path === '/reviews')).toBe(false)
+  })
+
+  it('omits the Posts parent entirely when no post-type collections exist', () => {
+    const items = buildNavItems({
+      collections: {
+        pages: { slug: 'pages', labels: { singular: 'Page', plural: 'Pages' }, type: 'page' },
+      },
+    })
+    expect(items.some((i) => i.path === '/posts')).toBe(false)
+  })
+
+  it('places Pages above Posts, both under the CONTENT group', () => {
+    const items = buildNavItems({
+      collections: {
+        blog: { slug: 'blog', labels: { singular: 'Blog Post', plural: 'Blog' }, type: 'post' },
+        pages: { slug: 'pages', labels: { singular: 'Page', plural: 'Pages' }, type: 'page' },
+      },
+    })
+
+    const pagesIdx = items.findIndex((i) => i.path === '/pages')
+    const postsIdx = items.findIndex((i) => i.path === '/posts')
+    const mediaIdx = items.findIndex((i) => i.path === '/media')
+
+    // Pages comes before Posts, and both come before the static
+    // content destinations.
+    expect(pagesIdx).toBeGreaterThanOrEqual(0)
+    expect(pagesIdx).toBeLessThan(postsIdx)
+    expect(postsIdx).toBeLessThan(mediaIdx)
+
+    // Both are tagged Content so the single CONTENT header sits above
+    // Pages (the first Content item in the tree).
+    expect(items[pagesIdx]?.group).toBe('Content')
+    expect(items[postsIdx]?.group).toBe('Content')
+
+    // The first item carrying group 'Content' is Pages — i.e. the
+    // CONTENT header renders directly above it.
+    const firstContent = items.find((i) => i.group === 'Content')
+    expect(firstContent?.path).toBe('/pages')
+  })
+
+  it('defaults: Pages is the first CONTENT item, above Posts', () => {
+    const items = buildNavItems({})
+    const pagesIdx = items.findIndex((i) => i.path === '/pages')
+    const postsIdx = items.findIndex((i) => i.path === '/posts')
+    expect(items[pagesIdx]?.group).toBe('Content')
+    expect(items[postsIdx]?.group).toBe('Content')
+    expect(pagesIdx).toBeLessThan(postsIdx)
+    expect(items.find((i) => i.group === 'Content')?.path).toBe('/pages')
+  })
+
+  it('renders an admin.group=Content collection (Menus) as its own Content item', () => {
+    const items = buildNavItems({
+      collections: {
+        pages: { slug: 'pages', labels: { singular: 'Page', plural: 'Pages' }, type: 'page' },
+        navigations: {
+          slug: 'navigations',
+          labels: { singular: 'Menu', plural: 'Menus' },
+          admin: { group: 'Content', icon: 'navigation' },
+        },
+      },
+    })
+
+    const menus = items.find((i) => i.path === '/navigations')
+    expect(menus).toBeDefined()
+    expect(menus?.label).toBe('Menus')
+    expect(menus?.group).toBe('Content')
+    // It is a flat Content entry, not a child of Posts/Templates/Pages.
+    expect(menus?.children).toBeUndefined()
+    // Lands after the static Content destinations, before Settings.
+    const menusIdx = items.findIndex((i) => i.path === '/navigations')
+    const scriptIdx = items.findIndex((i) => i.path === '/script-tags')
+    const usersIdx = items.findIndex((i) => i.path === '/users')
+    expect(menusIdx).toBeGreaterThan(scriptIdx)
+    expect(menusIdx).toBeLessThan(usersIdx)
+  })
+
+  it('keeps standard Content/Settings entries after collections', () => {
+    const items = buildNavItems({
+      collections: {
+        blog: { slug: 'blog', labels: { singular: 'Blog Post', plural: 'Blog' }, type: 'post' },
+      },
+    })
+    const paths = items.map((i) => i.path)
+    expect(paths).toContain('/media')
+    expect(paths).toContain('/forms')
+    expect(paths).toContain('/seo')
+    expect(paths).toContain('/script-tags')
+    expect(paths).toContain('/users')
+    expect(paths).toContain('/api-keys')
+    expect(paths).toContain('/settings')
+  })
+})