@actuate-media/cms-admin 0.25.0 → 0.27.0

package/src/views/settings/SeoRobotsDefaultsCard.tsx

@@ -0,0 +1,149 @@
+'use client'
+
+import { useId, useState } from 'react'
+import { ConfirmDangerousSettingDialog, SettingsToggleRow } from './components.js'
+import type { GeneralSettingsForm, SiteIndexStatus } from './useGeneralSettings.js'
+
+interface SeoRobotsDefaultsCardProps {
+  form: GeneralSettingsForm
+  setField: <K extends keyof GeneralSettingsForm>(key: K, value: GeneralSettingsForm[K]) => void
+  isProduction: boolean
+  indexStatus: SiteIndexStatus | null
+  canEdit: boolean
+  onNavigate?: (path: string) => void
+}
+
+interface PendingChange {
+  field: keyof GeneralSettingsForm
+  value: boolean
+  title: string
+  description: string
+  confirmLabel: string
+}
+
+export function SeoRobotsDefaultsCard({
+  form,
+  setField,
+  isProduction,
+  indexStatus,
+  canEdit,
+  onNavigate,
+}: SeoRobotsDefaultsCardProps) {
+  const headingId = useId()
+  const [pending, setPending] = useState<PendingChange | null>(null)
+
+  // Some toggles can take the whole production site out of search results, so
+  // they route through a confirmation step before being applied.
+  function requestToggle(field: keyof GeneralSettingsForm, value: boolean) {
+    if (field === 'defaultNoIndex' && value && isProduction) {
+      setPending({
+        field,
+        value,
+        title: 'Block this production site from search engines?',
+        description:
+          'This may prevent search engines from indexing your production site. Pages will be served with a noindex directive unless they explicitly opt in.',
+        confirmLabel: 'Enable No Index',
+      })
+      return
+    }
+    if (field === 'noIndexNonProduction' && !value) {
+      setPending({
+        field,
+        value,
+        title: 'Allow non-production environments to be indexed?',
+        description:
+          'Preview and staging environments may become indexable if publicly accessible. Search engines could index unfinished content.',
+        confirmLabel: 'Turn Off',
+      })
+      return
+    }
+    setField(field, value)
+  }
+
+  const effectiveProd = form.defaultNoIndex ? 'Blocked' : 'Indexable'
+  const sitemapCheck = indexStatus?.checks.find((c) => c.key === 'sitemap')
+  const sitemapStatus = sitemapCheck ? (sitemapCheck.value === 'Yes' ? 'Enabled' : 'Disabled') : '—'
+
+  return (
+    <section aria-labelledby={headingId} className="border-border bg-card rounded-lg border p-4">
+      <h3 id={headingId} className="text-foreground mb-1 text-base font-medium">
+        SEO &amp; Robots Defaults
+      </h3>
+      <p className="text-muted-foreground mb-4 text-sm">
+        Set the site-wide default for search engine indexing. Individual pages can inherit or
+        override these rules in their SEO panel. These share the same configuration as the SEO
+        section.
+      </p>
+
+      <div className="space-y-4">
+        <SettingsToggleRow
+          label="Default No Index"
+          description="Ask search engines not to index pages unless a page explicitly allows indexing."
+          checked={form.defaultNoIndex}
+          disabled={!canEdit}
+          onChange={(v) => requestToggle('defaultNoIndex', v)}
+        />
+        <SettingsToggleRow
+          label="Default No Follow"
+          description="Ask search engines not to follow page links unless a page explicitly allows following."
+          checked={form.defaultNoFollow}
+          disabled={!canEdit}
+          onChange={(v) => requestToggle('defaultNoFollow', v)}
+        />
+        <SettingsToggleRow
+          label="Noindex Non-Production Environments"
+          description="Force noindex when the deployed environment is not production."
+          checked={form.noIndexNonProduction}
+          disabled={!canEdit}
+          onChange={(v) => requestToggle('noIndexNonProduction', v)}
+        />
+      </div>
+
+      <div className="border-border mt-4 space-y-2 border-t pt-4">
+        <SummaryRow
+          label="Effective production indexing"
+          value={effectiveProd}
+          danger={form.defaultNoIndex}
+        />
+        <SummaryRow
+          label="Effective current environment"
+          value={indexStatus?.label ?? '—'}
+          danger={indexStatus?.severity === 'danger'}
+        />
+        <SummaryRow label="Sitemap status" value={sitemapStatus} />
+        {onNavigate && (
+          <button
+            type="button"
+            onClick={() => onNavigate('/seo?tab=technical')}
+            className="text-brand mt-1 text-sm hover:underline"
+          >
+            Manage advanced robots.txt &amp; sitemap in SEO →
+          </button>
+        )}
+      </div>
+
+      <ConfirmDangerousSettingDialog
+        open={pending !== null}
+        title={pending?.title ?? ''}
+        description={pending?.description ?? ''}
+        confirmLabel={pending?.confirmLabel}
+        onConfirm={() => {
+          if (pending) setField(pending.field, pending.value)
+          setPending(null)
+        }}
+        onCancel={() => setPending(null)}
+      />
+    </section>
+  )
+}
+
+function SummaryRow({ label, value, danger }: { label: string; value: string; danger?: boolean }) {
+  return (
+    <div className="flex items-center justify-between gap-2 text-sm">
+      <span className="text-muted-foreground">{label}</span>
+      <span className={danger ? 'text-destructive font-medium' : 'text-foreground font-medium'}>
+        {value}
+      </span>
+    </div>
+  )
+}

