@itsmrtr/bunkoshelf 1.2.9 → 1.3.0

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

@@ -6,23 +6,22 @@ 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 { 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,23 +54,24 @@ function aggregateMetadata(
 
 interface OthersSeriesPageProps {
   params: Promise<{ lang: string; series: string }>;
+  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);
 
   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 (
@@ -83,44 +81,80 @@ async function OthersSeriesPageContent({
       );
     }
 
-    const targetSection = getLibrarySection(serie.volumes[0]?.metadataObj?.mangaStyle);
+    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;
@@ -128,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) {
@@ -143,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"
       />
     );
@@ -166,10 +207,13 @@ async function OthersSeriesPageContent({
   }
 }
 
-export default function OthersSeriesPage({ params }: OthersSeriesPageProps) {
+export default function OthersSeriesPage({
+  params,
+  searchParams,
+}: OthersSeriesPageProps) {
   return (
     <Suspense fallback={<DetailSkeleton kind="series" />}>
-      <OthersSeriesPageContent params={params} />
+      <OthersSeriesPageContent params={params} searchParams={searchParams} />
     </Suspense>
   );
 }

package/dist/src/components/favorites/FavoritesNav.tsx

@@ -2,7 +2,7 @@
 
 import Link from "next/link";
 import { usePathname, useParams } from "next/navigation";
-import { BookHeartIcon } from "lucide-react";
+import { BookCopyIcon, BookHeartIcon, LibraryBigIcon } from "lucide-react";
 import clsx from "clsx";
 import type { Dictionary, DictionarySection, Locale } from "@/lib/types";
 import type { LucideIcon } from "lucide-react";
@@ -16,6 +16,7 @@ interface NavLink {
   href: string;
   icon: LucideIcon;
   isActive: boolean;
+  badge?: string;
 }
 
 export default function FavoritesNav({
@@ -27,16 +28,32 @@ export default function FavoritesNav({
 
   const links: NavLink[] = [
     {
-      label: intl.favorites.sectionManga,
-      href: `/${currentLang}/favorites`,
-      icon: BookHeartIcon,
-      isActive: pathname === `/${currentLang}/favorites`,
+      label: intl.favorites.sectionMangaSeries,
+      href: `/${currentLang}/favorites/manga`,
+      icon: LibraryBigIcon,
+      isActive: pathname === `/${currentLang}/favorites/manga`,
+      badge: "M",
+    },
+    {
+      label: intl.favorites.sectionMangaVolumes,
+      href: `/${currentLang}/favorites/manga/volumes`,
+      icon: BookCopyIcon,
+      isActive: pathname === `/${currentLang}/favorites/manga/volumes`,
+      badge: "M",
     },
     {
-      label: intl.favorites.sectionOthers,
+      label: intl.favorites.sectionOthersSeries,
       href: `/${currentLang}/favorites/others`,
-      icon: BookHeartIcon,
+      icon: LibraryBigIcon,
       isActive: pathname === `/${currentLang}/favorites/others`,
+      badge: "C",
+    },
+    {
+      label: intl.favorites.sectionOthersVolumes,
+      href: `/${currentLang}/favorites/others/volumes`,
+      icon: BookCopyIcon,
+      isActive: pathname === `/${currentLang}/favorites/others/volumes`,
+      badge: "C",
     },
     {
       label: intl.favorites.sectionBooks,
@@ -48,24 +65,42 @@ export default function FavoritesNav({
 
   return (
     <div className="mt-4 md:mt-16">
-      <div className={clsx("md:space-y-2", "flex md:block gap-2")}>
-        {links.map(({ href, icon: Icon, label, isActive }, index) => (
+      <nav className="md:space-y-2 md:block flex gap-1">
+        {links.map(({ href, icon: Icon, label, isActive, badge }, index) => (
           <Link
             key={index}
             href={href}
             prefetch={false}
             className={clsx(
-              "flex flex-col md:flex-row justify-center md:justify-start w-full items-center p-4 rounded-lg leading-none text-onix transition-all duration-300",
-              isActive ? "bg-sand" : "hover:bg-sand"
+              "flex items-center p-4 rounded-lg leading-none text-onix md:w-full justify-center md:justify-start flex-1 transition-all duration-300",
+              {
+                "bg-sand": isActive,
+                "hover:bg-sand": !isActive,
+              },
+              "group"
             )}
+            aria-label={label as string}
           >
-            <span className="flex">
-              <Icon size={20} className="mr-1 md:mr-2" />
-              {label as string}
-            </span>
+            <Icon size={20} className="mr-0 md:mr-2" />
+            <span className="hidden md:inline">{label as string}</span>
+            {badge && (
+              <span
+                className={clsx(
+                  "text-xs px-2 py-0.5 rounded-sm md:hidden",
+                  "group-hover:bg-pearl transition-all duration-300",
+                  {
+                    "bg-pearl": isActive,
+                    "bg-sand": !isActive,
+                  },
+                  "ml-1"
+                )}
+              >
+                {badge}
+              </span>
+            )}
           </Link>
         ))}
-      </div>
+      </nav>
     </div>
   );
 }

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

@@ -8,6 +8,7 @@ import DeleteMangaItem from "./DeleteMangaItem";
 import ScanSeriesButton from "./ScanSeriesButton";
 import Separator from "@/components/ui/Separator";
 import SeriesRating from "./SeriesRating";
+import Pagination from "@/components/ui/Pagination";
 import type { LibrarySection } from "@/lib/librarySection";
 import { getVolumeProgressRatio } from "@/lib/reader/readingProgress";
 import type { Locale, Dictionary, Session } from "@/lib/types";
@@ -17,9 +18,12 @@ interface SeriesContentProps {
   lang: Locale;
   intl: Dictionary;
   isFavorite: boolean;
-  aggregatedMeta: Record<string, string[]>;
+  aggregatedMeta: Record<string, unknown>;
   averageRating: number | null;
   user: Session | null;
+  currentPage?: number;
+  totalPages?: number;
+  totalVolumes?: number;
   section?: LibrarySection;
 }
 
@@ -31,12 +35,15 @@ export default function SeriesContent({
   aggregatedMeta,
   averageRating,
   user,
+  currentPage = 1,
+  totalPages = 1,
+  totalVolumes,
   section = "manga",
 }: SeriesContentProps) {
   const volumes = serieData.volumes as Record<string, unknown>[];
-  const coverImage =
-    (volumes?.[volumes.length - 1]?.coverImage as string) ?? null;
-  const meta = (volumes?.[0]?.meta || {}) as Record<string, unknown>;
+  const volumeCount = totalVolumes ?? volumes.length;
+  const coverImage = (serieData.coverImage as string) ?? null;
+  const meta = (serieData.meta || {}) as Record<string, unknown>;
 
   const ageMin = ageRatingMap(meta.ageRating as string);
   const badgeClass = `text-sm uppercase rounded-md px-3 py-1 mr-2 ${
@@ -105,7 +112,7 @@ export default function SeriesContent({
           </div>
 
           <p className="mt-4">
-            {meta.year ? (meta.year as number) : null} &bull; {volumes.length}{" "}
+            {meta.year ? (meta.year as number) : null} &bull; {volumeCount}{" "}
             {intl.manga.volumes as string}
           </p>
 
@@ -121,7 +128,7 @@ export default function SeriesContent({
           <Separator />
 
           <MetadataPanel
-            meta={{ ...aggregatedMeta, genres: meta.genres, tags: meta.tags }}
+            meta={aggregatedMeta}
             lang={lang}
             intl={intl}
             linkBase="series"
@@ -178,6 +185,16 @@ export default function SeriesContent({
           )}
         </div>
 
+        {totalPages > 1 && (
+          <div className="mt-8">
+            <Pagination
+              currentPage={currentPage}
+              totalPages={totalPages}
+              intl={intl}
+            />
+          </div>
+        )}
+
         {user?.isAdmin && (
           <>
             <Separator />

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

@@ -1,10 +1,11 @@
-import { listSeriesWithVolumes } from "@/lib/db/library";
+import { listPagedSeriesWithVolumes } from "@/lib/db/library";
 import { sortByPaddedTitle } from "@/lib/utils";
 import { LibraryBigIcon } from "lucide-react";
 import MangaCard from "@/components/ui/MangaCard";
 import Pagination from "@/components/ui/Pagination";
 import FiltersDrawer from "@/components/library/manga/FiltersDrawer";
 import { verifySession } from "@/lib/auth/verifySession";
+import { LIBRARY_PAGE_SIZE } from "@/lib/libraryPagination";
 import { getMangaCoverUrl } from "@/lib/mangaCover";
 import {
   getLibrarySeriesHref,
@@ -14,8 +15,6 @@ import {
 import { getSeriesBulkProgress } from "@/lib/reader/readingProgress";
 import type { Locale, Dictionary } from "@/lib/types";
 
-const PAGE_SIZE = 35;
-
 interface SeriesIndexProps {
   lang: Locale;
   intl: Dictionary;
@@ -40,25 +39,28 @@ export default async function SeriesIndex({
   const tagList =
     typeof tagFilter === "string" ? tagFilter.split(",") : tagFilter;
 
-  const [user, series] = await Promise.all([
+  const [user, paginated] = await Promise.all([
     verifySession(),
-    listSeriesWithVolumes({
+    listPagedSeriesWithVolumes({
+      page,
+      pageSize: LIBRARY_PAGE_SIZE,
       genreNames: genreList,
       tagNames: tagList,
       includeGenres: true,
       includeTags: true,
       scope,
+      excludeOneshots: true,
     }),
   ]);
 
-  const entries = series.filter((entry) => !entry.isOneshot).map((entry) => {
+  const entries = paginated.items.map((entry) => {
     const sortedVolumes = sortByPaddedTitle(entry.volumes);
 
     return {
       ...entry,
       coverImage:
         sortedVolumes.length > 0
-          ? getMangaCoverUrl(sortedVolumes[sortedVolumes.length - 1])
+          ? getMangaCoverUrl(sortedVolumes[0])
           : null,
       volumes: sortedVolumes.map((vol) => ({
         ...vol,
@@ -70,14 +72,9 @@ export default async function SeriesIndex({
     };
   });
 
-  const total = entries.length;
-  const totalPages = Math.ceil(total / PAGE_SIZE);
-  const start = (page - 1) * PAGE_SIZE;
-  const paginatedEntries = entries.slice(start, start + PAGE_SIZE);
-
   const readCountMap = await getSeriesBulkProgress(
     user?.id ?? null,
-    paginatedEntries.map((e) => e.id)
+    entries.map((e) => e.id)
   );
 
   return (
@@ -92,7 +89,7 @@ export default async function SeriesIndex({
       </div>
 
       <section className="grid grid-cols-2 gap-4 md:grid-cols-5 2xl:grid-cols-7">
-        {paginatedEntries.map((entry) => {
+        {entries.map((entry) => {
           const totalVolumes = entry.volumes.length;
           const readVolumes = readCountMap[entry.id] ?? 0;
           const progressRatio = totalVolumes > 0 ? readVolumes / totalVolumes : 0;
@@ -118,11 +115,11 @@ export default async function SeriesIndex({
         })}
       </section>
 
-      {total > PAGE_SIZE && (
+      {paginated.total > LIBRARY_PAGE_SIZE && (
         <div className="mt-12">
           <Pagination
             currentPage={page}
-            totalPages={totalPages}
+            totalPages={paginated.totalPages}
             intl={intl}
           />
         </div>

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

@@ -2,9 +2,11 @@ import MangaCard from "@/components/ui/MangaCard";
 import { verifySession } from "@/lib/auth/verifySession";
 import {
   listFavoriteSeriesIds,
-  listSeriesWithVolumes,
+  listPagedSeriesWithVolumes,
 } from "@/lib/db/library";
 import { GhostIcon, LibraryBigIcon } from "lucide-react";
+import Pagination from "@/components/ui/Pagination";
+import { LIBRARY_PAGE_SIZE } from "@/lib/libraryPagination";
 import { getMangaCoverUrl } from "@/lib/mangaCover";
 import {
   getLibrarySeriesHref,
@@ -19,6 +21,7 @@ import type { Locale, Dictionary } from "@/lib/types";
 interface SeriesIndexFavProps {
   lang: Locale;
   intl: Dictionary;
+  page?: number;
   scope?: LibraryScope;
   section?: LibrarySection;
 }
@@ -26,11 +29,16 @@ interface SeriesIndexFavProps {
 export default async function SeriesIndexFav({
   lang,
   intl,
+  page = 1,
   scope = "all",
   section = "manga",
 }: SeriesIndexFavProps) {
   const user = await verifySession();
   if (!user) return null;
+  const heading =
+    section === "others"
+      ? intl.favorites.ttSeriesOthers
+      : intl.favorites.ttSeriesManga;
 
   const favoriteSeriesIds = await listFavoriteSeriesIds(user.id);
 
@@ -43,19 +51,21 @@ export default async function SeriesIndexFav({
     );
   }
 
-  const favorites = await listSeriesWithVolumes({
+  const favorites = await listPagedSeriesWithVolumes({
+    page,
+    pageSize: LIBRARY_PAGE_SIZE,
     seriesIds: favoriteSeriesIds,
     scope,
   });
 
-  const entries = favorites.map((series) => {
+  const entries = favorites.items.map((series) => {
     const sortedVolumes = sortByPaddedTitle(series.volumes);
 
     return {
       ...series,
       coverImage:
         sortedVolumes.length > 0
-          ? getMangaCoverUrl(sortedVolumes[sortedVolumes.length - 1])
+          ? getMangaCoverUrl(sortedVolumes[0])
           : null,
       volumes:
         sortedVolumes.map((vol) => ({
@@ -75,7 +85,7 @@ export default async function SeriesIndexFav({
     <>
       <h2 className="flex items-center mb-4">
         <LibraryBigIcon size={28} className="mr-2" />
-        {intl.favorites.ttSeries as string}
+        {heading as string}
       </h2>
 
       <div className="grid grid-cols-2 gap-4 md:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5">
@@ -111,6 +121,16 @@ export default async function SeriesIndexFav({
           );
         })}
       </div>
+
+      {favorites.total > LIBRARY_PAGE_SIZE && (
+        <div className="mt-8">
+          <Pagination
+            currentPage={page}
+            totalPages={favorites.totalPages}
+            intl={intl}
+          />
+        </div>
+      )}
     </>
   );
 }