@itsmrtr/bunkoshelf 1.4.1 → 1.6.0

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

@@ -11,9 +11,12 @@ interface MangaSeriesPageProps {
 
 function GridSkeleton() {
   return (
-    <div className="grid grid-cols-3 md:grid-cols-5 2xl:grid-cols-7 gap-4 mt-4">
+    <div className="grid grid-cols-2 md:grid-cols-5 2xl:grid-cols-7 gap-4 mt-4">
       {Array.from({ length: 14 }).map((_, i) => (
-        <div key={i} className="aspect-[3/5] rounded-lg bg-sand animate-pulse" />
+        <div
+          key={i}
+          className="aspect-[3/5] rounded-lg bg-sand animate-pulse"
+        />
       ))}
     </div>
   );
@@ -24,7 +27,7 @@ async function SeriesIndexContent({
   params,
 }: MangaSeriesPageProps) {
   const resolvedSearchParams = await searchParams;
-  const { page: pageRaw = "1", genre, tag } = resolvedSearchParams;
+  const { page: pageRaw = "1", author, genre, tag } = resolvedSearchParams;
   const page = parseInt(pageRaw ?? "1", 10);
   const { lang = "es" } = await params;
   const intl = await getDictionary(lang as Locale);
@@ -35,6 +38,7 @@ async function SeriesIndexContent({
       lang={lang as Locale}
       intl={intl}
       page={page}
+      authorFilter={author}
       genreFilter={genre}
       tagFilter={tag}
       scope={scope}
@@ -42,7 +46,10 @@ async function SeriesIndexContent({
   );
 }
 
-export default function MangaSeriesPage({ searchParams, params }: MangaSeriesPageProps) {
+export default function MangaSeriesPage({
+  searchParams,
+  params,
+}: MangaSeriesPageProps) {
   return (
     <section className="p-4 mt-4">
       <Suspense fallback={<GridSkeleton />}>

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

@@ -11,20 +11,20 @@ interface ToReadPageProps {
 
 function GridSkeleton() {
   return (
-    <div className="grid grid-cols-3 md:grid-cols-5 2xl:grid-cols-7 gap-4 mt-4">
+    <div className="grid grid-cols-2 md:grid-cols-5 2xl:grid-cols-7 gap-4 mt-4">
       {Array.from({ length: 14 }).map((_, i) => (
-        <div key={i} className="aspect-[3/5] rounded-lg bg-sand animate-pulse" />
+        <div
+          key={i}
+          className="aspect-[3/5] rounded-lg bg-sand animate-pulse"
+        />
       ))}
     </div>
   );
 }
 
-async function WantToReadContent({
-  searchParams,
-  params,
-}: ToReadPageProps) {
+async function WantToReadContent({ searchParams, params }: ToReadPageProps) {
   const resolvedSearchParams = await searchParams;
-  const { page: pageRaw = "1", genre, tag } = resolvedSearchParams;
+  const { page: pageRaw = "1", author, genre, tag } = resolvedSearchParams;
   const page = parseInt(pageRaw ?? "1", 10);
   const { lang = "es" } = await params;
   const intl = await getDictionary(lang as Locale);
@@ -35,6 +35,7 @@ async function WantToReadContent({
       lang={lang as Locale}
       intl={intl}
       page={page}
+      authorFilter={author}
       genreFilter={genre}
       tagFilter={tag}
       scope={scope}

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

@@ -11,9 +11,12 @@ interface MangaVolumesPageProps {
 
 function GridSkeleton() {
   return (
-    <div className="grid grid-cols-3 md:grid-cols-5 2xl:grid-cols-7 gap-4 mt-4">
+    <div className="grid grid-cols-2 md:grid-cols-5 2xl:grid-cols-7 gap-4 mt-4">
       {Array.from({ length: 14 }).map((_, i) => (
-        <div key={i} className="aspect-[3/5] rounded-lg bg-sand animate-pulse" />
+        <div
+          key={i}
+          className="aspect-[3/5] rounded-lg bg-sand animate-pulse"
+        />
       ))}
     </div>
   );
@@ -24,7 +27,7 @@ async function VolumesIndexContent({
   params,
 }: MangaVolumesPageProps) {
   const resolvedSearchParams = await searchParams;
-  const { page: pageRaw = "1", genre, tag } = resolvedSearchParams;
+  const { page: pageRaw = "1", author, genre, tag } = resolvedSearchParams;
   const page = parseInt(pageRaw ?? "1", 10);
   const { lang = "es" } = await params;
   const intl = await getDictionary(lang as Locale);
@@ -35,6 +38,7 @@ async function VolumesIndexContent({
       lang={lang as Locale}
       intl={intl}
       page={page}
+      authorFilter={author}
       genreFilter={genre}
       tagFilter={tag}
       scope={scope}
@@ -42,7 +46,10 @@ async function VolumesIndexContent({
   );
 }
 
-export default function MangaVolumesPage({ searchParams, params }: MangaVolumesPageProps) {
+export default function MangaVolumesPage({
+  searchParams,
+  params,
+}: MangaVolumesPageProps) {
   return (
     <section className="p-4 mt-4">
       <Suspense fallback={<GridSkeleton />}>

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

@@ -15,7 +15,7 @@ export default async function OthersLayout({
 }: OthersLayoutProps) {
   return (
     <Suspense fallback={null}>
-      <OthersLayoutContent children={children} params={params} />
+      <OthersLayoutContent params={params}>{children}</OthersLayoutContent>
     </Suspense>
   );
 }

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

@@ -23,7 +23,7 @@ async function SeriesIndexContent({
   params,
 }: OthersSeriesPageProps) {
   const resolvedSearchParams = await searchParams;
-  const { page: pageRaw = "1", genre, tag } = resolvedSearchParams;
+  const { page: pageRaw = "1", author, genre, tag } = resolvedSearchParams;
   const page = parseInt(pageRaw ?? "1", 10);
   const { lang = "es" } = await params;
   const intl = await getDictionary(lang as Locale);
@@ -33,6 +33,7 @@ async function SeriesIndexContent({
       lang={lang as Locale}
       intl={intl}
       page={page}
+      authorFilter={author}
       genreFilter={genre}
       tagFilter={tag}
       scope="others"

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

@@ -23,7 +23,7 @@ async function WantToReadContent({
   params,
 }: OthersToReadPageProps) {
   const resolvedSearchParams = await searchParams;
-  const { page: pageRaw = "1", genre, tag } = resolvedSearchParams;
+  const { page: pageRaw = "1", author, genre, tag } = resolvedSearchParams;
   const page = parseInt(pageRaw ?? "1", 10);
   const { lang = "es" } = await params;
   const intl = await getDictionary(lang as Locale);
@@ -33,6 +33,7 @@ async function WantToReadContent({
       lang={lang as Locale}
       intl={intl}
       page={page}
+      authorFilter={author}
       genreFilter={genre}
       tagFilter={tag}
       scope="others"

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

@@ -23,7 +23,7 @@ async function VolumesIndexContent({
   params,
 }: OthersVolumesPageProps) {
   const resolvedSearchParams = await searchParams;
-  const { page: pageRaw = "1", genre, tag } = resolvedSearchParams;
+  const { page: pageRaw = "1", author, genre, tag } = resolvedSearchParams;
   const page = parseInt(pageRaw ?? "1", 10);
   const { lang = "es" } = await params;
   const intl = await getDictionary(lang as Locale);
@@ -33,6 +33,7 @@ async function VolumesIndexContent({
       lang={lang as Locale}
       intl={intl}
       page={page}
+      authorFilter={author}
       genreFilter={genre}
       tagFilter={tag}
       scope="others"

package/dist/src/app/api/reader/manga/route.ts

@@ -1,10 +1,13 @@
 import { NextResponse } from "next/server";
 import type { NextRequest } from "next/server";
-import { getMangaImages } from "@/actions/reader";
+import { getMangaImages, getReadingProgress } from "@/actions/reader";
 
 export async function POST(req: NextRequest) {
   try {
-    const { slug } = (await req.json()) as { slug?: string };
+    const { slug, includeProgress } = (await req.json()) as {
+      slug?: string;
+      includeProgress?: boolean;
+    };
 
     if (!slug) {
       return NextResponse.json({ error: "Missing slug" }, { status: 400 });
@@ -19,7 +22,11 @@ export async function POST(req: NextRequest) {
       );
     }
 
-    return NextResponse.json(result);
+    const progress = includeProgress
+      ? await getReadingProgress({ slug })
+      : undefined;
+
+    return NextResponse.json({ ...result, progress });
   } catch (err) {
     console.error("Reader API error:", err);
     return NextResponse.json({ error: "Internal server error" }, { status: 500 });

package/dist/src/app/globals.css

@@ -60,15 +60,6 @@ h6 {
   font-family: var(--font-display);
 }
 
-/* Hidden scrollbars */
-.scrollbar-none {
-  scrollbar-width: none;
-  -ms-overflow-style: none;
-}
-.scrollbar-none::-webkit-scrollbar {
-  display: none;
-}
-
 @keyframes fade-in {
   from {
     opacity: 0;
@@ -96,3 +87,34 @@ h6 {
   background-repeat: repeat;
   background-size: 48px;
 }
+
+/* Scrollbars */
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: #404040;
+  border-radius: 3px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background-color: #555555;
+}
+
+/* Firefox */
+* {
+  scrollbar-width: thin;
+  scrollbar-color: #404040 transparent;
+}
+
+/* Auto-hide nativo para macOS */
+body {
+  scrollbar-gutter: stable both-edges;
+  overflow: overlay;
+}

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

@@ -1,11 +1,13 @@
+import Link from "next/link";
 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";
+import type { Dictionary, Locale } from "@/lib/types";
 
 interface CatalogAuthorsTableProps {
   data: PaginatedResult<CatalogAuthorStats>;
   intl: Dictionary;
+  lang: Locale;
 }
 
 function renderValue(value: number | string | null | undefined) {
@@ -32,21 +34,36 @@ function renderAuthorName(
 }
 
 function renderLibraries(
+  lang: Locale,
+  author: string | null,
   hasManga: boolean,
   hasOthers: boolean,
   hasBooks: boolean
 ) {
+  const authorParam = author?.trim() ? author.trim() : "__unknown__";
+
+  function buildHref(section: "manga" | "others") {
+    const params = new URLSearchParams({ author: authorParam });
+    return `/${lang}/${section}/volumes?${params.toString()}`;
+  }
+
   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">
+        <Link
+          href={buildHref("manga")}
+          className="bg-pearl text-onix px-2 rounded-full text-xs uppercase transition-opacity hover:opacity-80"
+        >
           Manga
-        </span>
+        </Link>
       )}
       {hasOthers && (
-        <span className="bg-neutral-700 px-2 rounded-full text-xs uppercase">
+        <Link
+          href={buildHref("others")}
+          className="bg-neutral-700 px-2 rounded-full text-xs uppercase transition-opacity hover:opacity-80"
+        >
           Cómic
-        </span>
+        </Link>
       )}
       {hasBooks && (
         <span className="border border-pearl px-2 rounded-full text-xs uppercase">
@@ -60,6 +77,7 @@ function renderLibraries(
 export default function CatalogAuthorsTable({
   data,
   intl,
+  lang,
 }: CatalogAuthorsTableProps) {
   const unknownAuthorLabel =
     (intl.catalog.unknownAuthor as string | undefined) || "Unknown";
@@ -104,6 +122,8 @@ export default function CatalogAuthorsTable({
                   </td>
                   <td className="p-4 text-center">
                     {renderLibraries(
+                      lang,
+                      author.author,
                       author.hasManga,
                       author.hasOthers,
                       author.hasBooks

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

@@ -14,6 +14,17 @@ interface FilterItem {
   name: string;
 }
 
+const UNKNOWN_AUTHOR_ID = "__unknown__";
+
+function splitFilterParam(value: string | null) {
+  if (!value) return [];
+
+  return value
+    .split(",")
+    .map((entry) => entry.trim())
+    .filter(Boolean);
+}
+
 interface FiltersDrawerProps {
   intl: DictionarySection;
   scope?: LibraryScope;
@@ -27,19 +38,26 @@ export default function FiltersDrawer({
   const searchParams = useSearchParams();
 
   const [isOpen, setIsOpen] = useState(false);
+  const [authors, setAuthors] = useState<FilterItem[]>([]);
   const [genres, setGenres] = useState<FilterItem[]>([]);
   const [tags, setTags] = useState<FilterItem[]>([]);
+  const [selectedAuthors, setSelectedAuthors] = useState<string[]>([]);
   const [selectedGenres, setSelectedGenres] = useState<string[]>([]);
   const [selectedTags, setSelectedTags] = useState<string[]>([]);
 
   const filters = intl.filters as DictionarySection;
+  const catalog = intl.catalog as DictionarySection | undefined;
+  const unknownAuthorLabel =
+    (catalog?.unknownAuthor as string | undefined) || "Unknown";
 
   useEffect(() => {
+    const authorParam = searchParams.get("author");
     const genreParam = searchParams.get("genre");
     const tagParam = searchParams.get("tag");
 
-    setSelectedGenres(genreParam ? genreParam.split(",") : []);
-    setSelectedTags(tagParam ? tagParam.split(",") : []);
+    setSelectedAuthors(splitFilterParam(authorParam));
+    setSelectedGenres(splitFilterParam(genreParam));
+    setSelectedTags(splitFilterParam(tagParam));
   }, [searchParams]);
 
   useEffect(() => {
@@ -47,6 +65,7 @@ export default function FiltersDrawer({
       try {
         const data = await getLibraryFilters({ scope });
         if (!data || "error" in data) throw new Error("Error fetching filters");
+        setAuthors(data.authors);
         setGenres(data.genres);
         setTags(data.tags);
       } catch (e) {
@@ -64,6 +83,14 @@ export default function FiltersDrawer({
     );
   }
 
+  function toggleAuthor(authorName: string) {
+    setSelectedAuthors((prev) =>
+      prev.includes(authorName)
+        ? prev.filter((author) => author !== authorName)
+        : [...prev, authorName]
+    );
+  }
+
   function toggleTag(tagName: string) {
     setSelectedTags((prev) =>
       prev.includes(tagName)
@@ -75,6 +102,7 @@ export default function FiltersDrawer({
   function applyFilters() {
     const params = new URLSearchParams();
 
+    if (selectedAuthors.length) params.set("author", selectedAuthors.join(","));
     if (selectedGenres.length) params.set("genre", selectedGenres.join(","));
     if (selectedTags.length) params.set("tag", selectedTags.join(","));
     params.set("page", "1");
@@ -84,13 +112,15 @@ export default function FiltersDrawer({
   }
 
   function clearFilters() {
+    setSelectedAuthors([]);
     setSelectedGenres([]);
     setSelectedTags([]);
     router.push(`?page=1`);
     setIsOpen(false);
   }
 
-  const totalFilters = selectedGenres.length + selectedTags.length;
+  const totalFilters =
+    selectedAuthors.length + selectedGenres.length + selectedTags.length;
   const isFiltering = totalFilters > 0;
 
   return (
@@ -140,6 +170,27 @@ export default function FiltersDrawer({
         </header>
 
         <div className="p-4 flex flex-col gap-4 flex-grow overflow-hidden">
+          <Accordion title={filters.authors as string}>
+            <ul className="space-y-1 max-h-44 md:max-h-64 overflow-auto pr-2">
+              {authors.map((author) => (
+                <li key={author.id}>
+                  <label className="inline-flex items-center space-x-2 cursor-pointer">
+                    <input
+                      type="checkbox"
+                      checked={selectedAuthors.includes(author.name)}
+                      onChange={() => toggleAuthor(author.name)}
+                    />
+                    <span className="capitalize">
+                      {author.name === UNKNOWN_AUTHOR_ID
+                        ? unknownAuthorLabel
+                        : author.name}
+                    </span>
+                  </label>
+                </li>
+              ))}
+            </ul>
+          </Accordion>
+
           <Accordion title={filters.genres as string}>
             <ul className="space-y-1 max-h-44 md:max-h-64 overflow-auto pr-2">
               {genres.map((genre) => (

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

@@ -30,6 +30,40 @@ function MetaField({ field, label }: MetaFieldProps) {
   );
 }
 
+interface AuthorFieldProps extends MetaFieldProps {
+  href: string;
+}
+
+function AuthorField({ field, label, href }: AuthorFieldProps) {
+  const value = normalize(field);
+  if (!value) return null;
+
+  const authors = value.split(",").map((author) => author.trim());
+
+  return (
+    <div className="flex flex-row items-baseline max-w-3xl">
+      <p className="text-sm uppercase w-1/3 md:w-1/5">{label as string}</p>
+      <p className="w-2/3 md:w-4/5">
+        {authors.map((author, idx) => (
+          <span key={`${author}-${idx}`}>
+            {idx > 0 && ", "}
+            <Link
+              href={{
+                pathname: href,
+                query: { author },
+              }}
+              scroll={false}
+              className="hover:text-lilah transition-all duration-300"
+            >
+              {author}
+            </Link>
+          </span>
+        ))}
+      </p>
+    </div>
+  );
+}
+
 interface MetadataPanelProps {
   meta: Record<string, unknown>;
   lang: Locale;
@@ -47,10 +81,11 @@ export default function MetadataPanel({
 }: MetadataPanelProps) {
   const genres = (meta.genres || []) as { name: string }[];
   const tags = (meta.tags || []) as { name: string }[];
+  const href = `/${lang}/${section}/${linkBase}`;
 
   return (
     <>
-      <MetaField field={meta.writer} label={intl.manga.author} />
+      <AuthorField field={meta.writer} label={intl.manga.author} href={href} />
       <MetaField field={meta.penciller} label={intl.manga.penciller} />
       <MetaField field={meta.inker} label={intl.manga.inker} />
       <MetaField field={meta.colorist} label={intl.manga.colorist} />
@@ -72,7 +107,7 @@ export default function MetadataPanel({
               <Link
                 key={idx}
                 href={{
-                  pathname: `/${lang}/${section}/${linkBase}`,
+                  pathname: href,
                   query: { genre: genre.name },
                 }}
                 scroll={false}
@@ -95,7 +130,7 @@ export default function MetadataPanel({
               <Link
                 key={idx}
                 href={{
-                  pathname: `/${lang}/${section}/${linkBase}`,
+                  pathname: href,
                   query: { tag: tag.name },
                 }}
                 scroll={false}

package/dist/src/components/library/manga/grid/SeriesIndex.tsx

@@ -19,6 +19,7 @@ interface SeriesIndexProps {
   lang: Locale;
   intl: Dictionary;
   page?: number;
+  authorFilter?: string | string[];
   genreFilter?: string | string[];
   tagFilter?: string | string[];
   scope?: LibraryScope;
@@ -29,11 +30,14 @@ export default async function SeriesIndex({
   lang,
   intl,
   page = 1,
+  authorFilter = [],
   genreFilter = [],
   tagFilter = [],
   scope = "all",
   section = "manga",
 }: SeriesIndexProps) {
+  const authorList =
+    typeof authorFilter === "string" ? authorFilter.split(",") : authorFilter;
   const genreList =
     typeof genreFilter === "string" ? genreFilter.split(",") : genreFilter;
   const tagList =
@@ -44,6 +48,7 @@ export default async function SeriesIndex({
     listPagedSeriesWithVolumes({
       page,
       pageSize: LIBRARY_PAGE_SIZE,
+      authorNames: authorList,
       genreNames: genreList,
       tagNames: tagList,
       includeGenres: true,

package/dist/src/components/library/manga/grid/VolumesIndex.tsx

@@ -18,6 +18,7 @@ interface VolumesIndexProps {
   lang: Locale;
   intl: Dictionary;
   page?: number;
+  authorFilter?: string | string[];
   genreFilter?: string | string[];
   tagFilter?: string | string[];
   scope?: LibraryScope;
@@ -28,12 +29,15 @@ export default async function VolumesIndex({
   lang,
   intl,
   page = 1,
+  authorFilter = [],
   genreFilter = [],
   tagFilter = [],
   scope = "all",
   section = "manga",
 }: VolumesIndexProps) {
   const user = await verifySession();
+  const authorList =
+    typeof authorFilter === "string" ? authorFilter.split(",") : authorFilter;
   const genreList =
     typeof genreFilter === "string" ? genreFilter.split(",") : genreFilter;
   const tagList =
@@ -44,6 +48,7 @@ export default async function VolumesIndex({
     pageSize: LIBRARY_PAGE_SIZE,
     includeGenres: true,
     includeTags: true,
+    authorNames: authorList,
     genreNames: genreList,
     tagNames: tagList,
     scope,

package/dist/src/components/library/manga/grid/WantToRead.tsx

@@ -18,6 +18,7 @@ interface WantToReadProps {
   lang: Locale;
   intl: Dictionary;
   page?: number;
+  authorFilter?: string | string[];
   genreFilter?: string | string[];
   tagFilter?: string | string[];
   scope?: LibraryScope;
@@ -28,6 +29,7 @@ export default async function WantToRead({
   lang,
   intl,
   page = 1,
+  authorFilter = [],
   genreFilter = [],
   tagFilter = [],
   scope = "all",
@@ -36,6 +38,8 @@ export default async function WantToRead({
   const user = await verifySession();
   if (!user) return null;
 
+  const authorList =
+    typeof authorFilter === "string" ? authorFilter.split(",") : authorFilter;
   const genreList =
     typeof genreFilter === "string" ? genreFilter.split(",") : genreFilter;
   const tagList =
@@ -47,6 +51,7 @@ export default async function WantToRead({
     pageSize: LIBRARY_PAGE_SIZE,
     includeGenres: true,
     includeTags: true,
+    authorNames: authorList,
     genreNames: genreList,
     tagNames: tagList,
     onlyUnreadForUser: true,

package/dist/src/components/reader/MangaReader.tsx

@@ -10,7 +10,6 @@ import {
 } from "lucide-react";
 import Loader from "@/components/ui/Loader";
 import VolumeRating from "@/components/library/manga/VolumeRating";
-import { getMangaImages, getReadingProgress } from "@/actions/reader";
 import type { DictionarySection } from "@/lib/types";
 
 interface MangaReaderProps {
@@ -59,7 +58,7 @@ export default function MangaReader({
   const reader = intl.reader as DictionarySection;
 
   useEffect(() => {
-    if (!slug) return;
+    if (!isOpen || !slug) return;
 
     async function fetchPages() {
       let error: unknown = null;
@@ -67,13 +66,18 @@ export default function MangaReader({
       setLoading(true);
       setShowFinishScreen(false);
       try {
-        const data = await getMangaImages({ slug });
-
-        if (data && "images" in data && data.images?.length) {
+        const response = await fetch("/api/reader/manga", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ slug, includeProgress: !isYoureiMode }),
+        });
+        const data = await response.json();
+
+        if (response.ok && data.images?.length) {
           setImages(data.images);
 
           if (!isYoureiMode) {
-            const progress = await getReadingProgress({ slug });
+            const progress = data.progress;
 
             let startIndex = 0;
 
@@ -105,7 +109,7 @@ export default function MangaReader({
     }
 
     fetchPages();
-  }, [slug, isYoureiMode, isRTL]);
+  }, [isOpen, slug, isYoureiMode, isRTL]);
 
   useEffect(() => {
     if (!isYoureiMode && images.length > 0) {