import React, { useState, useRef, useEffect, useMemo } from "react"; import Chart from "chart.js"; export default function App() { // Persistent, cross-app user's daily sessions: { [YYYY-MM-DD]: count } const [sessionLog, setSessionLog] = useSharedStorage("focus_sessions", {}); // App config: last used custom pomodoro and break durations const [config, setConfig] = useAppStorage("focus_config", { focus: 25, break: 5, longBreak: 20, sessionsPerLong: 4 }); // Quotes list, fetched when needed const [quotes, setQuotes] = useState([]); const [showQuote, setShowQuote] = useState(null); // Timer: state machine ('focus', 'break', 'longBreak', 'idle') const [timerState, setTimerState] = useState('idle'); const [secondsLeft, setSecondsLeft] = useState(0); const [sessionCount, setSessionCount] = useState(0); // Since last long break const [isRunning, setIsRunning] = useState(false); // For setting custom durations const [focusMinutes, setFocusMinutes] = useState(config.focus); const [breakMinutes, setBreakMinutes] = useState(config.break); const [longBreakMinutes, setLongBreakMinutes] = useState(config.longBreak); const [sessionsPerLong, setSessionsPerLong] = useState(config.sessionsPerLong); // Audio notification (vibration-like, no sound) const beep = () => { if (navigator.vibrate) navigator.vibrate(200); }; // Helper: get today's YYYY-MM-DD const todayStr = useMemo(() => { return new Date().toISOString().slice(0, 10); }, []); // Fetch quotes when needed useEffect(() => { if (!quotes.length) { fetch("https://dummyjson.com/quotes?limit=30") .then(res => res.json()) .then(d => setQuotes(Array.isArray(d.quotes) ? d.quotes : [])) .catch(() => setQuotes([])); } }, [quotes.length]); // Progress chart const canvasRef = useRef(); const chartRef = useRef(); // Prepare 7 days data for chart const chartData = useMemo(() => { let days = []; let counts = []; for (let i = 6; i >= 0; i--) { let date = new Date(); date.setDate(date.getDate() - i); let key = date.toISOString().slice(0, 10); days.push(date.toLocaleDateString(undefined, { weekday: 'short' })); counts.push(sessionLog[key] || 0); } return { days, counts }; }, [sessionLog]); // Draw/update chart useEffect(() => { if (!canvasRef.current) return; if (chartRef.current) chartRef.current.destroy(); chartRef.current = new Chart(canvasRef.current, { type: 'bar', data: { labels: chartData.days, datasets: [{ label: 'Sessions', data: chartData.counts, backgroundColor: 'var(--ds-primary)', borderRadius: 6, }], }, options: { plugins: { legend: { display: false } }, scales: { x: { grid: { display: false } }, y: { grid: { color: '#eee' }, beginAtZero: true, ticks: { stepSize: 1 } } }, animation: { duration: 600 }, responsive: true, maintainAspectRatio: false, } }); return () => chartRef.current?.destroy(); }, [chartData]); // TIMER EFFECT const intervalRef = useRef(null); useEffect(() => { if (!isRunning) { clearInterval(intervalRef.current); intervalRef.current = null; return; } intervalRef.current = setInterval(() => { setSecondsLeft(prev => { if (prev > 1) return prev - 1; // Time's up! handleSessionEnd(); return 0; }); }, 1000); return () => { clearInterval(intervalRef.current); intervalRef.current = null; }; // eslint-disable-next-line }, [isRunning, timerState]); function handleSessionEnd() { setIsRunning(false); beep(); if (timerState === 'focus') { // Complete a focus session // Update session counts const today = new Date().toISOString().slice(0, 10); setSessionLog(prev => ({ ...prev, [today]: (prev[today] || 0) + 1 })); setSessionCount(cnt => cnt + 1); // Show quote showRandomQuote(); if ((sessionCount + 1) % sessionsPerLong === 0) { setTimerState('longBreak'); setSecondsLeft(longBreakMinutes * 60); } else { setTimerState('break'); setSecondsLeft(breakMinutes * 60); } } else if (timerState === 'break' || timerState === 'longBreak') { setTimerState('idle'); setSecondsLeft(0); } } function showRandomQuote() { if (quotes.length) { const idx = Math.floor(Math.random() * quotes.length); setShowQuote(quotes[idx]); } else { setShowQuote({ quote: "Great job! Keep going!", author: "Vibeland" }); } } function startFocus() { setConfig({ focus: focusMinutes, break: breakMinutes, longBreak: longBreakMinutes, sessionsPerLong }); setTimerState('focus'); setSecondsLeft(focusMinutes * 60); setIsRunning(true); } function startBreak() { setTimerState('break'); setSecondsLeft(breakMinutes * 60); setIsRunning(true); } function startLongBreak() { setTimerState('longBreak'); setSecondsLeft(longBreakMinutes * 60); setIsRunning(true); } function pauseTimer() { setIsRunning(false); } function resumeTimer() { if (timerState !== 'idle' && secondsLeft > 0) setIsRunning(true); } function resetTimer() { setIsRunning(false); setSecondsLeft(0); setTimerState('idle'); setShowQuote(null); } // Format time mm:ss function fmt(s) { const m = Math.floor(s / 60); const ss = s % 60; return m.toString().padStart(2, '0') + ':' + ss.toString().padStart(2, '0'); } // UI States let title, subtitle, bg; if (timerState === 'focus') { title = 'Focus'; subtitle = "Stay on task 🧠"; bg = 'bg-[var(--ds-primary)]/10'; } else if (timerState === 'break') { title = 'Break'; subtitle = "Stretch & Relax ☕"; bg = 'bg-green-100'; } else if (timerState === 'longBreak') { title = 'Long Break'; subtitle = "Recharge! 🌳"; bg = 'bg-emerald-100'; } else { title = 'Ready'; subtitle = "Set your intervals and start"; bg = 'bg-blue-50'; } return (

Focus Timer

{title}

{subtitle}

{fmt(secondsLeft)} {timerState !== 'idle' && (

Interval: {timerState === 'focus' ? focusMinutes : timerState === 'break' ? breakMinutes : longBreakMinutes} min

)}

{timerState === 'idle' && ( )} {timerState !== 'idle' && !isRunning && secondsLeft > 0 && ( )} {timerState !== 'idle' && isRunning && ( )} {(timerState !== 'idle' && (timerState !== 'focus' || secondsLeft !== focusMinutes*60)) && ( )}

{/* Post-session quote, modal overlay */} {showQuote && (

💡

Motivational Quote

“{showQuote.quote}”

— {showQuote.author}

)} {/* Customization section */}

Customize Intervals

{ e.preventDefault(); }}>

Focus (min) setFocusMinutes(Math.max(10, Math.min(120, +e.target.value||10)))} className="rounded border p-1.5 text-center w-20" />

Short Break (min) setBreakMinutes(Math.max(1, Math.min(25, +e.target.value||5)))} className="rounded border p-1.5 text-center w-20" />

Long Break (min) setLongBreakMinutes(Math.max(5, Math.min(60, +e.target.value||20)))} className="rounded border p-1.5 text-center w-20" />

Until Long Break setSessionsPerLong(Math.max(2, Math.min(8, +e.target.value||4)))} className="rounded border p-1.5 text-center w-20" />

Set your preferred intervals. Defaults: 25/5/20 (Focus/Break/Long Break)

{/* Daily/weekly Progress */}

📊 My Progress (past 7 days)

Today's sessions {sessionLog[todayStr] || 0} Goal: {sessionsPerLong} / Long break

{/* Pomos completed summary */}

Total sessions this week: {chartData.counts.reduce((a,b) => a+b, 0)}

Created with ❤️ for your focus — Vibeland

); }