feat: add navigation to carousels and fix data loading

- Fix cache issues in home API route

- Add navigation to series/books in MediaRow carousels

- Improve Hero section visual with overflow handling

- Simplify data structure and API responses

.env.local.example

@@ -1,8 +0,0 @@
-# URL de l'application
-NEXT_PUBLIC_APP_URL=http://localhost:3000
-
-# URL par défaut du serveur Komga (optionnel)
-NEXT_PUBLIC_DEFAULT_KOMGA_URL=http://localhost:8080
-
-# Version de l'application (depuis package.json)
-NEXT_PUBLIC_APP_VERSION=$npm_package_version 

src/app/api/komga/home/route.ts

@@ -0,0 +1,122 @@
+import { NextResponse } from "next/server";
+import { cookies } from "next/headers";
+import { redirect } from "next/navigation";
+import { config } from "@/lib/config";
+import { cacheService } from "@/lib/services/cache.service";
+
+export async function GET() {
+  try {
+    // Récupérer les credentials Komga depuis le cookie
+    const cookieStore = cookies();
+    const configCookie = cookieStore.get("komgaCredentials");
+    console.log("API Home - Cookie komgaCredentials:", configCookie?.value);
+
+    if (!configCookie) {
+      console.log("API Home - Cookie komgaCredentials manquant");
+      return NextResponse.json({ error: "Configuration Komga manquante" }, { status: 401 });
+    }
+
+    let komgaConfig;
+    try {
+      komgaConfig = JSON.parse(atob(configCookie.value));
+      console.log("API Home - Config décodée:", {
+        serverUrl: komgaConfig.serverUrl,
+        hasCredentials: !!komgaConfig.credentials,
+      });
+    } catch (error) {
+      console.error("API Home - Erreur de décodage du cookie:", error);
+      return NextResponse.json({ error: "Configuration Komga invalide" }, { status: 401 });
+    }
+
+    if (!komgaConfig.credentials?.username || !komgaConfig.credentials?.password) {
+      console.log("API Home - Credentials manquants dans la config");
+      return NextResponse.json({ error: "Credentials Komga manquants" }, { status: 401 });
+    }
+
+    const auth = Buffer.from(
+      `${komgaConfig.credentials.username}:${komgaConfig.credentials.password}`
+    ).toString("base64");
+
+    console.log("API Home - Début des appels API");
+
+    try {
+      // Appels API parallèles
+      const [ongoingResponse, recentlyReadResponse, popularResponse] = await Promise.all([
+        // Séries en cours
+        fetch(
+          `${komgaConfig.serverUrl}/api/v1/series?read_status=IN_PROGRESS&sort=readDate,desc&page=0&size=20&media_status=READY`,
+          {
+            headers: {
+              Authorization: `Basic ${auth}`,
+            },
+            cache: "no-store", // Désactiver le cache
+          }
+        ).catch((error) => {
+          console.error("API Home - Erreur fetch ongoing:", error);
+          throw error;
+        }),
+        // Derniers livres lus
+        fetch(
+          `${komgaConfig.serverUrl}/api/v1/books?read_status=READ&sort=readDate,desc&page=0&size=20`,
+          {
+            headers: {
+              Authorization: `Basic ${auth}`,
+            },
+            cache: "no-store", // Désactiver le cache
+          }
+        ).catch((error) => {
+          console.error("API Home - Erreur fetch recently read:", error);
+          throw error;
+        }),
+        // Séries populaires
+        fetch(
+          `${komgaConfig.serverUrl}/api/v1/series?page=0&size=20&sort=metadata.titleSort,asc&media_status=READY`,
+          {
+            headers: {
+              Authorization: `Basic ${auth}`,
+            },
+            cache: "no-store", // Désactiver le cache
+          }
+        ).catch((error) => {
+          console.error("API Home - Erreur fetch popular:", error);
+          throw error;
+        }),
+      ]);
+
+      console.log("API Home - Status des réponses:", {
+        ongoing: ongoingResponse.status,
+        recentlyRead: recentlyReadResponse.status,
+        popular: popularResponse.status,
+      });
+
+      // Vérifier les réponses et récupérer les données
+      const [ongoing, recentlyRead, popular] = await Promise.all([
+        ongoingResponse.json(),
+        recentlyReadResponse.json(),
+        popularResponse.json(),
+      ]);
+
+      console.log("API Home - Données récupérées:", {
+        ongoingCount: ongoing.content?.length || 0,
+        recentlyReadCount: recentlyRead.content?.length || 0,
+        popularCount: popular.content?.length || 0,
+      });
+
+      // Retourner les données
+      return NextResponse.json({
+        ongoing: ongoing.content || [],
+        recentlyRead: recentlyRead.content || [],
+        popular: popular.content || [],
+      });
+    } catch (error) {
+      console.error("API Home - Erreur lors de la récupération des données:", error);
+      throw error;
+    }
+  } catch (error) {
+    console.error("API Home - Erreur générale:", error);
+    return NextResponse.json(
+      { error: "Erreur lors de la récupération des données" },
+      { status: 500 }
+    );
+  }
+}

