@actuate-media/cms-admin 0.36.0 → 0.37.0

package/src/views/settings/SeoSettingsTab.tsx

@@ -17,6 +17,7 @@ import { MediaPickerModal } from '../../components/MediaPickerModal.js'
 import { SEOConfigPanel } from '../../components/SEOConfigPanel.js'
 import {
   ConfirmDangerousSettingDialog,
+  SettingsCard,
   SettingsSaveBar,
   SettingsSourceBadge,
   SettingsToggleRow,
@@ -82,7 +83,7 @@ export function SeoSettingsTab({ onNavigate, role }: SeoSettingsTabProps) {
       <div className="space-y-4" aria-busy="true" aria-live="polite">
         <span className="sr-only">Loading SEO settings…</span>
         {[0, 1, 2, 3].map((i) => (
-          <div key={i} className="border-border bg-card rounded-lg border p-4">
+          <div key={i} className="border-border bg-card rounded-lg border p-6">
             <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" />
@@ -208,7 +209,6 @@ function SeoWorkspaceCallout({ onNavigate }: { onNavigate?: (path: string) => vo
 // ---------------------------------------------------------------------------
 
 function MetaDefaultsCard({ seo, canEdit }: { seo: UseSeoSettings; canEdit: boolean }) {
-  const headingId = useId()
   const templateId = useId()
   const descId = useId()
   const [pickerOpen, setPickerOpen] = useState(false)
@@ -229,11 +229,10 @@ function MetaDefaultsCard({ seo, canEdit }: { seo: UseSeoSettings; canEdit: bool
   const imageEditable = sources.defaultOgImage?.editable !== false && canEdit
 
   return (
-    <section aria-labelledby={headingId} className="border-border bg-card rounded-lg border p-4">
-      <h3 id={headingId} className="text-foreground mb-4 text-base font-medium">
-        Meta Defaults
-      </h3>
-
+    <SettingsCard
+      title="Meta Defaults"
+      description="Fallback page title, description, and social image applied when a page defines none of its own."
+    >
       <div className="space-y-4">
         {/* Title template */}
         <div>
@@ -362,7 +361,7 @@ function MetaDefaultsCard({ seo, canEdit }: { seo: UseSeoSettings; canEdit: bool
         onSelect={(url) => setField('defaultOgImage', url)}
         onSelectItem={(item) => setField('defaultSocialImageAssetId', item.id)}
       />
-    </section>
+    </SettingsCard>
   )
 }
 
@@ -458,20 +457,14 @@ function VerificationField({
 }
 
 function SearchEngineVerificationCard({ seo, canEdit }: { seo: UseSeoSettings; canEdit: boolean }) {
-  const headingId = useId()
   const { form, setField } = seo
   const onChange = (key: keyof SeoSettingsForm, value: string) => setField(key, value as never)
 
   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">
-        Search Engine Verification
-      </h3>
-      <p className="text-muted-foreground mb-4 text-sm">
-        Paste the verification token from each provider. We render only safe meta tags into your
-        site&apos;s head — never arbitrary HTML.
-      </p>
-
+    <SettingsCard
+      title="Search Engine Verification"
+      description="Paste the verification token from each provider. We render only safe meta tags into your site's head — never arbitrary HTML."
+    >
       <div className="space-y-4">
         <VerificationField
           label="Google Search Console"
@@ -523,7 +516,7 @@ function SearchEngineVerificationCard({ seo, canEdit }: { seo: UseSeoSettings; c
           />
         </div>
       </details>
-    </section>
+    </SettingsCard>
   )
 }
 
@@ -540,7 +533,6 @@ function SitemapDefaultsCard({
   canEdit: boolean
   onNavigate?: (path: string) => void
 }) {
-  const headingId = useId()
   const [pendingDisable, setPendingDisable] = useState(false)
   const { form, setField, sitemap, siteUrl, isProduction, regenerateSitemap, regenerating } = seo
 
@@ -558,11 +550,10 @@ function SitemapDefaultsCard({
     : 'Never'
 
   return (
-    <section aria-labelledby={headingId} className="border-border bg-card rounded-lg border p-4">
-      <h3 id={headingId} className="text-foreground mb-4 text-base font-medium">
-        Sitemap
-      </h3>
-
+    <SettingsCard
+      title="Sitemap"
+      description="Control XML sitemap generation and whether search engines are pinged on publish."
+    >
       {!siteUrl && (
         <div className="border-warning/30 bg-warning/10 text-warning mb-4 flex items-start gap-2 rounded-md border p-3 text-sm">
           <AlertTriangle size={16} className="mt-0.5 shrink-0" aria-hidden="true" />
@@ -644,7 +635,7 @@ function SitemapDefaultsCard({
         }}
         onCancel={() => setPendingDisable(false)}
       />
-    </section>
+    </SettingsCard>
   )
 }
 

package/src/views/settings/SiteIndexStatusCard.tsx

@@ -5,11 +5,11 @@ import {
   XCircle,
   AlertTriangle,
   HelpCircle,
-  ShieldCheck,
   ExternalLink,
   Search,
 } from 'lucide-react'
 import type { ReactNode } from 'react'
+import { SettingsCard } from './components.js'
 import type { SiteIndexStatus } from './useGeneralSettings.js'
 
 interface SiteIndexStatusCardProps {
@@ -61,23 +61,11 @@ export function SiteIndexStatusCard({
   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 && (
+    <SettingsCard
+      title="Site Index Status"
+      description="Current effective crawl and indexing state."
+      actions={
+        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}`}
           >
@@ -85,9 +73,9 @@ export function SiteIndexStatusCard({
             <span className="sr-only">Status: </span>
             {status.label}
           </span>
-        )}
-      </div>
-
+        ) : undefined
+      }
+    >
       {loading && !status ? (
         <div className="space-y-2" aria-hidden="true">
           <div className="bg-muted h-4 w-2/3 animate-pulse rounded" />
@@ -128,7 +116,7 @@ export function SiteIndexStatusCard({
           )}
         </>
       )}
-    </section>
+    </SettingsCard>
   )
 }
 

package/src/views/settings/SiteInformationCard.tsx

@@ -2,7 +2,7 @@
 
 import { useId } from 'react'
 import { CheckCircle2 } from 'lucide-react'
-import { SettingsSourceBadge } from './components.js'
+import { SettingsCard, SettingsSourceBadge } from './components.js'
 import type {
   GeneralSettingsForm,
   SettingsSourceMetadata,
@@ -39,13 +39,7 @@ export function SiteInformationCard({
   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>
+    <SettingsCard title="Site Information" description="Your site's name, tagline, and public URL.">
       <div className="space-y-4">
         <div>
           <label htmlFor={titleId} className={LABEL_CLASS}>
@@ -117,6 +111,6 @@ export function SiteInformationCard({
           )}
         </div>
       </div>
-    </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>