feat: introduce customizable background options with new gradient and solid color styles; integrate BackgroundProvider and BackgroundCard components for enhanced user experience in settings and layout

components/providers/background-provider.tsx

@@ -0,0 +1,89 @@
+"use client";
+
+import { useEffect } from "react";
+
+interface BackgroundSettings {
+  type: string;
+  customImageUrl?: string;
+}
+
+export function BackgroundProvider() {
+  useEffect(() => {
+    const applyBackground = () => {
+      try {
+        const pageBackground = document.querySelector(
+          ".page-background"
+        ) as HTMLElement;
+        if (!pageBackground) return;
+
+        const stored = localStorage.getItem("background-settings");
+        const settings: BackgroundSettings = stored
+          ? JSON.parse(stored)
+          : { type: "default" };
+
+        // Retirer toutes les classes de fond
+        pageBackground.classList.remove(
+          "bg-default",
+          "bg-gradient-blue",
+          "bg-gradient-purple",
+          "bg-gradient-green",
+          "bg-gradient-orange",
+          "bg-solid-light",
+          "bg-solid-dark",
+          "bg-custom-image"
+        );
+
+        const root = document.documentElement;
+
+        if (settings.type === "custom-image" && settings.customImageUrl) {
+          pageBackground.classList.add("bg-custom-image");
+          root.style.setProperty(
+            "--custom-background-image",
+            `url(${settings.customImageUrl})`
+          );
+        } else {
+          pageBackground.classList.add(`bg-${settings.type || "default"}`);
+          root.style.removeProperty("--custom-background-image");
+        }
+      } catch (error) {
+        console.error("Error applying background:", error);
+      }
+    };
+
+    // Appliquer immédiatement
+    applyBackground();
+
+    // Observer pour les changements de DOM (si le page-background est ajouté plus tard)
+    const observer = new MutationObserver(() => {
+      applyBackground();
+    });
+
+    observer.observe(document.body, {
+      childList: true,
+      subtree: true,
+    });
+
+    // Écouter les changements dans localStorage (autres onglets)
+    const handleStorageChange = (e: StorageEvent) => {
+      if (e.key === "background-settings") {
+        applyBackground();
+      }
+    };
+
+    // Écouter les événements personnalisés (même onglet)
+    const handleBackgroundChanged = () => {
+      applyBackground();
+    };
+
+    window.addEventListener("storage", handleStorageChange);
+    window.addEventListener("background-changed", handleBackgroundChanged);
+
+    return () => {
+      observer.disconnect();
+      window.removeEventListener("storage", handleStorageChange);
+      window.removeEventListener("background-changed", handleBackgroundChanged);
+    };
+  }, []);
+
+  return null;
+}