feat: local store read progress for later sync

src/components/ui/cover.tsx

@@ -44,7 +44,7 @@ export function Cover(props: CoverProps) {
   } = props;
 
   const imageUrl = getImageUrl(type, id);
-  
+
   const showProgress = () => {
     if (type === "book") {
       const { currentPage, totalPages } = props;
@@ -52,7 +52,7 @@ export function Cover(props: CoverProps) {
         <ProgressBar progress={currentPage} total={totalPages} type="book" />
       ) : null;
     }
-    
+
     if (type === "series") {
       const { readBooks, totalBooks } = props;
       return readBooks && totalBooks && readBooks > 0 && !isCompleted ? (

src/components/ui/mark-as-read-button.tsx

@@ -1,8 +1,9 @@
 "use client";
 
-import { CheckCircle2 } from "lucide-react";
+import { BookCheck } from "lucide-react";
 import { Button } from "./button";
 import { useToast } from "./use-toast";
+import { ClientOfflineBookService } from "@/lib/services/client-offlinebook.service";
 
 interface MarkAsReadButtonProps {
   bookId: string;
@@ -24,6 +25,7 @@ export function MarkAsReadButton({
   const handleMarkAsRead = async (e: React.MouseEvent) => {
     e.stopPropagation(); // Empêcher la propagation au parent
     try {
+      ClientOfflineBookService.removeCurrentPageById(bookId);
       const response = await fetch(`/api/komga/books/${bookId}/read-progress`, {
         method: "PATCH",
         headers: {
@@ -60,7 +62,7 @@ export function MarkAsReadButton({
       disabled={isRead}
       aria-label="Marquer comme lu"
     >
-      <CheckCircle2 className="h-5 w-5" />
+      <BookCheck className="h-5 w-5" />
     </Button>
   );
 }

src/components/ui/mark-as-unread-button.tsx

@@ -1,27 +1,22 @@
 "use client";
 
-import { XCircle } from "lucide-react";
+import { BookX } from "lucide-react";
 import { Button } from "./button";
 import { useToast } from "./use-toast";
-
+import { ClientOfflineBookService } from "@/lib/services/client-offlinebook.service";
 interface MarkAsUnreadButtonProps {
   bookId: string;
-  isRead: boolean;
   onSuccess?: () => void;
   className?: string;
 }
 
-export function MarkAsUnreadButton({
-  bookId,
-  isRead = false,
-  onSuccess,
-  className,
-}: MarkAsUnreadButtonProps) {
+export function MarkAsUnreadButton({ bookId, onSuccess, className }: MarkAsUnreadButtonProps) {
   const { toast } = useToast();
 
   const handleMarkAsUnread = async (e: React.MouseEvent) => {
     e.stopPropagation(); // Empêcher la propagation au parent
     try {
+      ClientOfflineBookService.removeCurrentPageById(bookId);
       const response = await fetch(`/api/komga/books/${bookId}/read-progress`, {
         method: "DELETE",
       });
@@ -51,10 +46,9 @@ export function MarkAsUnreadButton({
       size="icon"
       onClick={handleMarkAsUnread}
       className={`h-8 w-8 p-0 rounded-br-lg rounded-tl-lg ${className}`}
-      disabled={!isRead}
       aria-label="Marquer comme non lu"
     >
-      <XCircle className="h-5 w-5" />
+      <BookX className="h-5 w-5" />
     </Button>
   );
 }