@itsmrtr/bunkoshelf 1.17.1 → 1.18.1

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

@@ -1,10 +1,11 @@
 import { Suspense } from "react";
 import { notFound } from "next/navigation";
-import { findBookVolumeBySlug } from "@/lib/db/books/library";
+import { findBookVolumeBySlug, listBookVolumes } from "@/lib/db/books/library";
 import { verifySession } from "@/lib/auth/verifySession";
 import { findBookProgress, listBookReadingEntries } from "@/lib/db/books/reading";
 import BookVolumeContent from "@/components/library/books/BookVolumeContent";
 import { getDictionary } from "@/lib/i18n/Dictionary";
+import { getAdjacentSlugs } from "@/lib/adjacentNavigation";
 import type { Locale } from "@/lib/types";
 
 function DetailSkeleton() {
@@ -17,13 +18,22 @@ async function BookVolumePageContent({ params }: { params: Promise<{ lang: strin
   const volume = await findBookVolumeBySlug(slug);
   if (!volume || volume.series.librarySection !== "books") notFound();
   const intl = await getDictionary(lang as Locale);
+  const adjacent = volume.series.isOneshot
+    ? {}
+    : getAdjacentSlugs(
+        await listBookVolumes({
+          seriesSlug: volume.series.slug,
+          librarySection: volume.series.librarySection,
+        }),
+        volume.slug,
+      );
   const [readingEntries, progress]: [Awaited<ReturnType<typeof listBookReadingEntries>>, Awaited<ReturnType<typeof findBookProgress>>] = user
     ? await Promise.all([
       listBookReadingEntries(user.id, volume.id),
       findBookProgress(user.id, volume.id),
     ])
     : [[], null];
-  return <BookVolumeContent volume={volume} lang={lang as Locale} intl={intl} readingEntries={readingEntries} personalRating={progress?.personalRating ?? null} isAdmin={user?.isAdmin === true} />;
+  return <BookVolumeContent volume={volume} lang={lang as Locale} intl={intl} readingEntries={readingEntries} personalRating={progress?.personalRating ?? null} isAdmin={user?.isAdmin === true} navigation={{ previousHref: adjacent.previousSlug ? `/${lang}/books/volume/${adjacent.previousSlug}` : undefined, nextHref: adjacent.nextSlug ? `/${lang}/books/volume/${adjacent.nextSlug}` : undefined }} />;
 }
 
 export default function BookVolumePage(props: { params: Promise<{ lang: string; slug: string }> }) {

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

@@ -130,11 +130,13 @@ export default async function RootLayout({ children, params }: RootLayoutProps)
       className={`${robotoCondensed.variable} ${boldonse.variable} antialiased`}
     >
       <head>
+        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+        <meta name="theme-color" content="#000000" />
         <meta name="robots" content="noindex,nofollow" />
         <meta name="googlebot" content="noindex,nofollow" />
       </head>
 
-      <body className="relative h-dvh overflow-hidden text-lg">
+      <body className="relative h-dvh overflow-hidden bg-black text-lg">
         <div className="fixed inset-0 -z-10 pointer-events-none bg-seigaiha-pattern-k opacity-50" />
 
         <Suspense

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

@@ -8,12 +8,13 @@ import {
   listReadingEntries,
 } from "@/lib/db/reading";
 import { getDictionary } from "@/lib/i18n/Dictionary";
-import { findVolumeBySlug } from "@/lib/db/library";
+import { findVolumeBySlug, listVolumes } from "@/lib/db/library";
 import {
   getLibrarySection,
   getLibraryVolumeHref,
 } from "@/lib/librarySection";
 import { getMangaCoverUrl } from "@/lib/mangaCover";
+import { getAdjacentSlugs } from "@/lib/adjacentNavigation";
 import type { Locale } from "@/lib/types";
 
 interface VolumeMangaPageProps {
@@ -47,6 +48,13 @@ async function VolumeMangaPageContent({ params }: VolumeMangaPageProps) {
       redirect(getLibraryVolumeHref(lang, targetSection, volumeEntry.slug));
     }
 
+    const adjacent = volumeEntry.series.isOneshot
+      ? {}
+      : getAdjacentSlugs(
+          await listVolumes({ seriesIds: [volumeEntry.seriesId], scope: targetSection }),
+          volumeEntry.slug,
+        );
+
     const meta = {
       ...(volumeEntry.metadataObj || null),
       genres: Array.isArray(volumeEntry.genres)
@@ -99,6 +107,14 @@ async function VolumeMangaPageContent({ params }: VolumeMangaPageProps) {
         readingEntries={readingEntries}
         firstRead={firstRead}
         section="manga"
+        navigation={{
+          previousHref: adjacent.previousSlug
+            ? getLibraryVolumeHref(lang, targetSection, adjacent.previousSlug)
+            : undefined,
+          nextHref: adjacent.nextSlug
+            ? getLibraryVolumeHref(lang, targetSection, adjacent.nextSlug)
+            : undefined,
+        }}
       />
     );
   } catch (error) {

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

@@ -8,8 +8,8 @@ import {
   listReadingEntries,
 } from "@/lib/db/reading";
 import { getDictionary } from "@/lib/i18n/Dictionary";
-import { findVolumeBySlug } from "@/lib/db/library";
-import { findBookVolumeBySlug } from "@/lib/db/books/library";
+import { findVolumeBySlug, listVolumes } from "@/lib/db/library";
+import { findBookVolumeBySlug, listBookVolumes } from "@/lib/db/books/library";
 import { findBookProgress, listBookReadingEntries } from "@/lib/db/books/reading";
 import BookVolumeContent from "@/components/library/books/BookVolumeContent";
 import {
@@ -17,6 +17,7 @@ import {
   getLibraryVolumeHref,
 } from "@/lib/librarySection";
 import { getMangaCoverUrl } from "@/lib/mangaCover";
+import { getAdjacentSlugs } from "@/lib/adjacentNavigation";
 import type { Locale } from "@/lib/types";
 import type { LibrarySection } from "@/lib/librarySection";
 
@@ -61,6 +62,15 @@ export async function OthersVolumePageContent({ params, section = "others" }: Ot
             findBookProgress(user.id, book.id),
           ])
         : [[], null];
+      const adjacent = book.series.isOneshot
+        ? {}
+        : getAdjacentSlugs(
+            await listBookVolumes({
+              seriesSlug: book.series.slug,
+              librarySection: book.series.librarySection,
+            }),
+            book.slug,
+          );
 
       return (
         <BookVolumeContent
@@ -70,6 +80,14 @@ export async function OthersVolumePageContent({ params, section = "others" }: Ot
           readingEntries={readingEntries}
           personalRating={progress?.personalRating ?? null}
           isAdmin={user?.isAdmin === true}
+          navigation={{
+            previousHref: adjacent.previousSlug
+              ? `/${lang}/${section}/volume/${adjacent.previousSlug}`
+              : undefined,
+            nextHref: adjacent.nextSlug
+              ? `/${lang}/${section}/volume/${adjacent.nextSlug}`
+              : undefined,
+          }}
         />
       );
     }
@@ -80,6 +98,13 @@ export async function OthersVolumePageContent({ params, section = "others" }: Ot
       redirect(getLibraryVolumeHref(lang, targetSection, volumeEntry.slug));
     }
 
+    const adjacent = volumeEntry.series.isOneshot
+      ? {}
+      : getAdjacentSlugs(
+          await listVolumes({ seriesIds: [volumeEntry.seriesId], scope: targetSection }),
+          volumeEntry.slug,
+        );
+
     const meta = {
       ...(volumeEntry.metadataObj || null),
       genres: Array.isArray(volumeEntry.genres)
@@ -132,6 +157,14 @@ export async function OthersVolumePageContent({ params, section = "others" }: Ot
         readingEntries={readingEntries}
         firstRead={firstRead}
         section={section}
+        navigation={{
+          previousHref: adjacent.previousSlug
+            ? getLibraryVolumeHref(lang, targetSection, adjacent.previousSlug)
+            : undefined,
+          nextHref: adjacent.nextSlug
+            ? getLibraryVolumeHref(lang, targetSection, adjacent.nextSlug)
+            : undefined,
+        }}
       />
     );
   } catch (error) {

package/dist/src/app/manifest.ts

@@ -6,8 +6,8 @@ export default function manifest(): MetadataRoute.Manifest {
     short_name: "Bunko Shelf",
     start_url: "/es",
     display: "standalone",
-    background_color: "#151515",
-    theme_color: "#151515",
+    background_color: "#000000",
+    theme_color: "#000000",
     icons: [
       {
         src: "/icons/bunkoshelf-icon-any.png",

package/dist/src/components/library/DetailNavigation.tsx

@@ -0,0 +1,64 @@
+import Link from "next/link";
+import { ChevronLeftIcon, ChevronRightIcon, ListIcon } from "lucide-react";
+
+interface DetailNavigationLink {
+  href: string;
+  label: string;
+}
+
+interface DetailNavigationProps {
+  allSeries?: DetailNavigationLink;
+  allVolumes?: DetailNavigationLink;
+  previous?: DetailNavigationLink;
+  next?: DetailNavigationLink;
+}
+
+const linkClassName = "flex w-fit items-center gap-1 text-sm uppercase text-sand underline";
+
+export default function DetailNavigation({ allSeries, allVolumes, previous, next }: DetailNavigationProps) {
+  if (allSeries || allVolumes) {
+    const link = allSeries ?? allVolumes!;
+
+    return (
+      <nav className="mt-2 flex justify-center md:justify-start">
+        <Link href={link.href} className={linkClassName}>
+          <ListIcon size={16} />
+          {link.label}
+        </Link>
+      </nav>
+    );
+  }
+
+  if (!previous && !next) return null;
+
+  return (
+    <>
+      <nav className="absolute inset-x-0 top-1/2 flex -translate-y-1/2 items-center justify-between md:hidden">
+        {previous ? (
+          <Link href={previous.href} aria-label={previous.label} className="p-2 text-sand">
+            <ChevronLeftIcon size={32} />
+          </Link>
+        ) : <span />}
+        {next ? (
+          <Link href={next.href} aria-label={next.label} className="p-2 text-sand">
+            <ChevronRightIcon size={32} />
+          </Link>
+        ) : <span />}
+      </nav>
+      <nav className="mt-2 hidden w-full items-center justify-between gap-2 md:flex">
+        {previous ? (
+          <Link href={previous.href} className={linkClassName}>
+            <ChevronLeftIcon size={16} />
+            {previous.label}
+          </Link>
+        ) : <span />}
+        {next ? (
+          <Link href={next.href} className={linkClassName}>
+            {next.label}
+            <ChevronRightIcon size={16} />
+          </Link>
+        ) : <span />}
+      </nav>
+    </>
+  );
+}

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

@@ -1,5 +1,6 @@
 import Image from "next/image";
 import MangaCard from "@/components/ui/MangaCard";
+import DetailNavigation from "@/components/library/DetailNavigation";
 import Separator from "@/components/ui/Separator";
 import BookSeriesFavoriteButton from "./BookSeriesFavoriteButton";
 import BookSeriesStatusSelect from "./BookSeriesStatusSelect";
@@ -11,6 +12,7 @@ import BookSummary from "./BookSummary";
 import { getBookCoverUrl } from "@/lib/books/cover";
 import { getBookAgeMinimum, getBookPublicationYear, normalizeBookAgeRating, toPlainBookText, type BookAgeRating } from "@/lib/books/metadata";
 import { getBookProgressRatio } from "@/lib/books/readingProgress";
+import { getDetailNavigationLabels } from "@/lib/detailNavigation";
 import type { BookVolume } from "@/lib/db/books/library";
 import type { Dictionary, Locale } from "@/lib/types";
 
@@ -43,17 +45,24 @@ export default function BookSeriesContent({ volumes, lang, intl, progressById, i
   const seriesWorksLabel = libraryRoot === "others"
     ? (intl.libraries.otherCollectionWorks as string)
     : books.seriesBooks;
+  const navigationLabels = getDetailNavigationLabels(libraryRoot, intl);
 
   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">
-          <div className="mb-8 md:mb-0 md:mr-4 px-16 md:px-0 md:sticky md:top-4 md:self-start">
+          <div className="relative mb-8 md:mb-0 md:mr-4 px-16 md:px-0 md:sticky md:top-4 md:self-start">
             {coverImage ? (
               <Image src={coverImage} alt={`${books.coverOf} ${firstVolume.series.title}`} width={0} height={0} sizes="100vw" className="w-full h-auto object-contain rounded-lg" />
             ) : (
               <div className="aspect-[7/10.5] grid place-items-center rounded-lg bg-sand p-6 text-center text-onix">{books.noCover}</div>
             )}
+            <DetailNavigation
+              allSeries={{
+                href: `/${lang}/${libraryRoot}/series`,
+                label: navigationLabels.allSeries,
+              }}
+            />
           </div>
         </div>
         <div className="w-full md:w-7/12 2xl:w-2/3 2xl:pl-4">

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

@@ -1,5 +1,6 @@
 import Image from "next/image";
 import Link from "next/link";
+import DetailNavigation from "@/components/library/DetailNavigation";
 import Separator from "@/components/ui/Separator";
 import Tabs from "@/components/ui/Tabs";
 import BookReaderButton from "./BookReaderButton";
@@ -11,6 +12,7 @@ import BookAdminActions from "./BookAdminActions";
 import BookSummary from "./BookSummary";
 import { getBookCoverUrl } from "@/lib/books/cover";
 import { getBookPublicationYear, toPlainBookText } from "@/lib/books/metadata";
+import { getDetailNavigationLabels } from "@/lib/detailNavigation";
 import type { BookVolume } from "@/lib/db/books/library";
 import type { BookReadingEntry } from "@/lib/db/books/reading";
 import type { Dictionary, Locale } from "@/lib/types";
@@ -22,9 +24,13 @@ interface BookVolumeContentProps {
   readingEntries: BookReadingEntry[];
   personalRating: number | null;
   isAdmin: boolean;
+  navigation?: {
+    previousHref?: string;
+    nextHref?: string;
+  };
 }
 
-export default function BookVolumeContent({ volume, lang, intl, readingEntries, personalRating, isAdmin }: BookVolumeContentProps) {
+export default function BookVolumeContent({ volume, lang, intl, readingEntries, personalRating, isAdmin, navigation }: BookVolumeContentProps) {
   const books = intl.books as Record<string, string>;
   const coverImage = getBookCoverUrl(volume.slug, volume.metadata.coverPath);
   const description = toPlainBookText(volume.metadata.description);
@@ -32,12 +38,13 @@ export default function BookVolumeContent({ volume, lang, intl, readingEntries,
   const seriesLabel = libraryRoot === "others"
     ? (intl.libraries.otherCollection as string)
     : books.series;
+  const navigationLabels = getDetailNavigationLabels(libraryRoot, intl);
 
   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">
-          <div className="mb-8 md:mb-0 md:mr-4 px-16 md:px-0 md:sticky md:top-4 md:self-start">
+          <div className="relative mb-8 md:mb-0 md:mr-4 px-16 md:px-0 md:sticky md:top-4 md:self-start">
             {coverImage ? (
               <Image
                 src={coverImage}
@@ -50,6 +57,20 @@ export default function BookVolumeContent({ volume, lang, intl, readingEntries,
             ) : (
               <div className="aspect-[7/10.5] grid place-items-center rounded-lg bg-sand p-6 text-center text-onix">{books.noCover}</div>
             )}
+            <DetailNavigation
+              allVolumes={volume.series.isOneshot ? {
+                href: `/${lang}/${libraryRoot}/volumes`,
+                label: navigationLabels.allVolumes,
+              } : undefined}
+              previous={navigation?.previousHref ? {
+                href: navigation.previousHref,
+                label: navigationLabels.previous,
+              } : undefined}
+              next={navigation?.nextHref ? {
+                href: navigation.nextHref,
+                label: navigationLabels.next,
+              } : undefined}
+            />
           </div>
         </div>
         <div className="w-full md:w-7/12 2xl:w-2/3 2xl:pl-4">

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

@@ -1,6 +1,7 @@
 import Image from "next/image";
 import { DownloadIcon } from "lucide-react";
 import MangaCard from "@/components/ui/MangaCard";
+import DetailNavigation from "@/components/library/DetailNavigation";
 import ReadButtonsSeries from "./ReadButtonsSeries";
 import MetadataPanel from "./MetadataPanel";
 import MangaSummary from "./MangaSummary";
@@ -12,6 +13,7 @@ import SeriesRating from "./SeriesRating";
 import Pagination from "@/components/ui/Pagination";
 import type { LibrarySection } from "@/lib/librarySection";
 import { getVolumeProgressRatio } from "@/lib/reader/readingProgress";
+import { getDetailNavigationLabels } from "@/lib/detailNavigation";
 import type { Locale, Dictionary, Session } from "@/lib/types";
 
 interface SeriesContentProps {
@@ -59,13 +61,14 @@ export default function SeriesContent({
     meta.mangaStyle === "YesLTR" || meta.mangaStyle === "No";
   const isOfflineCover = coverImage?.startsWith("/offline/") ?? false;
   const canDownloadOriginal = process.env.LIB_PROVIDER === "cloud";
+  const navigationLabels = getDetailNavigationLabels(section, intl);
 
   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">
           {coverImage && (
-            <div className="mb-8 md:mb-0 md:mr-4 px-16 md:px-0 md:sticky md:top-4 md:self-start">
+            <div className="relative mb-8 md:mb-0 md:mr-4 px-16 md:px-0 md:sticky md:top-4 md:self-start">
               {isOfflineCover ? (
                 // eslint-disable-next-line @next/next/no-img-element
                 <img src={coverImage} alt={`Cover for ${(serieData.title as string) || (serieData.filename as string)}`} className="w-full h-auto object-contain rounded-lg" />
@@ -79,6 +82,12 @@ export default function SeriesContent({
                   className="w-full h-auto object-contain rounded-lg"
                 />
               )}
+              <DetailNavigation
+                allSeries={{
+                  href: `/${lang}/${section}/series`,
+                  label: navigationLabels.allSeries,
+                }}
+              />
             </div>
           )}
         </div>

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

@@ -1,5 +1,6 @@
 import Image from "next/image";
 import Link from "next/link";
+import DetailNavigation from "@/components/library/DetailNavigation";
 import { DownloadIcon } from "lucide-react";
 import ReadButtonsVolume from "./ReadButtonsVolume";
 import ReadingHistory from "./ReadingHistory";
@@ -12,6 +13,7 @@ import Separator from "@/components/ui/Separator";
 import Tabs from "@/components/ui/Tabs";
 import VolumeRating from "./VolumeRating";
 import { getOneshotLabel, type LibrarySection } from "@/lib/librarySection";
+import { getDetailNavigationLabels } from "@/lib/detailNavigation";
 import type { Locale, Dictionary, DictionarySection, Session } from "@/lib/types";
 
 interface ReadingEntry {
@@ -30,6 +32,10 @@ interface VolumesContentProps {
   readingEntries: ReadingEntry[];
   firstRead: string | null;
   section?: LibrarySection;
+  navigation?: {
+    previousHref?: string;
+    nextHref?: string;
+  };
 }
 
 export default function VolumesContent({
@@ -43,6 +49,7 @@ export default function VolumesContent({
   readingEntries,
   firstRead,
   section = "manga",
+  navigation,
 }: VolumesContentProps) {
   if (!volumeData) {
     return (
@@ -77,13 +84,14 @@ export default function VolumesContent({
   const coverImage = volume.coverImage as string | undefined;
   const isOfflineCover = coverImage?.startsWith("/offline/") ?? false;
   const canDownloadOriginal = process.env.LIB_PROVIDER === "cloud";
+  const navigationLabels = getDetailNavigationLabels(section, intl);
 
   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">
           {coverImage && (
-            <div className="mb-8 md:mb-0 md:mr-4 px-16 md:px-0 md:sticky md:top-4 md:self-start">
+            <div className="relative mb-8 md:mb-0 md:mr-4 px-16 md:px-0 md:sticky md:top-4 md:self-start">
               {isOfflineCover ? (
                 // eslint-disable-next-line @next/next/no-img-element
                 <img src={coverImage} alt={`Cover for ${(volume.title as string) || (volume.filename as string)}`} className="w-full h-auto object-contain rounded-lg" />
@@ -97,6 +105,20 @@ export default function VolumesContent({
                   className="w-full h-auto object-contain rounded-lg"
                 />
               )}
+              <DetailNavigation
+                allVolumes={isOneshot ? {
+                  href: `/${lang}/${section}/volumes`,
+                  label: navigationLabels.allVolumes,
+                } : undefined}
+                previous={navigation?.previousHref ? {
+                  href: navigation.previousHref,
+                  label: navigationLabels.previous,
+                } : undefined}
+                next={navigation?.nextHref ? {
+                  href: navigation.nextHref,
+                  label: navigationLabels.next,
+                } : undefined}
+              />
             </div>
           )}
         </div>

package/dist/src/components/mobNav/MobNav.tsx

@@ -1,3 +1,6 @@
+"use client";
+
+import { useEffect, useState } from "react";
 import MobNavButton from "./MobNavButton";
 import type { ChallengeData, Dictionary, Locale, Session } from "@/lib/types";
 import type { VersionInfo } from "@/lib/versionInfo";
@@ -20,6 +23,21 @@ export default function MobNav({
   versionData,
   libraryCounts,
 }: MobNavProps) {
+  const [isReaderOpen, setIsReaderOpen] = useState(false);
+
+  useEffect(() => {
+    const updateReaderState = () => {
+      setIsReaderOpen(document.body.dataset.readerOpen === "true");
+    };
+
+    updateReaderState();
+    window.addEventListener("bunko:reader-state", updateReaderState);
+
+    return () => window.removeEventListener("bunko:reader-state", updateReaderState);
+  }, []);
+
+  if (isReaderOpen) return null;
+
   return (
     <div className="fixed right-[max(1.5rem,env(safe-area-inset-right))] bottom-[max(2rem,env(safe-area-inset-bottom))] z-50 md:hidden">
       <MobNavButton

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

@@ -142,6 +142,18 @@ export default function EpubReader({ isOpen, onClose, progressResourceId, slug,
   const [search, setSearch] = useState("");
   const [matches, setMatches] = useState<Array<{ label: string; cfi: string }>>([]);
 
+  useEffect(() => {
+    if (!isOpen) return;
+
+    document.body.dataset.readerOpen = "true";
+    window.dispatchEvent(new Event("bunko:reader-state"));
+
+    return () => {
+      delete document.body.dataset.readerOpen;
+      window.dispatchEvent(new Event("bunko:reader-state"));
+    };
+  }, [isOpen]);
+
   useEffect(() => {
     annotationsRef.current = annotations;
   }, [annotations]);
@@ -719,7 +731,7 @@ export default function EpubReader({ isOpen, onClose, progressResourceId, slug,
   const isBookmarked = !!cfi && bookmarkCfis.includes(cfi);
 
   return (
-    <div className="fixed inset-0 z-[60] overflow-hidden text-sand" style={{ background: themeStyles[theme].background }}>
+    <div className="fixed inset-x-0 bottom-0 top-[env(safe-area-inset-top)] z-[60] overflow-hidden text-sand" style={{ background: themeStyles[theme].background }}>
       {showToc && (
         <aside ref={tocPanelRef} className="absolute bottom-[calc(3.5rem+max(0.75rem,env(safe-area-inset-bottom)))] left-0 top-0 z-40 w-full overflow-y-auto bg-blackamber p-5 shadow-xl md:bottom-14 md:w-96">
           <div className="mb-4 flex flex-wrap gap-2 border-b border-white/15">

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

@@ -60,6 +60,18 @@ export default function MangaReader({
 
   const reader = intl.reader as DictionarySection;
 
+  useEffect(() => {
+    if (!isOpen) return;
+
+    document.body.dataset.readerOpen = "true";
+    window.dispatchEvent(new Event("bunko:reader-state"));
+
+    return () => {
+      delete document.body.dataset.readerOpen;
+      window.dispatchEvent(new Event("bunko:reader-state"));
+    };
+  }, [isOpen]);
+
   useEffect(() => {
     if (!isOpen || !slug) return;
 
@@ -215,7 +227,7 @@ export default function MangaReader({
   if (!isOpen) return null;
   if (loading)
     return (
-      <div className="fixed inset-0 z-[60] bg-black flex items-center justify-center">
+      <div className="fixed inset-x-0 bottom-0 top-[env(safe-area-inset-top)] z-[60] bg-black flex items-center justify-center">
         <Loader />
       </div>
     );
@@ -227,7 +239,7 @@ export default function MangaReader({
       id="mob-nav-modal"
       ref={modalRef}
       tabIndex={-1}
-      className="fixed inset-0 z-[60] bg-black flex flex-col items-center justify-center pointer-events-auto transition-opacity duration-200 ease-in-out opacity-100"
+      className="fixed inset-x-0 bottom-0 top-[env(safe-area-inset-top)] z-[60] bg-black flex flex-col items-center justify-center pointer-events-auto transition-opacity duration-200 ease-in-out opacity-100"
     >
       <button
         onClick={onClose}

package/dist/src/lib/adjacentNavigation.ts

@@ -0,0 +1,14 @@
+interface SlugItem {
+  slug: string;
+}
+
+export function getAdjacentSlugs<T extends SlugItem>(items: T[], currentSlug: string) {
+  const currentIndex = items.findIndex((item) => item.slug === currentSlug);
+
+  if (currentIndex < 0) return {};
+
+  return {
+    previousSlug: items[currentIndex - 1]?.slug,
+    nextSlug: items[currentIndex + 1]?.slug,
+  };
+}

package/dist/src/lib/detailNavigation.ts

@@ -0,0 +1,42 @@
+import type { Dictionary } from "@/lib/types";
+import type { LibrarySection } from "@/lib/librarySection";
+
+export type DetailNavigationSection = LibrarySection | "books";
+
+export function getDetailNavigationLabels(section: DetailNavigationSection, intl: Dictionary) {
+  const labels = intl.libraries as Record<string, string>;
+
+  if (section === "comic") {
+    return {
+      allSeries: labels.allSeries,
+      allVolumes: labels.allComicIssues,
+      previous: labels.previousComicIssue,
+      next: labels.nextComicIssue,
+    };
+  }
+
+  if (section === "others") {
+    return {
+      allSeries: labels.allSeries,
+      allVolumes: labels.allOtherWorksNavigation,
+      previous: labels.previousOtherWork,
+      next: labels.nextOtherWork,
+    };
+  }
+
+  if (section === "books") {
+    return {
+      allSeries: labels.allSeries,
+      allVolumes: labels.allBooks,
+      previous: labels.previousBook,
+      next: labels.nextBook,
+    };
+  }
+
+  return {
+    allSeries: labels.allSeries,
+    allVolumes: labels.allMangaVolumes,
+    previous: labels.previousMangaVolume,
+    next: labels.nextMangaVolume,
+  };
+}

package/dist/src/lib/i18n/dictionaries/en/libraries.json

@@ -10,6 +10,19 @@
     "otherCollection": "Collection:",
     "allOtherCollections": "Collections (All)",
     "allOtherWorks": "Works (All)",
+    "allOtherWorksNavigation": "All works",
+    "allSeries": "All series",
+    "allMangaVolumes": "All volumes",
+    "allComicIssues": "All issues",
+    "allBooks": "All books",
+    "previousMangaVolume": "Previous volume",
+    "nextMangaVolume": "Next volume",
+    "previousComicIssue": "Previous issue",
+    "nextComicIssue": "Next issue",
+    "previousOtherWork": "Previous work",
+    "nextOtherWork": "Next work",
+    "previousBook": "Previous book",
+    "nextBook": "Next book",
     "otherCollectionWorks": "Works in the collection",
     "readList": "Read List",
     "keepReading": "Keep Reading",

package/dist/src/lib/i18n/dictionaries/es/libraries.json

@@ -10,6 +10,19 @@
     "otherCollection": "Colección:",
     "allOtherCollections": "Colecciones (todas)",
     "allOtherWorks": "Obras (todas)",
+    "allOtherWorksNavigation": "Todas las obras",
+    "allSeries": "Todas las series",
+    "allMangaVolumes": "Todos los tomos",
+    "allComicIssues": "Todos los números",
+    "allBooks": "Todos los libros",
+    "previousMangaVolume": "Tomo anterior",
+    "nextMangaVolume": "Tomo siguiente",
+    "previousComicIssue": "Número anterior",
+    "nextComicIssue": "Número siguiente",
+    "previousOtherWork": "Obra anterior",
+    "nextOtherWork": "Obra siguiente",
+    "previousBook": "Libro anterior",
+    "nextBook": "Libro siguiente",
     "otherCollectionWorks": "Obras de la colección",
     "readList": "Lista de lectura",
     "keepReading": "Seguir leyendo",