feat: high quality everywhere

src/components/library/SeriesGrid.tsx

@@ -84,7 +84,7 @@ function SeriesCard({ series, onClick }: SeriesCardProps) {
         <>
           <ImageLoader isLoading={isLoading} />
           <Image
-            src={`/api/komga/images/series/${series.id}/thumbnail`}
+            src={`/api/komga/images/series/${series.id}/first-page`}
             alt={`Couverture de ${series.metadata.title}`}
             fill
             className={cn(
@@ -95,7 +95,10 @@ function SeriesCard({ series, onClick }: SeriesCardProps) {
             onError={() => setImageError(true)}
             onLoad={() => setIsLoading(false)}
             loading="lazy"
-            quality={50}
+            quality={80}
+            unoptimized
+            priority={false}
+            fetchPriority="low"
           />
         </>
       ) : (

src/components/series/BookGrid.tsx

@@ -11,7 +11,6 @@ import { cn } from "@/lib/utils";
 interface BookGridProps {
   books: KomgaBook[];
   onBookClick: (book: KomgaBook) => void;
-  getBookThumbnailUrl: (bookId: string) => string;
 }
 
 // Fonction utilitaire pour obtenir les informations de statut de lecture
@@ -44,7 +43,7 @@ const getReadingStatusInfo = (book: KomgaBook) => {
   };
 };
 
-export function BookGrid({ books, onBookClick, getBookThumbnailUrl }: BookGridProps) {
+export function BookGrid({ books, onBookClick }: BookGridProps) {
   if (!books.length) {
     return (
       <div className="text-center p-8">
@@ -63,11 +62,7 @@ export function BookGrid({ books, onBookClick, getBookThumbnailUrl }: BookGridPr
             onClick={() => onBookClick(book)}
             className="group relative aspect-[2/3] overflow-hidden rounded-lg bg-muted hover:opacity-100 transition-all"
           >
-            <BookImage
+            <BookImage book={book} isCompleted={book.readProgress?.completed} />
-              book={book}
-              getBookThumbnailUrl={getBookThumbnailUrl}
-              isCompleted={book.readProgress?.completed}
-            />
             <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}`}
@@ -87,11 +82,10 @@ export function BookGrid({ books, onBookClick, getBookThumbnailUrl }: BookGridPr
 
 interface BookImageProps {
   book: KomgaBook;
-  getBookThumbnailUrl: (bookId: string) => string;
   isCompleted?: boolean;
 }
 
-function BookImage({ book, getBookThumbnailUrl, isCompleted }: BookImageProps) {
+function BookImage({ book, isCompleted }: BookImageProps) {
   const [imageError, setImageError] = useState(false);
   const [isLoading, setIsLoading] = useState(true);
 
@@ -104,23 +98,27 @@ function BookImage({ book, getBookThumbnailUrl, isCompleted }: BookImageProps) {
   }
 
   return (
-    <div className={cn("relative h-full w-full", isCompleted && "opacity-50")}>
+    <>
       <ImageLoader isLoading={isLoading} />
       <Image
-        src={getBookThumbnailUrl(book.id)}
+        src={`/api/komga/images/books/${book.id}/pages/1`}
-        alt={book.metadata.title}
+        alt={`Couverture de ${book.metadata.title || `Tome ${book.metadata.number}`}`}
         fill
         className={cn(
           "object-cover transition-opacity duration-300",
-          isLoading ? "opacity-0" : "opacity-100"
+          isLoading ? "opacity-0" : "opacity-100",
+          isCompleted && "opacity-50"
         )}
-        sizes="(min-width: 1024px) 16.66vw, (min-width: 768px) 25vw, (min-width: 640px) 33.33vw, 50vw"
+        sizes="(max-width: 640px) 33vw, (max-width: 1024px) 20vw, 20vw"
         onError={() => setImageError(true)}
         onLoad={() => setIsLoading(false)}
         loading="lazy"
-        quality={100}
+        quality={80}
+        unoptimized
+        priority={false}
+        fetchPriority="low"
       />
-    </div>
+    </>
   );
 }
 

src/components/series/SeriesHeader.tsx

@@ -52,13 +52,10 @@ export const SeriesHeader = ({ series, onSeriesUpdate }: SeriesHeaderProps) => {
   const { toast } = useToast();
   const [languageDisplay, setLanguageDisplay] = useState<string>(series.metadata.language);
   const [imageError, setImageError] = useState(false);
-  const [readingStatus, setReadingStatus] = useState<ReadingStatusInfo>(
+  const [isLoading, setIsLoading] = useState(true);
-    getReadingStatusInfo(series)
-  );
   const [isFavorite, setIsFavorite] = useState(false);
-  const [isLoading, setIsLoading] = useState(false);
   const [mounted, setMounted] = useState(false);
-  const [imageLoading, setImageLoading] = useState(true);
+  const statusInfo = getReadingStatusInfo(series);
 
   // Vérifier si la série est dans les favoris au chargement
   useEffect(() => {
@@ -78,10 +75,6 @@ export const SeriesHeader = ({ series, onSeriesUpdate }: SeriesHeaderProps) => {
     setMounted(true);
   }, [series.id]);
 
-  useEffect(() => {
-    setReadingStatus(getReadingStatusInfo(series));
-  }, [series]);
-
   useEffect(() => {
     try {
       if (series.metadata.language) {
@@ -133,138 +126,90 @@ export const SeriesHeader = ({ series, onSeriesUpdate }: SeriesHeaderProps) => {
     }
   };
 
-  const StatusIcon = readingStatus.icon;
-
   return (
-    <div className="relative w-full min-h-[300px]">
+    <div className="relative h-[300px] overflow-hidden">
-      {/* Fond flou */}
+      {/* Image de fond */}
-      <div className="absolute inset-0 overflow-hidden">
+      {!imageError ? (
-        {!imageError && (
+        <>
-          <div className="relative w-full h-full">
+          <ImageLoader isLoading={isLoading} />
-            <Image
+          <Image
-              src={`/api/komga/images/series/${series.id}/thumbnail`}
+            src={`/api/komga/images/series/${series.id}/first-page`}
-              alt=""
+            alt={`Couverture de ${series.metadata.title}`}
-              fill
+            fill
-              className={cn(
+            className={cn(
-                "object-cover blur-2xl scale-110 transition-opacity duration-300",
+              "object-cover blur-sm scale-105 brightness-50 transition-opacity duration-300",
-                imageLoading ? "opacity-0" : "opacity-10"
+              isLoading ? "opacity-0" : "opacity-100"
-              )}
+            )}
-              loading="lazy"
+            sizes="100vw"
-              quality={100}
+            onError={() => setImageError(true)}
-              onLoad={() => setImageLoading(false)}
+            onLoad={() => setIsLoading(false)}
-            />
+            quality={60}
-          </div>
+            priority
-        )}
+            unoptimized
-      </div>
+          />
+        </>
+      ) : (
+        <div className="absolute inset-0 bg-muted flex items-center justify-center">
+          <ImageOff className="w-12 h-12 text-muted-foreground" />
+        </div>
+      )}
 
       {/* Contenu */}
-      <div className="relative container mx-auto px-4 py-8">
+      <div className="relative h-full container mx-auto px-4 py-8 flex items-end">
-        <div className="flex flex-col md:flex-row gap-8 items-center md:items-start">
+        <div className="flex gap-6">
-          {/* Image de couverture */}
+          {/* Image principale */}
-          <div className="shrink-0">
+          <div className="relative w-[180px] aspect-[2/3] rounded-lg overflow-hidden shadow-lg bg-muted">
             {!imageError ? (
-              <div className="relative">
+              <>
-                <ImageLoader isLoading={imageLoading} />
+                <ImageLoader isLoading={isLoading} />
                 <Image
-                  src={`/api/komga/images/series/${series.id}/thumbnail`}
+                  src={`/api/komga/images/series/${series.id}/first-page`}
-                  alt={series.name}
+                  alt={`Couverture de ${series.metadata.title}`}
-                  width={200}
+                  fill
-                  height={300}
                   className={cn(
-                    "rounded-lg shadow-xl hover:shadow-2xl transition-all duration-300",
+                    "object-cover transition-opacity duration-300",
-                    imageLoading ? "opacity-0" : "opacity-100"
+                    isLoading ? "opacity-0" : "opacity-100"
                   )}
+                  sizes="180px"
                   onError={() => setImageError(true)}
-                  onLoad={() => setImageLoading(false)}
+                  onLoad={() => setIsLoading(false)}
-                  loading="lazy"
+                  quality={90}
-                  quality={100}
+                  priority
+                  unoptimized
                 />
-              </div>
+              </>
             ) : (
-              <div className="w-[200px] h-[300px] bg-muted rounded-lg flex items-center justify-center">
+              <div className="w-full h-full flex items-center justify-center">
-                <ImageOff className="w-12 h-12" />
+                <ImageOff className="w-12 h-12 text-muted-foreground" />
               </div>
             )}
           </div>
 
           {/* Informations */}
-          <div className="flex-1 text-center md:text-left space-y-4">
+          <div className="flex-1 text-white space-y-2">
-            <div className="flex flex-col md:flex-row items-center gap-4">
+            <h1 className="text-3xl font-bold">{series.metadata.title}</h1>
-              <h1 className="text-4xl font-bold">{series.name}</h1>
-              {mounted && (
-                <Button
-                  variant="ghost"
-                  size="icon"
-                  onClick={handleToggleFavorite}
-                  disabled={isLoading}
-                  className={cn(
-                    "hover:bg-primary/20",
-                    isFavorite && "bg-yellow-500/10 hover:bg-yellow-500/20"
-                  )}
-                  aria-label={isFavorite ? "Retirer des favoris" : "Ajouter aux favoris"}
-                >
-                  {isFavorite ? (
-                    <Star className="w-6 h-6 text-yellow-400 fill-yellow-400" />
-                  ) : (
-                    <StarOff className="w-6 h-6" />
-                  )}
-                </Button>
-              )}
-            </div>
-
-            {/* Métadonnées */}
-            <div className="flex flex-wrap gap-4 items-center justify-center md:justify-start text-sm">
-              {series.metadata.publisher && (
-                <span className="text-muted-foreground">{series.metadata.publisher}</span>
-              )}
-              {languageDisplay && (
-                <span className="text-muted-foreground capitalize">{languageDisplay}</span>
-              )}
-              {series.metadata.status && (
-                <span className="text-muted-foreground capitalize">
-                  {series.metadata.status.toLowerCase()}
-                </span>
-              )}
-            </div>
-
-            {/* Stats */}
-            <div className="flex flex-wrap gap-4 items-center justify-center md:justify-start">
-              <div
-                className={cn(
-                  "px-3 py-1.5 rounded-full flex items-center gap-2",
-                  readingStatus.className
-                )}
-              >
-                <StatusIcon className="w-4 h-4" />
-                <span className="text-sm font-medium">{readingStatus.label}</span>
-              </div>
-              <div className="flex items-center gap-4 text-sm text-muted-foreground">
-                <span>{series.booksCount} tomes</span>
-                <span>{series.booksReadCount} lus</span>
-                <span>{series.booksInProgressCount} en cours</span>
-              </div>
-            </div>
-
-            {/* Description */}
             {series.metadata.summary && (
-              <p className="text-muted-foreground line-clamp-3 max-w-2xl">
+              <p className="text-white/80 line-clamp-3">{series.metadata.summary}</p>
-                {series.metadata.summary}
-              </p>
-            )}
-
-            {/* Tags et genres */}
-            {(series.metadata.tags?.length > 0 || series.metadata.genres?.length > 0) && (
-              <div className="flex flex-wrap gap-2">
-                {[...(series.metadata.genres || []), ...(series.metadata.tags || [])].map((tag) => (
-                  <span
-                    key={tag}
-                    className="px-2 py-1 text-xs rounded-full bg-primary/10 text-primary-foreground"
-                  >
-                    {tag}
-                  </span>
-                ))}
-              </div>
             )}
+            <div className="flex items-center gap-4 mt-4">
+              <span
+                className={`px-2 py-0.5 rounded-full text-sm flex items-center gap-1 ${statusInfo.className}`}
+              >
+                <statusInfo.icon className="w-4 h-4" />
+                {statusInfo.label}
+              </span>
+              <span className="text-sm text-white/80">
+                {series.booksCount} tome{series.booksCount > 1 ? "s" : ""}
+              </span>
+              <Button
+                variant="ghost"
+                size="icon"
+                onClick={handleToggleFavorite}
+                className="text-white hover:text-white"
+              >
+                {isFavorite ? <Star className="w-5 h-5" /> : <StarOff className="w-5 h-5" />}
+              </Button>
+            </div>
           </div>
         </div>
       </div>