@actuate-media/cms-admin 0.18.0 → 0.20.0

package/src/components/seo/RedirectEditorDrawer.tsx

@@ -0,0 +1,235 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { toast } from 'sonner'
+import {
+  createRedirectRule,
+  updateRedirectRule,
+  type RedirectRule,
+  type RedirectRulePayload,
+  type RedirectStatusCode,
+} from '../../lib/seo-service.js'
+import { Drawer } from './Drawer.js'
+import { btnPrimary, btnSecondary } from './primitives.js'
+
+const STATUS_CODES: { value: RedirectStatusCode; label: string }[] = [
+  { value: 301, label: '301 — Permanent' },
+  { value: 302, label: '302 — Temporary' },
+  { value: 307, label: '307 — Temporary (preserve method)' },
+  { value: 308, label: '308 — Permanent (preserve method)' },
+  { value: 410, label: '410 — Gone (no destination)' },
+]
+
+const inputCls =
+  'w-full rounded-md border border-border bg-input-background px-3 py-2 text-base text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring'
+
+function normalizePath(p: string): string {
+  const t = p.trim()
+  if (!t) return ''
+  if (/^https?:\/\//i.test(t)) return t
+  return t.startsWith('/') ? t : `/${t}`
+}
+
+export function RedirectEditorDrawer({
+  open,
+  onOpenChange,
+  rule,
+  onSaved,
+}: {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  /** null = create mode */
+  rule: RedirectRule | null
+  onSaved?: () => void
+}) {
+  const [form, setForm] = useState<RedirectRulePayload>({
+    type: 301,
+    fromPath: '',
+    toPath: '',
+    enabled: true,
+    preserveQuery: false,
+    notes: '',
+  })
+  const [saving, setSaving] = useState(false)
+  const [clientError, setClientError] = useState<string | null>(null)
+
+  useEffect(() => {
+    if (!open) return
+    if (rule) {
+      setForm({
+        type: rule.type,
+        fromPath: rule.fromPath,
+        toPath: rule.toPath,
+        enabled: rule.enabled,
+        preserveQuery: rule.preserveQuery,
+        notes: rule.notes ?? '',
+      })
+    } else {
+      setForm({
+        type: 301,
+        fromPath: '',
+        toPath: '',
+        enabled: true,
+        preserveQuery: false,
+        notes: '',
+      })
+    }
+    setClientError(null)
+  }, [open, rule])
+
+  const isGone = form.type === 410
+  const update = (patch: Partial<RedirectRulePayload>) => setForm((f) => ({ ...f, ...patch }))
+
+  async function handleSave() {
+    const fromPath = normalizePath(form.fromPath)
+    const toPath = isGone ? '' : normalizePath(form.toPath)
+    if (!fromPath) {
+      setClientError('Source path is required.')
+      return
+    }
+    if (!isGone && !toPath) {
+      setClientError('Destination is required for redirect status codes.')
+      return
+    }
+    if (!isGone && fromPath === toPath) {
+      setClientError('Source and destination cannot be identical (would create a loop).')
+      return
+    }
+    setClientError(null)
+    setSaving(true)
+    const payload: RedirectRulePayload = { ...form, fromPath, toPath }
+    const res = rule
+      ? await updateRedirectRule(rule.id, payload)
+      : await createRedirectRule(payload)
+    setSaving(false)
+    if (res.error) {
+      toast.error(res.error)
+      return
+    }
+    toast.success(rule ? 'Redirect updated.' : 'Redirect created.')
+    onOpenChange(false)
+    onSaved?.()
+  }
+
+  return (
+    <Drawer
+      open={open}
+      onOpenChange={onOpenChange}
+      title={rule ? 'Edit redirect' : 'New redirect'}
+      width="max-w-lg"
+      footer={
+        <>
+          <button className={btnSecondary} onClick={() => onOpenChange(false)} disabled={saving}>
+            Cancel
+          </button>
+          <button className={btnPrimary} onClick={handleSave} disabled={saving}>
+            {saving ? 'Saving…' : rule ? 'Save changes' : 'Create redirect'}
+          </button>
+        </>
+      }
+    >
+      <div className="space-y-4">
+        {clientError && (
+          <p
+            className="text-destructive bg-destructive/10 rounded-md px-3 py-2 text-sm"
+            role="alert"
+          >
+            {clientError}
+          </p>
+        )}
+        <div className="space-y-1.5">
+          <label className="text-foreground text-sm font-medium" htmlFor="redir-type">
+            Status code
+          </label>
+          <select
+            id="redir-type"
+            className={inputCls}
+            value={form.type}
+            onChange={(e) => update({ type: Number(e.target.value) as RedirectStatusCode })}
+          >
+            {STATUS_CODES.map((s) => (
+              <option key={s.value} value={s.value}>
+                {s.label}
+              </option>
+            ))}
+          </select>
+        </div>
+
+        <div className="space-y-1.5">
+          <label className="text-foreground text-sm font-medium" htmlFor="redir-from">
+            Source path
+          </label>
+          <input
+            id="redir-from"
+            className={inputCls}
+            value={form.fromPath}
+            onChange={(e) => update({ fromPath: e.target.value })}
+            placeholder="/old-path"
+          />
+        </div>
+
+        {!isGone && (
+          <div className="space-y-1.5">
+            <label className="text-foreground text-sm font-medium" htmlFor="redir-to">
+              Destination
+            </label>
+            <input
+              id="redir-to"
+              className={inputCls}
+              value={form.toPath}
+              onChange={(e) => update({ toPath: e.target.value })}
+              placeholder="/new-path or https://example.com/page"
+            />
+          </div>
+        )}
+
+        <div className="space-y-1.5">
+          <label className="text-foreground text-sm font-medium" htmlFor="redir-notes">
+            Notes <span className="text-muted-foreground font-normal">(optional)</span>
+          </label>
+          <input
+            id="redir-notes"
+            className={inputCls}
+            value={form.notes ?? ''}
+            onChange={(e) => update({ notes: e.target.value })}
+            placeholder="Why this redirect exists"
+          />
+        </div>
+
+        <div className="border-border space-y-3 rounded-lg border p-4">
+          <label className="flex items-center justify-between gap-3">
+            <span className="text-foreground text-sm font-medium">Enabled</span>
+            <input
+              type="checkbox"
+              role="switch"
+              aria-checked={!!form.enabled}
+              checked={!!form.enabled}
+              onChange={(e) => update({ enabled: e.target.checked })}
+              className="accent-primary h-4 w-4"
+            />
+          </label>
+          {!isGone && (
+            <label className="flex items-center justify-between gap-3">
+              <span className="min-w-0">
+                <span className="text-foreground block text-sm font-medium">
+                  Preserve query string
+                </span>
+                <span className="text-muted-foreground block text-sm">
+                  Append the original query params to the destination.
+                </span>
+              </span>
+              <input
+                type="checkbox"
+                role="switch"
+                aria-checked={!!form.preserveQuery}
+                checked={!!form.preserveQuery}
+                onChange={(e) => update({ preserveQuery: e.target.checked })}
+                className="accent-primary h-4 w-4 shrink-0"
+              />
+            </label>
+          )}
+        </div>
+      </div>
+    </Drawer>
+  )
+}

package/src/components/seo/SeoCopilotDrawer.tsx

@@ -0,0 +1,76 @@
+'use client'
+
+import { useState } from 'react'
+import { Sparkles, Bot } from 'lucide-react'
+import { toast } from 'sonner'
+import { summarizeSeoAudit } from '../../lib/seo-service.js'
+import { Drawer } from './Drawer.js'
+import { SeoLoading, SeoEmptyState, btnPrimary } from './primitives.js'
+
+/**
+ * AI Copilot drawer — summarizes the current SEO state and surfaces the top
+ * priorities. Degrades gracefully when AI is unconfigured. All AI text is
+ * advisory; the editor takes action via the tabs/drawers.
+ */
+export function SeoCopilotDrawer({
+  open,
+  onOpenChange,
+}: {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+}) {
+  const [loading, setLoading] = useState(false)
+  const [summary, setSummary] = useState<string | null>(null)
+  const [unavailable, setUnavailable] = useState(false)
+
+  async function handleSummarize() {
+    setLoading(true)
+    setUnavailable(false)
+    const res = await summarizeSeoAudit()
+    setLoading(false)
+    if (res.unavailable) {
+      setUnavailable(true)
+      return
+    }
+    if (res.text) setSummary(res.text)
+    else toast.error('No summary was returned.')
+  }
+
+  return (
+    <Drawer
+      open={open}
+      onOpenChange={onOpenChange}
+      title="SEO Copilot"
+      description="AI-assisted analysis of your site's SEO health"
+      width="max-w-md"
+      footer={
+        <button className={btnPrimary} onClick={handleSummarize} disabled={loading}>
+          <Sparkles className={`h-4 w-4 ${loading ? 'animate-pulse' : ''}`} aria-hidden />
+          {loading ? 'Analyzing…' : summary ? 'Re-analyze' : 'Analyze my SEO'}
+        </button>
+      }
+    >
+      {loading ? (
+        <SeoLoading label="Analyzing your SEO…" />
+      ) : unavailable ? (
+        <SeoEmptyState
+          icon={<Bot size={24} />}
+          title="AI is not configured"
+          description="Install and configure an AI provider (plugin-ai) to enable the SEO Copilot."
+        />
+      ) : summary ? (
+        <div className="text-foreground space-y-3 text-sm leading-relaxed">
+          {summary.split(/\n+/).map((para, i) => (
+            <p key={i}>{para}</p>
+          ))}
+        </div>
+      ) : (
+        <SeoEmptyState
+          icon={<Bot size={24} />}
+          title="Ask the Copilot"
+          description="Get an AI summary of your open issues and the top priorities to fix first."
+        />
+      )}
+    </Drawer>
+  )
+}

package/src/components/seo/SeoEditorDrawer.tsx

@@ -0,0 +1,347 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { Sparkles, Check } from 'lucide-react'
+import { toast } from 'sonner'
+import {
+  fetchSeoContentRecord,
+  updateSeoFields,
+  generateSeoField,
+  type SeoContentRecord,
+  type SeoFieldPayload,
+} from '../../lib/seo-service.js'
+import { Drawer } from './Drawer.js'
+import { SeoLoading, SeoErrorState, btnPrimary, btnSecondary, gradeMeta } from './primitives.js'
+
+const META_TITLE_MAX = 60
+const META_DESC_MAX = 160
+
+type AiField = 'metaTitle' | 'metaDescription' | 'ogTitle' | 'ogDescription' | 'focusKeyword'
+
+function CharCount({ value, max }: { value: string; max: number }) {
+  const over = value.length > max
+  return (
+    <span className={`text-xs ${over ? 'text-destructive' : 'text-muted-foreground'}`}>
+      {value.length}/{max}
+    </span>
+  )
+}
+
+function Field({
+  label,
+  children,
+  hint,
+}: {
+  label: string
+  children: React.ReactNode
+  hint?: React.ReactNode
+}) {
+  return (
+    <div className="space-y-1.5">
+      <div className="flex items-center justify-between">
+        <label className="text-foreground text-sm font-medium">{label}</label>
+        {hint}
+      </div>
+      {children}
+    </div>
+  )
+}
+
+const inputCls =
+  'w-full rounded-md border border-border bg-input-background px-3 py-2 text-base text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring'
+
+export function SeoEditorDrawer({
+  open,
+  onOpenChange,
+  entityType,
+  entityId,
+  onSaved,
+}: {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  entityType: string | null
+  entityId: string | null
+  onSaved?: () => void
+}) {
+  const [record, setRecord] = useState<SeoContentRecord | null>(null)
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const [saving, setSaving] = useState(false)
+  const [aiBusy, setAiBusy] = useState<AiField | null>(null)
+  const [form, setForm] = useState<SeoFieldPayload>({})
+
+  useEffect(() => {
+    if (!open || !entityType || !entityId) return
+    let alive = true
+    setLoading(true)
+    setError(null)
+    fetchSeoContentRecord(entityType, entityId)
+      .then((rec) => {
+        if (!alive) return
+        if (!rec) {
+          setError('Could not load this record.')
+          return
+        }
+        setRecord(rec)
+        setForm({
+          metaTitle: rec.metaTitle ?? '',
+          metaDescription: rec.metaDescription ?? '',
+          canonicalUrl: rec.canonicalUrl ?? '',
+          focusKeyword: rec.focusKeyword ?? '',
+          ogTitle: rec.ogTitle ?? '',
+          ogDescription: rec.ogDescription ?? '',
+          noindex: rec.noindex,
+          nofollow: rec.nofollow,
+        })
+      })
+      .catch((e) => alive && setError(e instanceof Error ? e.message : 'Failed to load'))
+      .finally(() => alive && setLoading(false))
+    return () => {
+      alive = false
+    }
+  }, [open, entityType, entityId])
+
+  const update = (patch: Partial<SeoFieldPayload>) => setForm((f) => ({ ...f, ...patch }))
+
+  async function handleAiGenerate(field: AiField) {
+    if (!entityType || !entityId) return
+    setAiBusy(field)
+    try {
+      const result = await generateSeoField(field, { entityType, entityId })
+      if (result.unavailable) {
+        toast.error('AI is not configured. Add an AI provider to enable suggestions.')
+        return
+      }
+      if (result.text) {
+        update({ [field]: result.text } as Partial<SeoFieldPayload>)
+        toast.success('AI suggestion applied — review before saving.')
+      } else {
+        toast.error('No suggestion was returned.')
+      }
+    } catch {
+      toast.error('AI request failed.')
+    } finally {
+      setAiBusy(null)
+    }
+  }
+
+  async function handleSave() {
+    if (!entityType || !entityId) return
+    setSaving(true)
+    const res = await updateSeoFields(entityType, entityId, form)
+    setSaving(false)
+    if (res.error) {
+      toast.error(res.error)
+      return
+    }
+    toast.success('SEO fields saved.')
+    onOpenChange(false)
+    onSaved?.()
+  }
+
+  const title = form.metaTitle || record?.title || 'Untitled'
+  const desc = form.metaDescription || 'No meta description set. Search engines may generate one.'
+  const url = record?.url ?? ''
+
+  function aiButton(field: AiField) {
+    return (
+      <button
+        type="button"
+        onClick={() => handleAiGenerate(field)}
+        disabled={aiBusy !== null}
+        className="text-primary hover:bg-accent focus-visible:ring-ring inline-flex items-center gap-1 rounded-md px-2 py-0.5 text-xs font-medium focus-visible:ring-2 focus-visible:outline-none disabled:opacity-60"
+      >
+        <Sparkles
+          className={`h-3.5 w-3.5 ${aiBusy === field ? 'animate-pulse' : ''}`}
+          aria-hidden
+        />
+        {aiBusy === field ? 'Generating…' : 'AI Generate'}
+      </button>
+    )
+  }
+
+  return (
+    <Drawer
+      open={open}
+      onOpenChange={onOpenChange}
+      title="Edit SEO"
+      description={record?.title}
+      footer={
+        <>
+          <button className={btnSecondary} onClick={() => onOpenChange(false)} disabled={saving}>
+            Cancel
+          </button>
+          <button className={btnPrimary} onClick={handleSave} disabled={saving || loading}>
+            {saving ? 'Saving…' : 'Save changes'}
+          </button>
+        </>
+      }
+    >
+      {loading ? (
+        <SeoLoading />
+      ) : error ? (
+        <SeoErrorState message={error} />
+      ) : record ? (
+        <div className="space-y-6">
+          {/* SERP preview */}
+          <div className="border-border rounded-lg border p-4">
+            <p className="text-muted-foreground mb-2 text-xs font-medium tracking-wide uppercase">
+              Google preview
+            </p>
+            <p className="text-success truncate text-sm">{url}</p>
+            <p className="text-primary text-lg leading-snug">{title}</p>
+            <p className="text-muted-foreground line-clamp-2 text-sm">{desc}</p>
+          </div>
+
+          <Field
+            label="Meta title"
+            hint={
+              <span className="flex items-center gap-2">
+                <CharCount value={form.metaTitle ?? ''} max={META_TITLE_MAX} />
+                {aiButton('metaTitle')}
+              </span>
+            }
+          >
+            <input
+              className={inputCls}
+              value={form.metaTitle ?? ''}
+              onChange={(e) => update({ metaTitle: e.target.value })}
+              placeholder="Page title for search results"
+            />
+          </Field>
+
+          <Field
+            label="Meta description"
+            hint={
+              <span className="flex items-center gap-2">
+                <CharCount value={form.metaDescription ?? ''} max={META_DESC_MAX} />
+                {aiButton('metaDescription')}
+              </span>
+            }
+          >
+            <textarea
+              className={`${inputCls} min-h-20 resize-y`}
+              value={form.metaDescription ?? ''}
+              onChange={(e) => update({ metaDescription: e.target.value })}
+              placeholder="Short summary shown under the title in search results"
+            />
+          </Field>
+
+          <Field label="Focus keyword" hint={aiButton('focusKeyword')}>
+            <input
+              className={inputCls}
+              value={form.focusKeyword ?? ''}
+              onChange={(e) => update({ focusKeyword: e.target.value })}
+              placeholder="Primary keyword this page targets"
+            />
+          </Field>
+
+          <Field label="Canonical URL">
+            <input
+              className={inputCls}
+              value={form.canonicalUrl ?? ''}
+              onChange={(e) => update({ canonicalUrl: e.target.value })}
+              placeholder={url || 'https://example.com/page'}
+            />
+          </Field>
+
+          {/* Social preview */}
+          <div className="space-y-4">
+            <p className="text-foreground text-sm font-medium">Social sharing</p>
+            <Field label="Open Graph title" hint={aiButton('ogTitle')}>
+              <input
+                className={inputCls}
+                value={form.ogTitle ?? ''}
+                onChange={(e) => update({ ogTitle: e.target.value })}
+                placeholder={form.metaTitle || 'Title when shared on social media'}
+              />
+            </Field>
+            <Field label="Open Graph description" hint={aiButton('ogDescription')}>
+              <textarea
+                className={`${inputCls} min-h-16 resize-y`}
+                value={form.ogDescription ?? ''}
+                onChange={(e) => update({ ogDescription: e.target.value })}
+                placeholder={form.metaDescription || 'Description when shared on social media'}
+              />
+            </Field>
+            <div className="border-border overflow-hidden rounded-lg border">
+              {record.ogImage ? (
+                // eslint-disable-next-line @next/next/no-img-element
+                <img
+                  src={record.ogImage}
+                  alt={`Social preview for ${record.title}`}
+                  className="bg-muted aspect-[1200/630] w-full object-cover"
+                />
+              ) : (
+                <div className="bg-muted text-muted-foreground flex aspect-[1200/630] w-full items-center justify-center text-sm">
+                  No OG image set
+                </div>
+              )}
+              <div className="p-3">
+                <p className="text-muted-foreground truncate text-xs uppercase">
+                  {url.replace(/^https?:\/\//, '').split('/')[0]}
+                </p>
+                <p className="text-foreground truncate text-sm font-medium">
+                  {form.ogTitle || title}
+                </p>
+                <p className="text-muted-foreground line-clamp-1 text-sm">
+                  {form.ogDescription || desc}
+                </p>
+              </div>
+            </div>
+          </div>
+
+          {/* Indexing toggles */}
+          <div className="border-border space-y-3 rounded-lg border p-4">
+            <label className="flex items-center justify-between gap-3">
+              <span className="min-w-0">
+                <span className="text-foreground block text-sm font-medium">No-index</span>
+                <span className="text-muted-foreground block text-sm">
+                  Hide this page from search engines.
+                </span>
+              </span>
+              <input
+                type="checkbox"
+                role="switch"
+                aria-checked={!!form.noindex}
+                checked={!!form.noindex}
+                onChange={(e) => update({ noindex: e.target.checked })}
+                className="accent-primary h-4 w-4"
+              />
+            </label>
+            <label className="flex items-center justify-between gap-3">
+              <span className="min-w-0">
+                <span className="text-foreground block text-sm font-medium">No-follow</span>
+                <span className="text-muted-foreground block text-sm">
+                  Tell crawlers not to follow links on this page.
+                </span>
+              </span>
+              <input
+                type="checkbox"
+                role="switch"
+                aria-checked={!!form.nofollow}
+                checked={!!form.nofollow}
+                onChange={(e) => update({ nofollow: e.target.checked })}
+                className="accent-primary h-4 w-4"
+              />
+            </label>
+          </div>
+
+          {/* Score summary */}
+          {(() => {
+            const meta = gradeMeta(record.seoGrade)
+            return (
+              <div
+                className={`flex items-center gap-2 rounded-lg px-3 py-2 text-sm ${meta.bg} ${meta.text}`}
+              >
+                <Check className="h-4 w-4" aria-hidden />
+                Current SEO score: <span className="font-medium">{record.seoScore}</span> (
+                {meta.label})
+              </div>
+            )
+          })()}
+        </div>
+      ) : null}
+    </Drawer>
+  )
+}