Feat: Notification section (#2033)

* Feature/Notification-section

* fix notification ui and add local storage variable to save the state

* add notification component to app.tsx

frontend/src/App.tsx

@@ -15,6 +15,7 @@ import useTokenAuth from './hooks/useTokenAuth';
 import Navigation from './Navigation';
 import PageNotFound from './PageNotFound';
 import Setting from './settings';
+import Notification from './components/Notification';
 
 function AuthWrapper({ children }: { children: React.ReactNode }) {
   const { isAuthLoading } = useTokenAuth();
@@ -52,11 +53,27 @@ function MainLayout() {
 }
 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={