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/Board.tsx

@@ -118,6 +118,7 @@ export function KanbanBoard({ tasks, onCreateTask, onDeleteTask, onEditTask, onU
 
   return (
     <DndContext
+      id="kanban-board"
       sensors={sensors}
       onDragStart={handleDragStart}
       onDragEnd={handleDragEnd}

components/kanban/QuickAddTask.tsx

@@ -2,7 +2,7 @@
 
 import { useState, useRef, useEffect } from 'react';
 import { Card } from '@/components/ui/Card';
-import { Badge } from '@/components/ui/Badge';
+import { TagInput } from '@/components/ui/TagInput';
 import { TaskStatus, TaskPriority } from '@/lib/types';
 import { CreateTaskData } from '@/clients/tasks-client';
 
@@ -21,7 +21,6 @@ export function QuickAddTask({ status, onSubmit, onCancel }: QuickAddTaskProps)
     tags: [],
     dueDate: undefined
   });
-  const [tagInput, setTagInput] = useState('');
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [activeField, setActiveField] = useState<'title' | 'description' | 'tags' | 'date' | null>('title');
   const titleRef = useRef<HTMLInputElement>(null);
@@ -53,7 +52,6 @@ export function QuickAddTask({ status, onSubmit, onCancel }: QuickAddTaskProps)
         tags: [],
         dueDate: undefined
       });
-      setTagInput('');
       setActiveField('title');
       setIsSubmitting(false);
       titleRef.current?.focus();
@@ -73,9 +71,8 @@ export function QuickAddTask({ status, onSubmit, onCancel }: QuickAddTaskProps)
       if (field === 'title' && formData.title.trim()) {
         console.log('Calling handleSubmit from title');
         handleSubmit();
-      } else if (field === 'tags' && tagInput.trim()) {
-        console.log('Adding tag');
-        addTag();
+      } else if (field === 'tags') {
+        // TagInput gère ses propres événements Enter
       } else if (formData.title.trim()) {
         // Permettre création depuis n'importe quel champ si titre rempli
         console.log('Calling handleSubmit from other field');
@@ -95,21 +92,10 @@ export function QuickAddTask({ status, onSubmit, onCancel }: QuickAddTaskProps)
     // Laisser passer tous les autres événements (y compris les raccourcis système)
   };
 
-  const addTag = () => {
-    const tag = tagInput.trim();
-    if (tag && !formData.tags?.includes(tag)) {
-      setFormData(prev => ({
-        ...prev,
-        tags: [...(prev.tags || []), tag]
-      }));
-      setTagInput('');
-    }
-  };
-
-  const removeTag = (tagToRemove: string) => {
+  const handleTagsChange = (tags: string[]) => {
     setFormData(prev => ({
       ...prev,
-      tags: prev.tags?.filter(tag => tag !== tagToRemove) || []
+      tags
     }));
   };
 
@@ -171,28 +157,12 @@ export function QuickAddTask({ status, onSubmit, onCancel }: QuickAddTaskProps)
 
       {/* Tags */}
       <div className="mb-2">
-        <div className="flex flex-wrap gap-1 mb-1">
-          {formData.tags && formData.tags.map((tag: string, index: number) => (
-            <Badge
-              key={index}
-              variant="primary"
-              size="sm"
-              className="cursor-pointer hover:bg-red-950/50 hover:text-red-300 hover:border-red-500/30 transition-colors"
-              onClick={() => removeTag(tag)}
-            >
-              {tag} ✕
-            </Badge>
-          ))}
-        </div>
-        <input
-          type="text"
-          value={tagInput}
-          onChange={(e) => setTagInput(e.target.value)}
-          onKeyDown={(e) => handleKeyDown(e, 'tags')}
-          onFocus={() => setActiveField('tags')}
+        <TagInput
+          tags={formData.tags || []}
+          onChange={handleTagsChange}
           placeholder="Tags..."
-          disabled={isSubmitting}
-          className="w-full bg-transparent border-none outline-none text-xs text-slate-400 font-mono placeholder-slate-500"
+          maxTags={5}
+          className="text-xs"
         />
       </div>
 

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>
       )}