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

2025-11-16 08:12:44 +01:00
parent df3c386199
commit 2c839260a4
4 changed files with 138 additions and 11 deletions
--- a/src/components/library/PaginatedSeriesGrid.tsx
+++ b/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">
--- a/src/components/library/SeriesList.tsx
+++ b/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>
  );
--- a/src/components/series/BookList.tsx
+++ b/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>
--- a/src/components/series/PaginatedBookGrid.tsx
+++ b/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">