package/src/views/settings/SiteIndexStatusCard.tsx

@@ -0,0 +1,184 @@
+'use client'
+
+import {
+  CheckCircle2,
+  XCircle,
+  AlertTriangle,
+  HelpCircle,
+  ShieldCheck,
+  ExternalLink,
+  Search,
+} from 'lucide-react'
+import type { ReactNode } from 'react'
+import type { SiteIndexStatus } from './useGeneralSettings.js'
+
+interface SiteIndexStatusCardProps {
+  status: SiteIndexStatus | null
+  loading: boolean
+  /** Resolve an action href relative to the admin (e.g. /seo?tab=audit). */
+  onNavigate?: (path: string) => void
+  /** Trigger the SEO audit flow when an action declares `action: run_seo_audit`. */
+  onRunAudit?: () => void
+}
+
+const SEVERITY_STYLES: Record<SiteIndexStatus['severity'], { pill: string; icon: ReactNode }> = {
+  success: {
+    pill: 'bg-success/15 text-success border-success/30',
+    icon: <CheckCircle2 size={14} aria-hidden="true" />,
+  },
+  warning: {
+    pill: 'bg-warning/15 text-warning border-warning/30',
+    icon: <AlertTriangle size={14} aria-hidden="true" />,
+  },
+  danger: {
+    pill: 'bg-destructive/10 text-destructive border-destructive/30',
+    icon: <XCircle size={14} aria-hidden="true" />,
+  },
+  neutral: {
+    pill: 'bg-muted text-muted-foreground border-border',
+    icon: <HelpCircle size={14} aria-hidden="true" />,
+  },
+}
+
+const CHECK_ICON: Record<string, ReactNode> = {
+  pass: <CheckCircle2 size={14} className="text-success" aria-hidden="true" />,
+  warning: <AlertTriangle size={14} className="text-warning" aria-hidden="true" />,
+  fail: <XCircle size={14} className="text-destructive" aria-hidden="true" />,
+  unknown: <HelpCircle size={14} className="text-muted-foreground" aria-hidden="true" />,
+}
+
+const CHECK_SR: Record<string, string> = {
+  pass: 'OK',
+  warning: 'Warning',
+  fail: 'Problem',
+  unknown: 'Unknown',
+}
+
+export function SiteIndexStatusCard({
+  status,
+  loading,
+  onNavigate,
+  onRunAudit,
+}: SiteIndexStatusCardProps) {
+  return (
+    <section
+      aria-labelledby="site-index-status-heading"
+      className="border-border bg-card rounded-lg border p-4"
+    >
+      <div className="mb-3 flex items-start justify-between gap-3">
+        <div className="flex items-start gap-2">
+          <ShieldCheck size={18} className="text-muted-foreground mt-0.5" aria-hidden="true" />
+          <div>
+            <h3 id="site-index-status-heading" className="text-foreground text-base font-medium">
+              Site Index Status
+            </h3>
+            <p className="text-muted-foreground text-sm">
+              Current effective crawl and indexing state
+            </p>
+          </div>
+        </div>
+        {status && (
+          <span
+            className={`inline-flex items-center gap-1.5 rounded-full border px-2.5 py-1 text-xs font-medium ${SEVERITY_STYLES[status.severity].pill}`}
+          >
+            {SEVERITY_STYLES[status.severity].icon}
+            <span className="sr-only">Status: </span>
+            {status.label}
+          </span>
+        )}
+      </div>
+
+      {loading && !status ? (
+        <div className="space-y-2" aria-hidden="true">
+          <div className="bg-muted h-4 w-2/3 animate-pulse rounded" />
+          <div className="bg-muted h-20 w-full animate-pulse rounded" />
+        </div>
+      ) : !status ? (
+        <p className="text-muted-foreground text-sm">Index status is unavailable.</p>
+      ) : (
+        <>
+          <p className="text-muted-foreground mb-3 text-sm">{status.description}</p>
+
+          <dl className="border-border grid grid-cols-1 gap-x-6 gap-y-2 rounded-md border p-3 sm:grid-cols-2">
+            {status.checks.map((check) => (
+              <div key={check.key} className="flex items-center justify-between gap-2 text-sm">
+                <dt className="text-muted-foreground">{check.label}</dt>
+                <dd className="text-foreground flex items-center gap-1.5 font-medium">
+                  <span className="sr-only">{CHECK_SR[check.status]}: </span>
+                  {CHECK_ICON[check.status]}
+                  {check.value}
+                </dd>
+              </div>
+            ))}
+          </dl>
+
+          {status.actions.length > 0 && (
+            <div className="mt-3 flex flex-wrap gap-2">
+              {status.actions.map((action) => (
+                <SiteIndexAction
+                  key={action.label}
+                  label={action.label}
+                  href={action.href}
+                  action={action.action}
+                  onNavigate={onNavigate}
+                  onRunAudit={onRunAudit}
+                />
+              ))}
+            </div>
+          )}
+        </>
+      )}
+    </section>
+  )
+}
+
+function SiteIndexAction({
+  label,
+  href,
+  action,
+  onNavigate,
+  onRunAudit,
+}: {
+  label: string
+  href?: string
+  action?: string
+  onNavigate?: (path: string) => void
+  onRunAudit?: () => void
+}) {
+  const className =
+    'border-border text-foreground hover:bg-accent inline-flex items-center gap-1.5 rounded-md border px-2.5 py-1.5 text-sm transition-colors'
+
+  // The audit action stays in-app; robots/sitemap are real public URLs.
+  const isAudit = action === 'run_seo_audit'
+  const isAdminRoute = href?.startsWith('/seo')
+  const icon = isAudit ? (
+    <Search size={14} aria-hidden="true" />
+  ) : (
+    <ExternalLink size={14} aria-hidden="true" />
+  )
+
+  if (isAudit && onRunAudit) {
+    return (
+      <button type="button" onClick={onRunAudit} className={className}>
+        {icon}
+        {label}
+      </button>
+    )
+  }
+
+  if (isAdminRoute && onNavigate) {
+    return (
+      <button type="button" onClick={() => onNavigate(href!)} className={className}>
+        {icon}
+        {label}
+      </button>
+    )
+  }
+
+  return (
+    <a href={href} target="_blank" rel="noopener noreferrer" className={className}>
+      {icon}
+      {label}
+    </a>
+  )
+}

