🍅 FocusPomodoro - Restez concentré

+ + Statistiques +

+ {goalReached && ( + + + Objectif atteint ! + + )} +

+ + {/* Goal progress */} +

+ Progression quotidienne + + {statistics.completedToday}/{dailyGoal} 🍅 + +

+ + {/* Stats grid */} +

+ {stats.map(({ label, value, icon: Icon, color, bgColor }) => ( +

+ +

+ {value} +

{label}

+ ))} +

+ ); +} diff --git a/src/components/Timer.tsx b/src/components/Timer.tsx new file mode 100644 index 0000000..30bfb83 --- /dev/null +++ b/src/components/Timer.tsx @@ -0,0 +1,142 @@ +import { Play, Pause, RotateCcw, SkipForward } from 'lucide-react'; +import { TimerMode } from '../types'; +import { CircularProgress } from './CircularProgress'; + +interface TimerProps { + mode: TimerMode; + timeLeft: number; + isRunning: boolean; + progress: number; + sessionCount: number; + dailyGoal: number; + completedToday: number; + onModeChange: (mode: TimerMode) => void; + onToggle: () => void; + onReset: () => void; + onSkip: () => void; +} + +export function Timer({ + mode, + timeLeft, + isRunning, + progress, + sessionCount, + dailyGoal, + completedToday, + onModeChange, + onToggle, + onReset, + onSkip, +}: TimerProps) { + const minutes = Math.floor(timeLeft / 60); + const seconds = timeLeft % 60; + + const modes: { key: TimerMode; label: string; emoji: string }[] = [ + { key: 'focus', label: 'Focus', emoji: '🍅' }, + { key: 'shortBreak', label: 'Pause courte', emoji: '☕' }, + { key: 'longBreak', label: 'Pause longue', emoji: '🌴' }, + ]; + + const getModeStyles = (key: TimerMode, isActive: boolean) => { + const base = 'px-4 py-2 rounded-full text-sm font-medium transition-all duration-200'; + if (!isActive) return `${base} text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700`; + + switch (key) { + case 'focus': return `${base} bg-rose-500 text-white shadow-lg shadow-rose-500/25`; + case 'shortBreak': return `${base} bg-emerald-500 text-white shadow-lg shadow-emerald-500/25`; + case 'longBreak': return `${base} bg-indigo-500 text-white shadow-lg shadow-indigo-500/25`; + } + }; + + const getButtonStyles = () => { + switch (mode) { + case 'focus': return 'bg-rose-500 hover:bg-rose-600 shadow-lg shadow-rose-500/30'; + case 'shortBreak': return 'bg-emerald-500 hover:bg-emerald-600 shadow-lg shadow-emerald-500/30'; + case 'longBreak': return 'bg-indigo-500 hover:bg-indigo-600 shadow-lg shadow-indigo-500/30'; + } + }; + + return ( +

+ {/* Mode selector */} +

+ {modes.map(({ key, label, emoji }) => ( + + ))} +

+ + {/* Circular Timer */} + +

+ {minutes.toString().padStart(2, '0')}:{seconds.toString().padStart(2, '0')} +

+ Session {(sessionCount % 4) + 1}/4 +

+ + + {/* Daily progress */} +

+ Objectif du jour : +

+ {Array.from({ length: dailyGoal }).map((_, i) => ( +

+ ))} +

+ {completedToday}/{dailyGoal} +

+ + {/* Controls */} +

+ + + + + +

+ + {/* Keyboard shortcuts hint */} +

+ Espace Play/Pause • + R Reset +

+ ); +} diff --git a/src/components/TodoList.tsx b/src/components/TodoList.tsx new file mode 100644 index 0000000..64a3464 --- /dev/null +++ b/src/components/TodoList.tsx @@ -0,0 +1,206 @@ +import React, { useState } from 'react'; +import { Plus, Check, Trash2, ListTodo, Sparkles } from 'lucide-react'; +import { Todo, Priority } from '../types'; + +interface TodoListProps { + todos: Todo[]; + completedCount: number; + activeCount: number; + onAdd: (text: string, priority: Priority) => void; + onToggle: (id: string) => void; + onDelete: (id: string) => void; + onClearCompleted: () => void; + onIncrementPomodoro: (id: string) => void; +} + +export function TodoList({ + todos, + completedCount, + activeCount, + onAdd, + onToggle, + onDelete, + onClearCompleted, + onIncrementPomodoro, +}: TodoListProps) { + const [newTodo, setNewTodo] = useState(''); + const [priority, setPriority] = useState('medium'); + const [filter, setFilter] = useState<'all' | 'active' | 'completed'>('all'); + + const handleSubmit = (e: React.FormEvent) => { + e.preventDefault(); + if (newTodo.trim()) { + onAdd(newTodo, priority); + setNewTodo(''); + } + }; + + const filteredTodos = todos.filter(todo => { + if (filter === 'active') return !todo.completed; + if (filter === 'completed') return todo.completed; + return true; + }); + + const getPriorityColor = (p: Priority) => { + switch (p) { + case 'high': return 'text-red-500 bg-red-50 dark:bg-red-900/30'; + case 'medium': return 'text-amber-500 bg-amber-50 dark:bg-amber-900/30'; + case 'low': return 'text-blue-500 bg-blue-50 dark:bg-blue-900/30'; + } + }; + + const getPriorityLabel = (p: Priority) => { + switch (p) { + case 'high': return 'Haute'; + case 'medium': return 'Moyenne'; + case 'low': return 'Basse'; + } + }; + + return ( +

+ + Tâches +

+ + {activeCount} active{activeCount > 1 ? 's' : ''} + +

+ + {/* Add todo form */} +

+ setNewTodo(e.target.value)} + placeholder="Ajouter une tâche..." + className="flex-1 min-w-0 px-4 py-2.5 bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded-xl text-gray-800 dark:text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-rose-500 focus:border-transparent transition-all" + /> +

+ + +

+ + {/* Filter tabs */} +

+ {(['all', 'active', 'completed'] as const).map((f) => ( + + ))} +

+ + {/* Todo list */} +

+ {filteredTodos.length === 0 ? ( +

+ +

+ {filter === 'all' + ? 'Aucune tâche pour le moment' + : filter === 'active' + ? 'Toutes les tâches sont terminées !' + : 'Aucune tâche terminée'} +

+ ) : ( + filteredTodos.map((todo) => ( +

+ + +

+ {todo.text} +

+ + {getPriorityLabel(todo.priority)} + + {todo.pomodorosSpent > 0 && ( + + 🍅 {todo.pomodorosSpent} + + )} +

+ +

+ {!todo.completed && ( + + )} + +

+ )) + )} +

+ + {/* Clear completed */} + {completedCount > 0 && ( + + )} +

+ ); +} diff --git a/src/hooks/useAmbientSound.ts b/src/hooks/useAmbientSound.ts new file mode 100644 index 0000000..b0ab99b --- /dev/null +++ b/src/hooks/useAmbientSound.ts @@ -0,0 +1,169 @@ +import { useState, useRef, useCallback, useEffect } from 'react'; + +export type SoundType = 'none' | 'rain' | 'cafe' | 'whitenoise' | 'forest' | 'ocean'; + +export function useAmbientSound() { + const [currentSound, setCurrentSound] = useState('none'); + const [volume, setVolume] = useState(0.5); + const [isPlaying, setIsPlaying] = useState(false); + + const audioContextRef = useRef(null); + const nodesRef = useRef<{ + sources: AudioBufferSourceNode[]; + gains: GainNode[]; + masterGain: GainNode | null; + }>({ sources: [], gains: [], masterGain: null }); + + const stopSound = useCallback(() => { + nodesRef.current.sources.forEach(source => { + try { source.stop(); } catch (e) {} + }); + nodesRef.current.sources = []; + nodesRef.current.gains = []; + setIsPlaying(false); + }, []); + + const createNoiseBuffer = useCallback((ctx: AudioContext, type: 'white' | 'brown' | 'pink') => { + const bufferSize = ctx.sampleRate * 2; + const buffer = ctx.createBuffer(1, bufferSize, ctx.sampleRate); + const output = buffer.getChannelData(0); + + if (type === 'white') { + for (let i = 0; i < bufferSize; i++) { + output[i] = Math.random() * 2 - 1; + } + } else if (type === 'brown') { + let lastOut = 0; + for (let i = 0; i < bufferSize; i++) { + const white = Math.random() * 2 - 1; + output[i] = (lastOut + 0.02 * white) / 1.02; + lastOut = output[i]; + output[i] *= 3.5; + } + } else if (type === 'pink') { + let b0 = 0, b1 = 0, b2 = 0, b3 = 0, b4 = 0, b5 = 0, b6 = 0; + for (let i = 0; i < bufferSize; i++) { + const white = Math.random() * 2 - 1; + b0 = 0.99886 * b0 + white * 0.0555179; + b1 = 0.99332 * b1 + white * 0.0750759; + b2 = 0.96900 * b2 + white * 0.1538520; + b3 = 0.86650 * b3 + white * 0.3104856; + b4 = 0.55000 * b4 + white * 0.5329522; + b5 = -0.7616 * b5 - white * 0.0168980; + output[i] = b0 + b1 + b2 + b3 + b4 + b5 + b6 + white * 0.5362; + output[i] *= 0.11; + b6 = white * 0.115926; + } + } + + return buffer; + }, []); + + const playSound = useCallback((type: SoundType) => { + stopSound(); + + if (type === 'none') { + setCurrentSound('none'); + return; + } + + if (!audioContextRef.current) { + audioContextRef.current = new AudioContext(); + } + const ctx = audioContextRef.current; + + const masterGain = ctx.createGain(); + masterGain.gain.value = volume; + masterGain.connect(ctx.destination); + nodesRef.current.masterGain = masterGain; + + const createLoopingSource = (buffer: AudioBuffer, gainValue: number = 1) => { + const source = ctx.createBufferSource(); + const gain = ctx.createGain(); + source.buffer = buffer; + source.loop = true; + gain.gain.value = gainValue; + source.connect(gain); + gain.connect(masterGain); + source.start(); + nodesRef.current.sources.push(source); + nodesRef.current.gains.push(gain); + return { source, gain }; + }; + + switch (type) { + case 'rain': { + // Bruit de pluie = bruit rose + bruit brun + const pinkBuffer = createNoiseBuffer(ctx, 'pink'); + const brownBuffer = createNoiseBuffer(ctx, 'brown'); + createLoopingSource(pinkBuffer, 0.6); + createLoopingSource(brownBuffer, 0.3); + break; + } + case 'cafe': { + // Ambiance café = bruit brun léger + variations + const brownBuffer = createNoiseBuffer(ctx, 'brown'); + const pinkBuffer = createNoiseBuffer(ctx, 'pink'); + createLoopingSource(brownBuffer, 0.4); + createLoopingSource(pinkBuffer, 0.15); + break; + } + case 'whitenoise': { + const whiteBuffer = createNoiseBuffer(ctx, 'white'); + createLoopingSource(whiteBuffer, 0.3); + break; + } + case 'forest': { + // Forêt = bruit rose doux + const pinkBuffer = createNoiseBuffer(ctx, 'pink'); + const brownBuffer = createNoiseBuffer(ctx, 'brown'); + createLoopingSource(pinkBuffer, 0.25); + createLoopingSource(brownBuffer, 0.15); + break; + } + case 'ocean': { + // Océan = bruit brun + const brownBuffer = createNoiseBuffer(ctx, 'brown'); + createLoopingSource(brownBuffer, 0.7); + break; + } + } + + setCurrentSound(type); + setIsPlaying(true); + }, [volume, stopSound, createNoiseBuffer]); + + const changeVolume = useCallback((newVolume: number) => { + setVolume(newVolume); + if (nodesRef.current.masterGain) { + nodesRef.current.masterGain.gain.value = newVolume; + } + }, []); + + const toggleSound = useCallback(() => { + if (isPlaying) { + stopSound(); + } else if (currentSound !== 'none') { + playSound(currentSound); + } + }, [isPlaying, currentSound, playSound, stopSound]); + + useEffect(() => { + return () => { + stopSound(); + if (audioContextRef.current) { + audioContextRef.current.close(); + } + }; + }, [stopSound]); + + return { + currentSound, + volume, + isPlaying, + playSound, + stopSound, + changeVolume, + toggleSound, + }; +} diff --git a/src/hooks/useLocalStorage.ts b/src/hooks/useLocalStorage.ts new file mode 100644 index 0000000..b4bbbd7 --- /dev/null +++ b/src/hooks/useLocalStorage.ts @@ -0,0 +1,30 @@ +import { useState, useCallback } from 'react'; + +export function useLocalStorage(key: string, initialValue: T): [T, (value: T | ((prev: T) => T)) => void] { + const [storedValue, setStoredValue] = useState(() => { + if (typeof window === 'undefined') { + return initialValue; + } + try { + const item = window.localStorage.getItem(key); + return item ? JSON.parse(item) : initialValue; + } catch (error) { + console.warn(`Error reading localStorage key "${key}":`, error); + return initialValue; + } + }); + + const setValue = useCallback((value: T | ((prev: T) => T)) => { + try { + const valueToStore = value instanceof Function ? value(storedValue) : value; + setStoredValue(valueToStore); + if (typeof window !== 'undefined') { + window.localStorage.setItem(key, JSON.stringify(valueToStore)); + } + } catch (error) { + console.warn(`Error setting localStorage key "${key}":`, error); + } + }, [key, storedValue]); + + return [storedValue, setValue]; +} diff --git a/src/hooks/useTheme.ts b/src/hooks/useTheme.ts new file mode 100644 index 0000000..73faebb --- /dev/null +++ b/src/hooks/useTheme.ts @@ -0,0 +1,36 @@ +import { useCallback, useEffect } from 'react'; +import { useLocalStorage } from './useLocalStorage'; + +export type Theme = 'light' | 'dark'; + +export function useTheme() { + const [theme, setTheme] = useLocalStorage('pomodoro-theme', 'light'); + + useEffect(() => { + const root = window.document.documentElement; + const body = window.document.body; + + // Remove previous theme classes + root.classList.remove('light', 'dark'); + body.classList.remove('light', 'dark'); + + // Add current theme class + root.classList.add(theme); + body.classList.add(theme); + + // Update background color immediately + if (theme === 'dark') { + root.style.colorScheme = 'dark'; + body.style.backgroundColor = '#111827'; + } else { + root.style.colorScheme = 'light'; + body.style.backgroundColor = '#fdf2f8'; + } + }, [theme]); + + const toggleTheme = useCallback(() => { + setTheme(prev => prev === 'light' ? 'dark' : 'light'); + }, [setTheme]); + + return { theme, toggleTheme }; +} diff --git a/src/hooks/useTimer.ts b/src/hooks/useTimer.ts new file mode 100644 index 0000000..d4499b6 --- /dev/null +++ b/src/hooks/useTimer.ts @@ -0,0 +1,364 @@ +import { useState, useEffect, useCallback, useRef } from 'react'; +import { TimerMode, TimerSettings, Statistics, DEFAULT_SETTINGS, DEFAULT_STATISTICS } from '../types'; +import { useLocalStorage } from './useLocalStorage'; + +export function useTimer() { + const [settings, setSettings] = useLocalStorage('pomodoro-settings', DEFAULT_SETTINGS); + const [statistics, setStatistics] = useLocalStorage('pomodoro-statistics', DEFAULT_STATISTICS); + + const [mode, setMode] = useState('focus'); + const [timeLeft, setTimeLeft] = useState(settings.focusDuration * 60); + const [isRunning, setIsRunning] = useState(false); + const [sessionCount, setSessionCount] = useState(0); + + const audioContextRef = useRef(null); + const totalTime = useRef(settings.focusDuration * 60); + + // Refs pour le timer basé sur le temps réel + const endTimeRef = useRef(null); + const timerCompletedWhileHiddenRef = useRef(false); + const titleBlinkIntervalRef = useRef(null); + + const getDuration = useCallback((timerMode: TimerMode) => { + switch (timerMode) { + case 'focus': return settings.focusDuration * 60; + case 'shortBreak': return settings.shortBreakDuration * 60; + case 'longBreak': return settings.longBreakDuration * 60; + } + }, [settings]); + + const progress = ((totalTime.current - timeLeft) / totalTime.current) * 100; + + const playNotificationSound = useCallback(() => { + try { + if (!audioContextRef.current) { + audioContextRef.current = new AudioContext(); + } + const ctx = audioContextRef.current; + + // Jouer une mélodie agréable + const notes = [523.25, 659.25, 783.99, 1046.50]; // C5, E5, G5, C6 + notes.forEach((freq, i) => { + const oscillator = ctx.createOscillator(); + const gainNode = ctx.createGain(); + + oscillator.connect(gainNode); + gainNode.connect(ctx.destination); + + oscillator.frequency.value = freq; + oscillator.type = 'sine'; + + const startTime = ctx.currentTime + i * 0.15; + gainNode.gain.setValueAtTime(0.3, startTime); + gainNode.gain.exponentialRampToValueAtTime(0.01, startTime + 0.3); + + oscillator.start(startTime); + oscillator.stop(startTime + 0.3); + }); + } catch (error) { + console.warn('Could not play notification sound:', error); + } + }, []); + + const requestNotificationPermission = useCallback(async () => { + if ('Notification' in window && Notification.permission === 'default') { + await Notification.requestPermission(); + } + }, []); + + const showNotification = useCallback((title: string, body: string) => { + if ('Notification' in window && Notification.permission === 'granted') { + new Notification(title, { + body, + icon: '🍅', + requireInteraction: true, // La notification reste jusqu'à ce que l'utilisateur clique + tag: 'pomodoro-timer' // Évite les notifications en double + }); + } + }, []); + + // Fonction pour faire clignoter le titre + const startTitleBlink = useCallback((message: string) => { + if (titleBlinkIntervalRef.current) return; // Déjà en train de clignoter + + const originalTitle = document.title; + let isOriginal = true; + + titleBlinkIntervalRef.current = setInterval(() => { + document.title = isOriginal ? `🔔 ${message}` : originalTitle; + isOriginal = !isOriginal; + }, 1000); + }, []); + + const stopTitleBlink = useCallback(() => { + if (titleBlinkIntervalRef.current) { + clearInterval(titleBlinkIntervalRef.current); + titleBlinkIntervalRef.current = null; + } + }, []); + + const updateStatistics = useCallback(() => { + const today = new Date().toDateString(); + + setStatistics(prev => { + const isNewDay = prev.lastCompletedDate !== today; + const newCompletedToday = isNewDay ? 1 : prev.completedToday + 1; + + // Calcul de la série + let newStreak = prev.currentStreak; + if (isNewDay) { + const yesterday = new Date(); + yesterday.setDate(yesterday.getDate() - 1); + if (prev.lastCompletedDate === yesterday.toDateString()) { + newStreak = prev.currentStreak + 1; + } else if (prev.lastCompletedDate !== today) { + newStreak = 1; + } + } + + return { + completedToday: newCompletedToday, + completedTotal: prev.completedTotal + 1, + currentStreak: newStreak, + bestStreak: Math.max(prev.bestStreak, newStreak), + lastCompletedDate: today, + }; + }); + }, [setStatistics]); + + const handleTimerComplete = useCallback(() => { + const isPageHidden = document.visibilityState === 'hidden'; + + // Si la page est visible, jouer le son immédiatement + if (!isPageHidden) { + playNotificationSound(); + } else { + // Sinon, marquer qu'on doit jouer le son quand l'utilisateur revient + timerCompletedWhileHiddenRef.current = true; + } + + setIsRunning(false); + endTimeRef.current = null; + + // Faire clignoter le titre si la page est cachée + if (isPageHidden) { + startTitleBlink(mode === 'focus' ? 'Pomodoro terminé !' : 'Pause terminée !'); + } + + if (mode === 'focus') { + updateStatistics(); + const newSessionCount = sessionCount + 1; + setSessionCount(newSessionCount); + + showNotification('🍅 Pomodoro terminé !', 'Bravo ! Il est temps de faire une pause.'); + + // Après 4 pomodoros, pause longue + if (newSessionCount % 4 === 0) { + setMode('longBreak'); + const duration = getDuration('longBreak'); + setTimeLeft(duration); + totalTime.current = duration; + if (settings.autoStartBreaks) { + setIsRunning(true); + endTimeRef.current = Date.now() + duration * 1000; + } + } else { + setMode('shortBreak'); + const duration = getDuration('shortBreak'); + setTimeLeft(duration); + totalTime.current = duration; + if (settings.autoStartBreaks) { + setIsRunning(true); + endTimeRef.current = Date.now() + duration * 1000; + } + } + } else { + showNotification('⏰ Pause terminée !', 'C\'est reparti pour un nouveau pomodoro !'); + setMode('focus'); + const duration = getDuration('focus'); + setTimeLeft(duration); + totalTime.current = duration; + if (settings.autoStartPomodoros) { + setIsRunning(true); + endTimeRef.current = Date.now() + duration * 1000; + } + } + }, [mode, sessionCount, settings, getDuration, playNotificationSound, showNotification, updateStatistics, startTitleBlink]); + + // Timer basé sur le temps réel (fonctionne même en arrière-plan) + useEffect(() => { + let interval: NodeJS.Timeout; + + if (isRunning) { + // Si on démarre et qu'il n'y a pas d'heure de fin, la définir + if (endTimeRef.current === null) { + endTimeRef.current = Date.now() + timeLeft * 1000; + } + + const updateTimer = () => { + if (endTimeRef.current === null) return; + + const remaining = Math.round((endTimeRef.current - Date.now()) / 1000); + + if (remaining <= 0) { + setTimeLeft(0); + handleTimerComplete(); + } else { + setTimeLeft(remaining); + } + }; + + // Mise à jour toutes les 100ms pour plus de précision + interval = setInterval(updateTimer, 100); + } + + return () => { + if (interval) clearInterval(interval); + }; + }, [isRunning, handleTimerComplete]); + + // Gestionnaire de visibilité - jouer le son et arrêter le clignotement quand l'utilisateur revient + useEffect(() => { + const handleVisibilityChange = () => { + if (document.visibilityState === 'visible') { + // L'utilisateur est revenu sur l'onglet + stopTitleBlink(); + + // Si le timer s'est terminé pendant son absence, jouer le son + if (timerCompletedWhileHiddenRef.current) { + timerCompletedWhileHiddenRef.current = false; + playNotificationSound(); + } + + // Recalculer le temps restant si le timer est en cours + if (isRunning && endTimeRef.current !== null) { + const remaining = Math.round((endTimeRef.current - Date.now()) / 1000); + if (remaining <= 0) { + setTimeLeft(0); + handleTimerComplete(); + } else { + setTimeLeft(remaining); + } + } + } + }; + + document.addEventListener('visibilitychange', handleVisibilityChange); + return () => document.removeEventListener('visibilitychange', handleVisibilityChange); + }, [isRunning, handleTimerComplete, playNotificationSound, stopTitleBlink]); + + // Mise à jour du titre de l'onglet + useEffect(() => { + const minutes = Math.floor(timeLeft / 60); + const seconds = timeLeft % 60; + const timeString = `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`; + const modeLabels = { focus: 'Focus', shortBreak: 'Pause', longBreak: 'Pause longue' }; + const emoji = mode === 'focus' ? '🍅' : '☕'; + document.title = `${emoji} ${timeString} - ${modeLabels[mode]} | FocusPomodoro`; + }, [timeLeft, mode]); + + // Raccourcis clavier + useEffect(() => { + const handleKeyDown = (e: KeyboardEvent) => { + if (e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement) return; + + switch (e.code) { + case 'Space': + e.preventDefault(); + if (!isRunning) { + // Démarrage + endTimeRef.current = Date.now() + timeLeft * 1000; + } else { + // Pause + endTimeRef.current = null; + } + setIsRunning(prev => !prev); + break; + case 'KeyR': + if (!e.ctrlKey && !e.metaKey) { + e.preventDefault(); + const duration = getDuration(mode); + setTimeLeft(duration); + totalTime.current = duration; + setIsRunning(false); + endTimeRef.current = null; + stopTitleBlink(); + } + break; + } + }; + + window.addEventListener('keydown', handleKeyDown); + return () => window.removeEventListener('keydown', handleKeyDown); + }, [mode, getDuration, isRunning, timeLeft, stopTitleBlink]); + + const changeMode = useCallback((newMode: TimerMode) => { + setMode(newMode); + const duration = getDuration(newMode); + setTimeLeft(duration); + totalTime.current = duration; + setIsRunning(false); + endTimeRef.current = null; + stopTitleBlink(); + }, [getDuration, stopTitleBlink]); + + const toggleTimer = useCallback(() => { + if (!isRunning) { + requestNotificationPermission(); + // Démarrage : définir l'heure de fin + endTimeRef.current = Date.now() + timeLeft * 1000; + } else { + // Pause : effacer l'heure de fin + endTimeRef.current = null; + } + setIsRunning(prev => !prev); + }, [isRunning, requestNotificationPermission, timeLeft]); + + const resetTimer = useCallback(() => { + const duration = getDuration(mode); + setTimeLeft(duration); + totalTime.current = duration; + setIsRunning(false); + endTimeRef.current = null; + stopTitleBlink(); + }, [mode, getDuration, stopTitleBlink]); + + const updateSettings = useCallback((newSettings: Partial) => { + setSettings(prev => { + const updated = { ...prev, ...newSettings }; + // Si on modifie la durée du mode actuel, on met à jour le timer + if (!isRunning) { + let newDuration = timeLeft; + if (mode === 'focus' && newSettings.focusDuration) { + newDuration = newSettings.focusDuration * 60; + } else if (mode === 'shortBreak' && newSettings.shortBreakDuration) { + newDuration = newSettings.shortBreakDuration * 60; + } else if (mode === 'longBreak' && newSettings.longBreakDuration) { + newDuration = newSettings.longBreakDuration * 60; + } + setTimeLeft(newDuration); + totalTime.current = newDuration; + } + return updated; + }); + }, [setSettings, isRunning, mode, timeLeft]); + + const skipSession = useCallback(() => { + handleTimerComplete(); + }, [handleTimerComplete]); + + return { + mode, + timeLeft, + isRunning, + progress, + sessionCount, + settings, + statistics, + changeMode, + toggleTimer, + resetTimer, + updateSettings, + skipSession, + }; +} diff --git a/src/hooks/useTodos.ts b/src/hooks/useTodos.ts new file mode 100644 index 0000000..d7bb94a --- /dev/null +++ b/src/hooks/useTodos.ts @@ -0,0 +1,73 @@ +import { useCallback } from 'react'; +import { Todo, Priority } from '../types'; +import { useLocalStorage } from './useLocalStorage'; + +export function useTodos() { + const [todos, setTodos] = useLocalStorage('pomodoro-todos', []); + + const addTodo = useCallback((text: string, priority: Priority = 'medium') => { + if (!text.trim()) return; + + const newTodo: Todo = { + id: Date.now().toString(), + text: text.trim(), + completed: false, + priority, + pomodorosSpent: 0, + createdAt: Date.now(), + }; + + setTodos(prev => [newTodo, ...prev]); + }, [setTodos]); + + const toggleTodo = useCallback((id: string) => { + setTodos(prev => prev.map(todo => + todo.id === id ? { ...todo, completed: !todo.completed } : todo + )); + }, [setTodos]); + + const deleteTodo = useCallback((id: string) => { + setTodos(prev => prev.filter(todo => todo.id !== id)); + }, [setTodos]); + + const updateTodo = useCallback((id: string, updates: Partial) => { + setTodos(prev => prev.map(todo => + todo.id === id ? { ...todo, ...updates } : todo + )); + }, [setTodos]); + + const incrementPomodoro = useCallback((id: string) => { + setTodos(prev => prev.map(todo => + todo.id === id ? { ...todo, pomodorosSpent: todo.pomodorosSpent + 1 } : todo + )); + }, [setTodos]); + + const clearCompleted = useCallback(() => { + setTodos(prev => prev.filter(todo => !todo.completed)); + }, [setTodos]); + + const reorderTodos = useCallback((fromIndex: number, toIndex: number) => { + setTodos(prev => { + const result = [...prev]; + const [removed] = result.splice(fromIndex, 1); + result.splice(toIndex, 0, removed); + return result; + }); + }, [setTodos]); + + const completedCount = todos.filter(t => t.completed).length; + const activeCount = todos.filter(t => !t.completed).length; + + return { + todos, + addTodo, + toggleTodo, + deleteTodo, + updateTodo, + incrementPomodoro, + clearCompleted, + reorderTodos, + completedCount, + activeCount, + }; +} diff --git a/src/index.css b/src/index.css new file mode 100644 index 0000000..443786a --- /dev/null +++ b/src/index.css @@ -0,0 +1,26 @@ +@import "tailwindcss"; + +@custom-variant dark (&:where(.dark, .dark *)); + +/* Smooth transitions for theme switching */ +html { + transition: background-color 0.3s ease, color 0.3s ease; +} + +/* Custom scrollbar */ +::-webkit-scrollbar { + width: 6px; +} + +::-webkit-scrollbar-track { + background: transparent; +} + +::-webkit-scrollbar-thumb { + background: #d1d5db; + border-radius: 3px; +} + +.dark ::-webkit-scrollbar-thumb { + background: #4b5563; +} diff --git a/src/main.tsx b/src/main.tsx new file mode 100644 index 0000000..12fa35b --- /dev/null +++ b/src/main.tsx @@ -0,0 +1,10 @@ +import { StrictMode } from "react"; +import { createRoot } from "react-dom/client"; +import "./index.css"; +import App from "./App"; + +createRoot(document.getElementById("root")!).render( + + + +); diff --git a/src/types/index.ts b/src/types/index.ts new file mode 100644 index 0000000..3cbabf9 --- /dev/null +++ b/src/types/index.ts @@ -0,0 +1,46 @@ +export type TimerMode = 'focus' | 'shortBreak' | 'longBreak'; + +export type Priority = 'low' | 'medium' | 'high'; + +export interface Todo { + id: string; + text: string; + completed: boolean; + priority: Priority; + pomodorosSpent: number; + createdAt: number; +} + +export interface TimerSettings { + focusDuration: number; + shortBreakDuration: number; + longBreakDuration: number; + autoStartBreaks: boolean; + autoStartPomodoros: boolean; + dailyGoal: number; +} + +export interface Statistics { + completedToday: number; + completedTotal: number; + currentStreak: number; + bestStreak: number; + lastCompletedDate: string | null; +} + +export const DEFAULT_SETTINGS: TimerSettings = { + focusDuration: 25, + shortBreakDuration: 5, + longBreakDuration: 15, + autoStartBreaks: false, + autoStartPomodoros: false, + dailyGoal: 8, +}; + +export const DEFAULT_STATISTICS: Statistics = { + completedToday: 0, + completedTotal: 0, + currentStreak: 0, + bestStreak: 0, + lastCompletedDate: null, +}; diff --git a/src/utils/cn.ts b/src/utils/cn.ts new file mode 100644 index 0000000..a5ef193 --- /dev/null +++ b/src/utils/cn.ts @@ -0,0 +1,6 @@ +import { clsx, type ClassValue } from "clsx"; +import { twMerge } from "tailwind-merge"; + +export function cn(...inputs: ClassValue[]) { + return twMerge(clsx(inputs)); +} diff --git a/tailwind.config.js b/tailwind.config.js new file mode 100644 index 0000000..2369b95 --- /dev/null +++ b/tailwind.config.js @@ -0,0 +1,17 @@ +/** @type {import('tailwindcss').Config} */ +export default { + content: [ + "./index.html", + "./src/**/*.{js,ts,jsx,tsx}", + ], + darkMode: 'class', + theme: { + extend: { + fontFamily: { + sans: ['Inter', 'system-ui', 'sans-serif'], + mono: ['JetBrains Mono', 'monospace'], + }, + }, + }, + plugins: [], +} diff --git a/tsconfig.json b/tsconfig.json new file mode 100644 index 0000000..d06d38f --- /dev/null +++ b/tsconfig.json @@ -0,0 +1,31 @@ +{ + "compilerOptions": { + "target": "ES2020", + "useDefineForClassFields": true, + "lib": ["ES2020", "DOM", "DOM.Iterable"], + "module": "ESNext", + "skipLibCheck": true, + "types": ["node"], + + /* Bundler mode */ + "moduleResolution": "bundler", + "allowImportingTsExtensions": true, + "resolveJsonModule": true, + "isolatedModules": true, + "noEmit": true, + "jsx": "react-jsx", + + /* Path mapping */ + "baseUrl": ".", + "paths": { + "@/*": ["src/*"] + }, + + /* Linting */ + "strict": true, + "noUnusedLocals": true, + "noUnusedParameters": true, + "noFallthroughCasesInSwitch": true + }, + "include": ["src", "vite.config.ts"] +} diff --git a/vite.config.ts b/vite.config.ts new file mode 100644 index 0000000..1f06afd --- /dev/null +++ b/vite.config.ts @@ -0,0 +1,19 @@ +import path from "path"; +import { fileURLToPath } from "url"; +import tailwindcss from "@tailwindcss/vite"; +import react from "@vitejs/plugin-react"; +import { defineConfig } from "vite"; +import { viteSingleFile } from "vite-plugin-singlefile"; + +const __filename = fileURLToPath(import.meta.url); +const __dirname = path.dirname(__filename); + +// https://vite.dev/config/ +export default defineConfig({ + plugins: [react(), tailwindcss(), viteSingleFile()], + resolve: { + alias: { + "@": path.resolve(__dirname, "src"), + }, + }, +});

+ 💡 Conseils pour la technique Pomodoro +

+ + Ambiance sonore +

+ FocusPomodoro +

+ + Paramètres +

+ + Durées (en minutes) +

+ + Objectif quotidien +

+ + Automatisation +

+ + Statistiques +

+ + Tâches +