diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 9cbfab6..968c27d 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -2,6 +2,8 @@ import type { Metadata } from "next"; import { Inter } from "next/font/google"; import "@/styles/globals.css"; import { cn } from "@/lib/utils"; +import ClientLayout from "@/components/layout/ClientLayout"; +import { NetworkProgressProvider } from "@/components/ui/network-progress"; const inter = Inter({ subsets: ["latin"] }); @@ -53,9 +55,6 @@ export const metadata: Metadata = { }, }; -// Composant client séparé pour le layout -import ClientLayout from "@/components/layout/ClientLayout"; - export default function RootLayout({ children }: { children: React.ReactNode }) { return ( @@ -115,7 +114,9 @@ export default function RootLayout({ children }: { children: React.ReactNode }) /> - {children} + + {children} + ); diff --git a/src/components/home/HomeContent.tsx b/src/components/home/HomeContent.tsx index 8519c2d..dca00d9 100644 --- a/src/components/home/HomeContent.tsx +++ b/src/components/home/HomeContent.tsx @@ -4,25 +4,28 @@ import { HeroSection } from "./HeroSection"; import { MediaRow } from "./MediaRow"; import { KomgaBook, KomgaSeries } from "@/types/komga"; import { useRouter } from "next/navigation"; +import { useNetworkRequest } from "@/lib/hooks/use-network-request"; + +interface HomeData { + ongoing: KomgaSeries[]; + recentlyRead: KomgaBook[]; + onDeck: KomgaBook[]; +} interface HomeContentProps { - data: { - ongoing: KomgaSeries[]; - recentlyRead: KomgaBook[]; - onDeck: KomgaBook[]; - }; + data: HomeData; } export function HomeContent({ data }: HomeContentProps) { const router = useRouter(); - const handleItemClick = (item: KomgaSeries | KomgaBook) => { - // Si c'est une série (a la propriété booksCount), on va vers la page de la série - if ("booksCount" in item) { - router.push(`/series/${item.id}`); - } else { - // Si c'est un livre, on va directement vers la page de lecture - router.push(`/books/${item.id}`); - } + const { executeRequest } = useNetworkRequest(); + + const handleItemClick = async (item: KomgaSeries | KomgaBook) => { + const path = "booksCount" in item ? `/series/${item.id}` : `/books/${item.id}`; + + await executeRequest(async () => { + router.push(path); + }); }; // Vérification des données pour le debug diff --git a/src/components/layout/Sidebar.tsx b/src/components/layout/Sidebar.tsx index dd7b3a5..2a9b4a6 100644 --- a/src/components/layout/Sidebar.tsx +++ b/src/components/layout/Sidebar.tsx @@ -7,6 +7,7 @@ import { cn } from "@/lib/utils"; import { authService } from "@/lib/services/auth.service"; import { useEffect, useState, useCallback } from "react"; import { KomgaLibrary, KomgaSeries } from "@/types/komga"; +import { useNetworkRequest } from "@/lib/hooks/use-network-request"; interface SidebarProps { isOpen: boolean; @@ -16,6 +17,7 @@ interface SidebarProps { export function Sidebar({ isOpen, onClose }: SidebarProps) { const pathname = usePathname(); const router = useRouter(); + const { executeRequest } = useNetworkRequest(); const [libraries, setLibraries] = useState([]); const [favorites, setFavorites] = useState([]); const [isLoading, setIsLoading] = useState(true); @@ -104,8 +106,11 @@ export function Sidebar({ isOpen, onClose }: SidebarProps) { router.push("/login"); }; - const handleLinkClick = () => { + const handleLinkClick = async (path: string) => { onClose(); + await executeRequest(async () => { + router.push(path); + }); }; const navigation = [ @@ -131,18 +136,17 @@ export function Sidebar({ isOpen, onClose }: SidebarProps) {

Navigation

