feat: add swimlane mode selection to KanbanFilters and BoardContainer

- Introduced `swimlanesMode` in `KanbanFilters` to toggle between 'tags' and 'priority' swimlanes.
- Updated `KanbanBoardContainer` to conditionally render `PrioritySwimlanesBoard` based on the selected mode.
- Enhanced UI to include dropdown for swimlane mode selection, improving user experience in task organization.
- Adjusted `TasksContext` to persist swimlane mode preferences, ensuring consistent behavior across sessions.

components/kanban/BoardContainer.tsx

@@ -3,6 +3,7 @@
 import { useState } from 'react';
 import { KanbanBoard } from './Board';
 import { SwimlanesBoard } from './SwimlanesBoard';
+import { PrioritySwimlanesBoard } from './PrioritySwimlanesBoard';
 import { ObjectivesBoard } from './ObjectivesBoard';
 import { KanbanFilters } from './KanbanFilters';
 import { EditTaskForm } from '@/components/forms/EditTaskForm';
@@ -73,14 +74,25 @@ export function KanbanBoardContainer() {
       )}
       
       {kanbanFilters.swimlanesByTags ? (
-        <SwimlanesBoard 
-          tasks={filteredTasks}
-          onDeleteTask={deleteTask}
-          onEditTask={handleEditTask}
-          onUpdateTitle={handleUpdateTitle}
-          onUpdateStatus={handleUpdateStatus}
-          compactView={kanbanFilters.compactView}
-        />
+        kanbanFilters.swimlanesMode === 'priority' ? (
+          <PrioritySwimlanesBoard 
+            tasks={filteredTasks}
+            onDeleteTask={deleteTask}
+            onEditTask={handleEditTask}
+            onUpdateTitle={handleUpdateTitle}
+            onUpdateStatus={handleUpdateStatus}
+            compactView={kanbanFilters.compactView}
+          />
+        ) : (
+          <SwimlanesBoard 
+            tasks={filteredTasks}
+            onDeleteTask={deleteTask}
+            onEditTask={handleEditTask}
+            onUpdateTitle={handleUpdateTitle}
+            onUpdateStatus={handleUpdateStatus}
+            compactView={kanbanFilters.compactView}
+          />
+        )
       ) : (
         <KanbanBoard 
           tasks={filteredTasks}

components/kanban/KanbanFilters.tsx

@@ -16,6 +16,7 @@ export interface KanbanFilters {
   showCompleted?: boolean;
   compactView?: boolean;
   swimlanesByTags?: boolean;
+  swimlanesMode?: 'tags' | 'priority'; // Mode des swimlanes
   pinnedTag?: string; // Tag pour les objectifs principaux
   sortBy?: string; // Clé de l'option de tri sélectionnée
 }
@@ -29,23 +30,28 @@ export function KanbanFilters({ filters, onFiltersChange }: KanbanFiltersProps)
   const { tags: availableTags, regularTasks } = useTasksContext();
   const [isExpanded, setIsExpanded] = useState(false);
   const [isSortExpanded, setIsSortExpanded] = useState(false);
+  const [isSwimlaneModeExpanded, setIsSwimlaneModeExpanded] = useState(false);
   const sortDropdownRef = useRef<HTMLDivElement>(null);
+  const swimlaneModeDropdownRef = useRef<HTMLDivElement>(null);
   const sortButtonRef = useRef<HTMLButtonElement>(null);
   const [dropdownPosition, setDropdownPosition] = useState({ top: 0, left: 0 });
 
-  // Fermer le dropdown de tri en cliquant à l'extérieur
+  // Fermer les dropdowns en cliquant à l'extérieur
   useEffect(() => {
     function handleClickOutside(event: MouseEvent) {
       if (sortDropdownRef.current && !sortDropdownRef.current.contains(event.target as Node)) {
         setIsSortExpanded(false);
       }
+      if (swimlaneModeDropdownRef.current && !swimlaneModeDropdownRef.current.contains(event.target as Node)) {
+        setIsSwimlaneModeExpanded(false);
+      }
     }
 
-    if (isSortExpanded) {
+    if (isSortExpanded || isSwimlaneModeExpanded) {
       document.addEventListener('mousedown', handleClickOutside);
       return () => document.removeEventListener('mousedown', handleClickOutside);
     }
-  }, [isSortExpanded]);
+  }, [isSortExpanded, isSwimlaneModeExpanded]);
 
   const handleSearchChange = (search: string) => {
     onFiltersChange({ ...filters, search: search || undefined });
@@ -89,6 +95,25 @@ export function KanbanFilters({ filters, onFiltersChange }: KanbanFiltersProps)
     });
   };
 
