feat: add series support for book organization

API:
- Add /libraries/{id}/series endpoint to list series with book counts
- Add series filter to /books endpoint
- Fix SeriesItem to return first_book_id properly (using CTE with ROW_NUMBER)

Indexer:
- Parse series from parent folder name relative to library root
- Store series in database when indexing books

Backoffice:
- Add Books page with grid view, search, and pagination
- Add Series page showing series with cover images
- Add Library books page filtered by series
- Add book detail page
- Add Series column in libraries list with clickable link
- Create BookCard component for reusable book display
- Add CSS styles for books grid, series grid, and book details
- Add proxy API route for book cover images (fixing CORS issues)

Parser:
- Add series field to ParsedMetadata
- Extract series from file path relative to library root

Books without a parent folder are categorized as 'unclassified' series.

apps/backoffice/app/api/books/[bookId]/pages/[pageNum]/route.ts

@@ -0,0 +1,56 @@
+import { NextRequest, NextResponse } from "next/server";
+
+export async function GET(
+  request: NextRequest,
+  { params }: { params: Promise<{ bookId: string; pageNum: string }> }
+) {
+  const { bookId, pageNum } = await params;
+  
+  // Récupérer les query params (format, width, quality)
+  const { searchParams } = new URL(request.url);
+  const format = searchParams.get("format") || "webp";
+  const width = searchParams.get("width") || "";
+  const quality = searchParams.get("quality") || "";
+  
+  // Construire l'URL vers l'API backend
+  const apiBaseUrl = process.env.API_BASE_URL || "http://api:8080";
+  const apiUrl = new URL(`${apiBaseUrl}/books/${bookId}/pages/${pageNum}`);
+  apiUrl.searchParams.set("format", format);
+  if (width) apiUrl.searchParams.set("width", width);
+  if (quality) apiUrl.searchParams.set("quality", quality);
+  
+  // Faire la requête à l'API
+  const token = process.env.API_BOOTSTRAP_TOKEN;
+  if (!token) {
+    return new NextResponse("API token not configured", { status: 500 });
+  }
+  
+  try {
+    const response = await fetch(apiUrl.toString(), {
+      headers: {
+        Authorization: `Bearer ${token}`,
+      },
+    });
+    
+    if (!response.ok) {
+      return new NextResponse(`Failed to fetch image: ${response.status}`, { 
+        status: response.status 
+      });
+    }
+    
+    // Récupérer le content-type et les données
+    const contentType = response.headers.get("content-type") || "image/webp";
+    const imageBuffer = await response.arrayBuffer();
+    
+    // Retourner l'image avec le bon content-type
+    return new NextResponse(imageBuffer, {
+      headers: {
+        "Content-Type": contentType,
+        "Cache-Control": "public, max-age=300",
+      },
+    });
+  } catch (error) {
+    console.error("Error fetching image:", error);
+    return new NextResponse("Failed to fetch image", { status: 500 });
+  }
+}

apps/backoffice/app/books/[id]/page.tsx

