From a82bb6c0adfca3d0fb1ac759df3f9a1f97fd076b Mon Sep 17 00:00:00 2001
From: paul-nothaft <40865108-paul-nothaft@users.noreply.replit.com>
Date: Thu, 11 Sep 2025 13:42:20 +0000
Subject: [PATCH] Show label colors as borders on calendar and board items

Update TaskCard component to fetch labels and apply label color as a border to the task card, enhancing visual identification of task labels. Removed debug logs.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: ceced2fc-aa46-458d-ba87-ddd4b7bb1518
Replit-Commit-Checkpoint-Type: intermediate_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/659922a9-0087-461c-90dd-6d9a58b81d4d/ceced2fc-aa46-458d-ba87-ddd4b7bb1518/dckFKzQ
---
 .replit                            |  8 ++++++++
 client/src/components/TaskCard.tsx | 25 ++++++-------------------
 2 files changed, 14 insertions(+), 19 deletions(-)

diff --git a/.replit b/.replit
index 930416a..8003553 100644
--- a/.replit
+++ b/.replit
@@ -14,6 +14,14 @@ run = ["npm", "run", "start"]
 localPort = 5000
 externalPort = 80
 
+[[ports]]
+localPort = 35345
+externalPort = 3002
+
+[[ports]]
+localPort = 37425
+externalPort = 3001
+
 [[ports]]
 localPort = 41353
 externalPort = 3000
diff --git a/client/src/components/TaskCard.tsx b/client/src/components/TaskCard.tsx
index 3006843..834cb9b 100644
--- a/client/src/components/TaskCard.tsx
+++ b/client/src/components/TaskCard.tsx
@@ -19,9 +19,8 @@ export default function TaskCard({ task, onPlay, onPause, onEdit, onStatusChange
   const [isTimerRunning, setIsTimerRunning] = useState(task.isTracking);
 
   // Fetch labels to get the label color
-  const { data: labels = [], isLoading: labelsLoading, error: labelsError } = useQuery<Label[]>({
+  const { data: labels = [] } = useQuery<Label[]>({
     queryKey: ['/api/labels'],
-    queryFn: () => fetch('/api/labels').then(res => res.json()),
     staleTime: 5 * 60 * 1000, // 5 minutes cache
     refetchOnWindowFocus: false,
   });
@@ -29,13 +28,6 @@ export default function TaskCard({ task, onPlay, onPause, onEdit, onStatusChange
   // Find the label for this task
   const taskLabel = task.labelId && labels.length > 0 ? labels.find(label => label.id === task.labelId) : null;
 
-  // Debug logging - always log for tasks with labelId
-  if (task.labelId) {
-    console.log(`TaskCard Debug - Task: "${task.title}", LabelId: ${task.labelId}, Labels loading: ${labelsLoading}, Labels count: ${labels.length}, Labels error:`, labelsError);
-    console.log(`TaskCard Debug - Available labels:`, labels.map(l => ({ id: l.id, name: l.name, color: l.color })));
-    console.log(`TaskCard Debug - Found label:`, taskLabel);
-  }
-
   const handleToggleTimer = () => {
     if (isTimerRunning) {
       onPause?.();
@@ -74,18 +66,13 @@ export default function TaskCard({ task, onPlay, onPause, onEdit, onStatusChange
       className={`p-4 hover-elevate active-elevate-2 transition-all duration-200 relative ${
         isDragging ? 'rotate-1 scale-105 shadow-lg' : ''
       }`}
+      style={taskLabel ? { 
+        borderColor: taskLabel.color,
+        borderWidth: '2px',
+        borderStyle: 'solid'
+      } : {}}
       data-testid={`card-task-${task.id}`}
     >
-      {taskLabel && (
-        <div 
-          className="absolute left-0 top-2 bottom-2 w-1 rounded-r-sm z-10"
-          style={{ 
-            backgroundColor: taskLabel.color,
-            minWidth: '4px'
-          }}
-          data-testid={`accent-label-${task.id}`}
-        />
-      )}
       <div className="flex items-start justify-between gap-3">
         <div className="flex-1 min-w-0">
           <h3 className="font-medium text-sm leading-tight truncate" data-testid={`text-task-title-${task.id}`}>