feat: SPA pour les pages existantes

assets/react/app/presentation/components/SearchBar/SearchBar.jsx

@@ -1,4 +1,5 @@
 import React, { useState, useRef, useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faSearch, faPlus } from '@fortawesome/free-solid-svg-icons';
 import { ApiMangaRepository } from '../../../infrastructure/api/apiMangaRepository.js';
@@ -7,7 +8,8 @@ import { SearchMangas } from '../../../application/useCases/searchMangas.js';
 const mangaRepository = new ApiMangaRepository();
 const searchMangas = new SearchMangas(mangaRepository);
 
-export function SearchBar({ onMangaClick, onAddMangaClick }) {
+export function SearchBar() {
+  const navigate = useNavigate();
   const [query, setQuery] = useState('');
   const [results, setResults] = useState([]);
   const [isOpen, setIsOpen] = useState(false);
@@ -50,6 +52,20 @@ export function SearchBar({ onMangaClick, onAddMangaClick }) {
     return () => clearTimeout(timeoutId);
   }, [query]);
 
+  const handleMangaClick = (slug) => {
+    navigate(`/manga/${slug}`);
+    setIsOpen(false);
+    setQuery('');
+    setHasSearched(false);
+  };
+
+  const handleAddMangaClick = () => {
+    navigate(`/add${query ? `?q=${encodeURIComponent(query)}` : ''}`);
+    setIsOpen(false);
+    setQuery('');
+    setHasSearched(false);
+  };
+
   return (
     <div ref={searchRef} className="relative flex-1 max-w-xl mx-4">
       <div className="flex items-center py-1">
@@ -82,12 +98,7 @@ export function SearchBar({ onMangaClick, onAddMangaClick }) {
               {results.map((manga) => (
                 <button
                   key={manga.id}
-                  onClick={() => {
-                    onMangaClick(manga.slug);
-                    setIsOpen(false);
-                    setQuery('');
-                    setHasSearched(false);
-                  }}
+                  onClick={() => handleMangaClick(manga.slug)}
                   className="w-full px-4 py-2 flex items-center gap-3 hover:bg-gray-700/50 text-white"
                 >
                   <img
@@ -105,12 +116,7 @@ export function SearchBar({ onMangaClick, onAddMangaClick }) {
           ) : hasSearched && (
             <div className="py-2">
               <button
-                onClick={() => {
-                  onAddMangaClick(query);
-                  setIsOpen(false);
-                  setQuery('');
-                  setHasSearched(false);
-                }}
+                onClick={handleAddMangaClick}
                 className="w-full px-4 py-2 flex items-center gap-2 text-green-400 hover:bg-gray-700/50"
               >
                 <FontAwesomeIcon icon={faPlus} />