@itsmrtr/bunkoshelf 1.10.2 → 1.11.0

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

@@ -2,7 +2,7 @@ import { Suspense } from "react";
 import { notFound } from "next/navigation";
 import { findBookVolumeBySlug } from "@/lib/db/books/library";
 import { verifySession } from "@/lib/auth/verifySession";
-import { listBookReadingEntries } from "@/lib/db/books/reading";
+import { findBookProgress, listBookReadingEntries } from "@/lib/db/books/reading";
 import BookVolumeContent from "@/components/library/books/BookVolumeContent";
 import { getDictionary } from "@/lib/i18n/Dictionary";
 import type { Locale } from "@/lib/types";
@@ -17,8 +17,13 @@ async function BookVolumePageContent({ params }: { params: Promise<{ lang: strin
   const volume = await findBookVolumeBySlug(slug);
   if (!volume) notFound();
   const intl = await getDictionary(lang as Locale);
-  const readingEntries = user ? await listBookReadingEntries(user.id, volume.id) : [];
-  return <BookVolumeContent volume={volume} lang={lang as Locale} intl={intl} readingEntries={readingEntries} isAdmin={user?.isAdmin === true} />;
+  const [readingEntries, progress]: [Awaited<ReturnType<typeof listBookReadingEntries>>, Awaited<ReturnType<typeof findBookProgress>>] = user
+    ? await Promise.all([
+      listBookReadingEntries(user.id, volume.id),
+      findBookProgress(user.id, volume.id),
+    ])
+    : [[], null];
+  return <BookVolumeContent volume={volume} lang={lang as Locale} intl={intl} readingEntries={readingEntries} personalRating={progress?.personalRating ?? null} isAdmin={user?.isAdmin === true} />;
 }
 
 export default function BookVolumePage(props: { params: Promise<{ lang: string; slug: string }> }) {

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

@@ -44,41 +44,57 @@ 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") {
+      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 } }}
+                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

@@ -2,12 +2,14 @@ import Image from "next/image";
 import MangaCard from "@/components/ui/MangaCard";
 import Separator from "@/components/ui/Separator";
 import BookSeriesFavoriteButton from "./BookSeriesFavoriteButton";
+import BookSeriesStatusSelect from "./BookSeriesStatusSelect";
+import BookSeriesRating from "./BookSeriesRating";
 import BookMetadataPanel from "./BookMetadataPanel";
 import BookMetadataBadges from "./BookMetadataBadges";
 import BookAdminActions from "./BookAdminActions";
 import BookSummary from "./BookSummary";
 import { getBookCoverUrl } from "@/lib/books/cover";
-import { getBookPublicationYear, toPlainBookText } from "@/lib/books/metadata";
+import { getBookAgeMinimum, getBookPublicationYear, normalizeBookAgeRating, toPlainBookText, type BookAgeRating } from "@/lib/books/metadata";
 import { getBookProgressRatio } from "@/lib/books/readingProgress";
 import type { BookVolume } from "@/lib/db/books/library";
 import type { Dictionary, Locale } from "@/lib/types";
@@ -18,15 +20,22 @@ interface BookSeriesContentProps {
   intl: Dictionary;
   progressById: Record<string, { isRead: boolean; progression: number | null }>;
   isFavorite: boolean;
+  averageRating: number | null;
   isAdmin: boolean;
 }
 
