feat: ajout de la fonctionnalité de réinitialisation des résultats de recherche dans le store Manga, mise à jour des routes pour une meilleure structure, et amélioration de l'affichage des mangas dans les composants MangaCard et MangaList avec des liens RouterLink

assets/vue/app/domain/manga/application/store/mangaStore.js

@@ -105,6 +105,12 @@ export const useMangaStore = defineStore('manga', {
             }
         },
 
+        clearSearchResults() {
+            this.searchResults = [];
+            this.searchError = null;
+            this.loadingSearch = false;
+        },
+
         // --- Add Manga Actions ---
         async createFromMangaDex(externalId) {
             if (this.addingManga) return;

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

@@ -1,7 +1,7 @@
 <template>
-    <div
-        class="bg-white rounded-lg shadow-md overflow-hidden cursor-pointer transition-transform hover:scale-105"
-        @click="navigateToDetails">
+    <RouterLink
+        :to="{ name: 'manga-details', params: { id: manga.id } }"
+        class="bg-white rounded-lg shadow-md overflow-hidden cursor-pointer transition-transform hover:scale-105 block">
         <div class="relative pb-[150%]">
             <img
                 :src="manga.thumbnailUrl || 'https://via.placeholder.com/300x400'"
@@ -15,14 +15,10 @@
             </div>
             <div class="mt-1 text-sm text-gray-500"> Added: {{ formatDate(manga.createdAt) }} </div>
         </div>
-    </div>
+    </RouterLink>
 </template>
 
 <script setup>
-    import { useRouter } from 'vue-router';
-
-    const router = useRouter();
-
     const props = defineProps({
         manga: {
             type: Object,
@@ -30,13 +26,6 @@
         }
     });
 
-    const navigateToDetails = () => {
-        router.push({
-            name: 'manga-details',
-            params: { id: props.manga.id }
-        });
-    };
-
     const formatDate = dateString => {
         const date = new Date(dateString);
         return date.toLocaleDateString('en-US', {

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

@@ -19,8 +19,8 @@
                 <p v-if="manga.publicationYear" class="text-sm text-gray-500 dark:text-gray-400 mt-1">{{
                     manga.publicationYear
                 }}</p>
-                <p v-if="manga.description" class="text-sm text-gray-700 dark:text-gray-300 mt-2 line-clamp-3">
-                    {{ manga.description }}
+                <p v-if="manga.description" class="text-sm text-gray-700 dark:text-gray-300 mt-2">
+                    {{ truncateDescription(manga.description) }}
                 </p>
                 <p v-if="manga.createdAt" class="text-sm text-gray-500 dark:text-gray-400 mt-2">
                     Added: {{ formatDate(manga.createdAt) }}
@@ -49,9 +49,14 @@
             return new Date(dateString).toLocaleDateString(undefined, options);
         } catch (e) {
             console.error('Error formatting date:', e);
-            return dateString; // Return original string if formatting fails
+            return dateString;
         }
     };
+
+    const truncateDescription = description => {
+        if (!description) return '';
+        return description.length > 500 ? description.slice(0, 500) + '...' : description;
+    };
 </script>
 
 <style scoped>
@@ -66,4 +71,14 @@
             -webkit-box-orient: vertical;
         }
     }
+
+    .description-truncate {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: -webkit-box;
+        -webkit-line-clamp: 3;
+        line-clamp: 3;
+        -webkit-box-orient: vertical;
+        max-width: 500px;
+    }
 </style>

assets/vue/app/domain/manga/presentation/pages/AddManga.vue

@@ -29,8 +29,10 @@
         </div>
 
         <!-- Résultats de recherche -->
-        <MangaList v-if="searchResults.length > 0" :mangas="searchResults" @manga-click="openMangaModal" />
-        <p v-else-if="!loading && searchQuery" class="text-center text-gray-600">Aucun résultat trouvé</p>
+        <div class="max-w-full overflow-hidden">
+            <MangaList v-if="searchResults.length > 0" :mangas="searchResults" @manga-click="openMangaModal" />
+            <p v-else-if="!loading && searchQuery" class="text-center text-gray-600">Aucun résultat trouvé</p>
+        </div>
 
         <!-- Modal de confirmation -->
         <Dialog :open="isModalOpen" @close="closeModal" class="relative z-50">
@@ -80,7 +82,7 @@
 </template>
 
 <script setup>
-    import { ref, onMounted, computed } from 'vue';
+    import { ref, onMounted, computed, onBeforeUnmount } from 'vue';
     import { useRouter, useRoute } from 'vue-router';
     import { storeToRefs } from 'pinia';
     import { useMangaStore } from '../../application/store/mangaStore';
@@ -115,6 +117,12 @@
         }
     });
 
+    // Nettoyer la recherche et les résultats lors du démontage du composant
+    onBeforeUnmount(() => {
+        searchQuery.value = '';
+        mangaStore.clearSearchResults();
+    });
+
     const performSearch = async () => {
         if (!searchQuery.value.trim()) return;
         try {