@itsmrtr/bunkoshelf 1.7.0 → 1.8.0

package/dist/src/components/pwa/OfflineGate.tsx

@@ -1,140 +1,311 @@
 "use client";
 
-import { useEffect, useState } from "react";
-import { CloudOffIcon, DownloadIcon, LibraryBigIcon } from "lucide-react";
+import { useEffect, useMemo, useState } from "react";
 import Link from "next/link";
-import MangaReader from "@/components/reader/MangaReader";
+import { BookAIcon, BookCheckIcon, BookCopyIcon, BookMarkedIcon, BookPlusIcon, CloudOffIcon, ConstructionIcon, GhostIcon, HeartIcon, LibraryBigIcon, Settings2Icon, UserRoundIcon } from "lucide-react";
 import MangaCard from "@/components/ui/MangaCard";
-import { enqueueOfflineOperation, getOfflineImages, getReadyVolumes, offlinePageUrl, updateOfflineVolume, type OfflineVolume } from "@/lib/client/offlineLibrary";
-import type { Dictionary, Locale } from "@/lib/types";
+import HeroKeepRead from "@/components/library/manga/row/HeroKeepRead";
+import SidebarMisc from "@/components/ui/SidebarMisc";
+import FavoritesNav from "@/components/favorites/FavoritesNav";
+import CatalogNav from "@/components/catalog/CatalogNav";
+import FiltersDrawer from "@/components/library/manga/FiltersDrawer";
+import SearchComp from "@/components/search/SearchComp";
+import MangaRowCarousel, { type VolEntry } from "@/components/library/manga/row/MangaRowCarousel";
+import DemographicsTiles from "@/components/library/manga/Demographics";
+import HomeKeepRead from "@/components/home/manga/HeroKeepRead";
+import TileStreak from "@/components/stats/TileStreak";
+import TileLastRead from "@/components/stats/TileLastRead";
+import TileDaysRead from "@/components/stats/TileDaysRead";
+import TileMonthRead from "@/components/stats/TileMonthRead";
+import TileAllRead from "@/components/stats/TileAllRead";
+import TileMonthTrend from "@/components/stats/TileMonthTrend";
+import ProfileNav from "@/components/profile/ProfileNav";
+import SettingsNav from "@/components/settings/SettingsNav";
+import Pagination from "@/components/ui/Pagination";
+import ReadButtonsVolume from "@/components/library/manga/ReadButtonsVolume";
+import ReadButtonsSeries from "@/components/library/manga/ReadButtonsSeries";
+import MetadataPanel from "@/components/library/manga/MetadataPanel";
+import MangaSummary from "@/components/library/manga/MangaSummary";
+import VolumeRating from "@/components/library/manga/VolumeRating";
+import SeriesRating from "@/components/library/manga/SeriesRating";
+import Separator from "@/components/ui/Separator";
+import Tabs from "@/components/ui/Tabs";
+import { LIBRARY_PAGE_SIZE } from "@/lib/libraryPagination";
+import { getLibraryScope, type LibrarySection } from "@/lib/librarySection";
+import { getReadyVolumes, offlinePageUrl, type OfflineVolume } from "@/lib/client/offlineLibrary";
+import { ageRatingMap } from "@/lib/mangaMetadata";
+import type { Dictionary, Locale, Session } from "@/lib/types";
 import { usePwa } from "./PwaProvider";
 
 function OfflineUnavailable({ intl }: { intl: Dictionary }) {
+  return <div className="flex flex-col items-center justify-center h-screen gap-4 p-4"><CloudOffIcon size={64} /><h2 className="font-roboto text-center">{(intl.offline?.unavailable as string) || "No disponible sin conexión"}</h2></div>;
+}
+
+function offlineCover(userId: string, volume: OfflineVolume) {
+  return offlinePageUrl(userId, volume.id, -1);
+}
+
+function progressRatio(volume: OfflineVolume) {
+  return volume.totalPages > 0 ? Math.min(1, (volume.lastPage + 1) / volume.totalPages) : 0;
+}
+
+function relationItems(value: unknown) {
+  if (!Array.isArray(value)) return [];
+  return value.map((item) => typeof item === "string" ? { name: item } : item).filter(Boolean);
+}
+
+function volumeMetadata(volume: OfflineVolume): Record<string, unknown> {
+  return {
+    ...volume.metadata,
+    title: volume.title,
+    series: volume.seriesTitle,
+    mangaStyle: volume.mangaStyle,
+    pageCount: volume.metadata.pageCount ?? volume.totalPages,
+    genres: relationItems(volume.metadata.genres),
+    tags: relationItems(volume.metadata.tags),
+  };
+}
+
+function OfflineCover({ alt, src }: { alt: string; src: string }) {
   return (
-    <div className="flex flex-col items-center justify-center h-screen gap-4 p-4">
-      <CloudOffIcon size={64} />
-      <h2 className="font-roboto text-center">{(intl.offline?.unavailable as string) || "No disponible sin conexión"}</h2>
+    <div className="mb-8 md:mb-0 md:mr-4 px-16 md:px-0 md:sticky md:top-4 md:self-start">
+      {/* eslint-disable-next-line @next/next/no-img-element */}
+      <img src={src} alt={alt} className="w-full h-auto object-contain rounded-lg" />
     </div>
   );
 }
 