+  const handleSwimlaneModeChange = (mode: 'tags' | 'priority') => {
+    onFiltersChange({ 
+      ...filters, 
+      swimlanesByTags: true,
+      swimlanesMode: mode
+    });
+    setIsSwimlaneModeExpanded(false);
+  };
+
+  const handleSwimlaneModeToggle = (event: React.MouseEvent<HTMLButtonElement>) => {
+    const button = event.currentTarget;
+    const rect = button.getBoundingClientRect();
+    setDropdownPosition({
+      top: rect.bottom + window.scrollY + 4,
+      left: rect.left + window.scrollX
+    });
+    setIsSwimlaneModeExpanded(!isSwimlaneModeExpanded);
+  };
+
   const handleSortChange = (sortKey: string) => {
     onFiltersChange({ 
       ...filters, 
@@ -162,27 +187,52 @@ export function KanbanFilters({ filters, onFiltersChange }: KanbanFiltersProps)
             />
           </div>
 
-          {/* Bouton swimlanes par tags */}
-          <Button
-            variant={filters.swimlanesByTags ? "primary" : "ghost"}
-            onClick={handleSwimlanesToggle}
-            className="flex items-center gap-2"
-            title={filters.swimlanesByTags ? "Vue normale" : "Lignes par tags"}
-          >
-            <svg 
-              className="w-4 h-4" 
-              fill="none" 
-              stroke="currentColor" 
-              viewBox="0 0 24 24"
+          {/* Menu swimlanes */}
+          <div className="flex gap-1">
+            <Button
+              variant={filters.swimlanesByTags ? "primary" : "ghost"}
+              onClick={handleSwimlanesToggle}
+              className="flex items-center gap-2"
+              title="Mode d'affichage"
             >
-              {filters.swimlanesByTags ? (
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 10h16M4 14h16M4 18h16" />
-              ) : (
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z" />
-              )}
-            </svg>
-            {filters.swimlanesByTags ? 'Normal' : 'Swimlanes'}
-          </Button>
+              <svg 
+                className="w-4 h-4" 
+                fill="none" 
+                stroke="currentColor" 
+                viewBox="0 0 24 24"
+              >
+                {filters.swimlanesByTags ? (
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 10h16M4 14h16M4 18h16" />
+                ) : (
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z" />
+                )}
+              </svg>
+              {!filters.swimlanesByTags 
+                ? 'Normal' 
+                : filters.swimlanesMode === 'priority' 
+                  ? 'Par priorité' 
+                  : 'Par tags'
+              }
+            </Button>
+            
+            {/* Bouton pour changer le mode des swimlanes */}
+            {filters.swimlanesByTags && (
+              <Button
+                variant="ghost"
+                onClick={handleSwimlaneModeToggle}
+                className="flex items-center gap-1 px-2"
+              >
+                <svg 
+                  className={`w-3 h-3 transition-transform ${isSwimlaneModeExpanded ? 'rotate-180' : ''}`}
+                  fill="none" 
+                  stroke="currentColor" 
+                  viewBox="0 0 24 24"
+                >
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+                </svg>
+              </Button>
+            )}
+          </div>
 
           {/* Bouton vue compacte */}
           <Button
@@ -399,6 +449,36 @@ export function KanbanFilters({ filters, onFiltersChange }: KanbanFiltersProps)
         </div>,
         document.body
       )}
+
+      {/* Dropdown des modes swimlanes rendu via portail pour éviter les problèmes de z-index */}
+      {isSwimlaneModeExpanded && typeof window !== 'undefined' && createPortal(
+        <div
+          ref={swimlaneModeDropdownRef}
+          className="fixed bg-slate-800 border border-slate-700 rounded-lg shadow-xl z-[9999] min-w-[140px]"
+          style={{
+            top: dropdownPosition.top,
+            left: dropdownPosition.left,
+          }}
+        >
+          <button
+            onClick={() => handleSwimlaneModeChange('tags')}
+            className={`w-full px-3 py-2 text-left text-xs hover:bg-slate-700 transition-colors flex items-center gap-2 first:rounded-t-lg ${
+              (!filters.swimlanesMode || filters.swimlanesMode === 'tags') ? 'bg-slate-700 text-cyan-400' : 'text-slate-300'
+            }`}
+          >
+            🏷️ Par tags
+          </button>
+          <button
+            onClick={() => handleSwimlaneModeChange('priority')}
+            className={`w-full px-3 py-2 text-left text-xs hover:bg-slate-700 transition-colors flex items-center gap-2 last:rounded-b-lg ${
+              filters.swimlanesMode === 'priority' ? 'bg-slate-700 text-cyan-400' : 'text-slate-300'
+            }`}
+          >
+            🎯 Par priorité
+          </button>
+        </div>,
+        document.body
+      )}
     </div>
   );
 }

