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

src/components/layout/ClientLayout.tsx

@@ -0,0 +1,20 @@
+"use client";
+
+import { ThemeProvider } from "next-themes";
+import { useState } from "react";
+import { Header } from "@/components/layout/Header";
+import { Sidebar } from "@/components/layout/Sidebar";
+
+export default function ClientLayout({ children }: { children: React.ReactNode }) {
+  const [isSidebarOpen, setIsSidebarOpen] = useState(false);
+
+  return (
+    <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
+      <div className="relative min-h-screen">
+        <Header onToggleSidebar={() => setIsSidebarOpen(!isSidebarOpen)} />
+        <Sidebar isOpen={isSidebarOpen} />
+        <main className="container pt-4 md:pt-8">{children}</main>
+      </div>
+    </ThemeProvider>
+  );
+}

src/components/layout/Header.tsx

@@ -0,0 +1,48 @@
+import { Menu, Moon, Sun } from "lucide-react";
+import { useTheme } from "next-themes";
+
+interface HeaderProps {
+  onToggleSidebar: () => void;
+}
+
+export function Header({ onToggleSidebar }: HeaderProps) {
+  const { theme, setTheme } = useTheme();
+
+  const toggleTheme = () => {
+    setTheme(theme === "dark" ? "light" : "dark");
+  };
+
+  return (
+    <header className="sticky top-0 z-50 w-full border-b border-border/40 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
+      <div className="container flex h-14 max-w-screen-2xl items-center">
+        <button
+          onClick={onToggleSidebar}
+          className="mr-2 px-2 hover:bg-accent hover:text-accent-foreground rounded-md"
+          aria-label="Toggle sidebar"
+        >
+          <Menu className="h-5 w-5" />
+        </button>
+
+        <div className="mr-4 hidden md:flex">
+          <a className="mr-6 flex items-center space-x-2" href="/">
+            <span className="hidden font-bold sm:inline-block">Paniels</span>
+          </a>
+        </div>
+
+        <div className="flex flex-1 items-center justify-between space-x-2 md:justify-end">
+          <nav className="flex items-center">
+            <button
+              onClick={toggleTheme}
+              className="px-2 py-1.5 hover:bg-accent hover:text-accent-foreground rounded-md"
+              aria-label="Toggle theme"
+            >
+              <Sun className="h-5 w-5 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+              <Moon className="absolute h-5 w-5 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+              <span className="sr-only">Toggle theme</span>
+            </button>
+          </nav>
+        </div>
+      </div>
+    </header>
+  );
+}

src/components/layout/Sidebar.tsx

@@ -0,0 +1,76 @@
+import { BookOpen, Home, Library, Settings } from "lucide-react";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { cn } from "@/lib/utils";
+
+interface SidebarProps {
+  isOpen: boolean;
+}
+
+export function Sidebar({ isOpen }: SidebarProps) {
+  const pathname = usePathname();
+
+  const navigation = [
+    {
+      name: "Accueil",
+      href: "/",
+      icon: Home,
+    },
+    {
+      name: "Bibliothèques",
+      href: "/libraries",
+      icon: Library,
+    },
+    {
+      name: "Collections",
+      href: "/collections",
+      icon: BookOpen,
+    },
+  ];
+
+  return (
+    <aside
+      className={cn(
+        "fixed left-0 top-14 z-30 h-[calc(100vh-3.5rem)] w-64 border-r border-border/40 bg-background transition-transform duration-300 ease-in-out",
+        isOpen ? "translate-x-0" : "-translate-x-full"
+      )}
+    >
+      <div className="space-y-4 py-4">
+        <div className="px-3 py-2">
+          <div className="space-y-1">
+            <h2 className="mb-2 px-4 text-lg font-semibold tracking-tight">Navigation</h2>
+            {navigation.map((item) => (
+              <Link
+                key={item.href}
+                href={item.href}
+                className={cn(
+                  "flex items-center rounded-lg px-3 py-2 text-sm font-medium hover:bg-accent hover:text-accent-foreground",
+                  pathname === item.href ? "bg-accent" : "transparent"
+                )}
+              >
+                <item.icon className="mr-2 h-4 w-4" />
+                {item.name}
+              </Link>
+            ))}
+          </div>
+        </div>
+
+        <div className="px-3 py-2">
+          <div className="space-y-1">
+            <h2 className="mb-2 px-4 text-lg font-semibold tracking-tight">Configuration</h2>
+            <Link
+              href="/settings"
+              className={cn(
+                "flex items-center rounded-lg px-3 py-2 text-sm font-medium hover:bg-accent hover:text-accent-foreground",
+                pathname === "/settings" ? "bg-accent" : "transparent"
+              )}
+            >
+              <Settings className="mr-2 h-4 w-4" />
+              Préférences
+            </Link>
+          </div>
+        </div>
+      </div>
+    </aside>
+  );
+}

