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

2025-04-01 07:01:40 +02:00
parent a2c7519ac5
commit 31b5930705
11 changed files with 201 additions and 135 deletions
--- a/src/app/layout.tsx
+++ b/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 = {
-        showThumbnails,
-        cacheMode,
-        showOnlyUnread,
-        debug,
-      };
+      preferences = preferencesData.value;
    }
  } catch (error) {
    console.error("Erreur lors du chargement des données de la sidebar:", error);
--- a/src/app/series/[seriesId]/page.tsx
+++ b/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}
        />
--- a/src/components/common/CompactModeButton.tsx
+++ b/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>
+  );
+}
--- a/src/components/common/PageSizeSelect.tsx
+++ b/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>
+  );
+}
--- a/src/components/common/UnreadFilterButton.tsx
+++ b/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>
+  );
+}
--- a/src/components/library/PaginatedSeriesGrid.tsx
+++ b/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 {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
+import { PageSizeSelect } from "@/components/common/PageSizeSelect";
+import { CompactModeButton } from "@/components/common/CompactModeButton";
+import { UnreadFilterButton } from "@/components/common/UnreadFilterButton";

 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 } =
-    useDisplayPreferences();
+  const { isCompact, itemsPerPage } = 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 newCompactState = !isCompact;
-    await handleCompactToggle(newCompactState);
+  const handleCompactToggle = async (newCompactState: boolean) => {
    await updateUrlParams({
      page: "1",
      compact: newCompactState.toString(),
    });
  };

-  const handlePageSizeChangeClick = async (value: string) => {
-    const size = parseInt(value);
-    await handlePageSizeChange(size);
+  const handlePageSizeChange = async (size: number) => {
    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="w-full sm:w-auto sm:flex-1">
+      <div className="flex flex-col gap-4">
+        <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">
-          <p className="text-sm text-muted-foreground">{getShowingText()}</p>
-          <Select value={itemsPerPage.toString()} onValueChange={handlePageSizeChangeClick}>
-            <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>
-          <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 className="flex items-center justify-end gap-2">
+            <PageSizeSelect onSizeChange={handlePageSizeChange} />
+            <CompactModeButton onToggle={handleCompactToggle} />
+            <UnreadFilterButton showOnlyUnread={showOnlyUnread} onToggle={handleUnreadFilter} />
+          </div>
        </div>
      </div>

--- a/src/components/library/SearchInput.tsx
+++ b/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"}
--- a/src/components/series/BookGrid.tsx
+++ b/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)}
--- a/src/components/series/PaginatedBookGrid.tsx
+++ b/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());
-      params.set("page", "1");
-      params.set("unread", "true");
-      router.push(`${pathname}?${params.toString()}`);
+      updateUrlParams({ page: "1", unread: "true" });
    }
  }, [defaultShowOnlyUnread, pathname, router, searchParams]);

  const handlePageChange = async (page: number) => {
-    setIsChangingPage(true);
-    const params = new URLSearchParams(searchParams.toString());
-    params.set("page", page.toString());
-    params.set("unread", showOnlyUnread.toString());
-    await router.push(`${pathname}?${params.toString()}`);
+    await updateUrlParams({ page: page.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
-  const startIndex = (currentPage - 1) * pageSize + 1;
-  const endIndex = Math.min(currentPage * pageSize, totalElements);
+  // Calculate start and end indices for display
+  const startIndex = (currentPage - 1) * itemsPerPage + 1;
+  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">
-        <p className="text-sm text-muted-foreground flex-1 min-w-[200px]">{getShowingText()}</p>
-        <button
-          onClick={handleUnreadFilter}
-          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"
-        >
-          <Filter className="h-4 w-4" />
-          {showOnlyUnread ? t("books.filters.showAll") : t("books.filters.unread")}
-        </button>
+      <div className="flex flex-col gap-4">
+        <p className="text-sm text-muted-foreground text-right">{getShowingText()}</p>
+        <div className="flex items-center justify-end gap-2">
+          <PageSizeSelect onSizeChange={handlePageSizeChange} />
+          <CompactModeButton onToggle={handleCompactToggle} />
+          <UnreadFilterButton showOnlyUnread={showOnlyUnread} onToggle={handleUnreadFilter} />
+        </div>
      </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>

--- a/src/contexts/PreferencesContext.tsx
+++ b/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",
--- a/src/hooks/useDisplayPreferences.ts
+++ b/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"),
-      });
    }
  };