@itsmrtr/bunkoshelf 1.16.6 → 1.17.1

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

@@ -1,7 +1,6 @@
 "use client";
 
 import { useState } from "react";
-import { useRouter } from "next/navigation";
 import {
   BookCheckIcon,
   HatGlassesIcon,
@@ -17,6 +16,12 @@ 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 {
+  publishResourceState,
+  useResourceMutation,
+  useResourceRefresh,
+  useResourceState,
+} from "@/lib/client/resourceState";
 import {
   getLibraryRootHref,
   type LibrarySection,
@@ -54,13 +59,17 @@ export default function ReadButtonsVolume({
   section = "manga",
   userId,
 }: ReadButtonsVolumeProps) {
-  const router = useRouter();
-  const [isFavorite, setIsFavorite] = useState(initFavorite);
-  const [isRead, setIsRead] = useState(initRead);
   const [isLoading, setIsLoading] = useState(false);
   const [isReaderOpen, setIsReaderOpen] = useState(false);
   const [isYoureiMode, setIsYoureiMode] = useState(false);
   const [offlineImages, setOfflineImages] = useState<string[] | undefined>();
+  const { isFavorite = initFavorite, isRead = initRead } = useResourceState(
+    "manga-volume",
+    volumeId,
+    { isFavorite: initFavorite, isRead: initRead },
+  );
+  const mutateResource = useResourceMutation();
+  const refreshResources = useResourceRefresh();
 
   const readingDirection =
     mangaStyle === "YesLTR" || mangaStyle === "No" ? "ltr" : "rtl";
@@ -107,7 +116,7 @@ export default function ReadButtonsVolume({
         const localDate = getLocalDateString();
         await updateOfflineVolume(userId, volumeId, { isRead: nextRead, lastPage: nextRead ? totalPages - 1 : 0, totalPages });
         await enqueueOfflineOperation(userId, "read", { volumeId, read: nextRead, totalPages, lastReadAt: now.toISOString(), firstRead: localDate });
-        setIsRead(nextRead);
+        publishResourceState("manga-volume", volumeId, { isRead: nextRead });
         return;
       }
       const imagesRes = await fetch("/api/reader/manga", {
@@ -126,18 +135,23 @@ export default function ReadButtonsVolume({
       const now = new Date();
       const localDate = getLocalDateString();
 
-      const result = await updateReadState({
-        volumeId,
-        read: !isRead,
-        totalPages,
-        lastReadAt: !isRead ? now.toISOString() : undefined,
-        firstRead: !isRead ? localDate : undefined,
+      const result = await mutateResource({
+        resource: "manga-volume",
+        id: volumeId,
+        patch: { isRead: !isRead },
+        mutate: () => updateReadState({
+          volumeId,
+          read: !isRead,
+          totalPages,
+          lastReadAt: !isRead ? now.toISOString() : undefined,
+          firstRead: !isRead ? localDate : undefined,
+        }),
+        isSuccess: (value) => Boolean(value?.success),
       });
 
       if (!result) return;
 
       if (result.success) {
-        setIsRead((prev) => !prev);
         window.dispatchEvent(new Event("bunko:challenge-updated"));
       } else if ("error" in result) {
         console.error("Failed to toggle read state:", result.error);
@@ -161,19 +175,20 @@ export default function ReadButtonsVolume({
         const nextFavorite = !isFavorite;
         await updateOfflineVolume(userId, volumeId, { isFavorite: nextFavorite });
         await enqueueOfflineOperation(userId, "favorite", { volumeId, favorite: nextFavorite });
-        setIsFavorite(nextFavorite);
+        publishResourceState("manga-volume", volumeId, { isFavorite: nextFavorite });
         return;
       }
-      const result = await toggleVolumeFavorite({
-        volumeId,
-        favorite: !isFavorite,
+      const result = await mutateResource({
+        resource: "manga-volume",
+        id: volumeId,
+        patch: { isFavorite: !isFavorite },
+        mutate: () => toggleVolumeFavorite({ volumeId, favorite: !isFavorite }),
+        isSuccess: (value) => Boolean(value?.success),
       });
 
       if (!result) return;
 
-      if (result.success) {
-        setIsFavorite((prev) => !prev);
-      } else if ("error" in result) {
+      if (!result.success && "error" in result) {
         console.error("Failed to toggle favorite:", result.error);
       }
     } catch (err) {
@@ -210,7 +225,7 @@ export default function ReadButtonsVolume({
         if (!navigator.onLine && userId) {
           await updateOfflineVolume(userId, volumeId, { lastPage, totalPages, isRead: isFinished });
           await enqueueOfflineOperation(userId, "progress", body);
-          if (isFinished) setIsRead(true);
+          if (isFinished) publishResourceState("manga-volume", volumeId, { isRead: true });
           return;
         }
 
@@ -221,10 +236,12 @@ export default function ReadButtonsVolume({
         }
 
         if (isFinished && data?.success) {
-          setIsRead(true);
+          publishResourceState("manga-volume", volumeId, { isRead: true });
           window.dispatchEvent(new Event("bunko:challenge-updated"));
         }
 
+        if (data?.success) refreshResources();
+
         if (isFinished && data?.success) {
           try {
             await sendPush({
@@ -244,7 +261,6 @@ export default function ReadButtonsVolume({
         console.error("Error syncing progress:", error);
       }
       setIsReaderOpen(false);
-      router.refresh();
     }
   };
 
@@ -254,9 +270,10 @@ export default function ReadButtonsVolume({
         <Button
           onClick={openNormalReader}
           variant="accent"
-          className="px-5 py-2 2xl:px-6 2xl:py-4"
-        >
-          <BookCheckIcon size={20} className="mr-2" />
+        size="action"
+        className="gap-2"
+      >
+          <BookCheckIcon size={20} />
           {intl.manga.read as string}
         </Button>
 
@@ -264,8 +281,7 @@ export default function ReadButtonsVolume({
           onClick={openYoureiReader}
           title="Leer de incógnito"
           variant="dark"
-          size="icon"
-          className="size-11 2xl:size-13"
+          size="actionIcon"
         >
           <HatGlassesIcon size={20} />
         </Button>
@@ -275,8 +291,7 @@ export default function ReadButtonsVolume({
           disabled={isLoading}
           title={isRead ? "Marcar como no leído" : "Marcar como leído"}
           variant={isRead ? "lightAlt" : "dark"}
-          size="icon"
-          className="size-11 2xl:size-13"
+          size="actionIcon"
         >
           <CheckIcon size={20} />
         </Button>
@@ -286,8 +301,7 @@ export default function ReadButtonsVolume({
           disabled={isLoading}
           title={isFavorite ? "Eliminar de favoritos" : "Marcar como favorito"}
           variant={isFavorite ? "lightAlt" : "dark"}
-          size="icon"
-          className="size-11 2xl:size-13"
+          size="actionIcon"
         >
           {isFavorite ? <HeartOffIcon size={20} /> : <HeartIcon size={20} />}
         </Button>

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

@@ -10,6 +10,7 @@ import {
   updateReadingEntry,
   deleteReadingEntry,
 } from "@/actions/readingHistory";
+import { useResourceMutation } from "@/lib/client/resourceState";
 import type { Dictionary } from "@/lib/types";
 
 interface ReadingEntry {
@@ -35,6 +36,7 @@ export default function ReadingEntryForm({
   const [readAt, setReadAt] = useState("");
   const [isLoading, setIsLoading] = useState(false);
   const { confirm } = useAlertDialog()!;
+  const mutateResource = useResourceMutation();
 
   const isEdit = !!entry;
 
@@ -50,14 +52,22 @@ export default function ReadingEntryForm({
 
     setIsLoading(true);
 
-    const result = isEdit
-      ? await updateReadingEntry({ entryId: entry!.id, readAt })
-      : await createReadingEntry({ volumeId, readAt });
+    const result = await mutateResource({
+      resource: "manga-volume",
+      id: volumeId,
+      patch: { isRead: true },
+      mutate: () => isEdit
+        ? updateReadingEntry({ entryId: entry!.id, readAt })
+        : createReadingEntry({ volumeId, readAt }),
+      isSuccess: (value) => Boolean(value?.success),
+      getConfirmedPatch: (value) => value?.progress,
+    });
 
     setIsLoading(false);
 
     if (result?.success) {
-      window.location.reload();
+      window.dispatchEvent(new Event("bunko:challenge-updated"));
+      onClose();
     }
   };
 
@@ -71,10 +81,19 @@ export default function ReadingEntryForm({
     if (!confirmResult) return;
 
     setIsLoading(true);
-    const result = await deleteReadingEntry({ entryId: entry!.id });
+    const result = await mutateResource({
+      resource: "manga-volume",
+      id: volumeId,
+      patch: {},
+      mutate: () => deleteReadingEntry({ entryId: entry!.id }),
+      isSuccess: (value) => Boolean(value?.success),
+      getConfirmedPatch: (value) => value?.progress,
+    });
+    setIsLoading(false);
 
     if (result?.success) {
-      window.location.reload();
+      window.dispatchEvent(new Event("bunko:challenge-updated"));
+      onClose();
     }
   };
 

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

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import {
   BookOpenCheckIcon,
   RepeatIcon,
@@ -9,6 +9,7 @@ import {
 } from "lucide-react";
 import { createReadingEntry } from "@/actions/readingHistory";
 import ReadingEntryForm from "./ReadingEntryForm";
+import { useResourceMutation } from "@/lib/client/resourceState";
 import type { Dictionary } from "@/lib/types";
 
 interface ReadingEntry {
@@ -33,6 +34,11 @@ export default function ReadingHistory({
   const [modalOpen, setModalOpen] = useState(false);
   const [editingEntry, setEditingEntry] = useState<ReadingEntry | null>(null);
   const [isMigrating, setIsMigrating] = useState(false);
+  const mutateResource = useResourceMutation();
+
+  useEffect(() => {
+    setEntries(initialEntries || []);
+  }, [initialEntries]);
 
   const canMigrate = firstRead && entries.length === 0;
 
@@ -51,9 +57,16 @@ export default function ReadingHistory({
 
   const handleMigrate = async () => {
     setIsMigrating(true);
-    const result = await createReadingEntry({ volumeId, readAt: firstRead! });
+    const result = await mutateResource({
+      resource: "manga-volume",
+      id: volumeId,
+      patch: { isRead: true },
+      mutate: () => createReadingEntry({ volumeId, readAt: firstRead! }),
+      isSuccess: (value) => Boolean(value?.success),
+      getConfirmedPatch: (value) => value?.progress,
+    });
     if (result?.success) {
-      window.location.reload();
+      window.dispatchEvent(new Event("bunko:challenge-updated"));
     }
     setIsMigrating(false);
   };

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

@@ -10,6 +10,11 @@ import {
 } from "lucide-react";
 import { getSeriesStatus, updateSeriesStatus } from "@/actions/series-status";
 import Button from "@/components/ui/Button";
+import {
+  publishResourceState,
+  useResourceMutation,
+  useResourceState,
+} from "@/lib/client/resourceState";
 import type { Locale, Dictionary } from "@/lib/types";
 import type { LucideIcon } from "lucide-react";
 
@@ -58,10 +63,15 @@ export default function StatusSelect({ intl, seriesId }: StatusSelectProps) {
     },
   ];
 
-  const [currentStatus, setCurrentStatus] = useState<string | null>(null);
+  const { status: currentStatus = null } = useResourceState(
+    "manga-series",
+    seriesId,
+    { status: null },
+  );
   const [isOpen, setIsOpen] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
   const selectRef = useRef<HTMLDivElement>(null);
+  const mutateResource = useResourceMutation();
 
   const currentOption = STATUS_OPTIONS.find(
     (opt) => opt.value === currentStatus
@@ -76,7 +86,9 @@ export default function StatusSelect({ intl, seriesId }: StatusSelectProps) {
     const load = async () => {
       const data = await getSeriesStatus({ seriesId });
       if (data && !("error" in data) && mounted) {
-        setCurrentStatus(data.status || "FINISHED");
+        publishResourceState("manga-series", seriesId, {
+          status: data.status || "FINISHED",
+        });
       }
     };
 
@@ -106,9 +118,17 @@ export default function StatusSelect({ intl, seriesId }: StatusSelectProps) {
   const handleStatusChange = async (newStatus: string) => {
     setIsLoading(true);
     try {
-      const result = await updateSeriesStatus({ seriesId, status: newStatus });
+      const result = await mutateResource({
+        resource: "manga-series",
+        id: seriesId,
+        patch: { status: newStatus },
+        mutate: () => updateSeriesStatus({ seriesId, status: newStatus }),
+        isSuccess: (value) => Boolean(value && !("error" in value)),
+        getConfirmedPatch: (value) => (
+          typeof value?.status === "string" ? { status: value.status } : undefined
+        ),
+      });
       if (result && !("error" in result)) {
-        setCurrentStatus(result.status);
         setIsOpen(false);
       }
     } finally {
@@ -122,8 +142,8 @@ export default function StatusSelect({ intl, seriesId }: StatusSelectProps) {
         onClick={() => setIsOpen(!isOpen)}
         disabled={isLoading}
         variant="dark"
-        size="icon"
-        className="group size-11 2xl:size-13"
+        size="actionIcon"
+        className="group"
         title={(currentOption?.label as string) || "Seleccionar estado"}
       >
         <CurrentIcon

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

@@ -1,8 +1,9 @@
 "use client";
 
-import { useState, useRef, useEffect } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { StarIcon, MinusIcon, PlusIcon } from "lucide-react";
 import { updatePersonalRating } from "@/actions/rating";
+import { useResourceMutation, useResourceState } from "@/lib/client/resourceState";
 
 const MIN = 0.5;
 const MAX = 10;
@@ -18,28 +19,36 @@ export default function VolumeRating({
   communityRating,
   initialPersonalRating,
 }: VolumeRatingProps) {
-  const [personalRating, setPersonalRating] = useState(initialPersonalRating);
   const [isOpen, setIsOpen] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
   const [draft, setDraft] = useState(5);
   const panelRef = useRef<HTMLDivElement>(null);
+  const { personalRating = initialPersonalRating } = useResourceState(
+    "manga-volume",
+    volumeId,
+    { personalRating: initialPersonalRating },
+  );
+  const mutateResource = useResourceMutation();
 
   const hasPersonal = personalRating !== null && personalRating !== undefined;
   const displayRating = hasPersonal ? personalRating : communityRating;
   const hasRating = displayRating !== null && displayRating !== undefined;
 
-  const closeAndSave = async (value: number) => {
+  const closeAndSave = useCallback(async (value: number) => {
     setIsOpen(false);
     setIsLoading(true);
-    const result = await updatePersonalRating({
-      volumeId,
-      rating: value,
-    });
-    if (result?.success) {
-      setPersonalRating(value);
+    try {
+      await mutateResource({
+        resource: "manga-volume",
+        id: volumeId,
+        patch: { personalRating: value },
+        mutate: () => updatePersonalRating({ volumeId, rating: value }),
+        isSuccess: (result) => Boolean(result?.success),
+      });
+    } finally {
+      setIsLoading(false);
     }
-    setIsLoading(false);
-  };
+  }, [mutateResource, volumeId]);
 
   useEffect(() => {
     function handleClickOutside(e: MouseEvent) {
@@ -51,7 +60,7 @@ export default function VolumeRating({
       document.addEventListener("mousedown", handleClickOutside);
     }
     return () => document.removeEventListener("mousedown", handleClickOutside);
-  }, [isOpen, draft]);
+  }, [isOpen, draft, closeAndSave]);
 
   const openPanel = () => {
     setDraft(hasPersonal ? personalRating! : 5);
@@ -60,15 +69,18 @@ export default function VolumeRating({
 
   const handleRemove = async () => {
     setIsLoading(true);
-    const result = await updatePersonalRating({
-      volumeId,
-      rating: null,
-    });
-    if (result?.success) {
-      setPersonalRating(null);
+    try {
+      await mutateResource({
+        resource: "manga-volume",
+        id: volumeId,
+        patch: { personalRating: null },
+        mutate: () => updatePersonalRating({ volumeId, rating: null }),
+        isSuccess: (result) => Boolean(result?.success),
+      });
+    } finally {
+      setIsLoading(false);
+      setIsOpen(false);
     }
-    setIsLoading(false);
-    setIsOpen(false);
   };
 
   if (!hasRating && !isOpen) {

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

@@ -139,8 +139,7 @@ export default function OfflineDownloadButton({ userId, section, slug, volumeId,
       disabled={!userId || (!isOnline && !isReady) || isDownloading}
       title={title || "Descargar para leer sin conexión"}
       variant={isReady ? "lightAlt" : "dark"}
-      size="icon"
-      className="size-11 2xl:size-13"
+      size="actionIcon"
     >
       {isDownloading ? <ProgressRing value={progress} /> : isReady ? <Trash2Icon size={20} /> : <DownloadIcon size={20} />}
     </Button>

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

@@ -12,6 +12,7 @@ import {
   Trash2Icon,
 } from "lucide-react";
 import type { Dictionary } from "@/lib/types";
+import { publishResourceState } from "@/lib/client/resourceState";
 
 type ReaderTheme = "light" | "sepia" | "dark";
 type ReaderFlow = "paginated" | "scrolled-continuous";
@@ -34,6 +35,7 @@ const highlightStyles = {
 interface EpubReaderProps {
   isOpen: boolean;
   onClose: () => void;
+  progressResourceId: string;
   slug: string;
   title: string;
   layout: "reflowable" | "pre-paginated";
@@ -94,7 +96,7 @@ function isCoverSection(document: Document, sectionHref: string, coverPath?: str
   });
 }
 
-export default function EpubReader({ isOpen, onClose, slug, title, layout, intl }: EpubReaderProps) {
+export default function EpubReader({ isOpen, onClose, progressResourceId, slug, title, layout, intl }: EpubReaderProps) {
   const reader = intl.epubReader as Record<string, string>;
   const viewerRef = useRef<HTMLDivElement>(null);
   const tocPanelRef = useRef<HTMLElement>(null);
@@ -228,10 +230,21 @@ export default function EpubReader({ isOpen, onClose, slug, title, layout, intl
         isRead: isComplete,
         readingDate: getLocalDateString(),
       }),
-    }).then((response) => {
-      if (response.ok && isComplete) window.dispatchEvent(new Event("bunko:challenge-updated"));
+    }).then(async (response) => {
+      if (!response.ok) return;
+      const savedProgress = await response.json() as {
+        isRead: boolean;
+        isFavorite: boolean;
+        progression: number | null;
+      };
+      publishResourceState("book-volume", progressResourceId, {
+        isRead: savedProgress.isRead,
+        isFavorite: savedProgress.isFavorite,
+        progression: savedProgress.progression,
+      });
+      if (isComplete) window.dispatchEvent(new Event("bunko:challenge-updated"));
     });
-  }, [slug]);
+  }, [progressResourceId, slug]);
 
   const applyStyles = useCallback(() => {
     const rendition = renditionRef.current;
@@ -706,7 +719,7 @@ export default function EpubReader({ isOpen, onClose, slug, title, layout, intl
   const isBookmarked = !!cfi && bookmarkCfis.includes(cfi);
 
   return (
-    <div className="fixed inset-0 z-50 overflow-hidden text-sand" style={{ background: themeStyles[theme].background }}>
+    <div className="fixed inset-0 z-[60] overflow-hidden text-sand" style={{ background: themeStyles[theme].background }}>
       {showToc && (
         <aside ref={tocPanelRef} className="absolute bottom-[calc(3.5rem+max(0.75rem,env(safe-area-inset-bottom)))] left-0 top-0 z-40 w-full overflow-y-auto bg-blackamber p-5 shadow-xl md:bottom-14 md:w-96">
           <div className="mb-4 flex flex-wrap gap-2 border-b border-white/15">

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

@@ -215,7 +215,7 @@ export default function MangaReader({
   if (!isOpen) return null;
   if (loading)
     return (
-      <div className="fixed inset-0 z-50 bg-black flex items-center justify-center">
+      <div className="fixed inset-0 z-[60] bg-black flex items-center justify-center">
         <Loader />
       </div>
     );
@@ -227,7 +227,7 @@ export default function MangaReader({
       id="mob-nav-modal"
       ref={modalRef}
       tabIndex={-1}
-      className="fixed inset-0 z-50 bg-black flex flex-col items-center justify-center pointer-events-auto transition-opacity duration-200 ease-in-out opacity-100"
+      className="fixed inset-0 z-[60] bg-black flex flex-col items-center justify-center pointer-events-auto transition-opacity duration-200 ease-in-out opacity-100"
     >
       <button
         onClick={onClose}

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

@@ -2,7 +2,6 @@
 
 import { useState, useRef } from "react";
 import {
-  FolderUpIcon,
   DatabaseBackupIcon,
   HardDriveUploadIcon,
   ServerIcon,
@@ -12,8 +11,6 @@ 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";
 import {
   reindexLibrary,
   regenerateCovers,
@@ -44,7 +41,6 @@ export default function LibSettingsButtons({
   intl,
   libProvider,
 }: LibSettingsButtonsProps) {
-  const [uploadOpen, setUploadOpen] = useState(false);
   const [loadingAction, setLoadingAction] = useState<LoadingActionType>(null);
   const dbFileInputRef = useRef<HTMLInputElement>(null);
   const { addToast, updateToast } = useToast()!;
@@ -56,10 +52,6 @@ export default function LibSettingsButtons({
     updateToast,
   });
 
-  const handleUploadMangas = () => {
-    setUploadOpen(true);
-  };
-
   const handleFullScan = async () => {
     let _err: unknown;
     try {
@@ -273,13 +265,6 @@ export default function LibSettingsButtons({
       label: providerLabel,
       icon: ProviderIcon,
     },
-    {
-      key: "upload",
-      label: intl.settings.uploadLibrary as string,
-      icon: FolderUpIcon,
-      onClick: handleUploadMangas,
-      disabled: isLoading,
-    },
     {
       key: "backup",
       label: intl.settings.backupdb as string,
@@ -315,7 +300,7 @@ export default function LibSettingsButtons({
   }
 
   return (
-    <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+    <div className="grid grid-cols-2 md:grid-cols-3 gap-4">
       {ACTIONS.map((a) => (
         <ActionButton key={a.key} action={a} />
       ))}
@@ -327,10 +312,6 @@ export default function LibSettingsButtons({
         className="hidden"
         onChange={handleRestoreDB}
       />
-
-      <Modal isOpen={uploadOpen} onClose={() => setUploadOpen(false)}>
-        <UploadMangaForm intl={intl} lang={lang} />
-      </Modal>
     </div>
   );
 }

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

@@ -2,8 +2,8 @@ import clsx from "clsx";
 import { forwardRef } from "react";
 import type { ButtonHTMLAttributes } from "react";
 
-type ButtonVariant = "light" | "dark" | "accent" | "lightAlt";
-type ButtonSize = "default" | "icon";
+type ButtonVariant = "light" | "dark" | "accent" | "lightAlt" | "destructive";
+type ButtonSize = "default" | "small" | "icon" | "action" | "actionIcon";
 
 interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   variant?: ButtonVariant;
@@ -11,15 +11,40 @@ interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
 }
 
 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",
+  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-sand hover:bg-sand 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",
+  destructive:
+    "border-danger-alt bg-danger-alt text-pearl hover:border-blackamber hover:bg-blackamber hover:text-danger-alt",
 };
 
-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)} />
-));
+const sizeStyles: Record<ButtonSize, string> = {
+  default: "rounded-lg font-bold leading-none",
+  small:
+    "rounded-md border-transparent px-[11px] py-[3px] text-sm font-normal leading-normal",
+  icon: "rounded-lg size-10 p-0 font-bold leading-none",
+  action: "h-11 rounded-lg px-4 font-bold leading-none 2xl:h-13 2xl:px-5",
+  actionIcon: "size-11 rounded-lg p-0 font-bold leading-none 2xl:size-13",
+};
+
+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 border uppercase transition-all duration-300",
+        variantStyles[variant],
+        sizeStyles[size],
+        className,
+      )}
+    />
+  ),
+);
 
 Button.displayName = "Button";