@itsmrtr/bunkoshelf 1.3.2 → 1.4.1

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

@@ -0,0 +1,158 @@
+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, normalizeCommaSeparatedText } 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;
+}
+
+function renderWriter(value: string | null | undefined) {
+  return normalizeCommaSeparatedText(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 hover:underline"
+                    >
+                      {renderValue(volume.title)}
+                    </Link>
+                  </td>
+                  <td className="p-4">
+                    <div className="max-w-[18rem] whitespace-normal break-words leading-snug">
+                      {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">
+                      {renderWriter(volume.writer)}
+                    </div>
+                  </td>
+                  <td className="p-4 text-center">
+                    <div className="max-w-[14rem] whitespace-normal break-words leading-snug">
+                      {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">
+                      {renderAgeRating(volume.ageRating)}
+                    </div>
+                  </td>
+                  <td className="p-4 text-center">
+                    <div className="max-w-[11rem] whitespace-normal break-words leading-snug">
+                      {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,45 @@
+"use client";
+
+import Link from "next/link";
+import { usePathname, useParams } from "next/navigation";
+import clsx from "clsx";
+import MobileSecondaryNav from "@/components/ui/MobileSecondaryNav";
+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">
+      <MobileSecondaryNav items={links} />
+
+      <nav className="hidden md:space-y-2 md:block">
+        {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 w-full justify-start transition-all duration-300",
+              {
+                "bg-sand": isActive,
+                "hover:bg-sand": !isActive,
+              }
+            )}
+          >
+            <Icon size={20} className="mr-2" />
+            <span>{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">
+                      {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,97 +2,57 @@
 
 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 MobileSecondaryNav from "@/components/ui/MobileSecondaryNav";
+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) {
+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">
-      <nav className="md:space-y-2 md:block flex gap-1">
+      <MobileSecondaryNav
+        items={links.map((link) => ({
+          ...link,
+          label: String(link.label),
+        }))}
+      />
+
+      <nav className="hidden md:space-y-2 md:block">
         {links.map(({ href, icon: Icon, label, isActive, badge }, index) => (
           <Link
             key={index}
             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",
+              "flex items-center p-4 rounded-lg leading-none text-onix w-full justify-start transition-all duration-300",
               {
                 "bg-sand": isActive,
                 "hover:bg-sand": !isActive,
               },
-              "group"
+              "group",
             )}
             aria-label={label as string}
           >
-            <Icon size={20} className="mr-0 md:mr-2" />
-            <span className="hidden md:inline">{label as string}</span>
+            <Icon size={20} className="mr-2" />
+            <span>{label as string}</span>
             {badge && (
               <span
                 className={clsx(
-                  "text-xs px-2 py-0.5 rounded-sm md:hidden",
+                  "text-xs px-2 py-0.5 rounded-sm ml-2 uppercase",
                   "group-hover:bg-pearl transition-all duration-300",
                   {
                     "bg-pearl": isActive,
                     "bg-sand": !isActive,
                   },
-                  "ml-1"
                 )}
               >
                 {badge}

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

@@ -2,22 +2,16 @@
 
 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 MobileSecondaryNav from "@/components/ui/MobileSecondaryNav";
 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 +20,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,72 +57,51 @@ 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">
-      {links.map(({ label, href, icon: Icon, isActive, count }) => (
-        <Link
-          key={href}
-          href={href}
-          className={clsx(
-            "flex flex-1 2xl:flex-none 2xl:basis-50 items-center justify-center",
-            "text-onix leading-none uppercase px-2 py-4 rounded-lg",
-            {
-              "bg-sand": isActive,
-              "hover:bg-sand": !isActive,
-            },
-            "transition-all duration-300 group",
-          )}
-        >
-          <Icon size={20} className="mr-0 md:mr-2" />
-          <span className="hidden md:inline">{label as string}</span>
-          {typeof count === "number" && (
-            <span
-              className={clsx(
-                "text-xs px-2 py-0.5 rounded-sm",
-                "group-hover:bg-pearl transition-all duration-300",
-                {
-                  "bg-pearl": isActive,
-                  "bg-sand": !isActive,
-                },
-                "ml-1 md:ml-2",
-              )}
-            >
-              {count}
-            </span>
-          )}
-        </Link>
-      ))}
-    </nav>
+    <>
+      <MobileSecondaryNav items={links.map((link) => ({
+        ...link,
+        label: String(link.label),
+        badge: link.count,
+      }))} />
+
+      <nav className="hidden md:flex justify-center gap-4">
+        {links.map(({ label, href, icon: Icon, isActive, count }) => (
+          <Link
+            key={href}
+            href={href}
+            className={clsx(
+              "flex flex-1 2xl:flex-none 2xl:basis-50 items-center justify-center",
+              "text-onix leading-none uppercase px-2 py-4 rounded-lg",
+              {
+                "bg-sand": isActive,
+                "hover:bg-sand": !isActive,
+              },
+              "transition-all duration-300 group",
+            )}
+          >
+            <Icon size={20} className="mr-2" />
+            <span>{label as string}</span>
+            {typeof count === "number" && (
+              <span
+                className={clsx(
+                  "text-xs px-2 py-0.5 rounded-sm",
+                  "group-hover:bg-pearl transition-all duration-300",
+                  {
+                    "bg-pearl": isActive,
+                    "bg-sand": !isActive,
+                  },
+                  "ml-2",
+                )}
+              >
+                {count}
+              </span>
+            )}
+          </Link>
+        ))}
+      </nav>
+    </>
   );
 }

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

@@ -1,20 +1,15 @@
 import Link from "next/link";
 import type { LibrarySection } from "@/lib/librarySection";
+import { normalizeCommaSeparatedText } from "@/lib/utils";
 import type { Locale, Dictionary } from "@/lib/types";
 
 function normalize(field: unknown): string | null {
   if (!field) return null;
   if (Array.isArray(field)) {
-    if (field.length === 0) return null;
-    return field.join(", ");
+    return normalizeCommaSeparatedText(field);
   }
   if (typeof field === "string") {
-    const parts = field
-      .split(",")
-      .map((s) => s.trim())
-      .filter(Boolean);
-    if (parts.length === 0) return null;
-    return parts.join(", ");
+    return normalizeCommaSeparatedText(field);
   }
   return String(field);
 }

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