feat: differentiating between exceptions and other notifications

frontend/src/App.tsx

@@ -119,8 +119,9 @@ const App = () => {
   const [state, dispatch] = useReducer(reducer, null);
   const [isInstantUpdate, setIsInstantUpdate] = useState(true);
   const [showSettings, setShowSettings] = useState(false);
-  const [showNotification, setShowNotification] = useState(true);
+  const [showNotification, setShowNotification] = useState(false);
   const [notifications, setNotifications] = useState([]);
+  const [exceptions, setExceptions] = useState([]); // Exception notifications
 
   const removeNotificationById = (id: number) => {
     setNotifications((prevNotifications) =>
@@ -159,7 +160,7 @@ const App = () => {
       time: timeString,
       text: `${value.data.type}: ${value.data.exception}.`
     };
-    setNotifications((prevNotifications) => [newNotification, ...prevNotifications]);
+    setExceptions((prevNotifications) => [newNotification, ...prevNotifications]);
   }
 
   useEffect(() => {
@@ -190,18 +191,14 @@ const App = () => {
         </Container>
       </Navbar>
 
-      {showNotification && (
       <ToastContainer
         className="navbarOffset toastContainer"
         position="top-end"
         style={{ position: 'fixed' }}>
-          {notifications.map((notification) => (
+        {showNotification &&
+          notifications.map((notification) => (
             <Toast
-              className={
+              className="notificationToast"
-                notification.type === 'exception'
-                  ? 'exceptionToast'
-                  : 'notificationToast'
-              }
               key={notification.id}
               onClose={() => {
                 removeNotificationById(notification.id);
@@ -216,26 +213,37 @@ const App = () => {
                 }
               }}
               show={true}
-              autohide={notification.type !== 'exception'} // Do not autohide for 'exception' type notifications
+              autohide={true}
-              delay={notification.type === 'exception' ? 0 : 2000} // No delay for 'exception' type notifications
+              delay={2000}>
-            >
               <Toast.Header
                 closeButton={notification.type === 'exception'}
-                className={`${
+                className={`${'notificationToast'} text-right`}>
-                  notification.type === 'exception'
+                <strong className="me-auto">Notification</strong>
-                    ? 'exceptionToast'
-                    : 'notificationToast'
-                } text-right`}>
-                <strong className="me-auto">
-                  {notification.type === 'exception' ? 'Exception' : 'Notification'}
-                </strong>
                 <small>{notification.time}</small>
               </Toast.Header>
               <Toast.Body>{notification.text}</Toast.Body>
             </Toast>
           ))}
+        {exceptions.map((exception) => (
+          // Always render exceptions, regardless of showNotification
+          <Toast
+            className="exceptionToast"
+            key={exception.id}
+            onClose={() => {
+              setExceptions((prevExceptions) =>
+                prevExceptions.filter((e) => e.id !== exception.id)
+              );
+            }}
+            show={true}
+            autohide={false}>
+            <Toast.Header closeButton className="exceptionToast text-right">
+              <strong className="me-auto">Exception</strong>
+              <small>{exception.time}</small>
+            </Toast.Header>
+            <Toast.Body>{exception.text}</Toast.Body>
+          </Toast>
+        ))}
       </ToastContainer>
-      )}
 
       <Offcanvas
         show={showSettings}

src/pydase/frontend/asset-manifest.json

@@ -1,13 +1,13 @@
 {
   "files": {
     "main.css": "/static/css/main.d5ec2545.css",
-    "main.js": "/static/js/main.09e2d82a.js",
+    "main.js": "/static/js/main.f745d155.js",
     "index.html": "/index.html",
     "main.d5ec2545.css.map": "/static/css/main.d5ec2545.css.map",
-    "main.09e2d82a.js.map": "/static/js/main.09e2d82a.js.map"
+    "main.f745d155.js.map": "/static/js/main.f745d155.js.map"
   },
   "entrypoints": [
     "static/css/main.d5ec2545.css",
-    "static/js/main.09e2d82a.js"
+    "static/js/main.f745d155.js"
   ]
 }

src/pydase/frontend/index.html

@@ -1 +1 @@
-<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site displaying a pydase UI."/><link rel="apple-touch-icon" href="/logo192.png"/><link rel="manifest" href="/manifest.json"/><title>pydase App</title><script defer="defer" src="/static/js/main.09e2d82a.js"></script><link href="/static/css/main.d5ec2545.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
+<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site displaying a pydase UI."/><link rel="apple-touch-icon" href="/logo192.png"/><link rel="manifest" href="/manifest.json"/><title>pydase App</title><script defer="defer" src="/static/js/main.f745d155.js"></script><link href="/static/css/main.d5ec2545.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>