fix: preserve custom backgrounds and home fallback layering

src/components/home/HomeClientWrapper.tsx

@@ -5,6 +5,7 @@ import { useRouter } from "next/navigation";
 import { RefreshButton } from "@/components/library/RefreshButton";
 import { PullToRefreshIndicator } from "@/components/common/PullToRefreshIndicator";
 import { usePullToRefresh } from "@/hooks/usePullToRefresh";
+import { usePreferences } from "@/contexts/PreferencesContext";
 
 interface HomeClientWrapperProps {
   children: ReactNode;
@@ -13,6 +14,12 @@ interface HomeClientWrapperProps {
 export function HomeClientWrapper({ children }: HomeClientWrapperProps) {
   const router = useRouter();
   const [isRefreshing, setIsRefreshing] = useState(false);
+  const { preferences } = usePreferences();
+
+  const hasCustomBackground =
+    (preferences.background.type === "gradient" && Boolean(preferences.background.gradient)) ||
+    (preferences.background.type === "image" && Boolean(preferences.background.imageUrl)) ||
+    preferences.background.type === "komga-random";
 
   const handleRefresh = async () => {
     try {
@@ -44,8 +51,12 @@ export function HomeClientWrapper({ children }: HomeClientWrapperProps) {
         isHiding={pullToRefresh.isHiding}
       />
       <main className="relative isolate overflow-hidden">
-        <div className="pointer-events-none absolute inset-0 -z-10 bg-[linear-gradient(180deg,hsl(var(--background)/0.99)_0%,hsl(var(--background)/0.95)_28%,hsl(var(--background))_100%)]" />
+        {!hasCustomBackground && (
-        <div className="pointer-events-none absolute inset-0 -z-10 bg-[linear-gradient(128deg,hsl(var(--primary)/0.14)_0%,transparent_36%),linear-gradient(235deg,hsl(185_82%_54%/0.1)_4%,transparent_34%),linear-gradient(320deg,hsl(332_82%_63%/0.08)_8%,transparent_32%)]" />
+          <>
+            <div className="pointer-events-none absolute inset-0 -z-10 bg-[linear-gradient(180deg,hsl(var(--background)/0.99)_0%,hsl(var(--background)/0.95)_28%,hsl(var(--background))_100%)]" />
+            <div className="pointer-events-none absolute inset-0 -z-10 bg-[linear-gradient(128deg,hsl(var(--primary)/0.14)_0%,transparent_36%),linear-gradient(235deg,hsl(185_82%_54%/0.1)_4%,transparent_34%),linear-gradient(320deg,hsl(332_82%_63%/0.08)_8%,transparent_32%)]" />
+          </>
+        )}
 
         <div className="container mx-auto space-y-12 px-4 py-8">
           <div className="flex justify-end">

src/components/layout/ClientLayout.tsx

@@ -11,6 +11,7 @@ import { NetworkStatus } from "../ui/NetworkStatus";
 import { usePreferences } from "@/contexts/PreferencesContext";
 import { ServiceWorkerProvider } from "@/contexts/ServiceWorkerContext";
 import type { KomgaLibrary, KomgaSeries } from "@/types/komga";
+import { defaultPreferences } from "@/types/preferences";
 import logger from "@/lib/logger";
 import { getRandomBookFromLibraries } from "@/app/actions/library";
 
@@ -141,11 +142,9 @@ export default function ClientLayout({
   // Ne pas afficher le header et la sidebar sur les routes publiques et le reader
   const isPublicRoute = publicRoutes.includes(pathname) || pathname.startsWith("/books/");
 
-  const hasCustomBackground =
+  const hasCustomBackground = Object.keys(backgroundStyle).length > 0;
-    preferences.background.type === "gradient" ||
+  const contentOpacity =
-    preferences.background.type === "image" ||
+    (preferences.background.opacity ?? defaultPreferences.background.opacity ?? 10) / 100;
-    (preferences.background.type === "komga-random" && randomBookId);
-  const contentOpacity = (preferences.background.opacity || 100) / 100;
 
   return (
     <ThemeProvider attribute="class" defaultTheme="system" enableSystem>

src/components/settings/BackgroundSettings.tsx

@@ -66,6 +66,7 @@ export function BackgroundSettings({ initialLibraries }: BackgroundSettingsProps
     try {
       await updatePreferences({
         background: {
+          ...preferences.background,
           type: "gradient",
           gradient,
         },
@@ -97,6 +98,7 @@ export function BackgroundSettings({ initialLibraries }: BackgroundSettingsProps
     try {
       await updatePreferences({
         background: {
+          ...preferences.background,
           type: "image",
           imageUrl: customImageUrl,
         },

src/lib/services/preferences.service.ts

@@ -39,7 +39,10 @@ export class PreferencesService {
           ...displayMode,
           viewMode: displayMode?.viewMode || defaultPreferences.displayMode.viewMode,
         },
-        background: preferences.background as unknown as BackgroundPreferences,
+        background: {
+          ...defaultPreferences.background,
+          ...(preferences.background as unknown as BackgroundPreferences),
+        },
         readerPrefetchCount: preferences.readerPrefetchCount,
       };
     } catch (error) {
@@ -62,7 +65,10 @@ export class PreferencesService {
         updateData.showOnlyUnread = preferences.showOnlyUnread;
       if (preferences.displayMode !== undefined) updateData.displayMode = preferences.displayMode;
       if (preferences.background !== undefined) {
-        updateData.background = preferences.background as unknown as Prisma.InputJsonValue;
+        updateData.background = {
+          ...defaultPreferences.background,
+          ...(preferences.background as unknown as BackgroundPreferences),
+        } as unknown as Prisma.InputJsonValue;
       }
       if (preferences.readerPrefetchCount !== undefined)
         updateData.readerPrefetchCount = preferences.readerPrefetchCount;
@@ -85,7 +91,10 @@ export class PreferencesService {
         showThumbnails: updatedPreferences.showThumbnails,
         showOnlyUnread: updatedPreferences.showOnlyUnread,
         displayMode: updatedPreferences.displayMode as UserPreferences["displayMode"],
-        background: updatedPreferences.background as unknown as BackgroundPreferences,
+        background: {
+          ...defaultPreferences.background,
+          ...(updatedPreferences.background as unknown as BackgroundPreferences),
+        },
         readerPrefetchCount: updatedPreferences.readerPrefetchCount,
       };
     } catch (error) {