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

@itsmrtr/bunkoshelf 1.6.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 (1456) hide show

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/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/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/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"
             />

package/dist/src/components/pwa/OfflineDownloadButton.tsx ADDED Viewed

@@ -0,0 +1,124 @@
+"use client";
+import { useEffect, useState } from "react";
+import { DownloadIcon, Trash2Icon } from "lucide-react";
+import clsx from "clsx";
+import {
+  downloadSeriesBySlug,
+  downloadVolumeBySlug,
+  getDownload,
+  getReadyVolumes,
+  removeOfflineSeries,
+  removeOfflineVolume,
+  type OfflineDownload,
+} from "@/lib/client/offlineLibrary";
+import type { LibrarySection } from "@/lib/librarySection";
+import type { Dictionary } from "@/lib/types";
+interface OfflineDownloadButtonProps {
+  userId?: string;
+  section: LibrarySection;
+  slug: string;
+  volumeId?: string;
+  seriesId?: string;
+  intl: Dictionary;
+}
+function ProgressRing({ value }: { value: number }) {
+  const radius = 8;
+  const circumference = 2 * Math.PI * radius;
+  return (
+    <svg width="20" height="20" viewBox="0 0 20 20" aria-hidden="true">
+      <circle cx="10" cy="10" r={radius} fill="none" stroke="currentColor" strokeOpacity=".3" strokeWidth="2" />
+      <circle cx="10" cy="10" r={radius} fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" transform="rotate(-90 10 10)" strokeDasharray={circumference} strokeDashoffset={circumference * (1 - value)} />
+    </svg>
+  );
+}
+export default function OfflineDownloadButton({ userId, section, slug, volumeId, seriesId, intl }: OfflineDownloadButtonProps) {
+  const [download, setDownload] = useState<OfflineDownload | null>(null);
+  const [seriesProgress, setSeriesProgress] = useState<{ completed: number; total: number } | null>(null);
+  const offline = intl.offline as Record<string, string> | undefined;
+  useEffect(() => {
+    if (!userId || !volumeId) return;
+    const load = () => void getDownload(userId, volumeId).then(setDownload);
+    load();
+    window.addEventListener("bunko:offline-change", load);
+    return () => window.removeEventListener("bunko:offline-change", load);
+  }, [userId, volumeId]);
+  const isSeries = !!seriesId;
+  const isReady = isSeries
+    ? Boolean(seriesProgress && seriesProgress.completed === seriesProgress.total && seriesProgress.total)
+    : download?.status === "ready";
+  const progress = isSeries
+    ? seriesProgress ? seriesProgress.completed / seriesProgress.total : 0
+    : download?.totalPages ? download.completedPages / download.totalPages : 0;
+  const isDownloading = isSeries ? !!seriesProgress && !isReady : download?.status === "downloading" || download?.status === "queued";
+  useEffect(() => {
+    if (!userId || !seriesId) return;
+    const load = async () => {
+      const volumes = await getReadyVolumes(userId, section);
+      const ready = volumes.filter((volume) => volume.seriesId === seriesId).length;
+      if (ready) setSeriesProgress((current) => current?.total && current.completed < current.total ? { completed: ready, total: current.total } : { completed: ready, total: ready });
+    };
+    void load();
+    window.addEventListener("bunko:offline-change", load);
+    return () => window.removeEventListener("bunko:offline-change", load);
+  }, [section, seriesId, userId]);
+  const handleClick = async () => {
+    if (!userId) return;
+    if (isReady) {
+      const message = isSeries ? offline?.removeSeries : offline?.removeVolume;
+      if (!window.confirm(message || "¿Quieres eliminar esta descarga offline?")) return;
+      if (isSeries && seriesId) await removeOfflineSeries(userId, seriesId);
+      if (!isSeries && volumeId) await removeOfflineVolume(userId, volumeId);
+      setSeriesProgress(null);
+      setDownload(null);
+      return;
+    }
+    if (!navigator.onLine || isDownloading) return;
+    try {
+      if (isSeries && seriesId) {
+        if (!window.confirm(offline?.downloadSeries || "¿Quieres descargar todos los tomos de esta serie?")) return;
+        setSeriesProgress({ completed: 0, total: 1 });
+        await downloadSeriesBySlug(userId, section, slug, (completed, total) => setSeriesProgress({ completed, total }));
+      } else {
+        setDownload({
+          key: `${userId}:${volumeId}`,
+          userId,
+          volumeId: volumeId!,
+          status: "queued",
+          completedPages: 0,
+          totalPages: 0,
+          size: 0,
+          updatedAt: new Date().toISOString(),
+        });
+        await downloadVolumeBySlug(userId, section, slug, setDownload);
+      }
+    } catch (error) {
+      console.error("Offline download error:", error);
+      window.alert(offline?.downloadError || "No se pudo completar la descarga");
+      setSeriesProgress(null);
+    }
+  };
+  const title = isReady ? offline?.remove : isDownloading ? offline?.downloading : offline?.download;
+  const online = typeof navigator !== "undefined" && navigator.onLine;
+  return (
+    <button
+      onClick={handleClick}
+      disabled={!userId || (!online && !isReady) || isDownloading}
+      title={title || "Descargar para leer sin conexión"}
+      className={clsx(
+        "p-3 2xl:p-4 rounded-lg leading-none border transition-all duration-300 cursor-pointer",
+        isReady ? "text-onix bg-sand border-sand hover:bg-pearl hover:border-pearl" : "text-sand bg-blackamber border-blackamber hover:text-onix hover:bg-pearl hover:border-pearl",
+      )}
+    >
+      {isDownloading ? <ProgressRing value={progress} /> : isReady ? <Trash2Icon size={20} /> : <DownloadIcon size={20} />}
+    </button>
+  );
+}