refactor: userpreferences are now in the DB

components/kanban/SwimlanesBase.tsx

@@ -5,17 +5,15 @@ import { TaskCard } from './TaskCard';
 import { QuickAddTask } from './QuickAddTask';
 import { CreateTaskData } from '@/clients/tasks-client';
 import { useState } from 'react';
-import { useColumnVisibility } from '@/hooks/useColumnVisibility';
+import { useUserPreferences } from '@/contexts/UserPreferencesContext';
+import { useDragAndDrop } from '@/hooks/useDragAndDrop';
 import { getAllStatuses } from '@/lib/status-config';
 import {
   DndContext,
   DragEndEvent,
   DragOverlay,
   DragStartEvent,
-  closestCenter,
-  PointerSensor,
-  useSensor,
-  useSensors,
+  closestCenter
 } from '@dnd-kit/core';
 import {
   SortableContext,
@@ -143,19 +141,11 @@ export function SwimlanesBase({
   const [showQuickAdd, setShowQuickAdd] = useState<{ [key: string]: boolean }>({});
   
   // Gestion de la visibilité des colonnes
-  const { getVisibleStatuses } = useColumnVisibility();
+  const { isColumnVisible } = useUserPreferences();
+  const { isMounted, sensors } = useDragAndDrop();
   const allStatuses = getAllStatuses();
   const statusesToShow = 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,
-      },
-    })
-  );
+    allStatuses.filter(status => isColumnVisible(status.key)).map(s => s.key);
 
   // Handlers pour le drag & drop
   const handleDragStart = (event: DragStartEvent) => {
@@ -203,16 +193,10 @@ export function SwimlanesBase({
     setShowQuickAdd(prev => ({ ...prev, [columnId]: !prev[columnId] }));
   };
 
-  return (
-    <DndContext
-      sensors={sensors}
-      collisionDetection={closestCenter}
-      onDragStart={handleDragStart}
-      onDragEnd={handleDragEnd}
-    >
-      <div className="flex flex-col h-full bg-[var(--background)]">
-        {/* Espacement supérieur */}
-        <div className="flex-shrink-0 py-2"></div>
+  const content = (
+    <div className="flex flex-col h-full bg-[var(--background)]">
+      {/* Espacement supérieur */}
+      <div className="flex-shrink-0 py-2"></div>
 
 
         {/* Headers des colonnes visibles */}
@@ -305,7 +289,21 @@ export function SwimlanesBase({
           </div>
         </div>
       </div>
+  );
 
+  if (!isMounted) {
+    return content;
+  }
+
+  return (
+    <DndContext
+      sensors={sensors}
+      collisionDetection={closestCenter}
+      onDragStart={handleDragStart}
+      onDragEnd={handleDragEnd}
+    >
+      {content}
+      
       {/* Drag overlay */}
       <DragOverlay>
         {activeTask && (
@@ -315,7 +313,6 @@ export function SwimlanesBase({
           />
         )}
       </DragOverlay>
-
     </DndContext>
   );
 }