From 36453140f33c69e55245ba315b63ae232c25432f Mon Sep 17 00:00:00 2001
From: paul-nothaft <40865108-paul-nothaft@users.noreply.replit.com>
Date: Thu, 11 Sep 2025 13:53:14 +0000
Subject: [PATCH] Add task label colors to the calendar view for better task
 identification

Fetches and displays task label colors as border colors on task badges within the CalendarView component. Imports Label schema and uses react-query to fetch labels from the API.

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/dckFKzQ
---
 .replit                                |  4 --
 client/src/components/CalendarView.tsx | 56 +++++++++++++++++---------
 2 files changed, 37 insertions(+), 23 deletions(-)

diff --git a/.replit b/.replit
index 8003553..61099cd 100644
--- a/.replit
+++ b/.replit
@@ -18,10 +18,6 @@ externalPort = 80
 localPort = 35345
 externalPort = 3002
 
-[[ports]]
-localPort = 37425
-externalPort = 3001
-
 [[ports]]
 localPort = 41353
 externalPort = 3000
diff --git a/client/src/components/CalendarView.tsx b/client/src/components/CalendarView.tsx
index 3cdb6b5..1cf393d 100644
--- a/client/src/components/CalendarView.tsx
+++ b/client/src/components/CalendarView.tsx
@@ -3,7 +3,8 @@ import { Card } from '@/components/ui/card';
 import { Button } from '@/components/ui/button';
 import { Badge } from '@/components/ui/badge';
 import { ChevronLeft, ChevronRight, Calendar } from 'lucide-react';
-import { Task } from './TaskCard';
+import { Task, Label } from '@shared/schema';
+import { useQuery } from '@tanstack/react-query';
 import { addDays, format, isSameDay, startOfWeek } from 'date-fns';
 
 interface CalendarViewProps {
@@ -16,6 +17,13 @@ export default function CalendarView({ tasks, onTaskDrop, onDateSelect }: Calend
   const [currentDate, setCurrentDate] = useState(new Date());
   const [draggedTask, setDraggedTask] = useState<string | null>(null);
 
+  // Fetch labels to get label colors
+  const { data: labels = [] } = useQuery<Label[]>({
+    queryKey: ['/api/labels'],
+    staleTime: 5 * 60 * 1000, // 5 minutes cache
+    refetchOnWindowFocus: false,
+  });
+
   // Get two weeks starting from current week
   const startDate = startOfWeek(currentDate);
   const dates = Array.from({ length: 14 }, (_, i) => addDays(startDate, i));
@@ -122,25 +130,35 @@ export default function CalendarView({ tasks, onTaskDrop, onDateSelect }: Calend
               </div>
               
               <div className="space-y-1">
-                {dayTasks.slice(0, 3).map((task, taskIndex) => (
-                  <div
-                    key={task.id}
-                    draggable
-                    onDragStart={() => handleDragStart(task.id)}
-                    onDragEnd={handleDragEnd}
-                    className={`cursor-move ${draggedTask === task.id ? 'opacity-50' : ''}`}
-                    data-testid={`calendar-task-${task.id}`}
-                  >
-                    <Badge 
-                      variant="outline" 
-                      className="w-full justify-start text-xs p-1 h-auto"
+                {dayTasks.slice(0, 3).map((task, taskIndex) => {
+                  // Find the label for this task
+                  const taskLabel = task.labelId && labels.length > 0 ? labels.find(label => label.id === task.labelId) : null;
+                  
+                  return (
+                    <div
+                      key={task.id}
+                      draggable
+                      onDragStart={() => handleDragStart(task.id)}
+                      onDragEnd={handleDragEnd}
+                      className={`cursor-move ${draggedTask === task.id ? 'opacity-50' : ''}`}
+                      data-testid={`calendar-task-${task.id}`}
                     >
-                      <div className="truncate flex-1 text-left">
-                        {task.title}
-                      </div>
-                    </Badge>
-                  </div>
-                ))}
+                      <Badge 
+                        variant="outline" 
+                        className="w-full justify-start text-xs p-1 h-auto"
+                        style={taskLabel ? { 
+                          borderColor: taskLabel.color,
+                          borderWidth: '2px',
+                          borderStyle: 'solid'
+                        } : {}}
+                      >
+                        <div className="truncate flex-1 text-left">
+                          {task.title}
+                        </div>
+                      </Badge>
+                    </div>
+                  );
+                })}
                 
                 {dayTasks.length > 3 && (
                   <Badge variant="secondary" className="w-full justify-center text-xs">