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/PomodoroModal.tsx

@@ -0,0 +1,28 @@
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { PomodoroTimer } from "./PomodoroTimer";
+
+interface PomodoroModalProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onTimerStateChange?: (isRunning: boolean, timeLeft: number, mode: string) => void;
+}
+
+export function PomodoroModal({ open, onOpenChange, onTimerStateChange }: PomodoroModalProps) {
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-md">
+        <DialogHeader>
+          <DialogTitle className="text-2xl">Pomodoro Timer</DialogTitle>
+        </DialogHeader>
+        <div className="mt-4">
+          <PomodoroTimer onStateChange={onTimerStateChange} />
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}

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(() => {