feat(i18n): translate library page

src/components/library/LibraryGrid.tsx

@@ -1,35 +1,38 @@
 import { Book } from "lucide-react";
 import { Cover } from "@/components/ui/cover";
 import { KomgaLibrary } from "@/types/komga";
+import { useTranslate } from "@/hooks/useTranslate";
 
 interface LibraryGridProps {
   libraries: KomgaLibrary[];
   onLibraryClick?: (library: KomgaLibrary) => void;
 }
 
-// Fonction utilitaire pour formater la date de manière sécurisée
-const formatDate = (dateString: string): string => {
+// Utility function to format date safely
+const formatDate = (dateString: string, locale: string): string => {
   try {
     const date = new Date(dateString);
     if (isNaN(date.getTime())) {
-      return "Date non disponible";
+      return "Date unavailable";
     }
-    return new Intl.DateTimeFormat("fr-FR", {
+    return new Intl.DateTimeFormat(locale, {
       year: "numeric",
       month: "long",
       day: "numeric",
     }).format(date);
   } catch (error) {
-    console.error("Erreur lors du formatage de la date:", error);
-    return "Date non disponible";
+    console.error("Error formatting date:", error);
+    return "Date unavailable";
   }
 };
 
 export function LibraryGrid({ libraries, onLibraryClick }: LibraryGridProps) {
+  const { t } = useTranslate();
+
   if (!libraries.length) {
     return (
       <div className="text-center p-8">
-        <p className="text-muted-foreground">Aucune bibliothèque disponible</p>
+        <p className="text-muted-foreground">{t("library.empty")}</p>
       </div>
     );
   }
@@ -49,18 +52,20 @@ interface LibraryCardProps {
 }
 
 function LibraryCard({ library, onClick }: LibraryCardProps) {
+  const { t, i18n } = useTranslate();
+
   return (
     <button
       onClick={onClick}
       className="group relative flex flex-col h-48 rounded-lg border bg-card text-card-foreground shadow-sm hover:bg-accent hover:text-accent-foreground transition-colors overflow-hidden"
     >
-      {/* Image de couverture */}
+      {/* Cover image */}
       <div className="absolute inset-0 bg-muted">
         <div className="w-full h-full opacity-20 group-hover:opacity-30 transition-opacity">
           <Cover
             type="series"
             id={library.id}
-            alt={`Couverture de ${library.name}`}
+            alt={t("library.coverAlt", { name: library.name })}
             sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 33vw"
             quality={25}
             readBooks={library.booksReadCount}
@@ -69,7 +74,7 @@ function LibraryCard({ library, onClick }: LibraryCardProps) {
         </div>
       </div>
 
-      {/* Contenu */}
+      {/* Content */}
       <div className="relative h-full flex flex-col p-6">
         <div className="flex items-center gap-3 mb-4">
           <Book className="h-6 w-6 shrink-0" />
@@ -85,11 +90,13 @@ function LibraryCard({ library, onClick }: LibraryCardProps) {
                   : "bg-green-500/10 text-green-500"
               }`}
             >
-              {library.unavailable ? "Non disponible" : "Disponible"}
+              {t(library.unavailable ? "library.status.unavailable" : "library.status.available")}
             </span>
           </div>
           <div className="text-xs text-muted-foreground">
-            Dernière mise à jour : {formatDate(library.lastModified)}
+            {t("library.lastUpdated", {
+              date: formatDate(library.lastModified, i18n.language === "fr" ? "fr-FR" : "en-US"),
+            })}
           </div>
         </div>
       </div>

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}

src/components/library/SearchInput.tsx

@@ -8,7 +8,7 @@ interface SearchInputProps {
   placeholder?: string;
 }
 
-export const SearchInput = ({ placeholder = "Rechercher une série..." }: SearchInputProps) => {
+export const SearchInput = ({ placeholder }: SearchInputProps) => {
   const router = useRouter();
   const searchParams = useSearchParams();
   const [isPending, startTransition] = useTransition();
@@ -42,7 +42,7 @@ export const SearchInput = ({ placeholder = "Rechercher une série..." }: Search
         className="pl-9"
         defaultValue={searchParams.get("search") ?? ""}
         onChange={(e) => handleSearch(e.target.value)}
-        aria-label="Rechercher une série"
+        aria-label={placeholder}
       />
       {isPending && (
         <div className="absolute right-3 top-1/2 h-4 w-4 -translate-y-1/2">

src/components/library/SeriesGrid.tsx

@@ -4,47 +4,52 @@ import { KomgaSeries } from "@/types/komga";
 import { useRouter } from "next/navigation";
 import { cn } from "@/lib/utils";
 import { Cover } from "@/components/ui/cover";
+import { useTranslate } from "@/hooks/useTranslate";
 
 interface SeriesGridProps {
   series: KomgaSeries[];
 }
 
-// Fonction utilitaire pour obtenir les informations de statut de lecture
-const getReadingStatusInfo = (series: KomgaSeries) => {
+// Utility function to get reading status info
+const getReadingStatusInfo = (series: KomgaSeries, t: (key: string, options?: any) => string) => {
   if (series.booksCount === 0) {
     return {
-      label: "Pas de tomes",
+      label: t("series.status.noBooks"),
       className: "bg-yellow-500/10 text-yellow-500",
     };
   }
 
   if (series.booksCount === series.booksReadCount) {
     return {
-      label: "Lu",
+      label: t("series.status.read"),
       className: "bg-green-500/10 text-green-500",
     };
   }
 
   if (series.booksReadCount > 0) {
     return {
-      label: `${series.booksReadCount}/${series.booksCount}`,
+      label: t("series.status.progress", {
+        read: series.booksReadCount,
+        total: series.booksCount,
+      }),
       className: "bg-blue-500/10 text-blue-500",
     };
   }
 
   return {
-    label: "Non lu",
+    label: t("series.status.unread"),
     className: "bg-yellow-500/10 text-yellow-500",
   };
 };
 
 export function SeriesGrid({ series }: SeriesGridProps) {
   const router = useRouter();
+  const { t } = useTranslate();
 
   if (!series.length) {
     return (
       <div className="text-center p-8">
-        <p className="text-muted-foreground">Aucune série disponible</p>
+        <p className="text-muted-foreground">{t("series.empty")}</p>
       </div>
     );
   }
@@ -63,7 +68,7 @@ export function SeriesGrid({ series }: SeriesGridProps) {
           <Cover
             type="series"
             id={series.id}
-            alt={`Couverture de ${series.metadata.title}`}
+            alt={t("series.coverAlt", { title: series.metadata.title })}
             isCompleted={series.booksCount === series.booksReadCount}
             readBooks={series.booksReadCount}
             totalBooks={series.booksCount}
@@ -73,13 +78,13 @@ export function SeriesGrid({ series }: SeriesGridProps) {
             <div className="flex items-center gap-2">
               <span
                 className={`px-2 py-0.5 rounded-full text-xs ${
-                  getReadingStatusInfo(series).className
+                  getReadingStatusInfo(series, t).className
                 }`}
               >
-                {getReadingStatusInfo(series).label}
+                {getReadingStatusInfo(series, t).label}
               </span>
               <span className="text-xs text-white/80">
-                {series.booksCount} tome{series.booksCount > 1 ? "s" : ""}
+                {t("series.books", { count: series.booksCount })}
               </span>
             </div>
           </div>

src/components/providers/I18nProvider.tsx

@@ -9,7 +9,7 @@ export function I18nProvider({ children, locale }: PropsWithChildren<{ locale: s
   // Synchroniser la langue avec celle du cookie côté client
   if (typeof window !== "undefined") {
     const localeCookie = document.cookie.split("; ").find((row) => row.startsWith("NEXT_LOCALE="));
-    console.log(localeCookie);
+
     if (localeCookie) {
       const locale = localeCookie.split("=")[1];
       if (i18n.language !== locale) {