@prenta/admin 2.6.0 → 2.7.0

package/src/views/settings/EmailSettingsTab.tsx

@@ -3,7 +3,8 @@
 import { AlertTriangle, CheckCircle2, Info, KeyRound, Loader2, Send } from 'lucide-react'
 import { useId } from 'react'
 
-import { SettingsCard, SettingsSaveBar, SettingsToggleRow } from './components.js'
+import { UnsavedBar } from '../../components/ui/UnsavedBar.js'
+import { SettingsCard, SettingsToggleRow, useSavedToast } from './components.js'
 import {
   EMAIL_PROVIDER_OPTIONS,
   useEmailSettings,
@@ -104,7 +105,7 @@ function Notice({
 }) {
   const toneClass =
     tone === 'warning'
-      ? 'border-warning/30 bg-warning/10 text-warning'
+      ? 'border-warning/30 bg-warn-l text-warning'
       : tone === 'success'
         ? 'border-success/30 bg-success/10 text-success'
         : tone === 'error'
@@ -280,6 +281,7 @@ function ProviderFields({ s, canEdit }: { s: UseEmailSettings; canEdit: boolean
 export function EmailSettingsTab({ role }: { role?: string }) {
   const canEdit = String(role ?? '').toUpperCase() === 'ADMIN'
   const s = useEmailSettings(canEdit)
+  useSavedToast(s.saveState)
   const providerGroupId = useId()
 
   if (s.loading) {
@@ -423,13 +425,15 @@ export function EmailSettingsTab({ role }: { role?: string }) {
         )}
       </SettingsCard>
 
-      <SettingsSaveBar
+      <UnsavedBar
         dirty={s.dirty}
-        canEdit={canEdit}
-        hasErrors={false}
-        saveState={s.saveState}
+        saving={s.saveState === 'saving'}
+        saveDisabled={!canEdit}
         onSave={() => void s.save()}
-        onReset={s.reset}
+        onDiscard={s.reset}
+        discardLabel="Reset"
+        saveLabel="Save changes"
+        variant="card"
       />
     </div>
   )

package/src/views/settings/GeneralSettingsTab.tsx

@@ -2,7 +2,8 @@
 
 import { AlertTriangle, Info } from 'lucide-react'
 import { useGeneralSettings } from './useGeneralSettings.js'
-import { SettingsSaveBar, SettingsValidationSummary } from './components.js'
+import { UnsavedBar } from '../../components/ui/UnsavedBar.js'
+import { SettingsValidationSummary, useSavedToast } from './components.js'
 import { SiteIndexStatusCard } from './SiteIndexStatusCard.js'
 import { SiteInformationCard } from './SiteInformationCard.js'
 import { LanguageRegionCard } from './LanguageRegionCard.js'
@@ -17,6 +18,7 @@ export interface GeneralSettingsTabProps {
 export function GeneralSettingsTab({ onNavigate, role }: GeneralSettingsTabProps) {
   const canEdit = role === 'ADMIN'
   const settings = useGeneralSettings(canEdit)
+  useSavedToast(settings.saveState)
 
   const runAudit = () => onNavigate?.('/seo?tab=audit')
 
@@ -113,13 +115,15 @@ export function GeneralSettingsTab({ onNavigate, role }: GeneralSettingsTabProps
         </div>
       )}
 
-      <SettingsSaveBar
+      <UnsavedBar
         dirty={settings.dirty}
-        canEdit={canEdit}
-        hasErrors={settings.hasErrors}
-        saveState={settings.saveState}
+        saving={settings.saveState === 'saving'}
+        saveDisabled={!canEdit || settings.hasErrors}
         onSave={settings.save}
-        onReset={settings.reset}
+        onDiscard={settings.reset}
+        discardLabel="Reset"
+        saveLabel="Save changes"
+        variant="card"
       />
     </div>
   )

package/src/views/settings/McpConnectTab.tsx

@@ -144,7 +144,8 @@ export function McpConnectTab({ onNavigate }: { onNavigate?: (path: string) => v
         <h2 className="text-lg font-medium">MCP</h2>
         <p className="text-muted-foreground text-sm">
           Connect an AI agent to this site. It can draft and edit pages, then you approve what goes
-          live.
+          live. To build from a design, attach the Figma export as the reference and send each photo
+          as its own file.
         </p>
       </div>
 

package/src/views/settings/ProviderConnectionCard.tsx

@@ -38,7 +38,7 @@ function StatusPill({ status }: { status: AiConnectionStatus }) {
       : meta.tone === 'error'
         ? 'border-destructive/30 bg-destructive/10 text-destructive'
         : meta.tone === 'warn'
-          ? 'border-warning/30 bg-warning/10 text-warning'
+          ? 'border-warning/30 bg-warn-l text-warning'
           : 'border-border bg-muted text-muted-foreground'
   return (
     <span

package/src/views/settings/SearchDataCard.tsx

@@ -376,7 +376,7 @@ export function SearchDataCard({ canEdit }: { canEdit: boolean }) {
               className={
                 status.syncStatus.state === 'error'
                   ? 'border-destructive/30 bg-destructive/10 text-destructive flex items-start gap-2 rounded-md border p-3'
-                  : 'border-warning/30 bg-warning/10 text-warning flex items-start gap-2 rounded-md border p-3'
+                  : 'border-warning/30 bg-warn-l text-warning flex items-start gap-2 rounded-md border p-3'
               }
             >
               <AlertTriangle size={14} className="mt-0.5 shrink-0" aria-hidden="true" />

package/src/views/settings/SecurityStatusCard.tsx

@@ -15,7 +15,7 @@ const LEVEL_STYLES: Record<
     word: 'Secure',
   },
   needs_attention: {
-    pill: 'bg-warning/15 text-warning border-warning/30',
+    pill: 'bg-warn-l text-warning border-warning/30',
     Icon: ShieldAlert,
     word: 'Needs attention',
   },
@@ -29,7 +29,7 @@ const LEVEL_STYLES: Record<
 
 const SEVERITY_STYLES: Record<SecurityWarning['severity'], string> = {
   critical: 'border-destructive/30 bg-destructive/10 text-destructive',
-  warning: 'border-warning/30 bg-warning/10 text-warning',
+  warning: 'border-warning/30 bg-warn-l text-warning',
   info: 'border-border bg-muted text-muted-foreground',
 }
 

package/src/views/settings/SecurityTab.tsx

@@ -3,10 +3,11 @@
 import { useEffect } from 'react'
 import { Loader2, ShieldAlert } from 'lucide-react'
 import { parseRouteQuery } from '../../router/index.js'
+import { UnsavedBar } from '../../components/ui/UnsavedBar.js'
 import {
   ConfirmDangerousSettingDialog,
-  SettingsSaveBar,
   SettingsValidationSummary,
+  useSavedToast,
 } from './components.js'
 import { AccessProtectionCard } from './AccessProtectionCard.js'
 import { AuthMfaCard } from './AuthMfaCard.js'
@@ -56,6 +57,7 @@ export function SecurityTab({
     revokeState,
     revokeAllOtherSessions,
   } = useSecuritySettings(canEdit)
+  useSavedToast(saveState)
 
   // Deep-link support: /settings?tab=security&section=sessions|ip-allowlist|audit
   useEffect(() => {
@@ -180,13 +182,15 @@ export function SecurityTab({
         onCancel={dismissLockoutPrompt}
       />
 
-      <SettingsSaveBar
+      <UnsavedBar
         dirty={dirty}
-        canEdit={canEdit}
-        hasErrors={hasErrors}
-        saveState={saveState}
+        saving={saveState === 'saving'}
+        saveDisabled={!canEdit || hasErrors}
         onSave={() => void save()}
-        onReset={reset}
+        onDiscard={reset}
+        discardLabel="Reset"
+        saveLabel="Save changes"
+        variant="card"
       />
     </div>
   )

package/src/views/settings/SeoAutopilotCard.tsx

@@ -516,7 +516,7 @@ export function SeoAutopilotCard({
 
         {paused ? (
           <section
-            className="border-warning/30 bg-warning/10 flex flex-wrap items-center justify-between gap-3 rounded-lg border px-4 py-3"
+            className="border-warning/30 bg-warn-l flex flex-wrap items-center justify-between gap-3 rounded-lg border px-4 py-3"
             aria-label="Autopilot is paused"
           >
             <p className="text-foreground flex items-start gap-2 text-sm">
@@ -725,7 +725,7 @@ export function SeoAutopilotCard({
 
         {vetoed.length > 0 ? (
           <section
-            className="border-warning/30 bg-warning/10 flex items-start gap-2 rounded-lg border px-4 py-3 text-sm"
+            className="border-warning/30 bg-warn-l flex items-start gap-2 rounded-lg border px-4 py-3 text-sm"
             aria-label="Governance warning"
           >
             <AlertTriangle size={16} className="text-warning mt-0.5 shrink-0" aria-hidden="true" />

package/src/views/settings/SeoSettingsTab.tsx

@@ -23,11 +23,12 @@ import { SeoGeoSettingsCard } from './SeoGeoSettingsCard.js'
 import {
   ConfirmDangerousSettingDialog,
   SettingsCard,
-  SettingsSaveBar,
   SettingsSourceBadge,
   SettingsToggleRow,
   SettingsValidationSummary,
+  useSavedToast,
 } from './components.js'
+import { UnsavedBar } from '../../components/ui/UnsavedBar.js'
 import {
   META_DESCRIPTION_MAX,
   META_DESCRIPTION_MIN,
@@ -82,6 +83,7 @@ export interface SeoSettingsTabProps {
 export function SeoSettingsTab({ onNavigate, role }: SeoSettingsTabProps) {
   const canEdit = role === 'ADMIN'
   const seo = useSeoSettings(canEdit)
+  useSavedToast(seo.saveState)
 
   if (seo.loading) {
     return (
@@ -133,7 +135,7 @@ export function SeoSettingsTab({ onNavigate, role }: SeoSettingsTabProps) {
       {!seo.siteUrl ? (
         <div
           role="status"
-          className="border-warning/30 bg-warning/10 text-warning flex items-start gap-2 rounded-lg border p-4 text-sm"
+          className="border-warning/30 bg-warn-l text-warning flex items-start gap-2 rounded-lg border p-4 text-sm"
         >
           <AlertTriangle size={16} className="mt-0.5 shrink-0" aria-hidden="true" />
           Set the public site URL in Settings → General. View site and Share stay disabled until it
@@ -142,7 +144,7 @@ export function SeoSettingsTab({ onNavigate, role }: SeoSettingsTabProps) {
       ) : siteUrlMatchesAdminOrigin(seo.siteUrl) ? (
         <div
           role="status"
-          className="border-warning/30 bg-warning/10 text-warning flex items-start gap-2 rounded-lg border p-4 text-sm"
+          className="border-warning/30 bg-warn-l text-warning flex items-start gap-2 rounded-lg border p-4 text-sm"
         >
           <AlertTriangle size={16} className="mt-0.5 shrink-0" aria-hidden="true" />
           This origin is the admin, not the public site. Set the public site URL to the live apex —
@@ -193,13 +195,15 @@ export function SeoSettingsTab({ onNavigate, role }: SeoSettingsTabProps) {
         </div>
       )}
 
-      <SettingsSaveBar
+      <UnsavedBar
         dirty={seo.dirty}
-        canEdit={canEdit}
-        hasErrors={seo.hasErrors}
-        saveState={seo.saveState}
+        saving={seo.saveState === 'saving'}
+        saveDisabled={!canEdit || seo.hasErrors}
         onSave={seo.save}
-        onReset={seo.reset}
+        onDiscard={seo.reset}
+        discardLabel="Reset"
+        saveLabel="Save changes"
+        variant="card"
       />
     </div>
   )
@@ -729,7 +733,7 @@ function SitemapDefaultsCard({
       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-4 text-sm">
+        <div className="border-warning/30 bg-warn-l text-warning mb-4 flex items-start gap-2 rounded-md border p-4 text-sm">
           <AlertTriangle size={16} className="mt-0.5 shrink-0" aria-hidden="true" />
           Site URL is not set — sitemap URLs may be incorrect. Set it in Settings → General.
         </div>

package/src/views/settings/SiteIndexStatusCard.tsx

@@ -27,7 +27,7 @@ const SEVERITY_STYLES: Record<SiteIndexStatus['severity'], { pill: string; icon:
     icon: <CheckCircle2 size={14} aria-hidden="true" />,
   },
   warning: {
-    pill: 'bg-warning/15 text-warning border-warning/30',
+    pill: 'bg-warn-l text-warning border-warning/30',
     icon: <AlertTriangle size={14} aria-hidden="true" />,
   },
   danger: {

package/src/views/settings/SiteThemeCard.tsx

@@ -5,7 +5,7 @@ import type { PublicTheme } from '@prenta/core/appearance'
 import type { UseAppearanceSettings } from './useAppearanceSettings.js'
 
 const FIELDS: { key: keyof PublicTheme; label: string; hint: string }[] = [
-  { key: 'accent', label: 'Accent', hint: 'Buttons and highlights. Example: #7c3aed' },
+  { key: 'accent', label: 'Accent', hint: 'Buttons and highlights. Example: #2f5bea' },
   { key: 'background', label: 'Background', hint: 'Page surface. Example: #ffffff' },
   { key: 'foreground', label: 'Text', hint: 'Body text. Example: #18181b' },
   { key: 'muted', label: 'Muted text', hint: 'Secondary text. Example: #71717a' },

package/src/views/settings/UpdatesTab.tsx

@@ -17,7 +17,8 @@ import {
 } from 'lucide-react'
 import { useState, type ReactNode } from 'react'
 
-import { SettingsCard, SettingsControlRow, SettingsSaveBar } from './components.js'
+import { UnsavedBar } from '../../components/ui/UnsavedBar.js'
+import { SettingsCard, SettingsControlRow } from './components.js'
 import {
   useUpdates,
   type UpdateChangeType,
@@ -30,7 +31,7 @@ const SEVERITY: Record<
   { banner: string; text: string; label: string }
 > = {
   patch: { banner: 'border-brand/30 bg-brand/10', text: 'text-brand', label: 'Patch' },
-  minor: { banner: 'border-warning/30 bg-warning/10', text: 'text-warning', label: 'Minor' },
+  minor: { banner: 'border-warning/30 bg-warn-l', text: 'text-warning', label: 'Minor' },
   major: {
     banner: 'border-destructive/30 bg-destructive/10',
     text: 'text-destructive',
@@ -58,7 +59,7 @@ const CHANGE_TYPE: Record<UpdateChangeType, { label: string; className: string }
     label: 'Security',
     className: 'border-destructive/40 bg-destructive/15 text-destructive',
   },
-  deprecation: { label: 'Deprecated', className: 'border-warning/30 bg-warning/10 text-warning' },
+  deprecation: { label: 'Deprecated', className: 'border-warning/30 bg-warn-l text-warning' },
 }
 
 const ghInputClass =
@@ -107,7 +108,7 @@ function Notice({
   const toneClass =
     tone === 'destructive'
       ? 'border-destructive/30 bg-destructive/10 text-destructive'
-      : 'border-warning/30 bg-warning/10 text-warning'
+      : 'border-warning/30 bg-warn-l text-warning'
   return (
     <div className={`mt-3 flex items-start gap-2.5 rounded-md border p-4 ${toneClass}`}>
       <span className="mt-0.5 shrink-0" aria-hidden="true">
@@ -418,108 +419,113 @@ export function UpdatesTab({ role }: UpdatesTabProps) {
 
       {/* GitHub integration — admins only */}
       {canManage && (
-        <SettingsCard
-          title="GitHub Integration"
-          description="Connect your repository to enable one-click update PRs. Credentials are encrypted at rest (AES-256-GCM)."
-        >
-          <div className="space-y-4">
-            <SettingsControlRow
-              label="Repository"
-              htmlFor="updates-gh-repo"
-              align="start"
-              description={
-                <>
-                  e.g.{' '}
-                  <code className="bg-muted rounded px-1 font-mono">
-                    actuate-media/my-client-site
-                  </code>
-                </>
-              }
-              control={
-                <div className="w-72 max-w-full">
-                  <input
-                    id="updates-gh-repo"
-                    type="text"
-                    value={form.githubRepo}
-                    onChange={(e) => setField('githubRepo', e.target.value)}
-                    placeholder="owner/repo"
-                    aria-invalid={Boolean(repoError)}
-                    aria-describedby={repoError ? 'updates-gh-repo-error' : undefined}
-                    className={ghInputClass}
-                  />
-                  {repoError && (
-                    <p id="updates-gh-repo-error" className="text-destructive mt-1 text-xs">
-                      {repoError}
-                    </p>
-                  )}
-                </div>
-              }
-            />
-
-            <SettingsControlRow
-              label={
-                <span className="inline-flex items-center gap-2">
-                  GitHub token
-                  {info?.hasGithubToken && !form.githubToken && (
-                    <span className="text-success text-xs font-normal">Saved</span>
-                  )}
-                </span>
-              }
-              htmlFor="updates-gh-token"
-              align="start"
-              description={
-                <>
-                  Needs <code className="bg-muted rounded px-1 font-mono">repo</code> scope. Create
-                  one at{' '}
-                  <a
-                    href="https://github.com/settings/tokens"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    className="text-brand hover:underline"
-                  >
-                    github.com/settings/tokens
-                  </a>
-                  .
-                </>
-              }
-              control={
-                <div className="relative w-72 max-w-full">
-                  <input
-                    id="updates-gh-token"
-                    type={showToken ? 'text' : 'password'}
-                    value={form.githubToken}
-                    onChange={(e) => setField('githubToken', e.target.value)}
-                    placeholder={
-                      info?.hasGithubToken ? '••••••••••••••••' : 'ghp_… or github_pat_…'
-                    }
-                    className={`${ghInputClass} pr-10`}
-                  />
-                  <button
-                    type="button"
-                    onClick={() => setShowToken((s) => !s)}
-                    aria-label={showToken ? 'Hide token' : 'Show token'}
-                    className="text-muted-foreground hover:text-foreground absolute top-1/2 right-2 -translate-y-1/2 p-1"
-                  >
-                    {showToken ? (
-                      <EyeOff size={16} aria-hidden="true" />
-                    ) : (
-                      <Eye size={16} aria-hidden="true" />
+        <>
+          <SettingsCard
+            title="GitHub Integration"
+            description="Connect your repository to enable one-click update PRs. Credentials are encrypted at rest (AES-256-GCM)."
+          >
+            <div className="space-y-4">
+              <SettingsControlRow
+                label="Repository"
+                htmlFor="updates-gh-repo"
+                align="start"
+                description={
+                  <>
+                    e.g.{' '}
+                    <code className="bg-muted rounded px-1 font-mono">
+                      actuate-media/my-client-site
+                    </code>
+                  </>
+                }
+                control={
+                  <div className="w-72 max-w-full">
+                    <input
+                      id="updates-gh-repo"
+                      type="text"
+                      value={form.githubRepo}
+                      onChange={(e) => setField('githubRepo', e.target.value)}
+                      placeholder="owner/repo"
+                      aria-invalid={Boolean(repoError)}
+                      aria-describedby={repoError ? 'updates-gh-repo-error' : undefined}
+                      className={ghInputClass}
+                    />
+                    {repoError && (
+                      <p id="updates-gh-repo-error" className="text-destructive mt-1 text-xs">
+                        {repoError}
+                      </p>
                     )}
-                  </button>
-                </div>
-              }
-            />
-          </div>
+                  </div>
+                }
+              />
 
-          <SettingsSaveBar
+              <SettingsControlRow
+                label={
+                  <span className="inline-flex items-center gap-2">
+                    GitHub token
+                    {info?.hasGithubToken && !form.githubToken && (
+                      <span className="text-success text-xs font-normal">Saved</span>
+                    )}
+                  </span>
+                }
+                htmlFor="updates-gh-token"
+                align="start"
+                description={
+                  <>
+                    Needs <code className="bg-muted rounded px-1 font-mono">repo</code> scope.
+                    Create one at{' '}
+                    <a
+                      href="https://github.com/settings/tokens"
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="text-brand hover:underline"
+                    >
+                      github.com/settings/tokens
+                    </a>
+                    .
+                  </>
+                }
+                control={
+                  <div className="relative w-72 max-w-full">
+                    <input
+                      id="updates-gh-token"
+                      type={showToken ? 'text' : 'password'}
+                      value={form.githubToken}
+                      onChange={(e) => setField('githubToken', e.target.value)}
+                      placeholder={
+                        info?.hasGithubToken ? '••••••••••••••••' : 'ghp_… or github_pat_…'
+                      }
+                      className={`${ghInputClass} pr-10`}
+                    />
+                    <button
+                      type="button"
+                      onClick={() => setShowToken((s) => !s)}
+                      aria-label={showToken ? 'Hide token' : 'Show token'}
+                      className="text-muted-foreground hover:text-foreground absolute top-1/2 right-2 -translate-y-1/2 p-1"
+                    >
+                      {showToken ? (
+                        <EyeOff size={16} aria-hidden="true" />
+                      ) : (
+                        <Eye size={16} aria-hidden="true" />
+                      )}
+                    </button>
+                  </div>
+                }
+              />
+            </div>
+          </SettingsCard>
+          {/* Outside the card: its overflow-hidden would stop the bar sticking.
+              useUpdates toasts its own save result, so no useSavedToast here. */}
+          <UnsavedBar
             dirty={dirty}
-            canEdit={canManage}
-            hasErrors={hasErrors}
-            saveState={saveState}
+            saving={saveState === 'saving'}
+            saveDisabled={!canManage || hasErrors}
             onSave={save}
-            onReset={reset}
+            onDiscard={reset}
+            discardLabel="Reset"
+            saveLabel="Save changes"
+            variant="card"
           />
-        </SettingsCard>
+        </>
       )}
 
       {/* Help */}