@prenta/admin 2.6.1 → 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/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 */}

package/src/views/settings/components.tsx

@@ -1,9 +1,16 @@
 'use client'
 
 import * as Dialog from '@radix-ui/react-dialog'
-import { AlertTriangle, Check, Loader2, Lock } from 'lucide-react'
-import { useId, type ReactNode } from 'react'
-import { Card, CardContent, CardDescription, CardHeader } from '../../components/ui/Card.js'
+import { AlertTriangle, Lock } from 'lucide-react'
+import { useEffect, useId, type ReactNode } from 'react'
+import { toast } from 'sonner'
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '../../components/ui/Card.js'
 import { Toggle } from '../../components/ui/Toggle.js'
 import { adminPortalContainer } from '../../lib/portal-container.js'
 import type { SettingsSourceMetadata, ValidationIssue } from './useGeneralSettings.js'
@@ -14,8 +21,8 @@ import type { SettingsSourceMetadata, ValidationIssue } from './useGeneralSettin
  * slot. This is the single source of truth for the Settings design language —
  * every tab's sections render through it so spacing, padding, typography, and
  * the title/description rhythm stay identical across General, Appearance,
- * Security, SEO, AI, and beyond. Match the Appearance tab exactly: `p-6`,
- * `text-lg` medium title, `text-sm` muted description.
+ * Security, SEO, AI, and beyond. Chrome comes from the shared `Card`
+ * primitives (kit `.ap-card` / `.ap-ch`).
  */
 export function SettingsCard({
   title,
@@ -46,14 +53,11 @@ export function SettingsCard({
       role="region"
       className={className}
     >
-      <CardHeader className="flex items-start justify-between gap-3">
-        <div className="min-w-0">
-          <Heading
-            id={headingId}
-            className="text-[length:var(--fs-card)] font-semibold text-[var(--txt)]"
-          >
+      <CardHeader>
+        <div className="min-w-0 flex-1">
+          <CardTitle as={Heading} id={headingId}>
             {title}
-          </Heading>
+          </CardTitle>
           {description && <CardDescription>{description}</CardDescription>}
         </div>
         {actions && <div className="flex shrink-0 items-center gap-2">{actions}</div>}
@@ -212,7 +216,7 @@ export function SettingsValidationSummary({ issues }: { issues: ValidationIssue[
       className={`flex items-start gap-3 rounded-lg border p-4 text-sm ${
         isError
           ? 'border-destructive/30 bg-destructive/10 text-destructive'
-          : 'border-warning/30 bg-warning/10 text-warning'
+          : 'border-warning/30 bg-warn-l text-warning'
       }`}
     >
       <AlertTriangle size={16} className="mt-0.5 shrink-0" aria-hidden="true" />
@@ -225,54 +229,14 @@ export function SettingsValidationSummary({ issues }: { issues: ValidationIssue[
   )
 }
 
-/** Sticky footer with Reset + Save, gated on dirty state. */
-export function SettingsSaveBar({
-  dirty,
-  canEdit,
-  hasErrors,
-  saveState,
-  onSave,
-  onReset,
-}: {
-  dirty: boolean
-  canEdit: boolean
-  hasErrors: boolean
-  saveState: 'idle' | 'saving' | 'success' | 'error'
-  onSave: () => void
-  onReset: () => void
-}) {
-  const saving = saveState === 'saving'
-  return (
-    <div className="border-border bg-background/80 sticky bottom-0 z-10 flex items-center justify-end gap-4 border-t py-3 backdrop-blur">
-      {saveState === 'success' && !dirty && (
-        <span className="text-success flex items-center gap-1.5 text-sm" aria-live="polite">
-          <Check size={16} aria-hidden="true" /> Saved
-        </span>
-      )}
-      {dirty && !saving && (
-        <span className="text-muted-foreground text-sm" aria-live="polite">
-          Unsaved changes
-        </span>
-      )}
-      <button
-        type="button"
-        onClick={onReset}
-        disabled={!dirty || saving}
-        className="text-muted-foreground hover:text-foreground rounded-md px-3 py-2 text-base transition-colors disabled:cursor-not-allowed disabled:opacity-40"
-      >
-        Reset
-      </button>
-      <button
-        type="button"
-        onClick={onSave}
-        disabled={!canEdit || !dirty || hasErrors || saving}
-        className="bg-brand text-brand-foreground focus-visible:ring-ring inline-flex items-center gap-2 rounded-md px-5 py-2 text-base font-medium transition-opacity hover:opacity-90 focus-visible:ring-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50"
-      >
-        {saving && <Loader2 size={16} className="animate-spin" aria-hidden="true" />}
-        {saving ? 'Saving…' : 'Save Changes'}
-      </button>
-    </div>
-  )
+/**
+ * Confirms a finished save. The tabs' `UnsavedBar` renders only while the form
+ * is dirty, so it is already gone when the save lands; the toast says it worked.
+ */
+export function useSavedToast(saveState: 'idle' | 'saving' | 'success' | 'error') {
+  useEffect(() => {
+    if (saveState === 'success') toast.success('Saved')
+  }, [saveState])
 }
 
 /** Confirmation dialog for dangerous indexing changes. */
@@ -297,7 +261,7 @@ export function ConfirmDangerousSettingDialog({
         <Dialog.Overlay className="fixed inset-0 z-50 bg-black/50" />
         <Dialog.Content className="bg-card text-card-foreground fixed top-1/2 left-1/2 z-50 w-full max-w-md -translate-x-1/2 -translate-y-1/2 rounded-lg p-6 shadow-lg">
           <div className="mb-3 flex items-center gap-2">
-            <span className="bg-warning/15 text-warning flex h-9 w-9 items-center justify-center rounded-full">
+            <span className="bg-warn-l text-warning flex h-9 w-9 items-center justify-center rounded-full">
               <AlertTriangle size={20} aria-hidden="true" />
             </span>
             <Dialog.Title className="text-foreground text-lg font-medium">{title}</Dialog.Title>