components/kanban/PrioritySwimlanesBoard.tsx

@@ -0,0 +1,65 @@
+'use client';
+
+import { Task, TaskStatus } from '@/lib/types';
+import { useMemo } from 'react';
+import { getAllPriorities } from '@/lib/status-config';
+import { SwimlanesBase, SwimlaneData } from './SwimlanesBase';
+
+interface PrioritySwimlanesoardProps {
+  tasks: Task[];
+  onDeleteTask?: (taskId: string) => Promise<void>;
+  onEditTask?: (task: Task) => void;
+  onUpdateTitle?: (taskId: string, newTitle: string) => Promise<void>;
+  onUpdateStatus?: (taskId: string, newStatus: TaskStatus) => Promise<void>;
+  compactView?: boolean;
+}
+
+export function PrioritySwimlanesBoard({ 
+  tasks, 
+  onDeleteTask, 
+  onEditTask, 
+  onUpdateTitle, 
+  onUpdateStatus, 
+  compactView = false 
+}: PrioritySwimlanesoardProps) {
+
+  // Grouper les tâches par priorités et créer les données de swimlanes
+  const swimlanesData = useMemo((): SwimlaneData[] => {
+    const grouped: { [priorityKey: string]: Task[] } = {};
+    
+    // Initialiser avec toutes les priorités
+    getAllPriorities().forEach(priority => {
+      grouped[priority.key] = [];
+    });
+    
+    tasks.forEach(task => {
+      if (grouped[task.priority]) {
+        grouped[task.priority].push(task);
+      }
+    });
+    
+    // Convertir en format SwimlaneData en respectant l'ordre de priorité
+    return getAllPriorities()
+      .sort((a, b) => b.order - a.order) // Ordre décroissant - plus importantes en haut
+      .map(priority => ({
+        key: priority.key,
+        label: priority.label,
+        icon: priority.icon,
+        color: priority.color,
+        tasks: grouped[priority.key] || []
+      }));
+  }, [tasks]);
+
+  return (
+    <SwimlanesBase
+      tasks={tasks}
+      title="Swimlanes par Priorité"
+      swimlanes={swimlanesData}
+      onDeleteTask={onDeleteTask}
+      onEditTask={onEditTask}
+      onUpdateTitle={onUpdateTitle}
+      onUpdateStatus={onUpdateStatus}
+      compactView={compactView}
+    />
+  );
+}

components/kanban/SwimlanesBase.tsx

