@itsmrtr/bunkoshelf 1.2.8 → 1.3.0

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

@@ -1,28 +1,27 @@
 import { Suspense } from "react";
-import { notFound, redirect } from "next/navigation";
+import { redirect } from "next/navigation";
 import SeriesContent from "@/components/library/manga/SeriesContent";
+import DetailSkeleton from "@/components/library/manga/DetailSkeleton";
 import { verifySession } from "@/lib/auth/verifySession";
 import { listVolumeRatings, findSeriesFavoriteState } from "@/lib/db/reading";
 import { getDictionary } from "@/lib/i18n/Dictionary";
 import {
-  findSeriesBySlug,
-  type LibraryVolumeMetadata,
+  findSeriesBySlugBasic,
+  listPagedVolumes,
+  type SeriesVolumeAggregate,
+  listSeriesVolumeAggregates,
+  listVolumeProgressByIds,
 } from "@/lib/db/library";
 import {
   getLibrarySection,
   getLibrarySeriesHref,
 } from "@/lib/librarySection";
 import { getMangaCoverUrl } from "@/lib/mangaCover";
-import { sortByPaddedTitle } from "@/lib/utils";
-import { isOthersLibraryEnabled } from "@/lib/db/appSettings";
+import { LIBRARY_PAGE_SIZE } from "@/lib/libraryPagination";
 import type { Locale } from "@/lib/types";
 
