feat: add opacity and blur adjustment controls in BackgroundSettings for enhanced user customization

src/components/settings/BackgroundSettings.tsx

@@ -10,7 +10,7 @@ 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";
+import { Check, Minus, Plus } from "lucide-react";
 import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
 import { Slider } from "@/components/ui/slider";
 
@@ -121,6 +121,26 @@ export function BackgroundSettings() {
     }
   };
 
+  const adjustOpacity = async (delta: number) => {
+    try {
+      const currentOpacity = preferences.background.opacity || 10;
+      const newOpacity = Math.max(0, Math.min(100, currentOpacity + delta));
+      await handleOpacityChange([newOpacity]);
+    } catch (error) {
+      console.error("Erreur ajustement opacité:", error);
+    }
+  };
+
+  const adjustBlur = async (delta: number) => {
+    try {
+      const currentBlur = preferences.background.blur || 0;
+      const newBlur = Math.max(0, Math.min(20, currentBlur + delta));
+      await handleBlurChange([newBlur]);
+    } catch (error) {
+      console.error("Erreur ajustement flou:", error);
+    }
+  };
+
   return (
     <Card>
       <CardHeader>
@@ -218,16 +238,36 @@ export function BackgroundSettings() {
               <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>
+                  <span className="text-sm text-muted-foreground">{preferences.background.opacity || 10}%</span>
+                </div>
+                <div className="space-y-3">
+                  <div className="flex items-center gap-3">
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      onClick={() => adjustOpacity(-5)}
+                      className="h-10 w-10 p-0"
+                    >
+                      <Minus className="h-4 w-4" />
+                    </Button>
+                    <Slider
+                      value={[preferences.background.opacity || 10]}
+                      onValueChange={handleOpacityChange}
+                      min={0}
+                      max={100}
+                      step={5}
+                      className="flex-1"
+                    />
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      onClick={() => adjustOpacity(5)}
+                      className="h-10 w-10 p-0"
+                    >
+                      <Plus className="h-4 w-4" />
+                    </Button>
+                  </div>
                 </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>
@@ -238,14 +278,34 @@ export function BackgroundSettings() {
                   <Label>Flou du background</Label>
                   <span className="text-sm text-muted-foreground">{preferences.background.blur || 0}px</span>
                 </div>
-                <Slider
+                <div className="space-y-3">
-                  value={[preferences.background.blur || 0]}
+                  <div className="flex items-center gap-3">
-                  onValueChange={handleBlurChange}
+                    <Button
-                  min={0}
+                      variant="outline"
-                  max={20}
+                      size="sm"
-                  step={1}
+                      onClick={() => adjustBlur(-1)}
-                  className="w-full"
+                      className="h-10 w-10 p-0"
-                />
+                    >
+                      <Minus className="h-4 w-4" />
+                    </Button>
+                    <Slider
+                      value={[preferences.background.blur || 0]}
+                      onValueChange={handleBlurChange}
+                      min={0}
+                      max={20}
+                      step={1}
+                      className="flex-1"
+                    />
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      onClick={() => adjustBlur(1)}
+                      className="h-10 w-10 p-0"
+                    >
+                      <Plus className="h-4 w-4" />
+                    </Button>
+                  </div>
+                </div>
                 <p className="text-xs text-muted-foreground">
                   Applique un effet de flou au background
                 </p>

src/components/ui/slider.tsx

@@ -12,15 +12,16 @@ const Slider = React.forwardRef<
   <SliderPrimitive.Root
     ref={ref}
     className={cn(
-      "relative flex w-full touch-none select-none items-center",
+      "relative flex w-full touch-auto select-none items-center",
       className
     )}
+    style={{ touchAction: 'pan-x' }}
     {...props}
   >
-    <SliderPrimitive.Track className="relative h-2 w-full grow overflow-hidden rounded-full bg-secondary">
+    <SliderPrimitive.Track className="relative h-3 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.Thumb className="block h-6 w-6 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 hover:scale-110 active:scale-105 touch-manipulation cursor-pointer" />
   </SliderPrimitive.Root>
 ))
 Slider.displayName = SliderPrimitive.Root.displayName

src/types/preferences.ts

@@ -29,7 +29,7 @@ export const defaultPreferences: UserPreferences = {
   },
   background: {
     type: "default",
-    opacity: 100,
+    opacity: 10,
     blur: 0,
   },
 };