todo closing fix

Author: devbharu

client/src/components/TodoList.jsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useState, useEffect, useRef } from "react";
 import { CheckCircle, Circle, Plus, Trash2, ListTodo } from "lucide-react";
 import { usePopup } from "../context/PopupContext";
 import { useAuth } from "../store/auth";
@@ -10,6 +10,8 @@ export default function TodoList() {
   const [newTodo, setNewTodo] = useState("");
   const [open, setOpen] = useState(false); // widget toggle state
 
+  const widgetRef = useRef(null);
+
   const handleAdd = () => {
     if (!isLoggedIn) return;
     if (newTodo.trim()) {
@@ -21,6 +23,23 @@ export default function TodoList() {
   // Ensure todos is always an array
   const todoList = Array.isArray(todos) ? todos : [];
 
+  // 🔹 Close widget if clicked outside
+  useEffect(() => {
+    const handleClickOutside = (e) => {
+      if (widgetRef.current && !widgetRef.current.contains(e.target)) {
+        setOpen(false);
+      }
+    };
+
+    if (open) {
+      document.addEventListener("mousedown", handleClickOutside);
+    }
+
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [open]);
+
   return (
     <>
       {/* Floating Toggle Button */}
@@ -45,6 +64,7 @@ export default function TodoList() {
             exit={{ opacity: 0, scale: 0.8, y: 40 }}
             transition={{ duration: 0.35, ease: "easeOut" }}
             className="fixed bottom-28 left-4 z-50 w-80 max-w-full"
+            ref={widgetRef} // 🔹 reference for outside click detection
           >
             <motion.div
               layout
@@ -60,8 +80,7 @@ export default function TodoList() {
                 Todo List
                 <span className="text-sm text-gray-600 dark:text-dark-text-secondary flex items-center gap-2">
                   <CheckCircle className="text-success" />{" "}
-                  {todoList.filter((t) => t.completed).length} /{" "}
-                  {todoList.length}
+                  {todoList.filter((t) => t.completed).length} / {todoList.length}
                 </span>
               </motion.h2>
 
@@ -101,9 +120,7 @@ export default function TodoList() {
                       >
                         <button
                           disabled={!isLoggedIn}
-                          onClick={() =>
-                            toggleTodoItem(todo._id || todo.id)
-                          }
+                          onClick={() => toggleTodoItem(todo._id || todo.id)}
                         >
                           {todo.completed ? (
                             <CheckCircle className="text-success" />

server/controllers/todoController.js

@@ -14,7 +14,7 @@ const getTodos = async (req, res) => {
 const addTodo = async (req, res) => {
   try {
     const newTodo = new Todo({
-      user: req.user?.id ,
+      user: req.user.id,
       text: req.body.text,
       completed: false,
     });