feat: SPA pour les pages existantes

assets/react/app/App.jsx

@@ -7,6 +7,14 @@ import { ReaderPage } from './presentation/pages/ReaderPage.jsx';
 import { MangaProvider } from './presentation/context/MangaContext.jsx';
 import { ReaderProvider } from './presentation/context/ReaderContext.jsx';
 
+// Placeholder components for new routes
+const PlaceholderPage = ({ title }) => (
+  <div className="container mx-auto px-4 py-8">
+    <h1 className="text-2xl font-bold mb-4">{title}</h1>
+    <p className="text-gray-600">Cette fonctionnalité sera bientôt disponible.</p>
+  </div>
+);
+
 function App() {
   return (
     <MangaProvider>
@@ -17,6 +25,23 @@ function App() {
             <Route path="/manga/:slug" element={<MangaDetailPage />} />
             <Route path="/add" element={<AddMangaPage />} />
             <Route path="/reader/:chapterId" element={<ReaderPage />} />
+            
+            <Route path="/import" element={<PlaceholderPage title="Import de bibliothèque" />} />
+            <Route path="/discover" element={<PlaceholderPage title="Découvrir" />} />
+            <Route path="/convert" element={<PlaceholderPage title="Convertir CBR en CBZ" />} />
+            <Route path="/calendar" element={<PlaceholderPage title="Calendrier" />} />
+            <Route path="/activity" element={<PlaceholderPage title="Activité" />} />
+            
+            <Route path="/settings/general" element={<PlaceholderPage title="Paramètres généraux" />} />
+            <Route path="/settings/folders" element={<PlaceholderPage title="Gestion des dossiers" />} />
+            <Route path="/settings/scrappers" element={<PlaceholderPage title="Configuration des scrappers" />} />
+            <Route path="/settings/ui" element={<PlaceholderPage title="Paramètres de l'interface" />} />
+            
+            <Route path="/system/status" element={<PlaceholderPage title="Status du système" />} />
+            <Route path="/system/backup" element={<PlaceholderPage title="Sauvegarde" />} />
+            <Route path="/system/logs" element={<PlaceholderPage title="Journaux système" />} />
+            <Route path="/system/updates" element={<PlaceholderPage title="Mises à jour" />} />
+            
             <Route path="*" element={<Navigate to="/" replace />} />
           </Routes>
         </BrowserRouter>

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

@@ -1,9 +1,10 @@
 import React from 'react';
+import { Link } from 'react-router-dom';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faBars } from '@fortawesome/free-solid-svg-icons';
 import { SearchBar } from './SearchBar/SearchBar.jsx';
 
-export function Header({ onMenuClick, onMangaClick, onAddMangaClick }) {
+export function Header({ onMenuClick }) {
   return (
     <header className="bg-green-600 h-16 flex items-center fixed w-full z-50">
       <button 
@@ -13,13 +14,10 @@ export function Header({ onMenuClick, onMangaClick, onAddMangaClick }) {
         <FontAwesomeIcon icon={faBars} />
       </button>
       <div className="flex items-center flex-1">
-        <a href="/" className="text-white text-2xl font-bold ml-4">
+        <Link to="/" className="text-white text-2xl font-bold ml-4">
           Mangarr
-        </a>
+        </Link>
-        <SearchBar 
+        <SearchBar />
-          onMangaClick={onMangaClick}
-          onAddMangaClick={onAddMangaClick}
-        />
       </div>
     </header>
   );

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

@@ -1,12 +1,19 @@
 import React from 'react';
+import { useNavigate } from 'react-router-dom';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faStar } from '@fortawesome/free-solid-svg-icons';
 
-export function MangaCard({ manga, onClick }) {
+export function MangaCard({ manga }) {
+  const navigate = useNavigate();
+
+  const handleClick = () => {
+    navigate(`/manga/${manga.slug}`);
+  };
+
   return (
     <div 
       className="bg-white rounded-lg shadow-md overflow-hidden cursor-pointer transition-transform hover:scale-105"
-      onClick={() => onClick?.(manga.slug)}
+      onClick={handleClick}
     >
       <div className="relative h-64">
         <img

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

@@ -1,14 +1,13 @@
 import React from 'react';
 import { MangaCard } from './MangaCard.jsx';
 
-export function MangaGrid({ mangas, onMangaClick }) {
+export function MangaGrid({ mangas }) {
   return (
     <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 p-6">
       {mangas.map((manga) => (
         <MangaCard 
           key={manga.id} 
-          manga={manga} 
+          manga={manga}
-          onClick={onMangaClick}
         />
       ))}
     </div>

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={() => {
+                  onClick={() => handleMangaClick(manga.slug)}
-                    onMangaClick(manga.slug);
-                    setIsOpen(false);
-                    setQuery('');
-                    setHasSearched(false);
-                  }}
                   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={() => {
+                onClick={handleAddMangaClick}
-                  onAddMangaClick(query);
-                  setIsOpen(false);
-                  setQuery('');
-                  setHasSearched(false);
-                }}
                 className="w-full px-4 py-2 flex items-center gap-2 text-green-400 hover:bg-gray-700/50"
               >
                 <FontAwesomeIcon icon={faPlus} />

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

@@ -1,4 +1,5 @@
 import React, { useState } from 'react';
+import { Link } from 'react-router-dom';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { 
   faBook,
@@ -28,24 +29,24 @@ export function Sidebar({ isOpen, onClose, onAddMangaClick }) {
       id: 'mangas',
       subItems: [
         { icon: faPlus, text: 'Ajouter un nouveau', onClick: () => onAddMangaClick() },
-        { icon: faFileImport, text: 'Import bibliothèque', href: '#' },
+        { icon: faFileImport, text: 'Import bibliothèque', to: '/import' },
-        { icon: faCompass, text: 'Découvrir', href: '#' },
+        { icon: faCompass, text: 'Découvrir', to: '/discover' },
       ]
     },
     {
       icon: faExchangeAlt,
       text: 'Convertir CBR en CBZ',
-      href: '#'
+      to: '/convert'
     },
     {
       icon: faCalendar,
       text: 'Calendrier',
-      href: '#'
+      to: '/calendar'
     },
     {
       icon: faClockRotateLeft,
       text: 'Activité',
-      href: '#',
+      to: '/activity',
       badge: '3'
     },
     {
@@ -53,10 +54,10 @@ export function Sidebar({ isOpen, onClose, onAddMangaClick }) {
       text: 'Paramètres',
       id: 'settings',
       subItems: [
-        { text: 'Général', href: '#' },
+        { text: 'Général', to: '/settings/general' },
-        { text: 'Dossiers', href: '#' },
+        { text: 'Dossiers', to: '/settings/folders' },
-        { text: 'Scrappers', href: '#' },
+        { text: 'Scrappers', to: '/settings/scrappers' },
-        { text: 'UI', href: '#' }
+        { text: 'UI', to: '/settings/ui' }
       ]
     },
     {
@@ -64,10 +65,10 @@ export function Sidebar({ isOpen, onClose, onAddMangaClick }) {
       text: 'Système',
       id: 'system',
       subItems: [
-        { text: 'Status', href: '#' },
+        { text: 'Status', to: '/system/status' },
-        { text: 'Backup', href: '#' },
+        { text: 'Backup', to: '/system/backup' },
-        { text: 'Logs', href: '#' },
+        { text: 'Logs', to: '/system/logs' },
-        { text: 'Updates', href: '#' }
+        { text: 'Updates', to: '/system/updates' }
       ]
     },
   ];
@@ -81,65 +82,71 @@ export function Sidebar({ isOpen, onClose, onAddMangaClick }) {
 
   const MenuItem = ({ item }) => {
     const hasSubItems = item.subItems && item.subItems.length > 0;
-    const isExpanded = item.id && expandedMenus[item.id];
+    const isExpanded = item.id ? expandedMenus[item.id] : false;
-    const isActive = false; // À implémenter avec un vrai système de routing
+
-    
+    const handleClick = (e) => {
-    return (
+      if (hasSubItems) {
-      <div className={`border-l-4 ${isActive ? 'border-green-600' : 'border-transparent'}`}>
+        e.preventDefault();
-        <button
+        toggleMenu(item.id);
-          onClick={() => {
+      }
-            if (hasSubItems) {
+    };
-              toggleMenu(item.id);
+
-            } else if (item.onClick) {
+    const renderLink = (linkItem, className) => {
-              item.onClick();
+      if (linkItem.onClick) {
-            } else if (item.href) {
+        return (
-              window.location.href = item.href;
+          <button
-            }
+            onClick={linkItem.onClick}
-          }}
+            className={className}
-          className={`
+          >
-            w-full text-left pl-4 py-2 flex items-center justify-between
+            {linkItem.icon && <FontAwesomeIcon icon={linkItem.icon} className="w-4 h-4 mr-2" />}
-            ${isActive ? 'text-green-600 bg-gray-800' : 'text-white hover:bg-gray-700'}
+            {linkItem.text}
-            transition-colors duration-150
+          </button>
-          `}
+        );
+      }
+      
+      return (
+        <Link
+          to={linkItem.to}
+          className={className}
         >
-          <div className="flex items-center space-x-3">
+          {linkItem.icon && <FontAwesomeIcon icon={linkItem.icon} className="w-4 h-4 mr-2" />}
-            <FontAwesomeIcon icon={item.icon} className="w-5 h-5" />
+          {linkItem.text}
-            <span>{item.text}</span>
+        </Link>
-          </div>
+      );
-          {hasSubItems ? (
+    };
-            <FontAwesomeIcon 
+
-              icon={isExpanded ? faChevronUp : faChevronDown} 
+    return (
-              className="w-4 h-4 mr-4"
+      <div>
-            />
+        {item.to || item.onClick ? (
-          ) : item.badge ? (
+          renderLink(item, "flex items-center px-4 py-2 text-gray-300 hover:text-green-600 transition-colors duration-150")
-            <span className="bg-green-600 text-white text-xs px-2 py-1 rounded mr-4">
+        ) : (
-              {item.badge}
+          <button
+            onClick={handleClick}
+            className="w-full flex items-center justify-between px-4 py-2 text-gray-300 hover:text-green-600 transition-colors duration-150"
+          >
+            <span className="flex items-center">
+              <FontAwesomeIcon icon={item.icon} className="w-4 h-4 mr-2" />
+              {item.text}
             </span>
-          ) : null}
+            {hasSubItems && (
-        </button>
+              <FontAwesomeIcon
-        
+                icon={isExpanded ? faChevronUp : faChevronDown}
+                className="w-3 h-3"
+              />
+            )}
+          </button>
+        )}
+
         {hasSubItems && isExpanded && (
           <div className="ml-8 mt-2 space-y-2">
-            {item.subItems.map((subItem, index) => (
+            {item.subItems.map((subItem, index) => {
-              <a
+              const link = renderLink(
-                key={index}
+                subItem,
-                href={subItem.href}
+                "block py-2 text-gray-300 hover:text-green-600 transition-colors duration-150"
-                onClick={(e) => {
+              );
-                  e.preventDefault();
+              
-                  if (subItem.onClick) {
+              return React.cloneElement(link, { key: `${subItem.text}-${index}` });
-                    subItem.onClick();
+            })}
-                  } else if (subItem.href !== '#') {
-                    window.location.href = subItem.href;
-                  }
-                }}
-                className="block py-2 text-gray-300 hover:text-green-600 transition-colors duration-150"
-              >
-                {subItem.icon && (
-                  <FontAwesomeIcon icon={subItem.icon} className="w-4 h-4 mr-2" />
-                )}
-                {subItem.text}
-              </a>
-            ))}
           </div>
         )}
       </div>

assets/react/app/presentation/components/Toolbar/ToolbarButton.jsx

@@ -1,10 +1,23 @@
 import React from 'react';
+import { useNavigate } from 'react-router-dom';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
-export function ToolbarButton({ icon, label, onClick, active = false }) {
+export function ToolbarButton({ icon, label, onClick, navigateTo, navigateBack = false, active = false }) {
+  const navigate = useNavigate();
+
+  const handleClick = () => {
+    if (navigateBack) {
+      navigate(-1, { replace: true });
+    } else if (navigateTo) {
+      navigate(navigateTo, { replace: true });
+    } else if (onClick) {
+      onClick();
+    }
+  };
+
   return (
     <button
-      onClick={onClick}
+      onClick={handleClick}
       className={`
         flex items-center gap-2 px-4 py-2 rounded-lg transition-colors
         ${active 

assets/react/app/presentation/context/MangaContext.jsx

@@ -1,4 +1,4 @@
-import React, { createContext, useContext, useReducer, useCallback } from 'react';
+import React, { createContext, useContext, useReducer, useCallback, useEffect } from 'react';
 import { ApiMangaRepository } from '../../infrastructure/api/apiMangaRepository';
 import { GetMangaCollection } from '../../application/useCases/getMangaCollection';
 import { GetMangaDetail } from '../../application/useCases/getMangaDetail';
@@ -13,20 +13,48 @@ const initialState = {
   collection: null,
   detailedMangas: {},
   loading: false,
-  error: null
+  error: null,
+  lastCollectionUpdate: null,
+  isBackgroundLoading: false
 };
 
 function mangaReducer(state, action) {
   switch (action.type) {
     case 'SET_LOADING':
       return { ...state, loading: action.payload };
+    case 'SET_BACKGROUND_LOADING':
+      return { ...state, isBackgroundLoading: action.payload };
     case 'SET_ERROR':
       return { ...state, error: action.payload, loading: false };
     case 'SET_COLLECTION':
-      return { ...state, collection: action.payload, loading: false, error: null };
+      return { 
-    case 'SET_MANGA_DETAIL':
+        ...state, 
+        collection: action.payload, 
+        loading: false, 
+        error: null,
+        lastCollectionUpdate: Date.now()
+      };
+    case 'UPDATE_COLLECTION':
       return {
         ...state,
+        collection: action.payload,
+        isBackgroundLoading: false,
+        lastCollectionUpdate: Date.now()
+      };
+    case 'SET_MANGA_DETAIL':
+      // Mettre à jour également le manga dans la collection si présent
+      const updatedCollection = state.collection ? {
+        ...state.collection,
+        items: state.collection.items.map(manga => 
+          manga.slug === action.payload.slug 
+            ? { ...manga, ...action.payload }
+            : manga
+        )
+      } : state.collection;
+
+      return {
+        ...state,
+        collection: updatedCollection,
         detailedMangas: {
           ...state.detailedMangas,
           [action.payload.slug]: action.payload
@@ -42,8 +70,43 @@ function mangaReducer(state, action) {
 export function MangaProvider({ children }) {
   const [state, dispatch] = useReducer(mangaReducer, initialState);
 
+  // Fonction pour charger la collection en arrière-plan
+  const refreshCollectionInBackground = useCallback(async () => {
+    if (state.isBackgroundLoading) return;
+    
+    dispatch({ type: 'SET_BACKGROUND_LOADING', payload: true });
+    try {
+      const collection = await getMangaCollection.execute(1);
+      dispatch({ type: 'UPDATE_COLLECTION', payload: collection });
+    } catch (error) {
+      console.error('Background collection refresh failed:', error);
+      dispatch({ type: 'SET_BACKGROUND_LOADING', payload: false });
+    }
+  }, [state.isBackgroundLoading]);
+
+  // Rafraîchir la collection toutes les 5 minutes si elle est chargée
+  useEffect(() => {
+    if (!state.collection) return;
+
+    const interval = setInterval(() => {
+      refreshCollectionInBackground();
+    }, 5 * 60 * 1000);
+
+    return () => clearInterval(interval);
+  }, [state.collection, refreshCollectionInBackground]);
+
   const loadCollection = useCallback(async () => {
-    if (state.collection) return; // Return if already loaded
+    // Si nous avons déjà des données, les afficher immédiatement
+    if (state.collection) {
+      // Rafraîchir en arrière-plan si les données sont vieilles de plus de 1 minute
+      const isStale = state.lastCollectionUpdate && 
+        (Date.now() - state.lastCollectionUpdate) > 60 * 1000;
+      
+      if (isStale) {
+        refreshCollectionInBackground();
+      }
+      return;
+    }
 
     dispatch({ type: 'SET_LOADING', payload: true });
     try {
@@ -53,23 +116,47 @@ export function MangaProvider({ children }) {
       dispatch({ type: 'SET_ERROR', payload: 'Failed to load manga collection' });
       console.error(error);
     }
-  }, []);
+  }, [state.collection, state.lastCollectionUpdate, refreshCollectionInBackground]);
 
   const loadMangaDetail = useCallback(async (slug) => {
-    // Return cached data if available
+    // Retourner les données en cache si disponibles
-    if (state.detailedMangas[slug]) return state.detailedMangas[slug];
+    if (state.detailedMangas[slug]) {
+      // Rafraîchir en arrière-plan si les données sont vieilles de plus de 5 minutes
+      const cachedManga = state.detailedMangas[slug];
+      const isStale = cachedManga.lastUpdate && 
+        (Date.now() - cachedManga.lastUpdate) > 5 * 60 * 1000;
+      
+      if (isStale) {
+        // Charger les nouvelles données en arrière-plan
+        getMangaDetail.execute(slug).then(manga => {
+          dispatch({ type: 'SET_MANGA_DETAIL', payload: { ...manga, lastUpdate: Date.now() } });
+        }).catch(console.error);
+      }
+      
+      return state.detailedMangas[slug];
+    }
 
+    // Si le manga est dans la collection, l'utiliser comme données temporaires
+    const collectionManga = getMangaFromCollection(slug);
+    if (collectionManga) {
+      dispatch({ 
+        type: 'SET_MANGA_DETAIL', 
+        payload: { ...collectionManga, isPartial: true, lastUpdate: Date.now() } 
+      });
+    }
+
+    // Charger les détails complets
     dispatch({ type: 'SET_LOADING', payload: true });
     try {
       const manga = await getMangaDetail.execute(slug);
-      dispatch({ type: 'SET_MANGA_DETAIL', payload: manga });
+      dispatch({ type: 'SET_MANGA_DETAIL', payload: { ...manga, lastUpdate: Date.now() } });
       return manga;
     } catch (error) {
       dispatch({ type: 'SET_ERROR', payload: 'Failed to load manga details' });
       console.error(error);
       return null;
     }
-  }, []);
+  }, [state.detailedMangas]);
 
   const getMangaFromCollection = useCallback((slug) => {
     if (!state.collection) return null;
@@ -80,7 +167,8 @@ export function MangaProvider({ children }) {
     ...state,
     loadCollection,
     loadMangaDetail,
-    getMangaFromCollection
+    getMangaFromCollection,
+    refreshCollectionInBackground
   };
 
   return (

assets/react/app/presentation/pages/HomePage.jsx

@@ -15,23 +15,31 @@ import {
 
 export function HomePage() {
   const navigate = useNavigate();
-  const { collection, loading, error, loadCollection } = useManga();
+  const { 
+    collection, 
+    loading, 
+    error, 
+    isBackgroundLoading,
+    loadCollection, 
+    refreshCollectionInBackground 
+  } = useManga();
 
   useEffect(() => {
     loadCollection();
   }, [loadCollection]);
 
-  const handleMangaClick = (slug) => {
-    navigate(`/manga/${slug}`);
-  };
-
   const handleAddMangaClick = (query = '') => {
     navigate(`/add${query ? `?q=${encodeURIComponent(query)}` : ''}`);
   };
 
   const toolbarConfig = {
     leftSection: [
-      { icon: faRefresh, label: 'Refresh', onClick: loadCollection },
+      { 
+        icon: faRefresh, 
+        label: 'Refresh', 
+        onClick: refreshCollectionInBackground,
+        active: isBackgroundLoading
+      },
       { icon: faSearch, label: 'Search', onClick: () => {} }
     ],
     rightSection: [
@@ -42,7 +50,7 @@ export function HomePage() {
     ]
   };
 
-  if (loading) {
+  if (loading && !collection) {
     return <div className="flex justify-center items-center h-screen">Loading...</div>;
   }
 
@@ -51,10 +59,15 @@ export function HomePage() {
   }
 
   return (
-    <Layout onMangaClick={handleMangaClick} onAddMangaClick={handleAddMangaClick}>
+    <Layout onAddMangaClick={handleAddMangaClick}>
       <Toolbar {...toolbarConfig} className="sticky top-16 z-10" />
       <div className="container mx-auto px-4">
-        <MangaGrid mangas={collection?.items || []} onMangaClick={handleMangaClick} />
+        <MangaGrid mangas={collection?.items || []} />
+        {isBackgroundLoading && (
+          <div className="fixed bottom-4 right-4 bg-gray-800 text-white px-4 py-2 rounded-lg shadow-lg">
+            Mise à jour en cours...
+          </div>
+        )}
       </div>
     </Layout>
   );

assets/react/app/presentation/pages/MangaDetailPage.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import { useParams, useNavigate } from 'react-router-dom';
 import { Layout } from '../components/Layout/Layout.jsx';
 import { Toolbar } from '../components/Toolbar/Toolbar.jsx';
@@ -25,19 +25,26 @@ export function MangaDetailPage() {
     getMangaFromCollection
   } = useManga();
 
+  const [isLoadingDetails, setIsLoadingDetails] = useState(false);
+
+  // Obtenir les données du manga depuis le cache ou la collection
   const manga = detailedMangas[slug];
   const collectionManga = getMangaFromCollection(slug);
+  const displayManga = manga || collectionManga;
 
   useEffect(() => {
-    // Si on n'a pas les détails du manga, on les charge
+    const loadDetails = async () => {
-    if (!manga) {
+      if (!manga && displayManga) {
-      loadMangaDetail(slug);
+        setIsLoadingDetails(true);
-    }
+        await loadMangaDetail(slug);
-  }, [slug, manga, loadMangaDetail]);
+        setIsLoadingDetails(false);
+      } else if (!manga && !displayManga) {
+        await loadMangaDetail(slug);
+      }
+    };
 
-  const handleMangaClick = (mangaSlug) => {
+    loadDetails();
-    navigate(`/manga/${mangaSlug}`);
+  }, [slug, manga, displayManga, loadMangaDetail]);
-  };
 
   const handleAddMangaClick = (query = '') => {
     navigate(`/add${query ? `?q=${encodeURIComponent(query)}` : ''}`);
@@ -45,8 +52,8 @@ export function MangaDetailPage() {
 
   const toolbarConfig = {
     leftSection: [
-      { icon: faArrowLeft, onClick: () => navigate(-1) },
+      { icon: faArrowLeft, navigateBack: true },
-      { icon: faRefresh, onClick: () => loadMangaDetail(slug) }
+      { icon: faRefresh, onClick: () => {} }
     ],
     rightSection: [
       { icon: faBookmark, onClick: () => {} },
@@ -55,7 +62,7 @@ export function MangaDetailPage() {
     ]
   };
 
-  if (loading) {
+  if (loading && !displayManga) {
     return <div className="flex justify-center items-center h-screen">Loading...</div>;
   }
 
@@ -63,14 +70,12 @@ export function MangaDetailPage() {
     return <div className="text-red-500 text-center p-4">{error}</div>;
   }
 
-  // Utiliser les données de base de la collection pendant le chargement des détails
-  const displayManga = manga || collectionManga;
   if (!displayManga) {
     return <div className="text-center p-4">Manga not found</div>;
   }
 
   return (
-    <Layout onMangaClick={handleMangaClick} onAddMangaClick={handleAddMangaClick}>
+    <Layout onAddMangaClick={handleAddMangaClick}>
       <Toolbar {...toolbarConfig} className="sticky top-16 z-10" />
 
       {/* Hero section with manga info */}
@@ -91,6 +96,11 @@ export function MangaDetailPage() {
               <span className="px-2 py-1 bg-green-500 rounded-full text-sm">
                 {displayManga.status}
               </span>
+              {isLoadingDetails && (
+                <span className="text-sm text-gray-300">
+                  Chargement des détails...
+                </span>
+              )}
             </div>
             
             <div className="flex items-center gap-6 mb-4">
@@ -182,6 +192,14 @@ export function MangaDetailPage() {
           ))}
         </div>
       )}
+
+      {!manga && (
+        <div className="container mx-auto px-4 py-8">
+          <div className="bg-gray-100 rounded-lg p-4 text-gray-600 text-center">
+            Chargement des chapitres...
+          </div>
+        </div>
+      )}
     </Layout>
   );
 }

assets/react/app/presentation/pages/ReaderPage.jsx

@@ -1,6 +1,7 @@
 import React, { useEffect, useState, useCallback } from 'react';
 import { useParams, useNavigate } from 'react-router-dom';
 import { useReader } from '../context/ReaderContext';
+import { Toolbar } from '../components/Toolbar/Toolbar.jsx';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import {
   faArrowLeft,
@@ -104,6 +105,25 @@ export function ReaderPage() {
     }
   };
 
+  const toolbarConfig = {
+    leftSection: [
+      { icon: faArrowLeft, navigateBack: true }
+    ],
+    rightSection: [
+      { 
+        icon: mode === 'classic' ? faScroll : faBookOpen, 
+        onClick: () => setMode(mode === 'classic' ? 'scrolling' : 'classic'),
+        label: `Mode ${mode === 'classic' ? 'défilement' : 'page par page'}`
+      },
+      { 
+        icon: isFullscreen ? faCompress : faExpand, 
+        onClick: toggleFullscreen,
+        label: isFullscreen ? 'Quitter le plein écran' : 'Plein écran'
+      },
+      { icon: faList, onClick: () => {}, label: 'Chapitres' }
+    ]
+  };
+
   if (loading || (!currentPageData && mode === 'classic' && pages.length === 0)) {
     return (
       <div className="flex justify-center items-center h-screen bg-gray-900 text-white">
@@ -135,39 +155,12 @@ export function ReaderPage() {
       <div className="fixed top-0 left-0 right-0 bg-gray-800 z-50">
         <div className="container mx-auto px-4">
           <div className="h-16 flex items-center justify-between">
-            <div className="flex items-center space-x-4">
+            <Toolbar {...toolbarConfig} />
-              <button
+            {context && (
-                onClick={() => navigate(-1)}
+              <div className="text-center flex-1">
-                className="text-gray-300 hover:text-white"
+                <span className="font-medium">Chapitre {context.number}</span>
-              >
+              </div>
-                <FontAwesomeIcon icon={faArrowLeft} />
+            )}
-              </button>
-              {context && (
-                <div>
-                  <span className="font-medium">Manga title</span>
-                  <span className="mx-2">-</span>
-                  <span>Chapter {context.number}</span>
-                </div>
-              )}
-            </div>
-            <div className="flex items-center space-x-4">
-              <button
-                onClick={() => setMode(mode === 'classic' ? 'scrolling' : 'classic')}
-                className="text-gray-300 hover:text-white"
-                title={`Switch to ${mode === 'classic' ? 'scrolling' : 'classic'} mode`}
-              >
-                <FontAwesomeIcon icon={mode === 'classic' ? faScroll : faBookOpen} />
-              </button>
-              <button
-                onClick={toggleFullscreen}
-                className="text-gray-300 hover:text-white"
-              >
-                <FontAwesomeIcon icon={isFullscreen ? faCompress : faExpand} />
-              </button>
-              <button className="text-gray-300 hover:text-white">
-                <FontAwesomeIcon icon={faList} />
-              </button>
-            </div>
           </div>
         </div>
       </div>
@@ -243,4 +236,4 @@ export function ReaderPage() {
       )}
     </div>
   );
-}
+}