feat: redesign libraries page UI with fan thumbnails and modal settings

- Replace thumbnail mosaic with fan/arc layout using series covers as background
- Move library settings from dropdown to full-page portal modal with sections
- Move FolderPicker modal to portal for proper z-index stacking
- Add descriptions to each setting for better clarity
- Move delete button to card header, compact config tags
- Add i18n keys for new labels and descriptions (en/fr)

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

apps/backoffice/app/libraries/page.tsx

@@ -1,9 +1,11 @@
 import { revalidatePath } from "next/cache";
 import Link from "next/link";
-import { listFolders, createLibrary, deleteLibrary, fetchLibraries, fetchSeries, scanLibrary, startMetadataBatch, LibraryDto, FolderItem } from "../../lib/api";
+import { listFolders, createLibrary, deleteLibrary, fetchLibraries, fetchSeries, getBookCoverUrl, LibraryDto, FolderItem } from "../../lib/api";
+import type { TranslationKey } from "../../lib/i18n/fr";
 import { getServerTranslations } from "../../lib/i18n/server";
 import { LibraryActions } from "../components/LibraryActions";
 import { LibraryForm } from "../components/LibraryForm";
+import { ProviderIcon } from "../components/ProviderIcon";
 import {
   Card, CardHeader, CardTitle, CardDescription, CardContent,
   Button, Badge
@@ -31,18 +33,26 @@ export default async function LibrariesPage() {
     listFolders().catch(() => [] as FolderItem[])
   ]);
 
-  const seriesCounts = await Promise.all(
+  const seriesData = await Promise.all(
     libraries.map(async (lib) => {
       try {
-        const seriesPage = await fetchSeries(lib.id);
-        return { id: lib.id, count: seriesPage.items.length };
+        const seriesPage = await fetchSeries(lib.id, 1, 6);
+        return {
+          id: lib.id,
+          count: seriesPage.total,
+          thumbnails: seriesPage.items
+            .map(s => s.first_book_id)
+            .filter(Boolean)
+            .slice(0, 4)
+            .map(bookId => getBookCoverUrl(bookId)),
+        };
       } catch {
-        return { id: lib.id, count: 0 };
+        return { id: lib.id, count: 0, thumbnails: [] as string[] };
       }
     })
   );
-  
-  const seriesCountMap = new Map(seriesCounts.map(s => [s.id, s.count]));
+
+  const seriesMap = new Map(seriesData.map(s => [s.id, s]));
 
   async function addLibrary(formData: FormData) {
     "use server";
@@ -61,35 +71,6 @@ export default async function LibrariesPage() {
     revalidatePath("/libraries");
   }
 
-  async function scanLibraryAction(formData: FormData) {
-    "use server";
-    const id = formData.get("id") as string;
-    await scanLibrary(id);
-    revalidatePath("/libraries");
-    revalidatePath("/jobs");
-  }
-
-  async function scanLibraryFullAction(formData: FormData) {
-    "use server";
-    const id = formData.get("id") as string;
-    await scanLibrary(id, true);
-    revalidatePath("/libraries");
-    revalidatePath("/jobs");
-  }
-
-  async function batchMetadataAction(formData: FormData) {
-    "use server";
-    const id = formData.get("id") as string;
-    try {
-      await startMetadataBatch(id);
-    } catch {
-      // Library may have metadata disabled — ignore silently
-      return;
-    }
-    revalidatePath("/libraries");
-    revalidatePath("/jobs");
-  }
-
   return (
     <>
       <div className="mb-6">
@@ -100,7 +81,7 @@ export default async function LibrariesPage() {
           {t("libraries.title")}
         </h1>
       </div>
-      
+
       {/* Add Library Form */}
       <Card className="mb-6">
         <CardHeader>
@@ -115,106 +96,136 @@ export default async function LibrariesPage() {
       {/* Libraries Grid */}
       <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
         {libraries.map((lib) => {
-          const seriesCount = seriesCountMap.get(lib.id) || 0;
+          const series = seriesMap.get(lib.id);
+          const seriesCount = series?.count || 0;
+          const thumbnails = series?.thumbnails || [];
           return (
-            <Card key={lib.id} className="flex flex-col">
+            <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">
+                  <img
+                    src={thumbnails[0]}
+                    alt=""
+                    className="absolute inset-0 w-full h-full object-cover blur-xl scale-110 opacity-40"
+                    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 (
+                        <img
+                          key={i}
+                          src={url}
+                          alt=""
+                          className="absolute w-24 h-36 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',
+                          }}
+                          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>
-                  <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}
-                  />
+                  <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">
-                {/* Path */}
-                <code className="text-xs font-mono text-muted-foreground mb-4 break-all block">{lib.root_path}</code>
-
                 {/* Stats */}
-                <div className="grid grid-cols-2 gap-3 mb-4">
-                  <Link 
-                    href={`/libraries/${lib.id}/books`} 
-                    className="text-center p-3 bg-muted/50 rounded-lg hover:bg-accent transition-colors duration-200"
+                <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-3 bg-muted/50 rounded-lg hover:bg-accent transition-colors duration-200"
+                  <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">{seriesCount}</span>
                     <span className="text-xs text-muted-foreground">{t("libraries.series")}</span>
                   </Link>
                 </div>
 
-                {/* Status */}
-                <div className="flex items-center gap-3 mb-4 text-sm">
-                  <span className={`flex items-center gap-1 ${lib.monitor_enabled ? 'text-success' : 'text-muted-foreground'}`}>
-                    {lib.monitor_enabled ? '●' : '○'} {lib.monitor_enabled ? t("libraries.auto") : t("libraries.manual")}
+                {/* 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>
-                  {lib.watcher_enabled && (
-                    <span className="text-warning" title="Surveillance de fichiers active">⚡</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="text-xs text-muted-foreground ml-auto">
+                    <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>
                   )}
-                  {lib.metadata_refresh_mode !== "manual" && lib.next_metadata_refresh_at && (
-                    <span className="text-xs text-muted-foreground ml-auto" title={t("libraries.nextMetadataRefresh", { time: formatNextScan(lib.next_metadata_refresh_at, t("libraries.imminent")) })}>
-                      {t("libraries.nextMetadataRefreshShort", { time: formatNextScan(lib.next_metadata_refresh_at, t("libraries.imminent")) })}
-                    </span>
-                  )}
-                </div>
-
-                {/* Actions */}
-                <div className="flex items-center gap-2">
-                  <form className="flex-1">
-                    <input type="hidden" name="id" value={lib.id} />
-                    <Button type="submit" variant="default" size="sm" className="w-full" formAction={scanLibraryAction}>
-                      <svg className="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
-                      </svg>
-                      {t("libraries.index")}
-                    </Button>
-                  </form>
-                  <form className="flex-1">
-                    <input type="hidden" name="id" value={lib.id} />
-                    <Button type="submit" variant="secondary" size="sm" className="w-full" formAction={scanLibraryFullAction}>
-                      <svg className="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
-                      </svg>
-                      {t("libraries.fullIndex")}
-                    </Button>
-                  </form>
-                  {lib.metadata_provider !== "none" && (
-                    <form>
-                      <input type="hidden" name="id" value={lib.id} />
-                      <Button type="submit" variant="secondary" size="sm" formAction={batchMetadataAction} title={t("libraries.batchMetadata")}>
-                        <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
-                        </svg>
-                      </Button>
-                    </form>
-                  )}
-                  <form>
-                    <input type="hidden" name="id" value={lib.id} />
-                    <Button type="submit" variant="destructive" size="sm" formAction={removeLibrary}>
-                      <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>
               </CardContent>
             </Card>