feat: Ajout de React pour le front, début de refonte du front

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

@@ -0,0 +1,26 @@
+import React from 'react';
+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 }) {
+  return (
+    <header className="bg-green-600 h-16 flex items-center fixed w-full z-50">
+      <button 
+        onClick={onMenuClick}
+        className="ml-4 text-white p-2 md:hidden"
+      >
+        <FontAwesomeIcon icon={faBars} />
+      </button>
+      <div className="flex items-center flex-1">
+        <a href="/" className="text-white text-2xl font-bold ml-4">
+          Mangarr
+        </a>
+        <SearchBar 
+          onMangaClick={onMangaClick}
+          onAddMangaClick={onAddMangaClick}
+        />
+      </div>
+    </header>
+  );
+}

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

@@ -0,0 +1,26 @@
+import React, { useState } from 'react';
+import { Header } from '../Header';
+import { Sidebar } from '../Sidebar';
+
+export function Layout({ children, onMangaClick, onAddMangaClick }) {
+  const [isSidebarOpen, setIsSidebarOpen] = useState(false);
+
+  return (
+    <div className="min-h-screen bg-gray-50">
+      <Header 
+        onMenuClick={() => setIsSidebarOpen(!isSidebarOpen)} 
+        onMangaClick={onMangaClick}
+        onAddMangaClick={onAddMangaClick}
+      />
+      <Sidebar 
+        isOpen={isSidebarOpen} 
+        onClose={() => setIsSidebarOpen(false)}
+        onAddMangaClick={onAddMangaClick}
+      />
+      
+      <main className="pt-16 md:ml-60">
+        {children}
+      </main>
+    </div>
+  );
+}

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

@@ -0,0 +1,43 @@
+import React from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faStar } from '@fortawesome/free-solid-svg-icons';
+
+export function MangaCard({ manga, onClick }) {
+  return (
+    <div 
+      className="bg-white rounded-lg shadow-md overflow-hidden cursor-pointer transition-transform hover:scale-105"
+      onClick={() => onClick?.(manga.slug)}
+    >
+      <div className="relative h-64">
+        <img
+          src={manga.imageUrl || 'https://via.placeholder.com/300x400'}
+          alt={manga.title}
+          className="w-full h-full object-cover"
+        />
+      </div>
+      <div className="p-4">
+        <h3 className="text-lg font-semibold text-gray-800 mb-2">{manga.title}</h3>
+        <p className="text-sm text-gray-600 mb-2">By {manga.author}</p>
+        <div className="flex items-center justify-between">
+          <span className="text-sm text-gray-500">{manga.publicationYear}</span>
+          {manga.rating && (
+            <span className="flex items-center text-yellow-500">
+              <FontAwesomeIcon icon={faStar} className="mr-1" />
+              {manga.rating}
+            </span>
+          )}
+        </div>
+        <div className="mt-2 flex flex-wrap gap-1">
+          {manga.genres.map((genre, index) => (
+            <span
+              key={index}
+              className="px-2 py-1 text-xs bg-green-100 text-green-800 rounded-full"
+            >
+              {genre}
+            </span>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,16 @@
+import React from 'react';
+import { MangaCard } from './MangaCard.jsx';
+
+export function MangaGrid({ mangas, onMangaClick }) {
+  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} 
+          onClick={onMangaClick}
+        />
+      ))}
+    </div>
+  );
+}

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

