@actuate-media/cms-admin 0.25.0 → 0.26.0

package/src/views/Settings.tsx

@@ -10,7 +10,6 @@ import {
   BookOpen,
   Sparkles,
   MessageSquare,
-  Languages,
   Loader2,
   AlertTriangle,
   Download,
@@ -30,36 +29,36 @@ 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 { GeneralSettingsTab } from './settings/GeneralSettingsTab.js'
 import { Users as UsersView } from './Users.js'
 import { ApiKeys as ApiKeysView } from './ApiKeys.js'
 
 export interface SettingsProps {
   onNavigate?: (path: string) => void
   config?: any
+  /** Current admin session — used to gate editing on role. */
+  session?: any
   /** Initial tab when arriving without a `?tab=` query param (e.g. via the
    * legacy `/users` or `/api-keys` routes). */
   initialTab?: string
 }
 
 /** Tabs that drive their own persistence (no global "Save Changes" footer). */
-const SELF_MANAGED_TABS = new Set(['users', 'api-keys'])
+const SELF_MANAGED_TABS = new Set(['general', '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 = {}) {
+export function Settings({
+  config,
+  onNavigate,
+  session,
+  initialTab = 'general',
+}: SettingsProps = {}) {
   const { data, loading, error, refetch } = useApiData<any>('/globals/settings')
 
-  const [siteTitle, setSiteTitle] = useState('My CMS')
-  const [tagline, setTagline] = useState('A lightweight content management system')
-  const [siteUrl, setSiteUrl] = useState('https://example.com')
-  const [language, setLanguage] = useState('en')
-  const [timezone, setTimezone] = useState('UTC')
-  const [defaultNoIndex, setDefaultNoIndex] = useState(false)
-  const [defaultNoFollow, setDefaultNoFollow] = useState(false)
-  const [noIndexNonProduction, setNoIndexNonProduction] = useState(false)
   const [twoFactorEnabled, setTwoFactorEnabled] = useState(false)
   const [sessionTimeout, setSessionTimeout] = useState(false)
   const [ipWhitelist, setIpWhitelist] = useState(false)
@@ -139,14 +138,6 @@ export function Settings({ config, onNavigate, initialTab = 'general' }: Setting
 
   useEffect(() => {
     if (data) {
-      setSiteTitle(data.siteTitle ?? 'My CMS')
-      setTagline(data.tagline ?? '')
-      setSiteUrl(data.siteUrl ?? '')
-      setLanguage(data.language ?? 'en')
-      setTimezone(data.timezone ?? 'UTC')
-      setDefaultNoIndex(data.defaultNoIndex ?? false)
-      setDefaultNoFollow(data.defaultNoFollow ?? false)
-      setNoIndexNonProduction(data.noIndexNonProduction ?? false)
       setTwoFactorEnabled(data.twoFactorEnabled ?? false)
       setSessionTimeout(data.sessionTimeout ?? false)
       setIpWhitelist(data.ipWhitelist ?? false)
@@ -169,17 +160,13 @@ export function Settings({ config, onNavigate, initialTab = 'general' }: Setting
   const handleSave = async () => {
     setSaving(true)
     const layoutPayload = Object.keys(defaultLayout).length > 0 ? { defaultLayout } : {}
+    // Read-modify-write: the General tab owns site info / SEO defaults in the
+    // same global blob, so merge against a fresh fetch instead of overwriting.
+    const current = await cmsApi<Record<string, unknown>>('/globals/settings')
     const res = await cmsApi('/globals/settings', {
       method: 'PUT',
       body: JSON.stringify({
-        siteTitle,
-        tagline,
-        siteUrl,
-        language,
-        timezone,
-        defaultNoIndex,
-        defaultNoFollow,
-        noIndexNonProduction,
+        ...(current.data ?? {}),
         twoFactorEnabled,
         sessionTimeout,
         ipWhitelist,
@@ -205,7 +192,7 @@ export function Settings({ config, onNavigate, initialTab = 'general' }: Setting
   }
 
   const tabTriggerClass =
-    'px-4 py-2 text-sm font-medium text-gray-600 transition-colors hover:text-gray-900 data-[state=active]:border-b-2 data-[state=active]:border-blue-600 data-[state=active]:text-blue-600'
+    'text-muted-foreground hover:text-foreground data-[state=active]:border-brand data-[state=active]:text-brand px-4 py-2 text-base font-medium transition-colors data-[state=active]:border-b-2'
 
   if (loading) {
     return (
@@ -283,98 +270,8 @@ export function Settings({ config, onNavigate, initialTab = 'general' }: Setting
           </Tabs.Trigger>
         </Tabs.List>
 
-        <Tabs.Content value="general" 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">Site Information</h3>
-            <div className="space-y-4">
-              <div>
-                <label className="mb-1 block text-sm font-medium text-gray-700">Site Title</label>
-                <input
-                  type="text"
-                  value={siteTitle}
-                  onChange={(e) => setSiteTitle(e.target.value)}
-                  className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none"
-                />
-              </div>
-              <div>
-                <label className="mb-1 block text-sm font-medium text-gray-700">Tagline</label>
-                <input
-                  type="text"
-                  value={tagline}
-                  onChange={(e) => setTagline(e.target.value)}
-                  className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none"
-                />
-              </div>
-              <div>
-                <label className="mb-1 block text-sm font-medium text-gray-700">Site URL</label>
-                <input
-                  type="url"
-                  value={siteUrl}
-                  onChange={(e) => setSiteUrl(e.target.value)}
-                  className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none"
-                />
-              </div>
-            </div>
-          </div>
-          <div className="rounded-lg border border-gray-200 bg-white p-4">
-            <h3 className="mb-4 text-sm font-semibold text-gray-900">Language & Region</h3>
-            <div className="space-y-4">
-              <div>
-                <label className="mb-1 block text-sm font-medium text-gray-700">Language</label>
-                <select
-                  value={language}
-                  onChange={(e) => setLanguage(e.target.value)}
-                  className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none"
-                >
-                  <option value="en">English</option>
-                  <option value="es">Spanish</option>
-                  <option value="fr">French</option>
-                  <option value="de">German</option>
-                </select>
-              </div>
-              <div>
-                <label className="mb-1 block text-sm font-medium text-gray-700">Timezone</label>
-                <select
-                  value={timezone}
-                  onChange={(e) => setTimezone(e.target.value)}
-                  className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none"
-                >
-                  <option value="UTC">UTC</option>
-                  <option value="America/New_York">Eastern Time</option>
-                  <option value="America/Chicago">Central Time</option>
-                  <option value="America/Denver">Mountain Time</option>
-                  <option value="America/Los_Angeles">Pacific Time</option>
-                </select>
-              </div>
-            </div>
-          </div>
-          <div className="border-border bg-card rounded-lg border p-4">
-            <h3 className="text-foreground mb-1 text-sm font-medium">SEO & Robots Defaults</h3>
-            <p className="text-muted-foreground mb-4 text-xs">
-              Set the site-wide default for search engine indexing. Individual pages can inherit or
-              override these rules in their SEO panel.
-            </p>
-            <div className="space-y-4">
-              <ToggleSetting
-                label="Default No Index"
-                description="Ask search engines not to index pages unless a page explicitly allows indexing"
-                checked={defaultNoIndex}
-                onChange={setDefaultNoIndex}
-              />
-              <ToggleSetting
-                label="Default No Follow"
-                description="Ask search engines not to follow page links unless a page explicitly allows following"
-                checked={defaultNoFollow}
-                onChange={setDefaultNoFollow}
-              />
-              <ToggleSetting
-                label="Noindex Non-Production Environments"
-                description="Force noindex when the deployed environment is not production"
-                checked={noIndexNonProduction}
-                onChange={setNoIndexNonProduction}
-              />
-            </div>
-          </div>
+        <Tabs.Content value="general">
+          <GeneralSettingsTab onNavigate={onNavigate} role={session?.user?.role} />
         </Tabs.Content>
 
         <Tabs.Content value="appearance" className="space-y-4">

package/src/views/settings/GeneralSettingsTab.tsx

@@ -0,0 +1,126 @@
+'use client'
+
+import { AlertTriangle, Info } from 'lucide-react'
+import { useGeneralSettings } from './useGeneralSettings.js'
+import { SettingsSaveBar, SettingsValidationSummary } from './components.js'
+import { SiteIndexStatusCard } from './SiteIndexStatusCard.js'
+import { SiteInformationCard } from './SiteInformationCard.js'
+import { LanguageRegionCard } from './LanguageRegionCard.js'
+import { SeoRobotsDefaultsCard } from './SeoRobotsDefaultsCard.js'
+
+export interface GeneralSettingsTabProps {
+  onNavigate?: (path: string) => void
+  /** Current user's role. Only ADMIN can persist changes. */
+  role?: string
+}
+
+export function GeneralSettingsTab({ onNavigate, role }: GeneralSettingsTabProps) {
+  const canEdit = role === 'ADMIN'
+  const settings = useGeneralSettings(canEdit)
+
+  const runAudit = () => onNavigate?.('/seo?tab=audit')
+
+  if (settings.loading) {
+    return (
+      <div className="space-y-4" aria-busy="true" aria-live="polite">
+        <span className="sr-only">Loading settings…</span>
+        {[0, 1, 2, 3].map((i) => (
+          <div key={i} className="border-border bg-card rounded-lg border p-4">
+            <div className="bg-muted mb-4 h-4 w-40 animate-pulse rounded" />
+            <div className="space-y-3">
+              <div className="bg-muted h-9 w-full animate-pulse rounded" />
+              <div className="bg-muted h-9 w-full animate-pulse rounded" />
+            </div>
+          </div>
+        ))}
+      </div>
+    )
+  }
+
+  return (
+    <div className="space-y-4">
+      {settings.loadError && (
+        <div
+          role="alert"
+          className="border-destructive/30 bg-destructive/10 text-destructive flex items-center gap-3 rounded-lg border p-3 text-sm"
+        >
+          <AlertTriangle size={16} className="shrink-0" aria-hidden="true" />
+          <span className="flex-1">{settings.loadError}</span>
+          <button
+            type="button"
+            onClick={settings.refetch}
+            className="border-destructive/40 rounded-md border px-3 py-1 transition-colors hover:opacity-80"
+          >
+            Retry
+          </button>
+        </div>
+      )}
+
+      {!canEdit && (
+        <div className="border-border bg-muted text-muted-foreground flex items-center gap-2 rounded-lg border p-3 text-sm">
+          <Info size={16} className="shrink-0" aria-hidden="true" />
+          You have read-only access to settings. Only administrators can make changes.
+        </div>
+      )}
+
+      <SettingsValidationSummary issues={settings.issues} />
+
+      <SiteIndexStatusCard
+        status={settings.indexStatus}
+        loading={settings.loading}
+        onNavigate={onNavigate}
+        onRunAudit={runAudit}
+      />
+
+      <SiteInformationCard
+        form={settings.form}
+        setField={settings.setField}
+        sources={settings.sources}
+        issues={settings.issues}
+        canEdit={canEdit}
+      />
+
+      <LanguageRegionCard
+        form={settings.form}
+        setField={settings.setField}
+        issues={settings.issues}
+        canEdit={canEdit}
+      />
+
+      <SeoRobotsDefaultsCard
+        form={settings.form}
+        setField={settings.setField}
+        isProduction={settings.isProduction}
+        indexStatus={settings.indexStatus}
+        canEdit={canEdit}
+        onNavigate={onNavigate}
+      />
+
+      {settings.saveState === 'error' && settings.saveError && (
+        <div
+          role="alert"
+          className="border-destructive/30 bg-destructive/10 text-destructive flex items-center gap-3 rounded-lg border p-3 text-sm"
+        >
+          <AlertTriangle size={16} className="shrink-0" aria-hidden="true" />
+          <span className="flex-1">{settings.saveError}</span>
+          <button
+            type="button"
+            onClick={settings.save}
+            className="border-destructive/40 rounded-md border px-3 py-1 transition-colors hover:opacity-80"
+          >
+            Retry
+          </button>
+        </div>
+      )}
+
+      <SettingsSaveBar
+        dirty={settings.dirty}
+        canEdit={canEdit}
+        hasErrors={settings.hasErrors}
+        saveState={settings.saveState}
+        onSave={settings.save}
+        onReset={settings.reset}
+      />
+    </div>
+  )
+}

package/src/views/settings/LanguageRegionCard.tsx

@@ -0,0 +1,119 @@
+'use client'
+
+import { useId, useMemo } from 'react'
+import type { GeneralSettingsForm, 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 block text-sm font-medium text-foreground'
+
+const LANGUAGES: Array<{ value: string; label: string }> = [
+  { value: 'en-US', label: 'English (US)' },
+  { value: 'en-GB', label: 'English (UK)' },
+  { value: 'es-ES', label: 'Spanish (Spain)' },
+  { value: 'es-MX', label: 'Spanish (Mexico)' },
+  { value: 'fr-FR', label: 'French (France)' },
+  { value: 'de-DE', label: 'German (Germany)' },
+  { value: 'en', label: 'English' },
+]
+
+const TIMEZONES = [
+  'UTC',
+  'America/New_York',
+  'America/Chicago',
+  'America/Denver',
+  'America/Los_Angeles',
+  'America/Anchorage',
+  'Europe/London',
+  'Europe/Paris',
+  'Europe/Berlin',
+  'Asia/Tokyo',
+  'Asia/Singapore',
+  'Australia/Sydney',
+]
+
+interface LanguageRegionCardProps {
+  form: GeneralSettingsForm
+  setField: <K extends keyof GeneralSettingsForm>(key: K, value: GeneralSettingsForm[K]) => void
+  issues: ValidationIssue[]
+  canEdit: boolean
+}
+
+export function LanguageRegionCard({ form, setField, issues, canEdit }: LanguageRegionCardProps) {
+  const langId = useId()
+  const tzId = useId()
+  const langIssue = issues.find((i) => i.field === 'language')
+  const tzIssue = issues.find((i) => i.field === 'timezone')
+
+  // Surface the loaded value even when it isn't one of our presets, so a
+  // seeded/config value is never silently dropped from the select.
+  const languageOptions = useMemo(() => {
+    if (LANGUAGES.some((l) => l.value === form.language)) return LANGUAGES
+    return [{ value: form.language, label: form.language }, ...LANGUAGES]
+  }, [form.language])
+
+  const timezoneOptions = useMemo(() => {
+    if (TIMEZONES.includes(form.timezone)) return TIMEZONES
+    return [form.timezone, ...TIMEZONES]
+  }, [form.timezone])
+
+  return (
+    <section
+      aria-labelledby={`${langId}-heading`}
+      className="border-border bg-card rounded-lg border p-4"
+    >
+      <h3 id={`${langId}-heading`} className="text-foreground mb-4 text-base font-medium">
+        Language &amp; Region
+      </h3>
+      <div className="space-y-4">
+        <div>
+          <label htmlFor={langId} className={LABEL_CLASS}>
+            Language
+          </label>
+          <select
+            id={langId}
+            value={form.language}
+            disabled={!canEdit}
+            aria-invalid={Boolean(langIssue)}
+            onChange={(e) => setField('language', e.target.value)}
+            className={INPUT_CLASS}
+          >
+            {languageOptions.map((l) => (
+              <option key={l.value} value={l.value}>
+                {l.label}
+              </option>
+            ))}
+          </select>
+          {langIssue && <p className="text-destructive mt-1 text-sm">{langIssue.message}</p>}
+        </div>
+
+        <div>
+          <label htmlFor={tzId} className={LABEL_CLASS}>
+            Timezone
+          </label>
+          <select
+            id={tzId}
+            value={form.timezone}
+            disabled={!canEdit}
+            aria-invalid={Boolean(tzIssue)}
+            onChange={(e) => setField('timezone', e.target.value)}
+            className={INPUT_CLASS}
+          >
+            {timezoneOptions.map((tz) => (
+              <option key={tz} value={tz}>
+                {tz}
+              </option>
+            ))}
+          </select>
+          {tzIssue ? (
+            <p className="text-destructive mt-1 text-sm">{tzIssue.message}</p>
+          ) : (
+            <p className="text-muted-foreground mt-1 text-sm">
+              Applied to dashboard dates, audit logs, scheduled publishing, and form submissions.
+            </p>
+          )}
+        </div>
+      </div>
+    </section>
+  )
+}

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