feat: integrate TagDisplay component into TaskCard

- Replaced badge rendering with TagDisplay for improved tag visualization.
- Added showDot prop to control dot display alongside tag colors.

src/components/ui/TagDisplay.tsx

@@ -9,6 +9,7 @@ interface TagDisplayProps {
   size?: 'sm' | 'md' | 'lg';
   maxTags?: number;
   showColors?: boolean;
+  showDot?: boolean;
   onClick?: (tagName: string) => void;
   className?: string;
 }
@@ -19,6 +20,7 @@ export function TagDisplay({
   size = 'sm',
   maxTags,
   showColors = true,
+  showDot = true,
   onClick,
   className = ""
 }: TagDisplayProps) {
@@ -60,7 +62,7 @@ export function TagDisplay({
               color: showColors ? color : undefined
             }}
           >
-            {showColors && (
+            {showColors && showDot && (
               <div
                 className="w-2 h-2 rounded-full"
                 style={{ backgroundColor: color }}

src/components/ui/TaskCard.tsx

@@ -2,6 +2,7 @@ import { HTMLAttributes, forwardRef, useState, useEffect, useRef } from 'react';
 import { cn } from '@/lib/utils';
 import { Card } from './Card';
 import { Badge } from './Badge';
+import { TagDisplay } from './TagDisplay';
 import { formatDateForDisplay } from '@/lib/date-utils';
 
 interface TaskCardProps extends HTMLAttributes<HTMLDivElement> {
@@ -415,29 +416,14 @@ const TaskCard = forwardRef<HTMLDivElement, TaskCardProps>(
           {/* Tags avec couleurs personnalisées */}
           {tags.length > 0 && (
             <div className="mb-3">
-              <div className="flex flex-wrap gap-1">
+              <TagDisplay 
-                {tags.slice(0, 3).map((tag, index) => {
+                tags={tags}
-                  const tagConfig = availableTags.find(t => t.name === tag);
+                availableTags={availableTags}
-                  return (
+                maxTags={3}
-                    <Badge 
+                size="sm"
-                      key={index} 
+                showColors={true}
-                      variant="outline" 
+                showDot={false}
-                      size="sm"
+              />
-                      style={tagConfig?.color ? { 
-                        borderColor: `${tagConfig.color}40`,
-                        color: tagConfig.color 
-                      } : undefined}
-                    >
-                      {tag}
-                    </Badge>
-                  );
-                })}
-                {tags.length > 3 && (
-                  <Badge variant="outline" size="sm">
-                    +{tags.length - 3}
-                  </Badge>
-                )}
-              </div>
             </div>
           )}