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/shared/components/layout/SearchBar.vue

@@ -1,133 +1,122 @@
 <template>
-  <div ref="searchRef" class="relative flex-1 max-w-xl mx-4">
-    <div class="flex items-center py-1">
-      <MagnifyingGlassIcon class="h-5 w-5 text-white" />
-      <input
-        type="text"
-        v-model="query"
-        @input="handleInput"
-        @focus="isOpen = true"
-        placeholder="Rechercher"
-        class="appearance-none outline-none ml-2 pl-0 bg-transparent border-b border-white w-full placeholder:text-white text-white py-1 px-2 leading-tight transition-all duration-500 ease-in-out focus:placeholder:text-opacity-0 focus:border-opacity-0"
-      />
-    </div>
-
-    <div v-if="isOpen && query.trim()" class="absolute w-full mt-2 bg-gray-800/95 backdrop-blur-sm rounded-lg shadow-lg border border-gray-700 max-h-96 overflow-y-auto z-50">
-      <div v-if="loading" class="p-4 text-center text-gray-400">
-        Chargement...
-      </div>
-
-      <template v-else-if="results.length > 0">
-        <div class="py-2">
-          <h3 class="px-4 py-2 text-sm font-semibold text-gray-400">
-            Mangas existants
-          </h3>
-          <button
-            v-for="manga in results"
-            :key="manga.id"
-            @click="handleMangaClick(manga.id)"
-            class="w-full px-4 py-2 flex items-center gap-3 hover:bg-gray-700/50 text-white"
-          >
-            <img
-              :src="manga.thumbnailUrl"
-              :alt="manga.title"
-              class="w-10 h-14 object-cover rounded"
-            />
-            <div class="text-left">
-              <div class="font-medium">{{ manga.title }}</div>
-              <div class="text-sm text-gray-400">{{ manga.author }} ({{ manga.publicationYear }})</div>
-            </div>
-          </button>
+    <div ref="searchRef" class="relative flex-1 max-w-xl mx-4">
+        <div class="flex items-center py-1">
+            <MagnifyingGlassIcon class="h-5 w-5 text-white" />
+            <input
+                type="text"
+                v-model="query"
+                @input="handleInput"
+                @focus="isOpen = true"
+                placeholder="Rechercher"
+                class="appearance-none outline-none ml-2 pl-0 bg-transparent border-b border-white w-full placeholder:text-white text-white py-1 px-2 leading-tight transition-all duration-500 ease-in-out focus:placeholder:text-opacity-0 focus:border-opacity-0" />
         </div>
-      </template>
 
-      <template v-else-if="hasSearched">
-        <div class="py-2">
-          <button
-            @click="handleAddMangaClick"
-            class="w-full px-4 py-2 flex items-center gap-2 text-green-400 hover:bg-gray-700/50"
-          >
-            <PlusIcon class="h-5 w-5" />
-            <span>Ajouter "{{ query }}"</span>
-          </button>
+        <div
+            v-if="isOpen && query.trim()"
+            class="absolute w-full mt-2 bg-gray-800/95 backdrop-blur-sm rounded-lg shadow-lg border border-gray-700 max-h-96 overflow-y-auto z-50">
+            <div v-if="loading" class="p-4 text-center text-gray-400"> Chargement... </div>
+
+            <template v-else-if="results.length > 0">
+                <div class="py-2">
+                    <h3 class="px-4 py-2 text-sm font-semibold text-gray-400"> Mangas existants </h3>
+                    <RouterLink
+                        v-for="manga in results"
+                        :key="manga.id"
+                        :to="{ name: 'manga-details', params: { id: manga.id } }"
+                        @click="
+                            () => {
+                                isOpen = false;
+                                query = '';
+                                hasSearched = false;
+                            }
+                        "
+                        class="w-full px-4 py-2 flex items-center gap-3 hover:bg-gray-700/50 text-white">
+                        <img :src="manga.thumbnailUrl" :alt="manga.title" class="w-10 h-14 object-cover rounded" />
+                        <div class="text-left">
+                            <div class="font-medium">{{ manga.title }}</div>
+                            <div class="text-sm text-gray-400">{{ manga.author }} ({{ manga.publicationYear }})</div>
+                        </div>
+                    </RouterLink>
+                </div>
+            </template>
+
+            <template v-else-if="hasSearched">
+                <div class="py-2">
+                    <RouterLink
+                        :to="{ name: 'add-manga', query: query ? { q: query } : undefined }"
+                        @click="
+                            () => {
+                                isOpen = false;
+                                query = '';
+                                hasSearched = false;
+                            }
+                        "
+                        class="w-full px-4 py-2 flex items-center gap-2 text-green-400 hover:bg-gray-700/50">
+                        <PlusIcon class="h-5 w-5" />
+                        <span>Ajouter "{{ query }}"</span>
+                    </RouterLink>
+                </div>
+            </template>
         </div>
