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/pages/AlertsPage.jsx

@@ -75,9 +75,8 @@ function buildAlertSuggestions(item) {
 }
 
 export function AlertsPage() {
-  const { tokens, refresh, me } = useAuth();
+  const { tokens, refresh, me, alertStatus } = useAuth();
   const [targets, setTargets] = useState([]);
-  const [status, setStatus] = useState({ warnings: [], alerts: [], warning_count: 0, alert_count: 0 });
   const [definitions, setDefinitions] = useState([]);
   const [form, setForm] = useState(initialForm);
   const [expandedKey, setExpandedKey] = useState("");
@@ -92,12 +91,8 @@ export function AlertsPage() {
   const loadAll = async () => {
     try {
       setError("");
-      const [targetRows, statusPayload] = await Promise.all([
-        apiFetch("/targets", {}, tokens, refresh),
-        apiFetch("/alerts/status", {}, tokens, refresh),
-      ]);
+      const targetRows = await apiFetch("/targets", {}, tokens, refresh);
       setTargets(targetRows);
-      setStatus(statusPayload);
 
       if (canManageAlerts) {
         const defs = await apiFetch("/alerts/definitions", {}, tokens, refresh);
@@ -114,15 +109,6 @@ export function AlertsPage() {
     loadAll();
   }, [canManageAlerts]);
 
-  useEffect(() => {
-    const timer = setInterval(() => {
-      apiFetch("/alerts/status", {}, tokens, refresh)
-        .then(setStatus)
-        .catch(() => {});
-    }, 20000);
-    return () => clearInterval(timer);
-  }, [tokens, refresh]);
-
   const targetOptions = useMemo(
     () => [{ id: "", name: "All targets" }, ...targets.map((t) => ({ id: String(t.id), name: `${t.name} (${t.host}:${t.port})` }))],
     [targets]
@@ -230,11 +216,11 @@ export function AlertsPage() {
 
       <div className="grid two alerts-kpis">
         <div className="card alerts-kpi warning">
-          <strong>{status.warning_count || 0}</strong>
+          <strong>{alertStatus.warning_count || 0}</strong>
           <span>Warnings</span>
         </div>
         <div className="card alerts-kpi alert">
-          <strong>{status.alert_count || 0}</strong>
+          <strong>{alertStatus.alert_count || 0}</strong>
           <span>Alerts</span>
         </div>
       </div>
@@ -242,9 +228,9 @@ export function AlertsPage() {
       <div className="grid two">
         <section className="card">
           <h3>Warnings</h3>
-          {status.warnings?.length ? (
+          {alertStatus.warnings?.length ? (
             <div className="alerts-list">
-              {status.warnings.map((item) => {
+              {alertStatus.warnings.map((item) => {
                 const isOpen = expandedKey === item.alert_key;
                 const suggestions = buildAlertSuggestions(item);
                 return (
@@ -292,9 +278,9 @@ export function AlertsPage() {
 
         <section className="card">
           <h3>Alerts</h3>
-          {status.alerts?.length ? (
+          {alertStatus.alerts?.length ? (
             <div className="alerts-list">
-              {status.alerts.map((item) => {
+              {alertStatus.alerts.map((item) => {
                 const isOpen = expandedKey === item.alert_key;
                 const suggestions = buildAlertSuggestions(item);
                 return (

frontend/src/pages/DashboardPage.jsx

@@ -4,9 +4,8 @@ import { apiFetch } from "../api";
 import { useAuth } from "../state";
 
 export function DashboardPage() {
-  const { tokens, refresh } = useAuth();
+  const { tokens, refresh, alertStatus } = useAuth();
   const [targets, setTargets] = useState([]);
-  const [alertStatus, setAlertStatus] = useState({ warnings: [], alerts: [], warning_count: 0, alert_count: 0 });
   const [search, setSearch] = useState("");
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState("");
@@ -15,13 +14,9 @@ export function DashboardPage() {
     let active = true;
     (async () => {
       try {
-        const [targetRows, alerts] = await Promise.all([
-          apiFetch("/targets", {}, tokens, refresh),
-          apiFetch("/alerts/status", {}, tokens, refresh),
-        ]);
+        const targetRows = await apiFetch("/targets", {}, tokens, refresh);
         if (active) {
           setTargets(targetRows);
-          setAlertStatus(alerts);
         }
       } catch (e) {
         if (active) setError(String(e.message || e));