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 = { + 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 ( +
+ {message} +
+ ); }