"use client"; import React, { useState, useRef, useCallback, useEffect } from "react"; import { useLiveQuery } from "dexie-react-hooks"; import { ptDB } from "@/models/db"; import type { PomodoroSession, PomodoroSettings } from "@/models/interfaces"; import { Settings } from "lucide-react"; import { Button } from "@/components/ui/button"; import { startOfToday } from "date-fns"; import { useMediaQuery } from "@/hooks/use-media-query"; import TimerDisplay from "./components/TimerDisplay"; import TimerControls from "./components/TimerControls"; import CycleIndicator from "./components/CycleIndicator"; import SessionHistory from "./components/SessionHistory"; import SettingsPanel from "./components/SettingsPanel"; import CelebrationAnimation from "./components/CelebrationAnimation"; import TodaySummary from "./components/TodaySummary"; // ── Types ────────────────────────────────────────────────────── type TimerState = "idle" | "running" | "paused"; type Phase = "work" | "shortBreak" | "longBreak"; const DEFAULT_SETTINGS: PomodoroSettings = { workMinutes: 25, shortBreakMinutes: 5, longBreakMinutes: 15, skipCountsAsCompleted: false, autoContinue: true, }; function phaseDurationMs(phase: Phase, settings: PomodoroSettings): number { switch (phase) { case "work": return settings.workMinutes * 60 * 1000; case "shortBreak": return settings.shortBreakMinutes * 60 * 1000; case "longBreak": return settings.longBreakMinutes * 60 * 1000; } } // ── Main Component ───────────────────────────────────────────── export default function PomodoroTimer() { // ── DB availability ────────────────────────────────────────── const [dbAvailable, setDbAvailable] = useState(true); // ── Settings (loaded from DB, fallback to defaults) ────────── const [settings, setSettings] = useState(DEFAULT_SETTINGS); // Load settings from DB on mount const dbSettings = useLiveQuery(async () => { try { return await ptDB.pomodoroSettings.get(1); } catch { setDbAvailable(false); return undefined; } }, []); // Apply DB settings when loaded useEffect(() => { if (dbSettings) { setSettings({ workMinutes: dbSettings.workMinutes ?? 25, shortBreakMinutes: dbSettings.shortBreakMinutes ?? 5, longBreakMinutes: dbSettings.longBreakMinutes ?? 15, skipCountsAsCompleted: dbSettings.skipCountsAsCompleted ?? false, autoContinue: dbSettings.autoContinue ?? true, }); } }, [dbSettings]); // ── Core timer state ───────────────────────────────────────── const [timerState, setTimerState] = useState("idle"); const [phase, setPhase] = useState("work"); const [timeRemainingMs, setTimeRemainingMs] = useState( () => DEFAULT_SETTINGS.workMinutes * 60 * 1000, ); const [completedInCycle, setCompletedInCycle] = useState(0); const [celebrationPhase, setCelebrationPhase] = useState(null); const [showSettings, setShowSettings] = useState(false); const [phaseTransition, setPhaseTransition] = useState(false); // ── Timer accuracy refs ────────────────────────────────────── const timerStartRef = useRef(0); const timerDurationRef = useRef( DEFAULT_SETTINGS.workMinutes * 60 * 1000, ); const timerElapsedRef = useRef(0); const intervalIdRef = useRef | null>(null); // Keep settings in sync with timer duration when idle useEffect(() => { if (timerState === "idle") { const dur = phaseDurationMs(phase, settings); setTimeRemainingMs(dur); timerDurationRef.current = dur; } }, [settings, phase, timerState]); // ── Session history from DB ────────────────────────────────── const sessions = useLiveQuery( async () => { try { return await ptDB.pomodoroSessions .orderBy("completedAt") .reverse() .limit(50) .toArray(); } catch { return []; } }, [], [], ); const todayCount = useLiveQuery( async () => { try { const todayStart = startOfToday(); return await ptDB.pomodoroSessions .where("completedAt") .above(todayStart) .filter((s) => s.type === "work") .count(); } catch { return 0; } }, [], 0, ); // ── Use refs to avoid stale closures in completePhase ──────── const settingsRef = useRef(settings); settingsRef.current = settings; const completedRef = useRef(completedInCycle); completedRef.current = completedInCycle; const dbAvailableRef = useRef(dbAvailable); dbAvailableRef.current = dbAvailable; const phaseRef = useRef(phase); phaseRef.current = phase; // ── Interval tick loop ─────────────────────────────────────── const completePhaseRef = useRef<() => void>(() => {}); const clearTickInterval = useCallback(() => { if (intervalIdRef.current !== null) { clearInterval(intervalIdRef.current); intervalIdRef.current = null; } }, []); const startTickInterval = useCallback(() => { clearTickInterval(); intervalIdRef.current = setInterval(() => { const now = Date.now(); const elapsed = timerElapsedRef.current + (now - timerStartRef.current); const remaining = timerDurationRef.current - elapsed; if (remaining <= 0) { setTimeRemainingMs(0); if (intervalIdRef.current !== null) { clearInterval(intervalIdRef.current); intervalIdRef.current = null; } completePhaseRef.current(); return; } setTimeRemainingMs(remaining); }, 100); }, [clearTickInterval]); // ── Phase transition helper ────────────────────────────────── const transitionToPhase = useCallback( (newPhase: Phase) => { const dur = phaseDurationMs(newPhase, settingsRef.current); setPhase(newPhase); setTimeRemainingMs(dur); timerDurationRef.current = dur; timerElapsedRef.current = 0; timerStartRef.current = Date.now(); setTimerState("running"); startTickInterval(); }, [startTickInterval], ); // ── Phase transition to idle (no auto-start) ──────────────── const transitionToPhaseIdle = useCallback( (newPhase: Phase) => { const dur = phaseDurationMs(newPhase, settingsRef.current); setPhase(newPhase); setTimeRemainingMs(dur); timerDurationRef.current = dur; timerElapsedRef.current = 0; timerStartRef.current = 0; setTimerState("idle"); }, [], ); // ── Phase completion logic ─────────────────────────────────── const completePhase = useCallback(() => { clearTickInterval(); setTimerState("idle"); const currentPhase = phaseRef.current; const shouldAutoContinue = settingsRef.current.autoContinue !== false; if (currentPhase === "work") { // Persist session to DB const durationMinutes = settingsRef.current.workMinutes; if (dbAvailableRef.current) { ptDB.pomodoroSessions .add({ completedAt: new Date(), durationMinutes, type: "work", }) .catch(() => { // DB write failed — timer continues }); } const newCount = completedRef.current + 1; setCompletedInCycle(newCount); // Show celebration setCelebrationPhase("work"); // Determine next phase after celebration const nextPhase: Phase = newCount >= 4 ? "longBreak" : "shortBreak"; setTimeout(() => { if (shouldAutoContinue) { transitionToPhase(nextPhase); } else { transitionToPhaseIdle(nextPhase); } }, 2600); } else { // Break completed — show celebration then transition to work setCelebrationPhase(currentPhase); if (currentPhase === "longBreak") { setCompletedInCycle(0); } setTimeout(() => { if (shouldAutoContinue) { transitionToPhase("work"); } else { transitionToPhaseIdle("work"); } }, 2600); } }, [transitionToPhase, transitionToPhaseIdle, clearTickInterval]); // Keep completePhaseRef in sync completePhaseRef.current = completePhase; // ── Timer controls ─────────────────────────────────────────── const handleStart = useCallback(() => { const dur = phaseDurationMs(phase, settings); timerDurationRef.current = dur; timerElapsedRef.current = 0; timerStartRef.current = Date.now(); setTimeRemainingMs(dur); setTimerState("running"); startTickInterval(); }, [phase, settings, startTickInterval]); const handlePause = useCallback(() => { timerElapsedRef.current += Date.now() - timerStartRef.current; clearTickInterval(); setTimerState("paused"); }, [clearTickInterval]); const handleResume = useCallback(() => { timerStartRef.current = Date.now(); setTimerState("running"); startTickInterval(); }, [startTickInterval]); const handleReset = useCallback(() => { clearTickInterval(); timerElapsedRef.current = 0; timerStartRef.current = 0; const dur = phaseDurationMs(phase, settings); timerDurationRef.current = dur; setTimeRemainingMs(dur); setTimerState("idle"); }, [phase, settings, clearTickInterval]); // ── Skip handler ───────────────────────────────────────────── const handleSkip = useCallback(() => { clearTickInterval(); timerElapsedRef.current = 0; timerStartRef.current = 0; const currentPhase = phaseRef.current; // If skipping a work session and setting is enabled, count it if (currentPhase === "work" && settingsRef.current.skipCountsAsCompleted) { const durationMinutes = settingsRef.current.workMinutes; if (dbAvailableRef.current) { ptDB.pomodoroSessions .add({ completedAt: new Date(), durationMinutes, type: "work", }) .catch(() => {}); } const newCount = completedRef.current + 1; setCompletedInCycle(newCount); // Determine next phase const nextPhase: Phase = newCount >= 4 ? "longBreak" : "shortBreak"; transitionToPhaseIdle(nextPhase); } else if (currentPhase === "work") { // Skip without counting — still move to break const nextPhase: Phase = completedRef.current >= 4 ? "longBreak" : "shortBreak"; transitionToPhaseIdle(nextPhase); } else { // Break → work if (currentPhase === "longBreak") { setCompletedInCycle(0); } transitionToPhaseIdle("work"); } setTimerState("idle"); }, [clearTickInterval, transitionToPhaseIdle]); // ── Celebration complete callback ──────────────────────────── const handleCelebrationComplete = useCallback(() => { setCelebrationPhase(null); }, []); // ── Settings save handler ──────────────────────────────────── const handleSettingsSave = useCallback( async (newSettings: PomodoroSettings) => { setSettings(newSettings); if (dbAvailable) { try { await ptDB.pomodoroSettings.put({ id: 1, ...newSettings }); } catch { // DB write failed — settings applied in memory only } } }, [dbAvailable], ); // ── Cleanup interval on unmount ────────────────────────────── useEffect(() => { return () => { if (intervalIdRef.current !== null) { clearInterval(intervalIdRef.current); } }; }, []); // ── Render ─────────────────────────────────────────────────── const totalDurationMs = phaseDurationMs(phase, settings); const isDesktop = useMediaQuery("(min-width: 1024px)"); return (

{/* Timer column */}

{/* Header */}

Pomodoro

{/* DB unavailable warning */} {!dbAvailable && (

Session history unavailable in this browser mode

)} {/* Timer display with phase transition animation */}

{/* Cycle indicator */} {/* Timer controls */} {/* Session history — mobile only (stacked below timer) */} {!isDesktop && }

{/* Session history column — desktop only (right side) */} {isDesktop && (

)} {/* Celebration animation overlay */} {/* Settings dialog */} setShowSettings(false)} timerState={timerState} /> {/* CSS animations */}

); }

Seth P. Kendall

Pomodoro