@actuate-media/cms-admin 0.18.0 → 0.20.0

package/src/components/seo/SeoIssueFixDrawer.tsx

@@ -0,0 +1,244 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { Sparkles, ArrowRight, ExternalLink, Image as ImageIcon, Gauge } from 'lucide-react'
+import { toast } from 'sonner'
+import {
+  fetchSeoIssue,
+  resolveSeoIssue,
+  ignoreSeoIssue,
+  reopenSeoIssue,
+  explainSeoIssue,
+  type SeoIssue,
+} from '../../lib/seo-service.js'
+import { Drawer } from './Drawer.js'
+import { SeoLoading, SeoErrorState, severityMeta, btnPrimary, btnSecondary } from './primitives.js'
+
+/** Map a fix action to a destination route within the admin. */
+function fixRoute(issue: SeoIssue): { label: string; path: string; icon: React.ReactNode } | null {
+  const ent = issue.entityType
+  const id = issue.entityId
+  switch (issue.fixActionType) {
+    case 'edit-metadata':
+    case 'edit-canonical':
+    case 'edit-og':
+    case 'edit-schema':
+      if (ent && id) {
+        return {
+          label: 'Edit content SEO',
+          path: `/seo?tab=content&entityType=${ent}&entityId=${encodeURIComponent(id)}`,
+          icon: <ArrowRight className="h-4 w-4" aria-hidden />,
+        }
+      }
+      return null
+    case 'fix-broken-link':
+    case 'create-redirect':
+      return {
+        label: 'Open redirects',
+        path: '/seo?tab=redirects',
+        icon: <ArrowRight className="h-4 w-4" aria-hidden />,
+      }
+    case 'optimize-media':
+      return {
+        label: 'Open Media Center',
+        path: '/media',
+        icon: <ImageIcon className="h-4 w-4" aria-hidden />,
+      }
+    case 'improve-speed':
+      return {
+        label: 'Technical settings',
+        path: '/seo?tab=technical',
+        icon: <Gauge className="h-4 w-4" aria-hidden />,
+      }
+    default:
+      return null
+  }
+}
+
+export function SeoIssueFixDrawer({
+  open,
+  onOpenChange,
+  issueId,
+  onChanged,
+  onNavigate,
+}: {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  issueId: string | null
+  onChanged?: () => void
+  onNavigate?: (path: string) => void
+}) {
+  const [issue, setIssue] = useState<SeoIssue | null>(null)
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const [busy, setBusy] = useState(false)
+  const [explanation, setExplanation] = useState<string | null>(null)
+  const [explaining, setExplaining] = useState(false)
+
+  useEffect(() => {
+    if (!open || !issueId) return
+    let alive = true
+    setLoading(true)
+    setError(null)
+    setExplanation(null)
+    fetchSeoIssue(issueId)
+      .then((i) => {
+        if (!alive) return
+        if (!i) setError('Issue not found.')
+        else setIssue(i)
+      })
+      .catch((e) => alive && setError(e instanceof Error ? e.message : 'Failed to load'))
+      .finally(() => alive && setLoading(false))
+    return () => {
+      alive = false
+    }
+  }, [open, issueId])
+
+  async function mutate(fn: (id: string) => Promise<{ error?: string }>, successMsg: string) {
+    if (!issue) return
+    setBusy(true)
+    const res = await fn(issue.id)
+    setBusy(false)
+    if (res.error) return toast.error(res.error)
+    toast.success(successMsg)
+    onOpenChange(false)
+    onChanged?.()
+  }
+
+  async function handleExplain() {
+    if (!issue) return
+    setExplaining(true)
+    const res = await explainSeoIssue(issue.id)
+    setExplaining(false)
+    if (res.unavailable) {
+      toast.error('AI is not configured.')
+      return
+    }
+    setExplanation(res.text ?? 'No explanation available.')
+  }
+
+  const route = issue ? fixRoute(issue) : null
+
+  return (
+    <Drawer
+      open={open}
+      onOpenChange={onOpenChange}
+      title="Issue detail"
+      width="max-w-lg"
+      footer={
+        issue ? (
+          <>
+            {issue.status === 'ignored' ? (
+              <button
+                className={btnSecondary}
+                onClick={() => mutate(reopenSeoIssue, 'Issue reopened.')}
+                disabled={busy}
+              >
+                Reopen
+              </button>
+            ) : (
+              <button
+                className={btnSecondary}
+                onClick={() => mutate(ignoreSeoIssue, 'Issue ignored.')}
+                disabled={busy}
+              >
+                Ignore
+              </button>
+            )}
+            {route && onNavigate ? (
+              <button
+                className={btnPrimary}
+                onClick={() => {
+                  onNavigate(route.path)
+                  onOpenChange(false)
+                }}
+              >
+                {route.icon}
+                {route.label}
+              </button>
+            ) : (
+              <button
+                className={btnPrimary}
+                onClick={() => mutate(resolveSeoIssue, 'Issue resolved.')}
+                disabled={busy}
+              >
+                Mark resolved
+              </button>
+            )}
+          </>
+        ) : null
+      }
+    >
+      {loading ? (
+        <SeoLoading />
+      ) : error ? (
+        <SeoErrorState message={error} />
+      ) : issue ? (
+        <div className="space-y-4">
+          {(() => {
+            const meta = severityMeta(issue.severity)
+            return (
+              <span
+                className={`inline-flex items-center gap-1.5 rounded-full px-2.5 py-0.5 text-xs font-medium ${meta.bg} ${meta.text}`}
+              >
+                <span className={`h-1.5 w-1.5 rounded-full ${meta.dot}`} aria-hidden />
+                {meta.label} · {issue.category}
+              </span>
+            )
+          })()}
+
+          <div>
+            <h3 className="text-foreground text-base font-medium">{issue.title}</h3>
+            {issue.entityTitle && (
+              <p className="text-muted-foreground mt-0.5 text-sm">{issue.entityTitle}</p>
+            )}
+          </div>
+
+          {issue.url && (
+            <a
+              href={issue.url}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-primary inline-flex items-center gap-1 text-sm hover:underline"
+            >
+              {issue.url}
+              <ExternalLink className="h-3.5 w-3.5" aria-hidden />
+            </a>
+          )}
+
+          {issue.description && <p className="text-foreground text-sm">{issue.description}</p>}
+
+          {issue.impact && (
+            <div className="border-border rounded-md border p-3">
+              <p className="text-muted-foreground text-xs font-medium tracking-wide uppercase">
+                Impact
+              </p>
+              <p className="text-foreground mt-1 text-sm">{issue.impact}</p>
+            </div>
+          )}
+
+          {issue.recommendation && (
+            <div className="border-border rounded-md border p-3">
+              <p className="text-muted-foreground text-xs font-medium tracking-wide uppercase">
+                Recommendation
+              </p>
+              <p className="text-foreground mt-1 text-sm">{issue.recommendation}</p>
+            </div>
+          )}
+
+          <div className="border-border rounded-md border p-3">
+            <button
+              onClick={handleExplain}
+              disabled={explaining}
+              className="text-primary focus-visible:ring-ring inline-flex items-center gap-1.5 text-sm font-medium focus-visible:ring-2 focus-visible:outline-none disabled:opacity-60"
+            >
+              <Sparkles className={`h-4 w-4 ${explaining ? 'animate-pulse' : ''}`} aria-hidden />
+              {explaining ? 'Asking AI…' : 'Explain with AI'}
+            </button>
+            {explanation && <p className="text-foreground mt-2 text-sm">{explanation}</p>}
+          </div>
+        </div>
+      ) : null}
+    </Drawer>
+  )
+}

