refactor: replace input controls with SliderControl for max concurrent requests, reader prefetch count, and circuit breaker settings in AdvancedSettings and BackgroundSettings components

src/components/settings/BackgroundSettings.tsx

@@ -10,10 +10,10 @@ 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, Minus, Plus } from "lucide-react";
+import { Check } from "lucide-react";
 import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
-import { Slider } from "@/components/ui/slider";
 import { Checkbox } from "@/components/ui/checkbox";
+import { SliderControl } from "@/components/ui/slider-control";
 import type { KomgaLibrary } from "@/types/komga";
 import logger from "@/lib/logger";
 
@@ -147,25 +147,6 @@ 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) {
-      logger.error({ err: error }, "Erreur ajustement opacité:");
-    }
-  };
-
-  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) {
-      logger.error({ err: error }, "Erreur ajustement flou:");
-    }
-  };
 
   const handleLibraryToggle = async (libraryId: string) => {
     const newSelection = selectedLibraries.includes(libraryId)
@@ -317,81 +298,27 @@ export function BackgroundSettings() {
             preferences.background.type === "image" ||
             preferences.background.type === "komga-random") && (
             <>
-              <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 || 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>
-                <p className="text-xs text-muted-foreground">
-                  Contrôle la transparence du contenu par rapport au background
-                </p>
-              </div>
+              <SliderControl
+                label="Opacité du contenu"
+                value={preferences.background.opacity || 10}
+                min={0}
+                max={100}
+                step={5}
+                unit="%"
+                description="Contrôle la transparence du contenu par rapport au background"
+                onChange={(value) => handleOpacityChange([value])}
+              />
 
-              <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>
-                <div className="space-y-3">
-                  <div className="flex items-center gap-3">
-                    <Button
-                      variant="outline"
-                      size="sm"
-                      onClick={() => adjustBlur(-1)}
-                      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>
-              </div>
+              <SliderControl
+                label="Flou du background"
+                value={preferences.background.blur || 0}
+                min={0}
+                max={20}
+                step={1}
+                unit="px"
+                description="Applique un effet de flou au background"
+                onChange={(value) => handleBlurChange([value])}
+              />
             </>
           )}
         </div>