npm - @itsmrtr/bunkoshelf - Versions diffs - 1.5.0 → 1.7.0 - Mend

@itsmrtr/bunkoshelf 1.5.0 → 1.7.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1479) hide show

package/dist/runtime/commands/update.mjs CHANGED Viewed

@@ -52,6 +52,19 @@ function isRegistryTarballNotFound(error) {
   );
 }
+async function runPackageManagerCommand(command, args, cwd) {
+  const subprocess = execa(command, args, {
+    cwd,
+    stdout: "pipe",
+    stderr: "pipe",
+  });
+  subprocess.stdout?.pipe(process.stdout);
+  subprocess.stderr?.pipe(process.stderr);
+  return subprocess;
+}
 export async function update(version = "latest") {
   intro(chalk.bold("▲ Bunko Shelf"));
@@ -80,10 +93,11 @@ export async function update(version = "latest") {
   progress.start(`Updating ${PACKAGE_NAME} to ${chalk.cyan(version)}...`);
   try {
-    await execa(updateCommand.command, updateCommand.args, {
-      cwd: process.cwd(),
-      stdio: "inherit",
-    });
+    await runPackageManagerCommand(
+      updateCommand.command,
+      updateCommand.args,
+      process.cwd()
+    );
   } catch (error) {
     if (!isRegistryTarballNotFound(error)) {
       progress.stop(chalk.red("Update failed"));
@@ -102,10 +116,11 @@ export async function update(version = "latest") {
         fallbackTarget
       );
-      await execa(fallbackCommand.command, fallbackCommand.args, {
-        cwd: process.cwd(),
-        stdio: "inherit",
-      });
+      await runPackageManagerCommand(
+        fallbackCommand.command,
+        fallbackCommand.args,
+        process.cwd()
+      );
     } catch (fallbackError) {
       progress.stop(chalk.red("Update failed"));
       throw fallbackError;

package/dist/src/actions/language.ts ADDED Viewed

@@ -0,0 +1,11 @@
+"use server";
+import { cookies } from "next/headers";
+import type { Locale } from "@/lib/types";
+export async function setLanguage(lang: Locale) {
+  const cookieStore = await cookies();
+  cookieStore.set("lang", lang, {
+    path: "/",
+  });
+}

package/dist/src/app/[lang]/layout.tsx CHANGED Viewed

@@ -5,6 +5,8 @@ import "../globals.css";
 import Sidebar from "@/components/sidebar/sidebar";
 import MobNav from "@/components/mobNav/MobNav";
 import { ToastProvider } from "@/components/ToastProvider";
+import PwaProvider from "@/components/pwa/PwaProvider";
+import OfflineGate from "@/components/pwa/OfflineGate";
 import { verifySession } from "@/lib/auth/verifySession";
 import { getDictionary } from "@/lib/i18n/Dictionary";
 import { getChallengeData } from "@/lib/utils";
@@ -20,9 +22,9 @@ export const metadata: Metadata = {
   description: "Self-hosted server for managing-reading manga & ebooks.",
   icons: {
     icon: "/favicon.png",
-    apple: "/pwa/bunkoshelf-icon-192.png",
+    apple: "/icons/bunkoshelf-icon-any.png",
   },
-  manifest: "/manifest.json",
+  manifest: "/manifest.webmanifest",
 };
 export async function generateStaticParams() {
@@ -34,7 +36,13 @@ interface RootLayoutProps {
   params: Promise<{ lang: string }>;
 }
-async function AppChrome({ lang }: { lang: Locale }) {
+async function AppShell({
+  children,
+  lang,
+}: {
+  children: ReactNode;
+  lang: Locale;
+}) {
   const [intl, user, versionData] = await Promise.all([
     getDictionary(lang),
     verifySession(),
@@ -58,6 +66,15 @@ async function AppChrome({ lang }: { lang: Locale }) {
         challengeData={challengeData}
         versionData={versionData}
       />
+      <main className="w-full md:w-[65%] lg:w-[75%] xl:w-[79%] 2xl:w-[83%] flex flex-col overflow-y-auto">
+        <PwaProvider userId={user?.id}>
+          <ToastProvider>
+            <OfflineGate lang={lang} intl={intl} userId={user?.id}>
+              {children}
+            </OfflineGate>
+          </ToastProvider>
+        </PwaProvider>
+      </main>
     </>
   );
 }
@@ -82,13 +99,16 @@ export default async function RootLayout({ children, params }: RootLayoutProps)
       <body className="flex h-screen overflow-hidden text-lg relative">
         <div className="fixed inset-0 -z-10 pointer-events-none bg-seigaiha-pattern-k opacity-50" />
-        <Suspense fallback={<aside className="hidden md:flex md:w-[35%] lg:w-[25%] xl:w-[21%] 2xl:w-[17%] bg-blackamber flex-col" />}>
-          <AppChrome lang={lang} />
+        <Suspense
+          fallback={(
+            <>
+              <aside className="hidden md:flex md:w-[35%] lg:w-[25%] xl:w-[21%] 2xl:w-[17%] bg-blackamber flex-col" />
+              <main className="w-full md:w-[65%] lg:w-[75%] xl:w-[79%] 2xl:w-[83%] flex flex-col overflow-y-auto" />
+            </>
+          )}
+        >
+          <AppShell lang={lang}>{children}</AppShell>
         </Suspense>
-        <main className="w-full md:w-[65%] lg:w-[75%] xl:w-[79%] 2xl:w-[83%] flex flex-col overflow-y-auto">
-          <ToastProvider>{children}</ToastProvider>
-        </main>
       </body>
     </html>
   );

package/dist/src/app/[lang]/others/layout.tsx CHANGED Viewed

@@ -15,7 +15,7 @@ export default async function OthersLayout({
 }: OthersLayoutProps) {
   return (
     <Suspense fallback={null}>
-      <OthersLayoutContent children={children} params={params} />
+      <OthersLayoutContent params={params}>{children}</OthersLayoutContent>
     </Suspense>
   );
 }

package/dist/src/app/api/offline/library/[section]/series/[slug]/route.ts ADDED Viewed

@@ -0,0 +1,48 @@
+import { NextResponse } from "next/server";
+import { verifySession } from "@/lib/auth/verifySession";
+import { listVolumeProgressByIds } from "@/lib/db/library";
+import { listVolumes, findSeriesBySlugBasic } from "@/lib/db/library";
+import { getLibrarySection, getLibraryScope, type LibrarySection } from "@/lib/librarySection";
+import { getMangaCoverUrl } from "@/lib/mangaCover";
+export async function GET(
+  _request: Request,
+  { params }: { params: Promise<{ section: string; slug: string }> },
+) {
+  const { section, slug } = await params;
+  if (section !== "manga" && section !== "others") {
+    return NextResponse.json({ error: "Invalid section" }, { status: 400 });
+  }
+  const user = await verifySession();
+  if (!user) return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+  const series = await findSeriesBySlugBasic(slug);
+  if (!series) return NextResponse.json({ error: "Series not found" }, { status: 404 });
+  const volumes = await listVolumes({ seriesIds: [series.id], includeGenres: true, includeTags: true, scope: getLibraryScope(section as LibrarySection) });
+  if (!volumes.length || getLibrarySection(volumes[0].metadataObj?.mangaStyle) !== section) {
+    return NextResponse.json({ error: "Series not found" }, { status: 404 });
+  }
+  const progressById = await listVolumeProgressByIds(user.id, volumes.map((volume) => volume.id));
+  return NextResponse.json({
+    volumes: volumes.map((volume) => {
+      const source = volume.metadataObj;
+      const { id: _id, filePath: _filePath, createdAt: _createdAt, updatedAt: _updatedAt, ...metadata } = source ?? {};
+      const progress = progressById[volume.id];
+      return {
+        id: volume.id,
+        slug: volume.slug,
+        section,
+        title: source?.title || volume.title,
+        series: { id: series.id, slug: series.slug, title: series.title, isOneshot: series.isOneshot },
+        mangaStyle: source?.mangaStyle ?? null,
+        metadata: { ...metadata, genres: volume.genres.map((genre) => genre.name), tags: volume.tags.map((tag) => tag.name) },
+        coverUrl: getMangaCoverUrl(volume),
+        isRead: progress?.isRead ?? false,
+        isFavorite: progress?.isFavorite ?? false,
+        lastPage: progress?.lastPage ?? 0,
+        totalPages: progress?.totalPages ?? source?.pageCount ?? 0,
+      };
+    }),
+  });
+}

package/dist/src/app/api/offline/library/[section]/volume/[slug]/route.ts ADDED Viewed

@@ -0,0 +1,58 @@
+import { NextResponse } from "next/server";
+import { verifySession } from "@/lib/auth/verifySession";
+import { findVolumeProgress } from "@/lib/db/reading";
+import { findVolumeBySlug } from "@/lib/db/library";
+import { getLibrarySection, type LibrarySection } from "@/lib/librarySection";
+import { getMangaCoverUrl } from "@/lib/mangaCover";
+function metadata(value: Awaited<ReturnType<typeof findVolumeBySlug>>) {
+  const source = value?.metadataObj;
+  if (!source) return {};
+  const { id: _id, filePath: _filePath, createdAt: _createdAt, updatedAt: _updatedAt, ...safe } = source;
+  return safe;
+}
+export async function GET(
+  _request: Request,
+  { params }: { params: Promise<{ section: string; slug: string }> },
+) {
+  const { section, slug } = await params;
+  if (section !== "manga" && section !== "others") {
+    return NextResponse.json({ error: "Invalid section" }, { status: 400 });
+  }
+  const user = await verifySession();
+  if (!user) return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+  const volume = await findVolumeBySlug({ slug, includeGenres: true, includeTags: true });
+  if (!volume || getLibrarySection(volume.metadataObj?.mangaStyle) !== section) {
+    return NextResponse.json({ error: "Volume not found" }, { status: 404 });
+  }
+  const progress = await findVolumeProgress(user.id, volume.id);
+  const resolvedSection = section as LibrarySection;
+  return NextResponse.json({
+    volume: {
+      id: volume.id,
+      slug: volume.slug,
+      section: resolvedSection,
+      title: volume.metadataObj?.title || volume.title,
+      series: {
+        id: volume.series.id,
+        slug: volume.series.slug,
+        title: volume.series.title,
+        isOneshot: volume.series.isOneshot,
+      },
+      mangaStyle: volume.metadataObj?.mangaStyle ?? null,
+      metadata: {
+        ...metadata(volume),
+        genres: volume.genres.map((genre) => genre.name),
+        tags: volume.tags.map((tag) => tag.name),
+      },
+      coverUrl: getMangaCoverUrl(volume),
+      isRead: progress?.is_read ?? false,
+      isFavorite: progress?.is_favorite ?? false,
+      lastPage: progress?.last_page ?? 0,
+      totalPages: progress?.total_pages ?? volume.metadataObj?.pageCount ?? 0,
+    },
+  });
+}

package/dist/src/app/api/offline/sync/route.ts ADDED Viewed

@@ -0,0 +1,66 @@
+import { NextResponse } from "next/server";
+import { createId } from "@paralleldrive/cuid2";
+import { verifySession } from "@/lib/auth/verifySession";
+import { toggleSeriesFavorite, toggleVolumeFavorite } from "@/actions/favorites";
+import { updateReadState } from "@/actions/read";
+import { syncReadingProgress } from "@/actions/progress";
+import { queryOne, execute } from "@/lib/db/query";
+interface Operation {
+  id: string;
+  kind: "favorite" | "read" | "progress" | "series-favorite";
+  payload: Record<string, unknown>;
+}
+async function apply(operation: Operation) {
+  if (operation.kind === "favorite") {
+    return toggleVolumeFavorite({ volumeId: String(operation.payload.volumeId || ""), favorite: Boolean(operation.payload.favorite) });
+  }
+  if (operation.kind === "series-favorite") {
+    return toggleSeriesFavorite({ seriesId: String(operation.payload.seriesId || ""), favorite: Boolean(operation.payload.favorite) });
+  }
+  if (operation.kind === "read") {
+    return updateReadState({
+      volumeId: String(operation.payload.volumeId || ""),
+      read: Boolean(operation.payload.read),
+      totalPages: Number(operation.payload.totalPages || 0),
+      lastReadAt: typeof operation.payload.lastReadAt === "string" ? operation.payload.lastReadAt : undefined,
+      firstRead: typeof operation.payload.firstRead === "string" ? operation.payload.firstRead : undefined,
+    });
+  }
+  return syncReadingProgress({
+    volumeSlug: String(operation.payload.volumeSlug || ""),
+    lastPage: Number(operation.payload.lastPage || 0),
+    totalPages: Number(operation.payload.totalPages || 0),
+    lastReadAt: String(operation.payload.lastReadAt || ""),
+    date: String(operation.payload.date || ""),
+  });
+}
+export async function POST(request: Request) {
+  const user = await verifySession();
+  if (!user) return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+  const body = await request.json() as { operations?: Operation[] };
+  const completed: string[] = [];
+  for (const operation of body.operations ?? []) {
+    if (!operation?.id || !operation.kind) continue;
+    const existing = await queryOne<{ id: string }>(
+      "SELECT id FROM offline_sync_operations WHERE user_id = $1 AND client_operation_id = $2",
+      [user.id, operation.id],
+    );
+    if (existing) {
+      completed.push(operation.id);
+      continue;
+    }
+    const result = await apply(operation);
+    if (!result || "error" in result) continue;
+    await execute(
+      "INSERT INTO offline_sync_operations (id, user_id, client_operation_id) VALUES ($1, $2, $3) ON CONFLICT (user_id, client_operation_id) DO NOTHING",
+      [createId(), user.id, operation.id],
+    );
+    completed.push(operation.id);
+  }
+  return NextResponse.json({ completed });
+}

package/dist/src/app/api/reader/manga/route.ts CHANGED Viewed

@@ -1,10 +1,13 @@
 import { NextResponse } from "next/server";
 import type { NextRequest } from "next/server";
-import { getMangaImages } from "@/actions/reader";
+import { getMangaImages, getReadingProgress } from "@/actions/reader";
 export async function POST(req: NextRequest) {
   try {
-    const { slug } = (await req.json()) as { slug?: string };
+    const { slug, includeProgress } = (await req.json()) as {
+      slug?: string;
+      includeProgress?: boolean;
+    };
     if (!slug) {
       return NextResponse.json({ error: "Missing slug" }, { status: 400 });
@@ -19,7 +22,11 @@ export async function POST(req: NextRequest) {
       );
     }
-    return NextResponse.json(result);
+    const progress = includeProgress
+      ? await getReadingProgress({ slug })
+      : undefined;
+    return NextResponse.json({ ...result, progress });
   } catch (err) {
     console.error("Reader API error:", err);
     return NextResponse.json({ error: "Internal server error" }, { status: 500 });

package/dist/src/app/manifest.ts ADDED Viewed

@@ -0,0 +1,26 @@
+import type { MetadataRoute } from "next";
+export default function manifest(): MetadataRoute.Manifest {
+  return {
+    name: "Bunko Shelf",
+    short_name: "Bunko Shelf",
+    start_url: "/es",
+    display: "standalone",
+    background_color: "#151515",
+    theme_color: "#151515",
+    icons: [
+      {
+        src: "/icons/bunkoshelf-icon-any.png",
+        sizes: "1024x1024",
+        type: "image/png",
+        purpose: "any",
+      },
+      {
+        src: "/icons/bunkoshelf-icon-maskable.png",
+        sizes: "1024x1024",
+        type: "image/png",
+        purpose: "maskable",
+      },
+    ],
+  };
+}

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

@@ -30,6 +30,40 @@ function MetaField({ field, label }: MetaFieldProps) {
   );
 }
+interface AuthorFieldProps extends MetaFieldProps {
+  href: string;
+}
+function AuthorField({ field, label, href }: AuthorFieldProps) {
+  const value = normalize(field);
+  if (!value) return null;
+  const authors = value.split(",").map((author) => author.trim());
+  return (
+    <div className="flex flex-row items-baseline max-w-3xl">
+      <p className="text-sm uppercase w-1/3 md:w-1/5">{label as string}</p>
+      <p className="w-2/3 md:w-4/5">
+        {authors.map((author, idx) => (
+          <span key={`${author}-${idx}`}>
+            {idx > 0 && ", "}
+            <Link
+              href={{
+                pathname: href,
+                query: { author },
+              }}
+              scroll={false}
+              className="hover:text-lilah transition-all duration-300"
+            >
+              {author}
+            </Link>
+          </span>
+        ))}
+      </p>
+    </div>
+  );
+}
 interface MetadataPanelProps {
   meta: Record<string, unknown>;
   lang: Locale;
@@ -47,10 +81,11 @@ export default function MetadataPanel({
 }: MetadataPanelProps) {
   const genres = (meta.genres || []) as { name: string }[];
   const tags = (meta.tags || []) as { name: string }[];
+  const href = `/${lang}/${section}/${linkBase}`;
   return (
     <>
-      <MetaField field={meta.writer} label={intl.manga.author} />
+      <AuthorField field={meta.writer} label={intl.manga.author} href={href} />
       <MetaField field={meta.penciller} label={intl.manga.penciller} />
       <MetaField field={meta.inker} label={intl.manga.inker} />
       <MetaField field={meta.colorist} label={intl.manga.colorist} />
@@ -72,7 +107,7 @@ export default function MetadataPanel({
               <Link
                 key={idx}
                 href={{
-                  pathname: `/${lang}/${section}/${linkBase}`,
+                  pathname: href,
                   query: { genre: genre.name },
                 }}
                 scroll={false}
@@ -95,7 +130,7 @@ export default function MetadataPanel({
               <Link
                 key={idx}
                 href={{
-                  pathname: `/${lang}/${section}/${linkBase}`,
+                  pathname: href,
                   query: { tag: tag.name },
                 }}
                 scroll={false}

package/dist/src/components/library/manga/ReadButtonsSeries.tsx CHANGED Viewed

@@ -5,6 +5,9 @@ import { HeartIcon, HeartOffIcon } from "lucide-react";
 import clsx from "clsx";
 import StatusSelect from "./StatusSelect";
 import { toggleSeriesFavorite } from "@/actions/favorites";
+import OfflineDownloadButton from "@/components/pwa/OfflineDownloadButton";
+import { enqueueOfflineOperation } from "@/lib/client/offlineLibrary";
+import type { LibrarySection } from "@/lib/librarySection";
 import type { Locale, Dictionary } from "@/lib/types";
 interface ReadButtonsSeriesProps {
@@ -12,6 +15,9 @@ interface ReadButtonsSeriesProps {
   intl: Dictionary;
   seriesId: string;
   initFavorite: boolean;
+  seriesSlug: string;
+  section?: LibrarySection;
+  userId?: string;
 }
 export default function ReadButtonsSeries({
@@ -19,6 +25,9 @@ export default function ReadButtonsSeries({
   intl,
   seriesId,
   initFavorite,
+  seriesSlug,
+  section = "manga",
+  userId,
 }: ReadButtonsSeriesProps) {
   const [isFavorite, setIsFavorite] = useState(initFavorite);
   const [isLoading, setIsLoading] = useState(false);
@@ -27,6 +36,12 @@ export default function ReadButtonsSeries({
     setIsLoading(true);
     try {
+      if (!navigator.onLine && userId) {
+        const favorite = !isFavorite;
+        await enqueueOfflineOperation(userId, "series-favorite", { seriesId, favorite });
+        setIsFavorite(favorite);
+        return;
+      }
       const result = await toggleSeriesFavorite({
         seriesId,
         favorite: !isFavorite,
@@ -62,6 +77,7 @@ export default function ReadButtonsSeries({
       >
         {isFavorite ? <HeartOffIcon size={20} /> : <HeartIcon size={20} />}
       </button>
+      <OfflineDownloadButton userId={userId} section={section} slug={seriesSlug} seriesId={seriesId} intl={intl} />
     </div>
   );
 }

package/dist/src/components/library/manga/ReadButtonsVolume.tsx CHANGED Viewed

@@ -15,6 +15,8 @@ import { toggleVolumeFavorite } from "@/actions/favorites";
 import { updateReadState } from "@/actions/read";
 import { syncReadingProgress } from "@/actions/progress";
 import { sendPush } from "@/actions/web-push";
+import OfflineDownloadButton from "@/components/pwa/OfflineDownloadButton";
+import { enqueueOfflineOperation, getOfflineImages, updateOfflineVolume } from "@/lib/client/offlineLibrary";
 import {
   getLibraryRootHref,
   type LibrarySection,
@@ -34,6 +36,7 @@ interface ReadButtonsVolumeProps {
   communityRating: number | null;
   initialPersonalRating: number | null;
   section?: LibrarySection;
+  userId?: string;
 }
 export default function ReadButtonsVolume({
@@ -49,6 +52,7 @@ export default function ReadButtonsVolume({
   communityRating,
   initialPersonalRating,
   section = "manga",
+  userId,
 }: ReadButtonsVolumeProps) {
   const router = useRouter();
   const [isFavorite, setIsFavorite] = useState(initFavorite);
@@ -56,11 +60,16 @@ export default function ReadButtonsVolume({
   const [isLoading, setIsLoading] = useState(false);
   const [isReaderOpen, setIsReaderOpen] = useState(false);
   const [isYoureiMode, setIsYoureiMode] = useState(false);
+  const [offlineImages, setOfflineImages] = useState<string[] | undefined>();
   const readingDirection =
     mangaStyle === "YesLTR" || mangaStyle === "No" ? "ltr" : "rtl";
-  const openNormalReader = () => {
+  const openNormalReader = async () => {
+    if (userId) {
+      const localImages = await getOfflineImages(userId, volumeId);
+      if (localImages.length) setOfflineImages(localImages);
+    }
     setIsYoureiMode(false);
     setIsReaderOpen(true);
   };
@@ -88,6 +97,19 @@ export default function ReadButtonsVolume({
     setIsLoading(true);
     try {
+      if (!navigator.onLine && userId) {
+        const localImages = offlineImages?.length ? offlineImages : await getOfflineImages(userId, volumeId);
+        const totalPages = localImages.length;
+        if (!totalPages) return;
+        setOfflineImages(localImages);
+        const nextRead = !isRead;
+        const now = new Date();
+        const localDate = getLocalDateString();
+        await updateOfflineVolume(userId, volumeId, { isRead: nextRead, lastPage: nextRead ? totalPages - 1 : 0, totalPages });
+        await enqueueOfflineOperation(userId, "read", { volumeId, read: nextRead, totalPages, lastReadAt: now.toISOString(), firstRead: localDate });
+        setIsRead(nextRead);
+        return;
+      }
       const imagesRes = await fetch("/api/reader/manga", {
         method: "POST",
         headers: { "Content-Type": "application/json" },
@@ -134,6 +156,13 @@ export default function ReadButtonsVolume({
     setIsLoading(true);
     try {
+      if (!navigator.onLine && userId) {
+        const nextFavorite = !isFavorite;
+        await updateOfflineVolume(userId, volumeId, { isFavorite: nextFavorite });
+        await enqueueOfflineOperation(userId, "favorite", { volumeId, favorite: nextFavorite });
+        setIsFavorite(nextFavorite);
+        return;
+      }
       const result = await toggleVolumeFavorite({
         volumeId,
         favorite: !isFavorite,
@@ -177,6 +206,13 @@ export default function ReadButtonsVolume({
           date: today,
         };
+        if (!navigator.onLine && userId) {
+          await updateOfflineVolume(userId, volumeId, { lastPage, totalPages, isRead: isFinished });
+          await enqueueOfflineOperation(userId, "progress", body);
+          if (isFinished) setIsRead(true);
+          return;
+        }
         const data = await syncReadingProgress(body);
         if (!data || !data.success) {
@@ -262,6 +298,8 @@ export default function ReadButtonsVolume({
         >
           {isFavorite ? <HeartOffIcon size={20} /> : <HeartIcon size={20} />}
         </button>
+        <OfflineDownloadButton userId={userId} section={section} slug={slug} volumeId={volumeId} intl={intl} />
       </div>
       <MangaReader
@@ -278,6 +316,7 @@ export default function ReadButtonsVolume({
         volumeId={volumeId}
         communityRating={communityRating}
         initialPersonalRating={initialPersonalRating}
+        offlineImages={offlineImages}
       />
     </>
   );

package/dist/src/components/library/manga/SeriesContent.tsx CHANGED Viewed

@@ -85,6 +85,9 @@ export default function SeriesContent({
             intl={intl}
             seriesId={serieData.id as string}
             initFavorite={isFavorite}
+            seriesSlug={serieData.slug as string}
+            section={section}
+            userId={user?.id}
           />
           <div className="mt-8">
@@ -172,6 +175,7 @@ export default function SeriesContent({
                   isDragging={false}
                   seriesSlug={null}
                   progressRatio={getVolumeProgressRatio(progress)}
+                  offlineVolumeId={volume.id as string}
                   intl={intl}
                   className="font-roboto font-bold leading-5 2xl:leading-5.5 text-base 2xl:text-lg"
                 />

package/dist/src/components/library/manga/VolumesContent.tsx CHANGED Viewed

@@ -117,6 +117,7 @@ export default function VolumesContent({
             communityRating={meta.communityRating as number | null}
             initialPersonalRating={personalRating}
             section={section}
+            userId={user?.id}
           />
           <div className="mt-8">

package/dist/src/components/library/manga/grid/SeriesIndex.tsx CHANGED Viewed

@@ -113,6 +113,7 @@ export default async function SeriesIndex({
               progressRatio={progressRatio}
               isDragging={false}
               seriesSlug={entry.slug}
+              offlineSeriesId={entry.id}
               intl={intl}
               className="font-roboto font-bold leading-5 2xl:leading-5.5 text-base 2xl:text-lg"
             />

package/dist/src/components/library/manga/grid/SeriesIndexFav.tsx CHANGED Viewed

@@ -115,6 +115,7 @@ export default async function SeriesIndexFav({
               progressRatio={progressRatio}
               isDragging={false}
               seriesSlug={entry.slug}
+              offlineSeriesId={entry.id}
               intl={intl}
               className="font-roboto font-bold leading-5 2xl:leading-5.5 text-base 2xl:text-lg"
             />