From e40005681323dce65e0587b940fa88ce7901b57f Mon Sep 17 00:00:00 2001 From: Duong Phu Dong Date: Fri, 23 Jan 2026 11:44:13 +0700 Subject: [PATCH 1/3] Enhance Pomodoro UI with toast, music, and help features Added toast notifications for session transitions, a lofi music player toggle, and a help sidebar with user instructions. Updated timer sound and improved settings and sidebar UI for a more interactive Pomodoro experience. --- app/dashboard/todo/page.tsx | 112 +++++++++++++++++++++++++++++++++--- 1 file changed, 103 insertions(+), 9 deletions(-) diff --git a/app/dashboard/todo/page.tsx b/app/dashboard/todo/page.tsx index 566b03a..02266bc 100644 --- a/app/dashboard/todo/page.tsx +++ b/app/dashboard/todo/page.tsx @@ -9,7 +9,7 @@ import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { getCurrentUser } from "@/lib/features/auth" import { getTranslations, getUserLanguage } from "@/lib/config" -import { Plus, Trash2, Check, X, CheckCircle2, Circle, Search, Filter, Play, Pause, RotateCcw, Coffee, Timer } from "lucide-react" +import { Plus, Trash2, Check, X, CheckCircle2, Circle, Search, Filter, Play, Pause, RotateCcw, Coffee, Timer, HelpCircle, Settings, Music } from "lucide-react" import { getTodos, createTodo, updateTodo, deleteTodo, type Todo as DBTodo } from "@/lib/database" interface Task { @@ -49,11 +49,16 @@ export default function TodoPage() { const [workDuration, setWorkDuration] = useState(25) const [breakDuration, setBreakDuration] = useState(5) const [showSettings, setShowSettings] = useState(false) + const [showPomodoroHelp, setShowPomodoroHelp] = useState(false) + const [showMusic, setShowMusic] = useState(false) + + // Toast notification state + const [toast, setToast] = useState<{ message: string; type: 'work' | 'break' } | null>(null) // Sound Effect const playNotificationSound = useCallback(() => { try { - const audio = new Audio('https://assets.mixkit.co/active_storage/sfx/2869/2869-preview.mp3') + const audio = new Audio('/sounds/timer-complete.mp3') audio.volume = 0.5 audio.play().catch(e => console.log('Audio play failed:', e)) } catch (e) { @@ -120,16 +125,19 @@ export default function TodoPage() { if (pomodoroMode === 'work') { // Work session completed setPomodoroSessions((s) => s + 1) - alert('Work session completed! Time for a break.') + setToast({ message: '🎉 Work session completed! Time for a break.', type: 'break' }) // Switch to break mode setPomodoroMode('break') setPomodoroTime(breakDuration * 60) } else { // Break completed - alert('Break is over! Ready for another session?') + setToast({ message: '💪 Break is over! Ready for another session?', type: 'work' }) setPomodoroMode('work') setPomodoroTime(workDuration * 60) } + + // Auto-dismiss toast after 5 seconds + setTimeout(() => setToast(null), 5000) } return () => { @@ -264,6 +272,25 @@ export default function TodoPage() { return (
+ {/* Toast Notification */} + {toast && ( +
+
+ {toast.message} + +
+
+ )} +

{t.title}

@@ -291,7 +318,16 @@ export default function TodoPage() { onClick={() => setShowSettings(!showSettings)} title="Timer Settings" > - + + +
+ {/* Lofi Music Player - Minimal Auto-Play */} + {showMusic && ( +
+
+
+ +
+
+

🎵 Lofi Girl - beats to study/relax

+

Now playing...

+
+
+ + {/* Hidden YouTube iframe for audio */} +