-export default function BookSeriesContent({ volumes, lang, intl, progressById, isFavorite, isAdmin }: BookSeriesContentProps) {
+export default function BookSeriesContent({ volumes, lang, intl, progressById, isFavorite, averageRating, isAdmin }: BookSeriesContentProps) {
   const books = intl.books as Record<string, string>;
   const firstVolume = volumes[0];
   const coverImage = getBookCoverUrl(firstVolume.slug, firstVolume.metadata.coverPath);
   const meta = firstVolume.metadata;
   const description = toPlainBookText(meta.description);
+  const ageRating = volumes.reduce<BookAgeRating | null>((highest, volume) => {
+    const current = normalizeBookAgeRating(volume.metadata.ageRating);
+    if (!current) return highest;
+    if (!highest || getBookAgeMinimum(current)! > getBookAgeMinimum(highest)!) return current;
+    return highest;
+  }, null);
 
   return (
     <div className="p-4">
@@ -42,8 +51,14 @@ export default function BookSeriesContent({ volumes, lang, intl, progressById, i
         </div>
         <div className="w-full md:w-7/12 2xl:w-2/3 2xl:pl-4">
           <h1 className="text-2xl leading-11 md:text-3xl md:leading-14">{firstVolume.series.title}</h1>
-          <BookSeriesFavoriteButton seriesId={firstVolume.series.id} initialFavorite={isFavorite} intl={intl} />
-          <BookMetadataBadges metadata={meta} intl={intl} />
+          <div className="mt-4 flex flex-row gap-2">
+            <BookSeriesStatusSelect seriesId={firstVolume.series.id} intl={intl} />
+            <BookSeriesFavoriteButton seriesId={firstVolume.series.id} initialFavorite={isFavorite} intl={intl} />
+          </div>
+          <div className="mt-8">
+            <BookSeriesRating rating={averageRating} />
+          </div>
+          <BookMetadataBadges metadata={{ ...meta, ageRating }} intl={intl} />
           <p className="mt-4">{getBookPublicationYear(meta.publishedAt ?? meta.modifiedAt)} &bull; {volumes.length} {books.books}</p>
           {description && (
             <>
@@ -52,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/BookSeriesFavoriteButton.tsx

@@ -35,19 +35,17 @@ export default function BookSeriesFavoriteButton({ seriesId, initialFavorite, in
   const label = isFavorite ? books.removeFavorite : books.addFavorite;
 
   return (
-    <div className="mt-4 flex flex-row gap-2">
-      <button
-        onClick={toggleFavorite}
-        disabled={isLoading}
-        title={label}
-        aria-label={label}
-        className={clsx(
-          "cursor-pointer rounded-lg border p-3 leading-none transition-all duration-300 2xl:p-4",
-          isFavorite ? "border-sand bg-sand text-onix hover:border-pearl hover:bg-pearl" : "border-blackamber bg-blackamber text-sand hover:border-pearl hover:bg-pearl hover:text-onix",
-        )}
-      >
-        {isFavorite ? <HeartOffIcon size={20} /> : <HeartIcon size={20} />}
-      </button>
-    </div>
+    <button
+      onClick={toggleFavorite}
+      disabled={isLoading}
+      title={label}
+      aria-label={label}
+      className={clsx(
+        "cursor-pointer rounded-lg border p-3 leading-none transition-all duration-300 2xl:p-4",
+        isFavorite ? "border-sand bg-sand text-onix hover:border-pearl hover:bg-pearl" : "border-blackamber bg-blackamber text-sand hover:border-pearl hover:bg-pearl hover:text-onix",
+      )}
+    >
+      {isFavorite ? <HeartOffIcon size={20} /> : <HeartIcon size={20} />}
+    </button>
   );
 }

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

@@ -0,0 +1,16 @@
+import { StarIcon } from "lucide-react";
+
+interface BookSeriesRatingProps {
+  rating: number | null;
+}
+
+export default function BookSeriesRating({ rating }: BookSeriesRatingProps) {
+  if (rating === null || rating === undefined) return null;
+
+  return (
+    <div className="flex items-center gap-1.5 text-4xl text-pearl">
+      <StarIcon size={20} />
+      <span className="tabular-nums font-bold">{rating.toFixed(1)}</span>
+    </div>
+  );
+}

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

@@ -0,0 +1,115 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import clsx from "clsx";
+import {
+  CircleCheckBig,
+  CircleFadingArrowUpIcon,
+  CirclePauseIcon,
+  CircleXIcon,
+  type LucideIcon,
+} from "lucide-react";
+import { getBookSeriesStatus, updateBookSeriesStatus } from "@/actions/books-series-status";
+import type { Dictionary } from "@/lib/types";
+
+interface BookSeriesStatusSelectProps {
+  seriesId: string;
+  intl: Dictionary;
+}
+
+interface StatusOption {
+  value: string;
+  label: string;
+  icon: LucideIcon;
+}
+
+const COLORS: Record<string, string> = {
+  ONGOING: "text-cyan-500",
+  FINISHED: "text-pearl",
+  HIATUS: "text-yellow-500",
+  CANCELLED: "text-red-500",
+};
+
+export default function BookSeriesStatusSelect({ seriesId, intl }: BookSeriesStatusSelectProps) {
+  const books = intl.books as Record<string, string>;
+  const options: StatusOption[] = [
+    { value: "ONGOING", label: books.ongoing, icon: CircleFadingArrowUpIcon },
+    { value: "FINISHED", label: books.finished, icon: CircleCheckBig },
+    { value: "HIATUS", label: books.hiatus, icon: CirclePauseIcon },
+    { value: "CANCELLED", label: books.cancelled, icon: CircleXIcon },
+  ];
+  const [currentStatus, setCurrentStatus] = useState<string | null>(null);
+  const [isOpen, setIsOpen] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+  const selectRef = useRef<HTMLDivElement>(null);
+  const currentOption = options.find((option) => option.value === currentStatus);
+  const CurrentIcon = currentOption?.icon ?? CircleFadingArrowUpIcon;
+
+  useEffect(() => {
+    let active = true;
+    void getBookSeriesStatus({ seriesId }).then((result) => {
+      if (active && !("error" in result)) setCurrentStatus(result.status);
+    });
+    return () => { active = false; };
+  }, [seriesId]);
+
+  useEffect(() => {
+    const close = (event: MouseEvent) => {
+      if (selectRef.current && !selectRef.current.contains(event.target as Node)) setIsOpen(false);
+    };
+    if (isOpen) document.addEventListener("mousedown", close);
+    return () => document.removeEventListener("mousedown", close);
+  }, [isOpen]);
+
+  const changeStatus = async (status: string) => {
+    setIsLoading(true);
+    try {
+      const result = await updateBookSeriesStatus({ seriesId, status });
+      if (!("error" in result)) {
+        setCurrentStatus(result.status);
+        setIsOpen(false);
+      }
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <div className="relative" ref={selectRef}>
+      <button
+        type="button"
+        onClick={() => setIsOpen((open) => !open)}
+        disabled={isLoading}
+        title={currentOption?.label ?? books.selectStatus}
+        className="group cursor-pointer rounded-lg border border-blackamber bg-blackamber p-3 leading-none text-sand transition-all duration-300 hover:border-pearl hover:bg-pearl hover:text-onix 2xl:p-4"
+      >
+        <CurrentIcon
+          size={20}
+          className={clsx(COLORS[currentStatus ?? ""] ?? "text-sand", "transition-colors", currentStatus === "FINISHED" && "group-hover:text-onix")}
+        />
+      </button>
+      {isOpen && (
+        <div className="absolute left-0 top-full z-10 mt-2 min-w-[180px] overflow-hidden rounded-lg bg-blackamber shadow-lg">
+          {options.map((option) => {
+            const OptionIcon = option.icon;
+            return (
+              <button
+                key={option.value}
+                type="button"
+                onClick={() => void changeStatus(option.value)}
+                disabled={isLoading}
+                className={clsx(
+                  "flex w-full cursor-pointer items-center gap-3 px-4 py-3 transition-all duration-200",
+                  currentStatus === option.value ? "bg-sand text-onix" : "text-sand hover:bg-pearl hover:text-onix",
+                )}
+              >
+                <OptionIcon size={20} />
+                <span className="text-sm font-medium">{option.label}</span>
+              </button>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+}

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

@@ -3,6 +3,7 @@ import Link from "next/link";
 import Separator from "@/components/ui/Separator";
 import Tabs from "@/components/ui/Tabs";
 import BookReaderButton from "./BookReaderButton";
+import BookVolumeRating from "./BookVolumeRating";
 import BookReadingHistory from "./BookReadingHistory";
 import BookMetadataPanel from "./BookMetadataPanel";
 import BookMetadataBadges from "./BookMetadataBadges";
@@ -19,10 +20,11 @@ interface BookVolumeContentProps {
   lang: Locale;
   intl: Dictionary;
   readingEntries: BookReadingEntry[];
+  personalRating: number | null;
   isAdmin: boolean;
 }
 
-export default function BookVolumeContent({ volume, lang, intl, readingEntries, isAdmin }: BookVolumeContentProps) {
+export default function BookVolumeContent({ volume, lang, intl, readingEntries, personalRating, isAdmin }: BookVolumeContentProps) {
   const books = intl.books as Record<string, string>;
   const coverImage = getBookCoverUrl(volume.slug, volume.metadata.coverPath);
   const description = toPlainBookText(volume.metadata.description);
@@ -59,6 +61,10 @@ export default function BookVolumeContent({ volume, lang, intl, readingEntries,
 
           <BookReaderButton slug={volume.slug} title={volume.metadata.title} layout={volume.metadata.renditionLayout} intl={intl} />
 
+          <div className="mt-8">
+            <BookVolumeRating volumeId={volume.id} initialPersonalRating={personalRating} intl={intl} />
+          </div>
+
           <BookMetadataBadges metadata={volume.metadata} intl={intl} />
 
           <p className="mt-4">
@@ -74,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"} /></>}