src/components/library/LibraryGrid.tsx

@@ -0,0 +1,115 @@
+import { KomgaLibrary } from "@/types/komga";
+import { Book, ImageOff } from "lucide-react";
+import Image from "next/image";
+import { useState } from "react";
+
+interface LibraryGridProps {
+  libraries: KomgaLibrary[];
+  onLibraryClick?: (library: KomgaLibrary) => void;
+  getLibraryThumbnailUrl: (libraryId: string) => string;
+}
+
+// Fonction utilitaire pour formater la date de manière sécurisée
+const formatDate = (dateString: string): string => {
+  try {
+    const date = new Date(dateString);
+    if (isNaN(date.getTime())) {
+      return "Date non disponible";
+    }
+    return new Intl.DateTimeFormat("fr-FR", {
+      year: "numeric",
+      month: "long",
+      day: "numeric",
+    }).format(date);
+  } catch (error) {
+    console.error("Erreur lors du formatage de la date:", error);
+    return "Date non disponible";
+  }
+};
+
+export function LibraryGrid({
+  libraries,
+  onLibraryClick,
+  getLibraryThumbnailUrl,
+}: LibraryGridProps) {
+  if (!libraries.length) {
+    return (
+      <div className="text-center p-8">
+        <p className="text-muted-foreground">Aucune bibliothèque disponible</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+      {libraries.map((library) => (
+        <LibraryCard
+          key={library.id}
+          library={library}
+          onClick={() => onLibraryClick?.(library)}
+          getLibraryThumbnailUrl={getLibraryThumbnailUrl}
+        />
+      ))}
+    </div>
+  );
+}
+
+interface LibraryCardProps {
+  library: KomgaLibrary;
+  onClick?: () => void;
+  getLibraryThumbnailUrl: (libraryId: string) => string;
+}
+
+function LibraryCard({ library, onClick, getLibraryThumbnailUrl }: LibraryCardProps) {
+  const [imageError, setImageError] = useState(false);
+
+  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 */}
+      <div className="absolute inset-0 bg-muted">
+        {!imageError ? (
+          <Image
+            src={getLibraryThumbnailUrl(library.id)}
+            alt={`Couverture de ${library.name}`}
+            fill
+            className="object-cover opacity-20 group-hover:opacity-30 transition-opacity"
+            sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 33vw"
+            onError={() => setImageError(true)}
+          />
+        ) : (
+          <div className="w-full h-full flex items-center justify-center opacity-20">
+            <ImageOff className="w-12 h-12" />
+          </div>
+        )}
+      </div>
+
+      {/* Contenu */}
+      <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" />
+          <h3 className="text-lg font-semibold line-clamp-1">{library.name}</h3>
+        </div>
+
+        <div className="mt-auto space-y-2">
+          <div className="flex items-center justify-between text-sm">
+            <span
+              className={`px-2 py-0.5 rounded-full text-xs ${
+                library.unavailable
+                  ? "bg-destructive/10 text-destructive"
+                  : "bg-green-500/10 text-green-500"
+              }`}
+            >
+              {library.unavailable ? "Non disponible" : "Disponible"}
+            </span>
+          </div>
+          <div className="text-xs text-muted-foreground">
+            Dernière mise à jour : {formatDate(library.lastModified)}
+          </div>
+        </div>
+      </div>
+    </button>
+  );
+}

src/components/library/SeriesGrid.tsx

