@actuate-media/cms-admin 0.15.0 → 0.16.1

package/src/lib/preview-link.ts

@@ -0,0 +1,63 @@
+import { cmsApi } from './api.js'
+
+/**
+ * Mint a signed, time-boxed preview token for a single document. The token is
+ * bound to the (collection, documentId) pair server-side, so it can only
+ * unlock the exact draft it was issued for. Used to build public preview URLs
+ * (`/<prefix>/<slug>?preview=<token>`) that render a draft through the
+ * consumer's real front-end — see {@link buildPublicPreviewUrl}.
+ */
+export async function createPreviewToken(
+  collection: string,
+  documentId: string,
+  ttlSeconds?: number,
+): Promise<{ token: string; expiresAt: string; slug?: string | null }> {
+  const res = await cmsApi<{ token: string; expiresAt: string; slug?: string | null }>(
+    '/preview/token',
+    {
+      method: 'POST',
+      body: JSON.stringify({ collection, documentId, ttlSeconds }),
+    },
+  )
+  if (res.error || !res.data) {
+    throw new Error(res.error ?? 'Failed to create preview token')
+  }
+  return res.data
+}
+
+export interface PublicPreviewUrlParts {
+  /** Absolute site origin, e.g. `https://example.com`. Trailing slash optional. */
+  siteUrl: string
+  /** Collection URL prefix (e.g. `blog`). Empty for top-level page collections. */
+  urlPrefix?: string | null
+  /** Document slug used in the public path. */
+  slug: string
+  /** Signed preview token from {@link createPreviewToken}. */
+  token: string
+}
+
+/**
+ * Build the public URL a draft preview opens at — the SAME path the
+ * `/resolve` endpoint matches: `<urlPrefix>/<slug>` (or `/<slug>` for
+ * top-level pages), with the preview token on the query string so the
+ * public route can drop the `PUBLISHED` filter for this one document.
+ */
+export function buildPublicPreviewUrl({
+  siteUrl,
+  urlPrefix,
+  slug,
+  token,
+}: PublicPreviewUrlParts): string {
+  const base = (siteUrl ?? '').replace(/\/+$/, '')
+  const prefix = (urlPrefix ?? '').replace(/^\/+|\/+$/g, '')
+  const cleanSlug = slug.replace(/^\/+|\/+$/g, '')
+  const path = prefix ? `/${prefix}/${cleanSlug}` : `/${cleanSlug}`
+  return `${base}${path}?preview=${encodeURIComponent(token)}`
+}
+
+/** Resolve the public site origin: explicit config first, else the current tab's origin. */
+export function resolveSiteUrl(configSiteUrl?: string | null): string {
+  if (configSiteUrl && configSiteUrl.trim()) return configSiteUrl.trim()
+  if (typeof window !== 'undefined') return window.location.origin
+  return ''
+}

package/src/router/index.ts

@@ -44,6 +44,15 @@ export function useAdminRouter(basePath = '/admin', serverPath = '/') {
     window.history.pushState({ adminPath: normalizedPath }, '', fullUrl)
   }, [])
 
