colgora/Mangarr
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: SPA pour les pages existantes

Browse Source
This commit is contained in:
ext.jeremy.guillot@maxicoffee.domains
2025-02-17 14:50:36 +01:00
parent 668702b1fb
commit 140cc14316
11 changed files with 331 additions and 164 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
assets/react/app/App.jsx
View File

@@ -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>

12
assets/react/app/presentation/components/Header.jsx
View File

@@ -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>
<SearchBar
onMangaClick={onMangaClick}
onAddMangaClick={onAddMangaClick}
/>
</Link>
<SearchBar />
</div>
</header>
);

11
assets/react/app/presentation/components/MangaCard.jsx
View File

@@ -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

3
assets/react/app/presentation/components/MangaGrid.jsx
View File

@@ -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}
onClick={onMangaClick}
/>
))}
</div>

32
assets/react/app/presentation/components/SearchBar/SearchBar.jsx
View File

@@ -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} />

131
assets/react/app/presentation/components/Sidebar.jsx
View File

@@ -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: faCompass, text: 'Découvrir', href: '#' },
{ icon: faFileImport, text: 'Import bibliothèque', to: '/import' },
{ 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: 'Dossiers', href: '#' },
{ text: 'Scrappers', href: '#' },
{ text: 'UI', href: '#' }
{ text: 'Général', to: '/settings/general' },
{ text: 'Dossiers', to: '/settings/folders' },
{ text: 'Scrappers', to: '/settings/scrappers' },
{ 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: 'Backup', href: '#' },
{ text: 'Logs', href: '#' },
{ text: 'Updates', href: '#' }
{ text: 'Status', to: '/system/status' },
{ text: 'Backup', to: '/system/backup' },
{ text: 'Logs', to: '/system/logs' },
{ 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 isActive = false; // À implémenter avec un vrai système de routing
const isExpanded = item.id ? expandedMenus[item.id] : false;
const handleClick = (e) => {
if (hasSubItems) {
e.preventDefault();
toggleMenu(item.id);
}
};
const renderLink = (linkItem, className) => {
if (linkItem.onClick) {
return (
<button
onClick={linkItem.onClick}
className={className}
>
{linkItem.icon && <FontAwesomeIcon icon={linkItem.icon} className="w-4 h-4 mr-2" />}
{linkItem.text}
</button>
);
}
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
`}
<Link
to={linkItem.to}
className={className}
>
<div className="flex items-center space-x-3">
<FontAwesomeIcon icon={item.icon} className="w-5 h-5" />
<span>{item.text}</span>
</div>
{hasSubItems ? (
{linkItem.icon && <FontAwesomeIcon icon={linkItem.icon} className="w-4 h-4 mr-2" />}
{linkItem.text}
</Link>
);
};
return (
<div>
{item.to || item.onClick ? (
renderLink(item, "flex items-center px-4 py-2 text-gray-300 hover:text-green-600 transition-colors duration-150")
) : (
<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>
{hasSubItems && (
<FontAwesomeIcon
icon={isExpanded ? faChevronUp : faChevronDown}
className="w-4 h-4 mr-4"
className="w-3 h-3"
/>
) : 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>
))}
{item.subItems.map((subItem, index) => {
const link = renderLink(
subItem,
"block py-2 text-gray-300 hover:text-green-600 transition-colors duration-150"
);
return React.cloneElement(link, { key: `${subItem.text}-${index}` });
})}
</div>
)}
</div>

17
assets/react/app/presentation/components/Toolbar/ToolbarButton.jsx
View File

@@ -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

110
assets/react/app/presentation/context/MangaContext.jsx
View File

@@ -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 };
case 'SET_MANGA_DETAIL':
return {
...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
if (state.detailedMangas[slug]) return state.detailedMangas[slug];
// Retourner les données en cache si disponibles
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 (

31
assets/react/app/presentation/pages/HomePage.jsx
View File

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

46
assets/react/app/presentation/pages/MangaDetailPage.jsx
View File

@@ -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,28 +25,35 @@ 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
if (!manga) {
loadMangaDetail(slug);
const loadDetails = async () => {
if (!manga && displayManga) {
setIsLoadingDetails(true);
await loadMangaDetail(slug);
setIsLoadingDetails(false);
} else if (!manga && !displayManga) {
await loadMangaDetail(slug);
}
}, [slug, manga, loadMangaDetail]);
const handleMangaClick = (mangaSlug) => {
navigate(`/manga/${mangaSlug}`);
};
loadDetails();
}, [slug, manga, displayManga, loadMangaDetail]);
const handleAddMangaClick = (query = '') => {
navigate(`/add${query ? `?q=${encodeURIComponent(query)}` : ''}`);
};
const toolbarConfig = {
leftSection: [
{ icon: faArrowLeft, onClick: () => navigate(-1) },
{ icon: faRefresh, onClick: () => loadMangaDetail(slug) }
{ icon: faArrowLeft, navigateBack: true },
{ 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>
);
}

53
assets/react/app/presentation/pages/ReaderPage.jsx
View File

@@ -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,40 +155,13 @@ 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">
<button
onClick={() => navigate(-1)}
className="text-gray-300 hover:text-white"
>
<FontAwesomeIcon icon={faArrowLeft} />
</button>
<Toolbar {...toolbarConfig} />
{context && (
<div>
<span className="font-medium">Manga title</span>
<span className="mx-2">-</span>
<span>Chapter {context.number}</span>
<div className="text-center flex-1">
<span className="font-medium">Chapitre {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>