@@ -0,0 +1,264 @@
+'use client';
+
+import { Task, TaskStatus } from '@/lib/types';
+import { TaskCard } from './TaskCard';
+import { useState } from 'react';
+import { useColumnVisibility } from '@/hooks/useColumnVisibility';
+import { ColumnVisibilityToggle } from './ColumnVisibilityToggle';
+import { getAllStatuses } from '@/lib/status-config';
+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';
+
+// 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 } = useDroppable({
+    id: status,
+  });
+
+  return (
+    <div ref={setNodeRef} className="min-h-[100px]">
+      <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 pour une swimlane
+export interface SwimlaneData {
+  key: string;
+  label: string;
+  icon?: string;
+  color?: string;
+  tasks: Task[];
+}
+
+interface SwimlanesBaseProps {
+  tasks: Task[];
+  title: string;
+  swimlanes: SwimlaneData[];
+  onDeleteTask?: (taskId: string) => Promise<void>;
+  onEditTask?: (task: Task) => void;
+  onUpdateTitle?: (taskId: string, newTitle: string) => Promise<void>;
+  onUpdateStatus?: (taskId: string, newStatus: TaskStatus) => Promise<void>;
+  compactView?: boolean;
+}
+
+export function SwimlanesBase({ 
+  tasks, 
+  title,
+  swimlanes,
+  onDeleteTask, 
+  onEditTask, 
+  onUpdateTitle, 
+  onUpdateStatus, 
+  compactView = false 
+}: SwimlanesBaseProps) {
+  const [activeTask, setActiveTask] = useState<Task | null>(null);
+  const [collapsedSwimlanes, setCollapsedSwimlanes] = useState<Set<string>>(new Set());
+  
+  // Gestion de la visibilité des colonnes
+  const { hiddenStatuses, toggleStatusVisibility, getVisibleStatuses } = useColumnVisibility();
+  const allStatuses = getAllStatuses();
+  const visibleStatuses = getVisibleStatuses(allStatuses.map(s => ({ id: s.key })))
+    .map(s => s.id);
+
+  // Configuration des sensors pour le drag & drop
+  const sensors = useSensors(
+    useSensor(PointerSensor, {
+      activationConstraint: {
+        distance: 8,
+      },
+    })
+  );
+
+  // 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);
+    }
+  };
+
+  // Basculer l'état d'une swimlane
+  const toggleSwimlane = (swimlaneKey: string) => {
+    const newCollapsed = new Set(collapsedSwimlanes);
+    if (newCollapsed.has(swimlaneKey)) {
+      newCollapsed.delete(swimlaneKey);
+    } else {
+      newCollapsed.add(swimlaneKey);
+    }
+    setCollapsedSwimlanes(newCollapsed);
+  };
+
+  return (
+    <DndContext
+      sensors={sensors}
+      collisionDetection={closestCenter}
+      onDragStart={handleDragStart}
+      onDragEnd={handleDragEnd}
+    >
+      <div className="flex flex-col h-full bg-slate-950">
+        {/* Header */}
+        <div className="flex-shrink-0 px-6 py-4 border-b border-slate-700/50">
+          <h2 className="text-lg font-mono font-bold text-slate-200 uppercase tracking-wider">
+            {title}
+          </h2>
+        </div>
+
+        {/* Headers des colonnes avec boutons toggle */}
+        <div className="flex items-center justify-between px-6 pb-4">
+          <ColumnVisibilityToggle
+            hiddenStatuses={hiddenStatuses}
+            onToggleStatus={toggleStatusVisibility}
+            tasks={tasks}
+          />
+        </div>
+
+        {/* Headers des colonnes visibles */}
+        <div 
+          className={`grid gap-4 px-6 pb-4 ml-8`}
+          style={{ gridTemplateColumns: `repeat(${visibleStatuses.length}, minmax(0, 1fr))` }}
+        >
+          {visibleStatuses.map(status => {
+            const statusConfig = allStatuses.find(s => s.key === status);
+            return (
+              <div key={status} className="text-center">
+                <h3 className="text-sm font-mono font-bold text-slate-300 uppercase tracking-wider">
+                  {statusConfig?.icon} {statusConfig?.label}
+                </h3>
+              </div>
+            );
+          })}
+        </div>
+
+        {/* Swimlanes */}
+        <div className="flex-1 overflow-y-auto px-6">
+          <div className="space-y-4">
+            {swimlanes.map(swimlane => {
+              const isCollapsed = collapsedSwimlanes.has(swimlane.key);
+              
+              return (
+                <div key={swimlane.key} className="border border-slate-700/50 rounded-lg bg-slate-900/30">
+                  {/* Header de la swimlane */}
+                  <div className="flex items-center p-2 border-b border-slate-700/50">
+                    <button
+                      onClick={() => toggleSwimlane(swimlane.key)}
+                      className="flex items-center gap-2 hover:bg-slate-800/50 rounded p-1 -m-1 transition-colors"
+                    >
+                      <svg 
+                        className={`w-4 h-4 text-slate-400 transition-transform ${isCollapsed ? '' : 'rotate-90'}`}
+                        fill="none" 
+                        stroke="currentColor" 
+                        viewBox="0 0 24 24"
+                      >
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+                      </svg>
+                      {swimlane.color && (
+                        <div
+                          className="w-3 h-3 rounded-full"
+                          style={{ backgroundColor: swimlane.color }}
+                        />
+                      )}
+                      <span className="text-slate-200 font-medium text-sm">
+                        {swimlane.icon && `${swimlane.icon} `}
+                        {swimlane.label} ({swimlane.tasks.length})
+                      </span>
+                    </button>
+                  </div>
+
+                  {/* Contenu de la swimlane */}
+                  {!isCollapsed && (
+                    <div 
+                      className={`grid gap-4 p-4`}
+                      style={{ gridTemplateColumns: `repeat(${visibleStatuses.length}, minmax(0, 1fr))` }}
+                    >
+                      {visibleStatuses.map(status => {
+                        const statusTasks = swimlane.tasks.filter(task => task.status === status);
+                        
+                        return (
+                          <DroppableColumn
+                            key={`${swimlane.key}-${status}`}
+                            status={status}
+                            tasks={statusTasks}
+                            onDeleteTask={onDeleteTask}
+                            onEditTask={onEditTask}
+                            onUpdateTitle={onUpdateTitle}
+                            compactView={compactView}
+                          />
+                        );
+                      })}
+                    </div>
+                  )}
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      </div>
+
+      {/* Drag overlay */}
+      <DragOverlay>
+        {activeTask && (
+          <TaskCard
+            task={activeTask}
+            compactView={compactView}
+          />
+        )}
+      </DragOverlay>
+    </DndContext>
+  );
+}
+

components/kanban/SwimlanesBoard.tsx

@@ -1,73 +1,9 @@
 'use client';
 
 import { Task, TaskStatus } from '@/lib/types';
-import { TaskCard } from './TaskCard';
-import { useMemo, useState } from 'react';
+import { useMemo } from 'react';
 import { useTasksContext } from '@/contexts/TasksContext';
-import { useColumnVisibility } from '@/hooks/useColumnVisibility';
-import { ColumnVisibilityToggle } from './ColumnVisibilityToggle';
-import { getAllStatuses } from '@/lib/status-config';
-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>
-  );
-}
+import { SwimlanesBase, SwimlaneData } from './SwimlanesBase';
 
 interface SwimlanesboardProps {
   tasks: Task[];
@@ -87,69 +23,9 @@ 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());
-  
-  // Gestion de la visibilité des colonnes
-  const { hiddenStatuses, toggleStatusVisibility, getVisibleStatuses } = useColumnVisibility();
 
-  // Configuration des capteurs pour le drag & drop
-  const sensors = useSensors(
-    useSensor(PointerSensor, {
-      activationConstraint: {
-        distance: 8,
-      },
-    })
-  );
-
-  // Configuration des statuts basée sur la config centralisée
-  const statuses = useMemo(() => {
-    return getAllStatuses().map(statusConfig => ({
-      id: statusConfig.key,
-      title: statusConfig.label,
-      color: statusConfig.color
-    }));
-  }, []);
-
-  // 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;
-    });
-  };
-
-  // Filtrer les statuts visibles
-  const visibleStatuses = getVisibleStatuses(statuses);
-
-  // Grouper les tâches par tags
-  const tasksByTag = useMemo(() => {
+  // Grouper les tâches par tags et créer les données de swimlanes
+  const swimlanesData = useMemo((): SwimlaneData[] => {
     const grouped: { [tagName: string]: Task[] } = {};
     
     // Ajouter une catégorie pour les tâches sans tags
@@ -168,135 +44,42 @@ export function SwimlanesBoard({
       }
     });
     
-    return grouped;
-  }, [tasks]);
+    // Convertir en format SwimlaneData et trier
+    return Object.entries(grouped)
+      .sort(([a, tasksA], [b, tasksB]) => {
+        // Mettre "Sans tag" à la fin
+        if (a === 'Sans tag') return 1;
+        if (b === 'Sans tag') return -1;
+        // Trier par nombre de tâches (décroissant)
+        return tasksB.length - tasksA.length;
+      })
+      .map(([tagName, tagTasks]) => {
+        // Obtenir la couleur du tag
+        const getTagColor = (name: string) => {
+          if (name === 'Sans tag') return '#64748b'; // slate-500
+          const tag = availableTags.find(t => t.name === name);
+          return tag?.color || '#64748b';
+        };
 
-  // Obtenir la couleur d'un tag
-  const getTagColor = (tagName: string) => {
-    if (tagName === 'Sans tag') return '#64748b'; // slate-500
-    const tag = availableTags.find(t => t.name === tagName);
-    return tag?.color || '#64748b';
-  };
+        return {
+          key: tagName,
+          label: tagName,
+          color: getTagColor(tagName),
+          tasks: tagTasks
+        };
+      });
+  }, [tasks, availableTags]);
 
   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">
