@itsmrtr/bunkoshelf 1.3.2 → 1.4.0

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-stone-300 md: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-stone-300 md: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>
+  );
+}

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

@@ -0,0 +1,154 @@
+import Link from "next/link";
+import { CheckIcon, HeartIcon } from "lucide-react";
+import Pagination from "@/components/ui/Pagination";
+import CatalogLibraryActions from "@/components/catalog/CatalogLibraryActions";
+import { getLibraryVolumeHref } from "@/lib/librarySection";
+import { ageRatingMap } from "@/lib/utils";
+import type { CatalogLibraryVolume, PaginatedResult } from "@/lib/db/library";
+import type { Dictionary, Locale } from "@/lib/types";
+
+interface CatalogLibraryTableProps {
+  data: PaginatedResult<CatalogLibraryVolume>;
+  intl: Dictionary;
+  canManage: boolean;
+  lang: Locale;
+}
+
+function renderValue(value: number | string | null | undefined) {
+  if (value === null || value === undefined || value === "") {
+    return "—";
+  }
+
+  return String(value);
+}
+
+function renderLanguageBadge(value: string | null | undefined) {
+  if (value === null || value === undefined || value === "") {
+    return "—";
+  }
+
+  return (
+    <span className="bg-neutral-700 px-2 rounded-full text-xs uppercase">
+      {value}
+    </span>
+  );
+}
+
+function renderAgeRating(value: string | null | undefined) {
+  if (value === null || value === undefined || value === "") {
+    return "—";
+  }
+
+  const mapped = ageRatingMap(value);
+  return mapped !== null ? `${mapped}+` : value;
+}
+
+export default function CatalogLibraryTable({
+  data,
+  intl,
+  canManage,
+  lang,
+}: CatalogLibraryTableProps) {
+  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-center rounded-l-md">{intl.catalog.statusColumn as string}</th>
+                <th className="p-4 text-left">{intl.catalog.titleColumn as string}</th>
+                <th className="p-4 text-left">{intl.catalog.seriesColumn as string}</th>
+                <th className="p-4 text-center">#</th>
+                <th className="p-4 text-center">{intl.catalog.yearColumn as string}</th>
+                <th className="p-4 text-center">{intl.catalog.writerColumn as string}</th>
+                <th className="p-4 text-center">{intl.catalog.publisherColumn as string}</th>
+                <th className="p-4 text-center">{intl.catalog.languageColumn as string}</th>
+                <th className="p-4 text-center">{intl.catalog.ageRatingColumn as string}</th>
+                <th className="p-4 text-center">
+                  {intl.catalog.gtinColumn as string}
+                </th>
+                {canManage && (
+                  <th className="p-4 text-center rounded-r-md">
+                    {intl.catalog.actionsColumn as string}
+                  </th>
+                )}
+              </tr>
+            </thead>
+            <tbody>
+              {data.items.map((volume) => (
+                <tr key={volume.id}>
+                  <td className="p-4 text-center">
+                    <div className="flex items-center justify-center gap-2">
+                      {volume.isRead ? <CheckIcon size={18} /> : null}
+                      {volume.isFavorite ? <HeartIcon size={18} /> : null}
+                    </div>
+                  </td>
+                  <td className="p-4">
+                    <Link
+                      href={getLibraryVolumeHref(lang, volume.section, volume.slug)}
+                      className="block max-w-[20rem] whitespace-normal break-words leading-snug line-clamp-2 hover:underline"
+                    >
+                      {renderValue(volume.title)}
+                    </Link>
+                  </td>
+                  <td className="p-4">
+                    <div className="max-w-[18rem] whitespace-normal break-words leading-snug line-clamp-2">
+                      {renderValue(volume.series)}
+                    </div>
+                  </td>
+                  <td className="p-4 text-center whitespace-nowrap">{renderValue(volume.number)}</td>
+                  <td className="p-4 text-center whitespace-nowrap">{renderValue(volume.year)}</td>
+                  <td className="p-4 text-center">
+                    <div className="max-w-[14rem] whitespace-normal break-words leading-snug line-clamp-2">
+                      {renderValue(volume.writer)}
+                    </div>
+                  </td>
+                  <td className="p-4 text-center">
+                    <div className="max-w-[14rem] whitespace-normal break-words leading-snug line-clamp-2">
+                      {renderValue(volume.publisher)}
+                    </div>
+                  </td>
+                  <td className="p-4 text-center">
+                    <div className="flex items-center justify-center">
+                      {renderLanguageBadge(volume.languageISO)}
+                    </div>
+                  </td>
+                  <td className="p-4 text-center">
+                    <div className="max-w-[10rem] whitespace-normal break-words leading-snug line-clamp-2">
+                      {renderAgeRating(volume.ageRating)}
+                    </div>
+                  </td>
+                  <td className="p-4 text-center">
+                    <div className="max-w-[11rem] whitespace-normal break-words leading-snug line-clamp-2">
+                      {renderValue(volume.gtin)}
+                    </div>
+                  </td>
+                  {canManage && (
+                    <td className="p-4 text-center">
+                      <CatalogLibraryActions
+                        intl={intl}
+                        volumeId={volume.id}
+                        volumeSlug={volume.slug}
+                      />
+                    </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/CatalogNav.tsx

@@ -0,0 +1,42 @@
+"use client";
+
+import Link from "next/link";
+import { usePathname, useParams } from "next/navigation";
+import clsx from "clsx";
+import { getCatalogNavLinks } from "@/lib/nav/catalogNav";
+import type { Dictionary, Locale } from "@/lib/types";
+
+interface CatalogNavProps {
+  intl: Dictionary;
+}
+
+export default function CatalogNav({ intl }: CatalogNavProps) {
+  const params = useParams<{ lang: Locale }>();
+  const pathname = usePathname();
+  const currentLang = params.lang || "es";
+  const links = getCatalogNavLinks({ intl, lang: currentLang, pathname });
+
+  return (
+    <div className="mt-4 md:mt-16">
+      <nav className="md:space-y-2 md:block flex gap-1">
+        {links.map(({ href, icon: Icon, label, isActive }) => (
+          <Link
+            key={href}
+            href={href}
+            prefetch={false}
+            className={clsx(
+              "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,
+              }
+            )}
+          >
+            <Icon size={20} className="mr-0 md:mr-2" />
+            <span className="hidden md:inline">{label}</span>
+          </Link>
+        ))}
+      </nav>
+    </div>
+  );
+}

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

@@ -0,0 +1,73 @@
+import { CheckIcon } from "lucide-react";
+import Pagination from "@/components/ui/Pagination";
+import type { CatalogRelationStats, PaginatedResult } from "@/lib/db/library";
+import type { Dictionary } from "@/lib/types";
+
+interface CatalogRelationsTableProps {
+  data: PaginatedResult<CatalogRelationStats>;
+  intl: Dictionary;
+  nameLabel: string;
+}
+
+export default function CatalogRelationsTable({
+  data,
+  intl,
+  nameLabel,
+}: CatalogRelationsTableProps) {
+  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">{nameLabel}</th>
+                <th className="p-4 text-center">{intl.catalog.mangaColumn as string}</th>
+                <th className="p-4 text-center">{intl.catalog.othersColumn as string}</th>
+                <th className="p-4 text-center">{intl.catalog.booksColumn as string}</th>
+                <th className="p-4 text-center rounded-r-md">{intl.catalog.totalColumn as string}</th>
+              </tr>
+            </thead>
+            <tbody>
+              {data.items.map((item) => (
+                <tr key={item.name}>
+                  <td className="p-4">
+                    <div className="max-w-[18rem] whitespace-normal break-words leading-snug line-clamp-2">
+                      {item.name}
+                    </div>
+                  </td>
+                  <td className="p-4 text-center">
+                    <div className="flex items-center justify-center">
+                      {item.hasManga ? <CheckIcon size={18} /> : null}
+                    </div>
+                  </td>
+                  <td className="p-4 text-center">
+                    <div className="flex items-center justify-center">
+                      {item.hasOthers ? <CheckIcon size={18} /> : null}
+                    </div>
+                  </td>
+                  <td className="p-4 text-center">
+                    <div className="flex items-center justify-center">
+                      {item.hasBooks ? <CheckIcon size={18} /> : null}
+                    </div>
+                  </td>
+                  <td className="p-4 text-center whitespace-nowrap">{item.total}</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/favorites/FavoritesNav.tsx

@@ -2,66 +2,21 @@
 
 import Link from "next/link";
 import { usePathname, useParams } from "next/navigation";
-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";
+import { getFavoritesNavLinks } from "@/lib/nav/favoritesNav";
+import type { Dictionary, Locale } from "@/lib/types";
 
 interface FavoritesNavProps {
   intl: Dictionary;
 }
 
-interface NavLink {
-  label: string | DictionarySection;
-  href: string;
-  icon: LucideIcon;
-  isActive: boolean;
-  badge?: string;
-}
-
 export default function FavoritesNav({
   intl,
 }: FavoritesNavProps) {
   const params = useParams<{ lang: Locale }>();
   const pathname = usePathname();
   const currentLang = params.lang || "es";
-
-  const links: NavLink[] = [
-    {
-      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",
-    },
-    {
-      label: intl.favorites.sectionBooks,
-      href: `/${currentLang}/favorites/books`,
-      icon: BookHeartIcon,
-      isActive: pathname === `/${currentLang}/favorites/books`,
-    },
-  ];
+  const links = getFavoritesNavLinks({ intl, lang: currentLang, pathname });
 
   return (
     <div className="mt-4 md:mt-16">

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

@@ -2,22 +2,15 @@
 
 import Link from "next/link";
 import { usePathname } from "next/navigation";
-import {
-  LayoutPanelTopIcon,
-  LibraryBigIcon,
-  BookCopyIcon,
-  BookmarkIcon,
-} from "lucide-react";
 import clsx from "clsx";
 import { useEffect, useState } from "react";
 import { getReaderStats } from "@/actions/stats";
 import {
-  getLibraryRootHref,
   type LibraryScope,
   type LibrarySection,
 } from "@/lib/librarySection";
-import type { Locale, Dictionary, DictionarySection } from "@/lib/types";
-import type { LucideIcon } from "lucide-react";
+import { getMangaNavLinks } from "@/lib/nav/mangaNav";
+import type { Locale, Dictionary } from "@/lib/types";
 
 interface MangaNavProps {
   lang: Locale;
@@ -26,14 +19,6 @@ interface MangaNavProps {
   scope?: LibraryScope;
 }
 
-interface NavLink {
-  label: string | DictionarySection;
-  href: string;
-  icon: LucideIcon;
-  isActive: boolean;
-  count?: number | null;
-}
-
 interface Stats {
   totalVolumes: number | null;
   totalSeries: number | null;
@@ -71,36 +56,7 @@ export default function MangaNav({
 
     fetchStats();
   }, []);
-
-  const links: NavLink[] = [
-    {
-      label: intl.libraries.overview,
-      href: getLibraryRootHref(lang, section),
-      icon: LayoutPanelTopIcon,
-      isActive: pathname === getLibraryRootHref(lang, section),
-    },
-    {
-      label: intl.libraries.series,
-      href: `${getLibraryRootHref(lang, section)}/series`,
-      icon: LibraryBigIcon,
-      isActive: pathname === `${getLibraryRootHref(lang, section)}/series`,
-      count: stats.totalSeries,
-    },
-    {
-      label: intl.libraries.volumes,
-      href: `${getLibraryRootHref(lang, section)}/volumes`,
-      icon: BookCopyIcon,
-      isActive: pathname === `${getLibraryRootHref(lang, section)}/volumes`,
-      count: stats.totalVolumes,
-    },
-    {
-      label: intl.libraries.toRead,
-      href: `${getLibraryRootHref(lang, section)}/toread`,
-      icon: BookmarkIcon,
-      isActive: pathname === `${getLibraryRootHref(lang, section)}/toread`,
-      count: stats.totalUnread,
-    },
-  ];
+  const links = getMangaNavLinks({ lang, intl, section, pathname, stats });
 
   return (
     <nav className="flex justify-center gap-2 md:gap-4">

package/dist/src/components/mobNav/MobNav.tsx

@@ -1,20 +1,22 @@
-import { getDictionary } from "@/lib/i18n/Dictionary";
-import { verifySession } from "@/lib/auth/verifySession";
-import { getChallengeData } from "@/lib/utils";
 import MobNavButton from "./MobNavButton";
-import { getVersionInfo } from "@/lib/versionInfo";
-import type { Locale } from "@/lib/types";
+import type { ChallengeData, Dictionary, Locale, Session } from "@/lib/types";
+import type { VersionInfo } from "@/lib/versionInfo";
 
 interface MobNavProps {
   lang: Locale;
+  intl: Dictionary;
+  user: Session | null;
+  challengeData: ChallengeData | null;
+  versionData: VersionInfo;
 }
 
-export default async function MobNav({ lang }: MobNavProps) {
-  const intl = await getDictionary(lang);
-  const user = await verifySession();
-  const challengeData = await getChallengeData(user);
-  const versionData = await getVersionInfo();
-
+export default function MobNav({
+  lang,
+  intl,
+  user,
+  challengeData,
+  versionData,
+}: MobNavProps) {
   return (
     <div className="fixed bottom-8 right-6 z-50 md:hidden">
       <MobNavButton

package/dist/src/components/mobNav/MobNavButton.tsx

@@ -2,7 +2,8 @@
 
 import { useState, useEffect } from "react";
 import { usePathname } from "next/navigation";
-import { MenuIcon } from "lucide-react";
+import Link from "next/link";
+import { MenuIcon, SearchIcon } from "lucide-react";
 import MobNavModal from "./MobNavModal";
 import type { Dictionary, Session, ChallengeData } from "@/lib/types";
 import type { VersionInfo } from "@/lib/versionInfo";
@@ -32,10 +33,19 @@ export default function MobNavButton({
   }, [pathname]);
 
   return (
-    <>
+    <div className="flex items-center gap-3">
+      <Link
+        href={`/${lang}/search`}
+        className="bg-pearl border border-stone-300 rounded-full p-3"
+        aria-label="Search"
+      >
+        <SearchIcon size={28} className="text-onix" />
+      </Link>
+
       <button
         onClick={() => setOpen(true)}
         className="bg-pearl border border-stone-300 rounded-full p-3"
+        aria-label="Open menu"
       >
         <MenuIcon size={28} className="text-onix" />
       </button>
@@ -49,6 +59,6 @@ export default function MobNavButton({
         challengeData={challengeData}
         versionData={versionData}
       />
-    </>
+    </div>
   );
 }

package/dist/src/components/mobNav/MobNavModal.tsx

@@ -7,7 +7,6 @@ import MainNav from "@/components/sidebar/MainNav";
 import SecondNav from "@/components/sidebar/SecondNav";
 import ChallengeProg from "@/components/sidebar/ChallengeProg";
 import FooterNav from "@/components/sidebar/FooterNav";
-import SearchInputMob from "@/components/search/SearchInputMob";
 import type { Dictionary, Session, ChallengeData } from "@/lib/types";
 import type { VersionInfo } from "@/lib/versionInfo";
 
@@ -67,7 +66,7 @@ export default function MobNavModal({
       className="fixed inset-0 z-50 bg-pearl text-onix flex p-4 pointer-events-auto transition-opacity duration-200 ease-in-out opacity-100"
     >
       <div
-        className="flex flex-col justify-between w-full max-w-5xl space-y-4 relative"
+        className="flex flex-col justify-between w-full max-w-5xl relative"
         onClick={(e) => e.stopPropagation()}
       >
         <div className="flex flex-row items-center justify-between">
@@ -82,18 +81,10 @@ export default function MobNavModal({
 
         <div>
           {!user && <SecondNav intl={intl} />}
-          {user && (
-            <MainNav
-              intl={intl}
-              user={user}
-            />
-          )}
+          {user && <MainNav intl={intl} user={user} />}
         </div>
 
         <div className="mt-8 mb-4">
-          <div className="mb-8">
-            <SearchInputMob intl={intl} />
-          </div>
           <ChallengeProg lang={lang} intl={intl} data={challengeData} />
           <FooterNav
             lang={lang}