feat: add column visibility toggle to Kanban and Swimlanes boards

- Integrated `useColumnVisibility` hook for managing column visibility states.
- Added `ColumnVisibilityToggle` component to both `KanbanBoard` and `SwimlanesBoard` for user control over visible columns.
- Updated rendering logic to filter and display only visible columns, enhancing user experience and task organization.

components/kanban/SwimlanesBoard.tsx

@@ -4,6 +4,8 @@ import { Task, TaskStatus } from '@/lib/types';
 import { TaskCard } from './TaskCard';
 import { useMemo, useState } from 'react';
 import { useTasksContext } from '@/contexts/TasksContext';
+import { useColumnVisibility } from '@/hooks/useColumnVisibility';
+import { ColumnVisibilityToggle } from './ColumnVisibilityToggle';
 import {
   DndContext,
   DragEndEvent,
@@ -86,6 +88,9 @@ export function SwimlanesBoard({
   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(
@@ -137,6 +142,9 @@ export function SwimlanesBoard({
     });
   };
 
+  // Filtrer les statuts visibles
+  const visibleStatuses = getVisibleStatuses(statuses);
+
   // Grouper les tâches par tags
   const tasksByTag = useMemo(() => {
     const grouped: { [tagName: string]: Task[] } = {};
@@ -184,9 +192,21 @@ export function SwimlanesBoard({
         </h2>
       </div>
 
-      {/* Headers des colonnes */}
-      <div className="grid grid-cols-4 gap-4 px-6 pb-4 ml-8">
-        {statuses.map(status => (
+      {/* Headers des colonnes avec boutons toggle */}
+      <div className="flex items-center justify-between px-6 pb-4">
+        <ColumnVisibilityToggle
+          statuses={statuses}
+          hiddenStatuses={hiddenStatuses}
+          onToggleStatus={toggleStatusVisibility}
+        />
+      </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}
@@ -238,8 +258,11 @@ export function SwimlanesBoard({
 
               {/* Contenu de la swimlane */}
               {!collapsedSwimlanes.has(tagName) && (
-                <div className="grid grid-cols-4 gap-4 p-2 ml-8">
-                  {statuses.map(status => {
+                <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