Background Blur to Navbar and Sounds Added to Timer Modal

app/page.js

@@ -985,7 +985,7 @@ export default function Home() {
                 />
               </div>
 
-              <div className="p-4 border-t border-dashed dark:border-gray-700">
+              <div className="p-4 border-t border-dashed dark:border-gray-700 absolute bottom-0 left-1/2 -translate-x-1/2 bg-background/70 backdrop-blur-sm w-full z-50">
                 <div className="flex items-center justify-between">
                   <Button
                     onClick={() => setShowTimer(true)}

components/task-list.js

@@ -208,7 +208,7 @@ export function TaskList({
   };
 
   return (
-    <div className="h-full overflow-y-auto hide-scroll overflow-x-hidden p-4 px-0">
+    <div className="h-full overflow-y-auto hide-scroll overflow-x-hidden p-4 px-0 pb-[3.54rem]">
       <AnimatePresence>
         {/* Habits Section */}
         {sortedHabitTasks.length > 0 && (
@@ -235,7 +235,7 @@ export function TaskList({
                 <ChevronDown className="h-4 w-4" />
               </motion.div>
               <RotateCcw className="h-4 w-4" />
-              Habits ({sortedHabitTasks.filter((t) => !t.completed).length}/
+              Habits ({sortedHabitTasks.filter((t) => t.completed).length}/
               {sortedHabitTasks.length})
             </motion.button>
 
@@ -310,7 +310,7 @@ export function TaskList({
                 <ChevronDown className="h-4 w-4" />
               </motion.div>
               <Calendar className="h-4 w-4" />
-              Tasks ({sortedRegularTasks.filter((t) => !t.completed).length}/
+              Tasks ({sortedRegularTasks.filter((t) => t.completed).length}/
               {sortedRegularTasks.length})
             </motion.button>
 
@@ -531,7 +531,7 @@ function TaskItem({
             className={`flex-shrink-0 w-6 h-6 rounded-full border-2 flex items-center justify-center transition-all duration-200 ${
               task.completed
                 ? "bg-primary border-primary"
-                : "border-primary/40 hover:border-primary hover:bg-primary/10"
+                : "border-primary/30 hover:border-primary hover:bg-primary/10 border-dotted"
             }`}
             whileHover={{ scale: 1.1 }}
             whileTap={{ scale: 0.9 }}

components/timer-modal.js

@@ -51,6 +51,23 @@ export function TimerModal({
   const audioSourcesRef = useRef({});
   const gainNodesRef = useRef({});
   const isInitializedRef = useRef(false);
+  const completeAudioRef = useRef(null);
+
+  if (typeof window !== "undefined") {
+    if (!completeAudioRef.current) {
+      completeAudioRef.current = new Audio("/music/complete.mp3");
+      completeAudioRef.current.volume = 0.3;
+    }
+  }
+
+  const playCompleteSound = () => {
+    if (completeAudioRef.current) {
+      completeAudioRef.current.currentTime = 0;
+      completeAudioRef.current
+        .play()
+        .catch((e) => console.log("Complete sound play failed:", e));
+    }
+  };
 
   const presets = [
     { value: "5", label: "5 min", seconds: 5 * 60 },
@@ -441,6 +458,7 @@ export function TimerModal({
 
       onToggleTask(selectedTask);
     }
+    playCompleteSound();
     stopAllAudio();
     onClose();
   };