Files
stripstream/src/components/ui/series-cover.tsx
Froidefond Julien c5da33d6b2 feat: add anonymous mode toggle to hide reading progress and tracking
Adds a toggleable anonymous mode (eye icon in header) that:
- Stops syncing read progress to the server while reading
- Hides mark as read/unread buttons on book covers and lists
- Hides reading status badges on series and books
- Hides progress bars on series and book covers
- Hides "continue reading" and "continue series" sections on home
- Persists the setting server-side in user preferences (anonymousMode)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-20 13:35:22 +01:00

43 lines
1.5 KiB
TypeScript

import { ProgressBar } from "./progress-bar";
import { BookX } from "lucide-react";
import type { SeriesCoverProps } from "./cover-utils";
export function SeriesCover({
series,
alt = "Image de couverture",
className,
showProgressUi = true,
isAnonymous = false,
}: SeriesCoverProps) {
const isCompleted = isAnonymous ? false : series.bookCount === series.booksReadCount;
const readBooks = isAnonymous ? 0 : series.booksReadCount;
const totalBooks = series.bookCount;
const showProgress = Boolean(!isAnonymous && showProgressUi && totalBooks > 0 && readBooks > 0 && !isCompleted);
const missingCount = series.missingCount;
return (
<div className="relative w-full h-full">
<img
src={series.thumbnailUrl}
alt={alt}
loading="lazy"
className={[
"absolute inset-0 w-full h-full object-cover rounded-lg",
isCompleted ? "opacity-50" : "",
className || "",
]
.filter(Boolean)
.join(" ")}
/>
{showProgressUi && missingCount != null && missingCount > 0 && (
<div className="absolute top-1.5 right-1.5 flex items-center gap-0.5 rounded-full bg-orange-500/90 px-1.5 py-0.5 text-white shadow-md backdrop-blur-sm">
<BookX className="h-3 w-3" />
<span className="text-[10px] font-bold leading-none">{missingCount}</span>
</div>
)}
{showProgress ? <ProgressBar progress={readBooks} total={totalBooks} type="series" /> : null}
</div>
);
}