@actuate-media/cms-admin 0.36.0 → 0.37.0

package/src/views/settings/AISettingsTab.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { AlertTriangle, Bot, Info, Loader2, Plus } from 'lucide-react'
+import { AlertTriangle, Info, Loader2, Plus } from 'lucide-react'
 import { useId, useMemo, useState } from 'react'
 import { toast } from 'sonner'
 import { AiFeaturesCard } from './AiFeaturesCard.js'
@@ -8,7 +8,7 @@ import { BrandVoiceCard } from './BrandVoiceCard.js'
 import { ModelSelector } from './ModelSelector.js'
 import { MonthlyUsageCard } from './MonthlyUsageCard.js'
 import { ProviderConnectionCard } from './ProviderConnectionCard.js'
-import { SettingsSaveBar } from './components.js'
+import { SettingsCard, SettingsSaveBar } from './components.js'
 import {
   useAiSettings,
   type AiProviderKey,
@@ -41,7 +41,7 @@ export function AISettingsTab({ role }: AISettingsTabProps) {
       <div className="space-y-4" aria-busy="true" aria-live="polite">
         <span className="sr-only">Loading AI settings…</span>
         {[0, 1, 2].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" />
@@ -125,7 +125,6 @@ export function AISettingsTab({ role }: AISettingsTabProps) {
 // ---------------------------------------------------------------------------
 
 function AssistantCard({ ai, canEdit }: { ai: UseAiSettings; canEdit: boolean }) {
-  const headingId = useId()
   const providerSelectId = useId()
   const [refreshing, setRefreshing] = useState(false)
 
@@ -150,21 +149,10 @@ function AssistantCard({ ai, canEdit }: { ai: UseAiSettings; canEdit: boolean })
   }
 
   return (
-    <section aria-labelledby={headingId} className="border-border bg-card rounded-lg border p-4">
-      <div className="mb-4 flex items-center gap-2">
-        <span className="bg-brand/10 text-brand flex h-9 w-9 items-center justify-center rounded-lg">
-          <Bot size={18} aria-hidden="true" />
-        </span>
-        <div>
-          <h3 id={headingId} className="text-foreground text-base font-medium">
-            AI Assistant
-          </h3>
-          <p className="text-muted-foreground text-sm">
-            The default provider and model used across AI features.
-          </p>
-        </div>
-      </div>
-
+    <SettingsCard
+      title="AI Assistant"
+      description="The default provider and model used across AI features."
+    >
       {ai.providers.length === 0 ? (
         <div className="border-border bg-muted/40 text-muted-foreground rounded-md border border-dashed p-4 text-sm">
           No AI providers are connected yet. Add one below to enable AI features.
@@ -206,7 +194,7 @@ function AssistantCard({ ai, canEdit }: { ai: UseAiSettings; canEdit: boolean })
           />
         </div>
       )}
-    </section>
+    </SettingsCard>
   )
 }
 
@@ -215,16 +203,14 @@ function AssistantCard({ ai, canEdit }: { ai: UseAiSettings; canEdit: boolean })
 // ---------------------------------------------------------------------------
 
 function ProviderConnectionsSection({ ai, canEdit }: { ai: UseAiSettings; canEdit: boolean }) {
-  const headingId = useId()
   const [adding, setAdding] = useState(false)
 
   return (
-    <section aria-labelledby={headingId} className="space-y-3">
-      <div className="flex items-center justify-between">
-        <h3 id={headingId} className="text-foreground text-base font-medium">
-          Provider connections
-        </h3>
-        {canEdit && !adding && (
+    <SettingsCard
+      title="Provider connections"
+      description="Connect Anthropic, OpenAI, xAI, or a custom OpenAI-compatible endpoint."
+      actions={
+        canEdit && !adding ? (
           <button
             type="button"
             onClick={() => setAdding(true)}
@@ -233,57 +219,59 @@ function ProviderConnectionsSection({ ai, canEdit }: { ai: UseAiSettings; canEdi
             <Plus size={14} aria-hidden="true" />
             Add provider
           </button>
+        ) : undefined
+      }
+    >
+      <div className="space-y-3">
+        {adding && (
+          <AddProviderForm
+            ai={ai}
+            onDone={() => setAdding(false)}
+            onCancel={() => setAdding(false)}
+          />
         )}
-      </div>
 
-      {adding && (
-        <AddProviderForm
-          ai={ai}
-          onDone={() => setAdding(false)}
-          onCancel={() => setAdding(false)}
-        />
-      )}
-
-      {ai.providers.map((p) => (
-        <ProviderConnectionCard
-          key={p.id}
-          provider={p}
-          canEdit={canEdit}
-          busy={ai.busyProviderId === p.id}
-          onTest={async () => {
-            const res = await ai.testProvider(p.id)
-            if (!res.ok) toast.error(res.error ?? res.message ?? 'Connection test failed.')
-            else toast.success(res.message ?? 'Connection successful.')
-          }}
-          onSyncModels={async () => {
-            const res = await ai.syncModels(p.id)
-            if (!res.ok) toast.error(res.error ?? 'Failed to refresh models.')
-            else if (res.fromFallback)
-              toast.warning(res.warning ?? 'Showing the curated model list.')
-            else toast.success('Model list refreshed.')
-          }}
-          onUpdateKey={async (apiKey) => {
-            const res = await ai.updateProvider(p.id, { apiKey })
-            if (!res.ok) toast.error(res.error ?? 'Failed to update key.')
-            else toast.success('API key updated.')
-          }}
-          onUpdateBaseUrl={async (baseUrl) => {
-            const res = await ai.updateProvider(p.id, { baseUrl })
-            if (!res.ok) toast.error(res.error ?? 'Failed to update base URL.')
-            else toast.success('Base URL updated.')
-          }}
-          onDisconnect={async () => {
-            const res = await ai.deleteProvider(p.id)
-            if (!res.ok) toast.error(res.error ?? 'Failed to disconnect.')
-            else toast.success(`${p.displayName} disconnected.`)
-          }}
-        />
-      ))}
+        {ai.providers.map((p) => (
+          <ProviderConnectionCard
+            key={p.id}
+            provider={p}
+            canEdit={canEdit}
+            busy={ai.busyProviderId === p.id}
+            onTest={async () => {
+              const res = await ai.testProvider(p.id)
+              if (!res.ok) toast.error(res.error ?? res.message ?? 'Connection test failed.')
+              else toast.success(res.message ?? 'Connection successful.')
+            }}
+            onSyncModels={async () => {
+              const res = await ai.syncModels(p.id)
+              if (!res.ok) toast.error(res.error ?? 'Failed to refresh models.')
+              else if (res.fromFallback)
+                toast.warning(res.warning ?? 'Showing the curated model list.')
+              else toast.success('Model list refreshed.')
+            }}
+            onUpdateKey={async (apiKey) => {
+              const res = await ai.updateProvider(p.id, { apiKey })
+              if (!res.ok) toast.error(res.error ?? 'Failed to update key.')
+              else toast.success('API key updated.')
+            }}
+            onUpdateBaseUrl={async (baseUrl) => {
+              const res = await ai.updateProvider(p.id, { baseUrl })
+              if (!res.ok) toast.error(res.error ?? 'Failed to update base URL.')
+              else toast.success('Base URL updated.')
+            }}
+            onDisconnect={async () => {
+              const res = await ai.deleteProvider(p.id)
+              if (!res.ok) toast.error(res.error ?? 'Failed to disconnect.')
+              else toast.success(`${p.displayName} disconnected.`)
+            }}
+          />
+        ))}
 
-      {ai.providers.length === 0 && !adding && (
-        <p className="text-muted-foreground text-sm">No providers connected.</p>
-      )}
-    </section>
+        {ai.providers.length === 0 && !adding && (
+          <p className="text-muted-foreground text-sm">No providers connected.</p>
+        )}
+      </div>
+    </SettingsCard>
   )
 }
 
@@ -332,7 +320,7 @@ function AddProviderForm({
   }
 
   return (
-    <div className="border-border bg-card rounded-lg border p-4">
+    <div className="border-border bg-background rounded-lg border p-4">
       <h4 className="text-foreground mb-3 text-base font-medium">Add a provider</h4>
       <div className="space-y-3">
         <div>

package/src/views/settings/AdminThemeCard.tsx

@@ -66,7 +66,7 @@ export function AdminThemeCard({ s, canEdit }: { s: UseAppearanceSettings; canEd
   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>
+        <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>

package/src/views/settings/AiFeaturesCard.tsx

@@ -2,7 +2,7 @@
 
 import { AlertTriangle } from 'lucide-react'
 import { useId } from 'react'
-import { SettingsToggleRow } from './components.js'
+import { SettingsCard, SettingsToggleRow } from './components.js'
 import { capabilityLabel, effectiveFeatureModel, isModelCompatible } from './featureModel.js'
 import type { AiFeatureView, AiModelView } from './useAiSettings.js'
 
@@ -31,17 +31,11 @@ export function AiFeaturesCard({
   onToggle: (key: string, enabled: boolean) => void
   onSetFeatureModel: (key: string, modelId: string) => void
 }) {
-  const headingId = useId()
   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">
-        AI Features
-      </h3>
-      <p className="text-muted-foreground mb-4 text-sm">
-        Turn individual AI-powered features on or off, and optionally route each to a specific
-        model.
-      </p>
-
+    <SettingsCard
+      title="AI Features"
+      description="Turn individual AI-powered features on or off, and optionally route each to a specific model."
+    >
       {features.length === 0 ? (
         <p className="text-muted-foreground text-sm">No AI features are available.</p>
       ) : (
@@ -59,7 +53,7 @@ export function AiFeaturesCard({
           ))}
         </div>
       )}
-    </section>
+    </SettingsCard>
   )
 }
 

package/src/views/settings/BrandPreviewCard.tsx

@@ -60,7 +60,7 @@ export function BrandPreviewCard({ s }: { s: UseAppearanceSettings }) {
     <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>
+          <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>

package/src/views/settings/BrandVoiceCard.tsx

@@ -1,8 +1,7 @@
 'use client'
 
-import { Sparkles } from 'lucide-react'
 import { useId } from 'react'
-import { SettingsToggleRow } from './components.js'
+import { SettingsCard, SettingsToggleRow } from './components.js'
 import type { BrandVoiceForm } from './useAiSettings.js'
 
 const INPUT_CLASS =
@@ -28,7 +27,6 @@ export function BrandVoiceCard({
   canEdit: boolean
   onChange: (patch: Partial<BrandVoiceForm>) => void
 }) {
-  const headingId = useId()
   const nameId = useId()
   const toneId = useId()
   const audienceId = useId()
@@ -37,21 +35,10 @@ export function BrandVoiceCard({
   const disabled = !canEdit
 
   return (
-    <section aria-labelledby={headingId} className="border-border bg-card rounded-lg border p-4">
-      <div className="mb-4 flex items-center gap-2">
-        <span className="bg-brand/10 text-brand flex h-9 w-9 items-center justify-center rounded-lg">
-          <Sparkles size={18} aria-hidden="true" />
-        </span>
-        <div>
-          <h3 id={headingId} className="text-foreground text-base font-medium">
-            Brand voice
-          </h3>
-          <p className="text-muted-foreground text-sm">
-            Teach the AI how your brand sounds. Applied to content writing and SEO copy.
-          </p>
-        </div>
-      </div>
-
+    <SettingsCard
+      title="Brand voice"
+      description="Teach the AI how your brand sounds. Applied to content writing and SEO copy."
+    >
       <div className="space-y-4">
         <SettingsToggleRow
           label="Apply brand voice"
@@ -147,6 +134,6 @@ export function BrandVoiceCard({
           </div>
         </div>
       </div>
-    </section>
+    </SettingsCard>
   )
 }