-        <div className="w-2 h-2 bg-cyan-400 rounded-full animate-pulse"></div>
-        <h2 className="text-lg font-mono font-bold text-slate-100 uppercase tracking-wider">
-          Kanban Swimlanes
-        </h2>
-      </div>
-
-      {/* Headers des colonnes avec boutons toggle */}
-      <div className="flex items-center justify-between px-6 pb-4">
-        <ColumnVisibilityToggle
-          hiddenStatuses={hiddenStatuses}
-          onToggleStatus={toggleStatusVisibility}
-          tasks={tasks}
-        />
-      </div>
-
-      {/* Headers des colonnes visibles */}
-      <div 
-        className={`grid gap-4 px-6 pb-4 ml-8`}
-        style={{ gridTemplateColumns: `repeat(${visibleStatuses.length}, 1fr)` }}
-      >
-        {visibleStatuses.map(status => (
-          <div key={status.id} className="text-center">
-            <div className="text-sm font-mono font-bold text-slate-300 uppercase tracking-wider">
-              {status.title}
-            </div>
-          </div>
-        ))}
-      </div>
-
-      {/* Swimlanes */}
-      <div className="flex-1 overflow-y-auto px-6">
-        <div className="space-y-4">
-          {Object.entries(tasksByTag)
-            .sort(([a, tasksA], [b, tasksB]) => {
-              // Mettre "Sans tag" à la fin
-              if (a === 'Sans tag') return 1;
-              if (b === 'Sans tag') return -1;
-              // Trier par nombre de tâches (décroissant)
-              return tasksB.length - tasksA.length;
-            })
-            .map(([tagName, tagTasks]) => (
-            <div key={tagName} className="border border-slate-700/50 rounded-lg bg-slate-900/30">
-              {/* Header de la swimlane */}
-              <div className="flex items-center p-2 border-b border-slate-700/50">
-                <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) }}
-                  />
-                  <span className="text-sm font-mono font-medium text-slate-200">
-                    {tagName}
-                  </span>
-                  <span className="text-xs text-slate-400 bg-slate-700/50 px-2 py-1 rounded-full">
-                    {tagTasks.length}
-                  </span>
-                  <svg
-                    className={`w-3 h-3 text-slate-400 transition-transform duration-200 ${
-                      collapsedSwimlanes.has(tagName) ? 'rotate-180' : ''
-                    }`}
-                    fill="none"
-                    stroke="currentColor"
-                    viewBox="0 0 24 24"
-                  >
-                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
-                  </svg>
-                </button>
-              </div>
-
-              {/* Contenu de la swimlane */}
-              {!collapsedSwimlanes.has(tagName) && (
-                <div 
-                  className="gap-4 p-2 ml-8 grid"
-                  style={{ gridTemplateColumns: `repeat(${visibleStatuses.length}, 1fr)` }}
-                >
-                  {visibleStatuses.map(status => {
-                    const statusTasks = tagTasks.filter(task => task.status === status.id);
-                    return (
-                      <DroppableColumn
-                        key={status.id}
-                        status={status.id}
-                        tasks={statusTasks}
-                        onDeleteTask={onDeleteTask}
-                        onEditTask={onEditTask}
-                        onUpdateTitle={onUpdateTitle}
-                        compactView={compactView}
-                      />
-                    );
-                  })}
-                </div>
-              )}
-            </div>
-          ))}
-        </div>
-      </div>
-      </div>
-
-      {/* DragOverlay pour l'aperçu pendant le drag */}
-      <DragOverlay>
-        {activeTask && (
-          <TaskCard
-            task={activeTask}
-            compactView={compactView}
-          />
-        )}
-      </DragOverlay>
-    </DndContext>
+    <SwimlanesBase
+      tasks={tasks}
+      title="Swimlanes par Tag"
+      swimlanes={swimlanesData}
+      onDeleteTask={onDeleteTask}
+      onEditTask={onEditTask}
+      onUpdateTitle={onUpdateTitle}
+      onUpdateStatus={onUpdateStatus}
+      compactView={compactView}
+    />
   );
-}
+}