feat: add chapter navigation buttons to header and footer in both viewing modes

src/pages/Chapter.tsx

@@ -6,6 +6,7 @@ import { useMarkContentAsRead } from "@/api/generated/user-interaction/user-inte
 import { ThemeToggle } from "@/components/ThemeToggle.tsx";
 import { Button } from "@/components/ui/button";
 import { useReadingTracker } from "@/features/chapter/hooks/useReadingTracker.ts";
+import { MangaLoadingState } from "@/components/MangaLoadingState.tsx";
 
 const Chapter = () => {
 	const { setCurrentChapterPage, getCurrentChapterPage } = useReadingTracker();
@@ -109,6 +110,14 @@ const Chapter = () => {
 		}
 	}, [infiniteScroll]);
 
+	if (isLoading) {
+		return (
+			<div className="flex min-h-screen items-center justify-center bg-background">
+				<MangaLoadingState />
+			</div>
+		);
+	}
+
 	if (!data?.data) {
 		return (
 			<div className="flex min-h-screen items-center justify-center bg-background">
@@ -125,6 +134,25 @@ const Chapter = () => {
 	}
 
 	const images = data.data.contentImageKeys;
+	const previousContentId = data.data.previousContentId;
+	const nextContentId = data.data.nextContentId;
+
+	const goToNextChapter = () => {
+		if (nextContentId) {
+			setCurrentPage(1);
+			setVisibleCount(1);
+			window.scrollTo({ top: 0 });
+			navigate(`/manga/${mangaId}/chapter/${nextContentId}`);
+		}
+	};
+	const goToPreviousChapter = () => {
+		if (previousContentId) {
+			setCurrentPage(1);
+			setVisibleCount(1);
+			window.scrollTo({ top: 0 });
+			navigate(`/manga/${mangaId}/chapter/${previousContentId}`);
+		}
+	};
 
 	/** Standard navigation (non-infinite mode) */
 	const goToNextPage = () => {
@@ -171,10 +199,33 @@ const Chapter = () => {
 								<h1 className="text-sm font-semibold text-foreground">
 									{data.data.mangaTitle}
 								</h1>
-								<p className="text-xs text-muted-foreground">
+								<p className="text-xs text-muted-foreground text-center">
-									Chapter {chapterNumber}
+									{chapterNumber}
 								</p>
 							</div>
+
+							{previousContentId && (
+								<Button
+									variant="ghost"
+									size="sm"
+									onClick={goToPreviousChapter}
+									className="gap-1"
+								>
+									<ChevronLeft className="h-4 w-4" />
+									<span className="hidden sm:inline">Prev</span>
+								</Button>
+							)}
+							{nextContentId && (
+								<Button
+									variant="ghost"
+									size="sm"
+									onClick={goToNextChapter}
+									className="gap-1"
+								>
+									<span className="hidden sm:inline">Next</span>
+									<ChevronRight className="h-4 w-4" />
+								</Button>
+							)}
 						</div>
 
 						<div className="flex items-center gap-4">
@@ -202,7 +253,7 @@ const Chapter = () => {
 						{data.data.mangaTitle}
 					</h1>
 					<p className="text-sm text-muted-foreground">
-						Chapter {chapterNumber}
+						{chapterNumber}
 					</p>
 				</div>
 
@@ -224,6 +275,36 @@ const Chapter = () => {
 
 						{/* LOAD MORE SENTINEL */}
 						<div ref={loadMoreRef} className="h-10" />
+
+						{/* CHAPTER NAVIGATION (infinite scroll mode) */}
+						{(previousContentId || nextContentId) && (
+							<div className="flex items-center justify-center gap-3 border-t border-border py-6">
+								{previousContentId ? (
+									<Button
+										onClick={goToPreviousChapter}
+										variant="outline"
+										className="gap-2 bg-transparent"
+									>
+										<ChevronLeft className="h-4 w-4" />
+										Previous
+									</Button>
+								) : (
+									<div className="flex-1" />
+								)}
+								{nextContentId ? (
+									<Button
+										onClick={goToNextChapter}
+										variant="outline"
+										className="gap-2 bg-transparent"
+									>
+										Next
+										<ChevronRight className="h-4 w-4" />
+									</Button>
+								) : (
+									<div className="flex-1" />
+								)}
+							</div>
+						)}
 					</div>
 				) : (
 					/* ------------------------------------------------------------------ */
@@ -234,8 +315,8 @@ const Chapter = () => {
 							<img
 								src={
 									import.meta.env.VITE_OMV_BASE_URL +
-										"/" +
+									"/" +
-										images[currentPage - 1] || "/placeholder.svg"
+									images[currentPage - 1] || "/placeholder.svg"
 								}
 								alt={`Page ${currentPage}`}
 								width={1000}
@@ -271,6 +352,36 @@ const Chapter = () => {
 									<ChevronRight className="h-4 w-4" />
 								</Button>
 							</div>
+
+							{/* CHAPTER NAVIGATION */}
+							{(previousContentId || nextContentId) && (
+								<div className="flex items-center justify-center gap-3 border-t border-border pt-4">
+									{previousContentId ? (
+										<Button
+											onClick={goToPreviousChapter}
+											variant="outline"
+											className="gap-2 bg-transparent"
+										>
+											<ChevronLeft className="h-4 w-4" />
+											Previous
+										</Button>
+									) : (
+										<div className="flex-1" />
+									)}
+									{nextContentId ? (
+										<Button
+											onClick={goToNextChapter}
+											variant="outline"
+											className="gap-2 bg-transparent"
+										>
+											Next
+											<ChevronRight className="h-4 w-4" />
+										</Button>
+									) : (
+										<div className="flex-1" />
+									)}
+								</div>
+							)}
 						</div>
 					</>
 				)}

src/pages/Home.tsx

@@ -11,7 +11,7 @@ import { Skeleton } from "@/components/ui/skeleton.tsx";
 import { useUIState } from "@/contexts/UIStateContext.tsx";
 import { FilterSidebar } from "@/features/home/components/FilterSidebar.tsx";
 import { MangaGrid } from "@/features/home/components/MangaGrid.tsx";
-import { MangaLoadingState } from "@/features/home/components/MangaLoadingState.tsx";
+import { MangaLoadingState } from "@/components/MangaLoadingState.tsx";
 import { SortDropdown } from "@/features/home/components/SortDropdown.tsx";
 import { useDynamicPageSize } from "@/hooks/useDynamicPageSize.ts";