@actuate-media/cms-admin 0.25.0 → 0.27.0

package/src/views/settings/BrandingCard.tsx

@@ -0,0 +1,332 @@
+'use client'
+
+import {
+  AlertTriangle,
+  ChevronDown,
+  ChevronRight,
+  ImageIcon,
+  Loader2,
+  Trash2,
+  Upload,
+} from 'lucide-react'
+import { useRef } from 'react'
+
+import type { BrandAssetField, UseAppearanceSettings } from './useAppearanceSettings.js'
+
+const LOGO_ACCEPT = 'image/svg+xml,image/png'
+
+function previewSurface(dark: boolean): string {
+  return dark ? 'bg-foreground border-border' : 'bg-muted border-border'
+}
+
+function LogoField({
+  label,
+  helper,
+  field,
+  accept,
+  square,
+  darkSurface,
+  brand,
+  assets,
+  uploadingField,
+  canEdit,
+  warning,
+  onUpload,
+  onRemove,
+}: {
+  label: string
+  helper: string
+  field: BrandAssetField
+  accept: string
+  square?: boolean
+  darkSurface?: boolean
+  brand: UseAppearanceSettings['brand']
+  assets: UseAppearanceSettings['assets']
+  uploadingField: BrandAssetField | null
+  canEdit: boolean
+  warning?: string
+  onUpload: (field: BrandAssetField, file: File) => void
+  onRemove: (field: BrandAssetField) => void
+}) {
+  const inputRef = useRef<HTMLInputElement>(null)
+  const assetId = brand[field]
+  const asset = assetId ? assets[assetId] : undefined
+  const uploading = uploadingField === field
+  const inputId = `brand-${field}`
+
+  return (
+    <div className="flex items-start gap-4">
+      <div
+        className={`flex shrink-0 items-center justify-center overflow-hidden rounded-md border p-2 ${previewSurface(
+          Boolean(darkSurface),
+        )} ${square ? 'h-12 w-12' : 'h-12 w-20'}`}
+        aria-hidden={!asset}
+      >
+        {asset?.url ? (
+          // Never stretch/crop — contain preserves aspect ratio + transparency.
+          <img
+            src={asset.url}
+            alt={`${label} preview`}
+            className="max-h-full max-w-full object-contain"
+          />
+        ) : (
+          <ImageIcon size={18} className="text-muted-foreground" aria-hidden="true" />
+        )}
+      </div>
+
+      <div className="min-w-0 flex-1">
+        <label htmlFor={inputId} className="text-foreground block text-base font-medium">
+          {label}
+        </label>
+        <p className="text-muted-foreground mt-0.5 text-sm">{helper}</p>
+
+        <div className="mt-2 flex items-center gap-2">
+          <input
+            ref={inputRef}
+            id={inputId}
+            type="file"
+            accept={accept}
+            className="sr-only"
+            disabled={!canEdit || uploading}
+            onChange={(e) => {
+              const file = e.target.files?.[0]
+              if (file) onUpload(field, file)
+              if (inputRef.current) inputRef.current.value = ''
+            }}
+          />
+          <button
+            type="button"
+            onClick={() => inputRef.current?.click()}
+            disabled={!canEdit || uploading}
+            className="border-border text-foreground hover:bg-accent inline-flex items-center gap-2 rounded-md border px-3 py-1.5 text-sm transition-colors disabled:cursor-not-allowed disabled:opacity-50"
+          >
+            {uploading ? (
+              <Loader2 size={14} className="animate-spin" aria-hidden="true" />
+            ) : (
+              <Upload size={14} aria-hidden="true" />
+            )}
+            {asset ? 'Replace' : `Upload ${label.toLowerCase()}`}
+          </button>
+          {asset && (
+            <button
+              type="button"
+              onClick={() => onRemove(field)}
+              disabled={!canEdit}
+              className="text-muted-foreground hover:text-destructive inline-flex items-center gap-1.5 rounded-md px-2 py-1.5 text-sm transition-colors disabled:cursor-not-allowed disabled:opacity-50"
+              aria-label={`Remove ${label}`}
+            >
+              <Trash2 size={14} aria-hidden="true" /> Remove
+            </button>
+          )}
+        </div>
+
+        {warning && (
+          <p
+            className="text-warning mt-2 flex items-start gap-1.5 text-sm"
+            role="status"
+            aria-live="polite"
+          >
+            <AlertTriangle size={14} className="mt-0.5 shrink-0" aria-hidden="true" /> {warning}
+          </p>
+        )}
+      </div>
+    </div>
+  )
+}
+
+export function BrandingCard({ s, canEdit }: { s: UseAppearanceSettings; canEdit: boolean }) {
+  const warningFor = (field: BrandAssetField): string | undefined =>
+    s.issues.find((i) => i.field === field && i.severity === 'warning')?.message
+
+  const custom = s.brand.mode === 'customAdminBrand'
+
+  return (
+    <section className="border-border bg-card rounded-lg border p-6">
+      <header className="mb-4">
+        <h3 className="text-foreground text-lg font-medium">Branding</h3>
+        <p className="text-muted-foreground mt-0.5 text-sm">
+          Logos shown in the admin sidebar and on the public site.
+        </p>
+      </header>
+
+      <div className="space-y-5">
+        <LogoField
+          label="Primary Logo"
+          helper="SVG or PNG, up to 1MB. Best for the public header and full admin sidebar."
+          field="publicPrimaryLogoAssetId"
+          accept={LOGO_ACCEPT}
+          brand={s.brand}
+          assets={s.assets}
+          uploadingField={s.uploadingField}
+          canEdit={canEdit}
+          warning={warningFor('publicPrimaryLogoAssetId')}
+          onUpload={s.uploadAsset}
+          onRemove={s.removeAsset}
+        />
+
+        <LogoField
+          label="Favicon / App Icon Source"
+          helper="32×32 PNG or SVG. A larger square image is fine — it scales down cleanly."
+          field="faviconSourceAssetId"
+          accept={LOGO_ACCEPT}
+          square
+          brand={s.brand}
+          assets={s.assets}
+          uploadingField={s.uploadingField}
+          canEdit={canEdit}
+          warning={warningFor('faviconSourceAssetId')}
+          onUpload={s.uploadAsset}
+          onRemove={s.removeAsset}
+        />
+
+        {/* Advanced logo variants disclosure (Logo Mark + Dark Mode Logo). */}
+        <div className="border-border border-t pt-4">
+          <button
+            type="button"
+            onClick={() => s.setShowAdvanced(!s.showAdvanced)}
+            aria-expanded={s.showAdvanced}
+            className="text-foreground hover:text-brand inline-flex items-center gap-1.5 text-sm font-medium transition-colors"
+          >
+            {s.showAdvanced ? (
+              <ChevronDown size={16} aria-hidden="true" />
+            ) : (
+              <ChevronRight size={16} aria-hidden="true" />
+            )}
+            Advanced logo variants
+          </button>
+
+          {s.showAdvanced && (
+            <div className="mt-4 space-y-5">
+              <LogoField
+                label="Logo Mark"
+                helper="Square icon or mark. Used for the collapsed sidebar, compact UI, and app icons."
+                field="publicLogoMarkAssetId"
+                accept={LOGO_ACCEPT}
+                square
+                brand={s.brand}
+                assets={s.assets}
+                uploadingField={s.uploadingField}
+                canEdit={canEdit}
+                warning={warningFor('publicLogoMarkAssetId')}
+                onUpload={s.uploadAsset}
+                onRemove={s.removeAsset}
+              />
+              <LogoField
+                label="Dark Mode Logo"
+                helper="Optional. Used on dark backgrounds or the dark admin theme."
+                field="publicDarkLogoAssetId"
+                accept={LOGO_ACCEPT}
+                darkSurface
+                brand={s.brand}
+                assets={s.assets}
+                uploadingField={s.uploadingField}
+                canEdit={canEdit}
+                warning={warningFor('publicDarkLogoAssetId')}
+                onUpload={s.uploadAsset}
+                onRemove={s.removeAsset}
+              />
+            </div>
+          )}
+        </div>
+
+        {/* Admin branding mode — admin inherits the public brand by default. */}
+        <div className="border-border border-t pt-4">
+          <div className="flex items-center gap-2">
+            <span className="text-foreground text-base font-medium">Admin branding</span>
+          </div>
+          <p className="text-muted-foreground mt-0.5 text-sm">
+            Admin uses the public brand by default.
+          </p>
+          <div
+            role="radiogroup"
+            aria-label="Admin branding mode"
+            className="border-border bg-muted mt-2 inline-flex rounded-md border p-0.5"
+          >
+            {(
+              [
+                ['inheritPublicBrand', 'Inherit public brand'],
+                ['customAdminBrand', 'Custom admin logo'],
+              ] as const
+            ).map(([value, text]) => {
+              const active = s.brand.mode === value
+              return (
+                <button
+                  key={value}
+                  type="button"
+                  role="radio"
+                  aria-checked={active}
+                  disabled={!canEdit}
+                  onClick={() => s.setBrandingMode(value)}
+                  className={`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'
+                  }`}
+                >
+                  {text}
+                </button>
+              )
+            })}
+          </div>
+
+          {custom && (
+            <div className="mt-4 space-y-5">
+              <LogoField
+                label="Admin Primary Logo"
+                helper="Shown in the admin sidebar instead of the public logo."
+                field="adminPrimaryLogoAssetId"
+                accept={LOGO_ACCEPT}
+                brand={s.brand}
+                assets={s.assets}
+                uploadingField={s.uploadingField}
+                canEdit={canEdit}
+                warning={warningFor('adminPrimaryLogoAssetId')}
+                onUpload={s.uploadAsset}
+                onRemove={s.removeAsset}
+              />
+              <LogoField
+                label="Admin Logo Mark"
+                helper="Square mark for the collapsed admin sidebar."
+                field="adminLogoMarkAssetId"
+                accept={LOGO_ACCEPT}
+                square
+                brand={s.brand}
+                assets={s.assets}
+                uploadingField={s.uploadingField}
+                canEdit={canEdit}
+                warning={warningFor('adminLogoMarkAssetId')}
+                onUpload={s.uploadAsset}
+                onRemove={s.removeAsset}
+              />
+            </div>
+          )}
+        </div>
+
+        {/* Default alt text */}
+        <div className="border-border border-t pt-4">
+          <label htmlFor="brand-alt" className="text-foreground block text-base font-medium">
+            Logo alt text
+          </label>
+          <p className="text-muted-foreground mt-0.5 mb-2 text-sm">
+            Used by screen readers on the public site. Defaults to the Site Title when empty.
+          </p>
+          <input
+            id="brand-alt"
+            type="text"
+            value={s.brand.defaultLogoAltText ?? ''}
+            disabled={!canEdit}
+            onChange={(e) => s.setAltText(e.target.value)}
+            placeholder="Site Title"
+            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"
+          />
+        </div>
+      </div>
+
+      {s.saveError && (
+        <p className="text-destructive mt-4 text-sm" role="alert">
+          {s.saveError}
+        </p>
+      )}
+    </section>
+  )
+}

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