@itsmrtr/bunkoshelf 1.3.2 → 1.4.1

package/dist/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itsmrtr/bunkoshelf",
-  "version": "1.3.2",
+  "version": "1.4.1",
   "description": "Self-hosted personal manga library.",
   "keywords": [
     "bunko",

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

@@ -0,0 +1,57 @@
+import { Suspense } from "react";
+import { UserRoundPenIcon } from "lucide-react";
+import { getDictionary } from "@/lib/i18n/Dictionary";
+import { verifySession } from "@/lib/auth/verifySession";
+import { listPagedCatalogAuthors } from "@/lib/db/library";
+import CatalogAuthorsTable from "@/components/catalog/CatalogAuthorsTable";
+import type { Locale } from "@/lib/types";
+
+interface CatalogAuthorsPageProps {
+  params: Promise<{ lang: string }>;
+  searchParams: Promise<Record<string, string | undefined>>;
+}
+
+function CatalogAuthorsSkeleton() {
+  return (
+    <>
+      <div className="h-8 w-48 rounded bg-sand animate-pulse mb-4" />
+      <div className="h-80 rounded-lg bg-sand animate-pulse" />
+    </>
+  );
+}
+
+async function CatalogAuthorsPageContent({
+  params,
+  searchParams,
+}: CatalogAuthorsPageProps) {
+  const { lang = "es" } = await params;
+  const resolvedSearchParams = await searchParams;
+  const pageRaw = resolvedSearchParams.page ?? "1";
+  const page = Number.parseInt(pageRaw, 10) || 1;
+  const intl = await getDictionary(lang as Locale);
+  const user = await verifySession();
+  const authors = await listPagedCatalogAuthors({
+    page,
+    pageSize: 50,
+    userId: user?.id ?? null,
+  });
+
+  return (
+    <>
+      <h2 className="flex items-center mb-4">
+        <UserRoundPenIcon size={28} className="mr-2" />
+        {intl.catalog.authors as string}
+      </h2>
+
+      <CatalogAuthorsTable data={authors} intl={intl} />
+    </>
+  );
+}
+
+export default function CatalogAuthorsPage(props: CatalogAuthorsPageProps) {
+  return (
+    <Suspense fallback={<CatalogAuthorsSkeleton />}>
+      <CatalogAuthorsPageContent {...props} />
+    </Suspense>
+  );
+}

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

@@ -0,0 +1,58 @@
+import { Suspense } from "react";
+import { DramaIcon } from "lucide-react";
+import { getDictionary } from "@/lib/i18n/Dictionary";
+import { listPagedCatalogGenres } from "@/lib/db/library";
+import CatalogRelationsTable from "@/components/catalog/CatalogRelationsTable";
+import type { Locale } from "@/lib/types";
+
+interface CatalogGenresPageProps {
+  params: Promise<{ lang: string }>;
+  searchParams: Promise<Record<string, string | undefined>>;
+}
+
+function CatalogGenresSkeleton() {
+  return (
+    <>
+      <div className="h-8 w-48 rounded bg-sand animate-pulse mb-4" />
+      <div className="h-80 rounded-lg bg-sand animate-pulse" />
+    </>
+  );
+}
+
+async function CatalogGenresPageContent({
+  params,
+  searchParams,
+}: CatalogGenresPageProps) {
+  const { lang = "es" } = await params;
+  const resolvedSearchParams = await searchParams;
+  const pageRaw = resolvedSearchParams.page ?? "1";
+  const page = Number.parseInt(pageRaw, 10) || 1;
+  const intl = await getDictionary(lang as Locale);
+  const genres = await listPagedCatalogGenres({
+    page,
+    pageSize: 50,
+  });
+
+  return (
+    <>
+      <h2 className="flex items-center mb-4">
+        <DramaIcon size={28} className="mr-2" />
+        {intl.catalog.genres as string}
+      </h2>
+
+      <CatalogRelationsTable
+        data={genres}
+        intl={intl}
+        nameLabel={intl.catalog.genreColumn as string}
+      />
+    </>
+  );
+}
+
+export default function CatalogGenresPage(props: CatalogGenresPageProps) {
+  return (
+    <Suspense fallback={<CatalogGenresSkeleton />}>
+      <CatalogGenresPageContent {...props} />
+    </Suspense>
+  );
+}

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

@@ -0,0 +1,35 @@
+import { getDictionary } from "@/lib/i18n/Dictionary";
+import SidebarMisc from "@/components/ui/SidebarMisc";
+import CatalogNav from "@/components/catalog/CatalogNav";
+import { BookAIcon } from "lucide-react";
+import type { Locale, Dictionary } from "@/lib/types";
+
+interface CatalogLayoutProps {
+  children: React.ReactNode;
+  params: Promise<{ lang: string }>;
+}
+
+export default async function CatalogLayout({
+  children,
+  params,
+}: CatalogLayoutProps) {
+  const { lang = "es" } = await params;
+  const intl: Dictionary = await getDictionary(lang as Locale);
+
+  return (
+    <div className="flex flex-col md:flex-row md:h-screen overflow-hidden">
+      <SidebarMisc>
+        <h2 className="flex items-center text-onix">
+          <BookAIcon size={28} className="mr-2" />
+          {intl.catalog.title as string}
+        </h2>
+
+        <CatalogNav intl={intl} />
+      </SidebarMisc>
+
+      <div className="w-full md:w-[60%] lg:w-[68%] xl:w-[73%] 2xl:w-[80%] p-4 overflow-y-auto">
+        <div className="mb-24 md:mb-4">{children}</div>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,62 @@
+import { Suspense } from "react";
+import { LibraryBigIcon } from "lucide-react";
+import { getDictionary } from "@/lib/i18n/Dictionary";
+import { listPagedCatalogLibraryVolumes } from "@/lib/db/library";
+import { verifySession } from "@/lib/auth/verifySession";
+import CatalogLibraryTable from "@/components/catalog/CatalogLibraryTable";
+import type { Locale } from "@/lib/types";
+
+interface CatalogLibraryPageProps {
+  params: Promise<{ lang: string }>;
+  searchParams: Promise<Record<string, string | undefined>>;
+}
+
+function CatalogLibrarySkeleton() {
+  return (
+    <>
+      <div className="h-8 w-48 rounded bg-sand animate-pulse mb-4" />
+      <div className="h-80 rounded-lg bg-sand animate-pulse" />
+    </>
+  );
+}
+
+async function CatalogLibraryPageContent({
+  params,
+  searchParams,
+}: CatalogLibraryPageProps) {
+  const { lang = "es" } = await params;
+  const resolvedSearchParams = await searchParams;
+  const pageRaw = resolvedSearchParams.page ?? "1";
+  const page = Number.parseInt(pageRaw, 10) || 1;
+  const intl = await getDictionary(lang as Locale);
+  const user = await verifySession();
+  const volumes = await listPagedCatalogLibraryVolumes({
+    page,
+    pageSize: 50,
+    userId: user?.id ?? null,
+  });
+
+  return (
+    <>
+      <h2 className="flex items-center mb-4">
+        <LibraryBigIcon size={28} className="mr-2" />
+        {intl.catalog.library as string}
+      </h2>
+
+      <CatalogLibraryTable
+        data={volumes}
+        intl={intl}
+        canManage={user?.isAdmin === true}
+        lang={lang as Locale}
+      />
+    </>
+  );
+}
+
+export default function CatalogLibraryPage(props: CatalogLibraryPageProps) {
+  return (
+    <Suspense fallback={<CatalogLibrarySkeleton />}>
+      <CatalogLibraryPageContent {...props} />
+    </Suspense>
+  );
+}

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

@@ -0,0 +1,11 @@
+import { redirect } from "next/navigation";
+
+interface CatalogPageProps {
+  params: Promise<{ lang: string }>;
+}
+
+export default async function CatalogPage({ params }: CatalogPageProps) {
+  const { lang = "es" } = await params;
+
+  redirect(`/${lang}/catalog/library`);
+}

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

@@ -0,0 +1,58 @@
+import { Suspense } from "react";
+import { TagsIcon } from "lucide-react";
+import { getDictionary } from "@/lib/i18n/Dictionary";
+import { listPagedCatalogTags } from "@/lib/db/library";
+import CatalogRelationsTable from "@/components/catalog/CatalogRelationsTable";
+import type { Locale } from "@/lib/types";
+
+interface CatalogTagsPageProps {
+  params: Promise<{ lang: string }>;
+  searchParams: Promise<Record<string, string | undefined>>;
+}
+
+function CatalogTagsSkeleton() {
+  return (
+    <>
+      <div className="h-8 w-48 rounded bg-sand animate-pulse mb-4" />
+      <div className="h-80 rounded-lg bg-sand animate-pulse" />
+    </>
+  );
+}
+
+async function CatalogTagsPageContent({
+  params,
+  searchParams,
+}: CatalogTagsPageProps) {
+  const { lang = "es" } = await params;
+  const resolvedSearchParams = await searchParams;
+  const pageRaw = resolvedSearchParams.page ?? "1";
+  const page = Number.parseInt(pageRaw, 10) || 1;
+  const intl = await getDictionary(lang as Locale);
+  const tags = await listPagedCatalogTags({
+    page,
+    pageSize: 50,
+  });
+
+  return (
+    <>
+      <h2 className="flex items-center mb-4">
+        <TagsIcon size={28} className="mr-2" />
+        {intl.catalog.tags as string}
+      </h2>
+
+      <CatalogRelationsTable
+        data={tags}
+        intl={intl}
+        nameLabel={intl.catalog.tagColumn as string}
+      />
+    </>
+  );
+}
+
+export default function CatalogTagsPage(props: CatalogTagsPageProps) {
+  return (
+    <Suspense fallback={<CatalogTagsSkeleton />}>
+      <CatalogTagsPageContent {...props} />
+    </Suspense>
+  );
+}

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

@@ -5,6 +5,10 @@ import "../globals.css";
 import Sidebar from "@/components/sidebar/sidebar";
 import MobNav from "@/components/mobNav/MobNav";
 import { ToastProvider } from "@/components/ToastProvider";
+import { verifySession } from "@/lib/auth/verifySession";
+import { getDictionary } from "@/lib/i18n/Dictionary";
+import { getChallengeData } from "@/lib/utils";
+import { getVersionInfo } from "@/lib/versionInfo";
 import type { Locale } from "@/lib/types";
 import type { ReactNode } from "react";
 import type { Metadata } from "next";
@@ -30,6 +34,34 @@ interface RootLayoutProps {
   params: Promise<{ lang: string }>;
 }
 
+async function AppChrome({ lang }: { lang: Locale }) {
+  const [intl, user, versionData] = await Promise.all([
+    getDictionary(lang),
+    verifySession(),
+    getVersionInfo(),
+  ]);
+  const challengeData = await getChallengeData(user);
+
+  return (
+    <>
+      <MobNav
+        lang={lang}
+        intl={intl}
+        user={user}
+        challengeData={challengeData}
+        versionData={versionData}
+      />
+      <Sidebar
+        lang={lang}
+        intl={intl}
+        user={user}
+        challengeData={challengeData}
+        versionData={versionData}
+      />
+    </>
+  );
+}
+
 export default async function RootLayout({ children, params }: RootLayoutProps) {
   const { lang: rawLang } = await params;
 
@@ -50,11 +82,8 @@ export default async function RootLayout({ children, params }: RootLayoutProps)
       <body className="flex h-screen overflow-hidden text-lg relative">
         <div className="fixed inset-0 -z-10 pointer-events-none bg-seigaiha-pattern-k opacity-50" />
 
-        <Suspense fallback={null}>
-          <MobNav lang={lang} />
-        </Suspense>
         <Suspense fallback={<aside className="hidden md:flex md:w-[35%] lg:w-[25%] xl:w-[21%] 2xl:w-[17%] bg-blackamber flex-col" />}>
-          <Sidebar lang={lang} />
+          <AppChrome lang={lang} />
         </Suspense>
 
         <main className="w-full md:w-[65%] lg:w-[75%] xl:w-[79%] 2xl:w-[83%] flex flex-col overflow-y-auto">

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

@@ -1,4 +1,4 @@
-import { NextResponse, connection } from "next/server";
+import { NextResponse } from "next/server";
 import { verifySession } from "@/lib/auth/verifySession";
 import fs from "fs/promises";
 import path from "path";
@@ -7,8 +7,6 @@ const STATUS_PATH = path.join(process.cwd(), "tmp", "scan-status.json");
 
 export async function GET() {
   try {
-    await connection();
-
     const user = await verifySession();
     if (!user) {
       return NextResponse.json({ error: "Unauthorized" }, { status: 401 });

package/dist/src/app/api/reader/temp-image/route.ts

@@ -1,4 +1,4 @@
-import { NextResponse, connection } from "next/server";
+import { NextResponse } from "next/server";
 import type { NextRequest } from "next/server";
 import { verifySession } from "@/lib/auth/verifySession";
 import fs from "fs/promises";
@@ -14,8 +14,6 @@ const CONTENT_TYPE_MAP: Record<string, string> = {
 
 export async function GET(req: NextRequest) {
   try {
-    await connection();
-
     const user = await verifySession();
     if (!user) {
       return NextResponse.json({ error: "Unauthorized" }, { status: 401 });

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

@@ -0,0 +1,133 @@
+import Pagination from "@/components/ui/Pagination";
+import { normalizeCommaSeparatedText } from "@/lib/utils";
+import type { CatalogAuthorStats, PaginatedResult } from "@/lib/db/library";
+import type { Dictionary } from "@/lib/types";
+
+interface CatalogAuthorsTableProps {
+  data: PaginatedResult<CatalogAuthorStats>;
+  intl: Dictionary;
+}
+
+function renderValue(value: number | string | null | undefined) {
+  if (value === null || value === undefined || value === "") {
+    return "—";
+  }
+
+  return String(value);
+}
+
+function renderAvgRating(value: number | null) {
+  if (value === null || Number.isNaN(value)) {
+    return "—";
+  }
+
+  return Number(value).toFixed(1);
+}
+
+function renderAuthorName(
+  value: string | null | undefined,
+  unknownAuthorLabel: string
+) {
+  return normalizeCommaSeparatedText(value) ?? unknownAuthorLabel;
+}
+
+function renderLibraries(
+  hasManga: boolean,
+  hasOthers: boolean,
+  hasBooks: boolean
+) {
+  return (
+    <div className="flex items-center justify-center gap-1 flex-wrap">
+      {hasManga && (
+        <span className="bg-pearl text-onix px-2 rounded-full text-xs uppercase">
+          Manga
+        </span>
+      )}
+      {hasOthers && (
+        <span className="bg-neutral-700 px-2 rounded-full text-xs uppercase">
+          Cómic
+        </span>
+      )}
+      {hasBooks && (
+        <span className="border border-pearl px-2 rounded-full text-xs uppercase">
+          Libros
+        </span>
+      )}
+    </div>
+  );
+}
+
+export default function CatalogAuthorsTable({
+  data,
+  intl,
+}: CatalogAuthorsTableProps) {
+  const unknownAuthorLabel =
+    (intl.catalog.unknownAuthor as string | undefined) || "Unknown";
+
+  return (
+    <>
+      <div className="bg-blackamber p-4 rounded-lg">
+        <div className="overflow-x-auto">
+          <table className="w-max min-w-full table-auto border-separate border-spacing-0">
+            <thead className="sticky top-0 z-10">
+              <tr className="font-bold uppercase bg-onix">
+                <th className="p-4 text-left rounded-l-md">
+                  {intl.catalog.authorColumn as string}
+                </th>
+                <th className="p-4 text-center">
+                  {intl.catalog.worksColumn as string}
+                </th>
+                <th className="p-4 text-center">
+                  {intl.catalog.avgRatingColumn as string}
+                </th>
+                <th className="p-4 text-center">
+                  {intl.catalog.libraryColumn as string}
+                </th>
+                <th className="p-4 text-center rounded-r-md">
+                  {intl.catalog.progressColumn as string}
+                </th>
+              </tr>
+            </thead>
+            <tbody>
+              {data.items.map((author, index) => (
+                <tr key={`${author.author ?? "unknown"}-${index}`}>
+                  <td className="p-4">
+                    <div className="max-w-[18rem] whitespace-normal break-words leading-snug">
+                      {renderAuthorName(author.author, unknownAuthorLabel)}
+                    </div>
+                  </td>
+                  <td className="p-4 text-center whitespace-nowrap">
+                    {renderValue(author.works)}
+                  </td>
+                  <td className="p-4 text-center whitespace-nowrap">
+                    {renderAvgRating(author.avgRating)}
+                  </td>
+                  <td className="p-4 text-center">
+                    {renderLibraries(
+                      author.hasManga,
+                      author.hasOthers,
+                      author.hasBooks
+                    )}
+                  </td>
+                  <td className="p-4 text-center whitespace-nowrap">
+                    {author.readCount}/{author.works}
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </div>
+
+      {data.total > data.pageSize && (
+        <div className="mt-8">
+          <Pagination
+            currentPage={data.page}
+            totalPages={data.totalPages}
+            intl={intl}
+          />
+        </div>
+      )}
+    </>
+  );
+}

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

@@ -0,0 +1,138 @@
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import clsx from "clsx";
+import { Loader2Icon, ScanSearchIcon, TrashIcon } from "lucide-react";
+import { useToast } from "@/components/ToastProvider";
+import { scanVolume } from "@/actions/scan-series";
+import { deleteVolume } from "@/actions/delete";
+import type { Dictionary } from "@/lib/types";
+
+interface CatalogLibraryActionsProps {
+  intl: Dictionary;
+  volumeId: string;
+  volumeSlug: string;
+}
+
+export default function CatalogLibraryActions({
+  intl,
+  volumeId,
+  volumeSlug,
+}: CatalogLibraryActionsProps) {
+  const router = useRouter();
+  const { addToast } = useToast()!;
+  const [isScanning, setIsScanning] = useState(false);
+  const [isDeleting, setIsDeleting] = useState(false);
+
+  const handleScan = async () => {
+    setIsScanning(true);
+
+    try {
+      const result = await scanVolume(volumeId);
+
+      if (!result || "error" in result) {
+        addToast({
+          title: "Error",
+          description: result && "error" in result ? result.error : "Scan failed",
+          variant: "error",
+        });
+        return;
+      }
+
+      addToast({
+        title: (intl?.manga?.scanComplete as string) || "Escaneo completado",
+        description: `${result.coversUpdated} portada(s), ${result.metaUpdated} metadatos`,
+        variant: "success",
+      });
+
+      router.refresh();
+    } catch {
+      addToast({
+        title: "Error",
+        description: "Error al escanear el volumen",
+        variant: "error",
+      });
+    } finally {
+      setIsScanning(false);
+    }
+  };
+
+  const handleDelete = async () => {
+    const confirmed = confirm(
+      (intl.libraries.deleteSure as Record<string, string>).volume
+    );
+
+    if (!confirmed) return;
+
+    setIsDeleting(true);
+
+    try {
+      const result = await deleteVolume({ slug: volumeSlug });
+
+      if (!result || "error" in result || !("ok" in result) || !result.ok) {
+        addToast({
+          title: "Error",
+          description:
+            result && "error" in result ? result.error : "Delete failed",
+          variant: "error",
+        });
+        return;
+      }
+
+      addToast({
+        title: "OK",
+        description: (intl.libraries.deleteItem as Record<string, string>).volume,
+        variant: "success",
+      });
+
+      router.refresh();
+    } catch {
+      addToast({
+        title: "Error",
+        description: "Error deleting volume",
+        variant: "error",
+      });
+    } finally {
+      setIsDeleting(false);
+    }
+  };
+
+  return (
+    <div className="flex items-center justify-center gap-2">
+      <button
+        type="button"
+        onClick={handleScan}
+        disabled={isScanning || isDeleting}
+        title={intl.manga.scanVolume as string}
+        className={clsx(
+          "border border-neutral-800 hover:text-pearl rounded-lg p-2 cursor-pointer transition-all duration-300 hover:border-lilah",
+          "disabled:opacity-50 disabled:cursor-not-allowed"
+        )}
+      >
+        {isScanning ? (
+          <Loader2Icon size={16} className="animate-spin" />
+        ) : (
+          <ScanSearchIcon size={16} />
+        )}
+      </button>
+
+      <button
+        type="button"
+        onClick={handleDelete}
+        disabled={isScanning || isDeleting}
+        title={(intl.libraries.deleteItem as Record<string, string>).volume}
+        className={clsx(
+          "border border-neutral-800 hover:text-danger-alt rounded-lg p-2 cursor-pointer transition-all duration-300 hover:border-danger-alt",
+          "disabled:opacity-50 disabled:cursor-not-allowed"
+        )}
+      >
+        {isDeleting ? (
+          <Loader2Icon size={16} className="animate-spin" />
+        ) : (
+          <TrashIcon size={16} />
+        )}
+      </button>
+    </div>
+  );
+}