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

@@ -1000,6 +1000,10 @@ td {
   animation: toastIn 0.22s ease;
 }
 
+.alert-toast.closing {
+  animation: toastOut 0.22s ease forwards;
+}
+
 .alert-toast.warning {
   border-color: #db9125;
   background: linear-gradient(180deg, #4a2d0f, #35210d);
@@ -1023,6 +1027,24 @@ td {
   letter-spacing: 0.02em;
 }
 
+.toast-actions {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.toast-view {
+  border: 1px solid #5d80b1;
+  background: #0f274b;
+  border-radius: 8px;
+  font-size: 11px;
+  line-height: 1;
+  padding: 4px 7px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
 .toast-close {
   border: 1px solid #5d80b1;
   background: #0f274b;
@@ -1181,6 +1203,17 @@ select:-webkit-autofill {
   }
 }
 
+@keyframes toastOut {
+  from {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+}
+
 .query {
   max-width: 400px;
   white-space: nowrap;