package/src/views/settings/SiteInformationCard.tsx

@@ -0,0 +1,122 @@
+'use client'
+
+import { useId } from 'react'
+import { CheckCircle2 } from 'lucide-react'
+import { SettingsSourceBadge } from './components.js'
+import type {
+  GeneralSettingsForm,
+  SettingsSourceMetadata,
+  ValidationIssue,
+} from './useGeneralSettings.js'
+
+const INPUT_CLASS =
+  'w-full rounded-md border border-border bg-input-background px-3 py-2 text-base text-foreground focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-60'
+const LABEL_CLASS = 'mb-1 flex items-center gap-2 text-sm font-medium text-foreground'
+
+interface SiteInformationCardProps {
+  form: GeneralSettingsForm
+  setField: <K extends keyof GeneralSettingsForm>(key: K, value: GeneralSettingsForm[K]) => void
+  sources: Record<string, SettingsSourceMetadata>
+  issues: ValidationIssue[]
+  canEdit: boolean
+}
+
+export function SiteInformationCard({
+  form,
+  setField,
+  sources,
+  issues,
+  canEdit,
+}: SiteInformationCardProps) {
+  const titleId = useId()
+  const taglineId = useId()
+  const urlId = useId()
+  const urlErrId = useId()
+
+  const titleIssue = issues.find((i) => i.field === 'siteTitle')
+  const urlIssue = issues.find((i) => i.field === 'siteUrl')
+  const urlEditable = sources.siteUrl?.editable !== false && canEdit
+  const urlValid = !urlIssue && form.siteUrl.trim().length > 0
+
+  return (
+    <section
+      aria-labelledby={`${titleId}-heading`}
+      className="border-border bg-card rounded-lg border p-4"
+    >
+      <h3 id={`${titleId}-heading`} className="text-foreground mb-4 text-base font-medium">
+        Site Information
+      </h3>
+      <div className="space-y-4">
+        <div>
+          <label htmlFor={titleId} className={LABEL_CLASS}>
+            Site Title
+          </label>
+          <input
+            id={titleId}
+            type="text"
+            value={form.siteTitle}
+            disabled={!canEdit}
+            aria-invalid={titleIssue?.severity === 'error'}
+            onChange={(e) => setField('siteTitle', e.target.value)}
+            className={INPUT_CLASS}
+          />
+          {titleIssue && <p className="text-destructive mt-1 text-sm">{titleIssue.message}</p>}
+        </div>
+
+        <div>
+          <label htmlFor={taglineId} className={LABEL_CLASS}>
+            Tagline
+          </label>
+          <input
+            id={taglineId}
+            type="text"
+            value={form.tagline}
+            disabled={!canEdit}
+            onChange={(e) => setField('tagline', e.target.value)}
+            className={INPUT_CLASS}
+          />
+        </div>
+
+        <div>
+          <label htmlFor={urlId} className={LABEL_CLASS}>
+            Site URL
+            <SettingsSourceBadge meta={sources.siteUrl} />
+          </label>
+          <input
+            id={urlId}
+            type="url"
+            inputMode="url"
+            placeholder="https://example.com"
+            value={form.siteUrl}
+            disabled={!urlEditable}
+            aria-invalid={urlIssue?.severity === 'error'}
+            aria-describedby={urlIssue ? urlErrId : undefined}
+            onChange={(e) => setField('siteUrl', e.target.value)}
+            className={INPUT_CLASS}
+          />
+          {urlIssue ? (
+            <p
+              id={urlErrId}
+              className={
+                urlIssue.severity === 'error'
+                  ? 'text-destructive mt-1 text-sm'
+                  : 'text-warning mt-1 text-sm'
+              }
+            >
+              {urlIssue.message}
+            </p>
+          ) : urlValid ? (
+            <p className="text-muted-foreground mt-1 flex items-center gap-1.5 text-sm">
+              <CheckCircle2 size={13} className="text-success" aria-hidden="true" />
+              Valid — used for canonical URLs, sitemap, robots.txt, and Open Graph.
+            </p>
+          ) : (
+            <p className="text-muted-foreground mt-1 text-sm">
+              Used for canonical URLs, sitemap, robots.txt, and Open Graph fallbacks.
+            </p>
+          )}
+        </div>
+      </div>
+    </section>
+  )
+}