-function OfflineVolumeReader({ volume, intl, userId }: { volume: OfflineVolume; intl: Dictionary; userId: string }) {
-  const [open, setOpen] = useState(false);
-  const [images, setImages] = useState<string[]>([]);
-  const openReader = async () => {
-    setImages(await getOfflineImages(userId, volume.id));
-    setOpen(true);
-  };
-  const closeReader = async () => {
-    const saved = localStorage.getItem(`reader-progress:${volume.slug}`);
-    if (saved) {
-      const { lastPage, totalPages, lastReadAt } = JSON.parse(saved) as { lastPage: number; totalPages: number; lastReadAt: string };
-      const now = new Date();
-      const date = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, "0")}-${String(now.getDate()).padStart(2, "0")}`;
-      await updateOfflineVolume(userId, volume.id, { lastPage, totalPages, isRead: lastPage >= totalPages - 1 });
-      await enqueueOfflineOperation(userId, "progress", { volumeSlug: volume.slug, lastPage, totalPages, lastReadAt, date });
-    }
-    setOpen(false);
-  };
+function MetadataBadges({ intl, meta }: { intl: Dictionary; meta: Record<string, unknown> }) {
+  const ageMin = ageRatingMap(meta.ageRating as string);
+  const ageBadgeClass = `text-sm uppercase rounded-md px-3 py-1 mr-2 ${
+    ageMin !== null && ageMin >= 18
+      ? "bg-red-500"
+      : ageMin !== null && ageMin >= 16
+        ? "bg-[#f5a524] text-onix"
+        : "bg-neutral-700"
+  }`;
+  const isWesternReading = meta.mangaStyle === "YesLTR" || meta.mangaStyle === "No";
+
   return (
-    <>
-      <button onClick={openReader} className="flex items-center font-bold px-5 py-2 rounded-lg leading-none uppercase text-sand bg-lilah border border-blackamber hover:text-onix hover:bg-pearl hover:border-pearl cursor-pointer transition-all duration-300">
-        <DownloadIcon size={20} className="mr-2" />
-        {intl.manga.read as string}
-      </button>
-      <MangaReader
-        isOpen={open}
-        onClose={() => void closeReader()}
-        slug={volume.slug}
-        intl={intl}
-        isYoureiMode={false}
-        readingDirection={volume.mangaStyle === "YesLTR" || volume.mangaStyle === "No" ? "ltr" : "rtl"}
-        coverSrc={offlinePageUrl(userId, volume.id, -1)}
-        mangaTitle={volume.title}
-        volumeId={volume.id}
-        communityRating={typeof volume.metadata.communityRating === "number" ? volume.metadata.communityRating : null}
-        initialPersonalRating={null}
-        offlineImages={images}
-      />
-    </>
+    <div className="mt-2">
+      {meta.ageRating ? <span className={ageBadgeClass}>{ageMin !== null ? `${ageMin}+` : meta.ageRating as string}</span> : null}
+      {meta.languageISO ? <span className="text-sm uppercase bg-neutral-700 rounded-md px-3 py-1 mr-2">{meta.languageISO as string}</span> : null}
+      <span className="text-sm uppercase bg-neutral-700 rounded-md px-3 py-1">
+        {isWesternReading ? intl.manga.readingEn as string : intl.manga.readingJp as string}
+      </span>
+    </div>
   );
 }
 
-function OfflineLibrary({ path, lang, intl, userId }: { path: string; lang: Locale; intl: Dictionary; userId: string }) {
+function VolumeDetail({ volume, lang, intl, userId, user }: { volume: OfflineVolume; lang: Locale; intl: Dictionary; userId: string; user: Session | null }) {
+  const meta = volumeMetadata(volume);
+
+  return (
+    <div className="p-4">
+      <section className="flex flex-col md:flex-row">
+        <div className="w-full md:w-5/12 2xl:w-1/3">
+          <OfflineCover src={offlineCover(userId, volume)} alt={`Cover for ${volume.title}`} />
+        </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">{volume.title}</h1>
+          {!volume.isOneshot && (
+            <div className="py-2">
+              <Link href={`/${lang}/${volume.section}/${volume.seriesSlug}`} className="italic hover:underline">
+                {intl.manga.series as string} {volume.seriesTitle}
+              </Link>
+            </div>
+          )}
+          <ReadButtonsVolume
+            lang={lang}
+            intl={intl}
+            volumeId={volume.id}
+            volumeTitle={volume.title}
+            coverSrc={offlineCover(userId, volume)}
+            initFavorite={volume.isFavorite}
+            initRead={volume.isRead}
+            slug={volume.slug}
+            mangaStyle={volume.mangaStyle ?? ""}
+            communityRating={typeof meta.communityRating === "number" ? meta.communityRating : null}
+            initialPersonalRating={null}
+            section={volume.section}
+            userId={user?.id}
+          />
+          <div className="mt-8">
+            <VolumeRating volumeId={volume.id} communityRating={typeof meta.communityRating === "number" ? meta.communityRating : null} initialPersonalRating={null} />
+          </div>
+          <MetadataBadges intl={intl} meta={meta} />
+          <p className="mt-4 flex items-center gap-2">
+            {meta.year ? meta.year as number : null}
+            {meta.pageCount ? <>&bull; {meta.pageCount as number} {intl.manga.pages as string}</> : null}
+            {volume.isOneshot && <span className="text-xs uppercase bg-lilah border border-lilah rounded px-1.5">Oneshot</span>}
+          </p>
+          {meta.summary ? <><h2 className="text-sm mt-8 mb-1">{intl.manga.synopsis as string}</h2><MangaSummary meta={meta} intl={intl} /></> : null}
+          <Tabs tabs={[{ label: intl.manga.details as string, content: <MetadataPanel meta={meta} lang={lang} intl={intl} section={volume.section} /> }]} />
+        </div>
+      </section>
+    </div>
+  );
+}
+
+function SeriesDetail({ volumes, lang, intl, userId, user }: { volumes: OfflineVolume[]; lang: Locale; intl: Dictionary; userId: string; user: Session | null }) {
+  const sortedVolumes = useMemo(() => volumes.slice().sort((a, b) => a.title.localeCompare(b.title, undefined, { numeric: true })), [volumes]);
+  const first = sortedVolumes[0];
+  if (!first) return <OfflineUnavailable intl={intl} />;
+  const meta = volumeMetadata(first);
+  const averageRating = typeof meta.communityRating === "number" ? meta.communityRating : null;
+
+  return (
+    <div className="p-4">
+      <section className="flex flex-col md:flex-row">
+        <div className="w-full md:w-5/12 2xl:w-1/3">
+          <OfflineCover src={offlineCover(userId, first)} alt={`Cover for ${first.seriesTitle}`} />
+        </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">{first.seriesTitle}</h1>
+          <ReadButtonsSeries lang={lang} intl={intl} seriesId={first.seriesId} initFavorite={sortedVolumes.some((volume) => volume.isFavorite)} seriesSlug={first.seriesSlug} section={first.section} userId={user?.id} />
+          <SeriesRating rating={averageRating} />
+          <MetadataBadges intl={intl} meta={meta} />
+          <p className="mt-4">{meta.year ? meta.year as number : null} &bull; {sortedVolumes.length} {intl.manga.volumes as string}</p>
+          {meta.summary ? <><h2 className="text-sm mt-8 mb-1">{intl.manga.synopsis as string} (vol. 1)</h2><MangaSummary meta={meta} intl={intl} /></> : null}
+          <Separator />
+          <MetadataPanel meta={meta} lang={lang} intl={intl} linkBase="series" section={first.section} />
+        </div>
+      </section>
+      <section>
+        <Separator />
+        <h2>{intl.manga.seriesVolumes as string}</h2>
+        <div className="grid grid-cols-2 md:grid-cols-5 2xl:grid-cols-7 gap-4 mt-4">
+          {sortedVolumes.map((volume) => <MangaCard key={volume.id} title={volume.title} href={`/${lang}/${volume.section}/volume/${volume.slug}`} isSeries={false} isOneshot={false} onGoing={false} onPause={false} volumeCount={null} cover={offlineCover(userId, volume)} isDragging={false} seriesSlug={null} progressRatio={progressRatio(volume)} offlineVolumeId={volume.id} intl={intl} className="font-roboto font-bold leading-5 2xl:leading-5.5 text-base 2xl:text-lg" />)}
+        </div>
+      </section>
+    </div>
+  );
+}
+
+function OfflineVolumesIndex({ volumes, filterVolumes, lang, intl, userId, favorites }: { volumes: OfflineVolume[]; filterVolumes: OfflineVolume[]; lang: Locale; intl: Dictionary; userId: string; favorites: boolean }) {
+  const page = Math.max(1, Number(new URLSearchParams(window.location.search).get("page") || "1"));
+  const totalPages = Math.max(1, Math.ceil(volumes.length / LIBRARY_PAGE_SIZE));
+  const pageVolumes = volumes.slice((page - 1) * LIBRARY_PAGE_SIZE, page * LIBRARY_PAGE_SIZE);
+  const section = volumes[0]?.section ?? "manga";
+  const title = favorites ? section === "others" ? intl.favorites.ttVolumesOthers : intl.favorites.ttVolumesManga : intl.manga.allVolumes;
+
+  if (!volumes.length && favorites) return <div className="flex flex-col items-center justify-center h-80 gap-4"><GhostIcon size={64} /><h2>{intl.misc.noVolumesFav as string}</h2></div>;
+
+  return <><div className={favorites ? "" : "flex items-center mb-4"}><h2 className={favorites ? "flex items-center mb-4" : "flex items-center text-base md:text-lg mr-4"}>{favorites ? <BookCopyIcon size={28} className="mr-2" /> : <LibraryBigIcon size={28} className="mr-2" />}{title as string}</h2>{!favorites && <FiltersDrawer intl={intl} scope={getLibraryScope(section)} offlineVolumes={filterVolumes} />}</div><section className={favorites ? "grid grid-cols-2 gap-4 md:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5" : "grid grid-cols-2 md:grid-cols-5 2xl:grid-cols-7 gap-4"}>{pageVolumes.map((volume) => <MangaCard key={volume.id} title={volume.title} href={`/${lang}/${volume.section}/volume/${volume.slug}`} isSeries={false} isOneshot={volume.isOneshot} onGoing={false} onPause={false} volumeCount={null} cover={offlineCover(userId, volume)} progressRatio={progressRatio(volume)} isDragging={false} seriesSlug={null} offlineVolumeId={volume.id} intl={intl} className="font-roboto font-bold leading-5 2xl:leading-5.5 text-base 2xl:text-lg" />)}</section>{totalPages > 1 && <div className="mt-8"><Pagination currentPage={page} totalPages={totalPages} intl={intl} /></div>}</>;
+}
+
+function OfflineSeriesIndex({ volumes, filterVolumes, lang, intl, userId, favorites }: { volumes: OfflineVolume[]; filterVolumes: OfflineVolume[]; lang: Locale; intl: Dictionary; userId: string; favorites: boolean }) {
+  const series = Array.from(new Map(volumes.filter((volume) => !volume.isOneshot).map((volume) => [volume.seriesId, volume])).values());
+  const page = Math.max(1, Number(new URLSearchParams(window.location.search).get("page") || "1"));
+  const totalPages = Math.max(1, Math.ceil(series.length / LIBRARY_PAGE_SIZE));
+  const pageSeries = series.slice((page - 1) * LIBRARY_PAGE_SIZE, page * LIBRARY_PAGE_SIZE);
+  const section = volumes[0]?.section ?? "manga";
+  const title = favorites ? section === "others" ? intl.favorites.ttSeriesOthers : intl.favorites.ttSeriesManga : intl.manga.allSeries;
+
+  if (!series.length && favorites) return <div className="flex flex-col items-center justify-center h-80 gap-4"><GhostIcon size={64} /><h2>{intl.misc.noSeriesFav as string}</h2></div>;
+
+  return <><div className={favorites ? "" : "flex items-center mb-4"}><h2 className={favorites ? "flex items-center mb-4" : "flex items-center text-base md:text-lg mr-4"}><LibraryBigIcon size={28} className="mr-2" />{title as string}</h2>{!favorites && <FiltersDrawer intl={intl} scope={getLibraryScope(section)} offlineVolumes={filterVolumes} />}</div><section className={favorites ? "grid grid-cols-2 gap-4 md:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5" : "grid grid-cols-2 gap-4 md:grid-cols-5 2xl:grid-cols-7"}>{pageSeries.map((seriesVolume) => { const seriesVolumes = volumes.filter((volume) => volume.seriesId === seriesVolume.seriesId); const progress = seriesVolumes.length > 0 ? seriesVolumes.filter((volume) => volume.isRead).length / seriesVolumes.length : 0; return <MangaCard key={seriesVolume.seriesId} title={seriesVolume.seriesTitle} href={`/${lang}/${seriesVolume.section}/${seriesVolume.seriesSlug}`} isSeries isOneshot={false} onGoing={seriesVolume.seriesStatus === "ONGOING"} onPause={seriesVolume.seriesStatus === "HIATUS"} volumeCount={seriesVolumes.length} cover={offlineCover(userId, seriesVolume)} progressRatio={progress} isDragging={false} seriesSlug={seriesVolume.seriesSlug} offlineSeriesId={seriesVolume.seriesId} intl={intl} className="font-roboto font-bold leading-5 2xl:leading-5.5 text-base 2xl:text-lg" />; })}</section>{totalPages > 1 && <div className="mt-8"><Pagination currentPage={page} totalPages={totalPages} intl={intl} /></div>}</>;
+}
+
+function OfflineLibraryHome({ volumes, lang, intl, userId, section }: { volumes: OfflineVolume[]; lang: Locale; intl: Dictionary; userId: string; section: LibrarySection }) {
+  const entries = (items: OfflineVolume[]): VolEntry[] => items.map((volume) => ({
+    id: volume.id,
+    slug: volume.slug,
+    title: volume.title,
+    isOneshot: volume.isOneshot,
+    coverImage: offlineCover(userId, volume),
+    section,
+    meta: { title: volume.title },
+    progressRatio: progressRatio(volume),
+  }));
+  const recent = volumes.slice().sort((a, b) => (b.downloadedAt ?? "").localeCompare(a.downloadedAt ?? "")).slice(0, 12);
+  const recentlyRead = volumes.filter((volume) => volume.isRead).slice(0, 12);
+  const nextBySeries = new Map<string, OfflineVolume>();
+  volumes.filter((volume) => !volume.isRead && volume.lastPage === 0).forEach((volume) => {
+    if (!nextBySeries.has(volume.seriesId)) nextBySeries.set(volume.seriesId, volume);
+  });
+
+  return <div className="p-4"><MangaRowCarousel entries={entries(Array.from(nextBySeries.values()).slice(0, 12))} lang={lang} intl={intl} section={section} className="mt-4" header={<h2 className="flex items-center text-base md:text-lg"><BookMarkedIcon size={28} className="mr-2" />{intl.libraries.inProgress as string}</h2>} />{section === "manga" && <DemographicsTiles intl={intl} lang={lang} section={section} />}<MangaRowCarousel entries={entries(recent)} lang={lang} intl={intl} section={section} header={<h2 className="flex items-center text-base md:text-lg"><BookPlusIcon size={28} className="mr-2" />{intl.libraries.recentlyAdded as string}</h2>} /><MangaRowCarousel entries={entries(recentlyRead)} lang={lang} intl={intl} section={section} header={<h2 className="flex items-center text-base md:text-lg"><BookCheckIcon size={28} className="mr-2" />{intl.libraries.recentlyRead as string}</h2>} /></div>;
+}
+
+function OfflineHome({ lang, intl, userId }: { lang: Locale; intl: Dictionary; userId: string }) {
   const [volumes, setVolumes] = useState<OfflineVolume[] | null>(null);
-  useEffect(() => {
-    const load = () => void getReadyVolumes(userId).then(setVolumes);
-    load();
-    window.addEventListener("bunko:offline-change", load);
-    return () => window.removeEventListener("bunko:offline-change", load);
-  }, [userId]);
+  useEffect(() => { const load = () => void getReadyVolumes(userId).then(setVolumes); load(); window.addEventListener("bunko:offline-change", load); return () => window.removeEventListener("bunko:offline-change", load); }, [userId]);
   if (!volumes) return null;
+  if (!volumes.length) return <OfflineUnavailable intl={intl} />;
 
-  const section = path.includes(`/${lang}/others`) || path.includes("/favorites/others") ? "others" : "manga";
-  const favoritesOnly = path.includes("/favorites/");
-  const scoped = volumes.filter((volume) => volume.section === section && (!favoritesOnly || volume.isFavorite));
-  const volumeSlug = path.match(/\/volume\/([^/]+)/)?.[1];
-  const seriesSlug = !volumeSlug && path.match(new RegExp(`/${section}/([^/?]+)`))?.[1];
+  const active = volumes.find((volume) => volume.lastPage > 0 && volume.lastPage < volume.totalPages - 1) ?? null;
+  const entries: VolEntry[] = volumes.slice().sort((a, b) => (b.downloadedAt ?? "").localeCompare(a.downloadedAt ?? "")).slice(0, 8).map((volume) => ({ id: volume.id, slug: volume.slug, title: volume.title, isOneshot: volume.isOneshot, coverImage: offlineCover(userId, volume), section: volume.section, meta: { title: volume.title }, progressRatio: progressRatio(volume) }));
+  const stats = intl.stats as Record<string, string>;
+  const monthDays = new Date(new Date().getFullYear(), new Date().getMonth() + 1, 0).getDate();
+  const readCount = volumes.filter((volume) => volume.isRead).length;
+
+  return <div className="relative"><div className="fixed inset-0 -z-10 bg-seigaiha-pattern-w" /><div className="fixed inset-0 -z-20 bg-pearl" /><div className="bg-pearl flex flex-col p-4 mb-24 gap-4 md:flex-row md:mb-0"><div className="w-full md:w-1/2"><HomeKeepRead lang={lang} intl={intl} entry={active ? { id: active.id, title: active.title, slug: active.slug, isOneshot: active.isOneshot, coverImage: offlineCover(userId, active), section: active.section, meta: { title: active.title }, lastPage: active.lastPage, totalPages: active.totalPages } : null} /></div><div className="w-full md:w-1/2 flex flex-col justify-between"><div className="group"><section className="grid grid-cols-2 md:grid-cols-3 mt-4 w-full gap-4"><TileStreak title={stats.streak} dailyReadingDates={[]} daysLabel={stats.days} bgColor="bg-sand" textColor="text-onix" /><TileLastRead title={stats.lastRead} lastRead="—" bgColor="bg-sand" textColor="text-onix" /><TileDaysRead title={stats.daysRead} daysReadCount={0} daysInMonth={monthDays} bgColor="bg-sand" textColor="text-onix" /><TileMonthRead title={stats.monthRead} count={0} goal={null} bgColor="bg-sand" textColor="text-onix" /><TileAllRead title={stats.mangaRead} readCount={readCount} totalVolumes={volumes.length} bgColor="bg-sand" textColor="text-onix" /><TileMonthTrend title={stats.prevMonth} percentageChange={0} trend="flat" bgColor="bg-sand" textColor="text-onix" /></section></div><MangaRowCarousel entries={entries} lang={lang} intl={intl} header={<h2 className="flex items-center text-onix text-base md:text-lg"><BookPlusIcon size={28} className="mr-2" />{(intl.libraries as Record<string, string>).recentlyAdded}</h2>} /></div></div></div>;
+}
+
+function OfflineLibrary({ path, lang, intl, userId, user }: { path: string; lang: Locale; intl: Dictionary; userId: string; user: Session | null }) {
+  const [volumes, setVolumes] = useState<OfflineVolume[] | null>(null);
+  useEffect(() => { const load = () => void getReadyVolumes(userId).then(setVolumes); load(); window.addEventListener("bunko:offline-change", load); return () => window.removeEventListener("bunko:offline-change", load); }, [userId]);
+  if (!volumes) return null;
+
+  const section: LibrarySection = path.includes(`/${lang}/others`) || path.includes("/favorites/others") ? "others" : "manga";
+  const favorites = path.includes(`/${lang}/favorites`);
+  const scoped = volumes.filter((volume) => volume.section === section && (!favorites || volume.isFavorite));
+  const volumeSlug = path.match(/\/volume\/([^/?]+)/)?.[1];
+  const seriesSlug = !volumeSlug ? path.match(new RegExp(`/${section}/([^/?]+)`))?.[1] : null;
   const selectedVolume = volumeSlug ? scoped.find((volume) => volume.slug === volumeSlug) : null;
-  const selectedSeries = seriesSlug && !["series", "volumes", "toread"].includes(seriesSlug)
-    ? scoped.filter((volume) => volume.seriesSlug === seriesSlug)
-    : null;
-
-  if (selectedVolume) {
-    return (
-      <div className="p-4">
-        <section className="flex flex-col md:flex-row">
-          <div className="w-full md:w-5/12 2xl:w-1/3 px-16 md:px-0">
-            {/* Offline blobs cannot pass through Next image optimization. */}
-            {/* eslint-disable-next-line @next/next/no-img-element */}
-            <img src={offlinePageUrl(userId, selectedVolume.id, -1)} alt={selectedVolume.title} className="w-full h-auto object-contain rounded-lg" />
-          </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">{selectedVolume.title}</h1>
-            {!selectedVolume.isOneshot && <Link href={`/${lang}/${section}/${selectedVolume.seriesSlug}`} className="block py-2 italic hover:underline">{intl.manga.series as string} {selectedVolume.seriesTitle}</Link>}
-            <div className="mt-4"><OfflineVolumeReader volume={selectedVolume} intl={intl} userId={userId} /></div>
-          </div>
-        </section>
-      </div>
-    );
-  }
+  const selectedSeries = seriesSlug && !["series", "volumes", "toread"].includes(seriesSlug) ? scoped.filter((volume) => volume.seriesSlug === seriesSlug) : null;
 
-  if (selectedSeries) {
-    if (!selectedSeries.length) return <OfflineUnavailable intl={intl} />;
-    return <OfflineGrid volumes={selectedSeries} lang={lang} intl={intl} userId={userId} section={section} title={selectedSeries[0].seriesTitle} />;
-  }
+  if (selectedVolume) return <VolumeDetail volume={selectedVolume} lang={lang} intl={intl} userId={userId} user={user} />;
+  if (selectedSeries) return <SeriesDetail volumes={selectedSeries} lang={lang} intl={intl} userId={userId} user={user} />;
   if (!scoped.length) return <OfflineUnavailable intl={intl} />;
-  const isSeriesListing = path.endsWith("/series") || (favoritesOnly && !path.endsWith("/volumes"));
-  const listing = isSeriesListing ? Array.from(new Map(scoped.map((volume) => [volume.seriesId, volume])).values()) : scoped;
-  return <OfflineGrid volumes={listing} lang={lang} intl={intl} userId={userId} section={section} title={isSeriesListing ? intl.manga.allSeries as string : intl.manga.allVolumes as string} series={isSeriesListing} />;
+
+  if (path.split("?")[0] === `/${lang}/${section}`) {
+    return <><HeroKeepRead lang={lang} intl={intl} section={section} scope={getLibraryScope(section)} offlineUserId={userId} /><div className="mb-24 md:mb-4"><OfflineLibraryHome volumes={scoped} lang={lang} intl={intl} userId={userId} section={section} /></div></>;
+  }
+
+  const query = new URLSearchParams(path.split("?")[1]);
+  const selectedAuthors = query.get("author")?.split(",").filter(Boolean) ?? [];
+  const selectedGenres = query.get("genre")?.split(",").filter(Boolean) ?? [];
+  const selectedTags = query.get("tag")?.split(",").filter(Boolean) ?? [];
+  const entries = (path.endsWith("/toread") ? scoped.filter((volume) => !volume.isRead) : scoped).filter((volume) => {
+    const writer = typeof volume.metadata.writer === "string" ? volume.metadata.writer.split(",").map((item) => item.trim()) : [];
+    const genres = Array.isArray(volume.metadata.genres) ? volume.metadata.genres.map(String) : [];
+    const tags = Array.isArray(volume.metadata.tags) ? volume.metadata.tags.map(String) : [];
+    return (!selectedAuthors.length || selectedAuthors.some((author) => writer.includes(author))) && (!selectedGenres.length || selectedGenres.some((genre) => genres.includes(genre))) && (!selectedTags.length || selectedTags.some((tag) => tags.includes(tag)));
+  });
+  const isSeries = path.endsWith("/series") || (favorites && !path.endsWith("/volumes"));
+  const content = isSeries ? <OfflineSeriesIndex volumes={entries} filterVolumes={scoped} lang={lang} intl={intl} userId={userId} favorites={favorites} /> : <OfflineVolumesIndex volumes={entries} filterVolumes={scoped} lang={lang} intl={intl} userId={userId} favorites={favorites} />;
+
+  if (favorites) return <div className="flex flex-col md:flex-row md:h-screen overflow-hidden"><SidebarMisc><h2 className="flex items-center text-onix"><HeartIcon size={28} className="mr-2" />{intl.favorites.title as string}</h2><FavoritesNav intl={intl} /></SidebarMisc><div className="w-full md:w-[60%] lg:w-[68%] xl:w-[73%] 2xl:w-[80%] p-4 overflow-y-auto"><div className="mb-24 md:mb-4">{content}</div></div></div>;
+
+  return <><HeroKeepRead lang={lang} intl={intl} section={section} scope={getLibraryScope(section)} offlineUserId={userId} /><div className="mb-24 md:mb-4"><section className="p-4 mt-4">{content}</section></div></>;
 }
 
-function OfflineGrid({ volumes, lang, intl, userId, section, title, series = false }: { volumes: OfflineVolume[]; lang: Locale; intl: Dictionary; userId: string; section: string; title: string; series?: boolean }) {
-  return (
-    <section className="p-4 mt-4">
-      <h2 className="flex items-center text-base md:text-lg mb-4"><LibraryBigIcon size={28} className="mr-2" />{title}</h2>
-      <div className="grid grid-cols-2 md:grid-cols-5 2xl:grid-cols-7 gap-4">
-        {volumes.map((volume) => <MangaCard key={volume.id} title={series ? volume.seriesTitle : volume.title} href={series ? `/${lang}/${section}/${volume.seriesSlug}` : `/${lang}/${section}/volume/${volume.slug}`} isSeries={series} isOneshot={volume.isOneshot} volumeCount={series ? volumes.filter((item) => item.seriesId === volume.seriesId).length : null} cover={offlinePageUrl(userId, volume.id, -1)} isDragging={false} seriesSlug={series ? volume.seriesSlug : null} offlineSeriesId={series ? volume.seriesId : null} offlineVolumeId={series ? null : volume.id} intl={intl} />)}
-      </div>
-    </section>
-  );
+function OfflineCatalog({ intl }: { intl: Dictionary }) {
+  return <div className="flex flex-col md:flex-row md:h-screen overflow-hidden"><SidebarMisc><h2 className="flex items-center text-onix"><BookAIcon size={28} className="mr-2" />{intl.catalog.title as string}</h2><CatalogNav intl={intl} /></SidebarMisc><div className="w-full md:w-[60%] lg:w-[68%] xl:w-[73%] 2xl:w-[80%] p-4 overflow-y-auto"><div className="mb-24 md:mb-4"><OfflineUnavailable intl={intl} /></div></div></div>;
+}
+
+function OfflineMiscFrame({ kind, intl, user }: { kind: "profile" | "settings"; intl: Dictionary; user: Session }) {
+  const isProfile = kind === "profile";
+  const profile = intl.profile as Record<string, string>;
+  const title = isProfile && user.name ? `${profile.greeting} ${user.name}` : isProfile ? profile.title : intl.settings.title as string;
+  const Icon = isProfile ? UserRoundIcon : Settings2Icon;
+  return <div className="flex flex-col md:flex-row md:h-screen overflow-hidden"><SidebarMisc><h2 className="flex items-center text-onix"><Icon size={28} className="mr-2" />{title}</h2>{isProfile ? <ProfileNav intl={intl} /> : <SettingsNav intl={intl} />}</SidebarMisc><div className="w-full md:w-[60%] lg:w-[68%] xl:w-[73%] 2xl:w-[80%] p-4 overflow-y-auto"><div className="mb-24 md:mb-4"><OfflineUnavailable intl={intl} /></div></div></div>;
 }
 
-export default function OfflineGate({ children, lang, intl, userId }: { children: React.ReactNode; lang: Locale; intl: Dictionary; userId?: string }) {
+export default function OfflineGate({ children, lang, intl, user }: { children: React.ReactNode; lang: Locale; intl: Dictionary; user: Session | null }) {
   const { online } = usePwa();
   const [path, setPath] = useState("");
-  useEffect(() => {
-    const sync = () => setPath(`${window.location.pathname}${window.location.search}`);
-    sync();
-    window.addEventListener("popstate", sync);
-    window.addEventListener("bunko:offline-navigate", sync);
-    return () => {
-      window.removeEventListener("popstate", sync);
-      window.removeEventListener("bunko:offline-navigate", sync);
-    };
-  }, []);
+  useEffect(() => { const sync = () => setPath(`${window.location.pathname}${window.location.search}`); sync(); window.addEventListener("popstate", sync); window.addEventListener("bunko:offline-navigate", sync); return () => { window.removeEventListener("popstate", sync); window.removeEventListener("bunko:offline-navigate", sync); }; }, []);
   if (online) return children;
-  if (!userId) return <OfflineUnavailable intl={intl} />;
-  if (path.includes(`/${lang}/manga`) || path.includes(`/${lang}/others`) || path.includes("/favorites/") || path.includes(`/${lang}/search`) || path.includes(`/${lang}/catalog`)) return <OfflineLibrary path={path} lang={lang} intl={intl} userId={userId} />;
+  if (!user) return <OfflineUnavailable intl={intl} />;
+  if (path.split("?")[0] === `/${lang}`) return <OfflineHome lang={lang} intl={intl} userId={user.id} />;
+  if (path.includes(`/${lang}/catalog`)) return <OfflineCatalog intl={intl} />;
+  if (path.includes(`/${lang}/profile`)) return <OfflineMiscFrame kind="profile" intl={intl} user={user} />;
+  if (path.includes(`/${lang}/settings`)) return <OfflineMiscFrame kind="settings" intl={intl} user={user} />;
+  if (path.includes(`/${lang}/books`)) return <div className="flex flex-col items-center justify-center h-screen gap-4 p-4"><ConstructionIcon size={64} /><h2 className="font-roboto text-center">{intl.misc.coming as string}</h2></div>;
+  if (path.includes(`/${lang}/search`)) return <div className="p-4"><SearchComp lang={lang} intl={intl} /></div>;
+  if (path.includes(`/${lang}/manga`) || path.includes(`/${lang}/others`) || path.includes(`/${lang}/favorites`)) return <OfflineLibrary path={path} lang={lang} intl={intl} userId={user.id} user={user} />;
   return <OfflineUnavailable intl={intl} />;
 }

package/dist/src/components/pwa/PwaProvider.tsx

@@ -6,6 +6,7 @@ import { flushOfflineOperations, getReadyVolumes, resumeOfflineDownloads } from
 
 interface PwaContextValue {
   online: boolean;
+  userId?: string;
   offlineSlugs: Set<string>;
   offlineVolumeIds: Set<string>;
   offlineSeriesIds: Set<string>;
@@ -13,6 +14,7 @@ interface PwaContextValue {
 
 const PwaContext = createContext<PwaContextValue>({
   online: true,
+  userId: undefined,
   offlineSlugs: new Set(),
   offlineVolumeIds: new Set(),
   offlineSeriesIds: new Set(),
@@ -110,8 +112,8 @@ export default function PwaProvider({ userId, children }: { userId?: string; chi
   }, []);
 
   const value = useMemo(
-    () => ({ online, offlineSlugs, offlineVolumeIds, offlineSeriesIds }),
-    [offlineSeriesIds, offlineSlugs, offlineVolumeIds, online],
+    () => ({ online, userId, offlineSlugs, offlineVolumeIds, offlineSeriesIds }),
+    [offlineSeriesIds, offlineSlugs, offlineVolumeIds, online, userId],
   );
   return <PwaContext.Provider value={value}>{children}</PwaContext.Provider>;
 }

package/dist/src/components/search/SearchComp.tsx

@@ -4,6 +4,8 @@ import { useEffect, useState } from "react";
 import { useRouter } from "next/navigation";
 import Link from "next/link";
 import { searchManga } from "@/actions/search";
+import { getReadyVolumes } from "@/lib/client/offlineLibrary";
+import { usePwa } from "@/components/pwa/PwaProvider";
 import type { Locale, Dictionary, SearchResult } from "@/lib/types";
 import {
   ChevronLeftIcon,
@@ -25,6 +27,7 @@ export default function SearchComp({ lang, intl }: SearchCompProps) {
   const [query, setQuery] = useState("");
   const [results, setResults] = useState<SearchResult[]>([]);
   const [loading, setLoading] = useState(false);
+  const { online, userId } = usePwa();
 
   function getGenresAndTagsForSeries(seriesSlug: string) {
     const relatedVolumes = results.filter(
@@ -66,6 +69,31 @@ export default function SearchComp({ lang, intl }: SearchCompProps) {
 
     const performSearch = async () => {
       try {
+        if (!online && userId) {
+          const term = query.trim().toLocaleLowerCase();
+          const volumes = await getReadyVolumes(userId);
+          const localResults = volumes
+            .filter((volume) => [volume.title, volume.seriesTitle, volume.metadata.writer]
+              .filter((value): value is string => typeof value === "string")
+              .some((value) => value.toLocaleLowerCase().includes(term)))
+            .map((volume) => ({
+              id: volume.id,
+              section: volume.section,
+              type: "volume" as const,
+              title: volume.title,
+              slug: volume.slug,
+              isOneshot: volume.isOneshot,
+              writer: typeof volume.metadata.writer === "string" ? volume.metadata.writer : "",
+              series: volume.seriesSlug,
+              score: 1,
+              genres: Array.isArray(volume.metadata.genres) ? volume.metadata.genres.join(", ") : "",
+              tags: Array.isArray(volume.metadata.tags) ? volume.metadata.tags.join(", ") : "",
+            }));
+          setResults(localResults);
+          setLoading(false);
+          return;
+        }
+
         const result = await searchManga({ query });
         if ("data" in result && result.data) {
           setResults(result.data);
@@ -80,7 +108,7 @@ export default function SearchComp({ lang, intl }: SearchCompProps) {
     performSearch();
 
     return () => controller.abort();
-  }, [query]);
+  }, [online, query, userId]);
 
   const filteredResults = results.filter(
     (res) => !(res.type === "series" && res.isOneshot === true)

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

@@ -51,6 +51,7 @@ export default function MangaCard({
 
   const manga = t.manga as DictionarySection;
   const volumeSlug = href.split("?")[0].split("/").pop();
+  const isOfflineCover = cover?.startsWith("/offline/") ?? false;
   const isOfflineAvailable = isSeries
     ? !!offlineSeriesId && offlineSeriesIds.has(offlineSeriesId)
     : !!offlineVolumeId && offlineVolumeIds.has(offlineVolumeId)
@@ -100,13 +101,23 @@ export default function MangaCard({
       }}
     >
       <div className="relative aspect-[7/10.5] w-full flex-shrink-0">
-        <Image
-          src={cover || "/placeholder.svg?=v1"}
-          alt={`Cover for ${title ?? ""}`}
-          fill
-          sizes="(max-width: 768px) 50vw, (max-width: 1280px) 20vw, 14vw"
-          className="object-cover z-0"
-        />
+        {isOfflineCover ? (
+          // IndexedDB pages are served by the service worker and cannot use Next's image optimizer.
+          // eslint-disable-next-line @next/next/no-img-element
+          <img
+            src={cover ?? undefined}
+            alt={`Cover for ${title ?? ""}`}
+            className="absolute inset-0 h-full w-full object-cover z-0"
+          />
+        ) : (
+          <Image
+            src={cover || "/placeholder.svg?=v1"}
+            alt={`Cover for ${title ?? ""}`}
+            fill
+            sizes="(max-width: 768px) 50vw, (max-width: 1280px) 20vw, 14vw"
+            className="object-cover z-0"
+          />
+        )}
 
         <div className="absolute top-2 right-2 z-10 flex items-center gap-1">
           {isSeries && volumeCount != null && (

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

@@ -3,6 +3,7 @@
 import { useTransition } from "react";
 import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
 import { usePathname, useRouter, useSearchParams } from "next/navigation";
+import { usePwa } from "@/components/pwa/PwaProvider";
 import type { DictionarySection } from "@/lib/types";
 
 interface PaginationProps {
@@ -20,6 +21,7 @@ export default function Pagination({
   const pathname = usePathname();
   const searchParams = useSearchParams();
   const [isPending, startTransition] = useTransition();
+  const { online } = usePwa();
 
   const goToPage = (page: number) => {
     if (isPending || page === currentPage || page < 1 || page > totalPages) {
@@ -30,9 +32,13 @@ export default function Pagination({
     params.set("page", String(page));
     const href = `${pathname}?${params.toString()}`;
 
-    startTransition(() => {
-      router.replace(href);
-    });
+    if (!online) {
+      window.history.replaceState({}, "", href);
+      window.dispatchEvent(new Event("bunko:offline-navigate"));
+      return;
+    }
+
+    startTransition(() => router.replace(href));
   };
 
   return (

package/dist/src/lib/client/offlineLibrary.ts

@@ -21,6 +21,7 @@ export interface OfflineVolume {
   seriesId: string;
   seriesSlug: string;
   seriesTitle: string;
+  seriesStatus?: string;
   isOneshot: boolean;
   mangaStyle: string | null;
   metadata: Record<string, unknown>;
@@ -70,6 +71,7 @@ interface OfflineVolumeManifest {
     slug: string;
     title: string;
     isOneshot: boolean;
+    status?: string;
   };
   mangaStyle: string | null;
   metadata: Record<string, unknown>;
@@ -207,6 +209,7 @@ async function saveManifest(userId: string, manifest: OfflineVolumeManifest) {
     seriesId: manifest.series.id,
     seriesSlug: manifest.series.slug,
     seriesTitle: manifest.series.title,
+    seriesStatus: manifest.series.status,
     isOneshot: manifest.series.isOneshot,
     mangaStyle: manifest.mangaStyle,
     metadata: manifest.metadata,