@itsmrtr/bunkoshelf 1.2.7 → 1.2.9

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

@@ -1,6 +1,7 @@
 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";
@@ -14,7 +15,6 @@ import {
 } from "@/lib/librarySection";
 import { getMangaCoverUrl } from "@/lib/mangaCover";
 import { sortByPaddedTitle } from "@/lib/utils";
-import { isOthersLibraryEnabled } from "@/lib/db/appSettings";
 import type { Locale } from "@/lib/types";
 
 interface AggregatedMeta {
@@ -59,34 +59,18 @@ 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>
-  );
-}
-
 async function OthersSeriesPageContent({
   params,
 }: OthersSeriesPageProps) {
   const { lang = "es", series } = await params;
   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,
     });
@@ -99,10 +83,7 @@ async function OthersSeriesPageContent({
       );
     }
 
-    const targetSection = getLibrarySection(
-      serie.volumes[0]?.metadataObj?.mangaStyle,
-      othersLibraryEnabled
-    );
+    const targetSection = getLibrarySection(serie.volumes[0]?.metadataObj?.mangaStyle);
 
     if (targetSection !== "others") {
       redirect(getLibrarySeriesHref(lang, targetSection, serie.slug));
@@ -185,26 +166,10 @@ async function OthersSeriesPageContent({
   }
 }
 
-async function OthersSeriesPageGate({
-  params,
-}: OthersSeriesPageProps) {
-  const othersLibraryEnabled = await isOthersLibraryEnabled();
-
-  if (!othersLibraryEnabled) {
-    notFound();
-  }
-
+export default function OthersSeriesPage({ params }: OthersSeriesPageProps) {
   return (
-    <Suspense fallback={<SeriesSkeleton />}>
+    <Suspense fallback={<DetailSkeleton kind="series" />}>
       <OthersSeriesPageContent params={params} />
     </Suspense>
   );
 }
-
-export default function OthersSeriesPage(props: OthersSeriesPageProps) {
-  return (
-    <Suspense fallback={<SeriesSkeleton />}>
-      <OthersSeriesPageGate {...props} />
-    </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 { getAppSettings } 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 getAppSettings();
 
   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}
+      />
     </>
   );
 }

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

@@ -9,7 +9,6 @@ import type { LucideIcon } from "lucide-react";
 
 interface FavoritesNavProps {
   intl: Dictionary;
-  isOthersEnabled: boolean;
 }
 
 interface NavLink {
@@ -21,7 +20,6 @@ interface NavLink {
 
 export default function FavoritesNav({
   intl,
-  isOthersEnabled,
 }: FavoritesNavProps) {
   const params = useParams<{ lang: Locale }>();
   const pathname = usePathname();
@@ -34,16 +32,12 @@ export default function FavoritesNav({
       icon: BookHeartIcon,
       isActive: pathname === `/${currentLang}/favorites`,
     },
-    ...(isOthersEnabled
-      ? [
-          {
-            label: intl.favorites.sectionOthers,
-            href: `/${currentLang}/favorites/others`,
-            icon: BookHeartIcon,
-            isActive: pathname === `/${currentLang}/favorites/others`,
-          },
-        ]
-      : []),
+    {
+      label: intl.favorites.sectionOthers,
+      href: `/${currentLang}/favorites/others`,
+      icon: BookHeartIcon,
+      isActive: pathname === `/${currentLang}/favorites/others`,
+    },
     {
       label: intl.favorites.sectionBooks,
       href: `/${currentLang}/favorites/books`,

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>
+  );
+}