From fd745d33cbaa8f89b2c849c0fe2a4a816b123c96 Mon Sep 17 00:00:00 2001
From: ryan <ryan@arctel.net>
Date: Mon, 1 Jun 2026 10:45:19 +0800
Subject: [PATCH] =?UTF-8?q?[=E4=BC=98=E5=8C=96]=20=E6=9B=B4=E6=96=B0=20Inl?=
 =?UTF-8?q?ineMessage=20=E7=BB=84=E4=BB=B6=EF=BC=8C=E6=94=AF=E6=8C=81?=
 =?UTF-8?q?=E5=8A=A8=E6=80=81=E5=8F=8D=E9=A6=88=E5=92=8C=E9=9D=99=E6=80=81?=
 =?UTF-8?q?=E8=AD=A6=E5=91=8A=E6=98=BE=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/feedback/inline-message.tsx    | 41 +++++++++++++++----
 1 file changed, 33 insertions(+), 8 deletions(-)

diff --git a/openflare_server/web/components/feedback/inline-message.tsx b/openflare_server/web/components/feedback/inline-message.tsx
index 24cf4579..87ad3209 100644
--- a/openflare_server/web/components/feedback/inline-message.tsx
+++ b/openflare_server/web/components/feedback/inline-message.tsx
@@ -2,9 +2,18 @@
 
 import { useEffect } from 'react';
 import { toast } from 'sonner';
+import { cn } from '@/lib/utils/cn';
 
 type InlineMessageTone = 'info' | 'success' | 'danger';
 
+const toneClasses: Record<InlineMessageTone, string> = {
+  info: 'border-[var(--status-info-border)] bg-[var(--status-info-soft)] text-[var(--status-info-foreground)]',
+  success:
+    'border-[var(--status-success-border)] bg-[var(--status-success-soft)] text-[var(--status-success-foreground)]',
+  danger:
+    'border-[var(--status-danger-border)] bg-[var(--status-danger-soft)] text-[var(--status-danger-foreground)]',
+};
+
 interface InlineMessageProps {
   tone?: InlineMessageTone;
   message: string;
@@ -15,10 +24,12 @@ interface InlineMessageProps {
 export function InlineMessage({
   tone = 'info',
   message,
+  className,
   onClear,
 }: InlineMessageProps) {
   useEffect(() => {
-    if (!message) return;
+    // Only trigger toast if onClear is provided (dynamic feedback)
+    if (!onClear || !message) return;
 
     const options = {
       position: 'bottom-right' as const,
@@ -32,13 +43,27 @@ export function InlineMessage({
       toast(message, options);
     }
 
-    if (onClear) {
-      const timer = setTimeout(() => {
-        onClear();
-      }, 0);
-      return () => clearTimeout(timer);
-    }
+    const timer = setTimeout(() => {
+      onClear();
+    }, 0);
+    return () => clearTimeout(timer);
   }, [tone, message, onClear]);
 
-  return null;
+  // If onClear is provided, this is a toast feedback notice, so render nothing inline
+  if (onClear) {
+    return null;
+  }
+
+  // Otherwise, render as a static/persistent inline alert banner (original behavior)
+  return (
+    <div
+      className={cn(
+        'rounded-2xl border px-4 py-3 text-sm leading-6',
+        toneClasses[tone],
+        className,
+      )}
+    >
+      {message}
+    </div>
+  );
 }