package/src/components/seo/primitives.tsx

@@ -0,0 +1,237 @@
+'use client'
+
+/**
+ * Shared SEO UI primitives — token-only, accessible building blocks used across
+ * the five SEO tabs. No raw palette colours: status uses the theme's
+ * success / warning / destructive / muted tokens.
+ */
+import type { ReactNode } from 'react'
+import { AlertTriangle, Loader2 } from 'lucide-react'
+import type { SeoGrade, SeoSeverity } from '../../lib/seo-service.js'
+
+// ─── Grade + severity styling ────────────────────────────────────────
+
+export interface GradeMeta {
+  label: string
+  text: string
+  bg: string
+  dot: string
+}
+
+export function gradeMeta(grade: SeoGrade): GradeMeta {
+  switch (grade) {
+    case 'good':
+      return { label: 'Good', text: 'text-success', bg: 'bg-success/10', dot: 'bg-success' }
+    case 'fair':
+      return { label: 'Fair', text: 'text-warning', bg: 'bg-warning/10', dot: 'bg-warning' }
+    case 'poor':
+      return {
+        label: 'Poor',
+        text: 'text-destructive',
+        bg: 'bg-destructive/10',
+        dot: 'bg-destructive',
+      }
+    default:
+      return {
+        label: 'Critical',
+        text: 'text-destructive',
+        bg: 'bg-destructive/15',
+        dot: 'bg-destructive',
+      }
+  }
+}
+
+/** Grade band from a numeric 0-100 score. */
+export function gradeFromScore(score: number): SeoGrade {
+  if (score >= 80) return 'good'
+  if (score >= 60) return 'fair'
+  if (score >= 1) return 'poor'
+  return 'critical'
+}
+
+export function severityMeta(severity: SeoSeverity): GradeMeta {
+  switch (severity) {
+    case 'critical':
+      return {
+        label: 'Critical',
+        text: 'text-destructive',
+        bg: 'bg-destructive/10',
+        dot: 'bg-destructive',
+      }
+    case 'warning':
+      return { label: 'Warning', text: 'text-warning', bg: 'bg-warning/10', dot: 'bg-warning' }
+    default:
+      return {
+        label: 'Info',
+        text: 'text-muted-foreground',
+        bg: 'bg-muted',
+        dot: 'bg-muted-foreground',
+      }
+  }
+}
+
+// ─── Badges + bars ───────────────────────────────────────────────────
+
+export function SeoStatusBadge({
+  label,
+  tone,
+}: {
+  label: string
+  tone: 'good' | 'fair' | 'poor' | 'critical' | 'neutral'
+}) {
+  const cls =
+    tone === 'good'
+      ? 'bg-success/10 text-success'
+      : tone === 'fair'
+        ? 'bg-warning/10 text-warning'
+        : tone === 'poor' || tone === 'critical'
+          ? 'bg-destructive/10 text-destructive'
+          : 'bg-muted text-muted-foreground'
+  return (
+    <span
+      className={`inline-flex items-center gap-1.5 rounded-full px-2.5 py-0.5 text-xs font-medium ${cls}`}
+    >
+      <span
+        className={`h-1.5 w-1.5 rounded-full ${
+          tone === 'good'
+            ? 'bg-success'
+            : tone === 'fair'
+              ? 'bg-warning'
+              : tone === 'neutral'
+                ? 'bg-muted-foreground'
+                : 'bg-destructive'
+        }`}
+        aria-hidden
+      />
+      {label}
+    </span>
+  )
+}
+
+/** A horizontal score bar (0-100), coloured by grade. */
+export function SeoScoreBar({ score, className = '' }: { score: number; className?: string }) {
+  const grade = gradeFromScore(score)
+  const fill = grade === 'good' ? 'bg-success' : grade === 'fair' ? 'bg-warning' : 'bg-destructive'
+  return (
+    <div
+      className={`bg-muted h-2 w-full overflow-hidden rounded-full ${className}`}
+      role="progressbar"
+      aria-valuenow={score}
+      aria-valuemin={0}
+      aria-valuemax={100}
+    >
+      <div
+        className={`h-full rounded-full transition-[width] duration-300 motion-reduce:transition-none ${fill}`}
+        style={{ width: `${Math.max(0, Math.min(100, score))}%` }}
+      />
+    </div>
+  )
+}
+
+export function ScorePill({ score }: { score: number }) {
+  const meta = gradeMeta(gradeFromScore(score))
+  return (
+    <span
+      className={`inline-flex items-center gap-1.5 rounded-full px-2.5 py-0.5 text-xs font-medium ${meta.bg} ${meta.text}`}
+    >
+      <span className={`h-1.5 w-1.5 rounded-full ${meta.dot}`} aria-hidden />
+      {score}
+    </span>
+  )
+}
+
+// ─── Layout cards + states ───────────────────────────────────────────
+
+export function SectionCard({
+  title,
+  description,
+  action,
+  children,
+  className = '',
+}: {
+  title?: string
+  description?: string
+  action?: ReactNode
+  children: ReactNode
+  className?: string
+}) {
+  return (
+    <section className={`border-border bg-card rounded-lg border ${className}`}>
+      {(title || action) && (
+        <header className="border-border flex items-center justify-between gap-3 border-b px-4 py-3">
+          <div className="min-w-0">
+            {title && <h3 className="text-foreground text-base font-medium">{title}</h3>}
+            {description && <p className="text-muted-foreground mt-0.5 text-sm">{description}</p>}
+          </div>
+          {action}
+        </header>
+      )}
+      <div className="p-4">{children}</div>
+    </section>
+  )
+}
+
+export function SeoLoading({ label = 'Loading…' }: { label?: string }) {
+  return (
+    <div className="flex h-64 items-center justify-center" role="status" aria-live="polite">
+      <Loader2 className="text-muted-foreground h-6 w-6 animate-spin" aria-hidden />
+      <span className="sr-only">{label}</span>
+    </div>
+  )
+}
+
+export function SeoEmptyState({
+  icon,
+  title,
+  description,
+  action,
+}: {
+  icon?: ReactNode
+  title: string
+  description?: string
+  action?: ReactNode
+}) {
+  return (
+    <div className="border-border flex flex-col items-center justify-center rounded-lg border border-dashed px-6 py-12 text-center">
+      {icon && (
+        <div className="text-muted-foreground mb-3" aria-hidden>
+          {icon}
+        </div>
+      )}
+      <h3 className="text-foreground text-base font-medium">{title}</h3>
+      {description && <p className="text-muted-foreground mt-1 max-w-md text-sm">{description}</p>}
+      {action && <div className="mt-4">{action}</div>}
+    </div>
+  )
+}
+
+export function SeoErrorState({ message, onRetry }: { message: string; onRetry?: () => void }) {
+  return (
+    <div
+      className="border-destructive/30 bg-destructive/5 flex items-center gap-3 rounded-lg border p-3"
+      role="alert"
+    >
+      <AlertTriangle className="text-destructive h-5 w-5 shrink-0" aria-hidden />
+      <span className="text-destructive flex-1 text-sm">{message}</span>
+      {onRetry && (
+        <button
+          onClick={onRetry}
+          className="border-border text-foreground hover:bg-accent rounded-md border px-3 py-1 text-sm transition-colors"
+        >
+          Retry
+        </button>
+      )}
+    </div>
+  )
+}
+
+// ─── Button helpers (token-only) ─────────────────────────────────────
+
+export const btnPrimary =
+  'inline-flex items-center justify-center gap-2 rounded-md bg-primary px-4 py-2 text-base font-medium text-primary-foreground transition-colors hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-60'
+
+export const btnSecondary =
+  'inline-flex items-center justify-center gap-2 rounded-md border border-border bg-card px-4 py-2 text-base font-medium text-foreground transition-colors hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-60'
+
+export const btnGhostIcon =
+  'inline-flex items-center justify-center rounded-md p-2 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring'

package/src/index.ts

@@ -37,9 +37,7 @@ export type {
 } from './layout/primitives/index.js'
 
 export { Dashboard } from './views/Dashboard.js'
-export { Posts } from './views/Posts.js'
 export { Pages } from './views/Pages.js'
-export { PostEditor } from './views/PostEditor.js'
 export { PageEditor } from './views/PageEditor.js'
 export { MediaBrowser } from './views/MediaBrowser.js'
 export { Forms } from './views/Forms.js'

package/src/layout/Sidebar.tsx

@@ -233,6 +233,9 @@ interface NavRenderContext {
 }
 
 function isPathActive(currentPath: string, itemPath: string): boolean {
+  // Ignore query string / hash so state-bearing routes (e.g. `/seo?tab=audit`)
+  // still highlight their nav item.
+  currentPath = currentPath.split('?')[0]!.split('#')[0]!
   if (itemPath === '/') return currentPath === '/'
 
   // Special case: /posts is a prefix of /posts/types — without this

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),
   }
 }