@itsmrtr/bunkoshelf 1.16.6 → 1.17.0

package/dist/src/components/clubs/ClubReader.tsx

@@ -7,6 +7,6 @@ import type { Dictionary } from "@/lib/types";
 
 export default function ClubReader({ kind, volume, intl }: { kind: "manga" | "books"; volume: { id: string; slug: string; title: string; mangaStyle?: string | null; layout?: "reflowable" | "pre-paginated" }; intl: Dictionary }) {
   const router = useRouter();
-  if (kind === "books") return <EpubReader isOpen onClose={() => router.back()} slug={volume.slug} title={volume.title} layout={volume.layout ?? "reflowable"} intl={intl} />;
+  if (kind === "books") return <EpubReader isOpen onClose={() => router.back()} progressResourceId={volume.id} slug={volume.slug} title={volume.title} layout={volume.layout ?? "reflowable"} intl={intl} />;
   return <MangaReader isOpen onClose={() => router.back()} slug={volume.slug} intl={intl} isYoureiMode={false} readingDirection={volume.mangaStyle === "YesLTR" || volume.mangaStyle === "No" ? "ltr" : "rtl"} volumeId={volume.id} communityRating={null} initialPersonalRating={null} mangaTitle={volume.title} />;
 }

package/dist/src/components/library/books/BookReaderButton.tsx

@@ -1,28 +1,37 @@
 "use client";
 
 import { useEffect, useState } from "react";
-import { useRouter } from "next/navigation";
-import clsx from "clsx";
 import { BookCheckIcon, CheckIcon, HeartIcon, HeartOffIcon } from "lucide-react";
 import EpubReader from "@/components/reader/EpubReader";
 import Button from "@/components/ui/Button";
 import { updateBookReadState } from "@/actions/books-reading";
+import {
+  publishResourceState,
+  useResourceMutation,
+  useResourceRefresh,
+  useResourceState,
+} from "@/lib/client/resourceState";
 import type { Dictionary } from "@/lib/types";
 
 interface BookReaderButtonProps {
+  volumeId: string;
   slug: string;
   title: string;
   layout: "reflowable" | "pre-paginated";
   intl: Dictionary;
 }
 
