feature(home): add manga details page

package-lock.json

@@ -10,6 +10,7 @@
 			"dependencies": {
 				"@hookform/resolvers": "^5.2.2",
 				"@radix-ui/react-avatar": "^1.1.10",
+				"@radix-ui/react-collapsible": "^1.1.12",
 				"@radix-ui/react-dialog": "^1.1.15",
 				"@radix-ui/react-dropdown-menu": "^2.1.16",
 				"@radix-ui/react-label": "^2.1.7",
@@ -1505,6 +1506,36 @@
 				}
 			}
 		},
+		"node_modules/@radix-ui/react-collapsible": {
+			"version": "1.1.12",
+			"resolved": "https://registry.npmjs.org/@radix-ui/react-collapsible/-/react-collapsible-1.1.12.tgz",
+			"integrity": "sha512-Uu+mSh4agx2ib1uIGPP4/CKNULyajb3p92LsVXmH2EHVMTfZWpll88XJ0j4W0z3f8NK1eYl1+Mf/szHPmcHzyA==",
+			"license": "MIT",
+			"dependencies": {
+				"@radix-ui/primitive": "1.1.3",
+				"@radix-ui/react-compose-refs": "1.1.2",
+				"@radix-ui/react-context": "1.1.2",
+				"@radix-ui/react-id": "1.1.1",
+				"@radix-ui/react-presence": "1.1.5",
+				"@radix-ui/react-primitive": "2.1.3",
+				"@radix-ui/react-use-controllable-state": "1.2.2",
+				"@radix-ui/react-use-layout-effect": "1.1.1"
+			},
+			"peerDependencies": {
+				"@types/react": "*",
+				"@types/react-dom": "*",
+				"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+				"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+			},
+			"peerDependenciesMeta": {
+				"@types/react": {
+					"optional": true
+				},
+				"@types/react-dom": {
+					"optional": true
+				}
+			}
+		},
 		"node_modules/@radix-ui/react-collection": {
 			"version": "1.1.7",
 			"resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.1.7.tgz",

package.json

@@ -12,6 +12,7 @@
 	"dependencies": {
 		"@hookform/resolvers": "^5.2.2",
 		"@radix-ui/react-avatar": "^1.1.10",
+		"@radix-ui/react-collapsible": "^1.1.12",
 		"@radix-ui/react-dialog": "^1.1.15",
 		"@radix-ui/react-dropdown-menu": "^2.1.16",
 		"@radix-ui/react-label": "^2.1.7",

src/components/ui/collapsible.tsx

@@ -0,0 +1,31 @@
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
+
+function Collapsible({
+	...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.Root>) {
+	return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />;
+}
+
+function CollapsibleTrigger({
+	...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>) {
+	return (
+		<CollapsiblePrimitive.CollapsibleTrigger
+			data-slot="collapsible-trigger"
+			{...props}
+		/>
+	);
+}
+
+function CollapsibleContent({
+	...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>) {
+	return (
+		<CollapsiblePrimitive.CollapsibleContent
+			data-slot="collapsible-content"
+			{...props}
+		/>
+	);
+}
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent };

src/features/manga/MangaChapter.tsx

@@ -0,0 +1,152 @@
+import { useQueryClient } from "@tanstack/react-query";
+import { Check, Database, Download, Eye, Loader2 } from "lucide-react";
+import { useCallback, useState } from "react";
+import { useNavigate } from "react-router";
+import { useGetMangaChapters } from "@/api/generated/manga/manga.ts";
+import {
+	useDownloadChapterArchive,
+	useFetchChapter,
+} from "@/api/generated/manga-chapter/manga-chapter.ts";
+import { Button } from "@/components/ui/button";
+
+interface MangaChapterProps {
+	mangaId: number;
+	mangaProviderId: number;
+}
+
+export const MangaChapter = ({
+	mangaId,
+	mangaProviderId,
+}: MangaChapterProps) => {
+	const navigate = useNavigate();
+
+	const { isPending, data, queryKey } = useGetMangaChapters(mangaProviderId);
+
+	const queryClient = useQueryClient();
+
+	const { mutate: mutateDownloadChapterArchive } = useDownloadChapterArchive({
+		mutation: {
+			onSuccess: (data, { chapterId }) => {
+				const url = window.URL.createObjectURL(data);
+				const link = document.createElement("a");
+				link.href = url;
+				link.setAttribute("download", chapterId + ".cbz");
+				document.body.appendChild(link);
+				link.click();
+				link.remove();
+				window.URL.revokeObjectURL(url);
+			},
+		},
+	});
+
+	const { mutate, isPending: isPendingFetchChapter } = useFetchChapter({
+		mutation: {
+			onSuccess: () => queryClient.invalidateQueries({ queryKey }),
+			onSettled: () => setFetchingId(null),
+		},
+	});
+
+	const [fetchingId, setFetchingId] = useState<number | null>(null);
+
+	const fetchChapter = useCallback(
+		(mangaChapterId: number) => {
+			setFetchingId(mangaChapterId);
+			mutate({ chapterId: mangaChapterId });
+		},
+		[mutate],
+	);
+
+	const handleReadChapter = (chapterNumber: number) => {
+		navigate(`/manga/${mangaId}/chapter/${chapterNumber}`);
+	};
+
+	return (
+		<div className="border-t border-border px-4 pb-4">
+			{isPending ? (
+				<div className="flex items-center justify-center py-8">
+					<Loader2 className="h-6 w-6 animate-spin text-primary" />
+					<span className="ml-2 text-sm text-muted-foreground">
+						Loading chapters...
+					</span>
+				</div>
+			) : data ? (
+				<div className="mt-4 space-y-2">
+					{data.data?.map((chapter) => {
+						return (
+							<div
+								key={chapter.id}
+								className="flex items-center justify-between rounded-lg border border-border bg-background p-3"
+							>
+								<div className="flex items-center gap-3">
+									<div
+										className={`flex h-8 w-8 items-center justify-center rounded-full ${
+											chapter.isRead ? "bg-primary/20" : "bg-muted"
+										}`}
+									>
+										{chapter.isRead ? (
+											<Check className="h-4 w-4 text-primary" />
+										) : (
+											<span className="text-xs font-medium text-muted-foreground">
+												{/*{chapter}*/}
+											</span>
+										)}
+									</div>
+									<div>
+										<p className="text-sm font-medium text-foreground">
+											{chapter.title}
+										</p>
+										{chapter.downloaded && (
+											<p className="text-xs text-muted-foreground">
+												In database
+											</p>
+										)}
+									</div>
+								</div>
+								{chapter.downloaded ? (
+									<div className="flex gap-2">
+										<Button
+											size="sm"
+											variant="outline"
+											onClick={() => handleReadChapter(chapter.id)}
+											className="gap-2"
+										>
+											<Eye className="h-4 w-4" />
+											Read
+										</Button>
+										<Button
+											size="sm"
+											variant="outline"
+											onClick={() =>
+												mutateDownloadChapterArchive({
+													chapterId: chapter.id,
+													params: { archiveFileType: "CBZ" },
+												})
+											}
+											className="gap-2"
+										>
+											<Download className="h-4 w-4" />
+											Download
+										</Button>
+									</div>
+								) : (
+									<Button
+										size="sm"
+										variant="outline"
+										onClick={() => fetchChapter(chapter.id)}
+										disabled={isPendingFetchChapter}
+										className="gap-2 cursor-pointer"
+									>
+										<Database className="h-4 w-4" />
+										{isPendingFetchChapter && fetchingId == chapter.id
+											? "Fetching..."
+											: "Fetch from Provider"}
+									</Button>
+								)}
+							</div>
+						);
+					})}
+				</div>
+			) : null}
+		</div>
+	);
+};

src/pages/Manga.tsx

@@ -0,0 +1,314 @@
+import { useQueryClient } from "@tanstack/react-query";
+import {
+	ArrowLeft,
+	BookOpen,
+	Calendar,
+	ChevronDown,
+	Database,
+	Star,
+} from "lucide-react";
+import { useState } from "react";
+import { useNavigate, useParams } from "react-router";
+import { toast } from "sonner";
+import {
+	useFetchMangaChapters,
+	useGetManga,
+} from "@/api/generated/manga/manga.ts";
+import { useFetchAllChapters } from "@/api/generated/manga-chapter/manga-chapter.ts";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import {
+	Collapsible,
+	CollapsibleContent,
+	CollapsibleTrigger,
+} from "@/components/ui/collapsible.tsx";
+import { MangaChapter } from "@/features/manga/MangaChapter.tsx";
+import { formatToTwoDigitsDateRange } from "@/utils/dateFormatter.ts";
+
+const Manga = () => {
+	const navigate = useNavigate();
+	const params = useParams();
+	const mangaId = Number(params.mangaId);
+
+	const queryClient = useQueryClient();
+
+	const { data: mangaData, queryKey } = useGetManga(mangaId);
+
+	const { mutate, isPending: fetchPending } = useFetchMangaChapters({
+		mutation: {
+			onSuccess: () => queryClient.invalidateQueries({ queryKey }),
+		},
+	});
+
+	const { mutate: fetchAllMutate, isPending: fetchAllPending } =
+		useFetchAllChapters({
+			mutation: {
+				onSuccess: () => toast.success("Chapter import queued successfully."),
+			},
+		});
+
+	const isPending = fetchPending || fetchAllPending;
+
+	const [openProviders, setOpenProviders] = useState<Set<number>>(new Set());
+
+	if (!mangaData) {
+		return (
+			<div className="flex min-h-screen items-center justify-center bg-background">
+				<div className="text-center">
+					<h1 className="text-2xl font-bold text-foreground">
+						Manga not found
+					</h1>
+					<Button onClick={() => navigate("/")} className="mt-4">
+						Go back home
+					</Button>
+				</div>
+			</div>
+		);
+	}
+
+	const toggleProvider = (providerId: number) => {
+		setOpenProviders((prev) => {
+			const next = new Set(prev);
+			if (next.has(providerId)) {
+				next.delete(providerId);
+			} else {
+				next.add(providerId);
+			}
+			return next;
+		});
+	};
+
+	return (
+		<div className="min-h-screen bg-background">
+			{/* Header */}
+			<header className="border-b border-border bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
+				<div className="px-8 py-6">
+					<div className="flex items-center justify-between">
+						<div className="flex items-center gap-6">
+							<Button
+								variant="ghost"
+								onClick={() => navigate("/")}
+								className="gap-2"
+							>
+								<ArrowLeft className="h-4 w-4" />
+								Back to Library
+							</Button>
+							<h1 className="text-xl font-bold text-foreground">MangaMochi</h1>
+						</div>
+						{/*<ThemeToggle />*/}
+					</div>
+				</div>
+			</header>
+
+			{/* Content */}
+			<main className="px-8 py-8">
+				<div className="mx-auto max-w-7xl">
+					{/* Manga Info Section */}
+					<div className="grid gap-8 lg:grid-cols-[300px_1fr]">
+						{/* Cover */}
+						<div className="relative aspect-[2/3] overflow-hidden rounded-lg border border-border bg-muted lg:sticky lg:top-8 lg:h-fit">
+							<img
+								src={
+									(mangaData.data?.coverImageKey &&
+										import.meta.env.VITE_OMV_BASE_URL +
+											"/" +
+											mangaData.data?.coverImageKey) ||
+									"/placeholder.svg"
+								}
+								alt={mangaData.data?.title ?? ""}
+								className="absolute inset-0 w-full h-full object-cover"
+							/>
+						</div>
+
+						{/* Details */}
+						<div className="space-y-6">
+							<div>
+								<div className="mb-3 flex items-start justify-between gap-4">
+									<h1 className="text-balance text-4xl font-bold tracking-tight text-foreground">
+										{mangaData.data?.title}
+									</h1>
+									<Badge
+										variant="secondary"
+										className="border border-border bg-card text-foreground"
+									>
+										{mangaData.data?.status}
+									</Badge>
+								</div>
+								<p className="text-lg text-muted-foreground">
+									{mangaData.data?.authors.join(", ")}
+								</p>
+							</div>
+
+							{mangaData.data?.alternativeTitles &&
+								mangaData.data?.alternativeTitles.length > 0 && (
+									<div>
+										<h3 className="mb-2 text-sm font-medium text-muted-foreground">
+											Alternative Titles
+										</h3>
+										<div className="flex flex-wrap gap-2">
+											{mangaData.data?.alternativeTitles.map((title, index) => (
+												<span
+													key={index}
+													className="rounded-md bg-muted px-3 py-1 text-sm text-foreground"
+												>
+													{title}
+												</span>
+											))}
+										</div>
+									</div>
+								)}
+
+							<p className="text-pretty text-justify leading-relaxed text-foreground">
+								{mangaData.data?.synopsis}
+							</p>
+
+							<div className="grid gap-4 sm:grid-cols-2">
+								<div className="flex items-center gap-3 rounded-lg border border-border bg-card p-4">
+									<Star className="h-5 w-5 fill-primary text-primary" />
+									<div>
+										<p className="text-sm text-muted-foreground">Rating</p>
+										<p className="text-lg font-semibold text-foreground">
+											{mangaData.data?.score && mangaData.data?.score > 0
+												? mangaData.data?.score
+												: "-"}
+										</p>
+									</div>
+								</div>
+
+								<div className="flex items-center gap-3 rounded-lg border border-border bg-card p-4">
+									<BookOpen className="h-5 w-5 text-primary" />
+									<div>
+										<p className="text-sm text-muted-foreground">Chapters</p>
+										<p className="text-lg font-semibold text-foreground">
+											{mangaData.data?.chapterCount &&
+											mangaData.data?.chapterCount > 0
+												? mangaData.data?.chapterCount
+												: "-"}
+										</p>
+									</div>
+								</div>
+
+								{mangaData?.data?.publishedFrom && (
+									<div className="flex items-center gap-3 rounded-lg border border-border bg-card p-4">
+										<Calendar className="h-5 w-5 text-primary" />
+										<div>
+											<p className="text-sm text-muted-foreground">Published</p>
+											<p className="text-lg font-semibold text-foreground">
+												{formatToTwoDigitsDateRange(
+													mangaData.data.publishedFrom,
+													mangaData?.data?.publishedTo,
+												)}
+											</p>
+										</div>
+									</div>
+								)}
+
+								<div className="flex items-center gap-3 rounded-lg border border-border bg-card p-4">
+									<Database className="h-5 w-5 text-primary" />
+									<div>
+										<p className="text-sm text-muted-foreground">Providers</p>
+										<p className="text-lg font-semibold text-foreground">
+											{mangaData.data?.providerCount}
+										</p>
+									</div>
+								</div>
+							</div>
+
+							<div className="flex flex-wrap gap-2">
+								{mangaData.data?.genres.map((genre) => (
+									<Badge
+										key={genre}
+										variant="outline"
+										className="border-border text-foreground"
+									>
+										{genre}
+									</Badge>
+								))}
+							</div>
+						</div>
+					</div>
+
+					<div className="mt-12">
+						<h2 className="mb-6 text-2xl font-bold text-foreground">
+							Chapters by Provider
+						</h2>
+
+						<div className="space-y-4">
+							{mangaData.data?.providers.map((provider) => (
+								<Card key={provider.id} className="border-border bg-card">
+									<Collapsible
+										open={openProviders.has(provider.id)}
+										onOpenChange={() => toggleProvider(provider.id)}
+									>
+										<CollapsibleTrigger className="w-full">
+											<CardContent className="flex items-center justify-between p-4">
+												<div className="flex items-center justify-between w-full">
+													<div className="flex items-center gap-4">
+														<Database className="h-5 w-5 text-primary" />
+														<div className="text-left">
+															<p className="font-semibold text-foreground">
+																{provider.providerName}
+															</p>
+															<p className="text-sm text-muted-foreground">
+																{provider.chaptersDownloaded} downloaded •{" "}
+																{provider.chaptersAvailable} available
+															</p>
+														</div>
+													</div>
+													{provider.supportsChapterFetch && (
+														<div className={"flex gap-4 pr-4"}>
+															<Button
+																size="sm"
+																variant="outline"
+																disabled={isPending}
+																onClick={() =>
+																	fetchAllMutate({
+																		mangaProviderId: provider.id,
+																	})
+																}
+																className="gap-2"
+															>
+																<Database className="h-4 w-4" />
+																Fetch all from Provider
+															</Button>
+															<Button
+																size="sm"
+																variant="outline"
+																disabled={isPending}
+																onClick={() =>
+																	mutate({ mangaProviderId: provider.id })
+																}
+																className="gap-2"
+															>
+																<Database className="h-4 w-4" />
+																Fetch from Provider
+															</Button>
+														</div>
+													)}
+												</div>
+												<ChevronDown
+													className={`h-5 w-5 text-muted-foreground transition-transform ${
+														openProviders.has(provider.id) ? "rotate-180" : ""
+													}`}
+												/>
+											</CardContent>
+										</CollapsibleTrigger>
+										<CollapsibleContent>
+											<MangaChapter
+												mangaId={mangaId}
+												mangaProviderId={provider.id}
+											/>
+										</CollapsibleContent>
+									</Collapsible>
+								</Card>
+							))}
+						</div>
+					</div>
+				</div>
+			</main>
+		</div>
+	);
+};
+
+export default Manga;

src/pages/Router.tsx

@@ -3,6 +3,7 @@ import { createBrowserRouter } from "react-router";
 import { AppLayout } from "@/components/Layout/AppLayout.tsx";
 
 const Home = lazy(() => import("./Home.tsx"));
+const Manga = lazy(() => import("./Manga.tsx"));
 const Login = lazy(() => import("./Login.tsx"));
 const Register = lazy(() => import("./Register.tsx"));
 
@@ -26,6 +27,15 @@ export const Router = createBrowserRouter([
 				path: "/register",
 				element: <Register />,
 			},
+			{
+				path: "/manga",
+				children: [
+					{
+						path: ":mangaId",
+						element: <Manga />,
+					},
+				],
+			},
 		],
 	},
 ]);

src/utils/dateFormatter.ts

@@ -16,7 +16,7 @@ export const formatToTwoDigitsDateRange = (
 	from: string,
 	to: string | undefined,
 ) => {
-	const toDate = formatToTwoDigits(to) ?? "Present";
+	const toDate = formatToTwoDigits(to ?? undefined) ?? "Present";
 
 	return `${formatToTwoDigits(from)} - ${toDate}`;
 };