Refactoring the notification Section

frontend/.env.development

@@ -2,5 +2,6 @@
 VITE_BASE_URL=http://localhost:5173
 VITE_API_HOST=http://127.0.0.1:7091
 VITE_API_STREAMING=true
+
 VITE_NOTIFICATION_TEXT="What's new in 0.14.0 — Changelog"
 VITE_NOTIFICATION_LINK="#"

frontend/package.json

@@ -41,6 +41,7 @@
     "rehype-katex": "^7.0.1",
     "remark-gfm": "^4.0.0",
     "remark-math": "^6.0.0",
+    "sonner": "^2.0.7",
     "tailwind-merge": "^3.3.1"
   },
   "devDependencies": {

frontend/src/App.tsx

@@ -15,7 +15,10 @@ import useTokenAuth from './hooks/useTokenAuth';
 import Navigation from './Navigation';
 import PageNotFound from './PageNotFound';
 import Setting from './settings';
-import Notification from './components/Notification';
+// import Notification from './components/Notification';
+
+import { Toaster } from 'sonner';
+import { NotificationToast } from './components/NotificationToast';
 
 function AuthWrapper({ children }: { children: React.ReactNode }) {
   const { isAuthLoading } = useTokenAuth();
@@ -48,32 +51,18 @@ function MainLayout() {
         <Outlet />
       </div>
       <UploadToast />
+      <Toaster position="bottom-right" richColors />
+      <NotificationToast />
     </div>
   );
 }
 export default function App() {
   const [, , componentMounted] = useDarkTheme();
-  const [showNotification, setShowNotification] = useState<boolean>(() => {
-    const saved = localStorage.getItem('showNotification');
-    return saved ? JSON.parse(saved) : true;
-  });
-  const notificationText = import.meta.env.VITE_NOTIFICATION_TEXT;
-  const notificationLink = import.meta.env.VITE_NOTIFICATION_LINK;
   if (!componentMounted) {
     return <div />;
   }
   return (
     <div className="relative h-full overflow-hidden">
-      {notificationLink && notificationText && showNotification && (
-        <Notification
-          notificationText={notificationText}
-          notificationLink={notificationLink}
-          handleCloseNotification={() => {
-            setShowNotification(false);
-            localStorage.setItem('showNotification', 'false');
-          }}
-        />
-      )}
       <Routes>
         <Route
           element={

frontend/src/components/NotificationToast.tsx

@@ -0,0 +1,52 @@
+import { useEffect } from 'react';
+import { toast } from 'sonner';
+
+export function NotificationToast() {
+  useEffect(() => {
+    const message = import.meta.env.VITE_NOTIFICATION_TEXT;
+    const link = import.meta.env.VITE_NOTIFICATION_LINK;
+
+    console.log('Omar Emad , ', message, link);
+    if (!message) return;
+
+    const lastSeenNotification = localStorage.getItem('lastseennotification');
+    if (lastSeenNotification === `${message}/${link}`) return;
+    localStorage.setItem('lastseennotification', `${message}/${link}`);
+
+    toast.custom(
+      (t) => (
+        <div
+          onClick={() => toast.dismiss(t)}
+          className="flex cursor-pointer items-center justify-between gap-3 rounded-lg bg-[linear-gradient(90deg,rgba(57,0,134,0)_16.83%,#6222B7_53.02%,rgba(57,0,134,0)_87.5%),linear-gradient(90deg,#390086_0%,#6222B7_100%)] px-5 py-4 text-sm text-white transition select-none hover:opacity-90"
+        >
+          {link ? (
+            <a
+              href={link}
+              target="_blank"
+              rel="noopener noreferrer"
+              onClick={(e) => e.stopPropagation()}
+              className="underline hover:no-underline"
+            >
+              {message}
+            </a>
+          ) : (
+            <span>{message}</span>
+          )}
+
+          <button
+            onClick={(e) => {
+              e.stopPropagation();
+              toast.dismiss(t);
+            }}
+            className="text-lg leading-none font-bold text-white/70 hover:text-white"
+          >
+            ×
+          </button>
+        </div>
+      ),
+      { duration: 10000, position: 'bottom-right' }, // 10 seconds , measured in ms
+    );
+  }, []);
+
+  return null; // this component doesn’t render anything itself
+}