feat: pref for image quality

src/components/layout/ClientLayout.tsx

@@ -8,6 +8,7 @@ import { InstallPWA } from "../ui/InstallPWA";
 import { Toaster } from "@/components/ui/toaster";
 import { usePathname, useRouter } from "next/navigation";
 import { authService } from "@/lib/services/auth.service";
+import { PreferencesProvider } from "@/contexts/PreferencesContext";
 
 // Routes qui ne nécessitent pas d'authentification
 const publicRoutes = ["/login", "/register"];
@@ -69,13 +70,15 @@ export default function ClientLayout({ children }: { children: React.ReactNode }
 
   return (
     <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
-      <div className="relative min-h-screen">
-        {!isPublicRoute && <Header onToggleSidebar={handleToggleSidebar} />}
-        {!isPublicRoute && <Sidebar isOpen={isSidebarOpen} onClose={handleCloseSidebar} />}
-        <main className={`${!isPublicRoute ? "container pt-4 md:pt-8" : ""}`}>{children}</main>
-        <InstallPWA />
-        <Toaster />
-      </div>
+      <PreferencesProvider>
+        <div className="relative min-h-screen">
+          {!isPublicRoute && <Header onToggleSidebar={handleToggleSidebar} />}
+          {!isPublicRoute && <Sidebar isOpen={isSidebarOpen} onClose={handleCloseSidebar} />}
+          <main className={`${!isPublicRoute ? "container pt-4 md:pt-8" : ""}`}>{children}</main>
+          <InstallPWA />
+          <Toaster />
+        </div>
+      </PreferencesProvider>
     </ThemeProvider>
   );
 }

src/components/settings/ClientSettings.tsx

@@ -5,6 +5,9 @@ import { Loader2, Network, Trash2 } from "lucide-react";
 import { useRouter } from "next/navigation";
 import { AuthError } from "@/types/auth";
 import { useToast } from "@/components/ui/use-toast";
+import { usePreferences } from "@/contexts/PreferencesContext";
+import { Switch } from "@/components/ui/switch";
+import { Label } from "@/components/ui/label";
 
 interface ErrorMessage {
   message: string;
@@ -54,6 +57,7 @@ export function ClientSettings({ initialConfig, initialTTLConfig }: ClientSettin
       imagesTTL: 1440,
     }
   );
+  const { preferences, updatePreferences } = usePreferences();
 
   const handleClearCache = async () => {
     setIsCacheClearing(true);
@@ -241,6 +245,22 @@ export function ClientSettings({ initialConfig, initialTTLConfig }: ClientSettin
     }
   };
 
+  const handleToggleThumbnails = async (checked: boolean) => {
+    try {
+      await updatePreferences({ showThumbnails: checked });
+      toast({
+        title: "Préférences sauvegardées",
+        description: "Les préférences ont été mises à jour avec succès",
+      });
+    } catch (error) {
+      toast({
+        variant: "destructive",
+        title: "Erreur",
+        description: "Une erreur est survenue lors de la mise à jour des préférences",
+      });
+    }
+  };
+
   return (
     <div className="container max-w-3xl mx-auto py-8 space-y-6">
       <div className="flex items-center justify-between">
@@ -260,6 +280,36 @@ export function ClientSettings({ initialConfig, initialTTLConfig }: ClientSettin
       )}
 
       <div className="grid gap-6">
+        {/* Section Préférences d'affichage */}
+        <div className="rounded-lg border bg-card text-card-foreground shadow-sm">
+          <div className="p-5 space-y-4">
+            <div>
+              <h2 className="text-xl font-semibold flex items-center gap-2">
+                Préférences d'affichage
+              </h2>
+              <p className="text-sm text-muted-foreground mt-1">
+                Personnalisez l'affichage de votre bibliothèque.
+              </p>
+            </div>
+
+            <div className="space-y-4">
+              <div className="flex items-center justify-between">
+                <div className="space-y-0.5">
+                  <Label htmlFor="thumbnails">Afficher les vignettes</Label>
+                  <p className="text-sm text-muted-foreground">
+                    Utiliser les vignettes au lieu des premières pages pour l'affichage des séries
+                  </p>
+                </div>
+                <Switch
+                  id="thumbnails"
+                  checked={preferences.showThumbnails}
+                  onCheckedChange={handleToggleThumbnails}
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+
         {/* Section Configuration Komga */}
         <div className="rounded-lg border bg-card text-card-foreground shadow-sm">
           <div className="p-5 space-y-4">

src/components/ui/label.tsx

@@ -0,0 +1,20 @@
+"use client";
+
+import * as React from "react";
+import * as LabelPrimitive from "@radix-ui/react-label";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "@/lib/utils";
+
+const labelVariants = cva(
+  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+);
+
+const Label = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> & VariantProps<typeof labelVariants>
+>(({ className, ...props }, ref) => (
+  <LabelPrimitive.Root ref={ref} className={cn(labelVariants(), className)} {...props} />
+));
+Label.displayName = LabelPrimitive.Root.displayName;
+
+export { Label };

src/components/ui/switch.tsx

@@ -0,0 +1,28 @@
+"use client";
+
+import * as React from "react";
+import * as SwitchPrimitives from "@radix-ui/react-switch";
+import { cn } from "@/lib/utils";
+
+const Switch = React.forwardRef<
+  React.ElementRef<typeof SwitchPrimitives.Root>,
+  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
+>(({ className, ...props }, ref) => (
+  <SwitchPrimitives.Root
+    className={cn(
+      "peer inline-flex h-[24px] w-[44px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
+      className
+    )}
+    {...props}
+    ref={ref}
+  >
+    <SwitchPrimitives.Thumb
+      className={cn(
+        "pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0"
+      )}
+    />
+  </SwitchPrimitives.Root>
+));
+Switch.displayName = SwitchPrimitives.Root.displayName;
+
+export { Switch };