@itsmrtr/bunkoshelf 1.8.2 → 1.9.0

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

@@ -1,16 +1,19 @@
 import { Suspense } from "react";
 import { notFound } from "next/navigation";
+import { connection } from "next/server";
 import { robotoCondensed, boldonse } from "../fonts";
 import "../globals.css";
 import Sidebar from "@/components/sidebar/sidebar";
 import MobNav from "@/components/mobNav/MobNav";
 import { ToastProvider } from "@/components/ToastProvider";
+import { AlertDialogProvider } from "@/components/AlertDialogProvider";
 import PwaProvider from "@/components/pwa/PwaProvider";
 import OfflineGate from "@/components/pwa/OfflineGate";
 import { verifySession } from "@/lib/auth/verifySession";
 import { getDictionary } from "@/lib/i18n/Dictionary";
 import { getChallengeData } from "@/lib/utils";
 import { getVersionInfo } from "@/lib/versionInfo";
+import { getLibrarySectionCounts } from "@/lib/db/library";
 import type { Locale } from "@/lib/types";
 import type { ReactNode } from "react";
 import type { Metadata } from "next";
@@ -43,10 +46,13 @@ async function AppShell({
   children: ReactNode;
   lang: Locale;
 }) {
-  const [intl, user, versionData] = await Promise.all([
+  await connection();
+
+  const [intl, user, versionData, libraryCounts] = await Promise.all([
     getDictionary(lang),
     verifySession(),
     getVersionInfo(),
+    getLibrarySectionCounts(),
   ]);
   const challengeData = await getChallengeData(user);
 
@@ -58,6 +64,7 @@ async function AppShell({
         user={user}
         challengeData={challengeData}
         versionData={versionData}
+        libraryCounts={libraryCounts}
       />
       <Sidebar
         lang={lang}
@@ -65,13 +72,27 @@ async function AppShell({
         user={user}
         challengeData={challengeData}
         versionData={versionData}
+        libraryCounts={libraryCounts}
       />
       <main className="w-full md:w-[65%] lg:w-[75%] xl:w-[79%] 2xl:w-[83%] flex flex-col overflow-y-auto">
         <PwaProvider userId={user?.id}>
           <ToastProvider>
-            <OfflineGate lang={lang} intl={intl} user={user}>
-              {children}
-            </OfflineGate>
+            <AlertDialogProvider
+              labels={{
+                alertTitle: intl.alerts.alertTitle as string,
+                confirmTitle: intl.alerts.confirmTitle as string,
+                confirmEyebrow: intl.alerts.confirmEyebrow as string,
+                destructiveEyebrow: intl.alerts.destructiveEyebrow as string,
+                irreversibleDescription: intl.alerts.irreversibleDescription as string,
+                confirm: intl.alerts.confirm as string,
+                cancel: intl.alerts.cancel as string,
+                close: intl.alerts.close as string,
+              }}
+            >
+              <OfflineGate lang={lang} intl={intl} user={user}>
+                {children}
+              </OfflineGate>
+            </AlertDialogProvider>
           </ToastProvider>
         </PwaProvider>
       </main>

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

@@ -107,7 +107,7 @@ async function SeriesMangaPageContent({
       );
     }
 
-    const targetSection = getLibrarySection(firstVolume.metadataObj?.mangaStyle);
+    const targetSection = getLibrarySection(firstVolume.series.librarySection);
 
     if (targetSection !== "manga") {
       redirect(getLibrarySeriesHref(lang, targetSection, serie.slug));

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

@@ -41,7 +41,7 @@ async function VolumeMangaPageContent({ params }: VolumeMangaPageProps) {
       );
     }
 
-    const targetSection = getLibrarySection(volumeEntry.metadataObj?.mangaStyle);
+    const targetSection = getLibrarySection(volumeEntry.series.librarySection);
 
     if (targetSection !== "manga") {
       redirect(getLibraryVolumeHref(lang, targetSection, volumeEntry.slug));

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

@@ -19,6 +19,7 @@ import {
 import { getMangaCoverUrl } from "@/lib/mangaCover";
 import { LIBRARY_PAGE_SIZE } from "@/lib/libraryPagination";
 import type { Locale } from "@/lib/types";
+import type { LibrarySection } from "@/lib/librarySection";
 
 function aggregateMetadata(
   volumes: SeriesVolumeAggregate[]
@@ -55,11 +56,13 @@ function aggregateMetadata(
 interface OthersSeriesPageProps {
   params: Promise<{ lang: string; series: string }>;
   searchParams: Promise<Record<string, string | undefined>>;
+  section?: LibrarySection;
 }
 
-async function OthersSeriesPageContent({
+export async function OthersSeriesPageContent({
   params,
   searchParams,
+  section = "others",
 }: OthersSeriesPageProps) {
   const { lang = "es", series } = await params;
   const resolvedSearchParams = await searchParams;
@@ -107,9 +110,9 @@ async function OthersSeriesPageContent({
       );
     }
 
-    const targetSection = getLibrarySection(firstVolume.metadataObj?.mangaStyle);
+    const targetSection = getLibrarySection(firstVolume.series.librarySection);
 
-    if (targetSection !== "others") {
+    if (targetSection !== section) {
       redirect(getLibrarySeriesHref(lang, targetSection, serie.slug));
     }
 
@@ -191,7 +194,7 @@ async function OthersSeriesPageContent({
         currentPage={volumePage.page}
         totalPages={volumePage.totalPages}
         totalVolumes={volumePage.total}
-        section="others"
+        section={section}
       />
     );
   } catch (error) {

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

@@ -15,12 +15,14 @@ import {
 } from "@/lib/librarySection";
 import { getMangaCoverUrl } from "@/lib/mangaCover";
 import type { Locale } from "@/lib/types";
+import type { LibrarySection } from "@/lib/librarySection";
 
 interface OthersVolumePageProps {
   params: Promise<{ lang: string; slug: string }>;
+  section?: LibrarySection;
 }
 
-async function OthersVolumePageContent({ params }: OthersVolumePageProps) {
+export async function OthersVolumePageContent({ params, section = "others" }: OthersVolumePageProps) {
   const { lang = "es", slug } = await params;
   const intl = await getDictionary(lang as Locale);
 
@@ -41,9 +43,9 @@ async function OthersVolumePageContent({ params }: OthersVolumePageProps) {
       );
     }
 
-    const targetSection = getLibrarySection(volumeEntry.metadataObj?.mangaStyle);
+    const targetSection = getLibrarySection(volumeEntry.series.librarySection);
 
-    if (targetSection !== "others") {
+    if (targetSection !== section) {
       redirect(getLibraryVolumeHref(lang, targetSection, volumeEntry.slug));
     }
 
@@ -98,7 +100,7 @@ async function OthersVolumePageContent({ params }: OthersVolumePageProps) {
         personalRating={personalRating}
         readingEntries={readingEntries}
         firstRead={firstRead}
-        section="others"
+        section={section}
       />
     );
   } catch (error) {

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

@@ -105,7 +105,7 @@ async function HomeContent({
         slug: vol.slug,
         isOneshot: vol.series?.isOneshot === true,
         coverImage: getMangaCoverUrl(vol),
-        section: getLibrarySection(vol.metadataObj?.mangaStyle),
+        section: getLibrarySection(vol.series.librarySection),
         meta: vol.metadataObj ? { title: vol.metadataObj.title } : null,
         lastPage: progress?.lastPage ?? 0,
         totalPages: progress?.totalPages ?? 0,
@@ -129,7 +129,7 @@ async function HomeContent({
       slug: vol.slug,
       isOneshot: vol.series?.isOneshot === true,
       coverImage: getMangaCoverUrl(vol),
-      section: getLibrarySection(vol.metadataObj?.mangaStyle),
+      section: getLibrarySection(vol.series.librarySection),
       meta: vol.metadataObj ? { title: vol.metadataObj.title } : null,
     }));
 

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

@@ -91,7 +91,7 @@ async function SettingsPageContent({ params }: SettingsPageProps) {
         <div className="bg-blackamber rounded-lg p-4 2xl:flex-1/2">
           <div className="flex items-center justify-between mb-4">
             <h2 className="text-base">{intl.settings.ttActivity as string}</h2>
-            <ClearLogsButton />
+            <ClearLogsButton intl={intl} />
           </div>
           <div className="min-h-[300px] max-h-[300px] overflow-y-auto whitespace-pre-wrap flex flex-col gap-4">
             {logs

package/dist/src/app/api/admin/scan-manga/index-library/route.ts

@@ -116,6 +116,7 @@ export async function POST(request: NextRequest) {
           title: cleanTitle,
           path: `/${prefix}${seriesName}`,
           isOneshot,
+          librarySection: "manga",
           mtime: new Date(),
         });
 
@@ -189,6 +190,7 @@ export async function POST(request: NextRequest) {
           title: cleanTitle,
           path: dirPath,
           isOneshot,
+          librarySection: "manga",
           mtime: stat.mtime,
         });
 

package/dist/src/app/api/admin/upload/confirm/route.ts

@@ -57,7 +57,9 @@ export async function POST(request: NextRequest) {
     const { type, isNew, newDirectoryName, isOneshot, existingDirectory } =
       metadata;
 
-    const libraryType = type === "manga" ? "manga" : "books";
+    const libraryType = ["manga", "comic", "books", "others"].includes(type)
+      ? type
+      : "books";
     const suffix = isOneshot ? " [oneshot]" : "";
     const directoryName = isNew
       ? normalizeLibraryDirectoryName(newDirectoryName)
@@ -85,7 +87,7 @@ export async function POST(request: NextRequest) {
       );
       await upsertFileChecksumRecord(`/${txtKey}`, checksum);
 
-      if (libraryType === "manga" && file.volumeMetadata) {
+      if (libraryType !== "books" && file.volumeMetadata) {
         const seriesPath = `/library/${libraryType}/${dirWithSuffix}`;
         await indexUploadedVolume({
           fileName: file.fileName,
@@ -98,11 +100,12 @@ export async function POST(request: NextRequest) {
           genres: file.volumeMetadata?.genres || [],
           tags: file.volumeMetadata?.tags || [],
           fileSize: file.fileSize || 0,
+          librarySection: libraryType === "others" ? "other" : libraryType as "manga" | "comic",
         });
       }
     }
 
-    if (libraryType === "manga") {
+    if (libraryType !== "books") {
       revalidateMangaLibraryCache();
     }
 

package/dist/src/app/api/admin/upload/library/chunk/route.ts

@@ -105,7 +105,9 @@ export async function POST(request: NextRequest) {
     }
 
     if (chunkIndex === totalChunks - 1) {
-      const libraryType = type === "manga" ? "manga" : "books";
+      const libraryType = ["manga", "comic", "books", "others"].includes(type)
+        ? type
+        : "books";
       const fileBuffer = await fs.readFile(tempFilePath);
       const checksum = generateChecksum();
       const txtFileName = `${path.parse(fileName).name}.txt`;
@@ -168,7 +170,7 @@ export async function POST(request: NextRequest) {
           );
         }
 
-        if (libraryType === "manga") {
+        if (libraryType !== "books") {
           const seriesPath = `/library/${libraryType}/${dirWithSuffix}`;
           await indexUploadedVolume({
             fileName,
@@ -181,6 +183,7 @@ export async function POST(request: NextRequest) {
             genres: volumeMeta?.genres || [],
             tags: volumeMeta?.tags || [],
             fileSize: fileBuffer.length,
+            librarySection: libraryType === "others" ? "other" : libraryType as "manga" | "comic",
           });
           revalidateMangaLibraryCache();
         }
@@ -229,7 +232,7 @@ export async function POST(request: NextRequest) {
           );
         }
 
-        if (libraryType === "manga") {
+        if (libraryType !== "books") {
           await indexUploadedVolume({
             fileName,
             fullPath: finalPath,
@@ -241,6 +244,7 @@ export async function POST(request: NextRequest) {
             genres: volumeMeta?.genres || [],
             tags: volumeMeta?.tags || [],
             fileSize: fileBuffer.length,
+            librarySection: libraryType === "others" ? "other" : libraryType as "manga" | "comic",
           });
           revalidateMangaLibraryCache();
         }

package/dist/src/app/api/admin/upload/library/route.ts

@@ -28,7 +28,9 @@ export async function GET(request: NextRequest) {
     const action = searchParams.get("action");
 
     if (action === "list") {
-      const libraryType = type === "manga" ? "manga" : "books";
+      const libraryType = ["manga", "comic", "books", "others"].includes(type || "")
+        ? type!
+        : "books";
 
       let directories: string[] = [];
 
@@ -51,6 +53,7 @@ export async function GET(request: NextRequest) {
         }
       } else {
         const targetPath = path.join(LIBRARY_PATH, libraryType);
+        await fs.mkdir(targetPath, { recursive: true });
         const entries = await fs.readdir(targetPath, { withFileTypes: true });
         directories = entries
           .filter((entry) => entry.isDirectory())

package/dist/src/app/api/admin/upload/presigned/route.ts

@@ -43,7 +43,9 @@ export async function POST(request: NextRequest) {
     const { type, isNew, newDirectoryName, isOneshot, existingDirectory } =
       metadata;
 
-    const libraryType = type === "manga" ? "manga" : "books";
+    const libraryType = ["manga", "comic", "books", "others"].includes(type)
+      ? type
+      : "books";
     const suffix = isOneshot ? " [oneshot]" : "";
     const directoryName = isNew
       ? normalizeLibraryDirectoryName(newDirectoryName)

package/dist/src/app/api/library/download/series/[slug]/route.ts

@@ -1,6 +1,6 @@
 import { NextResponse, connection } from "next/server";
 import { Readable } from "node:stream";
-import { GetObjectCommand } from "@aws-sdk/client-s3";
+import { GetObjectCommand, HeadObjectCommand } from "@aws-sdk/client-s3";
 import { verifySession } from "@/lib/auth/verifySession";
 import {
   findSeriesBySlugBasic,
@@ -58,15 +58,29 @@ export async function GET(
       return NextResponse.json({ error: "Series has no volumes" }, { status: 404 });
     }
 
+    const objects = await Promise.all(
+      volumes.map(async (volume) => {
+        const key = volume.fullPath.replace(/^\/+/, "").replace(/\\/g, "/");
+        const head = await r2Client.send(
+          new HeadObjectCommand({ Bucket: R2_BUCKET, Key: key })
+        );
+
+        if (head.ContentLength === undefined) {
+          throw new Error(`Missing R2 size for ${volume.filename}`);
+        }
+
+        return { ...volume, key, size: head.ContentLength };
+      })
+    );
     const stream = createZipStream(
-      volumes.map((volume) => ({
+      objects.map((volume) => ({
         name: archiveName(volume.filename),
         size: volume.size,
         stream: async () => {
           const response = await r2Client.send(
             new GetObjectCommand({
               Bucket: R2_BUCKET,
-              Key: volume.fullPath.replace(/^\/+/, "").replace(/\\/g, "/"),
+              Key: volume.key,
             })
           );
 

package/dist/src/app/api/offline/library/[section]/series/[slug]/route.ts

@@ -19,7 +19,7 @@ export async function GET(
   if (!series) return NextResponse.json({ error: "Series not found" }, { status: 404 });
 
   const volumes = await listVolumes({ seriesIds: [series.id], includeGenres: true, includeTags: true, scope: getLibraryScope(section as LibrarySection) });
-  if (!volumes.length || getLibrarySection(volumes[0].metadataObj?.mangaStyle) !== section) {
+  if (!volumes.length || getLibrarySection(volumes[0].series.librarySection) !== section) {
     return NextResponse.json({ error: "Series not found" }, { status: 404 });
   }
   const progressById = await listVolumeProgressByIds(user.id, volumes.map((volume) => volume.id));

package/dist/src/app/api/offline/library/[section]/volume/[slug]/route.ts

@@ -24,7 +24,7 @@ export async function GET(
   if (!user) return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
 
   const volume = await findVolumeBySlug({ slug, includeGenres: true, includeTags: true });
-  if (!volume || getLibrarySection(volume.metadataObj?.mangaStyle) !== section) {
+  if (!volume || getLibrarySection(volume.series.librarySection) !== section) {
     return NextResponse.json({ error: "Volume not found" }, { status: 404 });
   }
   const progress = await findVolumeProgress(user.id, volume.id);

package/dist/src/components/AlertDialogProvider.tsx

@@ -0,0 +1,189 @@
+"use client";
+
+import {
+  createContext,
+  useContext,
+  useEffect,
+  useRef,
+  useState,
+  type ReactNode,
+} from "react";
+import { createPortal } from "react-dom";
+
+type DialogMode = "alert" | "confirm";
+
+export interface AlertDialogOptions {
+  eyebrow?: string;
+  title?: string;
+  description: string;
+  confirmLabel?: string;
+  cancelLabel?: string;
+  destructive?: boolean;
+  irreversible?: boolean;
+}
+
+type AlertDialogInput = string | AlertDialogOptions;
+
+interface AlertDialogLabels {
+  alertTitle: string;
+  confirmTitle: string;
+  confirmEyebrow: string;
+  destructiveEyebrow: string;
+  irreversibleDescription: string;
+  confirm: string;
+  cancel: string;
+  close: string;
+}
+
+interface AlertDialogContextValue {
+  alert: (input: AlertDialogInput) => Promise<void>;
+  confirm: (input: AlertDialogInput) => Promise<boolean>;
+}
+
+interface DialogRequest extends AlertDialogOptions {
+  mode: DialogMode;
+  resolve: (confirmed: boolean) => void;
+}
+
+const AlertDialogContext = createContext<AlertDialogContextValue | null>(null);
+
+export function useAlertDialog() {
+  return useContext(AlertDialogContext);
+}
+
+function toOptions(input: AlertDialogInput): AlertDialogOptions {
+  return typeof input === "string" ? { description: input } : input;
+}
+
+export function AlertDialogProvider({
+  children,
+  labels,
+}: {
+  children: ReactNode;
+  labels: AlertDialogLabels;
+}) {
+  const [request, setRequest] = useState<DialogRequest | null>(null);
+  const [mounted, setMounted] = useState(false);
+  const requestRef = useRef<DialogRequest | null>(null);
+
+  useEffect(() => {
+    setMounted(true);
+    return () => requestRef.current?.resolve(false);
+  }, []);
+
+  const open = (mode: DialogMode, input: AlertDialogInput) =>
+    new Promise<boolean>((resolve) => {
+      const nextRequest = { ...toOptions(input), mode, resolve };
+      requestRef.current?.resolve(false);
+      requestRef.current = nextRequest;
+      setRequest(nextRequest);
+    });
+
+  const close = (confirmed: boolean) => {
+    requestRef.current?.resolve(confirmed);
+    requestRef.current = null;
+    setRequest(null);
+  };
+
+  const value: AlertDialogContextValue = {
+    alert: async (input) => {
+      await open("alert", input);
+    },
+    confirm: (input) => open("confirm", input),
+  };
+
+  return (
+    <AlertDialogContext.Provider value={value}>
+      {children}
+      {mounted && request && createPortal(
+        <AlertDialog request={request} labels={labels} onClose={close} />,
+        document.body
+      )}
+    </AlertDialogContext.Provider>
+  );
+}
+
+function AlertDialog({
+  request,
+  labels,
+  onClose,
+}: {
+  request: DialogRequest;
+  labels: AlertDialogLabels;
+  onClose: (confirmed: boolean) => void;
+}) {
+  const confirmButtonRef = useRef<HTMLButtonElement>(null);
+  const isConfirmation = request.mode === "confirm";
+  const eyebrow = request.eyebrow || (
+    request.irreversible
+      ? labels.destructiveEyebrow
+      : isConfirmation
+        ? labels.confirmEyebrow
+        : labels.alertTitle
+  );
+
+  useEffect(() => {
+    confirmButtonRef.current?.focus();
+
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === "Escape") onClose(false);
+    };
+
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [onClose]);
+
+  return (
+    <div
+      className="fixed inset-0 z-[110] flex items-center justify-center bg-black/70 p-4"
+      onClick={() => onClose(false)}
+    >
+      <section
+        role={isConfirmation ? "alertdialog" : "dialog"}
+        aria-modal="true"
+        aria-labelledby="alert-dialog-title"
+        aria-describedby="alert-dialog-description"
+        className="flex w-full max-w-[22rem] aspect-[4/5] max-h-[calc(100dvh-2rem)] flex-col rounded-xl border-2 border-onix bg-pearl p-6 text-onix shadow-2xl sm:p-7"
+        onClick={(event) => event.stopPropagation()}
+      >
+        <p className="text-xs font-bold uppercase tracking-[0.18em] text-onix/60">
+          {eyebrow}
+        </p>
+        <div className="flex flex-1 flex-col justify-center">
+          <h2 id="alert-dialog-title" className="font-boldonse text-2xl leading-tight">
+            {request.title || (isConfirmation ? labels.confirmTitle : labels.alertTitle)}
+          </h2>
+          <p id="alert-dialog-description" className="mt-5 leading-relaxed text-onix/80">
+            {request.description}
+          </p>
+          {request.irreversible && (
+            <p className="mt-4 text-sm font-bold uppercase tracking-wide text-danger-alt">
+              {labels.irreversibleDescription}
+            </p>
+          )}
+        </div>
+        <div className="grid gap-3">
+          {isConfirmation && (
+            <button
+              type="button"
+              onClick={() => onClose(false)}
+              className="w-full rounded-lg border border-onix px-4 py-3 text-sm font-bold uppercase transition-colors hover:bg-sand"
+            >
+              {request.cancelLabel || labels.cancel}
+            </button>
+          )}
+          <button
+            ref={confirmButtonRef}
+            type="button"
+            onClick={() => onClose(true)}
+            className={request.destructive
+              ? "w-full rounded-lg border border-danger-alt bg-danger-alt px-4 py-3 text-sm font-bold uppercase text-pearl transition-colors hover:border-black hover:bg-black"
+              : "w-full rounded-lg border border-onix bg-onix px-4 py-3 text-sm font-bold uppercase text-pearl transition-colors hover:border-black hover:bg-black"}
+          >
+            {isConfirmation ? request.confirmLabel || labels.confirm : labels.close}
+          </button>
+        </div>
+      </section>
+    </div>
+  );
+}

package/dist/src/components/catalog/CatalogAuthorsTable.tsx

@@ -34,15 +34,17 @@ function renderAuthorName(
 }
 
 function renderLibraries(
+  intl: Dictionary,
   lang: Locale,
   author: string | null,
   hasManga: boolean,
+  hasComic: boolean,
   hasOthers: boolean,
   hasBooks: boolean
 ) {
   const authorParam = author?.trim() ? author.trim() : "__unknown__";
 
-  function buildHref(section: "manga" | "others") {
+  function buildHref(section: "manga" | "comic" | "others") {
     const params = new URLSearchParams({ author: authorParam });
     return `/${lang}/${section}/volumes?${params.toString()}`;
   }
@@ -54,22 +56,30 @@ function renderLibraries(
           href={buildHref("manga")}
           className="bg-pearl text-onix px-2 rounded-full text-xs uppercase transition-opacity hover:opacity-80"
         >
-          Manga
+          {intl.catalog.mangaColumn as string}
         </Link>
       )}
-      {hasOthers && (
+      {hasComic && (
         <Link
-          href={buildHref("others")}
+          href={buildHref("comic")}
           className="bg-neutral-700 px-2 rounded-full text-xs uppercase transition-opacity hover:opacity-80"
         >
-          Cómic
+          {intl.catalog.comicColumn as string}
         </Link>
       )}
       {hasBooks && (
         <span className="border border-pearl px-2 rounded-full text-xs uppercase">
-          Libros
+          {intl.catalog.booksColumn as string}
         </span>
       )}
+      {hasOthers && (
+        <Link
+          href={buildHref("others")}
+          className="bg-neutral-700 px-2 rounded-full text-xs uppercase transition-opacity hover:opacity-80"
+        >
+          {intl.catalog.othersColumn as string}
+        </Link>
+      )}
     </div>
   );
 }
@@ -122,9 +132,11 @@ export default function CatalogAuthorsTable({
                   </td>
                   <td className="p-4 text-center">
                     {renderLibraries(
+                      intl,
                       lang,
                       author.author,
                       author.hasManga,
+                      author.hasComic,
                       author.hasOthers,
                       author.hasBooks
                     )}