From fea840aa71f141a7640cd6e6e02f1165aa9a14e5 Mon Sep 17 00:00:00 2001
From: Julien Froidefond <julien.froidefond@cdbdx.biz>
Date: Wed, 19 Feb 2025 17:02:41 +0100
Subject: [PATCH] feat: mark as read

---
 src/components/series/BookGrid.tsx        | 88 +++++++++++++++++------
 src/components/ui/mark-as-read-button.tsx | 65 +++++++++++++++++
 2 files changed, 133 insertions(+), 20 deletions(-)
 create mode 100644 src/components/ui/mark-as-read-button.tsx

diff --git a/src/components/series/BookGrid.tsx b/src/components/series/BookGrid.tsx
index 2914c18..c7ef6df 100644
--- a/src/components/series/BookGrid.tsx
+++ b/src/components/series/BookGrid.tsx
@@ -3,6 +3,8 @@
 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 { useState } from "react";
 
 interface BookGridProps {
   books: KomgaBook[];
@@ -40,7 +42,9 @@ const getReadingStatusInfo = (book: KomgaBook) => {
 };
 
 export function BookGrid({ books, onBookClick }: BookGridProps) {
-  if (!books.length) {
+  const [localBooks, setLocalBooks] = useState(books);
+
+  if (!localBooks.length) {
     return (
       <div className="text-center p-8">
         <p className="text-muted-foreground">Aucun tome disponible</p>
@@ -48,33 +52,77 @@ export function BookGrid({ books, onBookClick }: BookGridProps) {
     );
   }
 
+  const handleMarkAsRead = (bookId: string) => {
+    setLocalBooks((prevBooks) =>
+      prevBooks.map((book) =>
+        book.id === bookId
+          ? {
+              ...book,
+              readProgress: {
+                ...(book.readProgress || {}),
+                completed: true,
+                readDate: new Date().toISOString(),
+                page: book.media.pagesCount,
+                created: book.readProgress?.created || new Date().toISOString(),
+                lastModified: new Date().toISOString(),
+              },
+            }
+          : book
+      )
+    );
+  };
+
   return (
     <div className="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6">
-      {books.map((book) => {
+      {localBooks.map((book) => {
         const statusInfo = getReadingStatusInfo(book);
+        const isRead = book.readProgress?.completed || false;
+
         return (
-          <button
+          <div
             key={book.id}
-            onClick={() => onBookClick(book)}
-            className="group relative aspect-[2/3] overflow-hidden rounded-lg bg-muted hover:opacity-100 transition-all"
+            className="group relative aspect-[2/3] overflow-hidden rounded-lg bg-muted"
           >
-            <Cover
-              type="book"
-              id={book.id}
-              alt={`Couverture de ${book.metadata.title || `Tome ${book.metadata.number}`}`}
-              isCompleted={book.readProgress?.completed}
-            />
-            <div className="absolute inset-x-0 bottom-0 bg-gradient-to-t from-black/60 to-transparent p-4 space-y-2 translate-y-full group-hover:translate-y-0 transition-transform duration-200">
-              <p className="text-sm font-medium text-white text-left line-clamp-2">
-                {book.metadata.title || `Tome ${book.metadata.number}`}
-              </p>
-              <div className="flex items-center gap-2">
-                <span className={`px-2 py-0.5 rounded-full text-xs ${statusInfo.className}`}>
-                  {statusInfo.label}
-                </span>
+            <button
+              onClick={() => onBookClick(book)}
+              className="w-full h-full hover:opacity-100 transition-all"
+            >
+              <Cover
+                type="book"
+                id={book.id}
+                alt={`Couverture de ${book.metadata.title || `Tome ${book.metadata.number}`}`}
+                isCompleted={isRead}
+              />
+            </button>
+
+            {/* Overlay avec les contrôles */}
+            <div className="absolute inset-0 pointer-events-none">
+              {/* Bouton Marquer comme lu en haut à droite avec un petit décalage */}
+              {!isRead && (
+                <div className="absolute top-2 right-2 pointer-events-auto">
+                  <MarkAsReadButton
+                    bookId={book.id}
+                    pagesCount={book.media.pagesCount}
+                    isRead={isRead}
+                    onSuccess={() => handleMarkAsRead(book.id)}
+                    className="bg-white/90 hover:bg-white text-black shadow-sm"
+                  />
+                </div>
+              )}
+
+              {/* Informations en bas - visible au survol uniquement */}
+              <div className="absolute inset-x-0 bottom-0 bg-gradient-to-t from-black/60 to-transparent p-4 space-y-2 translate-y-full group-hover:translate-y-0 transition-transform duration-200">
+                <p className="text-sm font-medium text-white text-left line-clamp-2">
+                  {book.metadata.title || `Tome ${book.metadata.number}`}
+                </p>
+                <div className="flex items-center gap-2">
+                  <span className={`px-2 py-0.5 rounded-full text-xs ${statusInfo.className}`}>
+                    {statusInfo.label}
+                  </span>
+                </div>
               </div>
             </div>
-          </button>
+          </div>
         );
       })}
     </div>
diff --git a/src/components/ui/mark-as-read-button.tsx b/src/components/ui/mark-as-read-button.tsx
new file mode 100644
index 0000000..ae2d904
--- /dev/null
+++ b/src/components/ui/mark-as-read-button.tsx
@@ -0,0 +1,65 @@
+"use client";
+
+import { CheckCircle2 } from "lucide-react";
+import { Button } from "./button";
+import { useToast } from "./use-toast";
+
+interface MarkAsReadButtonProps {
+  bookId: string;
+  pagesCount: number;
+  isRead?: boolean;
+  onSuccess?: () => void;
+  className?: string;
+}
+
+export function MarkAsReadButton({
+  bookId,
+  pagesCount,
+  isRead = false,
+  onSuccess,
+  className,
+}: MarkAsReadButtonProps) {
+  const { toast } = useToast();
+
+  const handleMarkAsRead = async (e: React.MouseEvent) => {
+    e.stopPropagation(); // Empêcher la propagation au parent
+    try {
+      const response = await fetch(`/api/komga/books/${bookId}/read-progress`, {
+        method: "PATCH",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({ page: pagesCount, completed: true }),
+      });
+
+      if (!response.ok) {
+        throw new Error("Erreur lors de la mise à jour");
+      }
+
+      toast({
+        title: "Succès",
+        description: "Le tome a été marqué comme lu",
+      });
+      onSuccess?.();
+    } catch (error) {
+      toast({
+        title: "Erreur",
+        description: "Impossible de marquer le tome comme lu",
+        variant: "destructive",
+      });
+    }
+  };
+
+  return (
+    <Button
+      variant="ghost"
+      size="icon"
+      onClick={handleMarkAsRead}
+      className={`h-8 w-8 p-0 rounded-br-lg rounded-tl-lg ${className}`}
+      disabled={isRead}
+      aria-label="Marquer comme lu"
+    >
+      <CheckCircle2 className="h-5 w-5" />
+    </Button>
+  );
+}