@itsmrtr/bunkoshelf 1.2.9 → 1.3.0

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

@@ -1,10 +1,10 @@
-import { listVolumes } from "@/lib/db/library";
-import { sortByPaddedTitle } from "@/lib/utils";
+import { listPagedVolumes, listVolumeProgressByIds } from "@/lib/db/library";
 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 {
   getLibraryVolumeHref,
@@ -14,8 +14,6 @@ import {
 import { getVolumeProgressRatio } from "@/lib/reader/readingProgress";
 import type { Locale, Dictionary } from "@/lib/types";
 
-const PAGE_SIZE = 35;
-
 interface VolumesIndexProps {
   lang: Locale;
   intl: Dictionary;
@@ -41,8 +39,9 @@ export default async function VolumesIndex({
   const tagList =
     typeof tagFilter === "string" ? tagFilter.split(",") : tagFilter;
 
-  const volumes = await listVolumes({
-    userId: user?.id ?? null,
+  const paginated = await listPagedVolumes({
+    page,
+    pageSize: LIBRARY_PAGE_SIZE,
     includeGenres: true,
     includeTags: true,
     genreNames: genreList,
@@ -50,21 +49,20 @@ export default async function VolumesIndex({
     scope,
   });
 
-  const sortedVolumes = sortByPaddedTitle(volumes);
-  const entries = sortedVolumes.map((vol) => ({
+  const progressById = user
+    ? await listVolumeProgressByIds(
+        user.id,
+        paginated.items.map((volume) => volume.id)
+      )
+    : {};
+
+  const entries = paginated.items.map((vol) => ({
     ...vol,
     isOneshot: vol.series?.isOneshot === true,
     coverImage: getMangaCoverUrl(vol),
     meta: vol.metadataObj || null,
-    genres: vol.genres.map((genre) => genre.name),
-    tags: vol.tags.map((tag) => tag.name),
   }));
 
-  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);
-
   return (
     <>
       <div className="flex items-center mb-4">
@@ -77,9 +75,9 @@ export default async function VolumesIndex({
       </div>
 
       <section className="grid grid-cols-2 md:grid-cols-5 2xl:grid-cols-7 gap-4">
-        {paginatedEntries.map((entry) => {
+        {entries.map((entry) => {
           const href = getLibraryVolumeHref(lang, section, entry.slug);
-          const progress = entry.usersProgress?.[0] ?? null;
+          const progress = progressById[entry.id] ?? null;
 
           return (
             <MangaCard
@@ -102,11 +100,11 @@ export default async function VolumesIndex({
         })}
       </section>
 
-      {total > PAGE_SIZE && (
+      {paginated.total > LIBRARY_PAGE_SIZE && (
         <div className="mt-8">
           <Pagination
             currentPage={page}
-            totalPages={totalPages}
+            totalPages={paginated.totalPages}
             intl={intl}
           />
         </div>

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

@@ -1,6 +1,12 @@
 import MangaCard from "@/components/ui/MangaCard";
 import { verifySession } from "@/lib/auth/verifySession";
-import { listFavoriteVolumeIds, listVolumes } from "@/lib/db/library";
+import {
+  listFavoriteVolumeIds,
+  listPagedVolumes,
+  listVolumeProgressByIds,
+} from "@/lib/db/library";
+import Pagination from "@/components/ui/Pagination";
+import { LIBRARY_PAGE_SIZE } from "@/lib/libraryPagination";
 import { getMangaCoverUrl } from "@/lib/mangaCover";
 import {
   getLibraryVolumeHref,
@@ -8,13 +14,13 @@ import {
   type LibrarySection,
 } from "@/lib/librarySection";
 import { getVolumeProgressRatio } from "@/lib/reader/readingProgress";
-import { sortByPaddedTitle } from "@/lib/utils";
 import { GhostIcon, BookCopyIcon } from "lucide-react";
 import type { Locale, Dictionary } from "@/lib/types";
 
 interface VolumesIndexFavProps {
   lang: Locale;
   intl: Dictionary;
+  page?: number;
   scope?: LibraryScope;
   section?: LibrarySection;
 }
@@ -22,11 +28,16 @@ interface VolumesIndexFavProps {
 export default async function VolumesIndexFav({
   lang,
   intl,
+  page = 1,
   scope = "all",
   section = "manga",
 }: VolumesIndexFavProps) {
   const user = await verifySession();
   if (!user) return null;
+  const heading =
+    section === "others"
+      ? intl.favorites.ttVolumesOthers
+      : intl.favorites.ttVolumesManga;
 
   const favoriteVolumeIds = await listFavoriteVolumeIds(user.id);
   if (favoriteVolumeIds.length === 0) {
@@ -38,12 +49,18 @@ export default async function VolumesIndexFav({
     );
   }
 
-  const volumes = await listVolumes({
+  const paginated = await listPagedVolumes({
+    page,
+    pageSize: LIBRARY_PAGE_SIZE,
     volumeIds: favoriteVolumeIds,
     scope,
   });
-  const sortedVolumes = sortByPaddedTitle(volumes);
-  const entries = sortedVolumes.map((vol) => ({
+  const progressById = await listVolumeProgressByIds(
+    user.id,
+    paginated.items.map((volume) => volume.id)
+  );
+
+  const entries = paginated.items.map((vol) => ({
     ...vol,
     isOneshot: vol.series?.isOneshot === true,
     coverImage: getMangaCoverUrl(vol),
@@ -52,16 +69,16 @@ export default async function VolumesIndexFav({
 
   return (
     <>
-      <h2 className="flex items-center mt-8 mb-4">
+      <h2 className="flex items-center mb-4">
         <BookCopyIcon size={28} className="mr-2" />
-        {intl.favorites.ttVolumes 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">
         {entries.map((entry) => {
           const href = getLibraryVolumeHref(lang, section, entry.slug);
           const coverImage = entry.coverImage;
-          const progress = entry.usersProgress?.[0] ?? null;
+          const progress = progressById[entry.id] ?? null;
 
           return (
             <MangaCard
@@ -83,6 +100,16 @@ export default async function VolumesIndexFav({
           );
         })}
       </div>
+
+      {paginated.total > LIBRARY_PAGE_SIZE && (
+        <div className="mt-8">
+          <Pagination
+            currentPage={page}
+            totalPages={paginated.totalPages}
+            intl={intl}
+          />
+        </div>
+      )}
     </>
   );
 }

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

@@ -1,10 +1,10 @@
 import { verifySession } from "@/lib/auth/verifySession";
-import { listVolumes } from "@/lib/db/library";
-import { sortByPaddedTitle } from "@/lib/utils";
+import { listPagedVolumes, listVolumeProgressByIds } from "@/lib/db/library";
 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 { LIBRARY_PAGE_SIZE } from "@/lib/libraryPagination";
 import { getMangaCoverUrl } from "@/lib/mangaCover";
 import {
   getLibraryVolumeHref,
@@ -14,8 +14,6 @@ import {
 import { getVolumeProgressRatio } from "@/lib/reader/readingProgress";
 import type { Locale, Dictionary } from "@/lib/types";
 
-const PAGE_SIZE = 35;
-
 interface WantToReadProps {
   lang: Locale;
   intl: Dictionary;
@@ -43,8 +41,10 @@ export default async function WantToRead({
   const tagList =
     typeof tagFilter === "string" ? tagFilter.split(",") : tagFilter;
 
-  const volumes = await listVolumes({
+  const paginated = await listPagedVolumes({
     userId: user.id,
+    page,
+    pageSize: LIBRARY_PAGE_SIZE,
     includeGenres: true,
     includeTags: true,
     genreNames: genreList,
@@ -53,21 +53,18 @@ export default async function WantToRead({
     scope,
   });
 
-  const sortedVolumes = sortByPaddedTitle(volumes);
-  const entries = sortedVolumes.map((vol) => ({
+  const progressById = await listVolumeProgressByIds(
+    user.id,
+    paginated.items.map((volume) => volume.id)
+  );
+
+  const entries = paginated.items.map((vol) => ({
     ...vol,
     isOneshot: vol.series?.isOneshot === true,
     coverImage: getMangaCoverUrl(vol),
     meta: vol.metadataObj || null,
-    genres: vol.genres.map((genre) => genre.name),
-    tags: vol.tags.map((tag) => tag.name),
   }));
 
-  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);
-
   return (
     <>
       <div className="flex items-center mb-4">
@@ -79,9 +76,9 @@ export default async function WantToRead({
       </div>
 
       <section className="grid grid-cols-2 md:grid-cols-5 2xl:grid-cols-7 gap-4">
-        {paginatedEntries.map((entry) => {
+        {entries.map((entry) => {
           const href = getLibraryVolumeHref(lang, section, entry.slug);
-          const progress = entry.usersProgress?.[0] ?? null;
+          const progress = progressById[entry.id] ?? null;
 
           return (
             <MangaCard
@@ -104,11 +101,11 @@ export default async function WantToRead({
         })}
       </section>
 
-      {total > PAGE_SIZE && (
+      {paginated.total > LIBRARY_PAGE_SIZE && (
         <div className="mt-8">
           <Pagination
             currentPage={page}
-            totalPages={totalPages}
+            totalPages={paginated.totalPages}
             intl={intl}
           />
         </div>

package/dist/src/components/library/manga/row/NewVols.tsx

@@ -3,6 +3,7 @@ import { getMangaVolumes } from "@/actions/library";
 import MangaRowCarousel, { type VolEntry } from "./MangaRowCarousel";
 import { getMangaCoverUrl } from "@/lib/mangaCover";
 import type { LibraryScope, LibrarySection } from "@/lib/librarySection";
+import { getVolumeProgressRatio } from "@/lib/reader/readingProgress";
 import type { Locale, Dictionary } from "@/lib/types";
 
 interface NewVolsProps {
@@ -26,14 +27,19 @@ export default async function NewVols({
     ? [...result.data]
         .sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime())
         .slice(0, maxItems)
-        .map((vol) => ({
-          slug: vol.slug,
-          title: vol.title,
-          isOneshot: vol.series?.isOneshot === true,
-          coverImage: getMangaCoverUrl(vol),
-          section,
-          meta: vol.metadataObj ?? null,
-        }))
+        .map((vol) => {
+          const progress = vol.usersProgress?.[0] ?? null;
+
+          return {
+            slug: vol.slug,
+            title: vol.title,
+            isOneshot: vol.series?.isOneshot === true,
+            coverImage: getMangaCoverUrl(vol),
+            section,
+            meta: vol.metadataObj ?? null,
+            progressRatio: getVolumeProgressRatio(progress),
+          };
+        })
     : [];
 
   return (

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

@@ -3,6 +3,7 @@
 import Link from "next/link";
 import Image from "next/image";
 import clsx from "clsx";
+import { useRef } from "react";
 import type { DictionarySection } from "@/lib/types";
 
 interface MangaCardProps {
@@ -38,6 +39,8 @@ export default function MangaCard({
 }: MangaCardProps) {
   const t = intl;
   const ratio = progressRatio ?? 0;
+  const touchStart = useRef<{ x: number; y: number } | null>(null);
+  const hasTouchMoved = useRef(false);
 
   const manga = t.manga as DictionarySection;
 
@@ -48,6 +51,40 @@ export default function MangaCard({
         "group flex flex-col overflow-hidden rounded-t-lg transition-all duration-300",
         isDragging ? "cursor-grabbing" : "cursor-pointer"
       )}
+      onTouchStart={(e) => {
+        const touch = e.touches[0];
+        if (!touch) return;
+        touchStart.current = { x: touch.clientX, y: touch.clientY };
+        hasTouchMoved.current = false;
+      }}
+      onTouchMove={(e) => {
+        const touch = e.touches[0];
+        const start = touchStart.current;
+        if (!touch || !start) return;
+
+        const deltaX = Math.abs(touch.clientX - start.x);
+        const deltaY = Math.abs(touch.clientY - start.y);
+
+        if (deltaX > 12 || deltaY > 12) {
+          hasTouchMoved.current = true;
+        }
+      }}
+      onTouchEnd={() => {
+        touchStart.current = null;
+        setTimeout(() => {
+          hasTouchMoved.current = false;
+        }, 0);
+      }}
+      onTouchCancel={() => {
+        touchStart.current = null;
+        hasTouchMoved.current = false;
+      }}
+      onClickCapture={(e) => {
+        if (isDragging || hasTouchMoved.current) {
+          e.preventDefault();
+          e.stopPropagation();
+        }
+      }}
     >
       <div className="relative aspect-[7/10.5] w-full flex-shrink-0">
         <Image

package/dist/src/lib/db/ingestion.ts

@@ -1,5 +1,6 @@
 import { createId } from "@paralleldrive/cuid2";
 import { execute, query, queryOne } from "./query";
+import { buildNaturalSortKey } from "@/lib/naturalSort";
 import type { ComicMetadata } from "@/lib/types";
 
 export interface IndexedSeries {
@@ -82,14 +83,16 @@ export async function upsertSeriesRecord(input: {
         id,
         slug,
         title,
+        sort_title,
         path,
         is_oneshot,
         mtime
       )
-      VALUES ($1, $2, $3, $4, $5, $6)
+      VALUES ($1, $2, $3, $4, $5, $6, $7)
       ON CONFLICT (slug)
       DO UPDATE SET
         title = EXCLUDED.title,
+        sort_title = EXCLUDED.sort_title,
         path = EXCLUDED.path,
         is_oneshot = EXCLUDED.is_oneshot,
         mtime = EXCLUDED.mtime,
@@ -100,6 +103,7 @@ export async function upsertSeriesRecord(input: {
       createId(),
       input.slug,
       input.title,
+      buildNaturalSortKey(input.title),
       input.path,
       input.isOneshot,
       input.mtime,
@@ -129,6 +133,7 @@ export async function upsertVolumeRecord(input: {
         id,
         slug,
         title,
+        sort_title,
         filename,
         full_path,
         size,
@@ -136,10 +141,11 @@ export async function upsertVolumeRecord(input: {
         cover_image,
         series_id
       )
-      VALUES ($1, $2, $3, $4, $5, $6, $7, $8, $9)
+      VALUES ($1, $2, $3, $4, $5, $6, $7, $8, $9, $10)
       ON CONFLICT (slug)
       DO UPDATE SET
         title = EXCLUDED.title,
+        sort_title = EXCLUDED.sort_title,
         filename = EXCLUDED.filename,
         full_path = EXCLUDED.full_path,
         size = EXCLUDED.size,
@@ -153,6 +159,7 @@ export async function upsertVolumeRecord(input: {
       createId(),
       input.slug,
       input.title,
+      buildNaturalSortKey(input.title),
       input.filename,
       input.fullPath,
       input.size,
@@ -514,7 +521,7 @@ export async function findSeriesWithVolumesById(
       SELECT id, slug, title, filename, full_path, size, cover_image, metadata_id, series_id
       FROM manga_volumes
       WHERE series_id = $1
-      ORDER BY title ASC
+      ORDER BY sort_title ASC, id ASC
     `,
     [seriesId]
   );