import React, { useState, useRef, useEffect } from "react"; import { Play, Pause, RotateCw, Plus, Check, StickyNote, X, Loader2 } from "lucide-react"; const PRESETS = [ { label: "Pomodoro (25/5)", focus: 25, break: 5 }, { label: "Long Study (50/10)", focus: 50, break: 10 }, { label: "Short Burst (15/3)", focus: 15, break: 3 }, ]; function pad(num) { return num < 10 ? `0${num}` : num; } const SESSION_COLORS = [ "bg-emerald-400", "bg-amber-400", "bg-rose-400", "bg-blue-400", ]; export default function App() { const [sessions, setSessions] = useSharedStorage("focus-sessions", []); // [{title, focus, break, completed, notes:[] }] const [activeIdx, setActiveIdx] = useState(0); const [timer, setTimer] = useState(null); // { type: 'focus'|'break', remaining: sec } const [running, setRunning] = useState(false); const [showAdd, setShowAdd] = useState(false); const [newSession, setNewSession] = useState({ title: "", focus: 25, break: 5 }); const [flash, setFlash] = useState(false); const timerRef = useRef(); const [noteText, setNoteText] = useState(""); const [showNoteModal, setShowNoteModal] = useState(false); const [progress, setProgress] = useState(0); // percent const [statusMsg, setStatusMsg] = useState(""); // Initialize session useEffect(() => { if ((sessions || []).length === 0) return; const idx = Math.min(activeIdx, sessions.length - 1); const s = sessions[idx]; setTimer({ type: "focus", remaining: s.focus * 60 }); setProgress(0); setStatusMsg("Focus session ready!"); }, [activeIdx, sessions && sessions.length]); // Timer logic useEffect(() => { if (!timer || !running) return; timerRef.current = setInterval(() => { setTimer((prev) => { if (!prev) return null; if (prev.remaining <= 1) { // Time up! Switch mode confetti(); if (prev.type === "focus") { setStatusMsg("Focus session complete! Break time ✨"); return { type: "break", remaining: (sessions[activeIdx]?.break ?? 5) * 60 }; } else { setStatusMsg("Break over. Let's focus!"); return { type: "focus", remaining: (sessions[activeIdx]?.focus ?? 25) * 60 }; } } return { ...prev, remaining: prev.remaining - 1 }; }); }, 1000); return () => clearInterval(timerRef.current); }, [timer, running, sessions, activeIdx]); // Progress calculation useEffect(() => { if (!timer || !(sessions || []).length) return; const max = timer.type === "focus" ? (sessions[activeIdx]?.focus ?? 25) * 60 : (sessions[activeIdx]?.break ?? 5) * 60; setProgress(1 - timer.remaining / max); }, [timer, sessions, activeIdx]); // Confetti effect async function confetti() { try { const c = await import("canvas-confetti"); c.default({ particleCount: 120, spread: 70, origin: { y: 0.6 } }); } catch {} } // Timer controls const handleStart = () => { setRunning(true); setStatusMsg("Stay focused! ✨"); }; const handlePause = () => { setRunning(false); setStatusMsg("Paused"); }; const handleReset = () => { setRunning(false); setTimer({ type: "focus", remaining: (sessions[activeIdx]?.focus ?? 25) * 60 }); setProgress(0); setStatusMsg("Timer reset."); }; // Session CRUD const handleAddSession = () => { if (!newSession.title.trim()) return; setSessions([...(sessions || []), { ...newSession, completed: 0, notes: [], }]); setActiveIdx((sessions || []).length); setShowAdd(false); setFlash(true); setTimeout(() => setFlash(false), 1400); setNewSession({ title: "", focus: 25, break: 5 }); }; const handleDeleteSession = (idx) => { const arr = [...(sessions || [])]; arr.splice(idx, 1); setSessions(arr); setActiveIdx(0); }; // Note handling const handleAddNote = () => { if (!noteText.trim()) return; const arr = [...(sessions || [])]; arr[activeIdx].notes.push({ text: noteText, ts: Date.now() }); setSessions(arr); setNoteText(""); setShowNoteModal(false); setFlash(true); setTimeout(() => setFlash(false), 1200); }; const handleDeleteNote = (i) => { const arr = [...(sessions || [])]; arr[activeIdx].notes.splice(i, 1); setSessions(arr); }; // Visual timer function TimerSVG({ seconds, max, state }) { const R = 48, C = 2 * Math.PI * R; const pct = 1 - seconds / max; return ( ); } // Time display function timeDisplay(sec) { if (sec == null) return "--:--"; return `${pad(Math.floor(sec / 60))}:${pad(sec % 60)}`; } // Empty state if ((sessions || []).length === 0) { return (

⏳

Create Your First Focus Session

{showAdd && ( )}

); } // Calculate today stats const today = new Date().toISOString().slice(0, 10); const dayFocusMins = (sessions || []).reduce((sum, s) => sum + (s.completed?.[today]?.focus || 0), 0); const dayBreakMins = (sessions || []).reduce((sum, s) => sum + (s.completed?.[today]?.break || 0), 0); // Handle note modal animate useEffect(() => { if (showNoteModal) { setTimeout(() => { const el = document.getElementById("focus-note-textarea"); el && el.focus(); }, 320); } }, [showNoteModal]); // Main app const session = sessions[activeIdx] || {}; const maxSec = timer?.type === "focus" ? session.focus * 60 : session.break * 60; return (

{/* Session Switcher */}

{(sessions || []).map((s, idx) => ( ))}

{/* Timer Display */}

{timeDisplay(timer?.remaining)} {timer?.type === "focus" ? "Focus" : "Break"}

{statusMsg}

{!running ? ( ) : ( )}

{/* Quick Notes Modal */} {showNoteModal && ( setShowNoteModal(false)} onSubmit={handleAddNote} onDelete={handleDeleteNote} /> )} {/* Add Session Modal */} {showAdd && ( )} {/* Session Info */}

{session.focus}m

Focus Length

{session.break}m

Break

{session.completed?.[today]?.focus || 0}m

Today's Focus

{/* Daily summary */}

Total focus today: {dayFocusMins}m Breaks: {dayBreakMins}m

{/* Delete session */} {(sessions || []).length > 1 && ( )}

{/* Footer */}

All data private to this device · {new Date().toLocaleTimeString()} Built for mindful productivity

); } // Modal for adding new session function AddSessionModal({ setShow, newSession, setNewSession, handleAdd }) { return (

setShow(false)} />

New Focus Session

setNewSession({ ...newSession, title: e.target.value })} />

Focus (min)

setNewSession({ ...newSession, focus: Math.max(5, Math.min(120, Number(e.target.value))) })}/>

Break (min)

setNewSession({ ...newSession, break: Math.max(1, Math.min(60, Number(e.target.value))) })}/>

{PRESETS.map((preset, i) => ( ))}

); } // Modal for notes function NoteModal({ notes, noteText, setNoteText, onClose, onSubmit, onDelete }) { return (

Session Notes

{notes.length === 0 && (

No notes yet ✏️

)} {notes.map((n, i) => (

{n.text}

))}