@itsmrtr/bunkoshelf 1.14.1 → 1.16.0

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,8 @@ 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 Switch from "@/components/ui/Switch";
 import type { Dictionary } from "@/lib/types";
 import type { Role } from "@/lib/types/auth";
 
@@ -17,6 +19,8 @@ export default function CreateUserForm({ intl }: CreateUserFormProps) {
   const [name, setName] = useState("");
   const [lastname, setLastname] = useState("");
   const [birthYear, setBirthYear] = useState("");
+  const [birthMonth, setBirthMonth] = useState("");
+  const [birthDay, setBirthDay] = useState("");
   const [isAdmin, setIsAdmin] = useState(false);
   const [role, setRole] = useState<Role>("MEMBER");
   const [error, setError] = useState<string | null>(null);
@@ -32,6 +36,8 @@ export default function CreateUserForm({ intl }: CreateUserFormProps) {
       name,
       lastname,
       birthYear: birthYear ? parseInt(birthYear) : null,
+      birthMonth: birthMonth ? parseInt(birthMonth) : null,
+      birthDay: birthDay ? parseInt(birthDay) : null,
       isAdmin,
       role,
     };
@@ -49,6 +55,8 @@ export default function CreateUserForm({ intl }: CreateUserFormProps) {
       setName("");
       setLastname("");
       setBirthYear("");
+      setBirthMonth("");
+      setBirthDay("");
       setIsAdmin(false);
       setRole("MEMBER");
       setError(null);
@@ -74,71 +82,24 @@ export default function CreateUserForm({ intl }: CreateUserFormProps) {
       {error && <div className="text-red-500 mb-4 text-center">{error}</div>}
 
       <form onSubmit={handleSubmit} className="space-y-4">
-        <input
-          type="text"
-          value={username}
-          onChange={(e) => setUsername(e.target.value)}
-          placeholder={intl.settings.username as string}
-          className="bg-pearl border border-onix rounded-lg w-full px-5 py-3"
-          required
-        />
-        <input
-          type="password"
-          value={password}
-          onChange={(e) => setPassword(e.target.value)}
-          placeholder={intl.settings.password as string}
-          className="bg-pearl border border-onix rounded-lg w-full px-5 py-3"
-          required
-        />
-        <input
-          type="text"
-          value={name}
-          onChange={(e) => setName(e.target.value)}
-          placeholder={intl.settings.nameOpt as string}
-          className="bg-pearl border border-onix rounded-lg w-full px-5 py-3"
-        />
-        <input
-          type="text"
-          value={lastname}
-          onChange={(e) => setLastname(e.target.value)}
-          placeholder={intl.settings.lastnameOpt as string}
-          className="bg-pearl border border-onix rounded-lg w-full px-5 py-3"
-        />
-        <input
-          type="number"
-          value={birthYear}
-          onChange={(e) => setBirthYear(e.target.value)}
-          placeholder={intl.settings.birthYearOpt as string}
-          className="bg-pearl border border-onix rounded-lg w-full px-5 py-3"
-        />
-        <div className="flex items-center space-x-2">
-          <input
-            type="checkbox"
-            checked={isAdmin}
-            onChange={() => setIsAdmin(!isAdmin)}
-            id="isAdmin"
-          />
-          <label htmlFor="isAdmin">{intl.settings.isAdmin as string}</label>
+        <div className="grid gap-4 md:grid-cols-2">
+          <input type="text" value={username} onChange={(e) => setUsername(e.target.value)} placeholder={intl.settings.username as string} className="bg-pearl border border-onix rounded-lg w-full px-5 py-3" required />
+          <input type="password" value={password} onChange={(e) => setPassword(e.target.value)} placeholder={intl.settings.password as string} className="bg-pearl border border-onix rounded-lg w-full px-5 py-3" required />
         </div>
-        <div className="flex flex-col space-y-1">
-          <label htmlFor="role">{intl.settings.role as string}</label>
-          <select
-            id="role"
-            value={role}
-            onChange={(e) => setRole(e.target.value as Role)}
-            className="bg-pearl border border-onix rounded-lg px-5 py-3"
-          >
-            <option value="ADMIN">{intl.settings.roleAdmin as string}</option>
-            <option value="MEMBER">{intl.settings.roleMember as string}</option>
-            <option value="GUEST">{intl.settings.roleGuest as string}</option>
-          </select>
+        <div className="grid gap-4 md:grid-cols-2">
+          <input type="text" value={name} onChange={(e) => setName(e.target.value)} placeholder={intl.settings.nameOpt as string} className="bg-pearl border border-onix rounded-lg w-full px-5 py-3" />
+          <input type="text" value={lastname} onChange={(e) => setLastname(e.target.value)} placeholder={intl.settings.lastnameOpt as string} className="bg-pearl border border-onix rounded-lg w-full px-5 py-3" />
         </div>
-        <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"
-        >
-          {intl.settings.createUser as string}
-        </button>
+        <div className="grid gap-4 md:grid-cols-3">
+          <input type="number" min="1" max="31" value={birthDay} onChange={(e) => setBirthDay(e.target.value)} placeholder={intl.settings.birthDay as string} className="bg-pearl border border-onix rounded-lg w-full px-5 py-3" required />
+          <input type="number" min="1" max="12" value={birthMonth} onChange={(e) => setBirthMonth(e.target.value)} placeholder={intl.settings.birthMonth as string} className="bg-pearl border border-onix rounded-lg w-full px-5 py-3" required />
+          <input type="number" value={birthYear} onChange={(e) => setBirthYear(e.target.value)} placeholder={intl.settings.birthYearOpt as string} className="bg-pearl border border-onix rounded-lg w-full px-5 py-3" required />
+        </div>
+        <div className="grid items-center gap-4 md:grid-cols-2">
+          <select aria-label={intl.settings.role as string} value={role} onChange={(e) => setRole(e.target.value as Role)} className="bg-pearl border border-onix rounded-lg px-5 py-3"><option value="ADMIN">{intl.settings.roleAdmin as string}</option><option value="MEMBER">{intl.settings.roleMember as string}</option><option value="GUEST">{intl.settings.roleGuest as string}</option></select>
+          <div className="flex items-center justify-between gap-4 px-5 py-3"><span>{intl.settings.isAdmin as string}</span><Switch checked={isAdmin} onCheckedChange={setIsAdmin} /></div>
+        </div>
+        <Button type="submit" variant="lightAlt" className="px-8 py-4">{intl.settings.createUser as string}</Button>
       </form>
     </div>
   );

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

@@ -5,6 +5,8 @@ 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 Switch from "@/components/ui/Switch";
 import type { Dictionary } from "@/lib/types";
 import type { Role } from "@/lib/types/auth";
 
@@ -16,6 +18,8 @@ interface UserData {
   name: string | null;
   lastname: string | null;
   birthYear: number | null;
+  birthMonth: number | null;
+  birthDay: number | null;
 }
 
 interface EditUserFormProps {
@@ -36,6 +40,8 @@ export default function EditUserForm({
   const [name, setName] = useState("");
   const [lastname, setLastname] = useState("");
   const [birthYear, setBirthYear] = useState("");
+  const [birthMonth, setBirthMonth] = useState("");
+  const [birthDay, setBirthDay] = useState("");
   const [isAdmin, setIsAdmin] = useState(false);
   const [role, setRole] = useState<Role>("MEMBER");
   const [error] = useState<string | null>(null);
@@ -52,6 +58,8 @@ export default function EditUserForm({
       setName(user.name || "");
       setLastname(user.lastname || "");
       setBirthYear(user.birthYear?.toString() || "");
+      setBirthMonth(user.birthMonth?.toString() || "");
+      setBirthDay(user.birthDay?.toString() || "");
       setIsAdmin(user.isAdmin || false);
       setRole((user.role as Role) || "MEMBER");
     }
@@ -67,6 +75,8 @@ export default function EditUserForm({
       name,
       lastname,
       birthYear: birthYear ? parseInt(birthYear) : null,
+      birthMonth: birthMonth ? parseInt(birthMonth) : null,
+      birthDay: birthDay ? parseInt(birthDay) : null,
       isAdmin,
       role,
     };
@@ -130,84 +140,22 @@ export default function EditUserForm({
 
       {error && <div className="text-red-500 mb-4 text-center">{error}</div>}
 
-      <form onSubmit={handleSubmit} className="space-x-4 space-y-4">
-        <input
-          type="text"
-          value={username}
-          onChange={(e) => setUsername(e.target.value)}
-          placeholder={intl.settings.username as string}
-          className="bg-pearl border border-onix rounded-lg w-full px-5 py-3"
-          required
-        />
-        <input
-          type="password"
-          value={password}
-          onChange={(e) => setPassword(e.target.value)}
-          placeholder={intl.settings.passwordNew as string}
-          className="bg-pearl border border-onix rounded-lg w-full px-5 py-3"
-        />
-        <input
-          type="text"
-          value={name}
-          onChange={(e) => setName(e.target.value)}
-          placeholder={intl.settings.nameOpt as string}
-          className="bg-pearl border border-onix rounded-lg w-full px-5 py-3"
-        />
-        <input
-          type="text"
-          value={lastname}
-          onChange={(e) => setLastname(e.target.value)}
-          placeholder={intl.settings.lastnameOpt as string}
-          className="bg-pearl border border-onix rounded-lg w-full px-5 py-3"
-        />
-        <input
-          type="number"
-          value={birthYear}
-          onChange={(e) => setBirthYear(e.target.value)}
-          placeholder={intl.settings.birthYearOpt as string}
-          className="bg-pearl border border-onix rounded-lg w-full px-5 py-3"
-        />
-        {!isSelf && (
-          <>
-            <div className="flex items-center space-x-2">
-              <input
-                type="checkbox"
-                checked={isAdmin}
-                onChange={() => setIsAdmin(!isAdmin)}
-                id="isAdmin"
-              />
-              <label htmlFor="isAdmin">{intl.settings.isAdmin as string}</label>
-            </div>
-            <div className="flex flex-col space-y-1">
-              <label htmlFor="role">{intl.settings.role as string}</label>
-              <select
-                id="role"
-                value={role}
-                onChange={(e) => setRole(e.target.value as Role)}
-                className="bg-pearl border border-onix rounded-lg px-5 py-3"
-              >
-                <option value="ADMIN">{intl.settings.roleAdmin as string}</option>
-                <option value="MEMBER">{intl.settings.roleMember as string}</option>
-                <option value="GUEST">{intl.settings.roleGuest as string}</option>
-              </select>
-            </div>
-          </>
-        )}
-        <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"
-        >
-          {intl.settings.updateUser as string}
-        </button>
-        {!isSelf && (
-          <button
-            type="button"
-            onClick={handleDelete}
-            className="font-bold px-8 py-4 rounded-lg leading-none uppercase text-sand bg-red-700 border border-red-700 hover:bg-red-800 transition-all duration-300 cursor-pointer"
-          >
-            {intl.settings.deleteUser as string}
-          </button>
-        )}
+      <form onSubmit={handleSubmit} className="space-y-4">
+        <div className="grid gap-4 md:grid-cols-2">
+          <input type="text" value={username} onChange={(e) => setUsername(e.target.value)} placeholder={intl.settings.username as string} className="bg-pearl border border-onix rounded-lg w-full px-5 py-3" required />
+          <input type="password" value={password} onChange={(e) => setPassword(e.target.value)} placeholder={intl.settings.passwordNew as string} className="bg-pearl border border-onix rounded-lg w-full px-5 py-3" />
+        </div>
+        <div className="grid gap-4 md:grid-cols-2">
+          <input type="text" value={name} onChange={(e) => setName(e.target.value)} placeholder={intl.settings.nameOpt as string} className="bg-pearl border border-onix rounded-lg w-full px-5 py-3" />
+          <input type="text" value={lastname} onChange={(e) => setLastname(e.target.value)} placeholder={intl.settings.lastnameOpt as string} className="bg-pearl border border-onix rounded-lg w-full px-5 py-3" />
+        </div>
+        <div className="grid gap-4 md:grid-cols-3">
+          <input type="number" min="1" max="31" value={birthDay} onChange={(e) => setBirthDay(e.target.value)} placeholder={intl.settings.birthDay as string} className="bg-pearl border border-onix rounded-lg w-full px-5 py-3" />
+          <input type="number" min="1" max="12" value={birthMonth} onChange={(e) => setBirthMonth(e.target.value)} placeholder={intl.settings.birthMonth as string} className="bg-pearl border border-onix rounded-lg w-full px-5 py-3" />
+          <input type="number" value={birthYear} onChange={(e) => setBirthYear(e.target.value)} placeholder={intl.settings.birthYearOpt as string} className="bg-pearl border border-onix rounded-lg w-full px-5 py-3" />
+        </div>
+        {!isSelf && <div className="grid items-center gap-4 md:grid-cols-2"><select aria-label={intl.settings.role as string} value={role} onChange={(e) => setRole(e.target.value as Role)} className="bg-pearl border border-onix rounded-lg px-5 py-3"><option value="ADMIN">{intl.settings.roleAdmin as string}</option><option value="MEMBER">{intl.settings.roleMember as string}</option><option value="GUEST">{intl.settings.roleGuest as string}</option></select><div className="flex items-center justify-between gap-4 px-5 py-3"><span>{intl.settings.isAdmin as string}</span><Switch checked={isAdmin} onCheckedChange={setIsAdmin} /></div></div>}
+        <div className="flex flex-wrap gap-4"><Button type="submit" variant="lightAlt" className="px-8 py-4">{intl.settings.updateUser as string}</Button>{!isSelf && <button type="button" onClick={handleDelete} className="font-bold px-8 py-4 rounded-lg leading-none uppercase text-sand bg-red-700 border border-red-700 hover:bg-red-800 transition-all duration-300 cursor-pointer">{intl.settings.deleteUser as string}</button>}</div>
       </form>
     </div>
   );

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/ParentalControlSettings.tsx

@@ -0,0 +1,27 @@
+"use client";
+
+import { useState } from "react";
+import { ShieldCheckIcon } from "lucide-react";
+import { useRouter } from "next/navigation";
+import { updateGlobalParentalControl } from "@/actions/parental-control";
+import Switch from "@/components/ui/Switch";
+import { useToast } from "@/components/ToastProvider";
+import type { Dictionary, Locale } from "@/lib/types";
+import type { ParentalControlMode } from "@/lib/parentalControl";
+
+export default function ParentalControlSettings({ enabled, mode: initialMode, lang, intl }: { enabled: boolean; mode: ParentalControlMode; lang: Locale; intl: Dictionary }) {
+  const router = useRouter();
+  const [value, setValue] = useState(enabled);
+  const [mode, setMode] = useState(initialMode);
+  const [loading, setLoading] = useState(false);
+  const { addToast } = useToast()!;
+  const labels = intl.settings as Record<string, string>;
+  async function update(next: boolean, nextMode = mode) {
+    setLoading(true);
+    const result = await updateGlobalParentalControl(next, nextMode, lang);
+    setLoading(false);
+    if (result.success) { setValue(next); setMode(nextMode); router.refresh(); }
+    else addToast({ title: intl.alerts.errorTt as string, description: labels.parentalControlUpdateError, variant: "error" });
+  }
+  return <section className="rounded-lg bg-blackamber p-4"><div className="flex items-start justify-between gap-4"><div><h3 className="flex items-center gap-2 text-base"><ShieldCheckIcon size={20} />{labels.parentalControl}</h3><p className="mt-1 text-neutral-300">{labels.parentalControlGlobalHelp}</p></div><Switch checked={value} disabled={loading} onCheckedChange={(next) => void update(next)} /></div>{value && <fieldset className="mt-4 space-y-3" disabled={loading}><legend className="mb-2 font-bold">{labels.parentalControlGlobalLevel}</legend><label className="grid grid-cols-[auto_1fr] items-start gap-x-3"><input className="mt-1.5" type="radio" checked={mode === "flexible"} onChange={() => void update(true, "flexible")} /><span className="font-bold leading-tight">{labels.parentalControlFlexible}</span><span className="col-start-2 text-sm leading-snug text-neutral-300">{labels.parentalControlGlobalFlexibleHelp}</span></label><label className="grid grid-cols-[auto_1fr] items-start gap-x-3"><input className="mt-1.5" type="radio" checked={mode === "strict"} onChange={() => void update(true, "strict")} /><span className="font-bold leading-tight">{labels.parentalControlStrict}</span><span className="col-start-2 text-sm leading-snug text-neutral-300">{labels.parentalControlGlobalStrictHelp}</span></label></fieldset>}<p className="mt-4 font-bold">{value ? labels.parentalControlGlobalOn : labels.parentalControlGlobalOff}</p></section>;
+}

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/settings/UsersTable.tsx

@@ -14,6 +14,8 @@ interface UserRow {
   name: string | null;
   lastname: string | null;
   birthYear: number | null;
+  birthMonth: number | null;
+  birthDay: number | null;
 }
 
 interface UsersTableProps {

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">

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

@@ -4,6 +4,7 @@ import { useTransition } from "react";
 import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
 import { usePathname, useRouter, useSearchParams } from "next/navigation";
 import { usePwa } from "@/components/pwa/PwaProvider";
+import Button from "@/components/ui/Button";
 import type { DictionarySection } from "@/lib/types";
 
 interface PaginationProps {
@@ -43,25 +44,29 @@ export default function Pagination({
 
   return (
     <div className="flex justify-center items-center gap-2">
-      <button
+      <Button
         type="button"
+        variant="dark"
+        size="icon"
         disabled={currentPage === 1 || isPending}
         onClick={() => goToPage(currentPage - 1)}
-        className="p-3 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 disabled:opacity-40 disabled:pointer-events-none"
+        className="size-11 disabled:pointer-events-none disabled:opacity-40"
       >
         <ChevronLeftIcon size={20} />
-      </button>
+      </Button>
       <span className="px-2">
         {(intl as Record<string, DictionarySection>).reader.page as string} {currentPage} / {totalPages}
       </span>
-      <button
+      <Button
         type="button"
+        variant="dark"
+        size="icon"
         disabled={currentPage === totalPages || isPending}
         onClick={() => goToPage(currentPage + 1)}
-        className="p-3 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 disabled:opacity-40 disabled:pointer-events-none"
+        className="size-11 disabled:pointer-events-none disabled:opacity-40"
       >
         <ChevronRightIcon size={20} />
-      </button>
+      </Button>
     </div>
   );
 }

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

@@ -0,0 +1,28 @@
+"use client";
+
+import clsx from "clsx";
+import type { ButtonHTMLAttributes } from "react";
+
+interface SwitchProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "onChange" | "type"> {
+  checked: boolean;
+  onCheckedChange: (checked: boolean) => void;
+}
+
+export default function Switch({ checked, onCheckedChange, className, ...props }: SwitchProps) {
+  return (
+    <button
+      type="button"
+      role="switch"
+      aria-checked={checked}
+      onClick={() => onCheckedChange(!checked)}
+      className={clsx(
+        "relative h-7 w-12 shrink-0 rounded-full transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-lilah",
+        checked ? "bg-lilah" : "bg-neutral-700",
+        className
+      )}
+      {...props}
+    >
+      <span className={clsx("absolute left-1 top-1 h-5 w-5 rounded-full bg-pearl transition-transform", checked ? "translate-x-5" : "translate-x-0")} />
+    </button>
+  );
+}

package/dist/src/lib/client/offlineLibrary.ts

@@ -1,6 +1,7 @@
 "use client";
 
 import type { LibrarySection } from "@/lib/librarySection";
+import { ageRatingMap } from "@/lib/mangaMetadata";
 
 const DB_NAME = "bunko-pwa";
 const DB_VERSION = 1;
@@ -33,6 +34,12 @@ export interface OfflineVolume {
   totalPages: number;
 }
 
+export interface OfflineContentVisibilityPolicy {
+  enabled: boolean;
+  maxAge: number | null;
+  allowUnrated: boolean;
+}
+
 export interface OfflineDownload {
   key: string;
   userId: string;
@@ -173,6 +180,26 @@ export async function getReadyVolumes(userId: string, section?: LibrarySection)
   return ready.sort((a, b) => a.title.localeCompare(b.title));
 }
 
+export async function purgeRestrictedVolumes(userId: string, policy: OfflineContentVisibilityPolicy) {
+  if (!policy.enabled) return;
+  const db = await openOfflineLibrary();
+  const tx = db.transaction([VOLUMES, PAGES, DOWNLOADS], "readwrite");
+  const volumes = await request<Array<OfflineVolume & { key: string }>>(tx.objectStore(VOLUMES).index("userId").getAll(userId));
+  for (const volume of volumes) {
+    const ageRating = typeof volume.metadata.ageRating === "string" ? volume.metadata.ageRating : null;
+    const minimum = ageRatingMap(ageRating);
+    const allowed = minimum === null ? policy.allowUnrated : minimum <= (policy.maxAge ?? 18);
+    if (allowed) continue;
+    const pageKeys = await request<IDBValidKey[]>(tx.objectStore(PAGES).index("volume").getAllKeys([userId, volume.id]));
+    for (const key of pageKeys) tx.objectStore(PAGES).delete(key);
+    tx.objectStore(VOLUMES).delete(volume.key);
+    tx.objectStore(DOWNLOADS).delete(downloadKey(userId, volume.id));
+  }
+  await transactionDone(tx);
+  db.close();
+  emitChange();
+}
+
 export async function getDownload(userId: string, volumeId: string) {
   const db = await openOfflineLibrary();
   const tx = db.transaction(DOWNLOADS, "readonly");