feat: add opacity and blur controls for background settings, enhancing customization options in the UI

src/components/layout/ClientLayout.tsx

@@ -29,10 +29,12 @@ export default function ClientLayout({ children, initialLibraries = [], initialF
 
   const backgroundStyle = useMemo(() => {
     const bg = preferences.background;
+    const blur = bg.blur || 0;
     
     if (bg.type === "gradient" && bg.gradient) {
       return {
         backgroundImage: bg.gradient,
+        filter: blur > 0 ? `blur(${blur}px)` : undefined,
       };
     }
     
@@ -42,6 +44,7 @@ export default function ClientLayout({ children, initialLibraries = [], initialF
         backgroundSize: "cover" as const,
         backgroundPosition: "center" as const,
         backgroundRepeat: "no-repeat" as const,
+        filter: blur > 0 ? `blur(${blur}px)` : undefined,
       };
     }
     
@@ -90,6 +93,7 @@ export default function ClientLayout({ children, initialLibraries = [], initialF
   const isPublicRoute = publicRoutes.includes(pathname) || pathname.startsWith('/books/');
 
   const hasCustomBackground = preferences.background.type === "gradient" || preferences.background.type === "image";
+  const contentOpacity = (preferences.background.opacity || 100) / 100;
 
   return (
     <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
@@ -100,7 +104,10 @@ export default function ClientLayout({ children, initialLibraries = [], initialF
           style={backgroundStyle}
         />
       )}
-      <div className={`relative min-h-screen ${hasCustomBackground ? "bg-background/95" : "bg-background"}`}>
+      <div 
+        className={`relative min-h-screen ${hasCustomBackground ? "" : "bg-background"}`}
+        style={hasCustomBackground ? { backgroundColor: `rgba(var(--background-rgb, 255, 255, 255), ${contentOpacity})` } : undefined}
+      >
         {!isPublicRoute && <Header onToggleSidebar={handleToggleSidebar} />}
         {!isPublicRoute && (
           <Sidebar 

src/components/settings/BackgroundSettings.tsx

@@ -12,6 +12,7 @@ import { GRADIENT_PRESETS } from "@/types/preferences";
 import type { BackgroundType } from "@/types/preferences";
 import { Check } from "lucide-react";
 import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
+import { Slider } from "@/components/ui/slider";
 
 export function BackgroundSettings() {
   const { t } = useTranslate();
@@ -94,6 +95,32 @@ export function BackgroundSettings() {
     }
   };
 
+  const handleOpacityChange = async (value: number[]) => {
+    try {
+      await updatePreferences({
+        background: {
+          ...preferences.background,
+          opacity: value[0],
+        },
+      });
+    } catch (error) {
+      console.error("Erreur:", error);
+    }
+  };
+
+  const handleBlurChange = async (value: number[]) => {
+    try {
+      await updatePreferences({
+        background: {
+          ...preferences.background,
+          blur: value[0],
+        },
+      });
+    } catch (error) {
+      console.error("Erreur:", error);
+    }
+  };
+
   return (
     <Card>
       <CardHeader>
@@ -184,6 +211,47 @@ export function BackgroundSettings() {
               </p>
             </div>
           )}
+
+          {/* Contrôles d'opacité et de flou */}
+          {(preferences.background.type === "gradient" || preferences.background.type === "image") && (
+            <>
+              <div className="space-y-3">
+                <div className="flex items-center justify-between">
+                  <Label>Opacité du contenu</Label>
+                  <span className="text-sm text-muted-foreground">{preferences.background.opacity || 100}%</span>
+                </div>
+                <Slider
+                  value={[preferences.background.opacity || 100]}
+                  onValueChange={handleOpacityChange}
+                  min={0}
+                  max={100}
+                  step={5}
+                  className="w-full"
+                />
+                <p className="text-xs text-muted-foreground">
+                  Contrôle la transparence du contenu par rapport au background
+                </p>
+              </div>
+
+              <div className="space-y-3">
+                <div className="flex items-center justify-between">
+                  <Label>Flou du background</Label>
+                  <span className="text-sm text-muted-foreground">{preferences.background.blur || 0}px</span>
+                </div>
+                <Slider
+                  value={[preferences.background.blur || 0]}
+                  onValueChange={handleBlurChange}
+                  min={0}
+                  max={20}
+                  step={1}
+                  className="w-full"
+                />
+                <p className="text-xs text-muted-foreground">
+                  Applique un effet de flou au background
+                </p>
+              </div>
+            </>
+          )}
         </div>
       </CardContent>
     </Card>

src/components/ui/slider.tsx

@@ -0,0 +1,29 @@
+"use client"
+
+import * as React from "react"
+import * as SliderPrimitive from "@radix-ui/react-slider"
+
+import { cn } from "@/lib/utils"
+
+const Slider = React.forwardRef<
+  React.ElementRef<typeof SliderPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <SliderPrimitive.Root
+    ref={ref}
+    className={cn(
+      "relative flex w-full touch-none select-none items-center",
+      className
+    )}
+    {...props}
+  >
+    <SliderPrimitive.Track className="relative h-2 w-full grow overflow-hidden rounded-full bg-secondary">
+      <SliderPrimitive.Range className="absolute h-full bg-primary" />
+    </SliderPrimitive.Track>
+    <SliderPrimitive.Thumb className="block h-5 w-5 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50" />
+  </SliderPrimitive.Root>
+))
+Slider.displayName = SliderPrimitive.Root.displayName
+
+export { Slider }
+