@@ -0,0 +1,116 @@
+"use client";
+
+import { KomgaSeries } from "@/types/komga";
+import { Book, ImageOff } from "lucide-react";
+import Image from "next/image";
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+
+interface SeriesGridProps {
+  series: KomgaSeries[];
+  serverUrl: string;
+}
+
+// Fonction utilitaire pour obtenir les informations de lecture d'une série
+const getReadingStatusInfo = (series: KomgaSeries): { label: string; className: string } => {
+  const { booksCount, booksReadCount, booksUnreadCount } = series;
+  const booksInProgressCount = booksCount - (booksReadCount + booksUnreadCount);
+
+  if (booksReadCount === booksCount) {
+    return {
+      label: "Lu",
+      className: "bg-green-500/10 text-green-500",
+    };
+  }
+
+  if (booksInProgressCount > 0 || (booksReadCount > 0 && booksReadCount < booksCount)) {
+    return {
+      label: "En cours",
+      className: "bg-blue-500/10 text-blue-500",
+    };
+  }
+
+  return {
+    label: "Non lu",
+    className: "bg-yellow-500/10 text-yellow-500",
+  };
+};
+
+export function SeriesGrid({ series, serverUrl }: SeriesGridProps) {
+  const router = useRouter();
+
+  if (!series.length) {
+    return (
+      <div className="text-center p-8">
+        <p className="text-muted-foreground">Aucune série disponible</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="grid gap-4 sm:grid-cols-3 lg:grid-cols-5">
+      {series.map((series) => (
+        <SeriesCard
+          key={series.id}
+          series={series}
+          onClick={() => router.push(`/series/${series.id}`)}
+          serverUrl={serverUrl}
+        />
+      ))}
+    </div>
+  );
+}
+
+interface SeriesCardProps {
+  series: KomgaSeries;
+  onClick?: () => void;
+  serverUrl: string;
+}
+
+function SeriesCard({ series, onClick, serverUrl }: SeriesCardProps) {
+  const [imageError, setImageError] = useState(false);
+  const statusInfo = getReadingStatusInfo(series);
+
+  return (
+    <button
+      onClick={onClick}
+      className="group relative flex flex-col rounded-lg border bg-card text-card-foreground shadow-sm hover:bg-accent hover:text-accent-foreground transition-colors overflow-hidden"
+    >
+      {/* Image de couverture */}
+      <div className="relative aspect-[2/3] bg-muted">
+        {!imageError ? (
+          <Image
+            src={`/api/komga/images/series/${series.id}/thumbnail`}
+            alt={`Couverture de ${series.metadata.title}`}
+            fill
+            className="object-cover"
+            sizes="(max-width: 640px) 33vw, (max-width: 1024px) 20vw, 20vw"
+            onError={() => setImageError(true)}
+          />
+        ) : (
+          <div className="w-full h-full flex items-center justify-center">
+            <ImageOff className="w-12 h-12" />
+          </div>
+        )}
+      </div>
+
+      {/* Contenu */}
+      <div className="flex flex-col p-2">
+        <h3 className="font-medium line-clamp-2 text-sm">{series.metadata.title}</h3>
+        <div className="mt-1 text-xs text-muted-foreground space-y-1">
+          <div className="flex items-center gap-1">
+            <Book className="h-3 w-3" />
+            <span>
+              {series.booksCount} tome{series.booksCount > 1 ? "s" : ""}
+            </span>
+          </div>
+          <div className="flex items-center">
+            <span className={`px-1.5 py-0.5 rounded-full text-[10px] ${statusInfo.className}`}>
+              {statusInfo.label}
+            </span>
+          </div>
+        </div>
+      </div>
+    </button>
+  );
+}

src/components/reader/BookReader.tsx

@@ -0,0 +1,134 @@
+"use client";
+
+import { KomgaBook } from "@/types/komga";
+import { ChevronLeft, ChevronRight, ImageOff, Loader2 } from "lucide-react";
+import Image from "next/image";
+import { useEffect, useState, useCallback } from "react";
+
+interface BookReaderProps {
+  book: KomgaBook;
+  pages: number[];
+  onClose?: () => void;
+}
+
+export function BookReader({ book, pages, onClose }: BookReaderProps) {
+  const [currentPage, setCurrentPage] = useState(1);
+  const [isLoading, setIsLoading] = useState(true);
+  const [imageError, setImageError] = useState(false);
+
+  const handlePreviousPage = useCallback(() => {
+    if (currentPage > 1) {
+      setCurrentPage(currentPage - 1);
+      setIsLoading(true);
+      setImageError(false);
+    }
+  }, [currentPage]);
+
+  const handleNextPage = useCallback(() => {
+    if (currentPage < pages.length) {
+      setCurrentPage(currentPage + 1);
+      setIsLoading(true);
+      setImageError(false);
+    }
+  }, [currentPage, pages.length]);
+
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === "ArrowLeft") {
+        handlePreviousPage();
+      } else if (event.key === "ArrowRight") {
+        handleNextPage();
+      } else if (event.key === "Escape" && onClose) {
+        onClose();
+      }
+    };
+
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [handlePreviousPage, handleNextPage, onClose]);
+
+  return (
+    <div className="fixed inset-0 bg-background/95 backdrop-blur-sm z-50">
+      <div className="relative h-full flex items-center justify-center">
+        {/* Bouton précédent */}
+        {currentPage > 1 && (
+          <button
+            onClick={handlePreviousPage}
+            className="absolute left-4 p-2 rounded-full bg-background/50 hover:bg-background/80 transition-colors"
+            aria-label="Page précédente"
+          >
+            <ChevronLeft className="h-8 w-8" />
+          </button>
+        )}
+
+        {/* Page courante */}
+        <div className="relative h-full max-h-full w-auto max-w-full p-4">
+          {isLoading && (
+            <div className="absolute inset-0 flex items-center justify-center">
+              <Loader2 className="h-8 w-8 animate-spin" />
+            </div>
+          )}
+          {!imageError ? (
+            <Image
+              src={`/api/komga/books/${book.id}/pages/${currentPage}`}
+              alt={`Page ${currentPage}`}
+              className="h-full w-auto object-contain"
+              width={800}
+              height={1200}
+              priority
+              onLoad={() => setIsLoading(false)}
+              onError={() => {
+                setIsLoading(false);
+                setImageError(true);
+              }}
+            />
+          ) : (
+            <div className="h-full w-96 flex items-center justify-center bg-muted rounded-lg">
+              <ImageOff className="h-12 w-12" />
+            </div>
+          )}
+        </div>
+
+        {/* Bouton suivant */}
+        {currentPage < pages.length && (
+          <button
+            onClick={handleNextPage}
+            className="absolute right-4 p-2 rounded-full bg-background/50 hover:bg-background/80 transition-colors"
+            aria-label="Page suivante"
+          >
+            <ChevronRight className="h-8 w-8" />
+          </button>
+        )}
+
+        {/* Indicateur de page */}
+        <div className="absolute bottom-4 left-1/2 -translate-x-1/2 px-4 py-2 rounded-full bg-background/50 text-sm">
+          Page {currentPage} / {pages.length}
+        </div>
+
+        {/* Bouton fermer */}
+        {onClose && (
+          <button
+            onClick={onClose}
+            className="absolute top-4 right-4 p-2 rounded-full bg-background/50 hover:bg-background/80 transition-colors"
+            aria-label="Fermer"
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              className="h-6 w-6"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M6 18L18 6M6 6l12 12"
+              />
+            </svg>
+          </button>
+        )}
+      </div>
+    </div>
+  );
+}

