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>
+  );
+}