feat: SPA pour les pages existantes

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>
   );