feat: implement drag-and-drop functionality in SwimlanesBoard

- Added DnD context and sensors for task reordering within swimlanes.
- Introduced DroppableColumn component for handling droppable areas for tasks.
- Implemented drag start and end handlers to manage task status updates.
- Enhanced UI with collapsible swimlanes and drag overlay for active tasks.
- Adjusted layout for better task organization and user interaction.

components/kanban/SwimlanesBoard.tsx

@@ -2,8 +2,69 @@
 
 import { Task, TaskStatus } from '@/lib/types';
 import { TaskCard } from './TaskCard';
-import { useMemo } from 'react';
+import { useMemo, useState } from 'react';
 import { useTasksContext } from '@/contexts/TasksContext';
+import {
+  DndContext,
+  DragEndEvent,
+  DragOverlay,
+  DragStartEvent,
+  closestCenter,
+  PointerSensor,
+  useSensor,
+  useSensors,
+} from '@dnd-kit/core';
+import {
+  SortableContext,
+  verticalListSortingStrategy,
+} from '@dnd-kit/sortable';
+import { useDroppable } from '@dnd-kit/core';
+// import { SortableTaskCard } from './SortableTaskCard';
+
+// Composant pour les colonnes droppables
+function DroppableColumn({ 
+  status, 
+  tasks, 
+  onDeleteTask, 
+  onEditTask, 
+  onUpdateTitle, 
+  compactView 
+}: {
+  status: TaskStatus;
+  tasks: Task[];
+  onDeleteTask?: (taskId: string) => Promise<void>;
+  onEditTask?: (task: Task) => void;
+  onUpdateTitle?: (taskId: string, newTitle: string) => Promise<void>;
+  compactView: boolean;
+}) {
+  const { setNodeRef, isOver } = useDroppable({
+    id: status,
+  });
+
+  return (
+    <div
+      ref={setNodeRef}
+      className={`min-h-[40px] p-2 rounded-lg transition-colors ${
+        isOver ? 'bg-blue-900/20 border-2 border-blue-400/50' : 'bg-slate-800/20'
+      }`}
+    >
+      <SortableContext items={tasks.map(t => t.id)} strategy={verticalListSortingStrategy}>
+        <div className="space-y-1">
+          {tasks.map(task => (
+            <TaskCard
+              key={task.id}
+              task={task}
+              onDelete={onDeleteTask}
+              onEdit={onEditTask}
+              onUpdateTitle={onUpdateTitle}
+              compactView={compactView}
+            />
+          ))}
+        </div>
+      </SortableContext>
+    </div>
+  );
+}
 
 interface SwimlanesboardProps {
   tasks: Task[];
@@ -23,6 +84,17 @@ export function SwimlanesBoard({
   compactView = false 
 }: SwimlanesboardProps) {
   const { tags: availableTags } = useTasksContext();
+  const [activeTask, setActiveTask] = useState<Task | null>(null);
+  const [collapsedSwimlanes, setCollapsedSwimlanes] = useState<Set<string>>(new Set());
+
+  // Configuration des capteurs pour le drag & drop
+  const sensors = useSensors(
+    useSensor(PointerSensor, {
+      activationConstraint: {
+        distance: 8,
+      },
+    })
+  );
 
   const statuses: { id: TaskStatus; title: string; color: string }[] = [
     { id: 'todo', title: 'À faire', color: 'gray' },
@@ -31,6 +103,40 @@ export function SwimlanesBoard({
     { id: 'cancelled', title: 'Annulé', color: 'red' }
   ];
 
+  // Handlers pour le drag & drop
+  const handleDragStart = (event: DragStartEvent) => {
+    const task = tasks.find(t => t.id === event.active.id);
+    setActiveTask(task || null);
+  };
+
+  const handleDragEnd = async (event: DragEndEvent) => {
+    const { active, over } = event;
+    setActiveTask(null);
+
+    if (!over || !onUpdateStatus) return;
+
+    const taskId = active.id as string;
+    const newStatus = over.id as TaskStatus;
+    
+    // Vérifier si le statut a changé
+    const task = tasks.find(t => t.id === taskId);
+    if (task && task.status !== newStatus) {
+      await onUpdateStatus(taskId, newStatus);
+    }
+  };
+
+  const toggleSwimlane = (tagName: string) => {
+    setCollapsedSwimlanes(prev => {
+      const newSet = new Set(prev);
+      if (newSet.has(tagName)) {
+        newSet.delete(tagName);
+      } else {
+        newSet.add(tagName);
+      }
+      return newSet;
+    });
+  };
+
   // Grouper les tâches par tags
   const tasksByTag = useMemo(() => {
     const grouped: { [tagName: string]: Task[] } = {};
@@ -62,6 +168,13 @@ export function SwimlanesBoard({
   };
 
   return (
+    <DndContext
+      sensors={sensors}
+      collisionDetection={closestCenter}
+      onDragStart={handleDragStart}
+      onDragEnd={handleDragEnd}
+      id="swimlanes-board"
+    >
       <div className="h-full flex flex-col bg-slate-950">
       {/* Header */}
       <div className="flex items-center gap-3 p-6 pb-4">
@@ -72,10 +185,7 @@ export function SwimlanesBoard({
       </div>
 
       {/* Headers des colonnes */}
-      <div className="grid grid-cols-5 gap-4 px-6 pb-4">
+      <div className="grid grid-cols-4 gap-4 px-6 pb-4 ml-8">
-        <div className="text-sm font-mono font-bold text-slate-300 uppercase tracking-wider">
-          Tags
-        </div>
         {statuses.map(status => (
           <div key={status.id} className="text-center">
             <div className="text-sm font-mono font-bold text-slate-300 uppercase tracking-wider">
@@ -98,8 +208,11 @@ export function SwimlanesBoard({
             .map(([tagName, tagTasks]) => (
             <div key={tagName} className="border border-slate-700/50 rounded-lg bg-slate-900/30">
               {/* Header de la swimlane */}
-              <div className="grid grid-cols-5 gap-4 p-4 border-b border-slate-700/50">
+              <div className="flex items-center p-2 border-b border-slate-700/50">
-                <div className="flex items-center gap-2">
+                <button
+                  onClick={() => toggleSwimlane(tagName)}
+                  className="flex items-center gap-2 hover:bg-slate-800/50 rounded p-1 -m-1 transition-colors"
+                >
                   <div 
                     className="w-3 h-3 rounded-full"
                     style={{ backgroundColor: getTagColor(tagName) }}
@@ -110,47 +223,53 @@ export function SwimlanesBoard({
                   <span className="text-xs text-slate-400 bg-slate-700/50 px-2 py-1 rounded-full">
                     {tagTasks.length}
                   </span>
-                </div>
+                  <svg
-                
+                    className={`w-3 h-3 text-slate-400 transition-transform duration-200 ${
-                {/* Compteurs par statut */}
+                      collapsedSwimlanes.has(tagName) ? 'rotate-180' : ''
-                {statuses.map(status => {
+                    }`}
-                  const count = tagTasks.filter(task => task.status === status.id).length;
+                    fill="none"
-                  return (
+                    stroke="currentColor"
-                    <div key={status.id} className="text-center">
+                    viewBox="0 0 24 24"
-                      <span className="text-xs text-slate-400 bg-slate-700/50 px-2 py-1 rounded-full">
+                  >
-                        {count}
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
-                      </span>
+                  </svg>
-                    </div>
+                </button>
-                  );
-                })}
               </div>
 
               {/* Contenu de la swimlane */}
-              <div className="grid grid-cols-5 gap-4 p-4">
+              {!collapsedSwimlanes.has(tagName) && (
-                <div></div> {/* Colonne vide pour le nom du tag */}
+                <div className="grid grid-cols-4 gap-4 p-2 ml-8">
-                
                   {statuses.map(status => {
                     const statusTasks = tagTasks.filter(task => task.status === status.id);
                     return (
-                    <div key={status.id} className="space-y-2 min-h-[100px]">
+                      <DroppableColumn
-                      {statusTasks.map(task => (
+                        key={status.id}
-                        <TaskCard
+                        status={status.id}
-                          key={task.id}
+                        tasks={statusTasks}
-                          task={task}
+                        onDeleteTask={onDeleteTask}
-                          onDelete={onDeleteTask}
+                        onEditTask={onEditTask}
-                          onEdit={onEditTask}
                         onUpdateTitle={onUpdateTitle}
                         compactView={compactView}
                       />
-                      ))}
-                    </div>
                     );
                   })}
                 </div>
+              )}
             </div>
           ))}
         </div>
       </div>
       </div>
+
+      {/* DragOverlay pour l'aperçu pendant le drag */}
+      <DragOverlay>
+        {activeTask && (
+          <TaskCard
+            task={activeTask}
+            compactView={compactView}
+          />
+        )}
+      </DragOverlay>
+    </DndContext>
   );
 }