@actuate-media/cms-admin 0.36.1 → 0.37.0

package/src/views/settings/BrandingCard.tsx

@@ -11,6 +11,7 @@ import {
 } from 'lucide-react'
 import { useRef } from 'react'
 
+import { SettingsCard, SettingsControlRow, SettingsSubsection } from './components.js'
 import type { BrandAssetField, UseAppearanceSettings } from './useAppearanceSettings.js'
 
 const LOGO_ACCEPT = 'image/svg+xml,image/png'
@@ -54,82 +55,131 @@ function LogoField({
   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}
+  const thumbnail = (
+    <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>
+  )
+
+  const controls = (
+    <>
+      <input
+        ref={inputRef}
+        id={inputId}
+        type="file"
+        accept={accept}
+        aria-label={label}
+        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 = ''
+        }}
+      />
+      {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.toLowerCase()}`}
+        >
+          <Trash2 size={14} aria-hidden="true" /> Remove
+        </button>
+      )}
+      <button
+        type="button"
+        onClick={() => inputRef.current?.click()}
+        disabled={!canEdit || uploading}
+        aria-label={`${asset ? 'Replace' : 'Upload'} ${label.toLowerCase()}`}
+        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"
       >
-        {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"
-          />
+        {uploading ? (
+          <Loader2 size={14} className="animate-spin" aria-hidden="true" />
         ) : (
-          <ImageIcon size={18} className="text-muted-foreground" aria-hidden="true" />
+          <Upload size={14} aria-hidden="true" />
         )}
-      </div>
+        {asset ? 'Replace' : 'Upload'}
+      </button>
+    </>
+  )
 
-      <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>
+  return (
+    <div>
+      <SettingsControlRow
+        leading={thumbnail}
+        label={label}
+        description={helper}
+        control={controls}
+      />
+      {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 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 = ''
-            }}
-          />
+function AdminBrandSourceToggle({
+  mode,
+  canEdit,
+  onChange,
+}: {
+  mode: UseAppearanceSettings['brand']['mode']
+  canEdit: boolean
+  onChange: (mode: 'inheritPublicBrand' | 'customAdminBrand') => void
+}) {
+  return (
+    <div
+      role="radiogroup"
+      aria-label="Brand source"
+      className="border-border bg-muted inline-flex rounded-md border p-0.5"
+    >
+      {(
+        [
+          ['inheritPublicBrand', 'Inherit public brand'],
+          ['customAdminBrand', 'Custom admin logo'],
+        ] as const
+      ).map(([value, text]) => {
+        const active = mode === value
+        return (
           <button
+            key={value}
             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"
+            role="radio"
+            aria-checked={active}
+            disabled={!canEdit}
+            onClick={() => onChange(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'
+            }`}
           >
-            {uploading ? (
-              <Loader2 size={14} className="animate-spin" aria-hidden="true" />
-            ) : (
-              <Upload size={14} aria-hidden="true" />
-            )}
-            {asset ? 'Replace' : `Upload ${label.toLowerCase()}`}
+            {text}
           </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>
   )
 }
@@ -140,46 +190,40 @@ export function BrandingCard({ s, canEdit }: { s: UseAppearanceSettings; canEdit
 
   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>
+  const logoFieldProps = {
+    accept: LOGO_ACCEPT,
+    brand: s.brand,
+    assets: s.assets,
+    uploadingField: s.uploadingField,
+    canEdit,
+    onUpload: s.uploadAsset,
+    onRemove: s.removeAsset,
+  }
 
+  return (
+    <SettingsCard
+      title="Branding"
+      description="Logos shown in the admin sidebar and on the public site."
+    >
       <div className="space-y-5">
         <LogoField
-          label="Primary Logo"
+          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}
+          {...logoFieldProps}
         />
 
         <LogoField
-          label="Favicon / App Icon Source"
+          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}
+          {...logoFieldProps}
         />
 
-        {/* Advanced logo variants disclosure (Logo Mark + Dark Mode Logo). */}
+        {/* Advanced logo variants disclosure (Logo mark + Dark mode logo). */}
         <div className="border-border border-t pt-4">
           <button
             type="button"
@@ -198,109 +242,64 @@ export function BrandingCard({ s, canEdit }: { s: UseAppearanceSettings; canEdit
           {s.showAdvanced && (
             <div className="mt-4 space-y-5">
               <LogoField
-                label="Logo Mark"
+                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}
+                {...logoFieldProps}
               />
               <LogoField
-                label="Dark Mode Logo"
+                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}
+                {...logoFieldProps}
               />
             </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>
+        {/* Admin branding — admin inherits the public brand by default. */}
+        <SettingsSubsection
+          title="Admin branding"
+          description="By default the admin reuses your public brand. Override it for a distinct internal look."
+        >
+          <div className="mt-4 space-y-5">
+            <SettingsControlRow
+              label="Brand source"
+              description="Choose whether the admin inherits the public brand or uses a custom logo."
+              control={
+                <AdminBrandSourceToggle
+                  mode={s.brand.mode}
+                  canEdit={canEdit}
+                  onChange={s.setBrandingMode}
+                />
+              }
+            />
 
-          {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>
+            {custom && (
+              <div className="space-y-5">
+                <LogoField
+                  label="Admin primary logo"
+                  helper="Shown in the admin sidebar instead of the public logo."
+                  field="adminPrimaryLogoAssetId"
+                  warning={warningFor('adminPrimaryLogoAssetId')}
+                  {...logoFieldProps}
+                />
+                <LogoField
+                  label="Admin logo mark"
+                  helper="Square mark for the collapsed admin sidebar."
+                  field="adminLogoMarkAssetId"
+                  square
+                  warning={warningFor('adminLogoMarkAssetId')}
+                  {...logoFieldProps}
+                />
+              </div>
+            )}
+          </div>
+        </SettingsSubsection>
 
         {/* Default alt text */}
         <div className="border-border border-t pt-4">
@@ -327,6 +326,6 @@ export function BrandingCard({ s, canEdit }: { s: UseAppearanceSettings; canEdit
           {s.saveError}
         </p>
       )}
-    </section>
+    </SettingsCard>
   )
 }

package/src/views/settings/TypographyMotionCard.tsx

@@ -14,7 +14,7 @@ export function TypographyMotionCard({
   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>
+        <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>