From fcfbf140a301c62f0c1908f719351dac5151ce4f Mon Sep 17 00:00:00 2001
From: "ext.jeremy.guillot@maxicoffee.domains" <j.guillot_ext@maxicoffee.com>
Date: Tue, 1 Apr 2025 16:19:14 +0200
Subject: [PATCH] =?UTF-8?q?feat:=20am=C3=A9lioration=20de=20la=20gestion?=
 =?UTF-8?q?=20des=20erreurs=20et=20des=20=C3=A9tats=20de=20chargement=20da?=
 =?UTF-8?q?ns=20le=20composant=20MangaDetails,=20ajout=20de=20sections=20p?=
 =?UTF-8?q?our=20les=20volumes=20et=20mise=20=C3=A0=20jour=20des=20conditi?=
 =?UTF-8?q?ons=20d'affichage=20pour=20une=20meilleure=20exp=C3=A9rience=20?=
 =?UTF-8?q?utilisateur.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../manga/presentation/pages/MangaDetails.vue | 26 +++++++++++++------
 1 file changed, 18 insertions(+), 8 deletions(-)

diff --git a/assets/vue/app/domain/manga/presentation/pages/MangaDetails.vue b/assets/vue/app/domain/manga/presentation/pages/MangaDetails.vue
index 861b7d6..b2b32e0 100644
--- a/assets/vue/app/domain/manga/presentation/pages/MangaDetails.vue
+++ b/assets/vue/app/domain/manga/presentation/pages/MangaDetails.vue
@@ -1,18 +1,28 @@
 <template>
-    <div v-if="loading" class="flex justify-center items-center h-64">
-        <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-primary"></div>
-    </div>
-
-    <div v-else-if="error && !currentManga" class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded">
-        {{ error.message || 'Une erreur est survenue.' }}
+    <div v-if="errorDetails" class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded">
+        {{ errorDetails.message || 'Une erreur est survenue lors du chargement des détails.' }}
     </div>
 
     <div v-else-if="currentManga" class="relative">
-        <div v-if="isRefreshing" class="absolute top-2 right-2 text-gray-500">
+        <div v-if="isRefreshingDetails" class="absolute top-2 right-2 text-gray-500">
             <ArrowPathIcon class="h-5 w-5 animate-spin" />
         </div>
         <MangaHeader :manga="currentManga" />
-        <MangaVolumeList :volumes="volumes" :manga-slug="currentManga.slug" />
+
+        <!-- Section Volumes -->
+        <div class="mt-8">
+            <div v-if="isLoadingVolumes" class="flex justify-center items-center h-32">
+                <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
+            </div>
+            <div v-else-if="errorVolumes" class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded">
+                {{ errorVolumes.message || 'Une erreur est survenue lors du chargement des volumes.' }}
+            </div>
+            <MangaVolumeList v-else :volumes="volumes" :manga-slug="currentManga.slug" />
+        </div>
+    </div>
+
+    <div v-else-if="isLoadingDetails" class="flex justify-center items-center h-64">
+        <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-primary"></div>
     </div>
 
     <div v-else class="text-center text-gray-500 py-10"> Aucun manga sélectionné ou trouvé. </div>