-export default function BookReaderButton({ slug, title, layout, intl }: BookReaderButtonProps) {
-  const router = useRouter();
+export default function BookReaderButton({ volumeId, slug, title, layout, intl }: BookReaderButtonProps) {
   const books = intl.books as Record<string, string>;
   const [open, setOpen] = useState(false);
-  const [favorite, setFavorite] = useState(false);
-  const [isRead, setIsRead] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
+  const { isFavorite: favorite = false, isRead = false } = useResourceState(
+    "book-volume",
+    volumeId,
+    {},
+  );
+  const mutateResource = useResourceMutation();
+  const refreshResources = useResourceRefresh();
 
   const getLocalDateString = () => {
     const now = new Date();
@@ -33,27 +42,33 @@ export default function BookReaderButton({ slug, title, layout, intl }: BookRead
     fetch(`/api/reader/books/${encodeURIComponent(slug)}/progress`)
       .then((response) => response.ok ? response.json() : null)
       .then((progress) => {
-        setFavorite(progress?.isFavorite === true);
-        setIsRead(progress?.isRead === true);
+        publishResourceState("book-volume", volumeId, {
+          isFavorite: progress?.isFavorite === true,
+          isRead: progress?.isRead === true,
+          progression: progress?.progression ?? null,
+        });
       })
       .catch(() => undefined);
-  }, [slug]);
+  }, [slug, volumeId]);
 
   const updateProgress = async (body: { isRead?: boolean; isFavorite?: boolean; progression?: number }) => {
     setIsLoading(true);
     try {
-      const response = await fetch(`/api/reader/books/${encodeURIComponent(slug)}/progress`, {
-        method: "PUT",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify(body),
+      const response = await mutateResource({
+        resource: "book-volume",
+        id: volumeId,
+        patch: body,
+        mutate: () => fetch(`/api/reader/books/${encodeURIComponent(slug)}/progress`, {
+          method: "PUT",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify(body),
+        }),
+        isSuccess: (value) => value.ok,
       });
       if (!response.ok) return;
-      if (body.isFavorite !== undefined) setFavorite(body.isFavorite);
       if (body.isRead !== undefined) {
-        setIsRead(body.isRead);
         if (body.isRead) window.dispatchEvent(new Event("bunko:challenge-updated"));
       }
-      router.refresh();
     } finally {
       setIsLoading(false);
     }
@@ -63,15 +78,19 @@ export default function BookReaderButton({ slug, title, layout, intl }: BookRead
     setIsLoading(true);
     try {
       const nextIsRead = !isRead;
-      const result = await updateBookReadState({
-        slug,
-        read: nextIsRead,
-        readAt: nextIsRead ? getLocalDateString() : undefined,
+      const result = await mutateResource({
+        resource: "book-volume",
+        id: volumeId,
+        patch: { isRead: nextIsRead, progression: nextIsRead ? 1 : 0 },
+        mutate: () => updateBookReadState({
+          slug,
+          read: nextIsRead,
+          readAt: nextIsRead ? getLocalDateString() : undefined,
+        }),
+        isSuccess: (value) => value.success,
       });
       if (!result.success) return;
-      setIsRead(nextIsRead);
       if (nextIsRead) window.dispatchEvent(new Event("bunko:challenge-updated"));
-      router.refresh();
     } finally {
       setIsLoading(false);
     }
@@ -111,6 +130,17 @@ export default function BookReaderButton({ slug, title, layout, intl }: BookRead
         {favorite ? <HeartOffIcon size={20} /> : <HeartIcon size={20} />}
       </Button>
     </div>
-    <EpubReader isOpen={open} onClose={() => setOpen(false)} slug={slug} title={title} layout={layout} intl={intl} />
+    <EpubReader
+      isOpen={open}
+      onClose={() => {
+        setOpen(false);
+        refreshResources();
+      }}
+      slug={slug}
+      progressResourceId={volumeId}
+      title={title}
+      layout={layout}
+      intl={intl}
+    />
   </>;
 }

package/dist/src/components/library/books/BookReadingEntryForm.tsx

@@ -10,6 +10,7 @@ import {
   deleteBookReadingEntry,
   updateBookReadingEntry,
 } from "@/actions/books-reading-history";
+import { useResourceMutation } from "@/lib/client/resourceState";
 import type { Dictionary } from "@/lib/types";
 
 interface BookReadingEntry {
@@ -36,6 +37,7 @@ export default function BookReadingEntryForm({
   const [readAt, setReadAt] = useState("");
   const [isLoading, setIsLoading] = useState(false);
   const { confirm } = useAlertDialog()!;
+  const mutateResource = useResourceMutation();
   const isEdit = Boolean(entry);
 
   useEffect(() => {
@@ -47,12 +49,26 @@ export default function BookReadingEntryForm({
     if (!readAt) return;
 
     setIsLoading(true);
-    const result = isEdit
-      ? await updateBookReadingEntry({ entryId: entry!.id, readAt })
-      : await createBookReadingEntry({ volumeId, readAt });
+    const result = await mutateResource({
+      resource: "book-volume",
+      id: volumeId,
+      patch: { isRead: true, progression: 1 },
+      mutate: () => isEdit
+        ? updateBookReadingEntry({ entryId: entry!.id, readAt })
+        : createBookReadingEntry({ volumeId, readAt }),
+      isSuccess: (value) => value.success,
+      getConfirmedPatch: (value) => value.progress ? {
+        isRead: value.progress.isRead,
+        isFavorite: value.progress.isFavorite,
+        progression: value.progress.progression,
+      } : undefined,
+    });
     setIsLoading(false);
 
-    if (result.success) window.location.reload();
+    if (result.success) {
+      window.dispatchEvent(new Event("bunko:challenge-updated"));
+      onClose();
+    }
   };
 
   const handleDelete = async () => {
@@ -65,10 +81,24 @@ export default function BookReadingEntryForm({
     if (!confirmed) return;
 
     setIsLoading(true);
-    const result = await deleteBookReadingEntry({ entryId: entry!.id });
+    const result = await mutateResource({
+      resource: "book-volume",
+      id: volumeId,
+      patch: {},
+      mutate: () => deleteBookReadingEntry({ entryId: entry!.id }),
+      isSuccess: (value) => value.success,
+      getConfirmedPatch: (value) => value.progress ? {
+        isRead: value.progress.isRead,
+        isFavorite: value.progress.isFavorite,
+        progression: value.progress.progression,
+      } : undefined,
+    });
     setIsLoading(false);
 
-    if (result.success) window.location.reload();
+    if (result.success) {
+      window.dispatchEvent(new Event("bunko:challenge-updated"));
+      onClose();
+    }
   };
 
   return (

package/dist/src/components/library/books/BookSeriesFavoriteButton.tsx

@@ -1,10 +1,10 @@
 "use client";
 
 import { useState } from "react";
-import { useRouter } from "next/navigation";
 import { HeartIcon, HeartOffIcon } from "lucide-react";
 import { toggleBookSeriesFavorite } from "@/actions/books-favorites";
 import Button from "@/components/ui/Button";
+import { useResourceMutation, useResourceState } from "@/lib/client/resourceState";
 import type { Dictionary } from "@/lib/types";
 
 interface BookSeriesFavoriteButtonProps {
@@ -14,18 +14,26 @@ interface BookSeriesFavoriteButtonProps {
 }
 
 export default function BookSeriesFavoriteButton({ seriesId, initialFavorite, intl }: BookSeriesFavoriteButtonProps) {
-  const router = useRouter();
-  const [isFavorite, setIsFavorite] = useState(initialFavorite);
   const [isLoading, setIsLoading] = useState(false);
   const books = intl.books as Record<string, string>;
+  const { isFavorite = initialFavorite } = useResourceState(
+    "book-series",
+    seriesId,
+    { isFavorite: initialFavorite },
+  );
+  const mutateResource = useResourceMutation();
 
   const toggleFavorite = async () => {
     setIsLoading(true);
     try {
-      const result = await toggleBookSeriesFavorite({ seriesId, favorite: !isFavorite });
+      const result = await mutateResource({
+        resource: "book-series",
+        id: seriesId,
+        patch: { isFavorite: !isFavorite },
+        mutate: () => toggleBookSeriesFavorite({ seriesId, favorite: !isFavorite }),
+        isSuccess: (value) => value.success,
+      });
       if (result.success) {
-        setIsFavorite((current) => !current);
-        router.refresh();
       }
     } finally {
       setIsLoading(false);

package/dist/src/components/library/books/BookSeriesStatusSelect.tsx

@@ -11,6 +11,11 @@ import {
   type LucideIcon,
 } from "lucide-react";
 import { getBookSeriesStatus, updateBookSeriesStatus } from "@/actions/books-series-status";
+import {
+  publishResourceState,
+  useResourceMutation,
+  useResourceState,
+} from "@/lib/client/resourceState";
 import type { Dictionary } from "@/lib/types";
 
 interface BookSeriesStatusSelectProps {
@@ -39,17 +44,24 @@ export default function BookSeriesStatusSelect({ seriesId, intl }: BookSeriesSta
     { value: "HIATUS", label: books.hiatus, icon: CirclePauseIcon },
     { value: "CANCELLED", label: books.cancelled, icon: CircleXIcon },
   ];
-  const [currentStatus, setCurrentStatus] = useState<string | null>(null);
+  const { status: currentStatus = null } = useResourceState(
+    "book-series",
+    seriesId,
+    { status: null },
+  );
   const [isOpen, setIsOpen] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
   const selectRef = useRef<HTMLDivElement>(null);
+  const mutateResource = useResourceMutation();
   const currentOption = options.find((option) => option.value === currentStatus);
   const CurrentIcon = currentOption?.icon ?? CircleFadingArrowUpIcon;
 
   useEffect(() => {
     let active = true;
     void getBookSeriesStatus({ seriesId }).then((result) => {
-      if (active && !("error" in result)) setCurrentStatus(result.status);
+      if (active && !("error" in result)) {
+        publishResourceState("book-series", seriesId, { status: result.status });
+      }
     });
     return () => { active = false; };
   }, [seriesId]);
@@ -65,9 +77,17 @@ export default function BookSeriesStatusSelect({ seriesId, intl }: BookSeriesSta
   const changeStatus = async (status: string) => {
     setIsLoading(true);
     try {
-      const result = await updateBookSeriesStatus({ seriesId, status });
+      const result = await mutateResource({
+        resource: "book-series",
+        id: seriesId,
+        patch: { status },
+        mutate: () => updateBookSeriesStatus({ seriesId, status }),
+        isSuccess: (value) => !("error" in value),
+        getConfirmedPatch: (value) => (
+          typeof value.status === "string" ? { status: value.status } : undefined
+        ),
+      });
       if (!("error" in result)) {
-        setCurrentStatus(result.status);
         setIsOpen(false);
       }
     } finally {

package/dist/src/components/library/books/BookVolumeContent.tsx

@@ -63,7 +63,7 @@ export default function BookVolumeContent({ volume, lang, intl, readingEntries,
             </div>
           )}
 
-          <BookReaderButton slug={volume.slug} title={volume.metadata.title} layout={volume.metadata.renditionLayout} intl={intl} />
+          <BookReaderButton volumeId={volume.id} slug={volume.slug} title={volume.metadata.title} layout={volume.metadata.renditionLayout} intl={intl} />
 
           <div className="mt-8">
             <BookVolumeRating volumeId={volume.id} initialPersonalRating={personalRating} intl={intl} />

package/dist/src/components/library/books/BookVolumeRating.tsx

@@ -1,8 +1,9 @@
 "use client";
 
-import { useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { MinusIcon, PlusIcon, StarIcon } from "lucide-react";
 import { updateBookRating } from "@/actions/books-rating";
+import { useResourceMutation, useResourceState } from "@/lib/client/resourceState";
 import type { Dictionary } from "@/lib/types";
 
 const MIN_RATING = 0.5;
@@ -16,23 +17,34 @@ interface BookVolumeRatingProps {
 
 export default function BookVolumeRating({ volumeId, initialPersonalRating, intl }: BookVolumeRatingProps) {
   const books = intl.books as Record<string, string>;
-  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(
+    "book-volume",
+    volumeId,
+    { personalRating: initialPersonalRating },
+  );
+  const mutateResource = useResourceMutation();
   const hasRating = personalRating !== null;
 
-  const save = async (rating: number) => {
+  const save = useCallback(async (rating: number) => {
     setIsOpen(false);
     setIsLoading(true);
     try {
-      const result = await updateBookRating({ volumeId, rating });
-      if (result.success) setPersonalRating(rating);
+      const result = await mutateResource({
+        resource: "book-volume",
+        id: volumeId,
+        patch: { personalRating: rating },
+        mutate: () => updateBookRating({ volumeId, rating }),
+        isSuccess: (value) => "success" in value && value.success === true,
+      });
+      if (!result.success) return;
     } finally {
       setIsLoading(false);
     }
-  };
+  }, [mutateResource, volumeId]);
 
   useEffect(() => {
     const close = (event: MouseEvent) => {
@@ -40,7 +52,7 @@ export default function BookVolumeRating({ volumeId, initialPersonalRating, intl
     };
     if (isOpen) document.addEventListener("mousedown", close);
     return () => document.removeEventListener("mousedown", close);
-  }, [draft, isOpen]);
+  }, [draft, isOpen, save]);
 
   const open = () => {
     setDraft(personalRating ?? 5);
@@ -50,8 +62,14 @@ export default function BookVolumeRating({ volumeId, initialPersonalRating, intl
   const remove = async () => {
     setIsLoading(true);
     try {
-      const result = await updateBookRating({ volumeId, rating: null });
-      if (result.success) setPersonalRating(null);
+      const result = await mutateResource({
+        resource: "book-volume",
+        id: volumeId,
+        patch: { personalRating: null },
+        mutate: () => updateBookRating({ volumeId, rating: null }),
+        isSuccess: (value) => "success" in value && value.success === true,
+      });
+      if (!result.success) return;
     } finally {
       setIsLoading(false);
       setIsOpen(false);

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

@@ -5,7 +5,6 @@ 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";
@@ -168,14 +167,11 @@ export default function FiltersDrawer({
 
   return (
     <>
-      <button
+      <Button
+        type="button"
         onClick={() => setIsOpen(true)}
-        className={clsx(
-          "text-sm px-3 py-1 rounded-md cursor-pointer transition-all duration-300",
-          isFiltering
-            ? "bg-lilah text-pearl"
-            : "bg-pearl text-onix hover:bg-lilah hover:text-pearl"
-        )}
+        variant={isFiltering ? "accent" : "light"}
+        size="small"
         aria-label="Abrir filtros"
       >
         {isFiltering ? (
@@ -185,7 +181,7 @@ export default function FiltersDrawer({
         ) : (
           <span className="uppercase">{filters.filter as string}</span>
         )}
-      </button>
+      </Button>
 
       {isOpen && (
         <div

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

@@ -7,6 +7,11 @@ import { toggleSeriesFavorite } from "@/actions/favorites";
 import OfflineDownloadButton from "@/components/pwa/OfflineDownloadButton";
 import Button from "@/components/ui/Button";
 import { enqueueOfflineOperation } from "@/lib/client/offlineLibrary";
+import {
+  publishResourceState,
+  useResourceMutation,
+  useResourceState,
+} from "@/lib/client/resourceState";
 import type { LibrarySection } from "@/lib/librarySection";
 import type { Locale, Dictionary } from "@/lib/types";
 
@@ -29,8 +34,13 @@ export default function ReadButtonsSeries({
   section = "manga",
   userId,
 }: ReadButtonsSeriesProps) {
-  const [isFavorite, setIsFavorite] = useState(initFavorite);
   const [isLoading, setIsLoading] = useState(false);
+  const { isFavorite = initFavorite } = useResourceState(
+    "manga-series",
+    seriesId,
+    { isFavorite: initFavorite },
+  );
+  const mutateResource = useResourceMutation();
 
   const toggleFavorite = async () => {
     setIsLoading(true);
@@ -39,19 +49,20 @@ export default function ReadButtonsSeries({
       if (!navigator.onLine && userId) {
         const favorite = !isFavorite;
         await enqueueOfflineOperation(userId, "series-favorite", { seriesId, favorite });
-        setIsFavorite(favorite);
+        publishResourceState("manga-series", seriesId, { isFavorite: favorite });
         return;
       }
-      const result = await toggleSeriesFavorite({
-        seriesId,
-        favorite: !isFavorite,
+      const result = await mutateResource({
+        resource: "manga-series",
+        id: seriesId,
+        patch: { isFavorite: !isFavorite },
+        mutate: () => toggleSeriesFavorite({ seriesId, 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) {

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();
     }
   };