From 0fa52f58cc0195a852b054ae3b55785a3942bd21 Mon Sep 17 00:00:00 2001
From: quinton-8 <jumazquinton.jq@gmail.com>
Date: Wed, 17 Jun 2026 12:31:31 +0300
Subject: [PATCH] modify the toast notification system to prevent spamming
 multiple   error notifications on the right side of the screen when the
 server is   stopped.

---
 dashboard/src/components/Toast.tsx | 32 +++++++++++++++++++++++++++++-
 1 file changed, 31 insertions(+), 1 deletion(-)

diff --git a/dashboard/src/components/Toast.tsx b/dashboard/src/components/Toast.tsx
index 4769dbc4..94ce243d 100644
--- a/dashboard/src/components/Toast.tsx
+++ b/dashboard/src/components/Toast.tsx
@@ -71,9 +71,39 @@ export function ToastProvider({ children }: ToastProviderProps) {
 
   const error = useCallback(
     (title: string, message?: string) => {
+      const isConnectionError =
+        message?.toLowerCase().includes('failed to fetch') ||
+        message?.toLowerCase().includes('networkerror') ||
+        message?.toLowerCase().includes('http 502') ||
+        message?.toLowerCase().includes('http 503') ||
+        title.toLowerCase().includes('failed to fetch') ||
+        title.toLowerCase().includes('networkerror');
+
+      if (isConnectionError) {
+        setToasts(prev => {
+          const offlineTitle = 'Server Connection Lost';
+          const hasOfflineToast = prev.some(t => t.title === offlineTitle);
+          if (hasOfflineToast) return prev;
+
+          const id = crypto.randomUUID?.() ?? `t-${Date.now()}-${Math.random().toString(36).slice(2)}`;
+          setTimeout(() => removeToast(id), 6000);
+
+          return [
+            ...prev,
+            {
+              id,
+              type: 'error',
+              title: offlineTitle,
+              message: 'The backend server is unreachable. Please check if the server is running.',
+              duration: 6000,
+            },
+          ];
+        });
+        return;
+      }
       addToast({ type: 'error', title, message, duration: 6000 });
     },
-    [addToast],
+    [addToast, removeToast],
   );
 
   const warning = useCallback(