src/app/page.tsx

@@ -1,37 +1,80 @@
 "use client";
 
-export default function Home() {
-  return (
-    <div className="space-y-8">
-      <div>
-        <h1 className="text-3xl font-bold">Bienvenue sur Paniels</h1>
-        <p className="text-muted-foreground mt-2">
-          Votre lecteur Komga moderne pour lire vos BD, mangas et comics préférés.
-        </p>
-      </div>
+import { HomeContent } from "@/components/home/HomeContent";
+import { useState, useEffect } from "react";
+import { useRouter } from "next/navigation";
+import { KomgaBook, KomgaSeries } from "@/types/komga";
 
-      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
-        <div className="rounded-lg border bg-card text-card-foreground shadow-sm p-6">
-          <h2 className="font-semibold mb-2">Bibliothèques</h2>
-          <p className="text-sm text-muted-foreground">
-            Accédez à vos bibliothèques Komga et parcourez vos collections.
-          </p>
-        </div>
-
-        <div className="rounded-lg border bg-card text-card-foreground shadow-sm p-6">
-          <h2 className="font-semibold mb-2">Collections</h2>
-          <p className="text-sm text-muted-foreground">
-            Organisez vos lectures en collections thématiques.
-          </p>
-        </div>
-
-        <div className="rounded-lg border bg-card text-card-foreground shadow-sm p-6">
-          <h2 className="font-semibold mb-2">Lecture</h2>
-          <p className="text-sm text-muted-foreground">
-            Profitez d'une expérience de lecture fluide et confortable.
-          </p>
-        </div>
-      </div>
-    </div>
-  );
+interface HomeData {
+  onGoingSeries: KomgaSeries[];
+  recentlyRead: KomgaBook[];
+  popularSeries: KomgaSeries[];
+}
+
+export default function HomePage() {
+  const router = useRouter();
+  const [data, setData] = useState<HomeData | null>(null);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    const fetchHomeData = async () => {
+      try {
+        const response = await fetch("/api/komga/home");
+        if (!response.ok) {
+          const errorData = await response.json();
+          throw new Error(errorData.error || `Erreur ${response.status}`);
+        }
+
+        const jsonData = await response.json();
+        // Transformer les données pour correspondre à l'interface HomeData
+        setData({
+          onGoingSeries: jsonData.ongoing || [],
+          recentlyRead: jsonData.recentlyRead || [],
+          popularSeries: jsonData.popular || [],
+        });
+      } catch (error) {
+        console.error("Erreur lors de la récupération des données:", error);
+        setError(error instanceof Error ? error.message : "Une erreur est survenue");
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    fetchHomeData();
+  }, []);
+
+  if (isLoading) {
+    return (
+      <main className="container mx-auto px-4 py-8 space-y-12">
+        <div className="h-[500px] -mx-4 sm:-mx-8 lg:-mx-14 bg-muted animate-pulse" />
+        <div className="space-y-12">
+          {[...Array(3)].map((_, i) => (
+            <div key={i} className="space-y-4">
+              <div className="h-8 w-48 bg-muted rounded animate-pulse" />
+              <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4">
+                {[...Array(6)].map((_, j) => (
+                  <div key={j} className="aspect-[2/3] bg-muted rounded animate-pulse" />
+                ))}
+              </div>
+            </div>
+          ))}
+        </div>
+      </main>
+    );
+  }
+
+  if (error) {
+    return (
+      <main className="container mx-auto px-4 py-8 space-y-12">
+        <div className="rounded-md bg-destructive/15 p-4">
+          <p className="text-sm text-destructive">{error}</p>
+        </div>
+      </main>
+    );
+  }
+
+  if (!data) return null;
+
+  return <HomeContent data={data} />;
 }

src/components/home/HeroSection.tsx

@@ -0,0 +1,69 @@
+"use client";
+
+import { KomgaSeries } from "@/types/komga";
+import Image from "next/image";
+import { useState } from "react";
+import { ImageOff } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+interface HeroSectionProps {
+  series: KomgaSeries[];
+}
+
+export function HeroSection({ series }: HeroSectionProps) {
+  console.log("HeroSection - Séries reçues:", {
+    count: series?.length || 0,
+    firstSeries: series?.[0],
+  });
+
+  return (
+    <div className="relative h-[500px] -mx-4 sm:-mx-8 lg:-mx-14 overflow-hidden">
+      {/* Grille de couvertures en arrière-plan */}
+      <div className="absolute inset-0 grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4 p-4 opacity-10">
+        {series?.map((series) => (
+          <CoverImage key={series.id} series={series} />
+        ))}
+      </div>
+
+      {/* Overlay gradient */}
+      <div className="absolute inset-0 bg-gradient-to-b from-background/50 to-background" />
+
+      {/* Contenu */}
+      <div className="relative h-full container flex flex-col items-center justify-center text-center space-y-4">
+        <h1 className="text-4xl sm:text-5xl lg:text-6xl font-bold tracking-tight">
+          Bienvenue sur Paniels
+        </h1>
+        <p className="text-xl text-muted-foreground max-w-[600px]">
+          Votre bibliothèque numérique pour lire vos BD, mangas et comics préférés.
+        </p>
+      </div>
+    </div>
+  );
+}
+
+interface CoverImageProps {
+  series: KomgaSeries;
+}
+
+function CoverImage({ series }: CoverImageProps) {
+  const [imageError, setImageError] = useState(false);
+
+  return (
+    <div className="relative aspect-[2/3] bg-muted rounded-lg overflow-hidden">
+      {!imageError ? (
+        <Image
+          src={`/api/komga/images/series/${series.id}/thumbnail`}
+          alt={`Couverture de ${series.metadata.title}`}
+          fill
+          className="object-cover"
+          sizes="(max-width: 640px) 50vw, (max-width: 1024px) 33vw, 16.666vw"
+          onError={() => setImageError(true)}
+        />
+      ) : (
+        <div className="w-full h-full flex items-center justify-center">
+          <ImageOff className="w-8 h-8" />
+        </div>
+      )}
+    </div>
+  );
+}

src/components/home/HomeContent.tsx

@@ -0,0 +1,71 @@
+"use client";
+
+import { HeroSection } from "./HeroSection";
+import { MediaRow } from "./MediaRow";
+import { KomgaBook, KomgaSeries } from "@/types/komga";
+import { useRouter } from "next/navigation";
+
+interface HomeContentProps {
+  data: {
+    onGoingSeries: KomgaSeries[];
+    recentlyRead: KomgaBook[];
+    popularSeries: KomgaSeries[];
+  };
+}
+
+export function HomeContent({ data }: HomeContentProps) {
+  const router = useRouter();
+
+  const handleItemClick = (item: KomgaSeries | KomgaBook) => {
+    // Si c'est une série (a la propriété booksCount), on va vers la page de la série
+    if ("booksCount" in item) {
+      router.push(`/series/${item.id}`);
+    } else {
+      // Si c'est un livre, on va directement vers la page de lecture
+      router.push(`/books/${item.id}`);
+    }
+  };
+
+  // Vérification des données pour le debug
+  console.log("HomeContent - Données reçues:", {
+    onGoingCount: data.onGoingSeries?.length || 0,
+    recentlyReadCount: data.recentlyRead?.length || 0,
+    popularCount: data.popularSeries?.length || 0,
+  });
+
+  return (
+    <main className="container mx-auto px-4 py-8 space-y-12">
+      {/* Hero Section - Afficher uniquement si nous avons des séries populaires */}
+      {data.popularSeries && data.popularSeries.length > 0 && (
+        <HeroSection series={data.popularSeries} />
+      )}
+
+      {/* Sections de contenu */}
+      <div className="space-y-12">
+        {data.onGoingSeries && data.onGoingSeries.length > 0 && (
+          <MediaRow
+            title="Continuer la lecture"
+            items={data.onGoingSeries}
+            onItemClick={handleItemClick}
+          />
+        )}
+
+        {data.recentlyRead && data.recentlyRead.length > 0 && (
+          <MediaRow
+            title="Dernières lectures"
+            items={data.recentlyRead}
+            onItemClick={handleItemClick}
+          />
+        )}
+
+        {data.popularSeries && data.popularSeries.length > 0 && (
+          <MediaRow
+            title="Séries populaires"
+            items={data.popularSeries}
+            onItemClick={handleItemClick}
+          />
+        )}
+      </div>
+    </main>
+  );
+}

src/components/home/MediaRow.tsx

@@ -0,0 +1,126 @@
+"use client";
+
+import { KomgaBook, KomgaSeries } from "@/types/komga";
+import { ChevronLeft, ChevronRight, ImageOff } from "lucide-react";
+import Image from "next/image";
+import { useRef, useState } from "react";
+import { cn } from "@/lib/utils";
+
+interface MediaRowProps {
+  title: string;
+  items: (KomgaSeries | KomgaBook)[];
+  onItemClick?: (item: KomgaSeries | KomgaBook) => void;
+}
+
+export function MediaRow({ title, items, onItemClick }: MediaRowProps) {
+  const scrollContainerRef = useRef<HTMLDivElement>(null);
+  const [showLeftArrow, setShowLeftArrow] = useState(false);
+  const [showRightArrow, setShowRightArrow] = useState(true);
+
+  const handleScroll = () => {
+    if (!scrollContainerRef.current) return;
+
+    const { scrollLeft, scrollWidth, clientWidth } = scrollContainerRef.current;
+    setShowLeftArrow(scrollLeft > 0);
+    setShowRightArrow(scrollLeft < scrollWidth - clientWidth - 10);
+  };
+
+  const scroll = (direction: "left" | "right") => {
+    if (!scrollContainerRef.current) return;
+
+    const scrollAmount = direction === "left" ? -400 : 400;
+    scrollContainerRef.current.scrollBy({ left: scrollAmount, behavior: "smooth" });
+  };
+
+  if (!items.length) return null;
+
+  return (
+    <div className="space-y-4">
+      <h2 className="text-2xl font-bold tracking-tight">{title}</h2>
+      <div className="relative group">
+        {/* Bouton de défilement gauche */}
+        {showLeftArrow && (
+          <button
+            onClick={() => scroll("left")}
+            className="absolute left-0 top-1/2 -translate-y-1/2 z-10 p-2 rounded-full bg-background/90 shadow-md border opacity-0 group-hover:opacity-100 transition-opacity"
+            aria-label="Défiler vers la gauche"
+          >
+            <ChevronLeft className="h-6 w-6" />
+          </button>
+        )}
+
+        {/* Conteneur défilant */}
+        <div
+          ref={scrollContainerRef}
+          onScroll={handleScroll}
+          className="flex gap-4 overflow-x-auto scrollbar-hide scroll-smooth pb-4"
+        >
+          {items.map((item) => (
+            <MediaCard key={item.id} item={item} onClick={() => onItemClick?.(item)} />
+          ))}
+        </div>
+
+        {/* Bouton de défilement droit */}
+        {showRightArrow && (
+          <button
+            onClick={() => scroll("right")}
+            className="absolute right-0 top-1/2 -translate-y-1/2 z-10 p-2 rounded-full bg-background/90 shadow-md border opacity-0 group-hover:opacity-100 transition-opacity"
+            aria-label="Défiler vers la droite"
+          >
+            <ChevronRight className="h-6 w-6" />
+          </button>
+        )}
+      </div>
+    </div>
+  );
+}
+
+interface MediaCardProps {
+  item: KomgaSeries | KomgaBook;
+  onClick?: () => void;
+}
+
+function MediaCard({ item, onClick }: MediaCardProps) {
+  const [imageError, setImageError] = useState(false);
+
+  // Déterminer si c'est une série ou un livre
+  const isSeries = "booksCount" in item;
+  const title = isSeries
+    ? item.metadata.title
+    : item.metadata.title || `Tome ${item.metadata.number}`;
+
+  return (
+    <button
+      onClick={onClick}
+      className="flex-shrink-0 w-[200px] 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/${isSeries ? "series" : "books"}/${item.id}/thumbnail`}
+            alt={`Couverture de ${title}`}
+            fill
+            className="object-cover"
+            sizes="200px"
+            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">{title}</h3>
+        {isSeries && (
+          <p className="text-xs text-muted-foreground mt-1">
+            {item.booksCount} tome{item.booksCount > 1 ? "s" : ""}
+          </p>
+        )}
+      </div>
+    </button>
+  );
+}

src/lib/config.ts

@@ -1,3 +1 @@
-export const config = {
-  serverUrl: process.env.NEXT_PUBLIC_KOMGA_URL || "http://localhost:8080",
-};
+export const config = {};