@itsmrtr/bunkoshelf 1.0.2 → 1.1.1

package/dist/src/components/home/manga/HeroKeepRead.tsx

@@ -5,6 +5,7 @@ import MangaCard from "@/components/ui/MangaCard";
 import ReloadButton from "@/components/ui/ReloadButton";
 import PushButton from "@/components/ui/PushButton";
 import { getMangaVolumes } from "@/actions/library";
+import { getMangaCoverUrl } from "@/lib/mangaCover";
 import type { DictionarySection, Locale } from "@/lib/types";
 
 interface HeroKeepReadProps {
@@ -27,9 +28,7 @@ export default async function HeroKeepRead({ lang, intl, vapidPublicKey }: HeroK
             title: vol.title,
             slug: vol.slug,
             isOneshot: vol.series?.isOneshot === true,
-            coverImage: vol.coverImage
-              ? `/api/library/manga/cover/${vol.slug}/${vol.coverImage}`
-              : null,
+            coverImage: getMangaCoverUrl(vol),
             meta: vol.metadataObj ? { title: vol.metadataObj.title } : null,
             lastPage: progress?.lastPage ?? 0,
             totalPages: progress?.totalPages ?? 0,

package/dist/src/components/home/manga/RowNewVols.tsx

@@ -1,5 +1,6 @@
 import { getMangaVolumes } from "@/actions/library";
 import RowNewVolsCarousel, { type VolumeEntry } from "./RowNewVolsCarousel";
+import { getMangaCoverUrl } from "@/lib/mangaCover";
 import type { DictionarySection, Locale } from "@/lib/types";
 
 interface RowNewVolsProps {
@@ -19,9 +20,7 @@ export default async function RowNewVols({ lang, intl, maxItems = 8 }: RowNewVol
           title: vol.title,
           slug: vol.slug,
           isOneshot: vol.series?.isOneshot === true,
-          coverImage: vol.coverImage
-            ? `/api/library/manga/cover/${vol.slug}/${vol.coverImage}`
-            : null,
+          coverImage: getMangaCoverUrl(vol),
           meta: vol.metadataObj ? { title: vol.metadataObj.title } : null,
         }))
     : [];

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

@@ -5,6 +5,7 @@ import MangaCard from "@/components/ui/MangaCard";
 import Pagination from "@/components/ui/Pagination";
 import FiltersDrawer from "@/components/library/manga/FiltersDrawer";
 import { verifySession } from "@/lib/auth/verifySession";
+import { getMangaCoverUrl } from "@/lib/mangaCover";
 import { getSeriesBulkProgress } from "@/lib/reader/readingProgress";
 import type { Locale, Dictionary } from "@/lib/types";
 
@@ -47,13 +48,11 @@ export default async function SeriesIndex({
       ...entry,
       coverImage:
         sortedVolumes.length > 0
-          ? `/api/library/manga/cover/${sortedVolumes[sortedVolumes.length - 1].slug}/${sortedVolumes[sortedVolumes.length - 1].coverImage}`
+          ? getMangaCoverUrl(sortedVolumes[sortedVolumes.length - 1])
           : null,
       volumes: sortedVolumes.map((vol) => ({
         ...vol,
-        coverImage: vol.coverImage
-          ? `/api/library/manga/cover/${vol.slug}/${vol.coverImage}`
-          : null,
+        coverImage: getMangaCoverUrl(vol),
         meta: vol.metadataObj || null,
         genres: vol.genres.map((genre) => genre.name),
         tags: vol.tags.map((tag) => tag.name),
@@ -114,9 +113,7 @@ export default async function SeriesIndex({
           <Pagination
             currentPage={page}
             totalPages={totalPages}
-            lang={lang}
             intl={intl}
-            basePath="/series"
           />
         </div>
       )}

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

@@ -5,6 +5,7 @@ import {
   listSeriesWithVolumes,
 } from "@/lib/db/library";
 import { GhostIcon, LibraryBigIcon } from "lucide-react";
+import { getMangaCoverUrl } from "@/lib/mangaCover";
 import { sortByPaddedTitle } from "@/lib/utils";
 import { getSeriesBulkProgress } from "@/lib/reader/readingProgress";
 import type { Locale, Dictionary } from "@/lib/types";
@@ -40,14 +41,12 @@ export default async function SeriesIndexFav({ lang, intl }: SeriesIndexFavProps
       ...series,
       coverImage:
         sortedVolumes.length > 0
-          ? `/api/library/manga/cover/${sortedVolumes[sortedVolumes.length - 1].slug}/${sortedVolumes[sortedVolumes.length - 1].coverImage}`
+          ? getMangaCoverUrl(sortedVolumes[sortedVolumes.length - 1])
           : null,
       volumes:
         sortedVolumes.map((vol) => ({
           ...vol,
-          coverImage: vol.coverImage
-            ? `/api/library/manga/cover/${vol.slug}/${vol.coverImage}`
-            : null,
+          coverImage: getMangaCoverUrl(vol),
           meta: vol.metadataObj || null,
         })) ?? [],
     };

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

@@ -4,6 +4,7 @@ import { LibraryBigIcon } from "lucide-react";
 import MangaCard from "@/components/ui/MangaCard";
 import Pagination from "@/components/ui/Pagination";
 import FiltersDrawer from "@/components/library/manga/FiltersDrawer";
+import { getMangaCoverUrl } from "@/lib/mangaCover";
 import type { Locale, Dictionary } from "@/lib/types";
 
 const PAGE_SIZE = 35;
@@ -39,9 +40,7 @@ export default async function VolumesIndex({
   const entries = sortedVolumes.map((vol) => ({
     ...vol,
     isOneshot: vol.series?.isOneshot === true,
-    coverImage: vol.coverImage
-      ? `/api/library/manga/cover/${vol.slug}/${vol.coverImage}`
-      : null,
+    coverImage: getMangaCoverUrl(vol),
     meta: vol.metadataObj || null,
     genres: vol.genres.map((genre) => genre.name),
     tags: vol.tags.map((tag) => tag.name),
@@ -93,9 +92,7 @@ export default async function VolumesIndex({
           <Pagination
             currentPage={page}
             totalPages={totalPages}
-            lang={lang}
             intl={intl}
-            basePath="/volumes"
           />
         </div>
       )}

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

@@ -1,6 +1,7 @@
 import MangaCard from "@/components/ui/MangaCard";
 import { verifySession } from "@/lib/auth/verifySession";
 import { listFavoriteVolumeIds, listVolumes } from "@/lib/db/library";
+import { getMangaCoverUrl } from "@/lib/mangaCover";
 import { sortByPaddedTitle } from "@/lib/utils";
 import { GhostIcon, BookCopyIcon } from "lucide-react";
 import type { Locale, Dictionary } from "@/lib/types";
@@ -31,9 +32,7 @@ export default async function VolumesIndexFav({ lang, intl }: VolumesIndexFavPro
   const entries = sortedVolumes.map((vol) => ({
     ...vol,
     isOneshot: vol.series?.isOneshot === true,
-    coverImage: vol.coverImage
-      ? `/api/library/manga/cover/${vol.slug}/${vol.coverImage}`
-      : null,
+    coverImage: getMangaCoverUrl(vol),
     meta: vol.metadataObj || null,
   }));
 

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

@@ -5,6 +5,7 @@ import { LibraryBigIcon } from "lucide-react";
 import MangaCard from "@/components/ui/MangaCard";
 import Pagination from "@/components/ui/Pagination";
 import FiltersDrawer from "@/components/library/manga/FiltersDrawer";
+import { getMangaCoverUrl } from "@/lib/mangaCover";
 import type { Locale, Dictionary } from "@/lib/types";
 
 const PAGE_SIZE = 35;
@@ -45,9 +46,7 @@ export default async function WantToRead({
   const entries = sortedVolumes.map((vol) => ({
     ...vol,
     isOneshot: vol.series?.isOneshot === true,
-    coverImage: vol.coverImage
-      ? `/api/library/manga/cover/${vol.slug}/${vol.coverImage}`
-      : null,
+    coverImage: getMangaCoverUrl(vol),
     meta: vol.metadataObj || null,
     genres: vol.genres.map((genre) => genre.name),
     tags: vol.tags.map((tag) => tag.name),
@@ -98,9 +97,7 @@ export default async function WantToRead({
           <Pagination
             currentPage={page}
             totalPages={totalPages}
-            lang={lang}
             intl={intl}
-            basePath="/toread"
           />
         </div>
       )}

package/dist/src/components/library/manga/row/HeroKeepRead.tsx

@@ -4,6 +4,7 @@ import { useRef, useEffect, useState } from "react";
 import { usePathname } from "next/navigation";
 import MangaCard from "@/components/ui/MangaCard";
 import MangaNav from "@/components/library/manga/MangaNav";
+import { getMangaCoverUrl } from "@/lib/mangaCover";
 import {
   LibraryBigIcon,
   ChevronLeftIcon,
@@ -55,9 +56,7 @@ export default function HeroKeepRead({ lang, intl }: HeroKeepReadProps) {
           return {
             ...vol,
             isOneshot: vol.series?.isOneshot === true,
-            coverImage: vol.coverImage
-              ? `/api/library/manga/cover/${vol.slug}/${vol.coverImage}`
-              : null,
+            coverImage: getMangaCoverUrl(vol),
             meta: vol.metadataObj || null,
             lastPage: progress?.lastPage ?? 0,
             totalPages: progress?.totalPages ?? 0,

package/dist/src/components/library/manga/row/NewVols.tsx

@@ -1,6 +1,7 @@
 import { BookPlusIcon } from "lucide-react";
 import { getMangaVolumes } from "@/actions/library";
 import MangaRowCarousel, { type VolEntry } from "./MangaRowCarousel";
+import { getMangaCoverUrl } from "@/lib/mangaCover";
 import type { Locale, Dictionary } from "@/lib/types";
 
 interface NewVolsProps {
@@ -20,9 +21,7 @@ export default async function NewVols({ lang, intl, maxItems = 12 }: NewVolsProp
           slug: vol.slug,
           title: vol.title,
           isOneshot: vol.series?.isOneshot === true,
-          coverImage: vol.coverImage
-            ? `/api/library/manga/cover/${vol.slug}/${vol.coverImage}`
-            : null,
+          coverImage: getMangaCoverUrl(vol),
           meta: vol.metadataObj ?? null,
         }))
     : [];

package/dist/src/components/library/manga/row/NextVol.tsx

@@ -1,6 +1,7 @@
 import { BookMarkedIcon } from "lucide-react";
 import { getMangaVolumes } from "@/actions/library";
 import MangaRowCarousel, { type VolEntry } from "./MangaRowCarousel";
+import { getMangaCoverUrl } from "@/lib/mangaCover";
 import type { Locale, Dictionary } from "@/lib/types";
 
 interface NextVolProps {
@@ -48,9 +49,7 @@ export default async function NextVol({ lang, intl, maxItems = 12 }: NextVolProp
           slug: nextUnread.slug,
           title: nextUnread.title,
           isOneshot: nextUnread.series?.isOneshot === true,
-          coverImage: nextUnread.coverImage
-            ? `/api/library/manga/cover/${nextUnread.slug}/${nextUnread.coverImage}`
-            : null,
+          coverImage: getMangaCoverUrl(nextUnread),
           meta: nextUnread.metadataObj ?? null,
         });
       }

package/dist/src/components/library/manga/row/RecentlyRead.tsx

@@ -1,6 +1,7 @@
 import { BookCheckIcon } from "lucide-react";
 import { getMangaVolumes } from "@/actions/library";
 import MangaRowCarousel, { type VolEntry } from "./MangaRowCarousel";
+import { getMangaCoverUrl } from "@/lib/mangaCover";
 import type { Locale, Dictionary } from "@/lib/types";
 
 interface RecentlyReadProps {
@@ -20,9 +21,7 @@ export default async function RecentlyRead({ lang, intl, maxItems = 12 }: Recent
             slug: vol.slug,
             title: vol.title,
             isOneshot: vol.series?.isOneshot === true,
-            coverImage: vol.coverImage
-              ? `/api/library/manga/cover/${vol.slug}/${vol.coverImage}`
-              : null,
+            coverImage: getMangaCoverUrl(vol),
             meta: vol.metadataObj ?? null,
             isRead: progress?.isRead ?? false,
             lastReadAt: progress?.lastReadAt ? new Date(progress.lastReadAt) : null,

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

@@ -1,17 +1,21 @@
 "use client";
 
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { useRouter } from "next/navigation";
+import { Trash2Icon } from "lucide-react";
 import { useToast } from "@/components/ToastProvider";
-import { updateUser } from "@/actions/users";
+import Avatar from "@/components/ui/Avatar";
+import { updateProfile } from "@/actions/profile";
+import { getProfileImageUrl } from "@/lib/profileImageUrl";
 import type { Session, DictionarySection } from "@/lib/types";
 
 interface ProfileFormProps {
+  lang: string;
   user: Session | null;
   intl: DictionarySection;
 }
 
-export default function ProfileForm({ user, intl }: ProfileFormProps) {
+export default function ProfileForm({ lang, user, intl }: ProfileFormProps) {
   const router = useRouter();
   const toast = useToast();
   if (!toast) throw new Error("ProfileForm must be used within ToastProvider");
@@ -22,32 +26,79 @@ export default function ProfileForm({ user, intl }: ProfileFormProps) {
     lastname: user?.lastname || "",
     password: "",
   });
+  const [profileImage, setProfileImage] = useState<File | null>(null);
+  const [removeProfileImage, setRemoveProfileImage] = useState(false);
+  const [profileImagePreview, setProfileImagePreview] = useState<string | null>(
+    getProfileImageUrl(user?.profileImage)
+  );
 
   const profile = intl.profile as DictionarySection;
   const toastUsers = intl.toastUsers as DictionarySection;
 
+  useEffect(() => {
+    if (removeProfileImage) {
+      setProfileImagePreview(null);
+      return;
+    }
+
+    if (!profileImage) {
+      setProfileImagePreview(getProfileImageUrl(user?.profileImage));
+      return;
+    }
+
+    const objectUrl = URL.createObjectURL(profileImage);
+    setProfileImagePreview(objectUrl);
+
+    return () => URL.revokeObjectURL(objectUrl);
+  }, [profileImage, removeProfileImage, user?.profileImage]);
+
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const { name, value } = e.target;
     setFormData((prevData) => ({ ...prevData, [name]: value }));
   };
 
+  const handleProfileImageChange = (file: File | null) => {
+    setRemoveProfileImage(false);
+    setProfileImage(file);
+  };
+
+  const handleRemoveProfileImage = () => {
+    setProfileImage(null);
+    setRemoveProfileImage(true);
+  };
+
   const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
 
-    const result = await updateUser(formData);
+    const payload = new FormData();
+    payload.set("name", formData.name);
+    payload.set("lastname", formData.lastname);
+    payload.set("password", formData.password);
+    payload.set("removeProfileImage", removeProfileImage ? "true" : "false");
+
+    if (profileImage) {
+      payload.set("profileImage", profileImage);
+    }
+
+    const result = await updateProfile(payload, lang);
 
     if (result.success) {
       setFormData((prevData) => ({ ...prevData, password: "" }));
+      setProfileImage(null);
+      setRemoveProfileImage(false);
       addToast({
         title: toastUsers.successTt as string,
         description: toastUsers.successUpdate as string,
         variant: "success",
       });
       router.refresh();
+      setTimeout(() => {
+        router.refresh();
+      }, 150);
     } else {
       addToast({
         title: toastUsers.errorTt as string,
-        description: toastUsers.errorUpdate as string,
+        description: (result.error as string) || (toastUsers.errorUpdate as string),
         variant: "error",
       });
     }
@@ -56,6 +107,41 @@ export default function ProfileForm({ user, intl }: ProfileFormProps) {
   return (
     <div className="max-w-7xl mx-auto">
       <form onSubmit={handleSubmit} className="space-y-4">
+        <div className="flex flex-col md:flex-row md:items-center gap-6 mb-8">
+          <div className="relative group w-28 h-28 shrink-0">
+            <Avatar
+              name={formData.name || user?.name}
+              lastname={formData.lastname || user?.lastname}
+              imageUrl={profileImagePreview}
+              alt={`${formData.name || user?.name || user?.username || "User"} ${
+                formData.lastname || user?.lastname || ""
+              }`.trim()}
+              className="w-28 h-28 text-3xl"
+            />
+            {profileImagePreview && (
+              <button
+                type="button"
+                onClick={handleRemoveProfileImage}
+                title={profile.removePicture as string}
+                className="absolute top-1 right-1 opacity-0 group-hover:opacity-100 transition-opacity duration-200 rounded-full bg-red-700 hover:bg-red-800 text-white p-1.5 cursor-pointer"
+              >
+                <Trash2Icon size={14} />
+              </button>
+            )}
+          </div>
+          <div className="w-full">
+            <label className="block text-sm mb-2">{profile.picture as string}</label>
+            <input
+              type="file"
+              accept="image/png,image/jpeg,image/webp"
+              onChange={(e) => handleProfileImageChange(e.target.files?.[0] ?? null)}
+              className="text-sand bg-onix border border-neutral-700 hover:border-pearl rounded-lg w-full px-5 py-3 transition-all duration-300 file:mr-4 file:border-0 file:bg-lilah file:text-pearl file:px-4 file:py-2 file:rounded-md"
+            />
+            <p className="text-xs text-neutral-400 mt-2">
+              {profile.pictureHelp as string}
+            </p>
+          </div>
+        </div>
         <input
           name="name"
           value={formData.name}

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

@@ -1,7 +1,8 @@
 import { connection } from "next/server";
-import clsx from "clsx";
 import { verifySession } from "@/lib/auth/verifySession";
 import { findUserSessionById } from "@/lib/db/users";
+import Avatar from "@/components/ui/Avatar";
+import { getProfileImageUrl } from "@/lib/profileImageUrl";
 import type { DictionarySection } from "@/lib/types";
 
 interface UserAvatarProps {
@@ -18,10 +19,6 @@ export default async function UserAvatar({ intl }: UserAvatarProps) {
 
   if (!user) return null;
 
-  const initials = `${user.name?.[0] ?? ""}${
-    user.lastname?.[0] ?? ""
-  }`.toUpperCase();
-
   const age =
     typeof user.birthYear === "number"
       ? new Date().getFullYear() - user.birthYear
@@ -32,15 +29,13 @@ export default async function UserAvatar({ intl }: UserAvatarProps) {
 
   return (
     <div className="flex flex-col items-center gap-4 text-center my-8 2xl:mb-12">
-      <div
-        className={clsx(
-          "rounded-full bg-lilah text-pearl flex items-center justify-center font-bold",
-          "text-5xl w-40 h-40",
-          "md:w-48 md:h-48 md:text-7xl"
-        )}
-      >
-        {initials}
-      </div>
+      <Avatar
+        name={user.name}
+        lastname={user.lastname}
+        imageUrl={getProfileImageUrl(user.profileImage)}
+        alt={`${user.name ?? user.username} ${user.lastname ?? ""}`.trim()}
+        className="text-5xl w-40 h-40 md:w-48 md:h-48 md:text-7xl"
+      />
 
       <div className="flex flex-col items-center justify-center mt-4">
         <h3 className="text-2xl md:text-3xl mb-2">

package/dist/src/components/sidebar/FooterNav.tsx

@@ -46,10 +46,10 @@ export default function FooterNav({
   versionData,
 }: FooterNavProps) {
   const [latestVersion, setLatestVersion] = useState<string | null>(
-    versionData.latestVersion
+    versionData.latestVersion,
   );
   const [updateAvailable, setUpdateAvailable] = useState(
-    versionData.updateAvailable
+    versionData.updateAvailable,
   );
   const [changelogUrl, setChangelogUrl] = useState(versionData.changelogUrl);
   const currentVersion = versionData.currentVersion;
@@ -91,7 +91,7 @@ export default function FooterNav({
     }
 
     checkVersion();
-    const interval = setInterval(checkVersion, 24 * 60 * 60 * 1000);
+    const interval = setInterval(checkVersion, 6 * 60 * 60 * 1000);
     return () => clearInterval(interval);
   }, []);
 
@@ -99,7 +99,7 @@ export default function FooterNav({
     {
       type: "link",
       icon: BookOpenIcon,
-      href: "https://bunko.am25.app/guides/manga",
+      href: "https://bunko.alemartir.com/guides/manga",
       target: "_blank",
       title: intl.tooltip.userGuide as string,
     },

package/dist/src/components/sidebar/SecondNav.tsx

@@ -10,7 +10,7 @@ interface SecondNavProps {
 export default function SecondNav({ intl, className }: SecondNavProps) {
   const links = [
     {
-      href: "https://bunko.am25.app/guides",
+      href: "https://bunko.alemartir.com",
       icon: BookOpenIcon,
       label: intl.noauth.guide as string,
       external: true,

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

@@ -0,0 +1,50 @@
+import Image from "next/image";
+import clsx from "clsx";
+
+interface AvatarProps {
+  name?: string | null;
+  lastname?: string | null;
+  imageUrl?: string | null;
+  alt: string;
+  className?: string;
+  imageClassName?: string;
+  textClassName?: string;
+}
+
+export default function Avatar({
+  name,
+  lastname,
+  imageUrl,
+  alt,
+  className,
+  imageClassName,
+  textClassName,
+}: AvatarProps) {
+  const initials = `${name?.[0] ?? ""}${lastname?.[0] ?? ""}`.toUpperCase() || "?";
+
+  if (imageUrl) {
+    return (
+      <div className={clsx("relative overflow-hidden rounded-full bg-lilah", className)}>
+        <Image
+          src={imageUrl}
+          alt={alt}
+          fill
+          sizes="192px"
+          className={clsx("object-cover", imageClassName)}
+        />
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className={clsx(
+        "rounded-full bg-lilah text-pearl flex items-center justify-center font-bold",
+        className,
+        textClassName
+      )}
+    >
+      {initials}
+    </div>
+  );
+}

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

@@ -1,39 +1,47 @@
 "use client";
 
+import { useTransition } from "react";
 import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
-import { useRouter, useSearchParams } from "next/navigation";
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
 import type { DictionarySection } from "@/lib/types";
 
 interface PaginationProps {
   currentPage: number;
   totalPages: number;
-  lang: string;
   intl: DictionarySection;
-  basePath: string;
 }
 
 export default function Pagination({
   currentPage,
   totalPages,
-  lang,
   intl,
-  basePath,
 }: PaginationProps) {
   const router = useRouter();
+  const pathname = usePathname();
   const searchParams = useSearchParams();
+  const [isPending, startTransition] = useTransition();
 
   const goToPage = (page: number) => {
-    const params = new URLSearchParams(searchParams);
+    if (isPending || page === currentPage || page < 1 || page > totalPages) {
+      return;
+    }
+
+    const params = new URLSearchParams(searchParams.toString());
     params.set("page", String(page));
-    router.push(`/${lang}/manga${basePath}?${params.toString()}`);
+    const href = `${pathname}?${params.toString()}`;
+
+    startTransition(() => {
+      router.replace(href);
+    });
   };
 
   return (
     <div className="flex justify-center items-center gap-2">
       <button
-        disabled={currentPage === 1}
+        type="button"
+        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:hidden"
+        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"
       >
         <ChevronLeftIcon size={20} />
       </button>
@@ -41,9 +49,10 @@ export default function Pagination({
         {(intl as Record<string, DictionarySection>).reader.page as string} {currentPage} / {totalPages}
       </span>
       <button
-        disabled={currentPage === totalPages}
+        type="button"
+        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:hidden"
+        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"
       >
         <ChevronRightIcon size={20} />
       </button>