@@ -0,0 +1,99 @@
+import { fetchLibraries, getBookCoverUrl, BookDto, apiFetch } from "../../../lib/api";
+import Image from "next/image";
+import Link from "next/link";
+import { notFound } from "next/navigation";
+
+export const dynamic = "force-dynamic";
+
+async function fetchBook(bookId: string): Promise<BookDto | null> {
+  try {
+    return await apiFetch<BookDto>(`/books/${bookId}`);
+  } catch {
+    return null;
+  }
+}
+
+export default async function BookDetailPage({
+  params
+}: {
+  params: Promise<{ id: string }>;
+}) {
+  const { id } = await params;
+  const [book, libraries] = await Promise.all([
+    fetchBook(id),
+    fetchLibraries().catch(() => [] as { id: string; name: string }[])
+  ]);
+
+  if (!book) {
+    notFound();
+  }
+
+  const library = libraries.find(l => l.id === book.library_id);
+
+  return (
+    <>
+      <div className="breadcrumb">
+        <Link href="/books">← Back to books</Link>
+      </div>
+
+      <div className="book-detail">
+        <div className="book-detail-cover">
+          <Image
+            src={getBookCoverUrl(book.id)}
+            alt={`Cover of ${book.title}`}
+            width={300}
+            height={440}
+            className="detail-cover-image"
+            unoptimized
+          />
+        </div>
+
+        <div className="book-detail-info">
+          <h1>{book.title}</h1>
+          
+          {book.author && (
+            <p className="detail-author">by {book.author}</p>
+          )}
+
+          {book.series && (
+            <p className="detail-series">
+              {book.series}
+              {book.volume && <span className="volume">Volume {book.volume}</span>}
+            </p>
+          )}
+
+          <div className="detail-meta">
+            <div className="meta-row">
+              <span className="meta-label">Format:</span>
+              <span className={`book-kind ${book.kind}`}>{book.kind.toUpperCase()}</span>
+            </div>
+            
+            {book.language && (
+              <div className="meta-row">
+                <span className="meta-label">Language:</span>
+                <span>{book.language.toUpperCase()}</span>
+              </div>
+            )}
+            
+            {book.page_count && (
+              <div className="meta-row">
+                <span className="meta-label">Pages:</span>
+                <span>{book.page_count}</span>
+              </div>
+            )}
+
+            <div className="meta-row">
+              <span className="meta-label">Library:</span>
+              <span>{library?.name || book.library_id}</span>
+            </div>
+
+            <div className="meta-row">
+              <span className="meta-label">ID:</span>
+              <code className="book-id">{book.id}</code>
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}

apps/backoffice/app/books/page.tsx

@@ -0,0 +1,108 @@
+import { fetchBooks, searchBooks, fetchLibraries, BookDto, LibraryDto, getBookCoverUrl } from "../../lib/api";
+import { BooksGrid, EmptyState } from "../components/BookCard";
+import Link from "next/link";
+
+export const dynamic = "force-dynamic";
+
+export default async function BooksPage({
+  searchParams
+}: {
+  searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
+}) {
+  const searchParamsAwaited = await searchParams;
+  const libraryId = typeof searchParamsAwaited.library === "string" ? searchParamsAwaited.library : undefined;
+  const searchQuery = typeof searchParamsAwaited.q === "string" ? searchParamsAwaited.q : "";
+  
+  const [libraries] = await Promise.all([
+    fetchLibraries().catch(() => [] as LibraryDto[])
+  ]);
+
+  let books: BookDto[] = [];
+  let nextCursor: string | null = null;
+  let searchResults: BookDto[] | null = null;
+  let totalHits: number | null = null;
+
+  if (searchQuery) {
+    // Mode recherche
+    const searchResponse = await searchBooks(searchQuery, libraryId).catch(() => null);
+    if (searchResponse) {
+      searchResults = searchResponse.hits.map(hit => ({
+        id: hit.id,
+        library_id: hit.library_id,
+        kind: hit.kind,
+        title: hit.title,
+        author: hit.author,
+        series: hit.series,
+        volume: hit.volume,
+        language: hit.language,
+        page_count: null,
+        updated_at: ""
+      }));
+      totalHits = searchResponse.estimated_total_hits;
+    }
+  } else {
+    // Mode liste
+    const booksPage = await fetchBooks(libraryId).catch(() => ({ items: [] as BookDto[], next_cursor: null }));
+    books = booksPage.items;
+    nextCursor = booksPage.next_cursor;
+  }
+
+  const displayBooks = searchResults || books;
+
+  return (
+    <>
+      <h1>Books</h1>
+      
+      {/* Filtres et recherche */}
+      <div className="card">
+        <form className="search-form">
+          <input 
+            name="q" 
+            placeholder="Search books..." 
+            defaultValue={searchQuery}
+            className="search-input"
+          />
+          <select name="library" defaultValue={libraryId || ""}>
+            <option value="">All libraries</option>
+            {libraries.map((lib) => (
+              <option key={lib.id} value={lib.id}>
+                {lib.name}
+              </option>
+            ))}
+          </select>
+          <button type="submit">Search</button>
+          {searchQuery && (
+            <Link href="/books" className="button secondary">Clear</Link>
+          )}
+        </form>
+      </div>
+
+      {/* Résultats de recherche */}
+      {searchQuery && totalHits !== null && (
+        <p className="results-info">
+          Found {totalHits} result{totalHits !== 1 ? 's' : ''} for &quot;{searchQuery}&quot;
+        </p>
+      )}
+
+      {/* Grille de livres */}
+      {displayBooks.length > 0 ? (
+        <>
+          <BooksGrid books={displayBooks} getBookCoverUrl={getBookCoverUrl} />
+          
+          {/* Pagination */}
+          {!searchQuery && nextCursor && (
+            <div className="pagination">
+              <form>
+                <input type="hidden" name="library" value={libraryId || ""} />
+                <input type="hidden" name="cursor" value={nextCursor} />
+                <button type="submit">Load more</button>
+              </form>
+            </div>
+          )}
+        </>
+      ) : (
+        <EmptyState message={searchQuery ? `No books found for "${searchQuery}"` : "No books available"} />
+      )}
+    </>
+  );
+}

apps/backoffice/app/components/BookCard.tsx

@@ -0,0 +1,70 @@
+import Image from "next/image";
+import Link from "next/link";
+import { BookDto } from "../../lib/api";
+
+interface BookCardProps {
+  book: BookDto;
+  getBookCoverUrl: (bookId: string) => string;
+}
+
+export function BookCard({ book, getBookCoverUrl }: BookCardProps) {
+  return (
+    <Link href={`/books/${book.id}`} className="book-card">
+      <div className="book-cover">
+        <Image
+          src={getBookCoverUrl(book.id)}
+          alt={`Cover of ${book.title}`}
+          width={150}
+          height={220}
+          className="cover-image"
+          unoptimized
+        />
+      </div>
+      <div className="book-info">
+        <h3 className="book-title" title={book.title}>
+          {book.title}
+        </h3>
+        {book.author && (
+          <p className="book-author">{book.author}</p>
+        )}
+        {book.series && (
+          <p className="book-series">
+            {book.series}
+            {book.volume && ` #${book.volume}`}
+          </p>
+        )}
+        <div className="book-meta">
+          <span className={`book-kind ${book.kind}`}>{book.kind.toUpperCase()}</span>
+          {book.language && <span className="book-lang">{book.language.toUpperCase()}</span>}
+        </div>
+      </div>
+    </Link>
+  );
+}
+
+interface BooksGridProps {
+  books: BookDto[];
+  getBookCoverUrl: (bookId: string) => string;
+}
+
+export function BooksGrid({ books, getBookCoverUrl }: BooksGridProps) {
+  return (
+    <div className="books-grid">
+      {books.map((book) => (
+        <BookCard key={book.id} book={book} getBookCoverUrl={getBookCoverUrl} />
+      ))}
+    </div>
+  );
+}
+
+interface EmptyStateProps {
+  message: string;
+}
+
+export function EmptyState({ message }: EmptyStateProps) {
+  return (
+    <div className="empty-state">
+      <p>{message}</p>
+    </div>
+  );
+}

apps/backoffice/app/globals.css

@@ -303,3 +303,406 @@ button:hover {
     padding: 18px 14px 30px;
   }
 }
