@actuate-media/cms-admin 0.25.0 → 0.26.0

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/components.tsx

@@ -0,0 +1,198 @@
+'use client'
+
+import * as Dialog from '@radix-ui/react-dialog'
+import { AlertTriangle, Check, Loader2, Lock } from 'lucide-react'
+import type { ReactNode } from 'react'
+import type { SettingsSourceMetadata, ValidationIssue } from './useGeneralSettings.js'
+
+const SOURCE_LABEL: Record<SettingsSourceMetadata['source'], string> = {
+  config: 'Config-managed',
+  environment: 'Environment-managed',
+  database: 'Editable',
+  plugin: 'Plugin setting',
+  computed: 'Computed',
+}
+
+/** Small badge showing where a setting's value comes from. */
+export function SettingsSourceBadge({ meta }: { meta?: SettingsSourceMetadata }) {
+  if (!meta || (meta.source === 'database' && meta.editable)) return null
+  const locked = !meta.editable
+  return (
+    <span
+      className="text-muted-foreground border-border bg-muted inline-flex items-center gap-1 rounded-md border px-1.5 py-0.5 text-xs"
+      title={meta.reason}
+    >
+      {locked && <Lock size={11} aria-hidden="true" />}
+      {SOURCE_LABEL[meta.source]}
+    </span>
+  )
+}
+
+/** A labelled switch row with description, used for the SEO defaults. */
+export function SettingsToggleRow({
+  label,
+  description,
+  checked,
+  onChange,
+  disabled = false,
+  badge,
+}: {
+  label: string
+  description: string
+  checked: boolean
+  onChange: (value: boolean) => void
+  disabled?: boolean
+  badge?: ReactNode
+}) {
+  return (
+    <div className="flex items-start justify-between gap-4">
+      <div className="flex-1">
+        <div className="flex items-center gap-2">
+          <span className="text-foreground text-base font-medium">{label}</span>
+          {badge}
+        </div>
+        <p className="text-muted-foreground mt-0.5 text-sm">{description}</p>
+      </div>
+      <button
+        type="button"
+        role="switch"
+        aria-checked={checked}
+        aria-label={label}
+        disabled={disabled}
+        onClick={() => onChange(!checked)}
+        className={`focus-visible:ring-ring relative mt-0.5 h-6 w-11 shrink-0 rounded-full transition-colors focus-visible:ring-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 ${
+          checked ? 'bg-brand' : 'bg-switch-background'
+        }`}
+      >
+        <span
+          className={`absolute top-0.5 block h-5 w-5 rounded-full bg-white shadow-sm transition-transform ${
+            checked ? 'translate-x-[22px]' : 'translate-x-0.5'
+          }`}
+        />
+      </button>
+    </div>
+  )
+}
+
+/** Aggregated validation messages shown above the cards. */
+export function SettingsValidationSummary({ issues }: { issues: ValidationIssue[] }) {
+  if (issues.length === 0) return null
+  const errors = issues.filter((i) => i.severity === 'error')
+  const warnings = issues.filter((i) => i.severity === 'warning')
+  const isError = errors.length > 0
+  return (
+    <div
+      role="alert"
+      aria-live="polite"
+      className={`flex items-start gap-3 rounded-lg border p-3 text-sm ${
+        isError
+          ? 'border-destructive/30 bg-destructive/10 text-destructive'
+          : 'border-warning/30 bg-warning/10 text-warning'
+      }`}
+    >
+      <AlertTriangle size={16} className="mt-0.5 shrink-0" aria-hidden="true" />
+      <div className="space-y-1">
+        {[...errors, ...warnings].map((issue, i) => (
+          <p key={`${issue.field}-${i}`}>{issue.message}</p>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+/** Sticky footer with Reset + Save, gated on dirty state. */
+export function SettingsSaveBar({
+  dirty,
+  canEdit,
+  hasErrors,
+  saveState,
+  onSave,
+  onReset,
+}: {
+  dirty: boolean
+  canEdit: boolean
+  hasErrors: boolean
+  saveState: 'idle' | 'saving' | 'success' | 'error'
+  onSave: () => void
+  onReset: () => void
+}) {
+  const saving = saveState === 'saving'
+  return (
+    <div className="border-border bg-background/80 sticky bottom-0 z-10 flex items-center justify-end gap-4 border-t py-3 backdrop-blur">
+      {saveState === 'success' && !dirty && (
+        <span className="text-success flex items-center gap-1.5 text-sm" aria-live="polite">
+          <Check size={16} aria-hidden="true" /> Saved
+        </span>
+      )}
+      <button
+        type="button"
+        onClick={onReset}
+        disabled={!dirty || saving}
+        className="text-muted-foreground hover:text-foreground rounded-md px-3 py-2 text-base transition-colors disabled:cursor-not-allowed disabled:opacity-40"
+      >
+        Reset
+      </button>
+      <button
+        type="button"
+        onClick={onSave}
+        disabled={!canEdit || !dirty || hasErrors || saving}
+        className="bg-brand text-brand-foreground focus-visible:ring-ring inline-flex items-center gap-2 rounded-md px-5 py-2 text-base font-medium transition-opacity hover:opacity-90 focus-visible:ring-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50"
+      >
+        {saving && <Loader2 size={16} className="animate-spin" aria-hidden="true" />}
+        {saving ? 'Saving…' : 'Save Changes'}
+      </button>
+    </div>
+  )
+}
+
+/** Confirmation dialog for dangerous indexing changes. */
+export function ConfirmDangerousSettingDialog({
+  open,
+  title,
+  description,
+  confirmLabel = 'Continue',
+  onConfirm,
+  onCancel,
+}: {
+  open: boolean
+  title: string
+  description: string
+  confirmLabel?: string
+  onConfirm: () => void
+  onCancel: () => void
+}) {
+  return (
+    <Dialog.Root open={open} onOpenChange={(o) => !o && onCancel()}>
+      <Dialog.Portal>
+        <Dialog.Overlay className="fixed inset-0 z-50 bg-black/50" />
+        <Dialog.Content className="bg-card text-card-foreground fixed top-1/2 left-1/2 z-50 w-full max-w-md -translate-x-1/2 -translate-y-1/2 rounded-lg p-6 shadow-lg">
+          <div className="mb-3 flex items-center gap-2">
+            <span className="bg-warning/15 text-warning flex h-9 w-9 items-center justify-center rounded-full">
+              <AlertTriangle size={20} aria-hidden="true" />
+            </span>
+            <Dialog.Title className="text-foreground text-lg font-medium">{title}</Dialog.Title>
+          </div>
+          <Dialog.Description className="text-muted-foreground mb-5 text-sm">
+            {description}
+          </Dialog.Description>
+          <div className="flex items-center justify-end gap-3">
+            <button
+              type="button"
+              onClick={onCancel}
+              className="border-border text-foreground hover:bg-accent rounded-md border px-4 py-2 text-base transition-colors"
+            >
+              Cancel
+            </button>
+            <button
+              type="button"
+              onClick={onConfirm}
+              className="bg-destructive text-destructive-foreground rounded-md px-4 py-2 text-base font-medium transition-opacity hover:opacity-90"
+            >
+              {confirmLabel}
+            </button>
+          </div>
+        </Dialog.Content>
+      </Dialog.Portal>
+    </Dialog.Root>
+  )
+}