feat: enhance keyboard shortcuts and background image handling

- Added `GlobalKeyboardShortcuts` component to manage global keyboard shortcuts.
- Introduced new keyboard shortcut (Shift + B) for changing the background.
- Updated `BackgroundImageSelector` to preserve custom background URLs and allow restoration of previously set backgrounds.
- Improved local storage handling for custom backgrounds to enhance user experience.

src/hooks/useBackgroundCycle.ts

@@ -0,0 +1,103 @@
+'use client';
+
+import { useUserPreferences } from '@/contexts/UserPreferencesContext';
+
+// Liste des backgrounds prédéfinis pour le cycle
+const BACKGROUND_CYCLE = [
+  'none',
+  'theme-subtle', 
+  'theme-primary',
+  'theme-accent',
+  'theme-success',
+  'theme-purple',
+  'theme-diagonal',
+  'theme-radial',
+  'theme-sunset',
+  'theme-ocean',
+  'theme-forest',
+  'theme-galaxy'
+];
+
+export function useBackgroundCycle() {
+  const { preferences, updateViewPreferences } = useUserPreferences();
+
+  const cycleBackground = () => {
+    const currentBackground = preferences?.viewPreferences?.backgroundImage;
+    
+    // Construire la liste complète des backgrounds (prédéfinis + personnalisé)
+    const allBackgrounds = [...BACKGROUND_CYCLE];
+    
+    // Ajouter l'image personnalisée préservée si elle existe
+    const preservedCustomUrl = localStorage.getItem('preservedCustomBackground');
+    console.log('Debug cycle:', {
+      currentBackground,
+      preservedCustomUrl,
+      localStorageKeys: Object.keys(localStorage)
+    });
+    
+    if (preservedCustomUrl && !BACKGROUND_CYCLE.includes(preservedCustomUrl)) {
+      allBackgrounds.push(preservedCustomUrl);
+    }
+    
+    // Ajouter aussi l'image actuelle si elle est personnalisée ET différente de celle préservée
+    if (currentBackground && 
+        !BACKGROUND_CYCLE.includes(currentBackground) && 
+        currentBackground !== preservedCustomUrl) {
+      allBackgrounds.push(currentBackground);
+    }
+
+    const currentIndex = allBackgrounds.findIndex(bg => bg === currentBackground);
+    
+    // Si on ne trouve pas l'index, c'est qu'on est sur "none" (undefined)
+    // Dans ce cas, on commence au début de la liste
+    let actualCurrentIndex = currentIndex;
+    if (currentIndex === -1) {
+      actualCurrentIndex = -1; // On est sur "none", on va commencer à l'index 0
+    }
+    
+    const nextIndex = (actualCurrentIndex + 1) % allBackgrounds.length;
+    const nextBackground = allBackgrounds[nextIndex];
+    
+    // Si c'est 'none', on met undefined
+    const backgroundImage = nextBackground === 'none' ? undefined : nextBackground;
+    
+    // Si on est sur "none" (undefined) et qu'on va vers "none", on va vers le suivant
+    if (currentBackground === undefined && nextBackground === 'none') {
+      const nextNextIndex = (nextIndex + 1) % allBackgrounds.length;
+      const nextNextBackground = allBackgrounds[nextNextIndex];
+      const finalBackgroundImage = nextNextBackground === 'none' ? undefined : nextNextBackground;
+      
+      console.log('Cycle result:', {
+        allBackgrounds,
+        currentIndex,
+        actualCurrentIndex,
+        nextIndex,
+        nextBackground,
+        backgroundImage,
+        currentBackground,
+        nextNextIndex,
+        nextNextBackground,
+        finalBackgroundImage
+      });
+      
+      updateViewPreferences({ backgroundImage: finalBackgroundImage });
+      return;
+    }
+    
+    console.log('Cycle result:', {
+      allBackgrounds,
+      currentIndex,
+      actualCurrentIndex,
+      nextIndex,
+      nextBackground,
+      backgroundImage,
+      currentBackground
+    });
+    
+    updateViewPreferences({ backgroundImage });
+  };
+
+  return {
+    cycleBackground
+  };
+}