@actuate-media/cms-admin 0.25.0 → 0.27.0

package/src/views/Settings.tsx

@@ -10,7 +10,6 @@ import {
   BookOpen,
   Sparkles,
   MessageSquare,
-  Languages,
   Loader2,
   AlertTriangle,
   Download,
@@ -27,39 +26,39 @@ 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 { GeneralSettingsTab } from './settings/GeneralSettingsTab.js'
+import { AppearanceTab } from './settings/AppearanceTab.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', 'appearance', '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,120 +270,12 @@ 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">
-          <div className="rounded-lg border border-gray-200 bg-white p-4">
-            <h3 className="mb-4 text-sm font-semibold text-gray-900">Theme</h3>
-            <div className="space-y-4">
-              <div>
-                <label className="mb-1 block text-sm font-medium text-gray-700">Color Scheme</label>
-                <ThemeSelect />
-              </div>
-              <div>
-                <label className="mb-1 block text-sm font-medium text-gray-700">
-                  Primary Color
-                </label>
-                <input
-                  type="color"
-                  defaultValue="#3b82f6"
-                  className="h-10 w-full rounded-lg border border-gray-300 px-3 py-2"
-                />
-              </div>
-            </div>
-          </div>
+          <AppearanceTab role={session?.user?.role} config={config} />
         </Tabs.Content>
 
         {hasLayoutRegions && (
@@ -725,21 +604,6 @@ export function Settings({ config, onNavigate, initialTab = 'general' }: Setting
   )
 }
 
-function ThemeSelect() {
-  const { theme, setTheme } = useTheme()
-  return (
-    <select
-      value={theme}
-      onChange={(e) => setTheme(e.target.value as 'light' | 'dark' | 'system')}
-      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="light">Light</option>
-      <option value="dark">Dark</option>
-      <option value="system">Auto (System)</option>
-    </select>
-  )
-}
-
 function ToggleSetting({
   label,
   description,

package/src/views/settings/AdminThemeCard.tsx

@@ -0,0 +1,145 @@
+'use client'
+
+import { ACCENT_PRESET_LIST } from '@actuate-media/cms-core/appearance'
+import type { ColorMode, SidebarDensity } from '@actuate-media/cms-core/appearance'
+import { Check, Monitor, Moon, Sun } from 'lucide-react'
+
+import { SettingsSourceBadge } from './components.js'
+import type { UseAppearanceSettings } from './useAppearanceSettings.js'
+
+const COLOR_MODES: { value: ColorMode; label: string; Icon: typeof Sun }[] = [
+  { value: 'light', label: 'Light', Icon: Sun },
+  { value: 'dark', label: 'Dark', Icon: Moon },
+  { value: 'system', label: 'System', Icon: Monitor },
+]
+
+const DENSITIES: { value: SidebarDensity; label: string }[] = [
+  { value: 'default', label: 'Default' },
+  { value: 'compact', label: 'Compact' },
+]
+
+function SegmentedGroup<T extends string>({
+  label,
+  value,
+  options,
+  canEdit,
+  onChange,
+}: {
+  label: string
+  value: T
+  options: { value: T; label: string; Icon?: typeof Sun }[]
+  canEdit: boolean
+  onChange: (v: T) => void
+}) {
+  return (
+    <div
+      role="radiogroup"
+      aria-label={label}
+      className="border-border bg-muted inline-flex flex-wrap rounded-md border p-0.5"
+    >
+      {options.map(({ value: v, label: text, Icon }) => {
+        const active = value === v
+        return (
+          <button
+            key={v}
+            type="button"
+            role="radio"
+            aria-checked={active}
+            disabled={!canEdit}
+            onClick={() => onChange(v)}
+            className={`inline-flex items-center gap-1.5 rounded px-3 py-1.5 text-sm transition-colors disabled:cursor-not-allowed disabled:opacity-50 ${
+              active
+                ? 'bg-card text-foreground shadow-sm'
+                : 'text-muted-foreground hover:text-foreground'
+            }`}
+          >
+            {Icon && <Icon size={14} aria-hidden="true" />}
+            {text}
+          </button>
+        )
+      })}
+    </div>
+  )
+}
+
+export function AdminThemeCard({ 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">Admin Theme</h3>
+        <p className="text-muted-foreground mt-0.5 text-sm">
+          Controls the default look of the admin. Individual users can override the color mode.
+        </p>
+      </header>
+
+      <div className="space-y-5">
+        <div>
+          <div className="mb-2 flex items-center gap-2">
+            <span className="text-foreground text-base font-medium">Color mode</span>
+            <SettingsSourceBadge meta={s.sources.colorMode} />
+          </div>
+          <SegmentedGroup
+            label="Color mode"
+            value={s.appearance.colorMode}
+            options={COLOR_MODES}
+            canEdit={canEdit}
+            onChange={s.setColorMode}
+          />
+        </div>
+
+        <div>
+          <div className="mb-2 flex items-center gap-2">
+            <span className="text-foreground text-base font-medium">Accent color</span>
+            <SettingsSourceBadge meta={s.sources.accent} />
+          </div>
+          <div
+            role="radiogroup"
+            aria-label="Accent color"
+            className="flex flex-wrap items-center gap-3"
+          >
+            {ACCENT_PRESET_LIST.map((preset) => {
+              const active = s.appearance.accent === preset.name
+              const editable = s.sources.accent?.editable !== false
+              return (
+                <button
+                  key={preset.name}
+                  type="button"
+                  role="radio"
+                  aria-checked={active}
+                  aria-label={preset.label}
+                  title={preset.label}
+                  disabled={!canEdit || !editable}
+                  onClick={() => s.setAccent(preset.name)}
+                  className={`focus-visible:ring-ring relative flex h-9 w-9 items-center justify-center rounded-full transition-transform focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 ${
+                    active ? 'ring-foreground ring-2 ring-offset-2' : ''
+                  }`}
+                  style={{ backgroundColor: preset.swatch }}
+                >
+                  {active && <Check size={16} className="text-white" aria-hidden="true" />}
+                </button>
+              )
+            })}
+            {/* Text label so accent is not communicated by color alone. */}
+            <span className="text-muted-foreground text-sm">
+              {ACCENT_PRESET_LIST.find((p) => p.name === s.appearance.accent)?.label ??
+                s.appearance.accent}
+            </span>
+          </div>
+        </div>
+
+        <div>
+          <div className="mb-2 flex items-center gap-2">
+            <span className="text-foreground text-base font-medium">Sidebar density</span>
+          </div>
+          <SegmentedGroup
+            label="Sidebar density"
+            value={s.appearance.density}
+            options={DENSITIES}
+            canEdit={canEdit}
+            onChange={s.setDensity}
+          />
+        </div>
+      </div>
+    </section>
+  )
+}

package/src/views/settings/AppearanceTab.tsx

@@ -0,0 +1,81 @@
+'use client'
+
+import { AlertTriangle, Loader2 } from 'lucide-react'
+
+import { AdminThemeCard } from './AdminThemeCard.js'
+import { BrandPreviewCard } from './BrandPreviewCard.js'
+import { BrandingCard } from './BrandingCard.js'
+import { SettingsSaveBar, SettingsValidationSummary } from './components.js'
+import { TypographyMotionCard } from './TypographyMotionCard.js'
+import { useAppearanceSettings } from './useAppearanceSettings.js'
+
+export interface AppearanceTabProps {
+  /** Current user's role. Only ADMIN can persist changes. */
+  role?: string
+  config?: Record<string, unknown>
+}
+
+function CardSkeleton() {
+  return <div className="border-border bg-card h-48 animate-pulse rounded-lg border" />
+}
+
+export function AppearanceTab({ role, config }: AppearanceTabProps) {
+  const canEdit = role === 'ADMIN'
+  const s = useAppearanceSettings(canEdit, config)
+
+  if (s.loading) {
+    return (
+      <div className="space-y-4" aria-busy="true">
+        <CardSkeleton />
+        <CardSkeleton />
+        <CardSkeleton />
+      </div>
+    )
+  }
+
+  if (s.loadError) {
+    return (
+      <div
+        role="alert"
+        className="border-destructive/30 bg-destructive/10 text-destructive flex items-center justify-between gap-4 rounded-lg border p-4 text-sm"
+      >
+        <span className="flex items-center gap-2">
+          <AlertTriangle size={16} aria-hidden="true" /> {s.loadError}
+        </span>
+        <button
+          type="button"
+          onClick={s.reload}
+          className="border-destructive/40 text-destructive hover:bg-destructive/10 inline-flex items-center gap-1.5 rounded-md border px-3 py-1.5"
+        >
+          <Loader2 size={14} aria-hidden="true" /> Retry
+        </button>
+      </div>
+    )
+  }
+
+  return (
+    <div className="space-y-4">
+      {!canEdit && (
+        <p className="text-muted-foreground border-border bg-muted rounded-lg border p-3 text-sm">
+          You have read-only access to appearance settings.
+        </p>
+      )}
+
+      <SettingsValidationSummary issues={s.issues} />
+
+      <BrandingCard s={s} canEdit={canEdit} />
+      <AdminThemeCard s={s} canEdit={canEdit} />
+      <TypographyMotionCard s={s} canEdit={canEdit} />
+      <BrandPreviewCard s={s} />
+
+      <SettingsSaveBar
+        dirty={s.dirty}
+        canEdit={canEdit}
+        hasErrors={s.issues.some((i) => i.severity === 'error')}
+        saveState={s.saveState}
+        onSave={s.save}
+        onReset={s.reset}
+      />
+    </div>
+  )
+}

package/src/views/settings/BrandPreviewCard.tsx

@@ -0,0 +1,125 @@
+'use client'
+
+import type { ResolvedAdminBrand } from '@actuate-media/cms-core/appearance'
+
+import type { UseAppearanceSettings } from './useAppearanceSettings.js'
+
+function Initials({ initials, size = 'h-8 w-8 text-sm' }: { initials: string; size?: string }) {
+  return (
+    <span
+      className={`bg-brand text-brand-foreground inline-flex shrink-0 items-center justify-center rounded-md font-medium ${size}`}
+      aria-hidden="true"
+    >
+      {initials}
+    </span>
+  )
+}
+
+/** Expanded sidebar lockup preview (primary → mark+title → initials). */
+function SidebarPreview({ admin, dark }: { admin: ResolvedAdminBrand; dark?: boolean }) {
+  const logo = dark && admin.dark ? admin.dark : admin.primary
+  return (
+    <div
+      className={`flex h-14 items-center gap-2.5 rounded-md border px-3 ${
+        dark ? 'border-border bg-foreground' : 'bg-sidebar border-sidebar-border'
+      }`}
+    >
+      {logo ? (
+        <img src={logo.url} alt={logo.alt} className="h-8 w-auto object-contain" />
+      ) : admin.mark ? (
+        <>
+          <img src={admin.mark.url} alt={admin.mark.alt} className="h-8 w-8 object-contain" />
+          <span className={dark ? 'text-background text-sm' : 'text-sidebar-foreground text-sm'}>
+            {admin.initials}
+          </span>
+        </>
+      ) : (
+        <>
+          <Initials initials={admin.initials} />
+          <span className={dark ? 'text-background text-sm' : 'text-sidebar-foreground text-sm'}>
+            Admin
+          </span>
+        </>
+      )}
+    </div>
+  )
+}
+
+function PreviewTile({ label, children }: { label: string; children: React.ReactNode }) {
+  return (
+    <div className="space-y-1.5">
+      <span className="text-muted-foreground text-xs font-medium">{label}</span>
+      {children}
+    </div>
+  )
+}
+
+export function BrandPreviewCard({ s }: { s: UseAppearanceSettings }) {
+  const { admin, public: pub, faviconUrl } = s.preview
+  return (
+    <section className="border-border bg-card rounded-lg border p-6">
+      <header className="mb-4 flex items-center justify-between gap-2">
+        <div>
+          <h3 className="text-foreground text-lg font-medium">Brand Preview</h3>
+          <p className="text-muted-foreground mt-0.5 text-sm">
+            How your brand renders across the admin and public site.
+          </p>
+        </div>
+        {s.dirty && (
+          <span className="text-warning bg-warning/10 border-warning/30 rounded-md border px-2 py-0.5 text-xs">
+            Unsaved
+          </span>
+        )}
+      </header>
+
+      <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
+        <PreviewTile label="Admin sidebar">
+          <SidebarPreview admin={admin} />
+        </PreviewTile>
+
+        <PreviewTile label="Collapsed sidebar">
+          <div className="bg-sidebar border-sidebar-border flex h-14 w-14 items-center justify-center rounded-md border">
+            {admin.mark ? (
+              <img src={admin.mark.url} alt={admin.mark.alt} className="h-8 w-8 object-contain" />
+            ) : (
+              <Initials initials={admin.initials} />
+            )}
+          </div>
+        </PreviewTile>
+
+        <PreviewTile label="Dark mode">
+          <SidebarPreview admin={admin} dark />
+        </PreviewTile>
+
+        <PreviewTile label="Public header">
+          <div className="border-border bg-background flex h-14 items-center gap-2.5 rounded-md border px-3">
+            {pub.primary ? (
+              <img
+                src={pub.primary.url}
+                alt={pub.primary.alt}
+                className="h-8 w-auto object-contain"
+              />
+            ) : pub.mark ? (
+              <>
+                <img src={pub.mark.url} alt={pub.mark.alt} className="h-8 w-8 object-contain" />
+                <span className="text-foreground text-sm">{pub.initials}</span>
+              </>
+            ) : (
+              <span className="text-foreground text-sm font-medium">{pub.initials}</span>
+            )}
+          </div>
+        </PreviewTile>
+
+        <PreviewTile label="Favicon">
+          <div className="border-border bg-muted flex h-14 w-14 items-center justify-center rounded-md border p-2">
+            {faviconUrl ? (
+              <img src={faviconUrl} alt="Favicon preview" className="h-8 w-8 object-contain" />
+            ) : (
+              <span className="text-muted-foreground text-xs">None</span>
+            )}
+          </div>
+        </PreviewTile>
+      </div>
+    </section>
+  )
+}