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/styles.css

@@ -979,6 +979,75 @@ td {
   gap: 8px;
 }
 
+.toast-stack {
+  position: fixed;
+  right: 20px;
+  bottom: 20px;
+  z-index: 50;
+  display: grid;
+  gap: 10px;
+  width: min(360px, calc(100vw - 36px));
+  pointer-events: none;
+}
+
+.alert-toast {
+  pointer-events: auto;
+  border-radius: 12px;
+  border: 1px solid #3b669b;
+  background: linear-gradient(180deg, #11305d, #0d2448);
+  box-shadow: 0 16px 34px #03132782;
+  padding: 10px 12px;
+  animation: toastIn 0.22s ease;
+}
+
+.alert-toast.warning {
+  border-color: #db9125;
+  background: linear-gradient(180deg, #4a2d0f, #35210d);
+}
+
+.alert-toast.alert {
+  border-color: #e4556d;
+  background: linear-gradient(180deg, #57202f, #3b1520);
+}
+
+.alert-toast-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  margin-bottom: 2px;
+}
+
+.alert-toast-head strong {
+  font-size: 12px;
+  letter-spacing: 0.02em;
+}
+
+.toast-close {
+  border: 1px solid #5d80b1;
+  background: #0f274b;
+  border-radius: 8px;
+  font-size: 11px;
+  line-height: 1;
+  padding: 4px 7px;
+}
+
+.alert-toast-title {
+  font-weight: 700;
+  margin-bottom: 2px;
+}
+
+.alert-toast-target {
+  color: #b9cde8;
+  font-size: 12px;
+  margin-bottom: 4px;
+}
+
+.alert-toast-message {
+  color: #dceafe;
+  font-size: 12px;
+}
+
 .range-picker {
   display: flex;
   gap: 8px;
@@ -1101,6 +1170,17 @@ select:-webkit-autofill {
   }
 }
 
+@keyframes toastIn {
+  from {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
 .query {
   max-width: 400px;
   white-space: nowrap;