feat(i18n): series page

src/components/series/BookGrid.tsx

@@ -7,6 +7,7 @@ import { MarkAsReadButton } from "@/components/ui/mark-as-read-button";
 import { MarkAsUnreadButton } from "@/components/ui/mark-as-unread-button";
 import { BookOfflineButton } from "@/components/ui/book-offline-button";
 import { useState, useEffect } from "react";
+import { useTranslate } from "@/hooks/useTranslate";
 
 interface BookGridProps {
   books: KomgaBook[];
@@ -14,10 +15,10 @@ interface BookGridProps {
 }
 
 // Fonction utilitaire pour obtenir les informations de statut de lecture
-const getReadingStatusInfo = (book: KomgaBook) => {
+const getReadingStatusInfo = (book: KomgaBook, t: (key: string, options?: any) => string) => {
   if (!book.readProgress) {
     return {
-      label: "Non lu",
+      label: t("books.status.unread"),
       className: "bg-yellow-500/10 text-yellow-500",
     };
   }
@@ -25,26 +26,30 @@ const getReadingStatusInfo = (book: KomgaBook) => {
   if (book.readProgress.completed) {
     const readDate = book.readProgress.readDate ? formatDate(book.readProgress.readDate) : null;
     return {
-      label: readDate ? `Lu le ${readDate}` : "Lu",
+      label: readDate ? t("books.status.readDate", { date: readDate }) : t("books.status.read"),
       className: "bg-green-500/10 text-green-500",
     };
   }
 
   if (book.readProgress.page > 0) {
     return {
-      label: `Page ${book.readProgress.page}/${book.media.pagesCount}`,
+      label: t("books.status.progress", {
+        current: book.readProgress.page,
+        total: book.media.pagesCount,
+      }),
       className: "bg-blue-500/10 text-blue-500",
     };
   }
 
   return {
-    label: "Non lu",
+    label: t("books.status.unread"),
     className: "bg-yellow-500/10 text-yellow-500",
   };
 };
 
 export function BookGrid({ books, onBookClick }: BookGridProps) {
   const [localBooks, setLocalBooks] = useState(books);
+  const { t } = useTranslate();
 
   // Synchroniser localBooks avec les props books
   useEffect(() => {
@@ -54,7 +59,7 @@ export function BookGrid({ books, onBookClick }: BookGridProps) {
   if (!localBooks.length) {
     return (
       <div className="text-center p-8">
-        <p className="text-muted-foreground">Aucun tome disponible</p>
+        <p className="text-muted-foreground">{t("books.empty")}</p>
       </div>
     );
   }
@@ -95,7 +100,7 @@ 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">
       {localBooks.map((book) => {
-        const statusInfo = getReadingStatusInfo(book);
+        const statusInfo = getReadingStatusInfo(book, t);
         const isRead = book.readProgress?.completed || false;
         const currentPage = book.readProgress?.page || 0;
 
@@ -111,7 +116,9 @@ export function BookGrid({ books, onBookClick }: BookGridProps) {
               <Cover
                 type="book"
                 id={book.id}
-                alt={`Couverture de ${book.metadata.title || `Tome ${book.metadata.number}`}`}
+                alt={t("books.coverAlt", {
+                  title: book.metadata.title || `Tome ${book.metadata.number}`,
+                })}
                 isCompleted={isRead}
                 currentPage={currentPage}
                 totalPages={book.media.pagesCount}

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}

src/components/series/SeriesHeader.tsx

@@ -10,6 +10,7 @@ import { RefreshButton } from "@/components/library/RefreshButton";
 import { AppError } from "@/utils/errors";
 import { ERROR_CODES } from "@/constants/errorCodes";
 import { ERROR_MESSAGES } from "@/constants/errorMessages";
+import { useTranslate } from "@/hooks/useTranslate";
 
 interface SeriesHeaderProps {
   series: KomgaSeries;
@@ -19,6 +20,7 @@ interface SeriesHeaderProps {
 export const SeriesHeader = ({ series, refreshSeries }: SeriesHeaderProps) => {
   const { toast } = useToast();
   const [isFavorite, setIsFavorite] = useState(false);
+  const { t } = useTranslate();
 
   useEffect(() => {
     const checkFavorite = async () => {
@@ -59,7 +61,7 @@ export const SeriesHeader = ({ series, refreshSeries }: SeriesHeaderProps) => {
         setIsFavorite(!isFavorite);
         window.dispatchEvent(new Event("favoritesChanged"));
         toast({
-          title: !isFavorite ? "Ajouté aux favoris" : "Retiré des favoris",
+          title: t(isFavorite ? "series.header.favorite.remove" : "series.header.favorite.add"),
           description: series.metadata.title,
         });
       } else if (response.status === 500) {
@@ -90,7 +92,7 @@ export const SeriesHeader = ({ series, refreshSeries }: SeriesHeaderProps) => {
 
     if (booksReadCount === booksCount) {
       return {
-        label: "Lu",
+        label: t("series.header.status.read"),
         className: "bg-green-500/10 text-green-500",
         icon: BookMarked,
       };
@@ -98,14 +100,17 @@ export const SeriesHeader = ({ series, refreshSeries }: SeriesHeaderProps) => {
 
     if (booksInProgressCount > 0 || (booksReadCount > 0 && booksReadCount < booksCount)) {
       return {
-        label: `${booksReadCount}/${booksCount}`,
+        label: t("series.header.status.progress", {
+          read: booksReadCount,
+          total: booksCount,
+        }),
         className: "bg-blue-500/10 text-blue-500",
         icon: BookOpen,
       };
     }
 
     return {
-      label: "Non lu",
+      label: t("series.header.status.unread"),
       className: "bg-yellow-500/10 text-yellow-500",
       icon: Book,
     };
@@ -120,7 +125,7 @@ export const SeriesHeader = ({ series, refreshSeries }: SeriesHeaderProps) => {
         <Cover
           type="series"
           id={series.id}
-          alt={`Couverture de ${series.metadata.title}`}
+          alt={t("series.header.coverAlt", { title: series.metadata.title })}
           className="blur-sm scale-105 brightness-50"
           quality={60}
         />
@@ -134,7 +139,7 @@ export const SeriesHeader = ({ series, refreshSeries }: SeriesHeaderProps) => {
             <Cover
               type="series"
               id={series.id}
-              alt={`Couverture de ${series.metadata.title}`}
+              alt={t("series.header.coverAlt", { title: series.metadata.title })}
               quality={90}
             />
           </div>
@@ -155,7 +160,7 @@ export const SeriesHeader = ({ series, refreshSeries }: SeriesHeaderProps) => {
                 {statusInfo.label}
               </span>
               <span className="text-sm text-white/80">
-                {series.booksCount} tome{series.booksCount > 1 ? "s" : ""}
+                {t("series.header.books", { count: series.booksCount })}
               </span>
               <Button
                 variant="ghost"