{navigation.map((item) => ( - handleLinkClick(item.href)} className={cn( - "flex items-center rounded-lg px-3 py-2 text-sm font-medium hover:bg-accent hover:text-accent-foreground", + "w-full flex items-center rounded-lg px-3 py-2 text-sm font-medium hover:bg-accent hover:text-accent-foreground", pathname === item.href ? "bg-accent" : "transparent" )} > {item.name} - + ))}
@@ -159,18 +163,17 @@ export function Sidebar({ isOpen, onClose }: SidebarProps) {
Aucun favori
) : ( favorites.map((series) => ( - handleLinkClick(`/series/${series.id}`)} className={cn( - "flex items-center rounded-lg px-3 py-2 text-sm font-medium hover:bg-accent hover:text-accent-foreground", + "w-full flex items-center rounded-lg px-3 py-2 text-sm font-medium hover:bg-accent hover:text-accent-foreground", pathname === `/series/${series.id}` ? "bg-accent" : "transparent" )} > {series.metadata.title} - + )) )} @@ -195,18 +198,17 @@ export function Sidebar({ isOpen, onClose }: SidebarProps) {
Aucune bibliothèque
) : ( libraries.map((library) => ( - handleLinkClick(`/libraries/${library.id}`)} className={cn( - "flex items-center rounded-lg px-3 py-2 text-sm font-medium hover:bg-accent hover:text-accent-foreground", + "w-full flex items-center rounded-lg px-3 py-2 text-sm font-medium hover:bg-accent hover:text-accent-foreground", pathname === `/libraries/${library.id}` ? "bg-accent" : "transparent" )} > {library.name} - + )) )} @@ -215,17 +217,16 @@ export function Sidebar({ isOpen, onClose }: SidebarProps) {

Configuration

- handleLinkClick("/settings")} className={cn( - "flex items-center rounded-lg px-3 py-2 text-sm font-medium hover:bg-accent hover:text-accent-foreground", + "w-full flex items-center rounded-lg px-3 py-2 text-sm font-medium hover:bg-accent hover:text-accent-foreground", pathname === "/settings" ? "bg-accent" : "transparent" )} > Préférences - +
diff --git a/src/components/ui/network-progress.tsx b/src/components/ui/network-progress.tsx new file mode 100644 index 0000000..ffe3b32 --- /dev/null +++ b/src/components/ui/network-progress.tsx @@ -0,0 +1,88 @@ +"use client"; + +import { createContext, useContext, useState, useCallback } from "react"; +import { Loader2 } from "lucide-react"; +import { cn } from "@/lib/utils"; + +interface NetworkProgressContextType { + startProgress: (requestId: string) => void; + updateProgress: (requestId: string, progress: number) => void; + completeProgress: (requestId: string) => void; +} + +const NetworkProgressContext = createContext(null); + +export function NetworkProgressProvider({ children }: { children: React.ReactNode }) { + const [activeRequests, setActiveRequests] = useState>({}); + + const startProgress = useCallback((requestId: string) => { + setActiveRequests((prev) => ({ ...prev, [requestId]: 0 })); + }, []); + + const updateProgress = useCallback((requestId: string, progress: number) => { + setActiveRequests((prev) => ({ ...prev, [requestId]: progress })); + }, []); + + const completeProgress = useCallback((requestId: string) => { + setActiveRequests((prev) => { + const newRequests = { ...prev }; + delete newRequests[requestId]; + return newRequests; + }); + }, []); + + const totalProgress = Object.values(activeRequests).reduce((acc, curr) => acc + curr, 0); + const requestCount = Object.keys(activeRequests).length; + const averageProgress = requestCount > 0 ? totalProgress / requestCount : 0; + + return ( + + {children} + {requestCount > 0 && ( + <> + {/* Barre de progression en haut */} +
+
+
+
+
+ + {/* Indicateur de progression au centre */} +
+
+ + {Math.round(averageProgress)}% +
+
+ + )} + + ); +} + +export function useNetworkProgress() { + const context = useContext(NetworkProgressContext); + if (!context) { + throw new Error("useNetworkProgress must be used within a NetworkProgressProvider"); + } + return context; +} + +// Fonction utilitaire pour simuler une progression +export async function simulateProgress( + requestId: string, + updateFn: (requestId: string, progress: number) => void, + duration: number = 1000 +) { + const steps = 20; + const increment = 100 / steps; + const stepDuration = duration / steps; + + for (let i = 1; i <= steps; i++) { + await new Promise((resolve) => setTimeout(resolve, stepDuration)); + updateFn(requestId, Math.min(increment * i, 99)); + } +} diff --git a/src/lib/hooks/use-network-request.ts b/src/lib/hooks/use-network-request.ts new file mode 100644 index 0000000..dee8f2a --- /dev/null +++ b/src/lib/hooks/use-network-request.ts @@ -0,0 +1,40 @@ +"use client"; + +import { useNetworkProgress, simulateProgress } from "@/components/ui/network-progress"; +import { useCallback } from "react"; + +export function useNetworkRequest() { + const { startProgress, updateProgress, completeProgress } = useNetworkProgress(); + + const executeRequest = useCallback( + async (requestFn: () => Promise): Promise => { + const requestId = Math.random().toString(36).substring(7); + + try { + startProgress(requestId); + + // Démarrer la simulation de progression + const progressPromise = simulateProgress(requestId, updateProgress, 500); + + // Exécuter la requête + const result = await requestFn(); + + // Attendre que la simulation soit terminée + await progressPromise; + + // Forcer la progression à 100% avant de terminer + updateProgress(requestId, 100); + setTimeout(() => completeProgress(requestId), 100); + + return result; + } catch (error) { + // En cas d'erreur, on termine quand même la progression + completeProgress(requestId); + throw error; + } + }, + [startProgress, updateProgress, completeProgress] + ); + + return { executeRequest }; +}