From 486634386eee9ccefdcfec703e0d1477d1048fe4 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Fri, 28 Nov 2025 22:12:11 +0000
Subject: [PATCH] =?UTF-8?q?fix:=20synchroniser=20les=20instances=20du=20Po?=
 =?UTF-8?q?modoro=20Timer=20en=20temps=20r=C3=A9el?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Ajouter un événement custom 'pomodoroStateChange' lors des modifications
- Chaque instance écoute cet événement et se synchronise avec localStorage
- Quand on met le timer sur pause dans le modal, l'instance cachée se met aussi en pause
- Les deux instances restent parfaitement synchronisées
---
 src/components/PomodoroTimer.tsx | 32 +++++++++++++++++++++++++++++++-
 1 file changed, 31 insertions(+), 1 deletion(-)

diff --git a/src/components/PomodoroTimer.tsx b/src/components/PomodoroTimer.tsx
index da420d9..9f829f5 100644
--- a/src/components/PomodoroTimer.tsx
+++ b/src/components/PomodoroTimer.tsx
@@ -39,23 +39,53 @@ export function PomodoroTimer({ onStateChange }: PomodoroTimerProps = {}) {
   });
   const intervalRef = useRef<NodeJS.Timeout | null>(null);
 
-  // Save state to localStorage whenever it changes
+  // Save state to localStorage whenever it changes and dispatch custom event
   useEffect(() => {
     localStorage.setItem('pomodoroMode', mode);
+    window.dispatchEvent(new CustomEvent('pomodoroStateChange'));
   }, [mode]);
 
   useEffect(() => {
     localStorage.setItem('pomodoroTimeLeft', timeLeft.toString());
+    window.dispatchEvent(new CustomEvent('pomodoroStateChange'));
   }, [timeLeft]);
 
   useEffect(() => {
     localStorage.setItem('pomodoroIsRunning', isRunning.toString());
+    window.dispatchEvent(new CustomEvent('pomodoroStateChange'));
   }, [isRunning]);
 
   useEffect(() => {
     localStorage.setItem('pomodoroSessionsCompleted', sessionsCompleted.toString());
+    window.dispatchEvent(new CustomEvent('pomodoroStateChange'));
   }, [sessionsCompleted]);
 
+  // Listen for localStorage changes from other instances
+  useEffect(() => {
+    const handleStorageChange = () => {
+      const savedMode = localStorage.getItem('pomodoroMode') as TimerMode;
+      const savedTimeLeft = localStorage.getItem('pomodoroTimeLeft');
+      const savedIsRunning = localStorage.getItem('pomodoroIsRunning');
+      const savedSessions = localStorage.getItem('pomodoroSessionsCompleted');
+
+      if (savedMode && savedMode !== mode) {
+        setMode(savedMode);
+      }
+      if (savedTimeLeft && parseInt(savedTimeLeft) !== timeLeft) {
+        setTimeLeft(parseInt(savedTimeLeft));
+      }
+      if (savedIsRunning && (savedIsRunning === 'true') !== isRunning) {
+        setIsRunning(savedIsRunning === 'true');
+      }
+      if (savedSessions && parseInt(savedSessions) !== sessionsCompleted) {
+        setSessionsCompleted(parseInt(savedSessions));
+      }
+    };
+
+    window.addEventListener('pomodoroStateChange', handleStorageChange);
+    return () => window.removeEventListener('pomodoroStateChange', handleStorageChange);
+  }, [mode, timeLeft, isRunning, sessionsCompleted]);
+
   // Function to play notification sound using Web Audio API
   const playNotificationSound = () => {
     try {