feat: add backoffice authentication with login page

- Add login page with logo background, glassmorphism card
- Add session management via JWT (jose) with httpOnly cookie
- Add Next.js proxy middleware to protect all routes
- Add logout button in nav
- Restructure app into (app) route group to isolate login layout
- Add ADMIN_USERNAME, ADMIN_PASSWORD, SESSION_SECRET env vars

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

apps/backoffice/app/(app)/libraries/[id]/books/page.tsx

@@ -0,0 +1,80 @@
+import { fetchLibraries, fetchBooks, getBookCoverUrl, LibraryDto, BookDto } from "@/lib/api";
+import { BooksGrid, EmptyState } from "@/app/components/BookCard";
+import { LibrarySubPageHeader } from "@/app/components/LibrarySubPageHeader";
+import { OffsetPagination } from "@/app/components/ui";
+import { notFound } from "next/navigation";
+import { getServerTranslations } from "@/lib/i18n/server";
+
+export const dynamic = "force-dynamic";
+
+export default async function LibraryBooksPage({
+  params,
+  searchParams
+}: {
+  params: Promise<{ id: string }>;
+  searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
+}) {
+  const { id } = await params;
+  const { t } = await getServerTranslations();
+  const searchParamsAwaited = await searchParams;
+  const page = typeof searchParamsAwaited.page === "string" ? parseInt(searchParamsAwaited.page) : 1;
+  const series = typeof searchParamsAwaited.series === "string" ? searchParamsAwaited.series : undefined;
+  const limit = typeof searchParamsAwaited.limit === "string" ? parseInt(searchParamsAwaited.limit) : 20;
+
+  const [library, booksPage] = await Promise.all([
+    fetchLibraries().then(libs => libs.find(l => l.id === id)),
+    fetchBooks(id, series, page, limit).catch(() => ({
+      items: [] as BookDto[],
+      total: 0,
+      page: 1,
+      limit,
+    }))
+  ]);
+
+  if (!library) {
+    notFound();
+  }
+
+  const books = booksPage.items.map(book => ({
+    ...book,
+    coverUrl: getBookCoverUrl(book.id)
+  }));
+
+  const seriesDisplayName = series === "unclassified" ? t("books.unclassified") : (series ?? "");
+  const totalPages = Math.ceil(booksPage.total / limit);
+
+  return (
+    <div className="space-y-6">
+      <LibrarySubPageHeader
+        library={library}
+        title={series ? t("libraryBooks.booksOfSeries", { series: seriesDisplayName }) : t("libraryBooks.allBooks")}
+        icon={
+          <svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
+          </svg>
+        }
+        iconColor="text-success"
+        filterInfo={series ? {
+          label: t("libraryBooks.filterLabel", { series: seriesDisplayName }),
+          clearHref: `/libraries/${id}/books`,
+          clearLabel: t("libraryBooks.viewAll")
+        } : undefined}
+      />
+
+      {books.length > 0 ? (
+        <>
+          <BooksGrid books={books} />
+          
+          <OffsetPagination
+            currentPage={page}
+            totalPages={totalPages}
+            pageSize={limit}
+            totalItems={booksPage.total}
+          />
+        </>
+      ) : (
+        <EmptyState message={series ? t("libraryBooks.noBooksInSeries", { series: seriesDisplayName }) : t("libraryBooks.noBooks")} />
+      )}
+    </div>
+  );
+}

apps/backoffice/app/(app)/libraries/[id]/series/[name]/page.tsx

