refactor: streamline LibraryPage component by integrating ClientLibraryPage for improved structure and error handling

src/components/ui/book-cover.tsx

@@ -49,7 +49,7 @@ const getReadingStatusInfo = (book: KomgaBook, t: (key: string, options?: any) =
 
 export function BookCover({
   book,
-  alt = "Image de couverture",
+  alt,
   className,
   showProgressUi = true,
   onSuccess,
@@ -84,7 +84,7 @@ export function BookCover({
       <div className="relative w-full h-full">
         <CoverClient
           imageUrl={imageUrl}
-          alt={alt}
+          alt={alt || t("books.defaultCoverAlt")}
           className={className}
           isCompleted={isCompleted}
         />
@@ -121,7 +121,10 @@ export function BookCover({
           {showOverlay && overlayVariant === "default" && (
             <div className="absolute inset-x-0 bottom-0 bg-gradient-to-t from-black/60 to-transparent p-4 space-y-2 translate-y-full group-hover:translate-y-0 transition-transform duration-200">
               <p className="text-sm font-medium text-white text-left line-clamp-2">
-                {book.metadata.title || `Tome ${book.metadata.number}`}
+                {book.metadata.title || 
+                  (book.metadata.number 
+                    ? t("navigation.volume", { number: book.metadata.number })
+                    : "")}
               </p>
               <div className="flex items-center gap-2">
                 <span className={`px-2 py-0.5 rounded-full text-xs ${statusInfo.className}`}>
@@ -135,10 +138,16 @@ export function BookCover({
       {showOverlay && overlayVariant === "home" && (
         <div className="absolute inset-0 bg-black/60 opacity-0 hover:opacity-100 transition-opacity duration-200 flex flex-col justify-end p-3">
           <h3 className="font-medium text-sm text-white line-clamp-2">
-            {book.metadata.title || `Tome ${book.metadata.number}`}
+            {book.metadata.title || 
+              (book.metadata.number 
+                ? t("navigation.volume", { number: book.metadata.number })
+                : "")}
           </h3>
           <p className="text-xs text-white/80 mt-1">
-            {currentPage} / {book.media.pagesCount}
+            {t("books.status.progress", {
+              current: currentPage,
+              total: book.media.pagesCount,
+            })}
           </p>
         </div>
       )}