refactor: simplify preferences handling and enhance pagination functionality in series grid

src/app/layout.tsx

@@ -92,13 +92,7 @@ export default async function RootLayout({ children }: { children: React.ReactNo
     }
 
     if (preferencesData.status === "fulfilled") {
-      const { showThumbnails, cacheMode, showOnlyUnread, debug } = preferencesData.value;
+      preferences = preferencesData.value;
-      preferences = {
-        showThumbnails,
-        cacheMode,
-        showOnlyUnread,
-        debug,
-      };
     }
   } catch (error) {
     console.error("Erreur lors du chargement des données de la sidebar:", error);

src/app/series/[seriesId]/page.tsx

@@ -13,19 +13,24 @@ import { AppError } from "@/utils/errors";
 
 interface PageProps {
   params: { seriesId: string };
-  searchParams: { page?: string; unread?: string };
+  searchParams: { page?: string; unread?: string; size?: string };
 }
 
-const PAGE_SIZE = 24;
+const DEFAULT_PAGE_SIZE = 20;
 
-async function getSeriesBooks(seriesId: string, page: number = 1, unreadOnly: boolean = false) {
+async function getSeriesBooks(
+  seriesId: string,
+  page: number = 1,
+  unreadOnly: boolean = false,
+  size: number = DEFAULT_PAGE_SIZE
+) {
   try {
     const pageIndex = page - 1;
 
     const books: LibraryResponse<KomgaBook> = await SeriesService.getSeriesBooks(
       seriesId,
       pageIndex,
-      PAGE_SIZE,
+      size,
       unreadOnly
     );
     const series: KomgaSeries = await SeriesService.getSeries(seriesId);
@@ -54,8 +59,10 @@ async function SeriesPage({ params, searchParams }: PageProps) {
   const seriesId = (await params).seriesId;
   const page = (await searchParams).page;
   const unread = (await searchParams).unread;
+  const size = (await searchParams).size;
 
   const currentPage = page ? parseInt(page) : 1;
+  const pageSize = size ? parseInt(size) : DEFAULT_PAGE_SIZE;
   const preferences: UserPreferences = await PreferencesService.getPreferences();
 
   // Utiliser le paramètre d'URL s'il existe, sinon utiliser la préférence utilisateur
@@ -63,7 +70,7 @@ async function SeriesPage({ params, searchParams }: PageProps) {
 
   try {
     const { data: books, series }: { data: LibraryResponse<KomgaBook>; series: KomgaSeries } =
-      await getSeriesBooks(seriesId, currentPage, unreadOnly);
+      await getSeriesBooks(seriesId, currentPage, unreadOnly, pageSize);
 
     return (
       <div className="container">
@@ -73,7 +80,6 @@ async function SeriesPage({ params, searchParams }: PageProps) {
           currentPage={currentPage}
           totalPages={books.totalPages}
           totalElements={books.totalElements}
-          pageSize={PAGE_SIZE}
           defaultShowOnlyUnread={preferences.showOnlyUnread}
           showOnlyUnread={unreadOnly}
         />

src/components/common/CompactModeButton.tsx

@@ -0,0 +1,37 @@
+import { useDisplayPreferences } from "@/hooks/useDisplayPreferences";
+import { useTranslate } from "@/hooks/useTranslate";
+import { LayoutGrid, LayoutTemplate } from "lucide-react";
+
+interface CompactModeButtonProps {
+  onToggle?: (isCompact: boolean) => void;
+}
+
+export function CompactModeButton({ onToggle }: CompactModeButtonProps) {
+  const { isCompact, handleCompactToggle } = useDisplayPreferences();
+  const { t } = useTranslate();
+
+  const handleClick = async () => {
+    const newCompactState = !isCompact;
+    await handleCompactToggle(newCompactState);
+    onToggle?.(newCompactState);
+  };
+
+  return (
+    <button
+      onClick={handleClick}
+      className="inline-flex items-center gap-2 px-2 py-1.5 text-sm font-medium rounded-lg hover:bg-accent hover:text-accent-foreground whitespace-nowrap"
+    >
+      {isCompact ? (
+        <>
+          <LayoutTemplate className="h-4 w-4" />
+          {t("series.filters.normal")}
+        </>
+      ) : (
+        <>
+          <LayoutGrid className="h-4 w-4" />
+          {t("series.filters.compact")}
+        </>
+      )}
+    </button>
+  );
+}

src/components/common/PageSizeSelect.tsx

@@ -0,0 +1,37 @@
+import { useDisplayPreferences } from "@/hooks/useDisplayPreferences";
+import { LayoutList } from "lucide-react";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+
+interface PageSizeSelectProps {
+  onSizeChange?: (size: number) => void;
+}
+
+export function PageSizeSelect({ onSizeChange }: PageSizeSelectProps) {
+  const { itemsPerPage, handlePageSizeChange } = useDisplayPreferences();
+
+  const handleChange = async (value: string) => {
+    const size = parseInt(value);
+    await handlePageSizeChange(size);
+    onSizeChange?.(size);
+  };
+
+  return (
+    <Select value={itemsPerPage.toString()} onValueChange={handleChange}>
+      <SelectTrigger className="w-[80px]">
+        <LayoutList className="h-4 w-4 mr-2" />
+        <SelectValue />
+      </SelectTrigger>
+      <SelectContent>
+        <SelectItem value="20">20</SelectItem>
+        <SelectItem value="50">50</SelectItem>
+        <SelectItem value="100">100</SelectItem>
+      </SelectContent>
+    </Select>
+  );
+}

src/components/common/UnreadFilterButton.tsx

@@ -0,0 +1,21 @@
+import { useTranslate } from "@/hooks/useTranslate";
+import { Filter } from "lucide-react";
+
+interface UnreadFilterButtonProps {
+  showOnlyUnread: boolean;
+  onToggle: () => void;
+}
+
+export function UnreadFilterButton({ showOnlyUnread, onToggle }: UnreadFilterButtonProps) {
+  const { t } = useTranslate();
+
+  return (
+    <button
+      onClick={onToggle}
+      className="inline-flex items-center gap-2 px-2 py-1.5 text-sm font-medium rounded-lg hover:bg-accent hover:text-accent-foreground whitespace-nowrap"
+    >
+      <Filter className="h-4 w-4" />
+      {showOnlyUnread ? t("series.filters.showAll") : t("series.filters.unread")}
+    </button>
+  );
+}

src/components/library/PaginatedSeriesGrid.tsx

@@ -4,19 +4,15 @@ import { SeriesGrid } from "./SeriesGrid";
 import { Pagination } from "@/components/ui/Pagination";
 import { useRouter, usePathname, useSearchParams } from "next/navigation";
 import { useState, useEffect } from "react";
-import { Loader2, Filter, LayoutGrid, LayoutList, LayoutTemplate } from "lucide-react";
+import { Loader2 } from "lucide-react";
 import { cn } from "@/lib/utils";
 import type { KomgaSeries } from "@/types/komga";
 import { SearchInput } from "./SearchInput";
 import { useTranslate } from "@/hooks/useTranslate";
 import { useDisplayPreferences } from "@/hooks/useDisplayPreferences";
-import {
+import { PageSizeSelect } from "@/components/common/PageSizeSelect";
-  Select,
+import { CompactModeButton } from "@/components/common/CompactModeButton";
-  SelectContent,
+import { UnreadFilterButton } from "@/components/common/UnreadFilterButton";
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
 
 interface PaginatedSeriesGridProps {
   series: KomgaSeries[];
@@ -40,15 +36,13 @@ export function PaginatedSeriesGrid({
   const searchParams = useSearchParams();
   const [isChangingPage, setIsChangingPage] = useState(false);
   const [showOnlyUnread, setShowOnlyUnread] = useState(initialShowOnlyUnread);
-  const { isCompact, itemsPerPage, handleCompactToggle, handlePageSizeChange } =
+  const { isCompact, itemsPerPage } = useDisplayPreferences();
-    useDisplayPreferences();
   const { t } = useTranslate();
 
   const updateUrlParams = async (updates: Record<string, string | null>) => {
     setIsChangingPage(true);
     const params = new URLSearchParams(searchParams.toString());
 
-    // Mettre à jour les paramètres
     Object.entries(updates).forEach(([key, value]) => {
       if (value === null) {
         params.delete(key);
@@ -90,21 +84,17 @@ export function PaginatedSeriesGrid({
     });
   };
 
-  const handleCompactToggleClick = async () => {
+  const handleCompactToggle = async (newCompactState: boolean) => {
-    const newCompactState = !isCompact;
-    await handleCompactToggle(newCompactState);
     await updateUrlParams({
       page: "1",
       compact: newCompactState.toString(),
     });
   };
 
-  const handlePageSizeChangeClick = async (value: string) => {
+  const handlePageSizeChange = async (size: number) => {
-    const size = parseInt(value);
-    await handlePageSizeChange(size);
     await updateUrlParams({
       page: "1",
-      size: value,
+      size: size.toString(),
     });
   };
 
@@ -124,46 +114,17 @@ export function PaginatedSeriesGrid({
 
   return (
     <div className="space-y-8">
-      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
+      <div className="flex flex-col gap-4">
-        <div className="w-full sm:w-auto sm:flex-1">
+        <p className="text-sm text-muted-foreground text-right">{getShowingText()}</p>
+        <div className="flex flex-col sm:flex-row sm:items-center gap-4">
+          <div className="w-full">
             <SearchInput placeholder={t("series.filters.search")} />
           </div>
-        <div className="flex items-center gap-2">
+          <div className="flex items-center justify-end gap-2">
-          <p className="text-sm text-muted-foreground">{getShowingText()}</p>
+            <PageSizeSelect onSizeChange={handlePageSizeChange} />
-          <Select value={itemsPerPage.toString()} onValueChange={handlePageSizeChangeClick}>
+            <CompactModeButton onToggle={handleCompactToggle} />
-            <SelectTrigger className="w-[80px]">
+            <UnreadFilterButton showOnlyUnread={showOnlyUnread} onToggle={handleUnreadFilter} />
-              <LayoutList className="h-4 w-4 mr-2" />
+          </div>
-              <SelectValue />
-            </SelectTrigger>
-            <SelectContent>
-              <SelectItem value="20">20</SelectItem>
-              <SelectItem value="50">50</SelectItem>
-              <SelectItem value="100">100</SelectItem>
-            </SelectContent>
-          </Select>
-          <button
-            onClick={handleCompactToggleClick}
-            className="inline-flex items-center gap-2 px-2 py-1.5 text-sm font-medium rounded-lg hover:bg-accent hover:text-accent-foreground whitespace-nowrap"
-          >
-            {isCompact ? (
-              <>
-                <LayoutTemplate className="h-4 w-4" />
-                {t("series.filters.normal")}
-              </>
-            ) : (
-              <>
-                <LayoutGrid className="h-4 w-4" />
-                {t("series.filters.compact")}
-              </>
-            )}
-          </button>
-          <button
-            onClick={handleUnreadFilter}
-            className="inline-flex items-center gap-2 px-2 py-1.5 text-sm font-medium rounded-lg hover:bg-accent hover:text-accent-foreground whitespace-nowrap"
-          >
-            <Filter className="h-4 w-4" />
-            {showOnlyUnread ? t("series.filters.showAll") : t("series.filters.unread")}
-          </button>
         </div>
       </div>
 

src/components/library/SearchInput.tsx

@@ -34,7 +34,7 @@ export const SearchInput = ({ placeholder }: SearchInputProps) => {
   }, 300);
 
   return (
-    <div className="relative w-full max-w-sm">
+    <div className="relative w-full max-w-md">
       <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
       <Input
         type={isPending ? "text" : "search"}

src/components/series/BookGrid.tsx

@@ -4,13 +4,15 @@ import type { KomgaBook } from "@/types/komga";
 import { BookCover } from "@/components/ui/book-cover";
 import { useState, useEffect } from "react";
 import { useTranslate } from "@/hooks/useTranslate";
+import { cn } from "@/lib/utils";
 
 interface BookGridProps {
   books: KomgaBook[];
   onBookClick: (book: KomgaBook) => void;
+  isCompact?: boolean;
 }
 
-export function BookGrid({ books, onBookClick }: BookGridProps) {
+export function BookGrid({ books, onBookClick, isCompact = false }: BookGridProps) {
   const [localBooks, setLocalBooks] = useState(books);
   const { t } = useTranslate();
 
@@ -21,10 +23,11 @@ export function BookGrid({ books, onBookClick }: BookGridProps) {
   if (!localBooks.length) {
     return (
       <div className="text-center p-8">
-        <p className="text-muted-foreground">{t("books.empty")}</p>
+        <p className="text-muted-foreground whitespace-pre-line">{t("books.empty")}</p>
       </div>
     );
   }
+
   const handleOnSuccess = (book: KomgaBook, action: "read" | "unread") => {
     if (action === "read") {
       setLocalBooks(
@@ -58,12 +61,22 @@ export function BookGrid({ books, onBookClick }: BookGridProps) {
   };
 
   return (
-    <div className="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6">
+    <div
+      className={cn(
+        "grid gap-4",
+        isCompact
+          ? "grid-cols-3 sm:grid-cols-4 lg:grid-cols-6"
+          : "grid-cols-2 sm:grid-cols-3 lg:grid-cols-5"
+      )}
+    >
       {localBooks.map((book) => {
         return (
           <div
             key={book.id}
-            className="group relative aspect-[2/3] overflow-hidden rounded-lg bg-muted"
+            className={cn(
+              "group relative aspect-[2/3] overflow-hidden rounded-lg bg-muted",
+              isCompact ? "hover:scale-105 transition-transform" : ""
+            )}
           >
             <div
               onClick={() => onBookClick(book)}

src/components/series/PaginatedBookGrid.tsx

@@ -4,17 +4,20 @@ import { BookGrid } from "./BookGrid";
 import { Pagination } from "@/components/ui/Pagination";
 import { useRouter, usePathname, useSearchParams } from "next/navigation";
 import { useState, useEffect } from "react";
-import { Loader2, Filter } from "lucide-react";
+import { Loader2 } from "lucide-react";
 import { cn } from "@/lib/utils";
 import type { KomgaBook } from "@/types/komga";
 import { useTranslate } from "@/hooks/useTranslate";
+import { useDisplayPreferences } from "@/hooks/useDisplayPreferences";
+import { PageSizeSelect } from "@/components/common/PageSizeSelect";
+import { CompactModeButton } from "@/components/common/CompactModeButton";
+import { UnreadFilterButton } from "@/components/common/UnreadFilterButton";
 
 interface PaginatedBookGridProps {
   books: KomgaBook[];
   currentPage: number;
   totalPages: number;
   totalElements: number;
-  pageSize: number;
   defaultShowOnlyUnread: boolean;
   showOnlyUnread: boolean;
 }
@@ -24,7 +27,6 @@ export function PaginatedBookGrid({
   currentPage,
   totalPages,
   totalElements,
-  pageSize,
   defaultShowOnlyUnread,
   showOnlyUnread: initialShowOnlyUnread,
 }: PaginatedBookGridProps) {
@@ -33,55 +35,75 @@ export function PaginatedBookGrid({
   const searchParams = useSearchParams();
   const [isChangingPage, setIsChangingPage] = useState(false);
   const [showOnlyUnread, setShowOnlyUnread] = useState(initialShowOnlyUnread);
+  const { isCompact, itemsPerPage } = useDisplayPreferences();
   const { t } = useTranslate();
 
-  // Réinitialiser l'état de chargement quand les tomes changent
+  const updateUrlParams = async (updates: Record<string, string | null>) => {
+    setIsChangingPage(true);
+    const params = new URLSearchParams(searchParams.toString());
+
+    Object.entries(updates).forEach(([key, value]) => {
+      if (value === null) {
+        params.delete(key);
+      } else {
+        params.set(key, value);
+      }
+    });
+
+    await router.push(`${pathname}?${params.toString()}`);
+  };
+
+  // Reset loading state when books change
   useEffect(() => {
     setIsChangingPage(false);
   }, [books]);
 
-  // Mettre à jour l'état local quand la prop change
+  // Update local state when prop changes
   useEffect(() => {
     setShowOnlyUnread(initialShowOnlyUnread);
   }, [initialShowOnlyUnread]);
 
-  // Appliquer le filtre par défaut au chargement initial
+  // Apply default filter on initial load
   useEffect(() => {
     if (defaultShowOnlyUnread && !searchParams.has("unread")) {
-      const params = new URLSearchParams(searchParams.toString());
+      updateUrlParams({ page: "1", unread: "true" });
-      params.set("page", "1");
-      params.set("unread", "true");
-      router.push(`${pathname}?${params.toString()}`);
     }
   }, [defaultShowOnlyUnread, pathname, router, searchParams]);
 
   const handlePageChange = async (page: number) => {
-    setIsChangingPage(true);
+    await updateUrlParams({ page: page.toString() });
-    const params = new URLSearchParams(searchParams.toString());
-    params.set("page", page.toString());
-    params.set("unread", showOnlyUnread.toString());
-    await router.push(`${pathname}?${params.toString()}`);
   };
 
   const handleUnreadFilter = async () => {
-    setIsChangingPage(true);
-    const params = new URLSearchParams(searchParams.toString());
-    params.set("page", "1");
-
     const newUnreadState = !showOnlyUnread;
     setShowOnlyUnread(newUnreadState);
-    params.set("unread", newUnreadState.toString());
+    await updateUrlParams({
+      page: "1",
+      unread: newUnreadState ? "true" : "false",
+    });
+  };
 
-    await router.push(`${pathname}?${params.toString()}`);
+  const handleCompactToggle = async (newCompactState: boolean) => {
+    await updateUrlParams({
+      page: "1",
+      compact: newCompactState.toString(),
+    });
+  };
+
+  const handlePageSizeChange = async (size: number) => {
+    await updateUrlParams({
+      page: "1",
+      size: size.toString(),
+    });
   };
 
   const handleBookClick = (book: KomgaBook) => {
     router.push(`/books/${book.id}`);
   };
 
-  // Calcul des indices de début et de fin pour l'affichage
+  // Calculate start and end indices for display
-  const startIndex = (currentPage - 1) * pageSize + 1;
+  const startIndex = (currentPage - 1) * itemsPerPage + 1;
-  const endIndex = Math.min(currentPage * pageSize, totalElements);
+  const endIndex = Math.min(currentPage * itemsPerPage, totalElements);
 
   const getShowingText = () => {
     if (!totalElements) return t("books.empty");
@@ -95,19 +117,17 @@ export function PaginatedBookGrid({
 
   return (
     <div className="space-y-8 py-8">
-      <div className="flex items-center justify-between flex-wrap gap-4">
+      <div className="flex flex-col gap-4">
-        <p className="text-sm text-muted-foreground flex-1 min-w-[200px]">{getShowingText()}</p>
+        <p className="text-sm text-muted-foreground text-right">{getShowingText()}</p>
-        <button
+        <div className="flex items-center justify-end gap-2">
-          onClick={handleUnreadFilter}
+          <PageSizeSelect onSizeChange={handlePageSizeChange} />
-          className="inline-flex items-center gap-2 px-3 py-2 text-sm font-medium rounded-lg hover:bg-accent hover:text-accent-foreground whitespace-nowrap ml-auto"
+          <CompactModeButton onToggle={handleCompactToggle} />
-        >
+          <UnreadFilterButton showOnlyUnread={showOnlyUnread} onToggle={handleUnreadFilter} />
-          <Filter className="h-4 w-4" />
+        </div>
-          {showOnlyUnread ? t("books.filters.showAll") : t("books.filters.unread")}
-        </button>
       </div>
 
       <div className="relative">
-        {/* Indicateur de chargement */}
+        {/* Loading indicator */}
         {isChangingPage && (
           <div className="absolute inset-0 flex items-center justify-center bg-background/50 backdrop-blur-sm z-10">
             <div className="flex items-center gap-2 px-4 py-2 rounded-full bg-background border shadow-sm">
@@ -117,14 +137,14 @@ export function PaginatedBookGrid({
           </div>
         )}
 
-        {/* Grille avec animation de transition */}
+        {/* Grid with transition animation */}
         <div
           className={cn(
             "transition-opacity duration-200",
             isChangingPage ? "opacity-25" : "opacity-100"
           )}
         >
-          <BookGrid books={books} onBookClick={handleBookClick} />
+          <BookGrid books={books} onBookClick={handleBookClick} isCompact={isCompact} />
         </div>
       </div>
 

src/contexts/PreferencesContext.tsx

@@ -46,7 +46,6 @@ export function PreferencesProvider({
   };
 
   const updatePreferences = async (newPreferences: Partial<UserPreferences>) => {
-
     try {
       const response = await fetch("/api/preferences", {
         method: "PUT",

src/hooks/useDisplayPreferences.ts

@@ -1,11 +1,7 @@
 import { usePreferences } from "@/contexts/PreferencesContext";
-import { useToast } from "@/components/ui/use-toast";
-import { useTranslate } from "@/hooks/useTranslate";
 
 export function useDisplayPreferences() {
   const { preferences, updatePreferences } = usePreferences();
-  const { toast } = useToast();
-  const { t } = useTranslate();
 
   const handleCompactToggle = async (checked: boolean) => {
     try {
@@ -15,17 +11,8 @@ export function useDisplayPreferences() {
           compact: checked,
         },
       });
-      toast({
-        title: t("settings.title"),
-        description: t("settings.komga.messages.configSaved"),
-      });
     } catch (error) {
       console.error("Erreur lors de la mise à jour du mode compact:", error);
-      toast({
-        variant: "destructive",
-        title: t("settings.error.title"),
-        description: t("settings.error.message"),
-      });
     }
   };
 
@@ -37,17 +24,8 @@ export function useDisplayPreferences() {
           itemsPerPage: size,
         },
       });
-      toast({
-        title: t("settings.title"),
-        description: t("settings.komga.messages.configSaved"),
-      });
     } catch (error) {
       console.error("Erreur lors de la mise à jour de la taille de page:", error);
-      toast({
-        variant: "destructive",
-        title: t("settings.error.title"),
-        description: t("settings.error.message"),
-      });
     }
   };