From 772a331f04748233e67c417db06087945e732ee0 Mon Sep 17 00:00:00 2001
From: LucasDLTG <lucas.deletang.legravier@gmail.com>
Date: Sun, 13 Sep 2026 15:55:11 +0200
Subject: [PATCH] fix: hanging notifications

---
 src/components/Notifications/Notifications.css |  2 +-
 src/hooks/useNotifications.tsx                 | 13 +++++--------
 2 files changed, 6 insertions(+), 9 deletions(-)

diff --git a/src/components/Notifications/Notifications.css b/src/components/Notifications/Notifications.css
index ee12b27..085abcd 100644
--- a/src/components/Notifications/Notifications.css
+++ b/src/components/Notifications/Notifications.css
@@ -1,7 +1,7 @@
 .notifications {
   position: fixed;
   right: var(--space-5);
-  bottom: var(--space-5);
+  top: var(--space-5);
   z-index: 9999;
 
   display: flex;
diff --git a/src/hooks/useNotifications.tsx b/src/hooks/useNotifications.tsx
index abdc53d..210e520 100644
--- a/src/hooks/useNotifications.tsx
+++ b/src/hooks/useNotifications.tsx
@@ -4,20 +4,17 @@ import { NotificationType, Notification } from '../types';
 export function useNotifications() {
   const [notifications, setNotifications] = useState<Notification[]>([]);
   const hovered = useRef<Set<number>>(new Set());
+  const nextId = useRef(0); // monotonically increasing counter
 
   const notify = useCallback(
     (message: string, type: NotificationType = 'error', dspName?: string) => {
-      const id = Date.now();
+      const id = nextId.current++;
 
       const fullMessage = dspName ? `${dspName}: ${message}` : message;
 
       setNotifications((prev) => [
         ...prev,
-        {
-          id,
-          message: fullMessage,
-          type,
-        },
+        { id, message: fullMessage, type },
       ]);
 
       const removeLater = () => {
@@ -25,7 +22,6 @@ export function useNotifications() {
           setTimeout(removeLater, 1000);
           return;
         }
-
         setNotifications((prev) => prev.filter((n) => n.id !== id));
       };
 
@@ -35,6 +31,7 @@ export function useNotifications() {
   );
 
   const removeNotification = useCallback((id: number) => {
+    hovered.current.delete(id); // prevent leaking stale hover state
     setNotifications((prev) => prev.map((n) => (n.id === id ? { ...n, removing: true } : n)));
 
     setTimeout(() => {
@@ -56,4 +53,4 @@ export function useNotifications() {
     removeNotification,
     hoverNotification,
   };
-}
+}
\ No newline at end of file