feat: optimize UserPreferencesContext with debounce and local storage

- Added debounce functionality for kanban filters, view preferences, and column visibility updates to reduce server load.
- Implemented local storage synchronization for immediate updates, ensuring user preferences persist across sessions.
- Removed unnecessary startTransition calls to streamline state updates and improve UI responsiveness.

src/contexts/UserPreferencesContext.tsx

@@ -1,6 +1,15 @@
 'use client';
 
 import { createContext, useContext, ReactNode, useState, useCallback, useEffect, useTransition } from 'react';
+
+// Types pour les timeouts de debounce
+declare global {
+  interface Window {
+    kanbanFiltersSyncTimeout?: NodeJS.Timeout;
+    viewPreferencesSyncTimeout?: NodeJS.Timeout;
+    columnVisibilitySyncTimeout?: NodeJS.Timeout;
+  }
+}
 import { UserPreferences, KanbanFilters, ViewPreferences, ColumnVisibility, TaskStatus } from '@/lib/types';
 import {
   updateViewPreferences as updateViewPreferencesAction,
@@ -79,7 +88,7 @@ const defaultPreferences: UserPreferences = {
 
 export function UserPreferencesProvider({ children, initialPreferences }: UserPreferencesProviderProps) {
   const [preferences, setPreferences] = useState<UserPreferences>(initialPreferences || defaultPreferences);
-  const [isPending, startTransition] = useTransition();
+  const [isPending] = useTransition();
   const { toggleTheme: themeToggleTheme, setTheme: themeSetTheme } = useTheme();
   const { status } = useSession();
 
@@ -116,63 +125,63 @@ export function UserPreferencesProvider({ children, initialPreferences }: UserPr
   // === KANBAN FILTERS ===
   
   const updateKanbanFilters = useCallback((updates: Partial<KanbanFilters>) => {
-    startTransition(async () => {
+    // Optimistic update immédiat
-      const originalFilters = preferences.kanbanFilters;
-      
-      // Optimistic update
     setPreferences(prev => ({ 
       ...prev, 
       kanbanFilters: { ...prev.kanbanFilters, ...updates }
     }));
     
-      try {
+    // Sauvegarde locale immédiate pour éviter les pertes
-        const result = await updateKanbanFiltersAction(updates);
+    const newFilters = { ...preferences.kanbanFilters, ...updates };
-        if (!result.success) {
+    localStorage.setItem('kanbanFilters', JSON.stringify(newFilters));
-          console.error('Erreur server action:', result.error);
+    
-          setPreferences(prev => ({ ...prev, kanbanFilters: originalFilters }));
+    // Sync en arrière-plan avec debounce
-        }
+    clearTimeout(window.kanbanFiltersSyncTimeout);
-      } catch (error) {
+    window.kanbanFiltersSyncTimeout = setTimeout(() => {
+      updateKanbanFiltersAction(updates).catch(error => {
         console.error('Erreur lors de la mise à jour des filtres Kanban:', error);
-        setPreferences(prev => ({ ...prev, kanbanFilters: originalFilters }));
-      }
       });
+    }, 1000); // debounce 1s
   }, [preferences.kanbanFilters]);
 
   // === VIEW PREFERENCES ===
   
   const updateViewPreferences = useCallback((updates: Partial<ViewPreferences>) => {
-    startTransition(async () => {
+    // Optimistic update immédiat
-      const originalPreferences = preferences.viewPreferences;
-      
-      // Optimistic update
     setPreferences(prev => ({ 
       ...prev, 
       viewPreferences: { ...prev.viewPreferences, ...updates }
     }));
     
-      try {
+    // Sauvegarde locale immédiate pour éviter les pertes
-        const result = await updateViewPreferencesAction(updates);
+    const newViewPrefs = { ...preferences.viewPreferences, ...updates };
-        if (!result.success) {
+    localStorage.setItem('viewPreferences', JSON.stringify(newViewPrefs));
-          console.error('Erreur server action:', result.error);
+    
-          setPreferences(prev => ({ ...prev, viewPreferences: originalPreferences }));
+    // Sync en arrière-plan avec debounce
-        }
+    clearTimeout(window.viewPreferencesSyncTimeout);
-      } catch (error) {
+    window.viewPreferencesSyncTimeout = setTimeout(() => {
+      updateViewPreferencesAction(updates).catch(error => {
         console.error('Erreur lors de la mise à jour des préférences de vue:', error);
-        setPreferences(prev => ({ ...prev, viewPreferences: originalPreferences }));
-      }
       });
+    }, 1000); // debounce 1s
   }, [preferences.viewPreferences]);
 
   const toggleObjectivesVisibility = useCallback(() => {
-    startTransition(async () => {
+    // Non-bloquant : utiliser setTimeout pour éviter de bloquer l'UI
-      await toggleObjectivesVisibilityAction();
+    setTimeout(() => {
+      toggleObjectivesVisibilityAction().catch(error => {
+        console.error('Erreur lors du toggle de la visibilité des objectifs:', error);
       });
+    }, 0);
   }, []);
 
   const toggleObjectivesCollapse = useCallback(() => {
-    startTransition(async () => {
+    // Non-bloquant : utiliser setTimeout pour éviter de bloquer l'UI
-      await toggleObjectivesCollapseAction();
+    setTimeout(() => {
+      toggleObjectivesCollapseAction().catch(error => {
+        console.error('Erreur lors du toggle du collapse des objectifs:', error);
       });
+    }, 0);
   }, []);
 
   const toggleTheme = useCallback(() => {
@@ -184,9 +193,6 @@ export function UserPreferencesProvider({ children, initialPreferences }: UserPr
   }, [themeSetTheme]);
 
   const toggleFontSize = useCallback(() => {
-    startTransition(async () => {
-      const originalPreferences = preferences.viewPreferences;
-      
     // Optimistic update - cycle through font sizes
     const fontSizes: ('small' | 'medium' | 'large')[] = ['small', 'medium', 'large'];
     const currentIndex = fontSizes.indexOf(preferences.viewPreferences.fontSize);
@@ -198,47 +204,37 @@ export function UserPreferencesProvider({ children, initialPreferences }: UserPr
       viewPreferences: { ...prev.viewPreferences, fontSize: newFontSize }
     }));
     
-      try {
+    // Non-bloquant : utiliser setTimeout pour éviter de bloquer l'UI
-        const result = await toggleFontSizeAction();
+    setTimeout(() => {
-        if (!result.success) {
+      toggleFontSizeAction().catch(error => {
-          console.error('Erreur server action:', result.error);
-          setPreferences(prev => ({ ...prev, viewPreferences: originalPreferences }));
-        }
-      } catch (error) {
         console.error('Erreur lors du toggle de la taille de police:', error);
-        setPreferences(prev => ({ ...prev, viewPreferences: originalPreferences }));
-      }
       });
-  }, [preferences.viewPreferences]);
+    }, 0);
+  }, [preferences.viewPreferences.fontSize]);
 
   // === COLUMN VISIBILITY ===
   
   const updateColumnVisibility = useCallback((updates: Partial<ColumnVisibility>) => {
-    startTransition(async () => {
+    // Optimistic update immédiat
-      const originalVisibility = preferences.columnVisibility;
-      
-      // Optimistic update
     setPreferences(prev => ({ 
       ...prev, 
       columnVisibility: { ...prev.columnVisibility, ...updates }
     }));
     
-      try {
+    // Sauvegarde locale immédiate pour éviter les pertes
-        const result = await updateColumnVisibilityAction(updates);
+    const newColumnVisibility = { ...preferences.columnVisibility, ...updates };
-        if (!result.success) {
+    localStorage.setItem('columnVisibility', JSON.stringify(newColumnVisibility));
-          console.error('Erreur server action:', result.error);
+    
-          setPreferences(prev => ({ ...prev, columnVisibility: originalVisibility }));
+    // Sync en arrière-plan avec debounce
-        }
+    clearTimeout(window.columnVisibilitySyncTimeout);
-      } catch (error) {
+    window.columnVisibilitySyncTimeout = setTimeout(() => {
+      updateColumnVisibilityAction(updates).catch(error => {
         console.error('Erreur lors de la mise à jour de la visibilité des colonnes:', error);
-        setPreferences(prev => ({ ...prev, columnVisibility: originalVisibility }));
-      }
       });
+    }, 1000); // debounce 1s
   }, [preferences.columnVisibility]);
 
   const toggleColumnVisibility = useCallback((status: TaskStatus) => {
-    startTransition(async () => {
-      const originalVisibility = preferences.columnVisibility;
     const hiddenStatuses = [...preferences.columnVisibility.hiddenStatuses];
     
     // Optimistic update
@@ -256,18 +252,17 @@ export function UserPreferencesProvider({ children, initialPreferences }: UserPr
       columnVisibility: { ...prev.columnVisibility, hiddenStatuses }
     }));
 
-      try {
+    // Sauvegarde locale immédiate pour éviter les pertes
-        const result = await toggleColumnVisibilityAction(status);
+    localStorage.setItem('columnVisibility', JSON.stringify({ hiddenStatuses }));
-        if (!result.success) {
+    
-          console.error('Erreur server action:', result.error);
+    // Sync en arrière-plan avec debounce
-          setPreferences(prev => ({ ...prev, columnVisibility: originalVisibility }));
+    clearTimeout(window.columnVisibilitySyncTimeout);
-        }
+    window.columnVisibilitySyncTimeout = setTimeout(() => {
-      } catch (error) {
+      toggleColumnVisibilityAction(status).catch(error => {
         console.error('Erreur lors du toggle de la visibilité des colonnes:', error);
-        setPreferences(prev => ({ ...prev, columnVisibility: originalVisibility }));
-      }
       });
-  }, [preferences.columnVisibility]);
+    }, 1000); // debounce 1s
+  }, [preferences.columnVisibility.hiddenStatuses]);
 
   const isColumnVisible = useCallback((status: TaskStatus) => {
     return !preferences.columnVisibility.hiddenStatuses.includes(status);