feat: implement drag & drop functionality using @dnd-kit

- Added drag & drop capabilities to the Kanban board with @dnd-kit for task status updates.
- Integrated DndContext in `KanbanBoard` and utilized `useDroppable` in `KanbanColumn` for drop zones.
- Enhanced `TaskCard` with draggable features and visual feedback during dragging.
- Updated `TODO.md` to reflect the completion of drag & drop tasks and optimistically update task statuses.
- Introduced optimistic updates in `useTasks` for smoother user experience during drag & drop operations.

components/kanban/TaskCard.tsx

@@ -4,6 +4,7 @@ import { formatDistanceToNow } from 'date-fns';
 import { fr } from 'date-fns/locale';
 import { Card } from '@/components/ui/Card';
 import { Badge } from '@/components/ui/Badge';
+import { useDraggable } from '@dnd-kit/core';
 
 interface TaskCardProps {
   task: Task;
@@ -16,6 +17,17 @@ export function TaskCard({ task, onDelete, onEdit, onUpdateTitle }: TaskCardProp
   const [isEditingTitle, setIsEditingTitle] = useState(false);
   const [editTitle, setEditTitle] = useState(task.title);
 
+  // Configuration du draggable
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    isDragging,
+  } = useDraggable({
+    id: task.id,
+  });
+
   // Mettre à jour le titre local quand la tâche change
   useEffect(() => {
     setEditTitle(task.title);
@@ -39,7 +51,7 @@ export function TaskCard({ task, onDelete, onEdit, onUpdateTitle }: TaskCardProp
   const handleTitleClick = (e: React.MouseEvent) => {
     e.preventDefault();
     e.stopPropagation();
-    if (onUpdateTitle) {
+    if (onUpdateTitle && !isDragging) {
       setIsEditingTitle(true);
     }
   };
@@ -66,6 +78,11 @@ export function TaskCard({ task, onDelete, onEdit, onUpdateTitle }: TaskCardProp
       handleTitleCancel();
     }
   };
+  // Style de transformation pour le drag
+  const style = transform ? {
+    transform: `translate3d(${transform.x}px, ${transform.y}px, 0)`,
+  } : undefined;
+
   // Extraire les emojis du titre pour les afficher comme tags visuels
   const emojiRegex = /[\u{1F600}-\u{1F64F}]|[\u{1F300}-\u{1F5FF}]|[\u{1F680}-\u{1F6FF}]|[\u{1F1E0}-\u{1F1FF}]|[\u{2600}-\u{26FF}]|[\u{2700}-\u{27BF}]/gu;
   const emojis = task.title.match(emojiRegex) || [];
@@ -73,7 +90,15 @@ export function TaskCard({ task, onDelete, onEdit, onUpdateTitle }: TaskCardProp
 
 
   return (
-    <Card className="p-3 hover:border-cyan-500/30 hover:shadow-lg hover:shadow-cyan-500/10 transition-all duration-300 cursor-pointer group">
+    <Card 
+      ref={setNodeRef}
+      style={style}
+      className={`p-3 hover:border-cyan-500/30 hover:shadow-lg hover:shadow-cyan-500/10 transition-all duration-300 cursor-pointer group ${
+        isDragging ? 'opacity-50 rotate-3 scale-105' : ''
+      }`}
+      {...attributes}
+      {...(isEditingTitle ? {} : listeners)}
+    >
       {/* Header tech avec titre et status */}
       <div className="flex items-start gap-2 mb-2">
         {emojis.length > 0 && (