From 7523ec06e14ae03a9fd8356255ca4b5742d29f22 Mon Sep 17 00:00:00 2001
From: Julien Froidefond <julienfroidefond@gmail.com>
Date: Sat, 28 Feb 2026 09:38:22 +0100
Subject: [PATCH] fix: optimistic favorites

---
 src/components/layout/Sidebar.tsx      | 34 +++++++++++++++++++++++---
 src/components/series/SeriesHeader.tsx |  6 ++++-
 2 files changed, 36 insertions(+), 4 deletions(-)

diff --git a/src/components/layout/Sidebar.tsx b/src/components/layout/Sidebar.tsx
index 5ec5a49..8bb6b7f 100644
--- a/src/components/layout/Sidebar.tsx
+++ b/src/components/layout/Sidebar.tsx
@@ -85,10 +85,38 @@ export function Sidebar({
     }
   }, [toast]);
 
-  // Mettre à jour les favoris quand ils changent
+  // Mettre à jour les favoris quand ils changent (mise à jour optimiste)
   useEffect(() => {
-    const handleFavoritesChange = () => {
-      refreshFavorites();
+    const handleFavoritesChange = async (event: Event) => {
+      const customEvent = event as CustomEvent<{ seriesId: string; action: "add" | "remove" }>;
+
+      // Si on a les détails de l'action, faire une mise à jour optimiste locale
+      if (customEvent.detail?.seriesId) {
+        const { seriesId, action } = customEvent.detail;
+
+        if (action === "add") {
+          // Fetch les détails de la série ajoutée et l'ajouter au state
+          try {
+            const response = await fetch(`/api/komga/series/${seriesId}`);
+            if (response.ok) {
+              const seriesData = await response.json();
+              setFavorites((prev) => {
+                // Éviter les doublons
+                if (prev.some((s) => s.id === seriesId)) return prev;
+                return [...prev, seriesData];
+              });
+            }
+          } catch (error) {
+            logger.error({ err: error }, "Erreur lors de l'ajout optimiste du favori:");
+          }
+        } else if (action === "remove") {
+          // Retirer la série du state directement
+          setFavorites((prev) => prev.filter((s) => s.id !== seriesId));
+        }
+      } else {
+        // Fallback: refetch complet si pas de détails (ex: événement externe)
+        refreshFavorites();
+      }
     };
 
     window.addEventListener("favoritesChanged", handleFavoritesChange);
diff --git a/src/components/series/SeriesHeader.tsx b/src/components/series/SeriesHeader.tsx
index dd780eb..d7f3e42 100644
--- a/src/components/series/SeriesHeader.tsx
+++ b/src/components/series/SeriesHeader.tsx
@@ -61,7 +61,11 @@ export const SeriesHeader = ({ series, refreshSeries }: SeriesHeaderProps) => {
 
       if (response.ok) {
         setIsFavorite(!isFavorite);
-        window.dispatchEvent(new Event("favoritesChanged"));
+        // Dispatcher l'événement avec le seriesId pour mise à jour optimiste de la sidebar
+        const event = new CustomEvent("favoritesChanged", {
+          detail: { seriesId: series.id, action: isFavorite ? "remove" : "add" },
+        });
+        window.dispatchEvent(event);
         toast({
           title: t(isFavorite ? "series.header.favorite.remove" : "series.header.favorite.add"),
           description: series.metadata.title,