Display task labels with their associated colors on task cards

Update ProjectTemplate.tsx to use a typed query for labels. Update TaskCard.tsx to fetch labels and display the color-coded label associated with each task.

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/XrG8SoT

client/src/components/ProjectTemplate.tsx

@@ -88,7 +88,7 @@ export default function ProjectTemplate({
   const queryClient = useQueryClient();
   
   // Fetch labels
-  const { data: labels = [], isLoading: labelsLoading } = useQuery({
+  const { data: labels = [], isLoading: labelsLoading } = useQuery<Label[]>({
     queryKey: ['/api/labels'],
   });
   
@@ -470,7 +470,7 @@ export default function ProjectTemplate({
         </div>
       ) : (
         <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
-          {labels.map((label: Label) => (
+          {labels.map((label) => (
             <Card 
               key={label.id} 
               className="p-4 hover-elevate active-elevate-2" 

client/src/components/TaskCard.tsx

@@ -3,19 +3,8 @@ import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
 import { Clock, Calendar, Play, Pause, MoreHorizontal } from "lucide-react";
 import { useState } from "react";
-
-export interface Task {
-  id: string;
-  title: string;
-  description?: string;
-  status: 'todo' | 'inProgress' | 'done';
-  priority: 'low' | 'medium' | 'high';
-  dueDate?: Date;
-  timeTracked: number; // in minutes
-  isTracking: boolean;
-  projectId?: string;
-  notes?: string;
-}
+import { Task, Label } from '@shared/schema';
+import { useQuery } from '@tanstack/react-query';
 
 interface TaskCardProps {
   task: Task;
@@ -29,6 +18,14 @@ interface TaskCardProps {
 export default function TaskCard({ task, onPlay, onPause, onEdit, onStatusChange, isDragging }: TaskCardProps) {
   const [isTimerRunning, setIsTimerRunning] = useState(task.isTracking);
 
+  // Fetch labels to get the label color
+  const { data: labels = [] } = useQuery<Label[]>({
+    queryKey: ['/api/labels'],
+  });
+
+  // Find the label for this task
+  const taskLabel = task.labelId ? labels.find(label => label.id === task.labelId) : null;
+
   const handleToggleTimer = () => {
     if (isTimerRunning) {
       onPause?.();
@@ -64,11 +61,17 @@ export default function TaskCard({ task, onPlay, onPause, onEdit, onStatusChange
 
   return (
     <Card 
-      className={`p-4 hover-elevate active-elevate-2 transition-all duration-200 ${
+      className={`p-4 hover-elevate active-elevate-2 transition-all duration-200 relative ${
         isDragging ? 'rotate-1 scale-105 shadow-lg' : ''
       }`}
       data-testid={`card-task-${task.id}`}
     >
+      {taskLabel && (
+        <div 
+          className="absolute left-0 top-2 bottom-2 w-1 rounded-r-sm"
+          style={{ backgroundColor: taskLabel.color }}
+        />
+      )}
       <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}`}>