Add profile and house background preferences to SitePreferences: Extend SitePreferences model and related services to include profileBackground and houseBackground fields. Update API and UI components to support new background settings, enhancing user customization options.

hooks/usePreferences.ts

@@ -6,6 +6,8 @@ interface Preferences {
   eventsBackground: string | null;
   leaderboardBackground: string | null;
   challengesBackground: string | null;
+  profileBackground: string | null;
+  houseBackground: string | null;
 }
 
 export function usePreferences() {
@@ -23,6 +25,8 @@ export function usePreferences() {
             eventsBackground: null,
             leaderboardBackground: null,
             challengesBackground: null,
+            profileBackground: null,
+            houseBackground: null,
           }
         );
         setLoading(false);
@@ -33,6 +37,8 @@ export function usePreferences() {
           eventsBackground: null,
           leaderboardBackground: null,
           challengesBackground: null,
+          profileBackground: null,
+          houseBackground: null,
         });
         setLoading(false);
       });
@@ -42,7 +48,7 @@ export function usePreferences() {
 }
 
 export function useBackgroundImage(
-  page: "home" | "events" | "leaderboard" | "challenges",
+  page: "home" | "events" | "leaderboard" | "challenges" | "profile" | "houses",
   defaultImage: string
 ) {
   const { preferences } = usePreferences();
@@ -51,7 +57,9 @@ export function useBackgroundImage(
 
   useEffect(() => {
     if (preferences) {
-      const imageKey = `${page}Background` as keyof Preferences;
+      // Mapping spécial pour "houses" -> "house" (car la colonne est houseBackground)
+      const dbPage = page === "houses" ? "house" : page;
+      const imageKey = `${dbPage}Background` as keyof Preferences;
       const customImage = preferences[imageKey];
       const rawImage = customImage || defaultImage;
       // Normaliser l'URL pour utiliser l'API si nécessaire