feat: ajout de la gestion des chapitres dans le store Manga avec des actions pour charger et mettre à jour la disponibilité des chapitres, intégration d'un écouteur Mercure pour les mises à jour en temps réel, et amélioration des composants d'interface utilisateur pour gérer les états de chargement et d'erreur.

assets/vue/app/domain/manga/presentation/components/MangaChapter.vue

@@ -11,14 +11,13 @@
                     params: {
                         chapterId: chapter.id
                     }
-                }"
-                class="text-green-500">
+                }">
                 {{ chapter.title || 'Sans titre' }}
             </router-link>
             <span v-else>{{ chapter.title || 'Sans titre' }}</span>
         </td>
         <td class="px-4 py-2 flex justify-end gap-2">
-            <button v-if="!chapter.isAvailable" @click="handleSearch" class="text-gray-500 hover:text-green-500">
+            <button v-if="!chapter.isAvailable" @click="handleSearch" :class="buttonClass">
                 <MagnifyingGlassIcon class="h-5 w-5" />
             </button>
             <button v-else @click="handleDelete" class="text-gray-500 hover:text-green-500">
@@ -35,7 +34,8 @@
 </template>
 
 <script setup>
-    import { MagnifyingGlassIcon, ArrowDownTrayIcon, XMarkIcon, TrashIcon } from '@heroicons/vue/24/solid';
+    import { ArrowDownTrayIcon, MagnifyingGlassIcon, TrashIcon, XMarkIcon } from '@heroicons/vue/24/solid';
+    import { computed, ref, watch } from 'vue';
     import { useMangaStore } from '../../application/store/mangaStore';
 
     const props = defineProps({
@@ -50,11 +50,38 @@
     });
 
     const store = useMangaStore();
+    const isLoading = ref(false);
+
+    const buttonClass = computed(() => {
+        return isLoading.value ? 'text-yellow-500 cursor-wait' : 'text-gray-500 hover:text-green-500';
+    });
+
+    // Surveiller les changements d'état du chapitre
+    watch(
+        () => props.chapter.isAvailable,
+        (newValue, oldValue) => {
+            console.log(
+                `MangaChapter: État du chapitre ${props.chapter.number} (ID: ${props.chapter.id}) modifié - ${oldValue} => ${newValue}`
+            );
+
+            // Si le chapitre devient disponible, on arrête le chargement
+            if (newValue === true) {
+                isLoading.value = false;
+            }
+        }
+    );
 
     const handleSearch = async () => {
         try {
+            console.log(`MangaChapter: Recherche du chapitre ${props.chapter.number} (ID: ${props.chapter.id})`);
+            // Montrer l'indicateur de chargement
+            isLoading.value = true;
+
+            // Lancer la recherche du chapitre - L'UI sera mise à jour par l'événement Mercure
             await store.searchChapter(props.chapter.id);
         } catch (error) {
+            // En cas d'erreur, on arrête le chargement
+            isLoading.value = false;
             console.error('Erreur lors de la recherche du chapitre:', error);
         }
     };