@itsmrtr/bunkoshelf 1.14.1 → 1.15.0

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

@@ -1,13 +1,29 @@
 import { BookmarkIcon } from "lucide-react";
 import { verifySession } from "@/lib/auth/verifySession";
 import { listBookProgressByIds, listBookVolumes } from "@/lib/db/books/library";
+import FiltersDrawer from "@/components/library/manga/FiltersDrawer";
 import type { Dictionary, Locale } from "@/lib/types";
 import BookGrid from "../BookGrid";
 
-export default async function WantToRead({ lang, intl }: { lang: Locale; intl: Dictionary }) {
+export default async function WantToRead({
+  lang,
+  intl,
+  authorFilter,
+  genreFilter,
+  tagFilter,
+}: {
+  lang: Locale;
+  intl: Dictionary;
+  authorFilter?: string;
+  genreFilter?: string;
+  tagFilter?: string;
+}) {
   const user = await verifySession();
-  const books = await listBookVolumes();
+  const authorNames = authorFilter?.trim() ? authorFilter.split(",").map((author) => author.trim()).filter(Boolean) : undefined;
+  const genreNames = genreFilter?.trim() ? genreFilter.split(",").map((genre) => genre.trim()).filter(Boolean) : undefined;
+  const tagNames = tagFilter?.trim() ? tagFilter.split(",").map((tag) => tag.trim()).filter(Boolean) : undefined;
+  const books = await listBookVolumes({ authorNames, genreNames, tagNames });
   const progressById = user ? await listBookProgressByIds(user.id, books.map((book) => book.id)) : {};
   const unread = books.filter((book) => !progressById[book.id]?.isRead);
-  return <><div className="mb-4 flex items-center"><h2 className="flex items-center text-base md:text-lg"><BookmarkIcon size={28} className="mr-2" />{intl.libraries.toRead as string}</h2></div><BookGrid books={unread} lang={lang} intl={intl} progressById={progressById} /></>;
+  return <><div className="mb-4 flex items-center"><h2 className="mr-4 flex items-center text-base md:text-lg"><BookmarkIcon size={28} className="mr-2" />{intl.libraries.toRead as string}</h2><FiltersDrawer intl={intl} library="books" /></div><BookGrid books={unread} lang={lang} intl={intl} progressById={progressById} /></>;
 }

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

@@ -4,8 +4,10 @@ import React, { useState, useEffect } from "react";
 import { useRouter, useSearchParams } from "next/navigation";
 import { ChevronRightIcon } from "lucide-react";
 import Accordion from "@/components/ui/Accordion";
+import Button from "@/components/ui/Button";
 import clsx from "clsx";
 import { getLibraryFilters } from "@/actions/library";
+import { getBookLibraryFilters } from "@/actions/books";
 import { usePwa } from "@/components/pwa/PwaProvider";
 import type { OfflineVolume } from "@/lib/client/offlineLibrary";
 import type { LibraryScope } from "@/lib/librarySection";
@@ -30,12 +32,14 @@ function splitFilterParam(value: string | null) {
 interface FiltersDrawerProps {
   intl: DictionarySection;
   scope?: LibraryScope;
+  library?: "books";
   offlineVolumes?: OfflineVolume[];
 }
 
 export default function FiltersDrawer({
   intl,
   scope = "all",
+  library,
   offlineVolumes,
 }: FiltersDrawerProps) {
   const router = useRouter();
@@ -90,7 +94,9 @@ export default function FiltersDrawer({
       }
 
       try {
-        const data = await getLibraryFilters({ scope });
+        const data = library === "books"
+          ? await getBookLibraryFilters()
+          : await getLibraryFilters({ scope });
         if (!data || "error" in data) throw new Error("Error fetching filters");
         setAuthors(data.authors);
         setGenres(data.genres);
@@ -100,7 +106,7 @@ export default function FiltersDrawer({
       }
     }
     fetchFilters();
-  }, [offlineVolumes, online, scope]);
+  }, [library, offlineVolumes, online, scope]);
 
   function navigate(params: URLSearchParams) {
     const href = `?${params.toString()}`;
@@ -264,18 +270,20 @@ export default function FiltersDrawer({
         </div>
 
         <footer className="p-4 flex justify-between gap-4">
-          <button
+          <Button
             onClick={clearFilters}
-            className="px-2 py-3 w-full bg-pearl text-onix leading-none rounded-lg hover:bg-lilah hover:text-pearl cursor-pointer transition-all duration-300"
+            variant="light"
+            className="w-full px-2 py-3"
           >
             {filters.clean as string}
-          </button>
-          <button
+          </Button>
+          <Button
             onClick={applyFilters}
-            className="px-2 py-3 w-full bg-pearl text-onix leading-none rounded-lg hover:bg-lilah hover:text-pearl cursor-pointer transition-all duration-300"
+            variant="light"
+            className="w-full px-2 py-3"
           >
             {filters.apply as string}
-          </button>
+          </Button>
         </footer>
       </aside>
     </>

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

@@ -2,10 +2,10 @@
 
 import { useState } from "react";
 import { HeartIcon, HeartOffIcon } from "lucide-react";
-import clsx from "clsx";
 import StatusSelect from "./StatusSelect";
 import { toggleSeriesFavorite } from "@/actions/favorites";
 import OfflineDownloadButton from "@/components/pwa/OfflineDownloadButton";
+import Button from "@/components/ui/Button";
 import { enqueueOfflineOperation } from "@/lib/client/offlineLibrary";
 import type { LibrarySection } from "@/lib/librarySection";
 import type { Locale, Dictionary } from "@/lib/types";
@@ -64,19 +64,16 @@ export default function ReadButtonsSeries({
   return (
     <div className="flex flex-row mt-4 gap-2">
       <StatusSelect lang={lang} intl={intl} seriesId={seriesId} />
-      <button
+      <Button
         onClick={toggleFavorite}
         disabled={isLoading}
-        className={clsx(
-          "p-3 2xl:p-4 rounded-lg leading-none border transition-all duration-300 cursor-pointer",
-          isFavorite
-            ? "text-onix bg-sand border-sand hover:bg-pearl hover:border-pearl"
-            : "text-sand bg-blackamber border-blackamber hover:text-onix hover:bg-pearl hover:border-pearl"
-        )}
+        variant={isFavorite ? "lightAlt" : "dark"}
+        size="icon"
+        className="size-11 2xl:size-13"
         title={isFavorite ? "Eliminar de favoritos" : "Marcar como favorito"}
       >
         {isFavorite ? <HeartOffIcon size={20} /> : <HeartIcon size={20} />}
-      </button>
+      </Button>
       <OfflineDownloadButton userId={userId} section={section} slug={seriesSlug} seriesId={seriesId} intl={intl} />
     </div>
   );

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

@@ -2,7 +2,6 @@
 
 import { useState } from "react";
 import { useRouter } from "next/navigation";
-import clsx from "clsx";
 import {
   BookCheckIcon,
   HatGlassesIcon,
@@ -16,6 +15,7 @@ import { updateReadState } from "@/actions/read";
 import { syncReadingProgress } from "@/actions/progress";
 import { sendPush } from "@/actions/web-push";
 import OfflineDownloadButton from "@/components/pwa/OfflineDownloadButton";
+import Button from "@/components/ui/Button";
 import { enqueueOfflineOperation, getOfflineImages, updateOfflineVolume } from "@/lib/client/offlineLibrary";
 import {
   getLibraryRootHref,
@@ -251,55 +251,46 @@ export default function ReadButtonsVolume({
   return (
     <>
       <div className="flex flex-row mt-4 gap-2">
-        <button
+        <Button
           onClick={openNormalReader}
-          className="flex items-center font-bold px-5 py-2 2xl:px-6 2xl:py-4 rounded-lg leading-none uppercase text-sand bg-lilah border border-blackamber hover:text-onix hover:bg-pearl hover:border-pearl cursor-pointer transition-all duration-300"
+          variant="accent"
+          className="px-5 py-2 2xl:px-6 2xl:py-4"
         >
           <BookCheckIcon size={20} className="mr-2" />
           {intl.manga.read as string}
-        </button>
+        </Button>
 
-        <button
+        <Button
           onClick={openYoureiReader}
           title="Leer de incógnito"
-          className="p-3 2xl:p-4 rounded-lg leading-none uppercase text-sand bg-blackamber border border-blackamber hover:text-onix hover:bg-pearl hover:border-pearl cursor-pointer transition-all duration-300"
+          variant="dark"
+          size="icon"
+          className="size-11 2xl:size-13"
         >
           <HatGlassesIcon size={20} />
-        </button>
+        </Button>
 
-        <button
+        <Button
           onClick={toggleRead}
           disabled={isLoading}
           title={isRead ? "Marcar como no leído" : "Marcar como leído"}
-          className={clsx(
-            "p-3 2xl:p-4 rounded-lg leading-none border transition-all duration-300 cursor-pointer",
-            {
-              "text-onix bg-sand border-sand hover:bg-pearl hover:border-pearl":
-                isRead,
-              "text-sand bg-blackamber border-blackamber hover:text-onix hover:bg-pearl hover:border-pearl":
-                !isRead,
-            },
-          )}
+          variant={isRead ? "lightAlt" : "dark"}
+          size="icon"
+          className="size-11 2xl:size-13"
         >
           <CheckIcon size={20} />
-        </button>
+        </Button>
 
-        <button
+        <Button
           onClick={toggleFavorite}
           disabled={isLoading}
           title={isFavorite ? "Eliminar de favoritos" : "Marcar como favorito"}
-          className={clsx(
-            "p-3 2xl:p-4 rounded-lg leading-none border transition-all duration-300 cursor-pointer",
-            {
-              "text-onix bg-sand border-sand hover:bg-pearl hover:border-pearl":
-                isFavorite,
-              "text-sand bg-blackamber border-blackamber hover:text-onix hover:bg-pearl hover:border-pearl":
-                !isFavorite,
-            },
-          )}
+          variant={isFavorite ? "lightAlt" : "dark"}
+          size="icon"
+          className="size-11 2xl:size-13"
         >
           {isFavorite ? <HeartOffIcon size={20} /> : <HeartIcon size={20} />}
-        </button>
+        </Button>
 
         <OfflineDownloadButton userId={userId} section={section} slug={slug} volumeId={volumeId} intl={intl} />
       </div>

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

@@ -3,6 +3,7 @@
 import { useState, useEffect, type FormEvent } from "react";
 import { PenLineIcon } from "lucide-react";
 import Modal from "@/components/ui/Modal";
+import Button from "@/components/ui/Button";
 import { useAlertDialog } from "@/components/AlertDialogProvider";
 import {
   createReadingEntry,
@@ -99,13 +100,14 @@ export default function ReadingEntryForm({
         </div>
 
         <div className="flex gap-3">
-          <button
+          <Button
             type="submit"
             disabled={isLoading}
-            className="font-bold px-8 py-4 rounded-lg leading-none uppercase text-onix bg-sand border border-sand hover:text-sand hover:bg-onix hover:border-onix transition-all duration-300 cursor-pointer disabled:opacity-50"
+            variant="lightAlt"
+            className="px-8 py-4 disabled:opacity-50"
           >
             {intl.manga.save as string}
-          </button>
+          </Button>
 
           {isEdit && (
             <button

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

@@ -9,6 +9,7 @@ import {
   CircleXIcon,
 } from "lucide-react";
 import { getSeriesStatus, updateSeriesStatus } from "@/actions/series-status";
+import Button from "@/components/ui/Button";
 import type { Locale, Dictionary } from "@/lib/types";
 import type { LucideIcon } from "lucide-react";
 
@@ -117,13 +118,12 @@ export default function StatusSelect({ intl, seriesId }: StatusSelectProps) {
 
   return (
     <div className="relative" ref={selectRef}>
-      <button
+      <Button
         onClick={() => setIsOpen(!isOpen)}
         disabled={isLoading}
-        className={clsx(
-          "group p-3 2xl:p-4 rounded-lg leading-none border transition-all duration-300 cursor-pointer",
-          "text-sand bg-blackamber border-blackamber hover:text-onix hover:bg-pearl hover:border-pearl"
-        )}
+        variant="dark"
+        size="icon"
+        className="group size-11 2xl:size-13"
         title={(currentOption?.label as string) || "Seleccionar estado"}
       >
         <CurrentIcon
@@ -134,7 +134,7 @@ export default function StatusSelect({ intl, seriesId }: StatusSelectProps) {
             currentStatus === "FINISHED" && "group-hover:text-onix"
           )}
         />
-      </button>
+      </Button>
 
       {isOpen && (
         <div className="absolute top-full mt-2 left-0 bg-blackamber rounded-lg shadow-lg overflow-hidden z-10 min-w-[180px]">

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

@@ -5,6 +5,7 @@ import { usePathname } from "next/navigation";
 import Link from "next/link";
 import { MenuIcon, SearchIcon } from "lucide-react";
 import MobNavModal from "./MobNavModal";
+import Button from "@/components/ui/Button";
 import type { Dictionary, Session, ChallengeData } from "@/lib/types";
 import type { VersionInfo } from "@/lib/versionInfo";
 import type { LibrarySectionCounts } from "@/lib/db/library";
@@ -45,13 +46,15 @@ export default function MobNavButton({
         <SearchIcon size={28} className="text-onix" />
       </Link>
 
-      <button
+      <Button
         onClick={() => setOpen(true)}
-        className="bg-pearl border border-stone-300 rounded-full p-3"
+        variant="light"
+        size="icon"
+        className="size-14 rounded-full"
         aria-label="Open menu"
       >
         <MenuIcon size={28} className="text-onix" />
-      </button>
+      </Button>
 
       <MobNavModal
         isOpen={open}

package/dist/src/components/profile/ProfileForm.tsx

@@ -5,6 +5,7 @@ import { useRouter } from "next/navigation";
 import { Trash2Icon } from "lucide-react";
 import { useToast } from "@/components/ToastProvider";
 import Avatar from "@/components/ui/Avatar";
+import Button from "@/components/ui/Button";
 import { updateProfile } from "@/actions/profile";
 import { getProfileImageUrl } from "@/lib/profileImageUrl";
 import type { Session, DictionarySection } from "@/lib/types";
@@ -164,12 +165,13 @@ export default function ProfileForm({ lang, user, intl }: ProfileFormProps) {
           className="text-sand bg-onix border border-neutral-700 hover:border-pearl rounded-lg w-full px-5 py-3 transition-all duration-300"
           placeholder={profile.password as string}
         />
-        <button
+        <Button
           type="submit"
-          className="font-bold px-8 py-4 rounded-lg leading-none uppercase text-sand bg-blackamber border border-blackamber hover:text-onix hover:bg-pearl hover:border-pearl transition-all duration-300 cursor-pointer"
+          variant="dark"
+          className="px-8 py-4"
         >
           {profile.save as string}
-        </button>
+        </Button>
       </form>
     </div>
   );

package/dist/src/components/pwa/OfflineDownloadButton.tsx

@@ -4,6 +4,7 @@ import { useEffect, useState } from "react";
 import { DownloadIcon, Trash2Icon } from "lucide-react";
 import clsx from "clsx";
 import { useAlertDialog } from "@/components/AlertDialogProvider";
+import Button from "@/components/ui/Button";
 import {
   downloadSeriesBySlug,
   downloadVolumeBySlug,
@@ -133,16 +134,15 @@ export default function OfflineDownloadButton({ userId, section, slug, volumeId,
 
   const title = isReady ? offline?.remove : isDownloading ? offline?.downloading : offline?.download;
   return (
-    <button
+    <Button
       onClick={handleClick}
       disabled={!userId || (!isOnline && !isReady) || isDownloading}
       title={title || "Descargar para leer sin conexión"}
-      className={clsx(
-        "p-3 2xl:p-4 rounded-lg leading-none border transition-all duration-300 cursor-pointer",
-        isReady ? "text-onix bg-sand border-sand hover:bg-pearl hover:border-pearl" : "text-sand bg-blackamber border-blackamber hover:text-onix hover:bg-pearl hover:border-pearl",
-      )}
+      variant={isReady ? "lightAlt" : "dark"}
+      size="icon"
+      className="size-11 2xl:size-13"
     >
       {isDownloading ? <ProgressRing value={progress} /> : isReady ? <Trash2Icon size={20} /> : <DownloadIcon size={20} />}
-    </button>
+    </Button>
   );
 }

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

@@ -10,6 +10,7 @@ import {
 } from "lucide-react";
 import Loader from "@/components/ui/Loader";
 import VolumeRating from "@/components/library/manga/VolumeRating";
+import Button from "@/components/ui/Button";
 import type { DictionarySection } from "@/lib/types";
 
 interface MangaReaderProps {
@@ -256,14 +257,15 @@ export default function MangaReader({
           />
           <div className="flex flex-col md:flex-row gap-4 mt-2 w-full md:w-auto">
             {onToggleFavorite && (
-              <button
+              <Button
                 onClick={onToggleFavorite}
                 title={
                   isFavorite
                     ? reader.finishUnfavorite as string
                     : reader.finishFavorite as string
                 }
-                className="flex items-center justify-center gap-2 w-full md:w-auto px-5 py-2 rounded-lg border border-blackamber bg-blackamber text-sand hover:bg-pearl hover:text-onix hover:border-pearl transition-all duration-300 cursor-pointer font-bold uppercase"
+                variant="dark"
+                className="w-full gap-2 px-5 py-2 md:w-auto"
               >
                 {isFavorite ? (
                   <HeartOffIcon size={20} />
@@ -273,16 +275,17 @@ export default function MangaReader({
                 {isFavorite
                   ? reader.finishUnfavorite as string
                   : reader.finishFavorite as string}
-              </button>
+              </Button>
             )}
-            <button
+            <Button
               onClick={onClose}
               title={reader.ttExit as string}
-              className="flex items-center justify-center gap-2 w-full md:w-auto px-5 py-2 rounded-lg border border-blackamber bg-blackamber text-sand hover:bg-pearl hover:text-onix hover:border-pearl transition-all duration-300 cursor-pointer font-bold uppercase"
+              variant="dark"
+              className="w-full gap-2 px-5 py-2 md:w-auto"
             >
               <Minimize2Icon size={20} />
               {reader.ttExit as string}
-            </button>
+            </Button>
           </div>
         </div>
       ) : (

package/dist/src/components/settings/CreateUserForm.tsx

@@ -4,6 +4,7 @@ import { useState } from "react";
 import { UserRoundPlusIcon } from "lucide-react";
 import { useToast } from "@/components/ToastProvider";
 import { createUser } from "@/actions/users";
+import Button from "@/components/ui/Button";
 import type { Dictionary } from "@/lib/types";
 import type { Role } from "@/lib/types/auth";
 
@@ -133,12 +134,13 @@ export default function CreateUserForm({ intl }: CreateUserFormProps) {
             <option value="GUEST">{intl.settings.roleGuest as string}</option>
           </select>
         </div>
-        <button
+        <Button
           type="submit"
-          className="font-bold px-8 py-4 rounded-lg leading-none uppercase text-onix bg-sand border border-sand hover:text-sand hover:bg-onix hover:border-onix transition-all duration-300 cursor-pointer"
+          variant="lightAlt"
+          className="px-8 py-4"
         >
           {intl.settings.createUser as string}
-        </button>
+        </Button>
       </form>
     </div>
   );

package/dist/src/components/settings/EditUserForm.tsx

@@ -5,6 +5,7 @@ import { UserRoundPenIcon } from "lucide-react";
 import { useToast } from "@/components/ToastProvider";
 import { useAlertDialog } from "@/components/AlertDialogProvider";
 import { adminUpdateUser, deleteUser } from "@/actions/users";
+import Button from "@/components/ui/Button";
 import type { Dictionary } from "@/lib/types";
 import type { Role } from "@/lib/types/auth";
 
@@ -193,12 +194,13 @@ export default function EditUserForm({
             </div>
           </>
         )}
-        <button
+        <Button
           type="submit"
-          className="font-bold px-8 py-4 rounded-lg leading-none uppercase text-onix bg-sand border border-sand hover:text-sand hover:bg-onix hover:border-onix transition-all duration-300 cursor-pointer"
+          variant="lightAlt"
+          className="px-8 py-4"
         >
           {intl.settings.updateUser as string}
-        </button>
+        </Button>
         {!isSelf && (
           <button
             type="button"

package/dist/src/components/settings/LibSettingsButtons.tsx

@@ -10,6 +10,7 @@ import {
 } from "lucide-react";
 import { useToast } from "@/components/ToastProvider";
 import { useAlertDialog } from "@/components/AlertDialogProvider";
+import Button from "@/components/ui/Button";
 import useScanPolling from "@/hooks/useScanPolling";
 import Modal from "@/components/ui/Modal";
 import UploadMangaForm from "./UploadMangaForm";
@@ -298,17 +299,18 @@ export default function LibSettingsButtons({
   function ActionButton({ action }: { action: ActionItem }) {
     const Icon = action.icon;
     return (
-      <button
+      <Button
         onClick={action.onClick}
         disabled={action.disabled}
-        className="flex flex-col items-center justify-center text-base leading-5.5 bg-blackamber rounded-lg p-4 hover:text-onix hover:bg-pearl transition-all duration-300 cursor-pointer disabled:opacity-50"
+        variant="dark"
+        className="flex-col p-4 text-base leading-5.5 disabled:opacity-50"
       >
         <Icon
           size={36}
           className={`mb-4 ${action.spinning ? "animate-spin" : ""}`}
         />
         {action.label}
-      </button>
+      </Button>
     );
   }
 

package/dist/src/components/settings/UploadMangaForm.tsx

@@ -4,6 +4,7 @@ import { useState, useEffect, useRef } from "react";
 import { BookOpenIcon } from "lucide-react";
 import { useToast } from "@/components/ToastProvider";
 import DropzoneUpload from "@/components/DropzoneUpload";
+import Button from "@/components/ui/Button";
 import { extractFromArchive } from "@/lib/client/archiveExtractor";
 import { parseComicInfo } from "@/lib/client/comicInfoParser";
 import { generateCoverFilename } from "@/lib/client/coverHasher";
@@ -550,17 +551,18 @@ export default function UploadMangaForm({ intl, lang }: UploadMangaFormProps) {
           </div>
 
           <div className="text-right">
-            <button
+            <Button
               type="submit"
               disabled={isLoading || isProcessing || files.length === 0}
-              className="font-bold px-8 py-4 rounded-lg leading-none uppercase text-onix bg-sand border border-sand hover:text-sand hover:bg-onix hover:border-onix transition-all duration-300 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed"
+              variant="lightAlt"
+              className="px-8 py-4 disabled:cursor-not-allowed disabled:opacity-50"
             >
               {isProcessing
                 ? "Procesando..."
                 : isLoading
                   ? (intl.settings.uploadLibraryUploading as string)
                   : (intl.settings.uploadLibraryBtn as string)}
-            </button>
+            </Button>
           </div>
         </div>
       </form>

package/dist/src/components/ui/Button.tsx

@@ -0,0 +1,26 @@
+import clsx from "clsx";
+import { forwardRef } from "react";
+import type { ButtonHTMLAttributes } from "react";
+
+type ButtonVariant = "light" | "dark" | "accent" | "lightAlt";
+type ButtonSize = "default" | "icon";
+
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+}
+
+const variantStyles: Record<ButtonVariant, string> = {
+  light: "border-pearl bg-pearl text-onix hover:border-lilah hover:bg-lilah hover:text-pearl",
+  dark: "border-blackamber bg-blackamber text-sand hover:border-pearl hover:bg-pearl hover:text-onix",
+  accent: "border-lilah bg-lilah text-pearl hover:border-pearl hover:bg-pearl hover:text-onix",
+  lightAlt: "border-sand bg-sand text-onix hover:border-blackamber hover:bg-blackamber hover:text-sand",
+};
+
+const Button = forwardRef<HTMLButtonElement, ButtonProps>(({ variant = "light", size = "default", className, ...props }, ref) => (
+  <button ref={ref} {...props} className={clsx("inline-flex cursor-pointer items-center justify-center rounded-lg border font-bold uppercase leading-none transition-all duration-300", variantStyles[variant], size === "icon" && "size-10 p-0", className)} />
+));
+
+Button.displayName = "Button";
+
+export default Button;

package/dist/src/components/ui/MangaCard.tsx

@@ -27,6 +27,7 @@ interface MangaCardProps {
   offlineVolumeId?: string | null;
   offlineSeriesId?: string | null;
   imageSizes?: string;
+  coverAspectRatio?: "auto" | "uniform";
 }
 
 export default function MangaCard({
@@ -47,6 +48,7 @@ export default function MangaCard({
   offlineVolumeId,
   offlineSeriesId,
   imageSizes,
+  coverAspectRatio = "auto",
 }: MangaCardProps) {
   const t = intl;
   const ratio = progressRatio ?? 0;
@@ -62,6 +64,13 @@ export default function MangaCard({
       : href.includes("/books/")
         ? "books"
         : "manga";
+  const coverAspectRatioClass = coverAspectRatio === "uniform"
+    ? "aspect-[7/10]"
+    : section === "manga"
+      ? "aspect-[7/10]"
+      : section === "comic"
+        ? "aspect-[13/20]"
+        : "aspect-[2/3]";
   const oneshotLabel = getOneshotLabel(section, manga);
   const volumeSlug = href.split("?")[0].split("/").pop();
   const isOfflineCover = cover?.startsWith("/offline/") ?? false;
@@ -113,7 +122,7 @@ export default function MangaCard({
         }
       }}
     >
-      <div className="relative isolate aspect-[7/10.5] w-full flex-shrink-0">
+      <div className={clsx("relative isolate w-full flex-shrink-0", coverAspectRatioClass)}>
         {isOfflineCover ? (
           // IndexedDB pages are served by the service worker and cannot use Next's image optimizer.
           // eslint-disable-next-line @next/next/no-img-element

package/dist/src/components/ui/MobileSecondaryNav.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import Link from "next/link";
+import Button from "@/components/ui/Button";
 import { ChevronDownIcon, ChevronUpIcon, type LucideIcon } from "lucide-react";
 import clsx from "clsx";
 import { useEffect, useMemo, useRef, useState } from "react";
@@ -64,11 +65,12 @@ export default function MobileSecondaryNav({ items }: MobileSecondaryNavProps) {
 
   return (
     <div ref={containerRef} className="md:hidden mt-4 relative">
-      <button
+      <Button
         type="button"
         onClick={() => setOpen((prev) => !prev)}
         aria-expanded={open}
-        className="w-full flex items-center justify-between gap-3 p-4 rounded-lg bg-sand text-onix leading-tight transition-all duration-300"
+        variant="lightAlt"
+        className="w-full justify-between gap-3 p-4 normal-case leading-tight"
       >
         <span className="flex items-center min-w-0">
           <ActiveIcon size={20} className="mr-2 shrink-0" />
@@ -84,7 +86,7 @@ export default function MobileSecondaryNav({ items }: MobileSecondaryNavProps) {
         ) : (
           <ChevronDownIcon size={20} className="shrink-0" />
         )}
-      </button>
+      </Button>
 
       {open && (
         <div className="absolute left-0 right-0 top-full mt-2 z-20 rounded-lg bg-blackamber p-2">