src/components/series/BookGrid.tsx

@@ -0,0 +1,83 @@
+"use client";
+
+import { KomgaBook } from "@/types/komga";
+import { ImageOff } from "lucide-react";
+import Image from "next/image";
+import { useState } from "react";
+
+interface BookGridProps {
+  books: KomgaBook[];
+  onBookClick?: (book: KomgaBook) => void;
+  getBookThumbnailUrl: (bookId: string) => string;
+}
+
+export function BookGrid({ books, onBookClick, getBookThumbnailUrl }: BookGridProps) {
+  if (!books.length) {
+    return (
+      <div className="text-center p-8">
+        <p className="text-muted-foreground">Aucun tome disponible</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="grid gap-4 sm:grid-cols-3 lg:grid-cols-6">
+      {books.map((book) => (
+        <BookCard
+          key={book.id}
+          book={book}
+          onClick={() => onBookClick?.(book)}
+          getBookThumbnailUrl={getBookThumbnailUrl}
+        />
+      ))}
+    </div>
+  );
+}
+
+interface BookCardProps {
+  book: KomgaBook;
+  onClick?: () => void;
+  getBookThumbnailUrl: (bookId: string) => string;
+}
+
+function BookCard({ book, onClick, getBookThumbnailUrl }: BookCardProps) {
+  const [imageError, setImageError] = useState(false);
+
+  return (
+    <button
+      onClick={onClick}
+      className="group relative flex flex-col rounded-lg border bg-card text-card-foreground shadow-sm hover:bg-accent hover:text-accent-foreground transition-colors overflow-hidden"
+    >
+      {/* Image de couverture */}
+      <div className="relative aspect-[2/3] bg-muted">
+        {!imageError ? (
+          <Image
+            src={getBookThumbnailUrl(book.id)}
+            alt={`Couverture de ${book.metadata.title}`}
+            fill
+            className="object-cover"
+            sizes="(max-width: 640px) 33vw, (max-width: 1024px) 16.666vw, 16.666vw"
+            onError={() => setImageError(true)}
+          />
+        ) : (
+          <div className="w-full h-full flex items-center justify-center">
+            <ImageOff className="w-12 h-12" />
+          </div>
+        )}
+      </div>
+
+      {/* Contenu */}
+      <div className="flex flex-col p-2">
+        <h3 className="font-medium line-clamp-2 text-sm">
+          {book.metadata.title || `Tome ${book.metadata.number}`}
+        </h3>
+        <div className="mt-1 text-xs text-muted-foreground space-y-1">
+          {book.metadata.releaseDate && (
+            <div>{new Date(book.metadata.releaseDate).toLocaleDateString()}</div>
+          )}
+          {book.size && <div className="text-[10px]">{book.size}</div>}
+        </div>
+      </div>
+    </button>
+  );
+}