feat(i18n): series page

src/components/series/PaginatedBookGrid.tsx

@@ -7,6 +7,7 @@ import { useState, useEffect } from "react";
 import { Loader2, Filter } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { KomgaBook } from "@/types/komga";
+import { useTranslate } from "@/hooks/useTranslate";
 
 interface PaginatedBookGridProps {
   books: KomgaBook[];
@@ -32,6 +33,7 @@ export function PaginatedBookGrid({
   const searchParams = useSearchParams();
   const [isChangingPage, setIsChangingPage] = useState(false);
   const [showOnlyUnread, setShowOnlyUnread] = useState(initialShowOnlyUnread);
+  const { t } = useTranslate();
 
   // Réinitialiser l'état de chargement quand les tomes changent
   useEffect(() => {
@@ -55,26 +57,19 @@ export function PaginatedBookGrid({
 
   const handlePageChange = async (page: number) => {
     setIsChangingPage(true);
-    // Créer un nouvel objet URLSearchParams pour manipuler les paramètres
     const params = new URLSearchParams(searchParams.toString());
     params.set("page", page.toString());
-
-    // Conserver l'état du filtre unread
     params.set("unread", showOnlyUnread.toString());
-
-    // Rediriger vers la nouvelle URL avec les paramètres mis à jour
     await router.push(`${pathname}?${params.toString()}`);
   };
 
   const handleUnreadFilter = async () => {
     setIsChangingPage(true);
     const params = new URLSearchParams(searchParams.toString());
-    params.set("page", "1"); // Retourner à la première page lors du changement de filtre
+    params.set("page", "1");
 
     const newUnreadState = !showOnlyUnread;
     setShowOnlyUnread(newUnreadState);
-
-    // Toujours définir explicitement le paramètre unread
     params.set("unread", newUnreadState.toString());
 
     await router.push(`${pathname}?${params.toString()}`);
@@ -88,26 +83,26 @@ export function PaginatedBookGrid({
   const startIndex = (currentPage - 1) * pageSize + 1;
   const endIndex = Math.min(currentPage * pageSize, totalElements);
 
+  const getShowingText = () => {
+    if (!totalElements) return t("books.empty");
+
+    return t("books.display.showing", {
+      start: startIndex,
+      end: endIndex,
+      total: totalElements,
+    });
+  };
+
   return (
     <div className="space-y-8">
       <div className="flex items-center justify-between flex-wrap gap-4">
-        <p className="text-sm text-muted-foreground flex-1 min-w-[200px]">
-          {totalElements > 0 ? (
-            <>
-              Affichage des tomes <span className="font-medium">{startIndex}</span> à{" "}
-              <span className="font-medium">{endIndex}</span> sur{" "}
-              <span className="font-medium">{totalElements}</span>
-            </>
-          ) : (
-            "Aucun tome trouvé"
-          )}
-        </p>
+        <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 ? "Afficher tout" : "À lire"}
+          {showOnlyUnread ? t("books.filters.showAll") : t("books.filters.unread")}
         </button>
       </div>
 
@@ -117,7 +112,7 @@ export function PaginatedBookGrid({
           <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">
               <Loader2 className="h-4 w-4 animate-spin" />
-              <span className="text-sm">Chargement...</span>
+              <span className="text-sm">{t("books.loading")}</span>
             </div>
           </div>
         )}
@@ -135,7 +130,7 @@ export function PaginatedBookGrid({
 
       <div className="flex flex-col items-center gap-4 sm:flex-row sm:justify-between">
         <p className="text-sm text-muted-foreground order-2 sm:order-1">
-          Page {currentPage} sur {totalPages}
+          {t("books.display.page", { current: currentPage, total: totalPages })}
         </p>
         <Pagination
           currentPage={currentPage}