feat: Add TaskCommentsModal for viewing and managing task comments

src/components/ProjectTasksList.js

@@ -5,6 +5,7 @@ import { Card, CardHeader, CardContent } from "./ui/Card";
 import Button from "./ui/Button";
 import Badge from "./ui/Badge";
 import TaskStatusDropdownSimple from "./TaskStatusDropdownSimple";
+import TaskCommentsModal from "./TaskCommentsModal";
 import SearchBar from "./ui/SearchBar";
 import { Select } from "./ui/Input";
 import Link from "next/link";
@@ -20,6 +21,8 @@ export default function ProjectTasksList() {
 	const [loading, setLoading] = useState(true);
 	const [searchTerm, setSearchTerm] = useState("");
 	const [groupBy, setGroupBy] = useState("none");
+	const [selectedTask, setSelectedTask] = useState(null);
+	const [showCommentsModal, setShowCommentsModal] = useState(false);
 
 	useEffect(() => {
 		const fetchAllTasks = async () => {
@@ -35,7 +38,19 @@ export default function ProjectTasksList() {
 		};
 
 		fetchAllTasks();
-	}, []); // Calculate task status based on date_added and max_wait_days
+	}, []);
+
+	// Handle escape key to close modal
+	useEffect(() => {
+		const handleEscape = (e) => {
+			if (e.key === "Escape" && showCommentsModal) {
+				handleCloseComments();
+			}
+		};
+
+		document.addEventListener("keydown", handleEscape);
+		return () => document.removeEventListener("keydown", handleEscape);
+	}, [showCommentsModal]); // Calculate task status based on date_added and max_wait_days
 	const getTaskStatus = (task) => {
 		if (task.status === "completed" || task.status === "cancelled") {
 			return { type: "completed", days: 0 };
@@ -230,6 +245,16 @@ export default function ProjectTasksList() {
 		}
 	};
 
+	const handleShowComments = (task) => {
+		setSelectedTask(task);
+		setShowCommentsModal(true);
+	};
+
+	const handleCloseComments = () => {
+		setShowCommentsModal(false);
+		setSelectedTask(null);
+	};
+
 	const getPriorityVariant = (priority) => {
 		switch (priority) {
 			case "urgent":
@@ -364,11 +389,21 @@ export default function ProjectTasksList() {
 				</td>
 			)}
 			<td className="px-4 py-3">
-				<TaskStatusDropdownSimple
-					task={task}
-					size="sm"
-					onStatusChange={handleStatusChange}
-				/>
+				<div className="flex items-center gap-2">
+					<TaskStatusDropdownSimple
+						task={task}
+						size="sm"
+						onStatusChange={handleStatusChange}
+					/>
+					<Button
+						variant="secondary"
+						size="sm"
+						onClick={() => handleShowComments(task)}
+						title="View comments"
+					>
+						💬
+					</Button>
+				</div>
 			</td>
 		</tr>
 	);
@@ -582,6 +617,13 @@ export default function ProjectTasksList() {
 					/>
 				</div>
 			</div>
+
+			{/* Comments Modal */}
+			<TaskCommentsModal
+				task={selectedTask}
+				isOpen={showCommentsModal}
+				onClose={handleCloseComments}
+			/>
 		</div>
 	);
 }