From 4a28c62ce6a2aba5fe137830619f0d73a7bdd24e Mon Sep 17 00:00:00 2001
From: paul-nothaft <40865108-paul-nothaft@users.noreply.replit.com>
Date: Fri, 12 Sep 2025 06:13:40 +0000
Subject: [PATCH] Allow users to edit tasks by clicking on them across the app

Adds click functionality to task cards and calendar entries to trigger the task edit modal, mirroring the existing calendar view behavior. Propagates click events to prevent conflicts with drag-and-drop functionality and timer toggling.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: ceced2fc-aa46-458d-ba87-ddd4b7bb1518
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/659922a9-0087-461c-90dd-6d9a58b81d4d/ceced2fc-aa46-458d-ba87-ddd4b7bb1518/qdzfbac
---
 client/src/App.tsx                          |  2 +-
 client/src/components/TaskCard.tsx          | 11 +++++++++--
 client/src/components/TasksWithCalendar.tsx |  9 ++++++++-
 3 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/client/src/App.tsx b/client/src/App.tsx
index 3788273..9a5795f 100644
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@@ -162,7 +162,7 @@ function App() {
           <TasksWithCalendar 
             tasks={tasks}
             onTaskUpdate={handleTaskUpdate}
-            onTaskEdit={(task) => console.log('Edit task:', task.title)}
+            onTaskEdit={handleTaskClick}
             onStartTimer={startTimer}
             onStopTimer={stopTimer}
           />
diff --git a/client/src/components/TaskCard.tsx b/client/src/components/TaskCard.tsx
index c6afe05..fdad113 100644
--- a/client/src/components/TaskCard.tsx
+++ b/client/src/components/TaskCard.tsx
@@ -74,7 +74,7 @@ export default function TaskCard({ task, onStartTimer, onStopTimer, onEdit, onDe
 
   return (
     <Card 
-      className={`p-4 hover-elevate active-elevate-2 transition-all duration-200 relative ${
+      className={`p-4 hover-elevate active-elevate-2 transition-all duration-200 relative cursor-pointer ${
         isDragging ? 'rotate-1 scale-105 shadow-lg' : ''
       }`}
       style={taskLabel ? { 
@@ -83,6 +83,10 @@ export default function TaskCard({ task, onStartTimer, onStopTimer, onEdit, onDe
         borderStyle: 'solid'
       } : {}}
       data-testid={`card-task-${task.id}`}
+      onClick={() => {
+        onEdit?.();
+        console.log(`Task card clicked: ${task.title}`);
+      }}
     >
       <div className="flex items-start justify-between gap-3">
         <div className="flex-1 min-w-0">
@@ -253,7 +257,10 @@ export default function TaskCard({ task, onStartTimer, onStopTimer, onEdit, onDe
           <Button
             size="icon"
             variant={task.isTracking ? "default" : "outline"}
-            onClick={handleToggleTimer}
+            onClick={(e) => {
+              e.stopPropagation();
+              handleToggleTimer();
+            }}
             data-testid={`button-timer-${task.id}`}
             className="w-6 h-6"
           >
diff --git a/client/src/components/TasksWithCalendar.tsx b/client/src/components/TasksWithCalendar.tsx
index ceda02c..6a3b6bb 100644
--- a/client/src/components/TasksWithCalendar.tsx
+++ b/client/src/components/TasksWithCalendar.tsx
@@ -385,7 +385,14 @@ export default function TasksWithCalendar({ tasks, onTaskUpdate, onTaskEdit, onS
                           draggable
                           onDragStart={(e) => handleDragStart(task.id, e)}
                           onDragEnd={handleDragEnd}
-                          className={`cursor-move ${draggedTask === task.id ? 'opacity-50' : ''}`}
+                          onClick={(e) => {
+                            // Prevent click when dragging
+                            if (draggedTask === task.id) return;
+                            e.stopPropagation();
+                            onTaskEdit?.(task);
+                            console.log('Calendar task clicked:', task.title);
+                          }}
+                          className={`cursor-pointer hover-elevate ${draggedTask === task.id ? 'opacity-50' : ''}`}
                           data-testid={`calendar-task-${task.id}`}
                         >
                           <Badge