feat(i18n): translate library page

src/components/library/PaginatedSeriesGrid.tsx

@@ -8,6 +8,7 @@ import { Loader2, Filter } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { KomgaSeries } from "@/types/komga";
 import { SearchInput } from "./SearchInput";
+import { useTranslate } from "@/hooks/useTranslate";
 
 interface PaginatedSeriesGridProps {
   series: KomgaSeries[];
@@ -33,18 +34,19 @@ export function PaginatedSeriesGrid({
   const searchParams = useSearchParams();
   const [isChangingPage, setIsChangingPage] = useState(false);
   const [showOnlyUnread, setShowOnlyUnread] = useState(initialShowOnlyUnread);
+  const { t } = useTranslate();
 
-  // Réinitialiser l'état de chargement quand les séries changent
+  // Reset loading state when series change
   useEffect(() => {
     setIsChangingPage(false);
   }, [series]);
 
-  // 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());
@@ -56,75 +58,68 @@ export function PaginatedSeriesGrid({
 
   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()}`);
   };
 
-  // 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 endIndex = Math.min(currentPage * pageSize, totalElements);
 
+  const getShowingText = () => {
+    if (!totalElements) return t("series.empty");
+
+    return t("series.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">
         <div className="flex-1">
-          <SearchInput />
+          <SearchInput placeholder={t("series.filters.search")} />
         </div>
         <div className="flex items-center gap-4">
-          <p className="text-sm text-muted-foreground">
-            {totalElements > 0 ? (
-              <>
-                Affichage des séries <span className="font-medium">{startIndex}</span> à{" "}
-                <span className="font-medium">{endIndex}</span> sur{" "}
-                <span className="font-medium">{totalElements}</span>
-              </>
-            ) : (
-              "Aucune série trouvée"
-            )}
-          </p>
+          <p className="text-sm text-muted-foreground">{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"
           >
             <Filter className="h-4 w-4" />
-            {showOnlyUnread ? "Afficher tout" : "À lire"}
+            {showOnlyUnread ? t("series.filters.showAll") : t("series.filters.unread")}
           </button>
         </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">
               <Loader2 className="h-4 w-4 animate-spin" />
-              <span className="text-sm">Chargement...</span>
+              <span className="text-sm">{t("sidebar.libraries.loading")}</span>
             </div>
           </div>
         )}
 
-        {/* Grille avec animation de transition */}
+        {/* Grid with transition animation */}
         <div
           className={cn(
             "transition-opacity duration-200",
@@ -137,7 +132,7 @@ export function PaginatedSeriesGrid({
 
       <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("series.display.page", { current: currentPage, total: totalPages })}
         </p>
         <Pagination
           currentPage={currentPage}