fixed blinking

frontend/src/components/react/admin/Settings.tsx

@@ -1,5 +1,6 @@
 import { useState, useEffect } from 'react';
 import { getConfig, updateConfig, ApiError } from '../../../lib/api';
+import { notify } from '../../../lib/confirm';
 import type { SiteConfig, ContactLink } from '../../../lib/types';
 
 const CONTACT_KINDS: { value: string; label: string; placeholder: string }[] = [
@@ -13,8 +14,6 @@ const CONTACT_KINDS: { value: string; label: string; placeholder: string }[] = [
 
 export default function Settings() {
   const [config, setConfig] = useState<Partial<SiteConfig>>({});
-  const [alert, setAlert] = useState<{ msg: string; type: 'success' | 'error' } | null>(null);
-
   useEffect(() => {
     getConfig()
       .then(setConfig)
@@ -22,8 +21,7 @@ export default function Settings() {
   }, []);
 
   function showAlert(msg: string, type: 'success' | 'error') {
-    setAlert({ msg, type });
-    setTimeout(() => setAlert(null), 5000);
+    notify(msg, type);
   }
 
   function update<K extends keyof SiteConfig>(key: K, value: SiteConfig[K]) {
@@ -62,19 +60,6 @@ export default function Settings() {
 
   return (
     <form onSubmit={handleSubmit} className="space-y-10">
-      {alert && (
-        <div
-          className={`p-4 text-sm font-display italic text-center border ${
-            alert.type === 'success'
-              ? 'bg-[var(--green)]/15 text-[var(--green)] border-[var(--green)]/30'
-              : 'bg-[var(--red)]/15 text-[var(--red)] border-[var(--red)]/30'
-          }`}
-          style={{ borderRadius: 1 }}
-        >
-          {alert.msg}
-        </div>
-      )}
-
       <section className="space-y-6">
         <h2 className="font-display italic text-2xl text-[var(--text)] border-l-2 border-[var(--mauve)] pl-4">Identity</h2>
         <div className="grid md:grid-cols-2 gap-6">