+
+/* Books page styles */
+.search-form {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+.search-input {
+  flex: 1;
+  min-width: 200px;
+}
+
+.results-info {
+  color: var(--text-muted);
+  margin: 16px 0;
+  font-size: 0.95rem;
+}
+
+.books-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
+  gap: 24px;
+  margin: 24px 0;
+}
+
+.book-card {
+  display: flex;
+  flex-direction: column;
+  text-decoration: none;
+  color: var(--foreground);
+  background: var(--card);
+  border: 1px solid var(--line);
+  border-radius: 12px;
+  overflow: hidden;
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+  box-shadow: var(--shadow-1);
+}
+
+.book-card:hover {
+  transform: translateY(-4px);
+  box-shadow: var(--shadow-2);
+}
+
+.book-cover {
+  position: relative;
+  aspect-ratio: 2/3;
+  background: linear-gradient(135deg, hsl(36 24% 93%), hsl(36 24% 88%));
+  overflow: hidden;
+}
+
+.cover-image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.book-info {
+  padding: 12px;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.book-title {
+  font-size: 0.95rem;
+  font-weight: 700;
+  margin: 0;
+  line-height: 1.3;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  font-family: "Avenir Next", "Segoe UI", sans-serif;
+  letter-spacing: normal;
+}
+
+.book-author {
+  font-size: 0.85rem;
+  color: var(--text-muted);
+  margin: 0;
+}
+
+.book-series {
+  font-size: 0.8rem;
+  color: var(--primary);
+  margin: 0;
+}
+
+.book-meta {
+  display: flex;
+  gap: 8px;
+  margin-top: auto;
+  padding-top: 8px;
+}
+
+.book-kind {
+  font-size: 0.7rem;
+  padding: 2px 6px;
+  border-radius: 4px;
+  font-weight: 700;
+  background: hsl(198 52% 90%);
+  color: hsl(198 78% 37%);
+}
+
+.book-kind.cbz {
+  background: hsl(142 60% 90%);
+  color: hsl(142 60% 35%);
+}
+
+.book-kind.cbr {
+  background: hsl(45 93% 90%);
+  color: hsl(45 93% 35%);
+}
+
+.book-kind.pdf {
+  background: hsl(2 72% 90%);
+  color: hsl(2 72% 45%);
+}
+
+.book-lang {
+  font-size: 0.7rem;
+  padding: 2px 6px;
+  border-radius: 4px;
+  background: var(--line);
+  color: var(--text-muted);
+}
+
+.pagination {
+  display: flex;
+  justify-content: center;
+  margin: 32px 0;
+}
+
+.empty-state {
+  text-align: center;
+  padding: 48px 24px;
+  color: var(--text-muted);
+}
+
+/* Book detail page */
+.breadcrumb {
+  margin-bottom: 24px;
+}
+
+.breadcrumb a {
+  color: var(--text-muted);
+  font-size: 0.9rem;
+}
+
+.breadcrumb a:hover {
+  color: var(--primary);
+}
+
+.book-detail {
+  display: grid;
+  grid-template-columns: 300px 1fr;
+  gap: 32px;
+  align-items: start;
+}
+
+@media (max-width: 720px) {
+  .book-detail {
+    grid-template-columns: 1fr;
+  }
+}
+
+.book-detail-cover {
+  border-radius: 12px;
+  overflow: hidden;
+  box-shadow: var(--shadow-2);
+}
+
+.detail-cover-image {
+  width: 100%;
+  height: auto;
+  display: block;
+}
+
+.book-detail-info h1 {
+  margin: 0 0 16px 0;
+  font-size: 1.8rem;
+  line-height: 1.2;
+}
+
+.detail-author {
+  font-size: 1.1rem;
+  color: var(--text-muted);
+  margin: 0 0 16px 0;
+}
+
+.detail-series {
+  font-size: 1rem;
+  color: var(--primary);
+  margin: 0 0 24px 0;
+}
+
+.detail-series .volume {
+  margin-left: 12px;
+  padding: 4px 10px;
+  background: var(--primary-soft);
+  border-radius: 6px;
+  font-size: 0.85rem;
+  color: var(--foreground);
+}
+
+.detail-meta {
+  background: var(--card);
+  border: 1px solid var(--line);
+  border-radius: 12px;
+  padding: 20px;
+  box-shadow: var(--shadow-1);
+}
+
+.meta-row {
+  display: flex;
+  gap: 12px;
+  padding: 8px 0;
+  border-bottom: 1px solid var(--line);
+}
+
+.meta-row:last-child {
+  border-bottom: none;
+}
+
+.meta-label {
+  font-weight: 700;
+  color: var(--text-muted);
+  min-width: 100px;
+}
+
+.book-id {
+  font-size: 0.85rem;
+  color: var(--text-muted);
+}
+
+.dark .book-cover {
+  background: linear-gradient(135deg, hsl(221 24% 20%), hsl(221 24% 15%));
+}
+
+.dark .book-kind {
+  background: hsl(198 52% 25%);
+  color: hsl(198 78% 75%);
+}
+
+.dark .book-kind.cbz {
+  background: hsl(142 60% 25%);
+  color: hsl(142 60% 65%);
+}
+
+.dark .book-kind.cbr {
+  background: hsl(45 93% 25%);
+  color: hsl(45 93% 65%);
+}
+
+.dark .book-kind.pdf {
+  background: hsl(2 72% 25%);
+  color: hsl(2 72% 65%);
+}
+
+/* Library info styles */
+.library-info {
+  background: var(--card);
+  border: 1px solid var(--line);
+  border-radius: 12px;
+  padding: 16px 20px;
+  margin: 16px 0 24px 0;
+  box-shadow: var(--shadow-1);
+}
+
+.library-info p {
+  margin: 0;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+
+.library-info code {
+  font-size: 0.9rem;
+}
+
+.library-info .separator {
+  color: var(--line-strong);
+  font-weight: 300;
+}
+
+.status-enabled {
+  color: hsl(142 60% 45%);
+  font-weight: 700;
+}
+
+.status-disabled {
+  color: hsl(220 13% 40%);
+  font-weight: 700;
+}
+
+.book-count-link {
+  color: var(--primary);
+  text-decoration: none;
+  font-weight: 700;
+  padding: 2px 8px;
+  border-radius: 6px;
+  transition: background 0.2s ease;
+}
+
+.book-count-link:hover {
+  background: var(--primary-soft);
+}
+
+.series-count-link {
+  color: var(--primary);
+  text-decoration: none;
+  font-weight: 700;
+  padding: 2px 8px;
+  border-radius: 6px;
+  transition: background 0.2s ease;
+}
+
+.series-count-link:hover {
+  background: var(--primary-soft);
+}
+
+.dark .status-enabled {
+  color: hsl(142 60% 65%);
+}
+
+.dark .status-disabled {
+  color: hsl(218 17% 72%);
+}
+
+/* Series grid styles */
+.series-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
+  gap: 24px;
+  margin: 24px 0;
+}
+
+.series-card {
+  display: flex;
+  flex-direction: column;
+  text-decoration: none;
+  color: var(--foreground);
+  background: var(--card);
+  border: 1px solid var(--line);
+  border-radius: 12px;
+  overflow: hidden;
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+  box-shadow: var(--shadow-1);
+}
+
+.series-card:hover {
+  transform: translateY(-4px);
+  box-shadow: var(--shadow-2);
+}
+
+.series-cover {
+  position: relative;
+  aspect-ratio: 2/3;
+  background: linear-gradient(135deg, hsl(36 24% 93%), hsl(36 24% 88%));
+  overflow: hidden;
+}
+
+.series-cover-image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.series-info {
+  padding: 12px;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.series-name {
+  font-size: 0.95rem;
+  font-weight: 700;
+  margin: 0;
+  line-height: 1.3;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  font-family: "Avenir Next", "Segoe UI", sans-serif;
+  letter-spacing: normal;
+}
+
+.series-count {
+  font-size: 0.85rem;
+  color: var(--text-muted);
+  margin: 0;
+  margin-top: auto;
+}
+
+.dark .series-cover {
+  background: linear-gradient(135deg, hsl(221 24% 20%), hsl(221 24% 15%));
+}

apps/backoffice/app/layout.tsx

@@ -25,6 +25,7 @@ export default function RootLayout({ children }: { children: ReactNode }) {
             <div className="links-wrap">
               <div className="links">
                 <Link href="/">Dashboard</Link>
+                <Link href="/books">Books</Link>
                 <Link href="/libraries">Libraries</Link>
                 <Link href="/jobs">Jobs</Link>
                 <Link href="/tokens">Tokens</Link>

apps/backoffice/lib/api.ts

@@ -30,6 +30,47 @@ export type FolderItem = {
   path: string;
 };
 
+export type BookDto = {
+  id: string;
+  library_id: string;
+  kind: string;
+  title: string;
+  author: string | null;
+  series: string | null;
+  volume: string | null;
+  language: string | null;
+  page_count: number | null;
+  updated_at: string;
+};
+
+export type BooksPageDto = {
+  items: BookDto[];
+  next_cursor: string | null;
+};
+
+export type SearchHitDto = {
+  id: string;
+  library_id: string;
+  title: string;
+  author: string | null;
+  series: string | null;
+  volume: string | null;
+  kind: string;
+  language: string | null;
+};
+
+export type SearchResponseDto = {
+  hits: SearchHitDto[];
+  estimated_total_hits: number | null;
+  processing_time_ms: number | null;
+};
+
+export type SeriesDto = {
+  name: string;
+  book_count: number;
+  first_book_id: string;
+};
+
 function config() {
   const baseUrl = process.env.API_BASE_URL || "http://api:8080";
   const token = process.env.API_BOOTSTRAP_TOKEN;
@@ -113,3 +154,32 @@ export async function createToken(name: string, scope: string) {
 export async function revokeToken(id: string) {
   return apiFetch<void>(`/admin/tokens/${id}`, { method: "DELETE" });
 }
+
+export async function fetchBooks(libraryId?: string, series?: string, cursor?: string, limit: number = 50): Promise<BooksPageDto> {
+  const params = new URLSearchParams();
+  if (libraryId) params.set("library_id", libraryId);
+  if (series) params.set("series", series);
+  if (cursor) params.set("cursor", cursor);
+  params.set("limit", limit.toString());
+  
+  return apiFetch<BooksPageDto>(`/books?${params.toString()}`);
+}
+
+export async function fetchSeries(libraryId: string): Promise<SeriesDto[]> {
+  return apiFetch<SeriesDto[]>(`/libraries/${libraryId}/series`);
+}
+
+export async function searchBooks(query: string, libraryId?: string, limit: number = 20): Promise<SearchResponseDto> {
+  const params = new URLSearchParams();
+  params.set("q", query);
+  if (libraryId) params.set("library_id", libraryId);
+  params.set("limit", limit.toString());
+  
+  return apiFetch<SearchResponseDto>(`/search?${params.toString()}`);
+}
+
+export function getBookCoverUrl(bookId: string): string {
+  // Utiliser une route API locale pour éviter les problèmes CORS
+  // Le navigateur ne peut pas accéder à http://api:8080 (hostname Docker interne)
+  return `/api/books/${bookId}/pages/1?format=webp&width=200`;
+}