feat: transformer le Pomodoro Timer en modal avec icône dans le header

- Créer un composant PomodoroModal pour afficher le timer
- Ajouter une icône Clock dans le header qui affiche le temps restant quand le timer est actif
- Modifier PomodoroTimer pour accepter une callback onStateChange
- Retirer la box Pomodoro de la page principale
- L'icône change de style quand le timer est en cours et affiche le décompte

src/components/PomodoroTimer.tsx

@@ -15,7 +15,11 @@ const TIMER_DURATIONS = {
 
 const SESSIONS_BEFORE_LONG_BREAK = 4;
 
-export function PomodoroTimer() {
+interface PomodoroTimerProps {
+  onStateChange?: (isRunning: boolean, timeLeft: number, mode: TimerMode) => void;
+}
+
+export function PomodoroTimer({ onStateChange }: PomodoroTimerProps = {}) {
   const [mode, setMode] = useState<TimerMode>('work');
   const [timeLeft, setTimeLeft] = useState(TIMER_DURATIONS.work);
   const [isRunning, setIsRunning] = useState(false);
@@ -64,6 +68,13 @@ export function PomodoroTimer() {
     }
   };
 
+  // Notify parent component of state changes
+  useEffect(() => {
+    if (onStateChange) {
+      onStateChange(isRunning, timeLeft, mode);
+    }
+  }, [isRunning, timeLeft, mode, onStateChange]);
+
   useEffect(() => {
     if (isRunning && timeLeft > 0) {
       intervalRef.current = setInterval(() => {