@itsmrtr/bunkoshelf 1.2.8 → 1.3.0

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

@@ -2,14 +2,13 @@
 
 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";
 
 interface FavoritesNavProps {
   intl: Dictionary;
-  isOthersEnabled: boolean;
 }
 
 interface NavLink {
@@ -17,11 +16,11 @@ interface NavLink {
   href: string;
   icon: LucideIcon;
   isActive: boolean;
+  badge?: string;
 }
 
 export default function FavoritesNav({
   intl,
-  isOthersEnabled,
 }: FavoritesNavProps) {
   const params = useParams<{ lang: Locale }>();
   const pathname = usePathname();
@@ -29,21 +28,33 @@ 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.sectionOthersSeries,
+      href: `/${currentLang}/favorites/others`,
+      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",
     },
-    ...(isOthersEnabled
-      ? [
-          {
-            label: intl.favorites.sectionOthers,
-            href: `/${currentLang}/favorites/others`,
-            icon: BookHeartIcon,
-            isActive: pathname === `/${currentLang}/favorites/others`,
-          },
-        ]
-      : []),
     {
       label: intl.favorites.sectionBooks,
       href: `/${currentLang}/favorites/books`,
@@ -54,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/home/manga/RowNewVolsCarousel.tsx

@@ -16,6 +16,7 @@ export interface VolumeEntry {
   coverImage: string | null;
   section: LibrarySection;
   meta: { title?: string | null } | null;
+  progressRatio?: number | null;
 }
 
 interface RowNewVolsCarouselProps {
@@ -112,6 +113,7 @@ export default function RowNewVolsCarousel({ entries, lang, intl }: RowNewVolsCa
               isOneshot={entry.isOneshot}
               volumeCount={null}
               cover={entry.coverImage}
+              progressRatio={entry.progressRatio ?? null}
               intl={intl}
               isDragging={isDragging}
               className="font-roboto font-bold leading-5 2xl:leading-5.5 text-base 2xl:text-lg"

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

@@ -0,0 +1,149 @@
+type DetailSkeletonKind = "series" | "volume";
+
+interface DetailSkeletonProps {
+  kind: DetailSkeletonKind;
+}
+
+function Pulse({ className }: { className: string }) {
+  return <div className={`animate-pulse rounded bg-sand/75 ${className}`} />;
+}
+
+function Chip({ className }: { className: string }) {
+  return <Pulse className={`h-9 rounded-md ${className}`} />;
+}
+
+function MetaRows({ count = 3 }: { count?: number }) {
+  return (
+    <div className="space-y-4">
+      {Array.from({ length: count }).map((_, index) => (
+        <div key={index} className="flex flex-row items-baseline max-w-3xl">
+          <Pulse className="h-4 w-20" />
+          <Pulse
+            className={`ml-6 h-5 ${
+              index % 3 === 0
+                ? "w-40 md:w-56"
+                : index % 3 === 1
+                  ? "w-48"
+                  : "w-32"
+            }`}
+          />
+        </div>
+      ))}
+    </div>
+  );
+}
+
+function CardGridSkeleton() {
+  return (
+    <div className="grid grid-cols-2 gap-4 mt-4 md:grid-cols-5 2xl:grid-cols-7">
+      {Array.from({ length: 5 }).map((_, index) => (
+        <div
+          key={index}
+          className={
+            index > 3 ? "hidden 2xl:block" : index > 1 ? "hidden md:block" : ""
+          }
+        >
+          <Pulse className="aspect-[3/5] w-full rounded-lg" />
+          <Pulse className="mt-3 h-5 w-4/5" />
+          <Pulse className="mt-2 h-1.5 w-full rounded-full" />
+        </div>
+      ))}
+    </div>
+  );
+}
+
+function VolumeTabsSkeleton() {
+  return (
+    <div className="mt-8">
+      <div className="mb-6 flex gap-4 border-b border-neutral-700">
+        <Pulse className="mb-2 h-4 w-20" />
+        <Pulse className="mb-2 h-4 w-36" />
+      </div>
+      <MetaRows count={6} />
+      <div className="mt-8 flex flex-wrap gap-2">
+        <Chip className="w-28" />
+        <Chip className="w-20" />
+        <Chip className="w-32" />
+      </div>
+    </div>
+  );
+}
+
+export default function DetailSkeleton({ kind }: DetailSkeletonProps) {
+  const isVolume = kind === "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">
+          <div className="mb-8 px-16 md:mb-0 md:mr-4 md:px-0 md:sticky md:top-4 md:self-start">
+            <Pulse className="aspect-[3/5] w-full rounded-lg" />
+          </div>
+        </div>
+
+        <div className="w-full md:w-7/12 2xl:w-2/3 2xl:pl-4">
+          <Pulse className="h-12 w-3/4 md:h-14 md:w-2/3" />
+
+          {isVolume && <Pulse className="mt-4 h-7 w-44 md:w-56" />}
+
+          <div className="mt-4 flex flex-wrap gap-2">
+            <Pulse
+              className={
+                isVolume
+                  ? "h-14 w-40 rounded-lg md:w-44"
+                  : "h-14 w-32 rounded-lg md:w-36"
+              }
+            />
+            <Pulse className="h-14 w-14 rounded-lg" />
+            {isVolume && <Pulse className="h-14 w-14 rounded-lg" />}
+            <Pulse className="h-14 w-14 rounded-lg" />
+          </div>
+
+          <Pulse className="mt-8 h-12 w-28 md:w-32" />
+
+          <div className="mt-4 flex flex-wrap gap-2">
+            <Chip className="w-16" />
+            <Chip className="w-16" />
+            <Chip className="w-36 md:w-48" />
+          </div>
+
+          <Pulse className="mt-4 h-8 w-40 md:w-52" />
+
+          <div className="mt-8">
+            <Pulse className="mb-3 h-5 w-36 md:w-44" />
+            <div className="space-y-3">
+              <Pulse className="h-4 w-full" />
+              <Pulse className="h-4 w-full" />
+              <Pulse className="h-4 w-11/12" />
+              <Pulse className="h-4 w-2/3" />
+            </div>
+            <Pulse className="mt-4 h-5 w-28" />
+          </div>
+
+          {isVolume ? (
+            <VolumeTabsSkeleton />
+          ) : (
+            <>
+              <div className="my-8 h-px w-full bg-neutral-700" />
+              <MetaRows count={6} />
+              <div className="mt-8 flex flex-wrap gap-2">
+                <Chip className="w-28" />
+                <Chip className="w-20" />
+                <Chip className="w-32" />
+                <Chip className="w-24" />
+              </div>
+            </>
+          )}
+        </div>
+      </section>
+
+      {!isVolume && (
+        <section>
+          <div className="my-8 h-px w-full bg-neutral-700" />
+          <Pulse className="h-8 w-40" />
+          <CardGridSkeleton />
+        </section>
+      )}
+    </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 ${
@@ -98,12 +105,14 @@ export default function SeriesContent({
               </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)}
+              {isWesternReading
+                ? (intl.manga.readingEn as string)
+                : (intl.manga.readingJp as string)}
             </span>
           </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>
 
@@ -119,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"
@@ -136,39 +145,56 @@ export default function SeriesContent({
           {volumes && volumes.length > 0 ? (
             volumes.map((volume, idx) => {
               const progress =
-                (volume.usersProgress as Array<{
-                  isRead: boolean;
-                  lastPage: number | null;
-                  totalPages: number | null;
-                }> | undefined)?.[0] ?? null;
+                (
+                  volume.usersProgress as
+                    | Array<{
+                        isRead: boolean;
+                        lastPage: number | null;
+                        totalPages: number | null;
+                      }>
+                    | undefined
+                )?.[0] ?? null;
 
               return (
-              <MangaCard
-                key={idx}
-                title={(volume.meta as Record<string, string>)?.title || (volume.filename as string)}
-                href={`/${lang}/${section}/volume/${volume.slug as string}`}
-                isSeries={false}
-                isOneshot={false}
-                onGoing={false}
-                onPause={false}
-                volumeCount={null}
-                cover={(volume.coverImage as string) ?? null}
-                isDragging={false}
-                seriesSlug={null}
-                progressRatio={getVolumeProgressRatio(progress)}
-                intl={intl}
-                className="font-roboto font-bold leading-5 2xl:leading-5.5 text-base 2xl:text-lg"
-              />
+                <MangaCard
+                  key={idx}
+                  title={
+                    (volume.meta as Record<string, string>)?.title ||
+                    (volume.filename as string)
+                  }
+                  href={`/${lang}/${section}/volume/${volume.slug as string}`}
+                  isSeries={false}
+                  isOneshot={false}
+                  onGoing={false}
+                  onPause={false}
+                  volumeCount={null}
+                  cover={(volume.coverImage as string) ?? null}
+                  isDragging={false}
+                  seriesSlug={null}
+                  progressRatio={getVolumeProgressRatio(progress)}
+                  intl={intl}
+                  className="font-roboto font-bold leading-5 2xl:leading-5.5 text-base 2xl:text-lg"
+                />
               );
             })
           ) : (
             <div>
               {(intl?.library?.noVolumes as string) ||
-                "No hay volúmenes disponibles para esta serie."}
+                "No hay Tomos disponibles para esta serie."}
             </div>
           )}
         </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>
+      )}
     </>
   );
 }