@itsmrtr/bunkoshelf 1.10.3 → 1.11.1

package/dist/src/app/[lang]/books/series/page.tsx

@@ -7,12 +7,22 @@ function GridSkeleton() {
   return <div className="grid grid-cols-2 gap-4 md:grid-cols-5 2xl:grid-cols-7">{Array.from({ length: 14 }).map((_, index) => <div key={index} className="aspect-[3/5] animate-pulse rounded-lg bg-sand" />)}</div>;
 }
 
-async function BookSeriesIndexContent({ params }: { params: Promise<{ lang: string }> }) {
+async function BookSeriesIndexContent({
+  params,
+  searchParams,
+}: {
+  params: Promise<{ lang: string }>;
+  searchParams: Promise<Record<string, string | undefined>>;
+}) {
   const { lang } = await params;
+  const { author, includeOneshots } = await searchParams;
   const intl = await getDictionary(lang as Locale);
-  return <SeriesIndex lang={lang as Locale} intl={intl} />;
+  return <SeriesIndex lang={lang as Locale} intl={intl} authorFilter={author} includeOneshots={includeOneshots === "true"} />;
 }
 
-export default function BookSeriesIndex(props: { params: Promise<{ lang: string }> }) {
+export default function BookSeriesIndex(props: {
+  params: Promise<{ lang: string }>;
+  searchParams: Promise<Record<string, string | undefined>>;
+}) {
   return <main className="p-4"><Suspense fallback={<GridSkeleton />}><BookSeriesIndexContent {...props} /></Suspense></main>;
 }

package/dist/src/app/[lang]/page.tsx

@@ -141,7 +141,7 @@ async function HomeContent({
     id: book.id,
     title: book.metadata.title,
     slug: book.slug,
-    isOneshot: false,
+    isOneshot: book.series.isOneshot,
     coverImage: getBookCoverUrl(book.slug, book.metadata.coverPath),
     section: "manga" as const,
     meta: null,
@@ -182,7 +182,7 @@ async function HomeContent({
       entry: {
         title: book.metadata.title,
         slug: book.slug,
-        isOneshot: false,
+        isOneshot: book.series.isOneshot,
         coverImage: getBookCoverUrl(book.slug, book.metadata.coverPath),
         section: "manga" as const,
         meta: null,

package/dist/src/components/catalog/CatalogAuthorsTable.tsx

@@ -44,41 +44,58 @@ function renderLibraries(
 ) {
   const authorParam = author?.trim() ? author.trim() : "__unknown__";
 
-  function buildHref(section: "manga" | "comic" | "others") {
+  function buildHref(section: "manga" | "comic" | "others" | "books") {
     const params = new URLSearchParams({ author: authorParam });
-    return `/${lang}/${section}/volumes?${params.toString()}`;
+    if (section === "books") {
+      params.set("includeOneshots", "true");
+      return `/${lang}/books/series?${params.toString()}`;
+    }
+
+    params.set("includeOneshots", "true");
+    return `/${lang}/${section}/series?${params.toString()}`;
+  }
+
+  function renderLibrary(
+    section: "manga" | "comic" | "others" | "books",
+    label: string,
+    className: string
+  ) {
+    return (
+      <Link href={buildHref(section)} className={className}>
+        {label}
+      </Link>
+    );
   }
 
   return (
     <div className="flex items-center justify-center gap-1 flex-wrap">
       {hasManga && (
-        <Link
-          href={buildHref("manga")}
-          className="bg-pearl text-onix px-2 rounded-full text-xs uppercase transition-opacity hover:opacity-80"
-        >
-          {intl.catalog.mangaColumn as string}
-        </Link>
+        renderLibrary(
+          "manga",
+          intl.catalog.mangaColumn as string,
+          "bg-pearl text-onix px-2 rounded-full text-xs uppercase transition-opacity hover:opacity-80"
+        )
       )}
       {hasComic && (
-        <Link
-          href={buildHref("comic")}
-          className="bg-neutral-700 px-2 rounded-full text-xs uppercase transition-opacity hover:opacity-80"
-        >
-          {intl.catalog.comicColumn as string}
-        </Link>
+        renderLibrary(
+          "comic",
+          intl.catalog.comicColumn as string,
+          "bg-neutral-700 px-2 rounded-full text-xs uppercase transition-opacity hover:opacity-80"
+        )
       )}
       {hasBooks && (
-        <span className="border border-pearl px-2 rounded-full text-xs uppercase">
-          {intl.catalog.booksColumn as string}
-        </span>
+        renderLibrary(
+          "books",
+          intl.catalog.booksColumn as string,
+          "border border-pearl px-2 rounded-full text-xs uppercase transition-opacity hover:opacity-80"
+        )
       )}
       {hasOthers && (
-        <Link
-          href={buildHref("others")}
-          className="bg-neutral-700 px-2 rounded-full text-xs uppercase transition-opacity hover:opacity-80"
-        >
-          {intl.catalog.othersColumn as string}
-        </Link>
+        renderLibrary(
+          "others",
+          intl.catalog.othersColumn as string,
+          "bg-neutral-700 px-2 rounded-full text-xs uppercase transition-opacity hover:opacity-80"
+        )
       )}
     </div>
   );

package/dist/src/components/catalog/CatalogLibraryActions.tsx

@@ -8,29 +8,56 @@ import { useToast } from "@/components/ToastProvider";
 import { useAlertDialog } from "@/components/AlertDialogProvider";
 import { scanVolume } from "@/actions/scan-series";
 import { deleteVolume } from "@/actions/delete";
+import { deleteBookVolume, rescanBookVolume } from "@/actions/books-admin";
+import type { CatalogLibraryVolume } from "@/lib/db/library";
 import type { Dictionary } from "@/lib/types";
 
 interface CatalogLibraryActionsProps {
   intl: Dictionary;
   volumeId: string;
   volumeSlug: string;
+  section: CatalogLibraryVolume["section"];
 }
 
 export default function CatalogLibraryActions({
   intl,
   volumeId,
   volumeSlug,
+  section,
 }: CatalogLibraryActionsProps) {
   const router = useRouter();
   const { addToast } = useToast()!;
   const { confirm } = useAlertDialog()!;
   const [isScanning, setIsScanning] = useState(false);
   const [isDeleting, setIsDeleting] = useState(false);
+  const isBook = section === "books";
+  const bookActions = intl.libraries.bookActions as Record<string, string>;
 
   const handleScan = async () => {
     setIsScanning(true);
 
     try {
+      if (isBook) {
+        const result = await rescanBookVolume(volumeSlug);
+
+        if (!result.ok) {
+          addToast({
+            title: "Error",
+            description: result.error,
+            variant: "error",
+          });
+          return;
+        }
+
+        addToast({
+          title: (intl.books as Record<string, string>).scanComplete,
+          description: `${result.indexed ?? 0} ${(intl.books as Record<string, string>).bookIndexed}`,
+          variant: "success",
+        });
+        router.refresh();
+        return;
+      }
+
       const result = await scanVolume(volumeId);
 
       if (!result || "error" in result) {
@@ -62,8 +89,12 @@ export default function CatalogLibraryActions({
 
   const handleDelete = async () => {
     const confirmed = await confirm({
-      title: (intl.libraries.deleteItem as Record<string, string>).volume,
-      description: (intl.libraries.deleteSure as Record<string, string>).volume,
+      title: isBook
+        ? bookActions.deleteBook
+        : (intl.libraries.deleteItem as Record<string, string>).volume,
+      description: isBook
+        ? bookActions.deleteBookSure
+        : (intl.libraries.deleteSure as Record<string, string>).volume,
       destructive: true,
       irreversible: true,
     });
@@ -73,6 +104,27 @@ export default function CatalogLibraryActions({
     setIsDeleting(true);
 
     try {
+      if (isBook) {
+        const result = await deleteBookVolume(volumeSlug);
+
+        if (!result.ok) {
+          addToast({
+            title: "Error",
+            description: result.error,
+            variant: "error",
+          });
+          return;
+        }
+
+        addToast({
+          title: "OK",
+          description: bookActions.deleteBook,
+          variant: "success",
+        });
+        router.refresh();
+        return;
+      }
+
       const result = await deleteVolume({ slug: volumeSlug });
 
       if (!result || "error" in result || !("ok" in result) || !result.ok) {
@@ -109,7 +161,7 @@ export default function CatalogLibraryActions({
         type="button"
         onClick={handleScan}
         disabled={isScanning || isDeleting}
-        title={intl.manga.scanVolume as string}
+        title={isBook ? bookActions.scanBook : (intl.manga.scanVolume as string)}
         className={clsx(
           "border border-neutral-800 hover:text-pearl rounded-lg p-2 cursor-pointer transition-all duration-300 hover:border-lilah",
           "disabled:opacity-50 disabled:cursor-not-allowed"
@@ -126,7 +178,9 @@ export default function CatalogLibraryActions({
         type="button"
         onClick={handleDelete}
         disabled={isScanning || isDeleting}
-        title={(intl.libraries.deleteItem as Record<string, string>).volume}
+        title={isBook
+          ? bookActions.deleteBook
+          : (intl.libraries.deleteItem as Record<string, string>).volume}
         className={clsx(
           "border border-neutral-800 hover:text-danger-alt rounded-lg p-2 cursor-pointer transition-all duration-300 hover:border-danger-alt",
           "disabled:opacity-50 disabled:cursor-not-allowed"

package/dist/src/components/catalog/CatalogLibraryTable.tsx

@@ -47,6 +47,18 @@ function renderWriter(value: string | null | undefined) {
   return normalizeCommaSeparatedText(value) ?? "—";
 }
 
+function getCatalogVolumeHref(
+  lang: Locale,
+  section: CatalogLibraryVolume["section"],
+  slug: string
+) {
+  if (section === "books") {
+    return `/${lang}/books/volume/${slug}`;
+  }
+
+  return getLibraryVolumeHref(lang, section, slug);
+}
+
 export default function CatalogLibraryTable({
   data,
   intl,
@@ -90,7 +102,7 @@ export default function CatalogLibraryTable({
                   </td>
                   <td className="p-4">
                     <Link
-                      href={getLibraryVolumeHref(lang, volume.section, volume.slug)}
+                      href={getCatalogVolumeHref(lang, volume.section, volume.slug)}
                       className="block max-w-[20rem] whitespace-normal break-words leading-snug hover:underline"
                     >
                       {renderValue(volume.title)}
@@ -134,6 +146,7 @@ export default function CatalogLibraryTable({
                         intl={intl}
                         volumeId={volume.id}
                         volumeSlug={volume.slug}
+                        section={volume.section}
                       />
                     </td>
                   )}

package/dist/src/components/catalog/CatalogRelationsTable.tsx

@@ -33,7 +33,7 @@ export default function CatalogRelationsTable({
               {data.items.map((item) => (
                 <tr key={item.name}>
                   <td className="p-4">
-                    <div className="max-w-[18rem] whitespace-normal break-words leading-snug">
+                    <div className="max-w-[18rem] whitespace-normal break-words leading-snug capitalize">
                       {item.name}
                     </div>
                   </td>

package/dist/src/components/home/manga/HeroKeepRead.tsx

@@ -77,6 +77,7 @@ export default function HeroKeepRead({
             offlineVolumeId={entry.id}
             intl={intl}
             isDragging={false}
+            imageSizes="(max-width: 767px) calc(100vw - 6rem), (max-width: 1535px) 50vw, 30vw"
             className="font-roboto font-bold leading-5 2xl:leading-6 text-xl 2xl:text-2xl"
           />
         ) : (

package/dist/src/components/library/books/BookMetadataPanel.tsx

@@ -1,7 +1,8 @@
 import type { ReactNode } from "react";
+import Link from "next/link";
 import { getBookIdentifierScheme, getBookIdentifierValue } from "@/lib/books/metadata";
 import type { BookVolume } from "@/lib/db/books/library";
-import type { Dictionary } from "@/lib/types";
+import type { Dictionary, Locale } from "@/lib/types";
 
 function MetadataField({ label, children }: { label: string; children: ReactNode }) {
   return (
@@ -12,7 +13,15 @@ function MetadataField({ label, children }: { label: string; children: ReactNode
   );
 }
 
-export default function BookMetadataPanel({ volume, intl }: { volume: BookVolume; intl: Dictionary }) {
+export default function BookMetadataPanel({
+  volume,
+  lang,
+  intl,
+}: {
+  volume: BookVolume;
+  lang: Locale;
+  intl: Dictionary;
+}) {
   const books = intl.books as Record<string, string>;
   const { metadata } = volume;
   const authors = metadata.people.filter((person) => person.kind === "creator" && (!person.role || person.role.toLowerCase() === "aut"));
@@ -36,7 +45,21 @@ export default function BookMetadataPanel({ volume, intl }: { volume: BookVolume
 
   return (
     <div>
-      {authors.length > 0 && <MetadataField label={books.author}>{authors.map((person) => person.name).join(", ")}</MetadataField>}
+      {authors.length > 0 && (
+        <MetadataField label={books.author}>
+          {authors.map((person, index) => (
+            <span key={`${person.name}-${person.position}`}>
+              {index > 0 && ", "}
+              <Link
+                href={{ pathname: `/${lang}/books/series`, query: { author: person.name, includeOneshots: "true" } }}
+                className="transition-all duration-300 hover:text-lilah"
+              >
+                {person.name}
+              </Link>
+            </span>
+          ))}
+        </MetadataField>
+      )}
       {[...contributorsByRole].map(([role, people]) => (
         <MetadataField key={role} label={role}>{people.map((person) => person.name).join(", ")}</MetadataField>
       ))}

package/dist/src/components/library/books/BookSeriesContent.tsx

@@ -67,7 +67,7 @@ export default function BookSeriesContent({ volumes, lang, intl, progressById, i
             </>
           )}
           <Separator />
-          <BookMetadataPanel volume={firstVolume} intl={intl} />
+          <BookMetadataPanel volume={firstVolume} lang={lang} intl={intl} />
         </div>
       </section>
       <section>

package/dist/src/components/library/books/BookVolumeContent.tsx

@@ -80,7 +80,7 @@ export default function BookVolumeContent({ volume, lang, intl, readingEntries,
           )}
 
           <Tabs tabs={[
-            { label: books.details, content: <BookMetadataPanel volume={volume} intl={intl} /> },
+            { label: books.details, content: <BookMetadataPanel volume={volume} lang={lang} intl={intl} /> },
             { label: books.readingHistory, content: <BookReadingHistory volumeId={volume.id} entries={readingEntries} intl={intl} /> },
           ]} />
           {isAdmin && <><Separator /><BookAdminActions type="volume" slug={volume.slug} lang={lang} intl={intl} canDownload={process.env.LIB_PROVIDER === "cloud"} /></>}

package/dist/src/components/library/books/grid/SeriesIndex.tsx

@@ -5,14 +5,28 @@ import { listBookProgressByIds, listBookVolumes } from "@/lib/db/books/library";
 import { LibraryBigIcon } from "lucide-react";
 import type { Dictionary, Locale } from "@/lib/types";
 
-export default async function SeriesIndex({ lang, intl }: { lang: Locale; intl: Dictionary }) {
+export default async function SeriesIndex({
+  lang,
+  intl,
+  authorFilter,
+  includeOneshots = false,
+}: {
+  lang: Locale;
+  intl: Dictionary;
+  authorFilter?: string;
+  includeOneshots?: boolean;
+}) {
   const labels = intl.books as Record<string, string>;
   const user = await verifySession();
-  const books = await listBookVolumes();
+  const authorNames = authorFilter?.trim() ? [authorFilter.trim()] : undefined;
+  const books = await listBookVolumes({ authorNames });
+  const visibleBooks = includeOneshots
+    ? books
+    : books.filter((book) => !book.series.isOneshot);
   const progressById = user
-    ? await listBookProgressByIds(user.id, books.map((book) => book.id))
+    ? await listBookProgressByIds(user.id, visibleBooks.map((book) => book.id))
     : {};
-  const series = Array.from(books.reduce((map, book) => {
+  const series = Array.from(visibleBooks.reduce((map, book) => {
     const current = map.get(book.series.id) ?? {
       ...book.series,
       cover: getBookCoverUrl(book.slug, book.metadata.coverPath),

package/dist/src/components/library/manga/MetadataPanel.tsx

@@ -50,7 +50,7 @@ function AuthorField({ field, label, href }: AuthorFieldProps) {
             <Link
               href={{
                 pathname: href,
-                query: { author },
+                query: { author, includeOneshots: "true" },
               }}
               scroll={false}
               className="hover:text-lilah transition-all duration-300"
@@ -82,10 +82,11 @@ export default function MetadataPanel({
   const genres = (meta.genres || []) as { name: string }[];
   const tags = (meta.tags || []) as { name: string }[];
   const href = `/${lang}/${section}/${linkBase}`;
+  const authorHref = `/${lang}/${section}/series`;
 
   return (
     <>
-      <AuthorField field={meta.writer} label={intl.manga.author} href={href} />
+      <AuthorField field={meta.writer} label={intl.manga.author} href={authorHref} />
       <MetaField field={meta.penciller} label={intl.manga.penciller} />
       <MetaField field={meta.inker} label={intl.manga.inker} />
       <MetaField field={meta.colorist} label={intl.manga.colorist} />

package/dist/src/components/reader/EpubReader.tsx

@@ -329,6 +329,8 @@ export default function EpubReader({ isOpen, onClose, slug, title, layout, intl
 
           let touchStart: { x: number; y: number } | null = null;
           let ignoreClickUntil = 0;
+          document.documentElement.style.touchAction = "pan-y";
+          body.style.touchAction = "pan-y";
           const isInteractiveTarget = (target: EventTarget | null) => {
             return Boolean((target as HTMLElement | null)?.closest?.("a, button, input, select, textarea, [contenteditable='true']"));
           };
@@ -340,7 +342,7 @@ export default function EpubReader({ isOpen, onClose, slug, title, layout, intl
             setNoteEditorOpen(false);
             setAnnotationNoteEditorOpen(false);
           };
-          const handleContentInteraction = (event: MouseEvent, x: number, y: number, navigate = false) => {
+          const handleContentInteraction = (event: Event, x: number, y: number, navigate = false) => {
             if (hasTextSelection() || pendingSelectionRef.current || isInteractiveTarget(event.target)) return;
             const annotation = findAnnotationAtPoint(contents, x, y);
             if (annotation) {
@@ -370,44 +372,52 @@ export default function EpubReader({ isOpen, onClose, slug, title, layout, intl
             }
             handleContentInteraction(event, event.clientX, event.clientY);
           };
-          const handleTouchStart = (event: TouchEvent) => {
-            if (event.touches.length !== 1) {
-              touchStart = null;
-              return;
-            }
-            const touch = event.touches[0];
-            touchStart = { x: touch.clientX, y: touch.clientY };
-          };
-          const handleTouchEnd = (event: TouchEvent) => {
-            const touch = event.changedTouches[0];
+          const handleTouchGesture = (event: Event, x: number, y: number) => {
             const start = touchStart;
             touchStart = null;
-            if (!touch || !start || hasTextSelection() || isInteractiveTarget(event.target)) return;
+            if (!start || hasTextSelection() || isInteractiveTarget(event.target)) return;
 
-            const deltaX = touch.clientX - start.x;
-            const deltaY = touch.clientY - start.y;
+            const deltaX = x - start.x;
+            const deltaY = y - start.y;
             const distanceX = Math.abs(deltaX);
             const distanceY = Math.abs(deltaY);
 
-            if (distanceX > 36 && distanceX > distanceY) {
-              event.preventDefault();
+            if (distanceX > 48 && distanceX > distanceY) {
+              if (event.cancelable) event.preventDefault();
               event.stopPropagation();
-              ignoreClickUntil = Date.now() + 450;
+              ignoreClickUntil = Date.now() + 500;
               clearReaderOverlays();
               void (deltaX < 0 ? rendition.next() : rendition.prev());
               return;
             }
 
-            if (distanceX > 12 || distanceY > 12) {
-              ignoreClickUntil = Date.now() + 450;
+            if (distanceX > 18 || distanceY > 18) {
+              ignoreClickUntil = Date.now() + 500;
               return;
             }
 
-            event.preventDefault();
-            ignoreClickUntil = Date.now() + 450;
-            handleContentInteraction(event as unknown as MouseEvent, touch.clientX, touch.clientY, true);
+            if (event.cancelable) event.preventDefault();
+            ignoreClickUntil = Date.now() + 500;
+            handleContentInteraction(event, x, y, true);
+          };
+          const handleTouchStart = (event: TouchEvent) => {
+            if (event.touches.length !== 1) {
+              touchStart = null;
+              return;
+            }
+            const touch = event.touches[0];
+            touchStart = { x: touch.clientX, y: touch.clientY };
+          };
+          const handleTouchEnd = (event: TouchEvent) => {
+            const touch = event.changedTouches[0];
+            if (!touch) return;
+            handleTouchGesture(event, touch.clientX, touch.clientY);
+          };
+          const resetTouchGesture = () => {
+            touchStart = null;
+            pointerIsDownRef.current = false;
           };
-          document.addEventListener("click", handleContentClick);
+          document.addEventListener("click", handleContentClick, true);
           document.addEventListener("keydown", (event) => readerKeyHandlerRef.current(event));
           const showPendingSelection = () => {
             window.setTimeout(() => {
@@ -444,14 +454,13 @@ export default function EpubReader({ isOpen, onClose, slug, title, layout, intl
           flushPendingSelectionRef.current = showPendingSelection;
           const markPointerDown = () => { pointerIsDownRef.current = true; };
           const markPointerUp = () => { pointerIsDownRef.current = false; showPendingSelection(); };
-          document.addEventListener("mousedown", markPointerDown);
-          document.addEventListener("touchstart", markPointerDown);
-          document.addEventListener("mouseup", showPendingSelection);
-          document.addEventListener("touchend", showPendingSelection);
-          document.addEventListener("pointerup", markPointerUp);
-          document.addEventListener("touchstart", handleTouchStart, { passive: true });
-          document.addEventListener("touchend", handleTouchEnd, { passive: false });
-          document.addEventListener("touchcancel", () => { touchStart = null; });
+          document.addEventListener("mousedown", markPointerDown, true);
+          document.addEventListener("mouseup", markPointerUp, true);
+          document.addEventListener("touchstart", markPointerDown, true);
+          document.addEventListener("touchend", markPointerUp, true);
+          document.addEventListener("touchstart", handleTouchStart, { passive: true, capture: true });
+          document.addEventListener("touchend", handleTouchEnd, { passive: false, capture: true });
+          document.addEventListener("touchcancel", resetTouchGesture, true);
         });
         if (layout === "reflowable") applyStyles();
         const refreshAnnotationLayers = () => {
@@ -763,7 +772,7 @@ export default function EpubReader({ isOpen, onClose, slug, title, layout, intl
         </div>}
       </div>}
 
-      <main className="relative h-full w-full" style={themeStyles[theme]} onPointerUp={(event) => {
+      <main className="relative h-full w-full touch-pan-y" style={themeStyles[theme]} onPointerUp={(event) => {
         if (event.target === event.currentTarget) {
           closePanels();
           setSelectionMenu(null);
@@ -774,7 +783,7 @@ export default function EpubReader({ isOpen, onClose, slug, title, layout, intl
       }}>
         {loading && <div className="absolute inset-0 z-20 grid place-items-center bg-onix">{reader.opening}</div>}
         {error && <div className="absolute inset-0 z-20 grid place-items-center bg-onix p-6 text-center">{error}</div>}
-        <div ref={viewerRef} className="h-full w-full" />
+        <div ref={viewerRef} className="h-full w-full touch-pan-y" />
       </main>
 
       <footer className={`absolute inset-x-0 bottom-0 z-30 flex h-11 items-center justify-between gap-4 border-t border-white/15 bg-onix/95 px-3 transition-transform duration-200 ${controlsVisible ? "translate-y-0" : "translate-y-full pointer-events-none"}`}>

package/dist/src/components/ui/MangaCard.tsx

@@ -6,7 +6,7 @@ import clsx from "clsx";
 import { useRef } from "react";
 import { CloudIcon } from "lucide-react";
 import { usePwa } from "@/components/pwa/PwaProvider";
-import { getOneshotLabel, type LibrarySection } from "@/lib/librarySection";
+import { getOneshotLabel, type OneshotSection } from "@/lib/librarySection";
 import type { DictionarySection } from "@/lib/types";
 
 interface MangaCardProps {
@@ -26,6 +26,7 @@ interface MangaCardProps {
   progressRatio?: number | null;
   offlineVolumeId?: string | null;
   offlineSeriesId?: string | null;
+  imageSizes?: string;
 }
 
 export default function MangaCard({
@@ -45,6 +46,7 @@ export default function MangaCard({
   progressRatio,
   offlineVolumeId,
   offlineSeriesId,
+  imageSizes,
 }: MangaCardProps) {
   const t = intl;
   const ratio = progressRatio ?? 0;
@@ -53,11 +55,13 @@ export default function MangaCard({
   const { offlineSlugs, offlineVolumeIds, offlineSeriesIds } = usePwa();
 
   const manga = t.manga as DictionarySection;
-  const section: LibrarySection = href.includes("/comic/")
+  const section: OneshotSection = href.includes("/comic/")
     ? "comic"
     : href.includes("/others/")
       ? "others"
-      : "manga";
+      : href.includes("/books/")
+        ? "books"
+        : "manga";
   const oneshotLabel = getOneshotLabel(section, manga);
   const volumeSlug = href.split("?")[0].split("/").pop();
   const isOfflineCover = cover?.startsWith("/offline/") ?? false;
@@ -123,7 +127,7 @@ export default function MangaCard({
             src={cover || "/placeholder.svg?=v1"}
             alt={`Cover for ${title ?? ""}`}
             fill
-            sizes="(max-width: 768px) 50vw, (max-width: 1280px) 20vw, 14vw"
+            sizes={imageSizes ?? "(max-width: 768px) 50vw, (max-width: 1280px) 20vw, 14vw"}
             className="object-cover z-0"
           />
         )}

package/dist/src/lib/db/books/library.ts

@@ -234,10 +234,48 @@ export async function findBookFileBySlug(slug: string): Promise<{ filename: stri
   return row ? { filename: row.filename, fullPath: row.full_path } : null;
 }
 
-export async function listBookVolumes(options?: { seriesSlug?: string; limit?: number }): Promise<BookVolume[]> {
+export async function listBookVolumes(options?: {
+  seriesSlug?: string;
+  authorNames?: string[];
+  limit?: number;
+}): Promise<BookVolume[]> {
   const params: unknown[] = [];
-  const where = options?.seriesSlug ? " WHERE bs.slug = $1" : "";
-  if (options?.seriesSlug) params.push(options.seriesSlug);
+  const conditions: string[] = [];
+
+  if (options?.seriesSlug) {
+    params.push(options.seriesSlug);
+    conditions.push(`bs.slug = $${params.length}`);
+  }
+
+  if (options?.authorNames && options.authorNames.length > 0) {
+    params.push(options.authorNames);
+    const authorParam = params.length;
+    conditions.push(`
+      (
+        EXISTS (
+          SELECT 1
+          FROM book_people bp
+          WHERE bp.metadata_id = bm.id
+            AND bp.kind = 'creator'
+            AND (bp.role IS NULL OR LOWER(bp.role) = 'aut')
+            AND BTRIM(bp.name) = ANY($${authorParam}::text[])
+        )
+        OR (
+          '__unknown__' = ANY($${authorParam}::text[])
+          AND NOT EXISTS (
+            SELECT 1
+            FROM book_people bp
+            WHERE bp.metadata_id = bm.id
+              AND bp.kind = 'creator'
+              AND (bp.role IS NULL OR LOWER(bp.role) = 'aut')
+              AND BTRIM(bp.name) <> ''
+          )
+        )
+      )
+    `);
+  }
+
+  const where = conditions.length > 0 ? ` WHERE ${conditions.join(" AND ")}` : "";
   const limit = options?.limit ?? 100;
   params.push(limit);
   const rows = await query<BookRow>(`${BOOK_SELECT}${where} ORDER BY bs.sort_title, bv.number NULLS LAST, bv.sort_title LIMIT $${params.length}`, params);