From f04202a4ee8d0a7e4f95644d67861b38b0111362 Mon Sep 17 00:00:00 2001
From: Julien Froidefond <julien.froidefond@cdbdx.biz>
Date: Sat, 22 Feb 2025 17:05:13 +0100
Subject: [PATCH] feat(series): mark as unread

---
 .../books/[bookId]/read-progress/route.ts     | 12 ++++
 src/components/series/BookGrid.tsx            | 22 +++++++
 src/components/ui/mark-as-unread-button.tsx   | 60 +++++++++++++++++++
 3 files changed, 94 insertions(+)
 create mode 100644 src/components/ui/mark-as-unread-button.tsx

diff --git a/src/app/api/komga/books/[bookId]/read-progress/route.ts b/src/app/api/komga/books/[bookId]/read-progress/route.ts
index da50fc3..bc8285d 100644
--- a/src/app/api/komga/books/[bookId]/read-progress/route.ts
+++ b/src/app/api/komga/books/[bookId]/read-progress/route.ts
@@ -22,3 +22,15 @@ export async function PATCH(request: Request, { params }: { params: { bookId: st
     );
   }
 }
+export async function DELETE(request: Request, { params }: { params: { bookId: string } }) {
+  try {
+    await BookService.updateReadProgress(params.bookId, 1, false);
+    return NextResponse.json({ message: "Progression supprimée avec succès" });
+  } catch (error) {
+    console.error("API Delete Read Progress - Erreur:", error);
+    return NextResponse.json(
+      { error: "Erreur lors de la suppression de la progression" },
+      { status: 500 }
+    );
+  }
+}
diff --git a/src/components/series/BookGrid.tsx b/src/components/series/BookGrid.tsx
index 5180618..a039b0a 100644
--- a/src/components/series/BookGrid.tsx
+++ b/src/components/series/BookGrid.tsx
@@ -4,6 +4,7 @@ import { KomgaBook } from "@/types/komga";
 import { formatDate } from "@/lib/utils";
 import { Cover } from "@/components/ui/cover";
 import { MarkAsReadButton } from "@/components/ui/mark-as-read-button";
+import { MarkAsUnreadButton } from "@/components/ui/mark-as-unread-button";
 import { BookOfflineButton } from "@/components/ui/book-offline-button";
 import { useState, useEffect } from "react";
 
@@ -78,6 +79,19 @@ export function BookGrid({ books, onBookClick }: BookGridProps) {
     );
   };
 
+  const handleMarkAsUnread = (bookId: string) => {
+    setLocalBooks((prevBooks) =>
+      prevBooks.map((book) =>
+        book.id === bookId
+          ? {
+              ...book,
+              readProgress: null,
+            }
+          : book
+      )
+    );
+  };
+
   return (
     <div className="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6">
       {localBooks.map((book) => {
@@ -114,6 +128,14 @@ export function BookGrid({ books, onBookClick }: BookGridProps) {
                     className="bg-white/90 hover:bg-white text-black shadow-sm"
                   />
                 )}
+                {isRead && (
+                  <MarkAsUnreadButton
+                    bookId={book.id}
+                    isRead={isRead}
+                    onSuccess={() => handleMarkAsUnread(book.id)}
+                    className="bg-white/90 hover:bg-white text-black shadow-sm"
+                  />
+                )}
                 <BookOfflineButton
                   book={book}
                   className="bg-white/90 hover:bg-white text-black shadow-sm"
diff --git a/src/components/ui/mark-as-unread-button.tsx b/src/components/ui/mark-as-unread-button.tsx
new file mode 100644
index 0000000..606a837
--- /dev/null
+++ b/src/components/ui/mark-as-unread-button.tsx
@@ -0,0 +1,60 @@
+"use client";
+
+import { XCircle } from "lucide-react";
+import { Button } from "./button";
+import { useToast } from "./use-toast";
+
+interface MarkAsUnreadButtonProps {
+  bookId: string;
+  isRead: boolean;
+  onSuccess?: () => void;
+  className?: string;
+}
+
+export function MarkAsUnreadButton({
+  bookId,
+  isRead = false,
+  onSuccess,
+  className,
+}: MarkAsUnreadButtonProps) {
+  const { toast } = useToast();
+
+  const handleMarkAsUnread = async (e: React.MouseEvent) => {
+    e.stopPropagation(); // Empêcher la propagation au parent
+    try {
+      const response = await fetch(`/api/komga/books/${bookId}/read-progress`, {
+        method: "DELETE",
+      });
+
+      if (!response.ok) {
+        throw new Error("Erreur lors de la mise à jour");
+      }
+
+      toast({
+        title: "Succès",
+        description: "Le tome a été marqué comme non lu",
+      });
+      onSuccess?.();
+    } catch (error) {
+      console.error("Erreur lors de la mise à jour du progresseur de lecture:", error);
+      toast({
+        title: "Erreur",
+        description: "Impossible de marquer le tome comme non lu",
+        variant: "destructive",
+      });
+    }
+  };
+
+  return (
+    <Button
+      variant="ghost"
+      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" />
+    </Button>
+  );
+}