-      </template>
     </div>
-  </div>
 </template>
 
 <script setup>
-import { ref, onMounted, onUnmounted } from 'vue';
-import { useRouter } from 'vue-router';
-import { MagnifyingGlassIcon, PlusIcon } from '@heroicons/vue/24/outline';
-import {ApiMangaRepository} from "../../../domain/manga/infrastructure/api/apiMangaRepository";
-import {SearchMangas} from "../../../domain/manga/application/queries/searchMangas";
+    import { ref, onMounted, onUnmounted } from 'vue';
+    import { MagnifyingGlassIcon, PlusIcon } from '@heroicons/vue/24/outline';
+    import { ApiMangaRepository } from '../../../domain/manga/infrastructure/api/apiMangaRepository';
+    import { SearchMangas } from '../../../domain/manga/application/queries/searchMangas';
 
-const mangaRepository = new ApiMangaRepository();
-const searchMangas = new SearchMangas(mangaRepository);
+    const mangaRepository = new ApiMangaRepository();
+    const searchMangas = new SearchMangas(mangaRepository);
 
-const router = useRouter();
-const searchRef = ref(null);
-const query = ref('');
-const results = ref([]);
-const isOpen = ref(false);
-const loading = ref(false);
-const hasSearched = ref(false);
+    const searchRef = ref(null);
+    const query = ref('');
+    const results = ref([]);
+    const isOpen = ref(false);
+    const loading = ref(false);
+    const hasSearched = ref(false);
 
-let searchTimeout;
+    let searchTimeout;
 
-const handleInput = () => {
-  clearTimeout(searchTimeout);
-  searchTimeout = setTimeout(searchManga, 300);
-};
+    const handleInput = () => {
+        clearTimeout(searchTimeout);
+        searchTimeout = setTimeout(searchManga, 300);
+    };
 
-const searchManga = async () => {
-  if (!query.value.trim()) {
-    results.value = [];
-    hasSearched.value = false;
-    return;
-  }
+    const searchManga = async () => {
+        if (!query.value.trim()) {
+            results.value = [];
+            hasSearched.value = false;
+            return;
+        }
 
-  loading.value = true;
-  try {
-    const response = await searchMangas.execute(query.value);
-    results.value = Array.isArray(response) ? response : response.items || [];
-    hasSearched.value = true;
-    console.log('Résultats de recherche:', results.value);
-  } catch (error) {
-    console.error('Search error:', error);
-    results.value = [];
-  } finally {
-    loading.value = false;
-  }
-};
+        loading.value = true;
+        try {
+            const response = await searchMangas.execute(query.value);
+            results.value = Array.isArray(response) ? response : response.items || [];
+            hasSearched.value = true;
+            console.log('Résultats de recherche:', results.value);
+        } catch (error) {
+            console.error('Search error:', error);
+            results.value = [];
+        } finally {
+            loading.value = false;
+        }
+    };
 
-const handleMangaClick = (id) => {
-  router.push(`/manga/${id}`);
-  isOpen.value = false;
-  query.value = '';
-  hasSearched.value = false;
-};
+    const handleClickOutside = event => {
+        if (searchRef.value && !searchRef.value.contains(event.target)) {
+            isOpen.value = false;
+        }
+    };
 
-const handleAddMangaClick = () => {
-  router.push(`/add${query.value ? `?q=${encodeURIComponent(query.value)}` : ''}`);
-  isOpen.value = false;
-  query.value = '';
-  hasSearched.value = false;
-};
+    onMounted(() => {
+        document.addEventListener('mousedown', handleClickOutside);
+    });
 
-const handleClickOutside = (event) => {
-  if (searchRef.value && !searchRef.value.contains(event.target)) {
-    isOpen.value = false;
-  }
-};
-
-onMounted(() => {
-  document.addEventListener('mousedown', handleClickOutside);
-});
-
-onUnmounted(() => {
-  document.removeEventListener('mousedown', handleClickOutside);
-  clearTimeout(searchTimeout);
-});
+    onUnmounted(() => {
+        document.removeEventListener('mousedown', handleClickOutside);
+        clearTimeout(searchTimeout);
+    });
 </script>

assets/vue/app/shared/components/layout/Sidebar.vue

@@ -49,13 +49,13 @@
             to: '/manga',
             id: 'manga',
             subItems: [
-                { icon: PlusIcon.render, text: 'Ajouter un nouveau', to: '/add' },
+                { icon: PlusIcon.render, text: 'Ajouter un nouveau', to: '/manga/add' },
                 {
                     icon: ArrowDownTrayIcon,
                     text: 'Import bibliothèque',
-                    to: '/import'
+                    to: '/manga/import'
                 },
-                { icon: GlobeAltIcon, text: 'Découvrir', to: '/discover' }
+                { icon: GlobeAltIcon, text: 'Découvrir', to: '/manga/discover' }
             ]
         },
         {