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/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>