package/src/views/settings/TypographyMotionCard.tsx

@@ -0,0 +1,65 @@
+'use client'
+
+import { SettingsToggleRow } from './components.js'
+import { AVAILABLE_FONTS } from '../../components/ThemeProvider.js'
+import type { UseAppearanceSettings } from './useAppearanceSettings.js'
+
+export function TypographyMotionCard({
+  s,
+  canEdit,
+}: {
+  s: UseAppearanceSettings
+  canEdit: boolean
+}) {
+  return (
+    <section className="border-border bg-card rounded-lg border p-6">
+      <header className="mb-4">
+        <h3 className="text-foreground text-lg font-medium">Typography &amp; Motion</h3>
+        <p className="text-muted-foreground mt-0.5 text-sm">
+          Admin UI font and motion preferences.
+        </p>
+      </header>
+
+      <div className="space-y-5">
+        <div>
+          <label
+            htmlFor="content-font"
+            className="text-foreground mb-1 block text-base font-medium"
+          >
+            Content font
+          </label>
+          <p className="text-muted-foreground mb-2 text-sm">
+            Applies to the admin UI. Falls back to the system font if not installed.
+          </p>
+          <select
+            id="content-font"
+            value={s.appearance.font}
+            disabled={!canEdit}
+            onChange={(e) => s.setFont(e.target.value)}
+            className="border-border bg-input-background text-foreground focus-visible:ring-ring w-full max-w-md rounded-md border px-3 py-2 text-base focus-visible:ring-2 focus-visible:outline-none disabled:opacity-50"
+          >
+            {AVAILABLE_FONTS.map((font) => (
+              <option key={font} value={font}>
+                {font}
+              </option>
+            ))}
+            {/* Preserve a config-defined font that isn't in the curated list. */}
+            {!AVAILABLE_FONTS.includes(s.appearance.font as (typeof AVAILABLE_FONTS)[number]) && (
+              <option value={s.appearance.font}>{s.appearance.font}</option>
+            )}
+          </select>
+        </div>
+
+        <div className="border-border border-t pt-4">
+          <SettingsToggleRow
+            label="Reduce motion"
+            description="Minimize animations and transitions across the admin. Focus and state changes are preserved."
+            checked={s.appearance.reduceMotion}
+            onChange={s.setReduceMotion}
+            disabled={!canEdit}
+          />
+        </div>
+      </div>
+    </section>
+  )
+}