feat: add background customization settings with gradient and image options, update preferences context and UI components for user preferences management

src/components/layout/ClientLayout.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { ThemeProvider } from "next-themes";
-import { useState, useEffect } from "react";
+import { useState, useEffect, useMemo } from "react";
 import { Header } from "@/components/layout/Header";
 import { Sidebar } from "@/components/layout/Sidebar";
 import { InstallPWA } from "../ui/InstallPWA";
@@ -11,6 +11,7 @@ import { registerServiceWorker } from "@/lib/registerSW";
 import { NetworkStatus } from "../ui/NetworkStatus";
 import { DebugWrapper } from "@/components/debug/DebugWrapper";
 import { DebugProvider } from "@/contexts/DebugContext";
+import { usePreferences } from "@/contexts/PreferencesContext";
 import type { KomgaLibrary, KomgaSeries } from "@/types/komga";
 
 // Routes qui ne nécessitent pas d'authentification
@@ -26,6 +27,29 @@ interface ClientLayoutProps {
 export default function ClientLayout({ children, initialLibraries = [], initialFavorites = [], userIsAdmin = false }: ClientLayoutProps) {
   const [isSidebarOpen, setIsSidebarOpen] = useState(false);
   const pathname = usePathname();
+  const { preferences } = usePreferences();
+
+  const backgroundStyle = useMemo(() => {
+    const bg = preferences.background;
+    
+    if (bg.type === "gradient" && bg.gradient) {
+      return {
+        background: bg.gradient,
+        backgroundAttachment: "fixed" as const,
+      };
+    }
+    
+    if (bg.type === "image" && bg.imageUrl) {
+      return {
+        backgroundImage: `url(${bg.imageUrl})`,
+        backgroundSize: "cover" as const,
+        backgroundPosition: "center" as const,
+        backgroundAttachment: "fixed" as const,
+      };
+    }
+    
+    return {};
+  }, [preferences.background]);
 
   const handleCloseSidebar = () => {
     setIsSidebarOpen(false);
@@ -71,7 +95,7 @@ export default function ClientLayout({ children, initialLibraries = [], initialF
   return (
     <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
       <DebugProvider>
-        <div className="relative min-h-screen h-full">
+        <div className="relative min-h-screen h-full" style={backgroundStyle}>
           {!isPublicRoute && <Header onToggleSidebar={handleToggleSidebar} />}
           {!isPublicRoute && (
             <Sidebar 

src/components/settings/BackgroundSettings.tsx

@@ -0,0 +1,195 @@
+"use client";
+
+import { useState } from "react";
+import { useTranslate } from "@/hooks/useTranslate";
+import { usePreferences } from "@/contexts/PreferencesContext";
+import { Label } from "@/components/ui/label";
+import { useToast } from "@/components/ui/use-toast";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+import { GRADIENT_PRESETS } from "@/types/preferences";
+import type { BackgroundType } from "@/types/preferences";
+import { Check } from "lucide-react";
+
+export function BackgroundSettings() {
+  const { t } = useTranslate();
+  const { toast } = useToast();
+  const { preferences, updatePreferences } = usePreferences();
+  const [customImageUrl, setCustomImageUrl] = useState(preferences.background.imageUrl || "");
+
+  const handleBackgroundTypeChange = async (type: BackgroundType) => {
+    try {
+      await updatePreferences({
+        background: {
+          ...preferences.background,
+          type,
+        },
+      });
+      toast({
+        title: t("settings.title"),
+        description: t("settings.komga.messages.configSaved"),
+      });
+    } catch (error) {
+      console.error("Erreur:", error);
+      toast({
+        variant: "destructive",
+        title: t("settings.error.title"),
+        description: t("settings.error.message"),
+      });
+    }
+  };
+
+  const handleGradientSelect = async (gradient: string) => {
+    try {
+      await updatePreferences({
+        background: {
+          type: "gradient",
+          gradient,
+        },
+      });
+      toast({
+        title: t("settings.title"),
+        description: t("settings.komga.messages.configSaved"),
+      });
+    } catch (error) {
+      console.error("Erreur:", error);
+      toast({
+        variant: "destructive",
+        title: t("settings.error.title"),
+        description: t("settings.error.message"),
+      });
+    }
+  };
+
+  const handleCustomImageSave = async () => {
+    if (!customImageUrl.trim()) {
+      toast({
+        variant: "destructive",
+        title: t("settings.error.title"),
+        description: "Veuillez entrer une URL valide",
+      });
+      return;
+    }
+
+    try {
+      await updatePreferences({
+        background: {
+          type: "image",
+          imageUrl: customImageUrl,
+        },
+      });
+      toast({
+        title: t("settings.title"),
+        description: t("settings.komga.messages.configSaved"),
+      });
+    } catch (error) {
+      console.error("Erreur:", error);
+      toast({
+        variant: "destructive",
+        title: t("settings.error.title"),
+        description: t("settings.error.message"),
+      });
+    }
+  };
+
+  return (
+    <div className="rounded-lg border bg-card text-card-foreground shadow-sm">
+      <div className="p-5 space-y-6">
+        <div>
+          <h2 className="text-xl font-semibold flex items-center gap-2">
+            {t("settings.background.title")}
+          </h2>
+          <p className="text-sm text-muted-foreground mt-1">
+            {t("settings.background.description")}
+          </p>
+        </div>
+
+        <div className="space-y-6">
+          {/* Type de background */}
+          <div className="space-y-3">
+            <Label>{t("settings.background.type.label")}</Label>
+            <RadioGroup
+              value={preferences.background.type}
+              onValueChange={(value) => handleBackgroundTypeChange(value as BackgroundType)}
+              className="space-y-2"
+            >
+              <div className="flex items-center space-x-2">
+                <RadioGroupItem value="default" id="bg-default" />
+                <Label htmlFor="bg-default" className="cursor-pointer font-normal">
+                  {t("settings.background.type.default")}
+                </Label>
+              </div>
+              <div className="flex items-center space-x-2">
+                <RadioGroupItem value="gradient" id="bg-gradient" />
+                <Label htmlFor="bg-gradient" className="cursor-pointer font-normal">
+                  {t("settings.background.type.gradient")}
+                </Label>
+              </div>
+              <div className="flex items-center space-x-2">
+                <RadioGroupItem value="image" id="bg-image" />
+                <Label htmlFor="bg-image" className="cursor-pointer font-normal">
+                  {t("settings.background.type.image")}
+                </Label>
+              </div>
+            </RadioGroup>
+          </div>
+
+          {/* Sélection de dégradé */}
+          {preferences.background.type === "gradient" && (
+            <div className="space-y-3">
+              <Label>{t("settings.background.gradient.label")}</Label>
+              <div className="grid grid-cols-2 sm:grid-cols-4 gap-3">
+                {GRADIENT_PRESETS.map((preset) => (
+                  <button
+                    key={preset.id}
+                    onClick={() => handleGradientSelect(preset.gradient)}
+                    className="relative group rounded-lg overflow-hidden h-20 border-2 transition-all hover:scale-105"
+                    style={{
+                      background: preset.gradient,
+                      borderColor:
+                        preferences.background.gradient === preset.gradient
+                          ? "hsl(var(--primary))"
+                          : "transparent",
+                    }}
+                  >
+                    {preferences.background.gradient === preset.gradient && (
+                      <div className="absolute inset-0 flex items-center justify-center bg-black/20">
+                        <Check className="w-6 h-6 text-white" />
+                      </div>
+                    )}
+                    <div className="absolute bottom-0 left-0 right-0 bg-black/50 text-white text-xs p-1 text-center opacity-0 group-hover:opacity-100 transition-opacity">
+                      {preset.name}
+                    </div>
+                  </button>
+                ))}
+              </div>
+            </div>
+          )}
+
+          {/* URL d'image personnalisée */}
+          {preferences.background.type === "image" && (
+            <div className="space-y-3">
+              <Label htmlFor="custom-bg-url">{t("settings.background.image.label")}</Label>
+              <div className="flex gap-2">
+                <Input
+                  id="custom-bg-url"
+                  type="url"
+                  placeholder="https://example.com/image.jpg"
+                  value={customImageUrl}
+                  onChange={(e) => setCustomImageUrl(e.target.value)}
+                  className="flex-1"
+                />
+                <Button onClick={handleCustomImageSave}>{t("settings.background.image.save")}</Button>
+              </div>
+              <p className="text-xs text-muted-foreground">
+                {t("settings.background.image.description")}
+              </p>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+

src/components/settings/ClientSettings.tsx

@@ -5,6 +5,7 @@ import { useTranslate } from "@/hooks/useTranslate";
 import { DisplaySettings } from "./DisplaySettings";
 import { KomgaSettings } from "./KomgaSettings";
 import { CacheSettings } from "./CacheSettings";
+import { BackgroundSettings } from "./BackgroundSettings";
 
 interface ClientSettingsProps {
   initialConfig: KomgaConfig | null;
@@ -19,6 +20,7 @@ export function ClientSettings({ initialConfig, initialTTLConfig }: ClientSettin
       <h1 className="text-3xl font-bold">{t("settings.title")}</h1>
       <div className="space-y-8">
         <DisplaySettings />
+        <BackgroundSettings />
         <KomgaSettings initialConfig={initialConfig} />
         <CacheSettings initialTTLConfig={initialTTLConfig} />
       </div>

src/components/ui/radio-group.tsx

@@ -0,0 +1,41 @@
+"use client";
+
+import * as React from "react";
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
+import { Circle } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+const RadioGroup = React.forwardRef<
+  React.ElementRef<typeof RadioGroupPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
+>(({ className, ...props }, ref) => {
+  return (
+    <RadioGroupPrimitive.Root className={cn("grid gap-2", className)} {...props} ref={ref} />
+  );
+});
+RadioGroup.displayName = RadioGroupPrimitive.Root.displayName;
+
+const RadioGroupItem = React.forwardRef<
+  React.ElementRef<typeof RadioGroupPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>
+>(({ className, ...props }, ref) => {
+  return (
+    <RadioGroupPrimitive.Item
+      ref={ref}
+      className={cn(
+        "aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      {...props}
+    >
+      <RadioGroupPrimitive.Indicator className="flex items-center justify-center">
+        <Circle className="h-2.5 w-2.5 fill-current text-current" />
+      </RadioGroupPrimitive.Indicator>
+    </RadioGroupPrimitive.Item>
+  );
+});
+RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
+
+export { RadioGroup, RadioGroupItem };
+