Add navigation and smooth scrolling for alert toasts

This update enables opening specific alerts via toast buttons, utilizing `useNavigate` to redirect and auto-expand the corresponding alert on the Alerts page. Includes enhancements for toast dismissal with animations and adds new styles for smooth transitions and better user interaction.

frontend/src/pages/AlertsPage.jsx

@@ -1,4 +1,5 @@
 import React, { useEffect, useMemo, useState } from "react";
+import { useLocation } from "react-router-dom";
 import { apiFetch } from "../api";
 import { useAuth } from "../state";
 
@@ -75,6 +76,7 @@ function buildAlertSuggestions(item) {
 }
 
 export function AlertsPage() {
+  const location = useLocation();
   const { tokens, refresh, me, alertStatus } = useAuth();
   const [targets, setTargets] = useState([]);
   const [definitions, setDefinitions] = useState([]);
@@ -206,6 +208,18 @@ export function AlertsPage() {
     setExpandedKey((prev) => (prev === key ? "" : key));
   };
 
+  useEffect(() => {
+    const params = new URLSearchParams(location.search);
+    const openKey = params.get("open");
+    if (!openKey) return;
+    setExpandedKey(openKey);
+    const id = `alert-item-${openKey.replace(/[^a-zA-Z0-9_-]/g, "-")}`;
+    setTimeout(() => {
+      const el = document.getElementById(id);
+      if (el) el.scrollIntoView({ behavior: "smooth", block: "center" });
+    }, 120);
+  }, [location.search]);
+
   if (loading) return <div className="card">Loading alerts...</div>;
 
   return (
@@ -237,6 +251,7 @@ export function AlertsPage() {
                   <article
                     className={`alert-item warning ${isOpen ? "is-open" : ""}`}
                     key={item.alert_key}
+                    id={`alert-item-${item.alert_key.replace(/[^a-zA-Z0-9_-]/g, "-")}`}
                     onClick={() => toggleExpanded(item.alert_key)}
                     role="button"
                     tabIndex={0}
@@ -287,6 +302,7 @@ export function AlertsPage() {
                   <article
                     className={`alert-item alert ${isOpen ? "is-open" : ""}`}
                     key={item.alert_key}
+                    id={`alert-item-${item.alert_key.replace(/[^a-zA-Z0-9_-]/g, "-")}`}
                     onClick={() => toggleExpanded(item.alert_key)}
                     role="button"
                     tabIndex={0}