@@ -0,0 +1,229 @@
+import { fetchLibraries, fetchBooks, fetchSeriesMetadata, getBookCoverUrl, getMetadataLink, getMissingBooks, BookDto, SeriesMetadataDto, ExternalMetadataLinkDto, MissingBooksDto } from "@/lib/api";
+import { BooksGrid, EmptyState } from "@/app/components/BookCard";
+import { MarkSeriesReadButton } from "@/app/components/MarkSeriesReadButton";
+import { MarkBookReadButton } from "@/app/components/MarkBookReadButton";
+import nextDynamic from "next/dynamic";
+import { OffsetPagination } from "@/app/components/ui";
+import { SafeHtml } from "@/app/components/SafeHtml";
+import Image from "next/image";
+import Link from "next/link";
+
+const EditSeriesForm = nextDynamic(
+  () => import("@/app/components/EditSeriesForm").then(m => m.EditSeriesForm)
+);
+const MetadataSearchModal = nextDynamic(
+  () => import("@/app/components/MetadataSearchModal").then(m => m.MetadataSearchModal)
+);
+const ProwlarrSearchModal = nextDynamic(
+  () => import("@/app/components/ProwlarrSearchModal").then(m => m.ProwlarrSearchModal)
+);
+import { notFound } from "next/navigation";
+import { getServerTranslations } from "@/lib/i18n/server";
+
+export const dynamic = "force-dynamic";
+
+export default async function SeriesDetailPage({
+  params,
+  searchParams,
+}: {
+  params: Promise<{ id: string; name: string }>;
+  searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
+}) {
+  const { id, name } = await params;
+  const { t } = await getServerTranslations();
+  const searchParamsAwaited = await searchParams;
+  const page = typeof searchParamsAwaited.page === "string" ? parseInt(searchParamsAwaited.page) : 1;
+  const limit = typeof searchParamsAwaited.limit === "string" ? parseInt(searchParamsAwaited.limit) : 50;
+
+  const seriesName = decodeURIComponent(name);
+
+  const [library, booksPage, seriesMeta, metadataLinks] = await Promise.all([
+    fetchLibraries().then((libs) => libs.find((l) => l.id === id)),
+    fetchBooks(id, seriesName, page, limit).catch(() => ({
+      items: [] as BookDto[],
+      total: 0,
+      page: 1,
+      limit,
+    })),
+    fetchSeriesMetadata(id, seriesName).catch(() => null as SeriesMetadataDto | null),
+    getMetadataLink(id, seriesName).catch(() => [] as ExternalMetadataLinkDto[]),
+  ]);
+
+  const existingLink = metadataLinks.find((l) => l.status === "approved") ?? metadataLinks[0] ?? null;
+  let missingData: MissingBooksDto | null = null;
+  if (existingLink && existingLink.status === "approved") {
+    missingData = await getMissingBooks(existingLink.id).catch(() => null);
+  }
+
+  if (!library) {
+    notFound();
+  }
+
+  const books = booksPage.items.map((book) => ({
+    ...book,
+    coverUrl: getBookCoverUrl(book.id),
+  }));
+
+  const totalPages = Math.ceil(booksPage.total / limit);
+  const booksReadCount = booksPage.items.filter((b) => b.reading_status === "read").length;
+  const displayName = seriesName === "unclassified" ? t("books.unclassified") : seriesName;
+
+  // Use first book cover as series cover
+  const coverBookId = booksPage.items[0]?.id;
+
+  return (
+    <div className="space-y-6">
+      {/* Breadcrumb */}
+      <div className="flex items-center gap-2 text-sm">
+        <Link
+          href="/libraries"
+          className="text-muted-foreground hover:text-primary transition-colors"
+        >
+          {t("nav.libraries")}
+        </Link>
+        <span className="text-muted-foreground">/</span>
+        <Link
+          href={`/libraries/${id}/series`}
+          className="text-muted-foreground hover:text-primary transition-colors"
+        >
+          {library.name}
+        </Link>
+        <span className="text-muted-foreground">/</span>
+        <span className="text-foreground font-medium">{displayName}</span>
+      </div>
+
+      {/* Series Header */}
+      <div className="flex flex-col sm:flex-row gap-6">
+        {coverBookId && (
+          <div className="flex-shrink-0">
+            <div className="w-40 aspect-[2/3] relative rounded-xl overflow-hidden shadow-card border border-border">
+              <Image
+                src={getBookCoverUrl(coverBookId)}
+                alt={t("books.coverOf", { name: displayName })}
+                fill
+                className="object-cover"
+                sizes="160px"
+              />
+            </div>
+          </div>
+        )}
+
+        <div className="flex-1 space-y-4">
+          <h1 className="text-3xl font-bold text-foreground">{displayName}</h1>
+
+          <div className="flex flex-wrap items-center gap-3">
+            {seriesMeta && seriesMeta.authors.length > 0 && (
+              <p className="text-base text-muted-foreground">{seriesMeta.authors.join(", ")}</p>
+            )}
+            {seriesMeta?.status && (
+              <span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${
+                seriesMeta.status === "ongoing" ? "bg-blue-500/15 text-blue-600" :
+                seriesMeta.status === "ended" ? "bg-green-500/15 text-green-600" :
+                seriesMeta.status === "hiatus" ? "bg-amber-500/15 text-amber-600" :
+                seriesMeta.status === "cancelled" ? "bg-red-500/15 text-red-600" :
+                "bg-muted text-muted-foreground"
+              }`}>
+                {t(`seriesStatus.${seriesMeta.status}` as any) || seriesMeta.status}
+              </span>
+            )}
+          </div>
+
+          {seriesMeta?.description && (
+            <SafeHtml html={seriesMeta.description} className="text-sm text-muted-foreground leading-relaxed" />
+          )}
+
+          <div className="flex flex-wrap items-center gap-4 text-sm">
+            {seriesMeta && seriesMeta.publishers.length > 0 && (
+              <span className="text-muted-foreground">
+                <span className="font-semibold text-foreground">{seriesMeta.publishers.join(", ")}</span>
+              </span>
+            )}
+            {seriesMeta?.start_year && (
+              <span className="text-muted-foreground">{seriesMeta.start_year}</span>
+            )}
+            {((seriesMeta && seriesMeta.publishers.length > 0) || seriesMeta?.start_year) && <span className="w-px h-4 bg-border" />}
+            <span className="text-muted-foreground">
+              <span className="font-semibold text-foreground">{booksPage.total}</span> {t("dashboard.books").toLowerCase()}
+            </span>
+            <span className="w-px h-4 bg-border" />
+            <span className="text-muted-foreground">
+              {t("series.readCount", { read: String(booksReadCount), total: String(booksPage.total), plural: booksPage.total !== 1 ? "s" : "" })}
+            </span>
+
+            {/* Reading progress bar */}
+            <div className="flex items-center gap-2 flex-1 min-w-[120px] max-w-[200px]">
+              <div className="flex-1 h-2 bg-muted rounded-full overflow-hidden">
+                <div
+                  className="h-full bg-green-500 rounded-full transition-all"
+                  style={{ width: `${booksPage.total > 0 ? (booksReadCount / booksPage.total) * 100 : 0}%` }}
+                />
+              </div>
+            </div>
+
+            {/* Collection progress bar (owned / expected) */}
+            {missingData && missingData.total_external > 0 && (
+              <>
+                <span className="w-px h-4 bg-border" />
+                <span className="text-muted-foreground">
+                  {booksPage.total}/{missingData.total_external} — {t("series.missingCount", { count: missingData.missing_count, plural: missingData.missing_count !== 1 ? "s" : "" })}
+                </span>
+                <div className="w-[150px] h-2 bg-muted rounded-full overflow-hidden">
+                  <div
+                    className="h-full bg-amber-500 rounded-full transition-all"
+                    style={{ width: `${Math.round((booksPage.total / missingData.total_external) * 100)}%` }}
+                  />
+                </div>
+              </>
+            )}
+          </div>
+
+          <div className="flex flex-wrap items-center gap-3">
+            <MarkSeriesReadButton
+              seriesName={seriesName}
+              bookCount={booksPage.total}
+              booksReadCount={booksReadCount}
+            />
+            <EditSeriesForm
+              libraryId={id}
+              seriesName={seriesName}
+              currentAuthors={seriesMeta?.authors ?? []}
+              currentPublishers={seriesMeta?.publishers ?? []}
+              currentBookAuthor={seriesMeta?.book_author ?? booksPage.items[0]?.author ?? null}
+              currentBookLanguage={seriesMeta?.book_language ?? booksPage.items[0]?.language ?? null}
+              currentDescription={seriesMeta?.description ?? null}
+              currentStartYear={seriesMeta?.start_year ?? null}
+              currentTotalVolumes={seriesMeta?.total_volumes ?? null}
+              currentStatus={seriesMeta?.status ?? null}
+              currentLockedFields={seriesMeta?.locked_fields ?? {}}
+            />
+            <ProwlarrSearchModal
+              seriesName={seriesName}
+              missingBooks={missingData?.missing_books ?? null}
+            />
+            <MetadataSearchModal
+              libraryId={id}
+              seriesName={seriesName}
+              existingLink={existingLink}
+              initialMissing={missingData}
+            />
+          </div>
+        </div>
+      </div>
+
+      {/* Books Grid */}
+      {books.length > 0 ? (
+        <>
+          <BooksGrid books={books} />
+          <OffsetPagination
+            currentPage={page}
+            totalPages={totalPages}
+            pageSize={limit}
+            totalItems={booksPage.total}
+          />
+        </>
+      ) : (
+        <EmptyState message={t("librarySeries.noBooksInSeries")} />
+      )}
+    </div>
+  );
+}

apps/backoffice/app/(app)/libraries/[id]/series/page.tsx

@@ -0,0 +1,144 @@
+import { fetchLibraries, fetchSeries, fetchSeriesStatuses, getBookCoverUrl, LibraryDto, SeriesDto, SeriesPageDto } from "@/lib/api";
+import { OffsetPagination } from "@/app/components/ui";
+import { MarkSeriesReadButton } from "@/app/components/MarkSeriesReadButton";
+import { SeriesFilters } from "@/app/components/SeriesFilters";
+import Image from "next/image";
+import Link from "next/link";
+import { notFound } from "next/navigation";
+import { LibrarySubPageHeader } from "@/app/components/LibrarySubPageHeader";
+import { getServerTranslations } from "@/lib/i18n/server";
+
+export const dynamic = "force-dynamic";
+
+export default async function LibrarySeriesPage({
+  params,
+  searchParams
+}: {
+  params: Promise<{ id: string }>;
+  searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
+}) {
+  const { id } = await params;
+  const { t } = await getServerTranslations();
+  const searchParamsAwaited = await searchParams;
+  const page = typeof searchParamsAwaited.page === "string" ? parseInt(searchParamsAwaited.page) : 1;
+  const limit = typeof searchParamsAwaited.limit === "string" ? parseInt(searchParamsAwaited.limit) : 20;
+  const seriesStatus = typeof searchParamsAwaited.series_status === "string" ? searchParamsAwaited.series_status : undefined;
+  const hasMissing = searchParamsAwaited.has_missing === "true";
+
+  const [library, seriesPage, dbStatuses] = await Promise.all([
+    fetchLibraries().then(libs => libs.find(l => l.id === id)),
+    fetchSeries(id, page, limit, seriesStatus, hasMissing).catch(() => ({ items: [] as SeriesDto[], total: 0, page: 1, limit }) as SeriesPageDto),
+    fetchSeriesStatuses().catch(() => [] as string[]),
+  ]);
+
+  if (!library) {
+    notFound();
+  }
+
+  const series = seriesPage.items;
+  const totalPages = Math.ceil(seriesPage.total / limit);
+
+  const KNOWN_STATUSES: Record<string, string> = {
+    ongoing: t("seriesStatus.ongoing"),
+    ended: t("seriesStatus.ended"),
+    hiatus: t("seriesStatus.hiatus"),
+    cancelled: t("seriesStatus.cancelled"),
+    upcoming: t("seriesStatus.upcoming"),
+  };
+  const seriesStatusOptions = [
+    { value: "", label: t("seriesStatus.allStatuses") },
+    ...dbStatuses.map((s) => ({ value: s, label: KNOWN_STATUSES[s] || s })),
+  ];
+
+  return (
+    <div className="space-y-6">
+      <LibrarySubPageHeader
+        library={library}
+        title={t("series.title")}
+        icon={
+          <svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
+          </svg>
+        }
+        iconColor="text-primary"
+      />
+
+      <SeriesFilters
+        basePath={`/libraries/${id}/series`}
+        currentSeriesStatus={seriesStatus}
+        currentHasMissing={hasMissing}
+        seriesStatusOptions={seriesStatusOptions}
+      />
+
+      {series.length > 0 ? (
+        <>
+          <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-6">
+            {series.map((s) => (
+              <Link
+                key={s.name}
+                href={`/libraries/${id}/series/${encodeURIComponent(s.name)}`}
+                className="group"
+              >
+                <div className={`bg-card rounded-xl shadow-sm border border-border/60 overflow-hidden hover:shadow-md transition-shadow duration-200 ${s.books_read_count >= s.book_count ? "opacity-50" : ""}`}>
+                  <div className="aspect-[2/3] relative bg-muted/50">
+                    <Image
+                      src={getBookCoverUrl(s.first_book_id)}
+                      alt={t("books.coverOf", { name: s.name })}
+                      fill
+                      className="object-cover"
+                      sizes="(max-width: 640px) 50vw, (max-width: 768px) 33vw, (max-width: 1024px) 25vw, 20vw"
+                    />
+                  </div>
+                  <div className="p-3">
+                    <h3 className="font-medium text-foreground truncate text-sm" title={s.name}>
+                      {s.name === "unclassified" ? t("books.unclassified") : s.name}
+                    </h3>
+                    <div className="flex items-center justify-between mt-1">
+                      <p className="text-xs text-muted-foreground">
+                        {t("series.readCount", { read: String(s.books_read_count), total: String(s.book_count), plural: s.book_count !== 1 ? "s" : "" })}
+                      </p>
+                      <MarkSeriesReadButton
+                        seriesName={s.name}
+                        bookCount={s.book_count}
+                        booksReadCount={s.books_read_count}
+                      />
+                    </div>
+                    <div className="flex items-center gap-1 mt-1.5 flex-wrap">
+                      {s.series_status && (
+                        <span className={`text-[10px] px-1.5 py-0.5 rounded-full font-medium ${
+                          s.series_status === "ongoing" ? "bg-blue-500/15 text-blue-600" :
+                          s.series_status === "ended" ? "bg-green-500/15 text-green-600" :
+                          s.series_status === "hiatus" ? "bg-amber-500/15 text-amber-600" :
+                          s.series_status === "cancelled" ? "bg-red-500/15 text-red-600" :
+                          "bg-muted text-muted-foreground"
+                        }`}>
+                          {KNOWN_STATUSES[s.series_status] || s.series_status}
+                        </span>
+                      )}
+                      {s.missing_count != null && s.missing_count > 0 && (
+                        <span className="text-[10px] px-1.5 py-0.5 rounded-full font-medium bg-yellow-500/15 text-yellow-600">
+                          {t("series.missingCount", { count: String(s.missing_count) })}
+                        </span>
+                      )}
+                    </div>
+                  </div>
+                </div>
+              </Link>
+            ))}
+          </div>
+          
+          <OffsetPagination
+            currentPage={page}
+            totalPages={totalPages}
+            pageSize={limit}
+            totalItems={seriesPage.total}
+          />
+        </>
+      ) : (
+        <div className="text-center py-12 text-muted-foreground">
+          <p>{t("librarySeries.noSeries")}</p>
+        </div>
+      )}
+    </div>
+  );
+}

apps/backoffice/app/(app)/libraries/page.tsx

@@ -0,0 +1,227 @@
+import { revalidatePath } from "next/cache";
+import Image from "next/image";
+import Link from "next/link";
+import { listFolders, createLibrary, deleteLibrary, fetchLibraries, getBookCoverUrl, LibraryDto, FolderItem } from "@/lib/api";
+import type { TranslationKey } from "@/lib/i18n/fr";
+import { getServerTranslations } from "@/lib/i18n/server";
+import { LibraryActions } from "@/app/components/LibraryActions";
+import { LibraryForm } from "@/app/components/LibraryForm";
+import { ProviderIcon } from "@/app/components/ProviderIcon";
+import {
+  Card, CardHeader, CardTitle, CardDescription, CardContent,
+  Button, Badge
+} from "@/app/components/ui";
+
+export const dynamic = "force-dynamic";
+
+function formatNextScan(nextScanAt: string | null, imminentLabel: string): string {
+  if (!nextScanAt) return "-";
+  const date = new Date(nextScanAt);
+  const now = new Date();
+  const diff = date.getTime() - now.getTime();
+
+  if (diff < 0) return imminentLabel;
+  if (diff < 60000) return "< 1 min";
+  if (diff < 3600000) return `${Math.floor(diff / 60000)}m`;
+  if (diff < 86400000) return `${Math.floor(diff / 3600000)}h`;
+  return `${Math.floor(diff / 86400000)}d`;
+}
+
+export default async function LibrariesPage() {
+  const { t } = await getServerTranslations();
+  const [libraries, folders] = await Promise.all([
+    fetchLibraries().catch(() => [] as LibraryDto[]),
+    listFolders().catch(() => [] as FolderItem[])
+  ]);
+
+  const thumbnailMap = new Map(
+    libraries.map(lib => [
+      lib.id,
+      (lib.thumbnail_book_ids || []).map(bookId => getBookCoverUrl(bookId)),
+    ])
+  );
+
+  async function addLibrary(formData: FormData) {
+    "use server";
+    const name = formData.get("name") as string;
+    const rootPath = formData.get("root_path") as string;
+    if (name && rootPath) {
+      await createLibrary(name, rootPath);
+      revalidatePath("/libraries");
+    }
+  }
+
+  async function removeLibrary(formData: FormData) {
+    "use server";
+    const id = formData.get("id") as string;
+    await deleteLibrary(id);
+    revalidatePath("/libraries");
+  }
+
+  return (
+    <>
+      <div className="mb-6">
+        <h1 className="text-3xl font-bold text-foreground flex items-center gap-3">
+          <svg className="w-8 h-8 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z" />
+          </svg>
+          {t("libraries.title")}
+        </h1>
+      </div>
+
+      {/* Add Library Form */}
+      <Card className="mb-6">
+        <CardHeader>
+          <CardTitle>{t("libraries.addLibrary")}</CardTitle>
+          <CardDescription>{t("libraries.addLibraryDescription")}</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <LibraryForm initialFolders={folders} action={addLibrary} />
+        </CardContent>
+      </Card>
+
+      {/* Libraries Grid */}
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+        {libraries.map((lib) => {
+          const thumbnails = thumbnailMap.get(lib.id) || [];
+          return (
+            <Card key={lib.id} className="flex flex-col overflow-hidden">
+              {/* Thumbnail fan */}
+              {thumbnails.length > 0 ? (
+                <Link href={`/libraries/${lib.id}/series`} className="block relative h-48 overflow-hidden bg-muted/10">
+                  <Image
+                    src={thumbnails[0]}
+                    alt=""
+                    fill
+                    className="object-cover blur-xl scale-110 opacity-40"
+                    sizes="(max-width: 768px) 100vw, 33vw"
+                    loading="lazy"
+                  />
+                  <div className="absolute inset-0 flex items-end justify-center">
+                    {thumbnails.map((url, i) => {
+                      const count = thumbnails.length;
+                      const mid = (count - 1) / 2;
+                      const angle = (i - mid) * 12;
+                      const radius = 220;
+                      const rad = ((angle - 90) * Math.PI) / 180;
+                      const cx = Math.cos(rad) * radius;
+                      const cy = Math.sin(rad) * radius;
+                      return (
+                        <Image
+                          key={i}
+                          src={url}
+                          alt=""
+                          width={96}
+                          height={144}
+                          className="absolute object-cover shadow-lg"
+                          style={{
+                            transform: `translate(${cx}px, ${cy}px) rotate(${angle}deg)`,
+                            transformOrigin: 'bottom center',
+                            zIndex: count - Math.abs(Math.round(i - mid)),
+                            bottom: '-185px',
+                          }}
+                          sizes="96px"
+                          loading="lazy"
+                        />
+                      );
+                    })}
+                  </div>
+                </Link>
+              ) : (
+                <div className="h-8 bg-muted/10" />
+              )}
+
+              <CardHeader className="pb-2">
+                <div className="flex items-start justify-between">
+                  <div>
+                    <CardTitle className="text-lg">{lib.name}</CardTitle>
+                    {!lib.enabled && <Badge variant="muted" className="mt-1">{t("libraries.disabled")}</Badge>}
+                  </div>
+                  <div className="flex items-center gap-1">
+                    <LibraryActions
+                      libraryId={lib.id}
+                      monitorEnabled={lib.monitor_enabled}
+                      scanMode={lib.scan_mode}
+                      watcherEnabled={lib.watcher_enabled}
+                      metadataProvider={lib.metadata_provider}
+                      fallbackMetadataProvider={lib.fallback_metadata_provider}
+                      metadataRefreshMode={lib.metadata_refresh_mode}
+                    />
+                    <form>
+                      <input type="hidden" name="id" value={lib.id} />
+                      <Button type="submit" variant="ghost" size="sm" formAction={removeLibrary} className="text-muted-foreground hover:text-destructive">
+                        <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+                        </svg>
+                      </Button>
+                    </form>
+                  </div>
+                </div>
+                <code className="text-xs font-mono text-muted-foreground break-all">{lib.root_path}</code>
+              </CardHeader>
+              <CardContent className="flex-1 pt-0">
+                {/* Stats */}
+                <div className="grid grid-cols-2 gap-3 mb-3">
+                  <Link
+                    href={`/libraries/${lib.id}/books`}
+                    className="text-center p-2.5 bg-muted/50 rounded-lg hover:bg-accent transition-colors duration-200"
+                  >
+                    <span className="block text-2xl font-bold text-primary">{lib.book_count}</span>
+                    <span className="text-xs text-muted-foreground">{t("libraries.books")}</span>
+                  </Link>
+                  <Link
+                    href={`/libraries/${lib.id}/series`}
+                    className="text-center p-2.5 bg-muted/50 rounded-lg hover:bg-accent transition-colors duration-200"
+                  >
+                    <span className="block text-2xl font-bold text-foreground">{lib.series_count}</span>
+                    <span className="text-xs text-muted-foreground">{t("libraries.series")}</span>
+                  </Link>
+                </div>
+
+                {/* Configuration tags */}
+                <div className="flex flex-wrap gap-1.5">
+                  <span className={`inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[11px] font-medium ${
+                    lib.monitor_enabled
+                      ? 'bg-success/10 text-success'
+                      : 'bg-muted/50 text-muted-foreground'
+                  }`}>
+                    <span className="text-[9px]">{lib.monitor_enabled ? '●' : '○'}</span>
+                    {t("libraries.scanLabel", { mode: t(`monitoring.${lib.scan_mode}` as TranslationKey) })}
+                  </span>
+
+                  <span className={`inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[11px] font-medium ${
+                    lib.watcher_enabled
+                      ? 'bg-warning/10 text-warning'
+                      : 'bg-muted/50 text-muted-foreground'
+                  }`}>
+                    <span>{lib.watcher_enabled ? '⚡' : '○'}</span>
+                    <span>{t("libraries.watcherLabel")}</span>
+                  </span>
+
+                  {lib.metadata_provider && lib.metadata_provider !== "none" && (
+                    <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[11px] font-medium bg-primary/10 text-primary">
+                      <ProviderIcon provider={lib.metadata_provider} size={11} />
+                      {lib.metadata_provider.replace('_', ' ')}
+                    </span>
+                  )}
+
+                  {lib.metadata_refresh_mode !== "manual" && (
+                    <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[11px] font-medium bg-muted/50 text-muted-foreground">
+                      {t("libraries.metaRefreshLabel", { mode: t(`monitoring.${lib.metadata_refresh_mode}` as TranslationKey) })}
+                    </span>
+                  )}
+
+                  {lib.monitor_enabled && lib.next_scan_at && (
+                    <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[11px] font-medium bg-muted/50 text-muted-foreground">
+                      {t("libraries.nextScan", { time: formatNextScan(lib.next_scan_at, t("libraries.imminent")) })}
+                    </span>
+                  )}
+                </div>
+              </CardContent>
+            </Card>
+          );
+        })}
+      </div>
+    </>
+  );
+}