feat: Initial commit - Base application with Next.js - Configuration, Auth, Library navigation, CBZ/CBR reader, Cache, Responsive design

src/app/books/[bookId]/page.tsx

@@ -0,0 +1,160 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import { KomgaBook } from "@/types/komga";
+import { useEffect, useState } from "react";
+import { BookReader } from "@/components/reader/BookReader";
+import { ImageOff } from "lucide-react";
+import Image from "next/image";
+
+interface BookData {
+  book: KomgaBook;
+  pages: number[];
+}
+
+export default function BookPage({ params }: { params: { bookId: string } }) {
+  const router = useRouter();
+  const [data, setData] = useState<BookData | null>(null);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [imageError, setImageError] = useState(false);
+  const [isReading, setIsReading] = useState(false);
+
+  useEffect(() => {
+    const fetchBookData = async () => {
+      try {
+        const response = await fetch(`/api/komga/books/${params.bookId}`);
+        if (!response.ok) {
+          const data = await response.json();
+          throw new Error(data.error || "Erreur lors de la récupération du tome");
+        }
+        const data = await response.json();
+        setData(data);
+      } catch (error) {
+        console.error("Erreur:", error);
+        setError(error instanceof Error ? error.message : "Une erreur est survenue");
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    fetchBookData();
+  }, [params.bookId]);
+
+  const handleStartReading = () => {
+    setIsReading(true);
+  };
+
+  const handleCloseReader = () => {
+    setIsReading(false);
+  };
+
+  if (isLoading) {
+    return (
+      <div className="container py-8 space-y-8 animate-pulse">
+        <div className="flex flex-col md:flex-row gap-8">
+          <div className="w-48 h-72 bg-muted rounded-lg" />
+          <div className="flex-1 space-y-4">
+            <div className="h-8 bg-muted rounded w-1/3" />
+            <div className="h-4 bg-muted rounded w-1/4" />
+            <div className="h-24 bg-muted rounded" />
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  if (error || !data) {
+    return (
+      <div className="container py-8">
+        <div className="rounded-md bg-destructive/15 p-4">
+          <p className="text-sm text-destructive">{error || "Données non disponibles"}</p>
+        </div>
+      </div>
+    );
+  }
+
+  const { book, pages } = data;
+
+  return (
+    <>
+      <div className="container py-8 space-y-8">
+        {/* En-tête du tome */}
+        <div className="flex flex-col md:flex-row gap-8">
+          {/* Couverture */}
+          <div className="w-48 shrink-0">
+            <div className="relative aspect-[2/3] rounded-lg overflow-hidden bg-muted">
+              {!imageError ? (
+                <Image
+                  src={`/api/komga/images/books/${book.id}/thumbnail`}
+                  alt={`Couverture de ${book.metadata.title}`}
+                  fill
+                  className="object-cover"
+                  onError={() => setImageError(true)}
+                />
+              ) : (
+                <div className="w-full h-full flex items-center justify-center">
+                  <ImageOff className="w-12 h-12" />
+                </div>
+              )}
+            </div>
+          </div>
+
+          {/* Informations */}
+          <div className="flex-1 space-y-4">
+            <div>
+              <h1 className="text-3xl font-bold">
+                {book.metadata.title || `Tome ${book.metadata.number}`}
+              </h1>
+              <p className="text-muted-foreground">
+                {book.seriesTitle} - Tome {book.metadata.number}
+              </p>
+            </div>
+
+            {book.metadata.summary && (
+              <p className="text-muted-foreground">{book.metadata.summary}</p>
+            )}
+
+            <div className="space-y-1 text-sm text-muted-foreground">
+              {book.metadata.releaseDate && (
+                <div>
+                  <span className="font-medium">Date de sortie :</span>{" "}
+                  {new Date(book.metadata.releaseDate).toLocaleDateString()}
+                </div>
+              )}
+              {book.metadata.authors?.length > 0 && (
+                <div>
+                  <span className="font-medium">Auteurs :</span>{" "}
+                  {book.metadata.authors
+                    .map((author) => `${author.name} (${author.role})`)
+                    .join(", ")}
+                </div>
+              )}
+              {book.size && (
+                <div>
+                  <span className="font-medium">Taille :</span> {book.size}
+                </div>
+              )}
+              {book.media.pagesCount > 0 && (
+                <div>
+                  <span className="font-medium">Pages :</span> {book.media.pagesCount}
+                </div>
+              )}
+            </div>
+
+            {/* Bouton de lecture */}
+            <button
+              onClick={handleStartReading}
+              className="inline-flex items-center justify-center rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground ring-offset-background transition-colors hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+            >
+              Commencer la lecture
+            </button>
+          </div>
+        </div>
+      </div>
+
+      {/* Lecteur */}
+      {isReading && <BookReader book={book} pages={pages} onClose={handleCloseReader} />}
+    </>
+  );
+}