feat: implement advanced settings for user preferences, allowing configuration of max concurrent requests, reader prefetch count, and circuit breaker settings

src/components/reader/PhotoswipeReader.tsx

@@ -16,8 +16,10 @@ import { NavigationBar } from "./components/NavigationBar";
 import { EndOfSeriesModal } from "./components/EndOfSeriesModal";
 import { PageDisplay } from "./components/PageDisplay";
 import { ReaderContainer } from "./components/ReaderContainer";
+import { usePreferences } from "@/contexts/PreferencesContext";
 
 export function PhotoswipeReader({ book, pages, onClose, nextBook }: BookReaderProps) {
+  const { preferences } = usePreferences();
   const [showControls, setShowControls] = useState(false);
   const [showThumbnails, setShowThumbnails] = useState(false);
   const lastClickTimeRef = useRef<number>(0);
@@ -30,7 +32,7 @@ export function PhotoswipeReader({ book, pages, onClose, nextBook }: BookReaderP
   const { loadedImages, imageBlobUrls, prefetchPages, prefetchNextBook, handleForceReload, getPageUrl, prefetchCount } = useImageLoader({ 
     bookId: book.id, 
     pages, 
-    prefetchCount: 5,
+    prefetchCount: preferences.readerPrefetchCount,
     nextBook: nextBook ? { id: nextBook.id, pages: [] } : null
   });
   const { currentPage, showEndMessage, navigateToPage, handlePreviousPage, handleNextPage } = usePageNavigation({

src/components/reader/hooks/useImageLoader.ts

@@ -10,11 +10,11 @@ type ImageKey = number | string; // Support both numeric pages and prefixed keys
 interface UseImageLoaderProps {
   bookId: string;
   pages: number[];
-  prefetchCount?: number; // Nombre de pages à précharger (défaut: 2)
+  prefetchCount?: number; // Nombre de pages à précharger (défaut: 5)
   nextBook?: { id: string; pages: number[] } | null; // Livre suivant pour prefetch
 }
 
-export function useImageLoader({ bookId, pages: _pages, prefetchCount = 2, nextBook }: UseImageLoaderProps) {
+export function useImageLoader({ bookId, pages: _pages, prefetchCount = 5, nextBook }: UseImageLoaderProps) {
   const [loadedImages, setLoadedImages] = useState<Record<ImageKey, ImageDimensions>>({});
   const [imageBlobUrls, setImageBlobUrls] = useState<Record<ImageKey, string>>({});
   const loadedImagesRef = useRef(loadedImages);

src/components/settings/AdvancedSettings.tsx

@@ -0,0 +1,325 @@
+import { useTranslate } from "@/hooks/useTranslate";
+import { usePreferences } from "@/contexts/PreferencesContext";
+import { Label } from "@/components/ui/label";
+import { Input } from "@/components/ui/input";
+import { useToast } from "@/components/ui/use-toast";
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
+import { Activity, ImageIcon, Shield, Info } from "lucide-react";
+import { Badge } from "@/components/ui/badge";
+
+export function AdvancedSettings() {
+  const { t } = useTranslate();
+  const { toast } = useToast();
+  const { preferences, updatePreferences } = usePreferences();
+
+  const handleMaxConcurrentChange = async (value: number) => {
+    try {
+      await updatePreferences({
+        komgaMaxConcurrentRequests: value,
+      });
+      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 handlePrefetchChange = async (value: number) => {
+    try {
+      await updatePreferences({
+        readerPrefetchCount: value,
+      });
+      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 handleCircuitBreakerChange = async (field: string, value: number) => {
+    try {
+      await updatePreferences({
+        circuitBreakerConfig: {
+          ...preferences.circuitBreakerConfig,
+          [field]: value,
+        },
+      });
+      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="space-y-6">
+      {/* Performance Settings */}
+      <Card>
+        <CardHeader>
+          <div className="flex items-center gap-2">
+            <Activity className="h-5 w-5 text-primary" />
+            <CardTitle className="text-lg">Performance</CardTitle>
+          </div>
+          <CardDescription>
+            Optimisez les performances et la réactivité de l'application
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-6">
+          {/* Concurrent Requests */}
+          <div className="space-y-3">
+            <div className="flex items-start justify-between">
+              <div className="space-y-1 flex-1">
+                <div className="flex items-center gap-2">
+                  <Label htmlFor="maxConcurrentRequests" className="text-base">
+                    {t("settings.advanced.maxConcurrentRequests.label")}
+                  </Label>
+                  <Badge variant="secondary" className="text-xs">
+                    {preferences.komgaMaxConcurrentRequests}
+                  </Badge>
+                </div>
+                <p className="text-sm text-muted-foreground">
+                  {t("settings.advanced.maxConcurrentRequests.description")}
+                </p>
+              </div>
+            </div>
+            <div className="flex items-center gap-4">
+              <Input
+                id="maxConcurrentRequests"
+                type="range"
+                min="1"
+                max="10"
+                value={preferences.komgaMaxConcurrentRequests}
+                onChange={(e) => handleMaxConcurrentChange(parseInt(e.target.value))}
+                className="flex-1 cursor-pointer"
+              />
+              <Input
+                type="number"
+                min="1"
+                max="10"
+                value={preferences.komgaMaxConcurrentRequests}
+                onChange={(e) => handleMaxConcurrentChange(parseInt(e.target.value) || 1)}
+                className="w-20"
+              />
+            </div>
+          </div>
+
+          <div className="border-t" />
+
+          {/* Reader Prefetch Count */}
+          <div className="space-y-3">
+            <div className="flex items-start justify-between">
+              <div className="space-y-1 flex-1">
+                <div className="flex items-center gap-2">
+                  <ImageIcon className="h-4 w-4 text-muted-foreground" />
+                  <Label htmlFor="prefetchCount" className="text-base">
+                    {t("settings.advanced.prefetchCount.label")}
+                  </Label>
+                  <Badge variant="secondary" className="text-xs">
+                    {preferences.readerPrefetchCount}
+                  </Badge>
+                </div>
+                <p className="text-sm text-muted-foreground">
+                  {t("settings.advanced.prefetchCount.description")}
+                </p>
+              </div>
+            </div>
+            <div className="flex items-center gap-4">
+              <Input
+                id="prefetchCount"
+                type="range"
+                min="0"
+                max="20"
+                value={preferences.readerPrefetchCount}
+                onChange={(e) => handlePrefetchChange(parseInt(e.target.value))}
+                className="flex-1 cursor-pointer"
+              />
+              <Input
+                type="number"
+                min="0"
+                max="20"
+                value={preferences.readerPrefetchCount}
+                onChange={(e) => handlePrefetchChange(parseInt(e.target.value) || 0)}
+                className="w-20"
+              />
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Circuit Breaker Configuration */}
+      <Card>
+        <CardHeader>
+          <div className="flex items-center gap-2">
+            <Shield className="h-5 w-5 text-primary" />
+            <CardTitle className="text-lg">{t("settings.advanced.circuitBreaker.title")}</CardTitle>
+          </div>
+          <CardDescription>
+            {t("settings.advanced.circuitBreaker.description")}
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-6">
+          {/* Threshold */}
+          <div className="space-y-3">
+            <div className="flex items-start justify-between">
+              <div className="space-y-1 flex-1">
+                <div className="flex items-center gap-2">
+                  <Label htmlFor="cbThreshold" className="text-base">
+                    {t("settings.advanced.circuitBreaker.threshold.label")}
+                  </Label>
+                  <Badge variant="destructive" className="text-xs">
+                    {preferences.circuitBreakerConfig.threshold}
+                  </Badge>
+                </div>
+                <p className="text-sm text-muted-foreground">
+                  {t("settings.advanced.circuitBreaker.threshold.description")}
+                </p>
+              </div>
+            </div>
+            <div className="flex items-center gap-4">
+              <Input
+                id="cbThreshold"
+                type="range"
+                min="1"
+                max="20"
+                value={preferences.circuitBreakerConfig.threshold}
+                onChange={(e) =>
+                  handleCircuitBreakerChange("threshold", parseInt(e.target.value))
+                }
+                className="flex-1 cursor-pointer"
+              />
+              <Input
+                type="number"
+                min="1"
+                max="20"
+                value={preferences.circuitBreakerConfig.threshold}
+                onChange={(e) =>
+                  handleCircuitBreakerChange("threshold", parseInt(e.target.value) || 5)
+                }
+                className="w-20"
+              />
+            </div>
+          </div>
+
+          <div className="border-t" />
+
+          {/* Timeout */}
+          <div className="space-y-3">
+            <div className="flex items-start justify-between">
+              <div className="space-y-1 flex-1">
+                <div className="flex items-center gap-2">
+                  <Label htmlFor="cbTimeout" className="text-base">
+                    {t("settings.advanced.circuitBreaker.timeout.label")}
+                  </Label>
+                  <Badge variant="secondary" className="text-xs">
+                    {(preferences.circuitBreakerConfig.timeout ?? 30000) / 1000}s
+                  </Badge>
+                </div>
+                <p className="text-sm text-muted-foreground">
+                  {t("settings.advanced.circuitBreaker.timeout.description")}
+                </p>
+              </div>
+            </div>
+            <div className="flex items-center gap-4">
+              <Input
+                id="cbTimeout"
+                type="range"
+                min="1000"
+                max="120000"
+                step="1000"
+                value={preferences.circuitBreakerConfig.timeout}
+                onChange={(e) =>
+                  handleCircuitBreakerChange("timeout", parseInt(e.target.value))
+                }
+                className="flex-1 cursor-pointer"
+              />
+              <Input
+                type="number"
+                min="1"
+                max="120"
+                value={(preferences.circuitBreakerConfig.timeout ?? 30000) / 1000}
+                onChange={(e) =>
+                  handleCircuitBreakerChange("timeout", (parseInt(e.target.value) || 30) * 1000)
+                }
+                className="w-20"
+              />
+            </div>
+            <div className="flex items-center gap-1 text-xs text-muted-foreground">
+              <Info className="h-3 w-3" />
+              <span>{t("settings.advanced.circuitBreaker.timeout.unit")}</span>
+            </div>
+          </div>
+
+          <div className="border-t" />
+
+          {/* Reset Timeout */}
+          <div className="space-y-3">
+            <div className="flex items-start justify-between">
+              <div className="space-y-1 flex-1">
+                <div className="flex items-center gap-2">
+                  <Label htmlFor="cbResetTimeout" className="text-base">
+                    {t("settings.advanced.circuitBreaker.resetTimeout.label")}
+                  </Label>
+                  <Badge variant="secondary" className="text-xs">
+                    {(preferences.circuitBreakerConfig.resetTimeout ?? 60000) / 1000}s
+                  </Badge>
+                </div>
+                <p className="text-sm text-muted-foreground">
+                  {t("settings.advanced.circuitBreaker.resetTimeout.description")}
+                </p>
+              </div>
+            </div>
+            <div className="flex items-center gap-4">
+              <Input
+                id="cbResetTimeout"
+                type="range"
+                min="10000"
+                max="600000"
+                step="1000"
+                value={preferences.circuitBreakerConfig.resetTimeout ?? 60000}
+                onChange={(e) =>
+                  handleCircuitBreakerChange("resetTimeout", parseInt(e.target.value))
+                }
+                className="flex-1 cursor-pointer"
+              />
+              <Input
+                type="number"
+                min="10"
+                max="600"
+                value={(preferences.circuitBreakerConfig.resetTimeout ?? 60000) / 1000}
+                onChange={(e) =>
+                  handleCircuitBreakerChange("resetTimeout", (parseInt(e.target.value) || 60) * 1000)
+                }
+                className="w-20"
+              />
+            </div>
+            <div className="flex items-center gap-1 text-xs text-muted-foreground">
+              <Info className="h-3 w-3" />
+              <span>{t("settings.advanced.circuitBreaker.resetTimeout.unit")}</span>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

src/components/settings/ClientSettings.tsx

@@ -6,6 +6,7 @@ import { DisplaySettings } from "./DisplaySettings";
 import { KomgaSettings } from "./KomgaSettings";
 import { CacheSettings } from "./CacheSettings";
 import { BackgroundSettings } from "./BackgroundSettings";
+import { AdvancedSettings } from "./AdvancedSettings";
 import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
 import { Monitor, Network, HardDrive } from "lucide-react";
 
@@ -44,6 +45,7 @@ export function ClientSettings({ initialConfig, initialTTLConfig }: ClientSettin
 
         <TabsContent value="connection" className="mt-6 space-y-6">
           <KomgaSettings initialConfig={initialConfig} />
+          <AdvancedSettings />
         </TabsContent>
 
         <TabsContent value="cache" className="mt-6 space-y-6">

src/components/ui/separator.tsx

@@ -0,0 +1,27 @@
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+interface SeparatorProps extends React.HTMLAttributes<HTMLDivElement> {
+  orientation?: "horizontal" | "vertical";
+  decorative?: boolean;
+}
+
+const Separator = React.forwardRef<HTMLDivElement, SeparatorProps>(
+  ({ className, orientation = "horizontal", decorative = true, ...props }, ref) => (
+    <div
+      ref={ref}
+      role={decorative ? "none" : "separator"}
+      aria-orientation={orientation}
+      className={cn(
+        "shrink-0 bg-border",
+        orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
+        className
+      )}
+      {...props}
+    />
+  )
+);
+Separator.displayName = "Separator";
+
+export { Separator };
+

src/components/ui/skeleton.tsx

@@ -0,0 +1,16 @@
+import { cn } from "@/lib/utils";
+
+function Skeleton({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn("animate-pulse rounded-md bg-muted", className)}
+      {...props}
+    />
+  );
+}
+
+export { Skeleton };
+