keepsafe rework & alert ajustments

website/src/main.jsx

@@ -23,12 +23,19 @@ function App() {
   const [linkModalGameId, setLinkModalGameId] = useState("");
   const [drawerGameId, setDrawerGameId] = useState("");
   const [image, setImage] = useState(null);
-  const [notification, setNotification] = useState(null);
+  const [notifications, setNotifications] = useState([]);
   const [storageError, setStorageError] = useState("");
   const store = useIndexedToolboxes((message) => setStorageError(message));
 
   const notify = useCallback((message) => {
-    setNotification({ id: Date.now(), message });
+    setNotifications((current) => [
+      { id: `${Date.now()}-${Math.random().toString(36).slice(2)}`, message },
+      ...current
+    ].slice(0, 5));
+  }, []);
+
+  const dismissNotification = useCallback((notificationId) => {
+    setNotifications((current) => current.filter((notification) => notification.id !== notificationId));
   }, []);
 
   useEffect(() => {
@@ -40,12 +47,6 @@ function App() {
     return () => window.removeEventListener("sokkog:notify", handleNotification);
   }, [notify]);
 
-  useEffect(() => {
-    if (!notification) return undefined;
-    const timeoutId = window.setTimeout(() => setNotification(null), 120000);
-    return () => window.clearTimeout(timeoutId);
-  }, [notification]);
-
   const t = (key, { capitalize = false } = {}) => {
     const value = mhwilds.translations[key] || String(key || "").replace(/_/g, " ");
     return capitalize ? value.charAt(0).toUpperCase() + value.slice(1) : value;
@@ -139,8 +140,8 @@ function App() {
         setStorageError={setStorageError}
         image={image}
         setImage={setImage}
-        notification={notification}
-        setNotification={setNotification}
+        notifications={notifications}
+        dismissNotification={dismissNotification}
         toastPosition={store.toastPosition}
         getGame={getGame}
         toolboxes={store.toolboxes}