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/forms/CreateTaskForm.tsx

@@ -4,7 +4,7 @@ import { useState } from 'react';
 import { Modal } from '@/components/ui/Modal';
 import { Button } from '@/components/ui/Button';
 import { Input } from '@/components/ui/Input';
-import { Badge } from '@/components/ui/Badge';
+import { TagInput } from '@/components/ui/TagInput';
 import { TaskPriority, TaskStatus } from '@/lib/types';
 import { CreateTaskData } from '@/clients/tasks-client';
 
@@ -25,7 +25,6 @@ export function CreateTaskForm({ isOpen, onClose, onSubmit, loading = false }: C
     dueDate: undefined
   });
 
-  const [tagInput, setTagInput] = useState('');
   const [errors, setErrors] = useState<Record<string, string>>({});
 
   const validateForm = (): boolean => {
@@ -69,35 +68,10 @@ export function CreateTaskForm({ isOpen, onClose, onSubmit, loading = false }: C
       tags: [],
       dueDate: undefined
     });
-    setTagInput('');
     setErrors({});
     onClose();
   };
 
-  const addTag = () => {
-    const tag = tagInput.trim();
-    if (tag && !formData.tags?.includes(tag)) {
-      setFormData((prev: CreateTaskData) => ({
-        ...prev,
-        tags: [...(prev.tags || []), tag]
-      }));
-      setTagInput('');
-    }
-  };
-
-  const removeTag = (tagToRemove: string) => {
-    setFormData((prev: CreateTaskData) => ({
-      ...prev,
-      tags: prev.tags?.filter((tag: string) => tag !== tagToRemove) || []
-    }));
-  };
-
-  const handleTagKeyPress = (e: React.KeyboardEvent) => {
-    if (e.key === 'Enter') {
-      e.preventDefault();
-      addTag();
-    }
-  };
 
   return (
     <Modal isOpen={isOpen} onClose={handleClose} title="Nouvelle tâche" size="lg">
@@ -188,39 +162,12 @@ export function CreateTaskForm({ isOpen, onClose, onSubmit, loading = false }: C
             Tags
           </label>
           
-          <div className="flex gap-2">
-            <Input
-              value={tagInput}
-              onChange={(e) => setTagInput(e.target.value)}
-              onKeyPress={handleTagKeyPress}
-              placeholder="Ajouter un tag..."
-              disabled={loading}
-              className="flex-1"
-            />
-            <Button
-              type="button"
-              variant="secondary"
-              onClick={addTag}
-              disabled={!tagInput.trim() || loading}
-            >
-              Ajouter
-            </Button>
-          </div>
-
-          {formData.tags && formData.tags.length > 0 && (
-            <div className="flex flex-wrap gap-2">
-              {formData.tags.map((tag: string, index: number) => (
-                <Badge
-                  key={index}
-                  variant="primary"
-                  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>
-          )}
+          <TagInput
+            tags={formData.tags || []}
+            onChange={(tags) => setFormData(prev => ({ ...prev, tags }))}
+            placeholder="Ajouter des tags..."
+            maxTags={10}
+          />
         </div>
 
         {/* Actions */}