diff --git a/src/components/PomodoroModal.tsx b/src/components/PomodoroModal.tsx new file mode 100644 index 0000000..47c83cf --- /dev/null +++ b/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 ( + + + + Pomodoro Timer + + + + + + + ); +} diff --git a/src/components/PomodoroTimer.tsx b/src/components/PomodoroTimer.tsx index ad2b67d..351a055 100644 --- a/src/components/PomodoroTimer.tsx +++ b/src/components/PomodoroTimer.tsx @@ -15,7 +15,11 @@ const TIMER_DURATIONS = { const SESSIONS_BEFORE_LONG_BREAK = 4; -export function PomodoroTimer() { +interface PomodoroTimerProps { + onStateChange?: (isRunning: boolean, timeLeft: number, mode: TimerMode) => void; +} + +export function PomodoroTimer({ onStateChange }: PomodoroTimerProps = {}) { const [mode, setMode] = useState('work'); const [timeLeft, setTimeLeft] = useState(TIMER_DURATIONS.work); const [isRunning, setIsRunning] = useState(false); @@ -64,6 +68,13 @@ export function PomodoroTimer() { } }; + // Notify parent component of state changes + useEffect(() => { + if (onStateChange) { + onStateChange(isRunning, timeLeft, mode); + } + }, [isRunning, timeLeft, mode, onStateChange]); + useEffect(() => { if (isRunning && timeLeft > 0) { intervalRef.current = setInterval(() => { diff --git a/src/pages/Index.tsx b/src/pages/Index.tsx index 7c80868..153ec6e 100644 --- a/src/pages/Index.tsx +++ b/src/pages/Index.tsx @@ -37,7 +37,7 @@ import { downloadNoteAsMarkdown, downloadAllNotesAsMarkdown, downloadTodosAsMark import { TemplateSelector } from "@/components/TemplateSelector"; import type { NoteTemplate } from "@/utils/noteTemplates"; import { AdvancedSearch, type SearchFilters, type TagOption } from "@/components/AdvancedSearch"; -import { PomodoroTimer } from "@/components/PomodoroTimer"; +import { PomodoroModal } from "@/components/PomodoroModal"; import { KanbanBoard } from "@/components/KanbanBoard"; import { getSmartTagSuggestions } from "@/utils/smartTags"; import { QuickCaptureWidget } from "@/components/QuickCaptureWidget"; @@ -193,6 +193,12 @@ const Index = () => { const [editEventModal, setEditEventModal] = useState<{ open: boolean, event?: CalendarEvent }>({ open: false }); const [showKeyboardHelp, setShowKeyboardHelp] = useState(false); const [showStatsDashboard, setShowStatsDashboard] = useState(false); + const [showPomodoroModal, setShowPomodoroModal] = useState(false); + + // Pomodoro timer states + const [pomodoroRunning, setPomodoroRunning] = useState(false); + const [pomodoroTimeLeft, setPomodoroTimeLeft] = useState(25 * 60); + const [pomodoroMode, setPomodoroMode] = useState<'work' | 'shortBreak' | 'longBreak'>('work'); // Pagination states const [notesPage, setNotesPage] = useState(0); @@ -271,6 +277,20 @@ const Index = () => { return () => clearInterval(interval); }, []); + // Handle Pomodoro timer state changes + const handlePomodoroStateChange = (isRunning: boolean, timeLeft: number, mode: 'work' | 'shortBreak' | 'longBreak') => { + setPomodoroRunning(isRunning); + setPomodoroTimeLeft(timeLeft); + setPomodoroMode(mode); + }; + + // Format time for Pomodoro display + const formatPomodoroTime = (seconds: number): string => { + const mins = Math.floor(seconds / 60); + const secs = seconds % 60; + return `${mins}:${secs.toString().padStart(2, '0')}`; + }; + const loadNotes = async () => { try { const fetchedNotes = await NotesService.getNotes(); @@ -1120,6 +1140,21 @@ const Index = () => { + setShowPomodoroModal(true)} + title="Pomodoro Timer" + className="relative" + > + + {pomodoroRunning && ( + + {formatPomodoroTime(pomodoroTimeLeft)} + + )} + + {user && ( @@ -1930,11 +1965,8 @@ const Index = () => { )} - {/* Right Column: Pomodoro Timer, Todos & RSS */} + {/* Right Column: Todos & RSS */} - {/* Pomodoro Timer */} - - {/* Todos & RSS Boxes side by side */} {/* Todos Box */} @@ -3181,6 +3213,13 @@ const Index = () => { todos={todos} /> + {/* Pomodoro Timer Modal */} + + {/* Quick Capture Widget */}