@@ -0,0 +1,125 @@
+import React, { useState, useRef, useEffect } from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faSearch, faPlus } from '@fortawesome/free-solid-svg-icons';
+import { MockMangaRepository } from '../../../infrastructure/api/mockMangaRepository.js';
+import { SearchMangas } from '../../../application/useCases/searchMangas.js';
+
+const mangaRepository = new MockMangaRepository();
+const searchMangas = new SearchMangas(mangaRepository);
+
+export function SearchBar({ onMangaClick, onAddMangaClick }) {
+  const [query, setQuery] = useState('');
+  const [results, setResults] = useState([]);
+  const [isOpen, setIsOpen] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const [hasSearched, setHasSearched] = useState(false);
+  const searchRef = useRef(null);
+
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (searchRef.current && !searchRef.current.contains(event.target)) {
+        setIsOpen(false);
+      }
+    };
+
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, []);
+
+  useEffect(() => {
+    const searchManga = async () => {
+      if (!query.trim()) {
+        setResults([]);
+        setHasSearched(false);
+        return;
+      }
+
+      setLoading(true);
+      try {
+        const searchResults = await searchMangas.execute(query);
+        setResults(searchResults);
+        setHasSearched(true);
+      } catch (error) {
+        console.error('Search error:', error);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    const timeoutId = setTimeout(searchManga, 300);
+    return () => clearTimeout(timeoutId);
+  }, [query]);
+
+  return (
+    <div ref={searchRef} className="relative flex-1 max-w-xl mx-4">
+      <div className="flex items-center py-1">
+        <FontAwesomeIcon 
+          icon={faSearch} 
+          className="text-white"
+        />
+        <input
+          type="text"
+          value={query}
+          onChange={(e) => {
+            setQuery(e.target.value);
+            setIsOpen(true);
+          }}
+          onFocus={() => setIsOpen(true)}
+          placeholder="Rechercher"
+          className="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>
+
+      {isOpen && query.trim() && (
+        <div className="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">
+          {loading ? (
+            <div className="p-4 text-center text-gray-400">Chargement...</div>
+          ) : results.length > 0 ? (
+            <div className="py-2">
+              <h3 className="px-4 py-2 text-sm font-semibold text-gray-400">
+                Mangas existants
+              </h3>
+              {results.map((manga) => (
+                <button
+                  key={manga.id}
+                  onClick={() => {
+                    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
+                    src={manga.imageUrl}
+                    alt={manga.title}
+                    className="w-10 h-14 object-cover rounded"
+                  />
+                  <div className="text-left">
+                    <div className="font-medium">{manga.title}</div>
+                    <div className="text-sm text-gray-400">{manga.author} ({manga.publicationYear})</div>
+                  </div>
+                </button>
+              ))}
+            </div>
+          ) : hasSearched && (
+            <div className="py-2">
+              <button
+                onClick={() => {
+                  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} />
+                <span>Ajouter "{query}"</span>
+              </button>
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,164 @@
+import React, { useState } from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { 
+  faBook,
+  faPlus, 
+  faFileImport, 
+  faCompass, 
+  faExchangeAlt,
+  faCalendar,
+  faClockRotateLeft,
+  faCog,
+  faDesktop,
+  faChevronDown,
+  faChevronUp
+} from '@fortawesome/free-solid-svg-icons';
+
+export function Sidebar({ isOpen, onClose, onAddMangaClick }) {
+  const [expandedMenus, setExpandedMenus] = useState({
+    mangas: true, // Par défaut, le menu Mangas est ouvert
+    settings: false,
+    system: false
+  });
+
+  const menuItems = [
+    {
+      icon: faBook,
+      text: 'Mangas',
+      id: 'mangas',
+      subItems: [
+        { icon: faPlus, text: 'Ajouter un nouveau', onClick: () => onAddMangaClick() },
+        { icon: faFileImport, text: 'Import bibliothèque', href: '#' },
+        { icon: faCompass, text: 'Découvrir', href: '#' },
+      ]
+    },
+    {
+      icon: faExchangeAlt,
+      text: 'Convertir CBR en CBZ',
+      href: '#'
+    },
+    {
+      icon: faCalendar,
+      text: 'Calendrier',
+      href: '#'
+    },
+    {
+      icon: faClockRotateLeft,
+      text: 'Activité',
+      href: '#',
+      badge: '3'
+    },
+    {
+      icon: faCog,
+      text: 'Paramètres',
+      id: 'settings',
+      subItems: [
+        { text: 'Général', href: '#' },
+        { text: 'Dossiers', href: '#' },
+        { text: 'Scrappers', href: '#' },
+        { text: 'UI', href: '#' }
+      ]
+    },
+    {
+      icon: faDesktop,
+      text: 'Système',
+      id: 'system',
+      subItems: [
+        { text: 'Status', href: '#' },
+        { text: 'Backup', href: '#' },
+        { text: 'Logs', href: '#' },
+        { text: 'Updates', href: '#' }
+      ]
+    },
+  ];
+
+  const toggleMenu = (menuId) => {
+    setExpandedMenus(prev => ({
+      ...prev,
+      [menuId]: !prev[menuId]
+    }));
+  };
+
+  const MenuItem = ({ item }) => {
+    const hasSubItems = item.subItems && item.subItems.length > 0;
+    const isExpanded = item.id && expandedMenus[item.id];
+    const isActive = false; // À implémenter avec un vrai système de routing
+    
+    return (
+      <div className={`border-l-4 ${isActive ? 'border-green-600' : 'border-transparent'}`}>
+        <button
+          onClick={() => {
+            if (hasSubItems) {
+              toggleMenu(item.id);
+            } else if (item.onClick) {
+              item.onClick();
+            } else if (item.href) {
+              window.location.href = item.href;
+            }
+          }}
+          className={`
+            w-full text-left pl-4 py-2 flex items-center justify-between
+            ${isActive ? 'text-green-600 bg-gray-800' : 'text-white hover:bg-gray-700'}
+            transition-colors duration-150
+          `}
+        >
+          <div className="flex items-center space-x-3">
+            <FontAwesomeIcon icon={item.icon} className="w-5 h-5" />
+            <span>{item.text}</span>
+          </div>
+          {hasSubItems ? (
+            <FontAwesomeIcon 
+              icon={isExpanded ? faChevronUp : faChevronDown} 
+              className="w-4 h-4 mr-4"
+            />
+          ) : item.badge ? (
+            <span className="bg-green-600 text-white text-xs px-2 py-1 rounded mr-4">
+              {item.badge}
+            </span>
+          ) : null}
+        </button>
+        
+        {hasSubItems && isExpanded && (
+          <div className="ml-8 mt-2 space-y-2">
+            {item.subItems.map((subItem, index) => (
+              <a
+                key={index}
+                href={subItem.href}
+                onClick={(e) => {
+                  e.preventDefault();
+                  if (subItem.onClick) {
+                    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>
+    );
+  };
+
+  return (
+    <nav className={`
+      w-60 bg-gray-600 h-full overflow-y-auto fixed left-0 top-16 transform transition-transform duration-200 ease-in-out z-40
+      ${isOpen ? 'translate-x-0' : '-translate-x-full'}
+      md:translate-x-0
+    `}>
+      <div className="py-4">
+        <div className="space-y-1">
+          {menuItems.map((item, index) => (
+            <MenuItem key={index} item={item} />
+          ))}
+        </div>
+      </div>
+    </nav>
+  );
+}

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

@@ -0,0 +1,29 @@
+import React from 'react';
+import { ToolbarButton } from './ToolbarButton';
+
+export function Toolbar({ 
+  leftSection = [], 
+  centerSection = [], 
+  rightSection = [],
+  className = ''
+}) {
+  const renderSection = (items) => (
+    <div className="flex items-center gap-2">
+      {items.map((item, index) => (
+        <ToolbarButton key={index} {...item} />
+      ))}
+    </div>
+  );
+
+  return (
+    <div className={`bg-gray-800 shadow-sm border-b border-gray-700 ${className}`}>
+      <div className="container mx-auto px-4">
+        <div className="h-14 flex items-center justify-between">
+          {renderSection(leftSection)}
+          {renderSection(centerSection)}
+          {renderSection(rightSection)}
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,20 @@
+import React from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+
+export function ToolbarButton({ icon, label, onClick, active = false }) {
+  return (
+    <button
+      onClick={onClick}
+      className={`
+        flex items-center gap-2 px-4 py-2 rounded-lg transition-colors
+        ${active 
+          ? 'bg-green-600 text-white' 
+          : 'text-gray-300 hover:text-green-600'
+        }
+      `}
+    >
+      <FontAwesomeIcon icon={icon} />
+      {label && <span>{label}</span>}
+    </button>
+  );
+}