feat: complete tag management and UI integration

- Marked multiple tasks as completed in TODO.md related to tag management features.
- Replaced manual tag input with `TagInput` component in `CreateTaskForm`, `EditTaskForm`, and `QuickAddTask` for better UX.
- Updated `TaskCard` to display tags using `TagDisplay` with color support.
- Enhanced `TasksService` to manage task-tag relationships with CRUD operations.
- Integrated tag management into the global context for better accessibility across components.

components/kanban/TaskCard.tsx

@@ -4,6 +4,8 @@ import { formatDistanceToNow } from 'date-fns';
 import { fr } from 'date-fns/locale';
 import { Card } from '@/components/ui/Card';
 import { Badge } from '@/components/ui/Badge';
+import { TagDisplay } from '@/components/ui/TagDisplay';
+import { useTasksContext } from '@/contexts/TasksContext';
 import { useDraggable } from '@dnd-kit/core';
 
 interface TaskCardProps {
@@ -16,6 +18,7 @@ interface TaskCardProps {
 export function TaskCard({ task, onDelete, onEdit, onUpdateTitle }: TaskCardProps) {
   const [isEditingTitle, setIsEditingTitle] = useState(false);
   const [editTitle, setEditTitle] = useState(task.title);
+  const { tags: availableTags } = useTasksContext();
 
   // Configuration du draggable
   const {
@@ -170,24 +173,16 @@ export function TaskCard({ task, onDelete, onEdit, onUpdateTitle }: TaskCardProp
         </p>
       )}
 
-      {/* Tags avec composant Badge */}
+      {/* Tags avec couleurs */}
       {task.tags && task.tags.length > 0 && (
-        <div className="flex flex-wrap gap-1 mb-3">
-          {task.tags.slice(0, 3).map((tag, index) => (
-            <Badge 
-              key={index}
-              variant="primary"
-              size="sm"
-              className="hover:bg-cyan-950/80 transition-colors"
-            >
-              {tag}
-            </Badge>
-          ))}
-          {task.tags.length > 3 && (
-            <Badge variant="outline" size="sm">
-              +{task.tags.length - 3}
-            </Badge>
-          )}
+        <div className="mb-3">
+          <TagDisplay
+            tags={task.tags}
+            availableTags={availableTags}
+            size="sm"
+            maxTags={3}
+            showColors={true}
+          />
         </div>
       )}