new tool timer & alert revamp

website/src/main.jsx

@@ -1,5 +1,5 @@
 // Rôle : point d'entrée React, assemble données, routes, shell et overlays.
-import React, { useEffect, useState } from "react";
+import React, { useCallback, useEffect, useState } from "react";
 import { createRoot } from "react-dom/client";
 import "./styles/main.scss";
 import { AppOverlays } from "./components/AppOverlays.jsx";
@@ -9,9 +9,10 @@ import { useIndexedToolboxes } from "./features/toolboxes/storage/useIndexedTool
 import { useToolboxActions } from "./features/toolboxes/useToolboxActions.js";
 import { useAppData } from "./hooks/useAppData.js";
 import { useGameFilters } from "./hooks/useGameFilters.js";
+import { useTimerAlerts } from "./hooks/useTimerAlerts.js";
 import { RouteContent } from "./router/RouteContent.jsx";
 import { useHashRoute } from "./router/hashRouter.js";
-import { moduleStorageKey } from "./features/toolboxes/storage/toolboxStorage.js";
+import { normalizeTimerData } from "./features/toolboxes/storage/toolboxStorage.js";
 
 function App() {
   const route = useHashRoute();
@@ -26,9 +27,9 @@ function App() {
   const [storageError, setStorageError] = useState("");
   const store = useIndexedToolboxes((message) => setStorageError(message));
 
-  function notify(message) {
+  const notify = useCallback((message) => {
     setNotification({ id: Date.now(), message });
-  }
+  }, []);
 
   useEffect(() => {
     function handleNotification(event) {
@@ -37,11 +38,11 @@ function App() {
 
     window.addEventListener("sokkog:notify", handleNotification);
     return () => window.removeEventListener("sokkog:notify", handleNotification);
-  }, []);
+  }, [notify]);
 
   useEffect(() => {
     if (!notification) return undefined;
-    const timeoutId = window.setTimeout(() => setNotification(null), 1800);
+    const timeoutId = window.setTimeout(() => setNotification(null), 120000);
     return () => window.clearTimeout(timeoutId);
   }, [notification]);
 
@@ -63,6 +64,17 @@ function App() {
     setImage
   });
 
+  useTimerAlerts({
+    toolboxes: store.toolboxes,
+    moduleData: store.moduleData,
+    links: store.links,
+    route,
+    drawerGameId,
+    normalizeTimerData,
+    textContent: siteContent?.toolboxes?.modules?.timer,
+    notify
+  });
+
   if (!siteContent) {
     return (
       <main className="startup-error">
@@ -92,6 +104,8 @@ function App() {
         getToolboxGame={getToolboxGame}
         actions={actions}
         storageUsage={store.storageUsage}
+        toastPosition={store.toastPosition}
+        setToastPosition={store.setToastPosition}
         getModuleData={store.getModuleData}
         updateToolbox={actions.updateToolbox}
         updateModuleData={store.updateModuleData}
@@ -126,6 +140,8 @@ function App() {
         image={image}
         setImage={setImage}
         notification={notification}
+        setNotification={setNotification}
+        toastPosition={store.toastPosition}
         getGame={getGame}
         toolboxes={store.toolboxes}
         links={store.links}