refactor: userpreferences are now in the DB

components/kanban/ObjectivesBoard.tsx

@@ -1,7 +1,8 @@
 'use client';
 
 import { useState } from 'react';
-import { useObjectivesCollapse } from '@/hooks/useObjectivesCollapse';
+import { useUserPreferences } from '@/contexts/UserPreferencesContext';
+import { useDragAndDrop } from '@/hooks/useDragAndDrop';
 import { Task, TaskStatus } from '@/lib/types';
 import { TaskCard } from './TaskCard';
 import { Card, CardHeader, CardContent } from '@/components/ui/Card';
@@ -10,10 +11,7 @@ import {
   DndContext,
   DragEndEvent,
   DragOverlay,
-  DragStartEvent,
-  PointerSensor,
-  useSensor,
-  useSensors,
+  DragStartEvent
 } from '@dnd-kit/core';
 import {
   SortableContext,
@@ -105,18 +103,11 @@ export function ObjectivesBoard({
   compactView = false,
   pinnedTagName = "Objectifs"
 }: ObjectivesBoardProps) {
-  const { isCollapsed, toggleCollapse } = useObjectivesCollapse();
+  const { preferences, toggleObjectivesCollapse } = useUserPreferences();
+  const isCollapsed = preferences.viewPreferences.objectivesCollapsed;
+  const { isMounted, sensors } = useDragAndDrop();
   const [activeTask, setActiveTask] = useState<Task | null>(null);
 
-  // Configuration des sensors pour le drag & drop
-  const sensors = useSensors(
-    useSensor(PointerSensor, {
-      activationConstraint: {
-        distance: 8, // Évite les clics accidentels
-      },
-    })
-  );
-
   // Handlers pour le drag & drop
   const handleDragStart = (event: DragStartEvent) => {
     const task = tasks.find(t => t.id === event.active.id);
@@ -143,20 +134,14 @@ export function ObjectivesBoard({
     return null; // Ne rien afficher s'il n'y a pas d'objectifs
   }
 
-  return (
-    <DndContext
-      id="objectives-board"
-      sensors={sensors}
-      onDragStart={handleDragStart}
-      onDragEnd={handleDragEnd}
-    >
-      <div className="bg-[var(--card)]/30 border-b border-[var(--accent)]/30">
-        <div className="container mx-auto px-6 py-4">
+  const content = (
+    <div className="bg-[var(--card)]/30 border-b border-[var(--accent)]/30">
+      <div className="container mx-auto px-6 py-4">
           <Card variant="column" className="border-[var(--accent)]/30 shadow-[var(--accent)]/10">
             <CardHeader className="pb-3">
               <div className="flex items-center justify-between">
                 <button
-                  onClick={toggleCollapse}
+                  onClick={toggleObjectivesCollapse}
                   className="flex items-center gap-3 hover:bg-[var(--accent)]/20 rounded-lg p-2 -m-2 transition-colors group"
                 >
                   <div className="w-3 h-3 bg-[var(--accent)] rounded-full animate-pulse shadow-[var(--accent)]/50 shadow-lg"></div>
@@ -189,7 +174,7 @@ export function ObjectivesBoard({
                   
                   {/* Bouton collapse séparé pour mobile */}
                   <button
-                    onClick={toggleCollapse}
+                    onClick={toggleObjectivesCollapse}
                     className="lg:hidden p-1 hover:bg-[var(--accent)]/20 rounded transition-colors"
                     aria-label={isCollapsed ? "Développer" : "Réduire"}
                   >
@@ -261,7 +246,21 @@ export function ObjectivesBoard({
           </Card>
         </div>
       </div>
+  );
 
+  if (!isMounted) {
+    return content;
+  }
+
+  return (
+    <DndContext
+      id="objectives-board"
+      sensors={sensors}
+      onDragStart={handleDragStart}
+      onDragEnd={handleDragEnd}
+    >
+      {content}
+      
       {/* Overlay pour le drag & drop */}
       <DragOverlay>
         {activeTask ? (