From 8e7c46de239c6ce602d25231516c493336237867 Mon Sep 17 00:00:00 2001
From: Julien Froidefond <julienfroidefond@gmail.com>
Date: Sat, 28 Feb 2026 22:07:29 +0100
Subject: [PATCH] refactor: unify and enrich default app background styling

---
 src/components/home/HomeClientWrapper.tsx | 14 --------------
 src/components/layout/ClientLayout.tsx    |  9 ++++++++-
 2 files changed, 8 insertions(+), 15 deletions(-)

diff --git a/src/components/home/HomeClientWrapper.tsx b/src/components/home/HomeClientWrapper.tsx
index 8fd22b8..15c2817 100644
--- a/src/components/home/HomeClientWrapper.tsx
+++ b/src/components/home/HomeClientWrapper.tsx
@@ -5,7 +5,6 @@ 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;
@@ -14,12 +13,6 @@ 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 {
@@ -51,13 +44,6 @@ export function HomeClientWrapper({ children }: HomeClientWrapperProps) {
         isHiding={pullToRefresh.isHiding}
       />
       <main className="relative isolate overflow-hidden">
-        {!hasCustomBackground && (
-          <>
-            <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">
             <RefreshButton libraryId="home" refreshLibrary={handleRefresh} />
diff --git a/src/components/layout/ClientLayout.tsx b/src/components/layout/ClientLayout.tsx
index 135a696..496d535 100644
--- a/src/components/layout/ClientLayout.tsx
+++ b/src/components/layout/ClientLayout.tsx
@@ -151,8 +151,15 @@ export default function ClientLayout({
       <ServiceWorkerProvider>
         {/* Background fixe pour les images et gradients */}
         {hasCustomBackground && <div className="fixed inset-0 -z-10" style={backgroundStyle} />}
+        {!hasCustomBackground && (
+          <>
+            <div className="pointer-events-none fixed inset-0 -z-10 bg-[linear-gradient(180deg,hsl(var(--background)/0.99)_0%,hsl(var(--background)/0.94)_42%,hsl(var(--background))_100%)]" />
+            <div className="pointer-events-none fixed inset-0 -z-10 bg-[radial-gradient(70%_45%_at_12%_0%,hsl(var(--primary)/0.16),transparent_62%),radial-gradient(58%_38%_at_88%_8%,hsl(190_86%_56%/0.14),transparent_65%),radial-gradient(50%_34%_at_50%_100%,hsl(334_72%_62%/0.1),transparent_70%)]" />
+            <div className="pointer-events-none fixed inset-0 -z-10 bg-[repeating-linear-gradient(0deg,hsl(var(--foreground)/0.02)_0_1px,transparent_1px_24px),repeating-linear-gradient(90deg,hsl(var(--foreground)/0.015)_0_1px,transparent_1px_30px)]" />
+          </>
+        )}
         <div
-          className={`relative min-h-screen ${hasCustomBackground ? "" : "bg-background"}`}
+          className="relative min-h-screen"
           style={
             hasCustomBackground
               ? { backgroundColor: `rgba(var(--background-rgb, 255, 255, 255), ${contentOpacity})` }