feat: add isCompact prop to SeriesList, BookList, and their items for improved layout options

src/components/library/PaginatedSeriesGrid.tsx

@@ -122,7 +122,7 @@ export function PaginatedSeriesGrid({
           <div className="flex items-center justify-end gap-2">
             <PageSizeSelect onSizeChange={handlePageSizeChange} />
             <ViewModeButton />
-            {viewMode === "grid" && <CompactModeButton />}
+            <CompactModeButton />
             <UnreadFilterButton showOnlyUnread={showOnlyUnread} onToggle={handleUnreadFilter} />
           </div>
         </div>
@@ -131,7 +131,7 @@ export function PaginatedSeriesGrid({
       {viewMode === "grid" ? (
         <SeriesGrid series={series} isCompact={isCompact} />
       ) : (
-        <SeriesList series={series} />
+        <SeriesList series={series} isCompact={isCompact} />
       )}
 
       <div className="flex flex-col items-center gap-4 sm:flex-row sm:justify-between">

src/components/library/SeriesList.tsx

@@ -11,10 +11,12 @@ import { formatDate } from "@/lib/utils";
 
 interface SeriesListProps {
   series: KomgaSeries[];
+  isCompact?: boolean;
 }
 
 interface SeriesListItemProps {
   series: KomgaSeries;
+  isCompact?: boolean;
 }
 
 // Utility function to get reading status info
@@ -49,7 +51,7 @@ const getReadingStatusInfo = (series: KomgaSeries, t: (key: string, options?: an
   };
 };
 
-function SeriesListItem({ series }: SeriesListItemProps) {
+function SeriesListItem({ series, isCompact = false }: SeriesListItemProps) {
   const router = useRouter();
   const { t } = useTranslate();
 
@@ -64,6 +66,60 @@ function SeriesListItem({ series }: SeriesListItemProps) {
 
   const statusInfo = getReadingStatusInfo(series, t);
 
+  if (isCompact) {
+    return (
+      <div
+        className={cn(
+          "group relative flex gap-3 p-2 rounded-lg border bg-card hover:bg-accent/50 transition-colors cursor-pointer",
+          isCompleted && "opacity-75"
+        )}
+        onClick={handleClick}
+      >
+        {/* Couverture compacte */}
+        <div className="relative w-12 h-16 sm:w-14 sm:h-20 flex-shrink-0 rounded overflow-hidden bg-muted">
+          <SeriesCover
+            series={series}
+            alt={t("series.coverAlt", { title: series.metadata.title })}
+            className="w-full h-full"
+          />
+        </div>
+
+        {/* Contenu compact */}
+        <div className="flex-1 min-w-0 flex flex-col gap-1 justify-center">
+          {/* Titre et statut */}
+          <div className="flex items-center justify-between gap-2">
+            <h3 className="font-medium text-sm sm:text-base line-clamp-1 hover:text-primary transition-colors flex-1 min-w-0">
+              {series.metadata.title}
+            </h3>
+            <span className={cn("px-2 py-0.5 rounded-full text-xs font-medium flex-shrink-0", statusInfo.className)}>
+              {statusInfo.label}
+            </span>
+          </div>
+
+          {/* Métadonnées minimales */}
+          <div className="flex items-center gap-3 text-xs text-muted-foreground">
+            <div className="flex items-center gap-1">
+              <BookOpen className="h-3 w-3" />
+              <span>
+                {series.booksCount === 1 
+                  ? t("series.book", { count: 1 })
+                  : t("series.books", { count: series.booksCount })}
+              </span>
+            </div>
+            {series.booksMetadata?.authors && series.booksMetadata.authors.length > 0 && (
+              <div className="flex items-center gap-1 hidden sm:flex">
+                <User className="h-3 w-3" />
+                <span className="line-clamp-1">
+                  {series.booksMetadata.authors[0].name}
+                </span>
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    );
+  }
+
   return (
     <div
       className={cn(
@@ -171,7 +227,7 @@ function SeriesListItem({ series }: SeriesListItemProps) {
   );
 }
 
-export function SeriesList({ series }: SeriesListProps) {
+export function SeriesList({ series, isCompact = false }: SeriesListProps) {
   const { t } = useTranslate();
 
   if (!series.length) {
@@ -183,9 +239,9 @@ export function SeriesList({ series }: SeriesListProps) {
   }
 
   return (
-    <div className="space-y-2">
+    <div className={cn("space-y-2", isCompact && "space-y-1")}>
       {series.map((seriesItem) => (
-        <SeriesListItem key={seriesItem.id} series={seriesItem} />
+        <SeriesListItem key={seriesItem.id} series={seriesItem} isCompact={isCompact} />
       ))}
     </div>
   );

src/components/series/BookList.tsx

@@ -17,15 +17,17 @@ import { BookOfflineButton } from "@/components/ui/book-offline-button";
 interface BookListProps {
   books: KomgaBook[];
   onBookClick: (book: KomgaBook) => void;
+  isCompact?: boolean;
 }
 
 interface BookListItemProps {
   book: KomgaBook;
   onBookClick: (book: KomgaBook) => void;
   onSuccess: (book: KomgaBook, action: "read" | "unread") => void;
+  isCompact?: boolean;
 }
 
-function BookListItem({ book, onBookClick, onSuccess }: BookListItemProps) {
+function BookListItem({ book, onBookClick, onSuccess, isCompact = false }: BookListItemProps) {
   const { t } = useTranslate();
   const { isAccessible } = useBookOfflineStatus(book.id);
 
@@ -78,6 +80,74 @@ function BookListItem({ book, onBookClick, onSuccess }: BookListItemProps) {
       ? t("navigation.volume", { number: book.metadata.number })
       : book.name);
 
+  if (isCompact) {
+    return (
+      <div
+        className={cn(
+          "group relative flex gap-3 p-2 rounded-lg border bg-card hover:bg-accent/50 transition-colors",
+          !isAccessible && "opacity-60"
+        )}
+      >
+        {/* Couverture compacte */}
+        <div
+          className={cn(
+            "relative w-12 h-16 sm:w-14 sm:h-20 flex-shrink-0 rounded overflow-hidden bg-muted",
+            isAccessible && "cursor-pointer"
+          )}
+          onClick={handleClick}
+        >
+          <BookCover
+            book={book}
+            alt={t("books.coverAlt", { title })}
+            showControls={false}
+            showOverlay={false}
+            className="w-full h-full"
+          />
+        </div>
+
+        {/* Contenu compact */}
+        <div className="flex-1 min-w-0 flex flex-col gap-1 justify-center">
+          {/* Titre et statut */}
+          <div className="flex items-center justify-between gap-2">
+            <h3
+              className={cn(
+                "font-medium text-sm sm:text-base line-clamp-1 flex-1 min-w-0",
+                isAccessible && "cursor-pointer hover:text-primary transition-colors"
+              )}
+              onClick={handleClick}
+            >
+              {title}
+            </h3>
+            <span className={cn("px-2 py-0.5 rounded-full text-xs font-medium flex-shrink-0", statusInfo.className)}>
+              {statusInfo.label}
+            </span>
+          </div>
+
+          {/* Métadonnées minimales */}
+          <div className="flex items-center gap-3 text-xs text-muted-foreground">
+            {book.metadata.number && (
+              <span>{t("navigation.volume", { number: book.metadata.number })}</span>
+            )}
+            <div className="flex items-center gap-1">
+              <FileText className="h-3 w-3" />
+              <span>
+                {totalPages} {totalPages > 1 ? t("books.pages_plural") : t("books.pages")}
+              </span>
+            </div>
+            {book.metadata.authors && book.metadata.authors.length > 0 && (
+              <div className="flex items-center gap-1 hidden sm:flex">
+                <User className="h-3 w-3" />
+                <span className="line-clamp-1">
+                  {book.metadata.authors[0].name}
+                </span>
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    );
+  }
+
   return (
     <div
       className={cn(
@@ -211,7 +281,7 @@ function BookListItem({ book, onBookClick, onSuccess }: BookListItemProps) {
   );
 }
 
-export function BookList({ books, onBookClick }: BookListProps) {
+export function BookList({ books, onBookClick, isCompact = false }: BookListProps) {
   const [localBooks, setLocalBooks] = useState(books);
   const { t } = useTranslate();
 
@@ -260,13 +330,14 @@ export function BookList({ books, onBookClick }: BookListProps) {
   };
 
   return (
-    <div className="space-y-2">
+    <div className={cn("space-y-2", isCompact && "space-y-1")}>
       {localBooks.map((book) => (
         <BookListItem
           key={book.id}
           book={book}
           onBookClick={onBookClick}
           onSuccess={handleOnSuccess}
+          isCompact={isCompact}
         />
       ))}
     </div>

src/components/series/PaginatedBookGrid.tsx

@@ -115,7 +115,7 @@ export function PaginatedBookGrid({
         <div className="flex items-center justify-end gap-2">
           <PageSizeSelect onSizeChange={handlePageSizeChange} />
           <ViewModeButton />
-          {viewMode === "grid" && <CompactModeButton />}
+          <CompactModeButton />
           <UnreadFilterButton showOnlyUnread={showOnlyUnread} onToggle={handleUnreadFilter} />
         </div>
       </div>
@@ -123,7 +123,7 @@ export function PaginatedBookGrid({
       {viewMode === "grid" ? (
         <BookGrid books={books} onBookClick={handleBookClick} isCompact={isCompact} />
       ) : (
-        <BookList books={books} onBookClick={handleBookClick} />
+        <BookList books={books} onBookClick={handleBookClick} isCompact={isCompact} />
       )}
 
       <div className="flex flex-col items-center gap-4 sm:flex-row sm:justify-between">