-interface AggregatedMeta {
-  [key: string]: string[];
-}
-
 function aggregateMetadata(
-  volumes: { metadataObj?: LibraryVolumeMetadata | null }[]
+  volumes: SeriesVolumeAggregate[]
 ) {
   const fields = [
     "writer", "penciller", "inker", "colorist", "letterer",
@@ -35,10 +34,8 @@ function aggregateMetadata(
   }
 
   for (const vol of volumes) {
-    const meta = vol.metadataObj;
-    if (!meta) continue;
     for (const key of fields) {
-      const raw = meta[key];
+      const raw = vol[key];
       if (typeof raw === "string" && raw.trim() !== "") {
         raw.split(",").forEach((entry) => {
           aggregated[key].add(entry.trim());
@@ -47,7 +44,7 @@ function aggregateMetadata(
     }
   }
 
-  const result: AggregatedMeta = {};
+  const result: Record<string, string[]> = {};
   for (const key of fields) {
     result[key] = Array.from(aggregated[key]);
   }
@@ -57,40 +54,24 @@ function aggregateMetadata(
 
 interface OthersSeriesPageProps {
   params: Promise<{ lang: string; series: string }>;
-}
-
-function SeriesSkeleton() {
-  return (
-    <div className="p-4">
-      <div className="h-8 w-64 rounded bg-sand animate-pulse mb-6" />
-      <div className="flex gap-6">
-        <div className="w-48 aspect-[3/5] rounded-lg bg-sand animate-pulse flex-shrink-0" />
-        <div className="flex-1 flex flex-col gap-3">
-          {Array.from({ length: 5 }).map((_, i) => (
-            <div key={i} className="h-4 rounded bg-sand animate-pulse" style={{ width: `${70 + i * 5}%` }} />
-          ))}
-        </div>
-      </div>
-    </div>
-  );
+  searchParams: Promise<Record<string, string | undefined>>;
 }
 
 async function OthersSeriesPageContent({
   params,
+  searchParams,
 }: OthersSeriesPageProps) {
   const { lang = "es", series } = await params;
+  const resolvedSearchParams = await searchParams;
+  const pageRaw = resolvedSearchParams.page ?? "1";
+  const parsedPage = parseInt(pageRaw, 10);
+  const page = Number.isNaN(parsedPage) || parsedPage < 1 ? 1 : parsedPage;
   const intl = await getDictionary(lang as Locale);
-  const othersLibraryEnabled = await isOthersLibraryEnabled();
 
   try {
     const user = await verifySession();
 
-    const serie = await findSeriesBySlug({
-      slug: series,
-      userId: user?.id ?? null,
-      includeGenres: true,
-      includeTags: true,
-    });
+    const serie = await findSeriesBySlugBasic(series);
 
     if (!serie) {
       return (
@@ -100,47 +81,80 @@ async function OthersSeriesPageContent({
       );
     }
 
-    const targetSection = getLibrarySection(
-      serie.volumes[0]?.metadataObj?.mangaStyle,
-      othersLibraryEnabled
-    );
+    const [firstVolumePage, volumePage, aggregateVolumes] = await Promise.all([
+      listPagedVolumes({
+        page: 1,
+        pageSize: 1,
+        seriesIds: [serie.id],
+        includeGenres: true,
+        includeTags: true,
+      }),
+      listPagedVolumes({
+        page,
+        pageSize: LIBRARY_PAGE_SIZE,
+        seriesIds: [serie.id],
+      }),
+      listSeriesVolumeAggregates(serie.id),
+    ]);
+
+    const firstVolume = firstVolumePage.items[0] ?? null;
+
+    if (!firstVolume) {
+      return (
+        <div className="text-center mt-8">
+          {(intl?.errors?.notFound as string) || "Serie no encontrada."}
+        </div>
+      );
+    }
+
+    const targetSection = getLibrarySection(firstVolume.metadataObj?.mangaStyle);
 
     if (targetSection !== "others") {
       redirect(getLibrarySeriesHref(lang, targetSection, serie.slug));
     }
 
+    const progressById = user
+      ? await listVolumeProgressByIds(
+          user.id,
+          volumePage.items.map((volume) => volume.id)
+        )
+      : {};
+
+    const paginatedVolumes = volumePage.items.map((vol) => {
+      const meta = {
+        ...(vol.metadataObj || null),
+        genres: [],
+        tags: [],
+      };
+
+      return {
+        ...vol,
+        usersProgress: progressById[vol.id] ? [progressById[vol.id]] : [],
+        coverImage: getMangaCoverUrl(vol),
+        meta,
+      };
+    });
+
     const normalizedSerie = {
       ...serie,
       coverImage: getMangaCoverUrl({
-        slug: serie.volumes?.[0]?.slug ?? "",
-        coverImage: serie.volumes?.[0]?.coverImage ?? null,
-        updatedAt: serie.volumes?.[0]?.updatedAt,
+        slug: firstVolume.slug,
+        coverImage: firstVolume.coverImage ?? null,
+        updatedAt: firstVolume.updatedAt,
       }),
-      volumes:
-        serie.volumes?.map((vol) => {
-          const meta = {
-            ...(vol.metadataObj || null),
-            genres: Array.isArray(vol.genres)
-              ? vol.genres
-                  .map((genre) => (genre.name ? { name: genre.name.trim() } : null))
-                  .filter(Boolean)
-              : [],
-            tags: Array.isArray(vol.tags)
-              ? vol.tags
-                  .map((tag) => (tag.name ? { name: tag.name.trim() } : null))
-                  .filter(Boolean)
-              : [],
-          };
-          return {
-            ...vol,
-            coverImage: getMangaCoverUrl(vol),
-            meta,
-          };
-        }) ?? [],
+      meta: {
+        ...(firstVolume.metadataObj || null),
+        genres: (firstVolume.genres ?? [])
+          .map((genre) => (genre.name ? { name: genre.name.trim() } : null))
+          .filter(Boolean),
+        tags: (firstVolume.tags ?? [])
+          .map((tag) => (tag.name ? { name: tag.name.trim() } : null))
+          .filter(Boolean),
+      },
+      volumes: paginatedVolumes,
     };
 
-    const sortedVolumes = sortByPaddedTitle(normalizedSerie.volumes);
-    const aggregatedMeta = aggregateMetadata(sortedVolumes);
+    const aggregatedMeta = aggregateMetadata(aggregateVolumes);
 
     let isFavorite = false;
     let averageRating: number | null = null;
@@ -148,11 +162,11 @@ async function OthersSeriesPageContent({
     if (user) {
       isFavorite = await findSeriesFavoriteState(user.id, serie.id);
 
-      const volumeIds = serie.volumes.map((v) => v.id);
+      const volumeIds = aggregateVolumes.map((volume) => volume.id);
       const personalMap = await listVolumeRatings(user.id, volumeIds);
 
-      const ratings = serie.volumes
-        .map((v) => personalMap.get(v.id) ?? v.metadataObj?.communityRating)
+      const ratings = aggregateVolumes
+        .map((volume) => personalMap.get(volume.id) ?? volume.communityRating)
         .filter((r): r is number => r !== null && r !== undefined);
 
       if (ratings.length > 0) {
@@ -163,13 +177,20 @@ async function OthersSeriesPageContent({
 
     return (
       <SeriesContent
-        serieData={{ ...normalizedSerie, volumes: sortedVolumes }}
+        serieData={normalizedSerie}
         lang={lang as Locale}
         intl={intl}
         isFavorite={isFavorite}
-        aggregatedMeta={aggregatedMeta}
+        aggregatedMeta={{
+          ...aggregatedMeta,
+          genres: normalizedSerie.meta.genres as { name: string }[],
+          tags: normalizedSerie.meta.tags as { name: string }[],
+        }}
         averageRating={averageRating}
         user={user}
+        currentPage={volumePage.page}
+        totalPages={volumePage.totalPages}
+        totalVolumes={volumePage.total}
         section="others"
       />
     );
@@ -186,26 +207,13 @@ async function OthersSeriesPageContent({
   }
 }
 
-async function OthersSeriesPageGate({
+export default function OthersSeriesPage({
   params,
+  searchParams,
 }: OthersSeriesPageProps) {
-  const othersLibraryEnabled = await isOthersLibraryEnabled();
-
-  if (!othersLibraryEnabled) {
-    notFound();
-  }
-
-  return (
-    <Suspense fallback={<SeriesSkeleton />}>
-      <OthersSeriesPageContent params={params} />
-    </Suspense>
-  );
-}
-
-export default function OthersSeriesPage(props: OthersSeriesPageProps) {
   return (
-    <Suspense fallback={<SeriesSkeleton />}>
-      <OthersSeriesPageGate {...props} />
+    <Suspense fallback={<DetailSkeleton kind="series" />}>
+      <OthersSeriesPageContent params={params} searchParams={searchParams} />
     </Suspense>
   );
 }

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

@@ -1,7 +1,5 @@
 import { Suspense } from "react";
-import { notFound } from "next/navigation";
 import HeroKeepRead from "@/components/library/manga/row/HeroKeepRead";
-import { isOthersLibraryEnabled } from "@/lib/db/appSettings";
 import { getDictionary } from "@/lib/i18n/Dictionary";
 import type { Locale } from "@/lib/types";
 import type { ReactNode } from "react";
@@ -27,12 +25,6 @@ async function OthersLayoutContent({
   params,
 }: OthersLayoutProps) {
   const { lang = "es" } = await params;
-  const othersLibraryEnabled = await isOthersLibraryEnabled();
-
-  if (!othersLibraryEnabled) {
-    notFound();
-  }
-
   const intl = await getDictionary(lang as Locale);
 
   return (

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

@@ -1,9 +1,7 @@
 import { Suspense } from "react";
-import { notFound } from "next/navigation";
 import NextVol from "@/components/library/manga/row/NextVol";
 import NewVols from "@/components/library/manga/row/NewVols";
 import RecentlyRead from "@/components/library/manga/row/RecentlyRead";
-import { isOthersLibraryEnabled } from "@/lib/db/appSettings";
 import { getDictionary } from "@/lib/i18n/Dictionary";
 import type { Locale } from "@/lib/types";
 
@@ -26,12 +24,6 @@ function MangaRowSkeleton() {
 
 async function OthersPageContent({ params }: OthersPageProps) {
   const { lang = "es" } = await params;
-  const othersLibraryEnabled = await isOthersLibraryEnabled();
-
-  if (!othersLibraryEnabled) {
-    notFound();
-  }
-
   const intl = await getDictionary(lang as Locale);
 
   return (

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

@@ -1,8 +1,6 @@
 import { Suspense } from "react";
-import { notFound } from "next/navigation";
 import { getDictionary } from "@/lib/i18n/Dictionary";
 import SeriesIndex from "@/components/library/manga/grid/SeriesIndex";
-import { isOthersLibraryEnabled } from "@/lib/db/appSettings";
 import type { Locale } from "@/lib/types";
 
 interface OthersSeriesPageProps {
@@ -43,16 +41,10 @@ async function SeriesIndexContent({
   );
 }
 
-async function OthersSeriesPageGate({
+export default function OthersSeriesPage({
   searchParams,
   params,
 }: OthersSeriesPageProps) {
-  const othersLibraryEnabled = await isOthersLibraryEnabled();
-
-  if (!othersLibraryEnabled) {
-    notFound();
-  }
-
   return (
     <section className="p-4 mt-4">
       <Suspense fallback={<GridSkeleton />}>
@@ -61,11 +53,3 @@ async function OthersSeriesPageGate({
     </section>
   );
 }
-
-export default function OthersSeriesPage(props: OthersSeriesPageProps) {
-  return (
-    <Suspense fallback={<GridSkeleton />}>
-      <OthersSeriesPageGate {...props} />
-    </Suspense>
-  );
-}

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

@@ -1,8 +1,6 @@
 import { Suspense } from "react";
-import { notFound } from "next/navigation";
 import { getDictionary } from "@/lib/i18n/Dictionary";
 import WantToRead from "@/components/library/manga/grid/WantToRead";
-import { isOthersLibraryEnabled } from "@/lib/db/appSettings";
 import type { Locale } from "@/lib/types";
 
 interface OthersToReadPageProps {
@@ -43,16 +41,10 @@ async function WantToReadContent({
   );
 }
 
-async function OthersToReadPageGate({
+export default function OthersToReadPage({
   searchParams,
   params,
 }: OthersToReadPageProps) {
-  const othersLibraryEnabled = await isOthersLibraryEnabled();
-
-  if (!othersLibraryEnabled) {
-    notFound();
-  }
-
   return (
     <section className="p-4 mt-4">
       <Suspense fallback={<GridSkeleton />}>
@@ -61,11 +53,3 @@ async function OthersToReadPageGate({
     </section>
   );
 }
-
-export default function OthersToReadPage(props: OthersToReadPageProps) {
-  return (
-    <Suspense fallback={<GridSkeleton />}>
-      <OthersToReadPageGate {...props} />
-    </Suspense>
-  );
-}

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

@@ -1,6 +1,7 @@
 import { Suspense } from "react";
-import { notFound, redirect } from "next/navigation";
+import { redirect } from "next/navigation";
 import VolumesContent from "@/components/library/manga/VolumesContent";
+import DetailSkeleton from "@/components/library/manga/DetailSkeleton";
 import { verifySession } from "@/lib/auth/verifySession";
 import {
   findVolumeProgress,
@@ -13,33 +14,15 @@ import {
   getLibraryVolumeHref,
 } from "@/lib/librarySection";
 import { getMangaCoverUrl } from "@/lib/mangaCover";
-import { isOthersLibraryEnabled } from "@/lib/db/appSettings";
 import type { Locale } from "@/lib/types";
 
 interface OthersVolumePageProps {
   params: Promise<{ lang: string; slug: string }>;
 }
 
-function VolumeSkeleton() {
-  return (
-    <div className="p-4">
-      <div className="h-8 w-48 rounded bg-sand animate-pulse mb-4" />
-      <div className="flex gap-4">
-        <div className="w-40 aspect-[3/5] rounded-lg bg-sand animate-pulse flex-shrink-0" />
-        <div className="flex-1 flex flex-col gap-3">
-          {Array.from({ length: 4 }).map((_, i) => (
-            <div key={i} className="h-4 rounded bg-sand animate-pulse" />
-          ))}
-        </div>
-      </div>
-    </div>
-  );
-}
-
 async function OthersVolumePageContent({ params }: OthersVolumePageProps) {
   const { lang = "es", slug } = await params;
   const intl = await getDictionary(lang as Locale);
-  const othersLibraryEnabled = await isOthersLibraryEnabled();
 
   try {
     const user = await verifySession();
@@ -58,10 +41,7 @@ async function OthersVolumePageContent({ params }: OthersVolumePageProps) {
       );
     }
 
-    const targetSection = getLibrarySection(
-      volumeEntry.metadataObj?.mangaStyle,
-      othersLibraryEnabled
-    );
+    const targetSection = getLibrarySection(volumeEntry.metadataObj?.mangaStyle);
 
     if (targetSection !== "others") {
       redirect(getLibraryVolumeHref(lang, targetSection, volumeEntry.slug));
@@ -134,26 +114,10 @@ async function OthersVolumePageContent({ params }: OthersVolumePageProps) {
   }
 }
 
-async function OthersVolumePageGate({
-  params,
-}: OthersVolumePageProps) {
-  const othersLibraryEnabled = await isOthersLibraryEnabled();
-
-  if (!othersLibraryEnabled) {
-    notFound();
-  }
-
+export default function OthersVolumePage({ params }: OthersVolumePageProps) {
   return (
-    <Suspense fallback={<VolumeSkeleton />}>
+    <Suspense fallback={<DetailSkeleton kind="volume" />}>
       <OthersVolumePageContent params={params} />
     </Suspense>
   );
 }
-
-export default function OthersVolumePage(props: OthersVolumePageProps) {
-  return (
-    <Suspense fallback={<VolumeSkeleton />}>
-      <OthersVolumePageGate {...props} />
-    </Suspense>
-  );
-}

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

@@ -1,8 +1,6 @@
 import { Suspense } from "react";
-import { notFound } from "next/navigation";
 import { getDictionary } from "@/lib/i18n/Dictionary";
 import VolumesIndex from "@/components/library/manga/grid/VolumesIndex";
-import { isOthersLibraryEnabled } from "@/lib/db/appSettings";
 import type { Locale } from "@/lib/types";
 
 interface OthersVolumesPageProps {
@@ -43,16 +41,10 @@ async function VolumesIndexContent({
   );
 }
 
-async function OthersVolumesPageGate({
+export default function OthersVolumesPage({
   searchParams,
   params,
 }: OthersVolumesPageProps) {
-  const othersLibraryEnabled = await isOthersLibraryEnabled();
-
-  if (!othersLibraryEnabled) {
-    notFound();
-  }
-
   return (
     <section className="p-4 mt-4">
       <Suspense fallback={<GridSkeleton />}>
@@ -61,11 +53,3 @@ async function OthersVolumesPageGate({
     </section>
   );
 }
-
-export default function OthersVolumesPage(props: OthersVolumesPageProps) {
-  return (
-    <Suspense fallback={<GridSkeleton />}>
-      <OthersVolumesPageGate {...props} />
-    </Suspense>
-  );
-}

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

@@ -10,9 +10,9 @@ import Link from "next/link";
 import clsx from "clsx";
 import ReloadButton from "@/components/ui/ReloadButton";
 import PushButton from "@/components/ui/PushButton";
-import { isOthersLibraryEnabled } from "@/lib/db/appSettings";
 import { getLibrarySection } from "@/lib/librarySection";
 import { getMangaCoverUrl } from "@/lib/mangaCover";
+import { getVolumeProgressRatio } from "@/lib/reader/readingProgress";
 import type { Locale, DictionarySection } from "@/lib/types";
 import type { HomeKeepReadingEntry } from "@/components/home/manga/HeroKeepRead";
 import type { VolumeEntry } from "@/components/home/manga/RowNewVolsCarousel";
@@ -91,7 +91,6 @@ async function HomeContent({
 }) {
   const volumesResult = await getMangaVolumes();
   const statsData = await getReaderStats();
-  const othersLibraryEnabled = await isOthersLibraryEnabled();
 
   const home = intl.home as DictionarySection;
   const volumes = volumesResult?.success && volumesResult.data
@@ -106,10 +105,7 @@ async function HomeContent({
         slug: vol.slug,
         isOneshot: vol.series?.isOneshot === true,
         coverImage: getMangaCoverUrl(vol),
-        section: getLibrarySection(
-          vol.metadataObj?.mangaStyle,
-          othersLibraryEnabled
-        ),
+        section: getLibrarySection(vol.metadataObj?.mangaStyle),
         meta: vol.metadataObj ? { title: vol.metadataObj.title } : null,
         lastPage: progress?.lastPage ?? 0,
         totalPages: progress?.totalPages ?? 0,
@@ -128,14 +124,12 @@ async function HomeContent({
     .sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime())
     .slice(0, 8)
     .map((vol) => ({
+      progressRatio: getVolumeProgressRatio(vol.usersProgress?.[0] ?? null),
       title: vol.title,
       slug: vol.slug,
       isOneshot: vol.series?.isOneshot === true,
       coverImage: getMangaCoverUrl(vol),
-      section: getLibrarySection(
-        vol.metadataObj?.mangaStyle,
-        othersLibraryEnabled
-      ),
+      section: getLibrarySection(vol.metadataObj?.mangaStyle),
       meta: vol.metadataObj ? { title: vol.metadataObj.title } : null,
     }));
 

package/dist/src/app/[lang]/settings/library/page.tsx

@@ -3,9 +3,7 @@ import { connection } from "next/server";
 import { getDictionary } from "@/lib/i18n/Dictionary";
 import { FolderCogIcon } from "lucide-react";
 import LibSettingsButtons from "@/components/settings/LibSettingsButtons";
-import LibraryModeTile from "@/components/settings/LibraryModeTile";
 import Separator from "@/components/ui/Separator";
-import { getAppSettingsLive } from "@/lib/db/appSettings";
 import type { Locale, Dictionary } from "@/lib/types";
 
 interface SettingsLibraryPageProps {
@@ -16,7 +14,6 @@ function SettingsLibrarySkeleton() {
   return (
     <>
       <div className="h-8 w-48 rounded bg-sand animate-pulse mb-4" />
-      <div className="h-32 rounded-lg bg-sand animate-pulse mb-4" />
       <div className="h-px bg-sand mb-4" />
       <div className="h-40 rounded-lg bg-sand animate-pulse" />
     </>
@@ -31,7 +28,6 @@ async function SettingsLibraryPageContent({
   const { lang = "es" } = await params;
   const intl: Dictionary = await getDictionary(lang as Locale);
   const libProvider = process.env.LIB_PROVIDER;
-  const settings = await getAppSettingsLive();
 
   return (
     <>
@@ -40,15 +36,11 @@ async function SettingsLibraryPageContent({
         {intl.settings.library as string}
       </h2>
 
-      <div className="mb-4">
-        <LibraryModeTile
-          intl={intl}
-          initialEnabled={settings.othersLibraryEnabled}
-        />
-      </div>
-
-      <Separator />
-      <LibSettingsButtons lang={lang as Locale} intl={intl} libProvider={libProvider} />
+      <LibSettingsButtons
+        lang={lang as Locale}
+        intl={intl}
+        libProvider={libProvider}
+      />
     </>
   );
 }