@actuate-media/cms-admin 0.19.0 → 0.21.0

package/src/views/Settings.tsx

@@ -20,21 +20,36 @@ import {
   RefreshCw,
   GitPullRequest,
   Layers,
+  Users as UsersIcon,
+  KeyRound,
 } from 'lucide-react'
-import { useState, useEffect } from 'react'
+import { useState, useEffect, useCallback, useMemo } from 'react'
 import { toast } from 'sonner'
 import { useApiData } from '../lib/useApiData.js'
 import { cmsApi } from '../lib/api.js'
 import { useTheme } from '../components/ThemeProvider.js'
 import { RelationshipField } from '../fields/RelationshipField.js'
 import { SEOConfigPanel } from '../components/SEOConfigPanel.js'
+import { Users as UsersView } from './Users.js'
+import { ApiKeys as ApiKeysView } from './ApiKeys.js'
 
 export interface SettingsProps {
   onNavigate?: (path: string) => void
   config?: any
+  /** Initial tab when arriving without a `?tab=` query param (e.g. via the
+   * legacy `/users` or `/api-keys` routes). */
+  initialTab?: string
 }
 
-export function Settings({ config, ..._props }: SettingsProps = {}) {
+/** Tabs that drive their own persistence (no global "Save Changes" footer). */
+const SELF_MANAGED_TABS = new Set(['users', 'api-keys'])
+
+function readSettingsTabFromUrl(): string | null {
+  if (typeof window === 'undefined') return null
+  return new URLSearchParams(window.location.search).get('tab')
+}
+
+export function Settings({ config, onNavigate, initialTab = 'general' }: SettingsProps = {}) {
   const { data, loading, error, refetch } = useApiData<any>('/globals/settings')
 
   const [siteTitle, setSiteTitle] = useState('My CMS')
@@ -48,7 +63,7 @@ export function Settings({ config, ..._props }: SettingsProps = {}) {
   const [twoFactorEnabled, setTwoFactorEnabled] = useState(false)
   const [sessionTimeout, setSessionTimeout] = useState(false)
   const [ipWhitelist, setIpWhitelist] = useState(false)
-  const [activeTab, setActiveTab] = useState('general')
+  const [activeTab, setActiveTab] = useState<string>(() => readSettingsTabFromUrl() ?? initialTab)
   const [saving, setSaving] = useState(false)
 
   // Layout defaults
@@ -64,6 +79,50 @@ export function Settings({ config, ..._props }: SettingsProps = {}) {
       : []
   const hasLayoutRegions = layoutRegions.length > 0
 
+  // Valid tab ids, with `layout` only available when the project configures
+  // layout regions. Used to normalise deep links and keep the URL honest.
+  const availableTabs = useMemo(
+    () =>
+      [
+        'general',
+        'appearance',
+        ...(hasLayoutRegions ? ['layout'] : []),
+        'security',
+        'users',
+        'api-keys',
+        'seo',
+        'ai',
+        'updates',
+      ] as const,
+    [hasLayoutRegions],
+  )
+  const normalizeTab = useCallback(
+    (tab: string | null | undefined): string =>
+      tab && (availableTabs as readonly string[]).includes(tab) ? tab : 'general',
+    [availableTabs],
+  )
+
+  // Drive the active tab from the `?tab=` query param so tabs are deep-linkable
+  // and survive browser back/forward (the legacy /users and /api-keys routes
+  // land here via `initialTab`).
+  useEffect(() => {
+    function sync() {
+      setActiveTab(normalizeTab(readSettingsTabFromUrl() ?? initialTab))
+    }
+    sync()
+    window.addEventListener('popstate', sync)
+    return () => window.removeEventListener('popstate', sync)
+  }, [normalizeTab, initialTab])
+
+  const changeTab = useCallback(
+    (tab: string) => {
+      const next = normalizeTab(tab)
+      setActiveTab(next)
+      onNavigate?.(`/settings?tab=${next}`)
+    },
+    [normalizeTab, onNavigate],
+  )
+
   // AI settings
   const [aiProvider, setAiProvider] = useState('anthropic')
   const [aiApiKey, setAiApiKey] = useState('')
@@ -176,7 +235,7 @@ export function Settings({ config, ..._props }: SettingsProps = {}) {
         <p className="text-sm text-gray-600">Manage your CMS configuration</p>
       </div>
 
-      <Tabs.Root value={activeTab} onValueChange={setActiveTab}>
+      <Tabs.Root value={activeTab} onValueChange={changeTab}>
         <Tabs.List className="mb-4 flex gap-1 overflow-x-auto border-b border-gray-200">
           <Tabs.Trigger value="general" className={tabTriggerClass}>
             General
@@ -195,6 +254,18 @@ export function Settings({ config, ..._props }: SettingsProps = {}) {
           <Tabs.Trigger value="security" className={tabTriggerClass}>
             Security
           </Tabs.Trigger>
+          <Tabs.Trigger value="users" className={tabTriggerClass}>
+            <span className="flex items-center gap-1.5">
+              <UsersIcon className="h-4 w-4" />
+              Users
+            </span>
+          </Tabs.Trigger>
+          <Tabs.Trigger value="api-keys" className={tabTriggerClass}>
+            <span className="flex items-center gap-1.5">
+              <KeyRound className="h-4 w-4" />
+              API Keys
+            </span>
+          </Tabs.Trigger>
           <Tabs.Trigger value="seo" className={tabTriggerClass}>
             SEO
           </Tabs.Trigger>
@@ -204,9 +275,6 @@ export function Settings({ config, ..._props }: SettingsProps = {}) {
               AI
             </span>
           </Tabs.Trigger>
-          <Tabs.Trigger value="integrations" className={tabTriggerClass}>
-            Integrations
-          </Tabs.Trigger>
           <Tabs.Trigger value="updates" className={tabTriggerClass}>
             <span className="flex items-center gap-1.5">
               <Download className="h-4 w-4" />
@@ -628,29 +696,12 @@ export function Settings({ config, ..._props }: SettingsProps = {}) {
           </div>
         </Tabs.Content>
 
-        <Tabs.Content value="integrations" className="space-y-4">
-          <div className="rounded-lg border border-gray-200 bg-white p-4">
-            <h3 className="mb-4 text-sm font-semibold text-gray-900">API Keys</h3>
-            <div className="space-y-4">
-              <div>
-                <label className="mb-1 block text-sm font-medium text-gray-700">API Key</label>
-                <div className="flex gap-2">
-                  <input
-                    type="text"
-                    value="•••••••••••••••••••••••••"
-                    readOnly
-                    className="flex-1 rounded-lg border border-gray-300 bg-gray-50 px-3 py-2 text-sm"
-                  />
-                  <button
-                    type="button"
-                    className="rounded-lg border border-gray-300 px-4 py-2 text-sm transition-colors hover:bg-gray-50"
-                  >
-                    Regenerate
-                  </button>
-                </div>
-              </div>
-            </div>
-          </div>
+        <Tabs.Content value="users">
+          <UsersView onNavigate={onNavigate} embedded />
+        </Tabs.Content>
+
+        <Tabs.Content value="api-keys">
+          <ApiKeysView onNavigate={onNavigate} embedded />
         </Tabs.Content>
 
         <Tabs.Content value="updates" className="space-y-4">
@@ -658,16 +709,18 @@ export function Settings({ config, ..._props }: SettingsProps = {}) {
         </Tabs.Content>
       </Tabs.Root>
 
-      <div className="mt-6 flex justify-end">
-        <button
-          type="button"
-          onClick={handleSave}
-          disabled={saving}
-          className="rounded-lg bg-blue-600 px-6 py-2 text-sm text-white transition-colors hover:bg-blue-700 disabled:opacity-50"
-        >
-          {saving ? 'Saving...' : 'Save Changes'}
-        </button>
-      </div>
+      {!SELF_MANAGED_TABS.has(activeTab) && (
+        <div className="mt-6 flex justify-end">
+          <button
+            type="button"
+            onClick={handleSave}
+            disabled={saving}
+            className="rounded-lg bg-blue-600 px-6 py-2 text-sm text-white transition-colors hover:bg-blue-700 disabled:opacity-50"
+          >
+            {saving ? 'Saving...' : 'Save Changes'}
+          </button>
+        </div>
+      )}
     </div>
   )
 }

package/src/views/Users.tsx

@@ -22,9 +22,12 @@ type UserSortKey = 'name' | 'role' | 'status' | 'lastLogin'
 
 export interface UsersProps {
   onNavigate?: (path: string) => void
+  /** When rendered inside the Settings tab shell, drop the page padding and
+   * demote the heading so it reads as a section rather than a second page. */
+  embedded?: boolean
 }
 
-export function Users({ onNavigate }: UsersProps) {
+export function Users({ onNavigate, embedded = false }: UsersProps = {}) {
   const { data, loading, error, refetch } = useApiData<any[]>('/users')
   const [showInviteDialog, setShowInviteDialog] = useState(false)
   const [inviteEmail, setInviteEmail] = useState('')
@@ -98,16 +101,19 @@ export function Users({ onNavigate }: UsersProps) {
     )
   }
 
+  const rootPadding = embedded ? '' : 'p-3 pr-6 sm:p-4 sm:pr-8'
+  const Heading = embedded ? 'h2' : 'h1'
+
   if (loading) {
     return (
-      <div className="flex h-64 items-center justify-center p-3 pr-6 sm:p-4 sm:pr-8">
+      <div className={`flex h-64 items-center justify-center ${rootPadding}`}>
         <Loader2 className="h-6 w-6 animate-spin text-blue-600" />
       </div>
     )
   }
 
   return (
-    <div className="p-3 pr-6 sm:p-4 sm:pr-8">
+    <div className={rootPadding}>
       {error && (
         <div className="mb-4 flex items-center gap-3 rounded-lg border border-red-200 bg-red-50 p-3">
           <AlertTriangle className="h-5 w-5 shrink-0 text-red-600" />
@@ -123,7 +129,7 @@ export function Users({ onNavigate }: UsersProps) {
 
       <div className="mb-4 flex items-center justify-between">
         <div>
-          <h1 className="mb-1 text-2xl font-semibold text-gray-900">Users</h1>
+          <Heading className="mb-1 text-2xl font-semibold text-gray-900">Users</Heading>
           <p className="text-sm text-gray-600">{filteredAndSorted.length} total users</p>
         </div>
         <button

package/src/views/seo/AuditTab.tsx

@@ -0,0 +1,229 @@
+'use client'
+
+import { useMemo, useState } from 'react'
+import { ClipboardCheck, Clock, CheckCircle2 } from 'lucide-react'
+import {
+  fetchSeoIssues,
+  fetchSeoAuditRuns,
+  type SeoIssue,
+  type SeoIssueQuery,
+  type SeoSeverity,
+  type SeoIssueStatus,
+} from '../../lib/seo-service.js'
+import {
+  SectionCard,
+  SeoLoading,
+  SeoEmptyState,
+  SeoErrorState,
+  severityMeta,
+  SeoStatusBadge,
+} from '../../components/seo/primitives.js'
+import { SeoIssueFixDrawer } from '../../components/seo/SeoIssueFixDrawer.js'
+import { useSeoResource } from './useSeoResource.js'
+
+const SEVERITY_FILTERS: { id: SeoSeverity | 'all'; label: string }[] = [
+  { id: 'all', label: 'All' },
+  { id: 'critical', label: 'Critical' },
+  { id: 'warning', label: 'Warnings' },
+  { id: 'info', label: 'Info' },
+]
+
+const STATUS_FILTERS: { id: SeoIssueStatus | 'all'; label: string }[] = [
+  { id: 'open', label: 'Open' },
+  { id: 'recurring', label: 'Recurring' },
+  { id: 'ignored', label: 'Ignored' },
+  { id: 'resolved', label: 'Resolved' },
+  { id: 'all', label: 'All' },
+]
+
+function issueStatusTone(status: SeoIssueStatus) {
+  switch (status) {
+    case 'resolved':
+      return 'good' as const
+    case 'ignored':
+      return 'neutral' as const
+    case 'recurring':
+      return 'fair' as const
+    default:
+      return 'critical' as const
+  }
+}
+
+function AuditSummaryCards({ refetchKey }: { refetchKey: number }) {
+  const { data, loading } = useSeoResource(fetchSeoAuditRuns, [refetchKey])
+  const last = (data ?? [])[0]
+  return (
+    <div className="grid grid-cols-2 gap-4 lg:grid-cols-4">
+      <div className="border-border bg-card rounded-lg border p-4">
+        <p className="text-muted-foreground flex items-center gap-1.5 text-sm">
+          <Clock className="h-3.5 w-3.5" aria-hidden /> Last audit
+        </p>
+        <p className="text-foreground mt-1 text-sm font-medium">
+          {loading ? '…' : last ? new Date(last.startedAt).toLocaleString() : 'Never'}
+        </p>
+      </div>
+      <div className="border-border bg-card rounded-lg border p-4">
+        <p className="text-muted-foreground text-sm">Pages scanned</p>
+        <p className="text-foreground mt-1 text-2xl font-medium tabular-nums">
+          {last?.pagesScanned ?? 0}
+        </p>
+      </div>
+      <div className="border-border bg-card rounded-lg border p-4">
+        <p className="text-muted-foreground text-sm">Issues found</p>
+        <p className="text-foreground mt-1 text-2xl font-medium tabular-nums">
+          {last?.issuesFound ?? 0}
+        </p>
+      </div>
+      <div className="border-border bg-card rounded-lg border p-4">
+        <p className="text-muted-foreground text-sm">Site score</p>
+        <p className="text-foreground mt-1 text-2xl font-medium tabular-nums">
+          {last?.siteScoreAfter ?? '—'}
+        </p>
+      </div>
+    </div>
+  )
+}
+
+export function AuditTab({
+  refetchKey = 0,
+  initialIssueId,
+  onNavigate,
+}: {
+  refetchKey?: number
+  initialIssueId?: string | null
+  onNavigate?: (path: string) => void
+}) {
+  const [severity, setSeverity] = useState<SeoSeverity | 'all'>('all')
+  const [status, setStatus] = useState<SeoIssueStatus | 'all'>('open')
+  const [openIssue, setOpenIssue] = useState<string | null>(initialIssueId ?? null)
+
+  const query: SeoIssueQuery = useMemo(() => ({ severity, status }), [severity, status])
+  const { data, loading, error, refetch } = useSeoResource(
+    () => fetchSeoIssues(query),
+    [severity, status, refetchKey],
+  )
+
+  const issues = data ?? []
+
+  return (
+    <div className="space-y-4">
+      <AuditSummaryCards refetchKey={refetchKey} />
+
+      <SectionCard>
+        <div className="mb-4 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+          <div className="flex flex-wrap gap-1" role="group" aria-label="Filter by severity">
+            {SEVERITY_FILTERS.map((f) => (
+              <button
+                key={f.id}
+                type="button"
+                aria-pressed={severity === f.id}
+                onClick={() => setSeverity(f.id)}
+                className={`focus-visible:ring-ring rounded-md px-3 py-1.5 text-sm font-medium transition-colors focus-visible:ring-2 focus-visible:outline-none ${
+                  severity === f.id
+                    ? 'bg-primary text-primary-foreground'
+                    : 'text-muted-foreground hover:bg-accent hover:text-foreground'
+                }`}
+              >
+                {f.label}
+              </button>
+            ))}
+          </div>
+          <div className="flex flex-wrap gap-1" role="group" aria-label="Filter by status">
+            {STATUS_FILTERS.map((f) => (
+              <button
+                key={f.id}
+                type="button"
+                aria-pressed={status === f.id}
+                onClick={() => setStatus(f.id)}
+                className={`focus-visible:ring-ring rounded-md px-3 py-1.5 text-sm font-medium transition-colors focus-visible:ring-2 focus-visible:outline-none ${
+                  status === f.id
+                    ? 'bg-accent text-foreground'
+                    : 'text-muted-foreground hover:bg-accent hover:text-foreground'
+                }`}
+              >
+                {f.label}
+              </button>
+            ))}
+          </div>
+        </div>
+
+        {loading ? (
+          <SeoLoading label="Loading issues…" />
+        ) : error ? (
+          <SeoErrorState message={error} onRetry={refetch} />
+        ) : issues.length === 0 ? (
+          <SeoEmptyState
+            icon={status === 'open' ? <CheckCircle2 size={24} /> : <ClipboardCheck size={24} />}
+            title={status === 'open' ? 'No open issues' : 'No issues match'}
+            description={
+              status === 'open'
+                ? 'Run an audit to scan for new issues, or adjust the filters.'
+                : 'Try a different severity or status filter.'
+            }
+          />
+        ) : (
+          <div className="overflow-x-auto">
+            <table className="w-full text-sm" aria-label="SEO issues">
+              <thead>
+                <tr className="text-muted-foreground border-border border-b text-left">
+                  <th className="py-2 pr-4 font-medium">Severity</th>
+                  <th className="py-2 pr-4 font-medium">Issue</th>
+                  <th className="py-2 pr-4 font-medium">Page</th>
+                  <th className="py-2 pr-4 font-medium">Status</th>
+                  <th className="py-2 text-right font-medium">
+                    <span className="sr-only">Actions</span>
+                  </th>
+                </tr>
+              </thead>
+              <tbody className="divide-border divide-y">
+                {issues.map((issue: SeoIssue) => {
+                  const meta = severityMeta(issue.severity)
+                  return (
+                    <tr key={issue.id} className="hover:bg-accent/40">
+                      <td className="py-2.5 pr-4">
+                        <span className={`inline-flex items-center gap-1.5 text-sm ${meta.text}`}>
+                          <span className={`h-1.5 w-1.5 rounded-full ${meta.dot}`} aria-hidden />
+                          {meta.label}
+                        </span>
+                      </td>
+                      <td className="py-2.5 pr-4">
+                        <span className="text-foreground block font-medium">{issue.title}</span>
+                        <span className="text-muted-foreground block capitalize">
+                          {issue.category}
+                        </span>
+                      </td>
+                      <td className="text-muted-foreground py-2.5 pr-4">
+                        <span className="block truncate">
+                          {issue.entityTitle || issue.url || '—'}
+                        </span>
+                      </td>
+                      <td className="py-2.5 pr-4">
+                        <SeoStatusBadge label={issue.status} tone={issueStatusTone(issue.status)} />
+                      </td>
+                      <td className="py-2.5 text-right">
+                        <button
+                          onClick={() => setOpenIssue(issue.id)}
+                          className="text-primary hover:bg-accent focus-visible:ring-ring rounded-md px-2 py-1 text-sm focus-visible:ring-2 focus-visible:outline-none"
+                        >
+                          {issue.fixable ? 'Fix' : 'View'}
+                        </button>
+                      </td>
+                    </tr>
+                  )
+                })}
+              </tbody>
+            </table>
+          </div>
+        )}
+      </SectionCard>
+
+      <SeoIssueFixDrawer
+        open={openIssue !== null}
+        onOpenChange={(o) => !o && setOpenIssue(null)}
+        issueId={openIssue}
+        onChanged={refetch}
+        onNavigate={onNavigate}
+      />
+    </div>
+  )
+}

package/src/views/seo/ContentTab.tsx

@@ -0,0 +1,164 @@
+'use client'
+
+import { useMemo, useState } from 'react'
+import { Search, FileText, Pencil } from 'lucide-react'
+import {
+  fetchSeoContentRecords,
+  applyContentSeoQuery,
+  type ContentSeoFilter,
+} from '../../lib/seo-service.js'
+import {
+  SectionCard,
+  SeoLoading,
+  SeoEmptyState,
+  SeoErrorState,
+  ScorePill,
+  SeoStatusBadge,
+} from '../../components/seo/primitives.js'
+import { SeoEditorDrawer } from '../../components/seo/SeoEditorDrawer.js'
+import { useSeoResource } from './useSeoResource.js'
+
+const FILTERS: { id: ContentSeoFilter; label: string }[] = [
+  { id: 'all', label: 'All' },
+  { id: 'pages', label: 'Pages' },
+  { id: 'posts', label: 'Posts' },
+]
+
+const inputCls =
+  'w-full rounded-md border border-border bg-input-background py-2 pl-9 pr-3 text-base text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring'
+
+export function ContentTab({
+  initialEntityType,
+  initialEntityId,
+}: {
+  initialEntityType?: string | null
+  initialEntityId?: string | null
+}) {
+  const { data, loading, error, refetch } = useSeoResource(fetchSeoContentRecords, [])
+  const [search, setSearch] = useState('')
+  const [filter, setFilter] = useState<ContentSeoFilter>('all')
+  const [editor, setEditor] = useState<{ type: string; id: string } | null>(
+    initialEntityType && initialEntityId ? { type: initialEntityType, id: initialEntityId } : null,
+  )
+
+  const rows = useMemo(
+    () => applyContentSeoQuery(data ?? [], { search, filter }),
+    [data, search, filter],
+  )
+
+  return (
+    <div className="space-y-4">
+      <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+        <div className="relative max-w-sm flex-1">
+          <Search
+            className="text-muted-foreground pointer-events-none absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2"
+            aria-hidden
+          />
+          <input
+            className={inputCls}
+            placeholder="Search content…"
+            value={search}
+            onChange={(e) => setSearch(e.target.value)}
+            aria-label="Search content"
+          />
+        </div>
+        <div className="flex gap-1" role="group" aria-label="Content type filter">
+          {FILTERS.map((f) => (
+            <button
+              key={f.id}
+              type="button"
+              aria-pressed={filter === f.id}
+              onClick={() => setFilter(f.id)}
+              className={`focus-visible:ring-ring rounded-md px-3 py-1.5 text-sm font-medium transition-colors focus-visible:ring-2 focus-visible:outline-none ${
+                filter === f.id
+                  ? 'bg-primary text-primary-foreground'
+                  : 'text-muted-foreground hover:bg-accent hover:text-foreground'
+              }`}
+            >
+              {f.label}
+            </button>
+          ))}
+        </div>
+      </div>
+
+      <SectionCard>
+        {loading ? (
+          <SeoLoading label="Loading content…" />
+        ) : error ? (
+          <SeoErrorState message={error} onRetry={refetch} />
+        ) : rows.length === 0 ? (
+          <SeoEmptyState
+            icon={<FileText size={24} />}
+            title={search || filter !== 'all' ? 'No matching content' : 'No content yet'}
+            description={
+              search || filter !== 'all'
+                ? 'Try adjusting your search or filter.'
+                : 'Publish pages or posts to manage their SEO here.'
+            }
+          />
+        ) : (
+          <div className="overflow-x-auto">
+            <table className="w-full text-sm" aria-label="Content SEO">
+              <thead>
+                <tr className="text-muted-foreground border-border border-b text-left">
+                  <th className="py-2 pr-4 font-medium">Title</th>
+                  <th className="py-2 pr-4 font-medium">Type</th>
+                  <th className="py-2 pr-4 font-medium">Meta</th>
+                  <th className="py-2 pr-4 text-right font-medium">Score</th>
+                  <th className="py-2 text-right font-medium">
+                    <span className="sr-only">Actions</span>
+                  </th>
+                </tr>
+              </thead>
+              <tbody className="divide-border divide-y">
+                {rows.map((r) => (
+                  <tr key={`${r.entityType}-${r.entityId}`} className="hover:bg-accent/40">
+                    <td className="py-2.5 pr-4">
+                      <span className="text-foreground block font-medium">{r.title}</span>
+                      <span className="text-muted-foreground block truncate">{r.url}</span>
+                    </td>
+                    <td className="py-2.5 pr-4 capitalize">
+                      <span className="text-muted-foreground">{r.entityType}</span>
+                    </td>
+                    <td className="py-2.5 pr-4">
+                      <span className="flex flex-wrap gap-1.5">
+                        <SeoStatusBadge
+                          label={r.metaTitle ? 'Title' : 'No title'}
+                          tone={r.metaTitle ? 'good' : 'critical'}
+                        />
+                        <SeoStatusBadge
+                          label={r.metaDescription ? 'Desc' : 'No desc'}
+                          tone={r.metaDescription ? 'good' : 'critical'}
+                        />
+                        {r.noindex && <SeoStatusBadge label="No-index" tone="fair" />}
+                      </span>
+                    </td>
+                    <td className="py-2.5 pr-4 text-right">
+                      <ScorePill score={r.seoScore} />
+                    </td>
+                    <td className="py-2.5 text-right">
+                      <button
+                        onClick={() => setEditor({ type: r.entityType, id: r.entityId })}
+                        className="text-primary hover:bg-accent focus-visible:ring-ring inline-flex items-center gap-1 rounded-md px-2 py-1 text-sm focus-visible:ring-2 focus-visible:outline-none"
+                      >
+                        <Pencil className="h-3.5 w-3.5" aria-hidden /> Edit
+                      </button>
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        )}
+      </SectionCard>
+
+      <SeoEditorDrawer
+        open={editor !== null}
+        onOpenChange={(o) => !o && setEditor(null)}
+        entityType={editor?.type ?? null}
+        entityId={editor?.id ?? null}
+        onSaved={refetch}
+      />
+    </div>
+  )
+}