+  // Build an absolute (basePath-prefixed) admin URL without navigating. Used
+  // for links that must load a real document — e.g. opening a preview in a
+  // new browser tab, where `pushState` (which only mutates the current tab)
+  // is not an option.
+  const buildHref = useCallback((path: string) => {
+    const normalizedPath = path.startsWith('/') ? path : `/${path}`
+    return normalizedPath === '/' ? baseRef.current : `${baseRef.current}${normalizedPath}`
+  }, [])
+
   const matchRoute = useCallback(
     (pattern: string): RouteParams | null => {
       const patternParts = pattern.split('/').filter(Boolean)
@@ -75,5 +84,5 @@ export function useAdminRouter(basePath = '/admin', serverPath = '/') {
     [currentPath],
   )
 
-  return { currentPath, navigate, matchRoute }
+  return { currentPath, navigate, matchRoute, buildHref }
 }

package/src/views/Dashboard.tsx

@@ -15,7 +15,7 @@
  *   >= 1024 (desktop):  stat cards 5-col, main grid is `1fr 320px`
  */
 
-import { useMemo, useState } from 'react'
+import { useEffect, useMemo, useState } from 'react'
 import {
   FileText,
   File as FileIcon,
@@ -119,6 +119,24 @@ function collectionLabel(col: CollectionMeta, plural = true): string {
   return col.labels?.singular ?? fallback
 }
 
+/**
+ * Resolve the correct editor route for a recent/queued document.
+ *
+ * Post-type documents MUST open in the section-based post editor
+ * (`/posts/:type/:id/edit`). Routing them through the generic
+ * `/:collection/:id` handler lands them in the legacy `DocumentEdit`
+ * view, which has no concept of the section model — opening + saving
+ * there silently strips a post's `sections` data. The canonical Pages
+ * collection opens in the full page editor (which wires up preview).
+ * Everything else falls through to the existing generic collection
+ * route, which already resolves correctly.
+ */
+function editPathForDoc(col: CollectionMeta | undefined, collection: string, id: string): string {
+  if (col?.type === 'post') return `/posts/${collection}/${id}/edit`
+  if (collection === 'pages') return `/pages/${id}/edit`
+  return `/${collection}/${id}`
+}
+
 function relativeTime(dateStr: string): string {
   const then = new Date(dateStr).getTime()
   const diff = Date.now() - then
@@ -252,8 +270,18 @@ export function Dashboard({ config, session, onNavigate }: DashboardProps) {
   const { data: contentHealthData, loading: contentHealthLoading } =
     useApiData<ContentHealthData>('/stats/content-health')
 
-  const greeting = useMemo(() => timeOfDayGreeting(), [])
-  const dateStr = useMemo(() => todayDateString(), [])
+  // A slow ticker (60s) so the greeting, calendar date, and "x minutes
+  // ago" relative times stay correct on a dashboard left open for hours
+  // — without it, a tab opened at 11:58am would read "Good morning" all
+  // afternoon and show stale activity timestamps.
+  const [now, setNow] = useState(() => Date.now())
+  useEffect(() => {
+    const id = setInterval(() => setNow(Date.now()), 60_000)
+    return () => clearInterval(id)
+  }, [])
+
+  const greeting = useMemo(() => timeOfDayGreeting(), [now])
+  const dateStr = useMemo(() => todayDateString(), [now])
   const userName = useMemo(() => firstNameForGreeting(session), [session])
 
   const collections = useMemo(() => resolveCollections(config), [config])
@@ -358,12 +386,24 @@ export function Dashboard({ config, session, onNavigate }: DashboardProps) {
   // dashboard's content-creation toolbar. Order mirrors the natural
   // authoring flow (post → page → media → form → integration).
   const quickActions = useMemo(() => {
-    const posts = collections.find((c) => c.slug === 'posts' || c.type === 'post')
-    const postsSlug = posts?.slug ?? 'posts'
+    const postTypes = collections.filter((c) => c.type === 'post')
     const pages = collections.find((c) => c.slug === 'pages' || c.type === 'page')
     const pagesSlug = pages?.slug ?? 'pages'
+    // "New Post": one Post Type → straight to its editor; several →
+    // the picker; none → the Post Type setup instructions (avoids a
+    // broken slug-based new URL).
+    const newPostPath =
+      postTypes.length === 1
+        ? `/${postTypes[0]!.slug}/new`
+        : postTypes.length > 1
+          ? '/posts/new'
+          : '/posts/types/new'
     const items: { label: string; icon: LucideIcon; onClick: () => void }[] = [
-      { label: 'New Post', icon: Plus, onClick: () => nav(`/${postsSlug}/new`) },
+      {
+        label: 'New Post',
+        icon: Plus,
+        onClick: () => nav(newPostPath),
+      },
       { label: 'New Page', icon: Plus, onClick: () => nav(`/${pagesSlug}/new`) },
       { label: 'Upload Media', icon: Upload, onClick: () => nav('/media') },
       { label: 'New Form', icon: Plus, onClick: () => nav('/forms') },
@@ -384,9 +424,12 @@ export function Dashboard({ config, session, onNavigate }: DashboardProps) {
         relTime: relativeTime(d.updatedAt),
         avatar: authorAvatar(d.author),
         statusInfo: statusBadge(d.status),
+        editPath: editPathForDoc(col, d.collection, d.id),
       }
     })
-  }, [stats, collections, activityLimit])
+    // `now` keeps the relative timestamps fresh on a long-open tab.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [stats, collections, activityLimit, now])
 
   // ── Publishing queue (scheduled docs only) ──────────────────────────────
   const publishQueue = useMemo(() => {
@@ -403,9 +446,11 @@ export function Dashboard({ config, session, onNavigate }: DashboardProps) {
           type: col ? collectionLabel(col, false) : d.collection,
           date: relativeTime(d.updatedAt),
           author: d.author,
+          editPath: editPathForDoc(col, d.collection, d.id),
         }
       })
-  }, [stats, collections])
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [stats, collections, now])
 
   // ── Content health (sourced from /stats/content-health) ─────────────────
   // Persisted by the nightly content-health cron. The four issue rows
@@ -606,12 +651,14 @@ export function Dashboard({ config, session, onNavigate }: DashboardProps) {
               <h2 className="text-foreground text-sm font-semibold">Recent Activity</h2>
               <p className="text-muted-foreground mt-0.5 text-xs">Last 7 days across all content</p>
             </div>
-            <button
-              className="text-xs font-medium text-violet-600 hover:underline dark:text-violet-400"
-              onClick={() => setActivityLimit((n) => (n >= 20 ? 8 : 20))}
-            >
-              {activity.length >= 20 ? 'Show less' : 'View all'}
-            </button>
+            {(stats?.recentDocuments?.length ?? 0) > 8 && (
+              <button
+                className="text-xs font-medium text-violet-600 hover:underline dark:text-violet-400"
+                onClick={() => setActivityLimit((n) => (n >= 20 ? 8 : 20))}
+              >
+                {activityLimit >= 20 ? 'Show less' : 'Show more'}
+              </button>
+            )}
           </header>
           {activity.length === 0 ? (
             <EmptyState
@@ -622,38 +669,40 @@ export function Dashboard({ config, session, onNavigate }: DashboardProps) {
           ) : (
             <ul role="list" className="divide-border divide-y">
               {activity.map((it) => (
-                <li
-                  key={it.id}
-                  className="hover:bg-accent/50 cursor-pointer px-4 py-3 transition-colors"
-                  onClick={() => nav(`/${it.collection}/${it.id}`)}
-                >
-                  <div className="flex min-w-0 items-start gap-3">
-                    <div
-                      className="mt-0.5 flex h-7 w-7 shrink-0 items-center justify-center rounded-full text-[11px] font-bold text-white"
-                      style={{ background: it.avatar.color }}
-                      aria-hidden
-                    >
-                      {it.avatar.initials}
-                    </div>
-                    <div className="min-w-0 flex-1">
-                      <p className="text-foreground truncate text-sm leading-snug">
-                        <span className="font-semibold">
-                          &ldquo;{it.title || 'Untitled'}&rdquo;
-                        </span>{' '}
-                        <span className="text-muted-foreground">— {it.typeLabel}</span>
-                      </p>
-                      <div className="text-muted-foreground mt-1 flex flex-wrap items-center gap-2 text-[11px]">
-                        <span
-                          className={`inline-flex items-center rounded px-1.5 py-0.5 text-[10px] font-medium ${it.statusInfo.cls}`}
-                        >
-                          {it.statusInfo.label}
-                        </span>
-                        <span className="max-w-[120px] truncate">{it.author}</span>
-                        <span aria-hidden>·</span>
-                        <span>{it.relTime}</span>
+                <li key={it.id}>
+                  <button
+                    type="button"
+                    onClick={() => nav(it.editPath)}
+                    className="hover:bg-accent/50 focus-visible:bg-accent/50 w-full cursor-pointer px-4 py-3 text-left transition-colors"
+                  >
+                    <div className="flex min-w-0 items-start gap-3">
+                      <div
+                        className="mt-0.5 flex h-7 w-7 shrink-0 items-center justify-center rounded-full text-[11px] font-bold text-white"
+                        style={{ background: it.avatar.color }}
+                        aria-hidden
+                      >
+                        {it.avatar.initials}
+                      </div>
+                      <div className="min-w-0 flex-1">
+                        <p className="text-foreground truncate text-sm leading-snug">
+                          <span className="font-semibold">
+                            &ldquo;{it.title || 'Untitled'}&rdquo;
+                          </span>{' '}
+                          <span className="text-muted-foreground">— {it.typeLabel}</span>
+                        </p>
+                        <div className="text-muted-foreground mt-1 flex flex-wrap items-center gap-2 text-[11px]">
+                          <span
+                            className={`inline-flex items-center rounded px-1.5 py-0.5 text-[10px] font-medium ${it.statusInfo.cls}`}
+                          >
+                            {it.statusInfo.label}
+                          </span>
+                          <span className="max-w-[120px] truncate">{it.author}</span>
+                          <span aria-hidden>·</span>
+                          <span>{it.relTime}</span>
+                        </div>
                       </div>
                     </div>
-                  </div>
+                  </button>
                 </li>
               ))}
             </ul>
@@ -679,7 +728,7 @@ export function Dashboard({ config, session, onNavigate }: DashboardProps) {
                   // link to the first scheduled item — that's where authors
                   // typically need to land to reschedule or cancel.
                   const first = publishQueue[0]
-                  if (first) nav(`/${first.collection}/${first.id}`)
+                  if (first) nav(first.editPath)
                 }}
               >
                 Manage
@@ -695,21 +744,23 @@ export function Dashboard({ config, session, onNavigate }: DashboardProps) {
             ) : (
               <ul role="list" className="divide-border divide-y">
                 {publishQueue.map((q) => (
-                  <li
-                    key={q.id}
-                    className="hover:bg-accent/50 flex min-w-0 cursor-pointer items-center gap-2.5 px-4 py-2.5 transition-colors"
-                    onClick={() => nav(`/${q.collection}/${q.id}`)}
-                  >
-                    <span className="h-2 w-2 shrink-0 rounded-full bg-amber-500" aria-hidden />
-                    <div className="min-w-0 flex-1">
-                      <p className="text-foreground truncate text-sm font-medium">{q.title}</p>
-                      <p className="text-muted-foreground truncate text-[11px]">
-                        {q.date} · {q.author}
-                      </p>
-                    </div>
-                    <span className="border-border bg-background text-muted-foreground shrink-0 rounded border px-1.5 py-0.5 text-[10px] capitalize">
-                      {q.type}
-                    </span>
+                  <li key={q.id}>
+                    <button
+                      type="button"
+                      onClick={() => nav(q.editPath)}
+                      className="hover:bg-accent/50 focus-visible:bg-accent/50 flex w-full min-w-0 cursor-pointer items-center gap-2.5 px-4 py-2.5 text-left transition-colors"
+                    >
+                      <span className="h-2 w-2 shrink-0 rounded-full bg-amber-500" aria-hidden />
+                      <div className="min-w-0 flex-1">
+                        <p className="text-foreground truncate text-sm font-medium">{q.title}</p>
+                        <p className="text-muted-foreground truncate text-[11px]">
+                          {q.date} · {q.author}
+                        </p>
+                      </div>
+                      <span className="border-border bg-background text-muted-foreground shrink-0 rounded border px-1.5 py-0.5 text-[10px] capitalize">
+                        {q.type}
+                      </span>
+                    </button>
                   </li>
                 ))}
               </ul>
@@ -774,36 +825,38 @@ export function Dashboard({ config, session, onNavigate }: DashboardProps) {
             ) : (
               <ul role="list" className="divide-border divide-y">
                 {contentHealth.issues.map((iss, i) => (
-                  <li
-                    key={i}
-                    className="hover:bg-accent/50 flex cursor-pointer items-center gap-2.5 px-4 py-2 transition-colors"
-                    onClick={() => nav('/seo')}
-                  >
-                    <span
-                      className={`h-1.5 w-1.5 shrink-0 rounded-full ${
-                        iss.tone === 'err'
-                          ? 'bg-red-500'
-                          : iss.tone === 'warn'
-                            ? 'bg-amber-500'
-                            : 'bg-muted-foreground'
-                      }`}
-                      aria-hidden
-                    />
-                    <span className="text-muted-foreground flex-1 truncate text-xs">
-                      {iss.label}
-                    </span>
-                    <span
-                      className={`shrink-0 text-sm font-semibold ${
-                        iss.tone === 'err'
-                          ? 'text-red-600 dark:text-red-400'
-                          : iss.tone === 'warn'
-                            ? 'text-amber-600 dark:text-amber-400'
-                            : 'text-muted-foreground'
-                      }`}
+                  <li key={i}>
+                    <button
+                      type="button"
+                      onClick={() => nav('/seo')}
+                      className="hover:bg-accent/50 focus-visible:bg-accent/50 flex w-full items-center gap-2.5 px-4 py-2 text-left transition-colors"
                     >
-                      {iss.count}
-                    </span>
-                    <ChevronRight className="text-muted-foreground/60 h-3.5 w-3.5 shrink-0" />
+                      <span
+                        className={`h-1.5 w-1.5 shrink-0 rounded-full ${
+                          iss.tone === 'err'
+                            ? 'bg-red-500'
+                            : iss.tone === 'warn'
+                              ? 'bg-amber-500'
+                              : 'bg-muted-foreground'
+                        }`}
+                        aria-hidden
+                      />
+                      <span className="text-muted-foreground flex-1 truncate text-xs">
+                        {iss.label}
+                      </span>
+                      <span
+                        className={`shrink-0 text-sm font-semibold ${
+                          iss.tone === 'err'
+                            ? 'text-red-600 dark:text-red-400'
+                            : iss.tone === 'warn'
+                              ? 'text-amber-600 dark:text-amber-400'
+                              : 'text-muted-foreground'
+                        }`}
+                      >
+                        {iss.count}
+                      </span>
+                      <ChevronRight className="text-muted-foreground/60 h-3.5 w-3.5 shrink-0" />
+                    </button>
                   </li>
                 ))}
               </ul>