nessi/NexaPG
1
0
Fork 0
Code Issues 19 Pull Requests Actions Packages Projects Releases 13 Activity

Add navigation and smooth scrolling for alert toasts

Browse Source 
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.
This commit is contained in:
Sascha Nesterovic
2026-02-12 13:33:50 +01:00
parent 606d113f34
commit 839943d9fd
4 changed files with 81 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
frontend/src/App.jsx
View File

@@ -1,5 +1,5 @@
import React from "react";
import { NavLink, Navigate, Route, Routes, useLocation } from "react-router-dom";
import { NavLink, Navigate, Route, Routes, useLocation, useNavigate } from "react-router-dom";
import { useAuth } from "./state";
import { LoginPage } from "./pages/LoginPage";
import { DashboardPage } from "./pages/DashboardPage";
@@ -18,6 +18,7 @@ function Protected({ children }) {
function Layout({ children }) {
const { me, logout, uiMode, setUiMode, alertToasts, dismissAlertToast } = useAuth();
const navigate = useNavigate();
const navClass = ({ isActive }) => `nav-btn${isActive ? " active" : ""}`;
return (
@@ -93,12 +94,32 @@ function Layout({ children }) {
{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 key={toast.id} className={`alert-toast ${toast.severity || "warning"}${toast.closing ? " closing" : ""}`}>
<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 className="toast-actions">
<button
type="button"
className="toast-view"
title="Open in Alerts"
onClick={() => {
navigate(`/alerts?open=${encodeURIComponent(toast.alertKey || "")}`);
dismissAlertToast(toast.id);
}}
>
<span aria-hidden="true">
<svg viewBox="0 0 24 24" width="13" height="13">
<path
d="M2 12s3.5-6 10-6 10 6 10 6-3.5 6-10 6-10-6-10-6zm10 3a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"
fill="currentColor"
/>
</svg>
</span>
</button>
<button type="button" className="toast-close" onClick={() => dismissAlertToast(toast.id)}>
x
</button>
</div>
</div>
<div className="alert-toast-title">{toast.title}</div>
<div className="alert-toast-target">{toast.target}</div>