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

@@ -18,10 +18,6 @@ externalPort = 80
 localPort = 35345
 externalPort = 3002
 
-[[ports]]
-localPort = 37425
-externalPort = 3001
-
 [[ports]]
 localPort = 41353
 externalPort = 3000

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) => (
+                {dayTasks.slice(0, 3).map((task, taskIndex) => {
-                  <div
+                  // Find the label for this task
-                    key={task.id}
+                  const taskLabel = task.labelId && labels.length > 0 ? labels.find(label => label.id === task.labelId) : null;
-                    draggable
+                  
-                    onDragStart={() => handleDragStart(task.id)}
+                  return (
-                    onDragEnd={handleDragEnd}
+                    <div
-                    className={`cursor-move ${draggedTask === task.id ? 'opacity-50' : ''}`}
+                      key={task.id}
-                    data-testid={`calendar-task-${task.id}`}
+                      draggable
-                  >
+                      onDragStart={() => handleDragStart(task.id)}
-                    <Badge 
+                      onDragEnd={handleDragEnd}
-                      variant="outline" 
+                      className={`cursor-move ${draggedTask === task.id ? 'opacity-50' : ''}`}
-                      className="w-full justify-start text-xs p-1 h-auto"
+                      data-testid={`calendar-task-${task.id}`}
                     >
-                      <div className="truncate flex-1 text-left">
+                      <Badge 
-                        {task.title}
+                        variant="outline" 
-                      </div>
+                        className="w-full justify-start text-xs p-1 h-auto"
-                    </Badge>
+                        style={taskLabel ? { 
-                  </div>
+                          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">