Add alert toasts and optimize alert status handling

Introduced a toast notification system to display new alerts and warnings. Updated the handling of alert status by centralizing it in the auth context and removing redundant API calls from individual pages. Improved styling for better user experience with alert notifications.

frontend/src/App.jsx

@@ -17,7 +17,7 @@ function Protected({ children }) {
 }
 
 function Layout({ children }) {
-  const { me, logout, uiMode, setUiMode } = useAuth();
+  const { me, logout, uiMode, setUiMode, alertToasts, dismissAlertToast } = useAuth();
   const navClass = ({ isActive }) => `nav-btn${isActive ? " active" : ""}`;
 
   return (
@@ -89,7 +89,24 @@ function Layout({ children }) {
           <button className="logout-btn" onClick={logout}>Logout</button>
         </div>
       </aside>
-      <main className="main">{children}</main>
+      <main className="main">
+        {children}
+        <div className="toast-stack" aria-live="polite" aria-atomic="true">
+          {alertToasts.map((toast) => (
+            <div key={toast.id} className={`alert-toast ${toast.severity || "warning"}`}>
+              <div className="alert-toast-head">
+                <strong>{toast.severity === "alert" ? "New Alert" : "New Warning"}</strong>
+                <button type="button" className="toast-close" onClick={() => dismissAlertToast(toast.id)}>
+                  x
+                </button>
+              </div>
+              <div className="alert-toast-title">{toast.title}</div>
+              <div className="alert-toast-target">{toast.target}</div>
+              <div className="alert-toast-message">{toast.message}</div>
+            </div>
+          ))}
+        </div>
+      </main>
     </div>
   );
 }