Add episode progress bar to title cards for in-progress TV shows

Shows a subtle progress bar at the bottom of title cards indicating
watched/total episodes, with a tooltip for exact counts. Uses a single
efficient SQL query with JOINs to batch-fetch progress for all visible
titles on the Explore page.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-03-05 10:22:05 -05:00
co-authored by Claude Opus 4.6
parent 1b0cad1c83
commit cd63d4f92a
7 changed files with 140 additions and 8 deletions
+5
View File
@@ -23,6 +23,7 @@ interface TitleRowProps {
icon: React.ReactNode;
items: TitleRowItem[];
userStatuses?: Record<string, "watchlist" | "in_progress" | "completed">;
episodeProgress?: Record<string, { watched: number; total: number }>;
}
const staggerContainer = {
@@ -45,6 +46,7 @@ export function TitleRow({
icon,
items,
userStatuses,
episodeProgress,
}: TitleRowProps) {
if (items.length === 0) return null;
@@ -81,6 +83,9 @@ export function TitleRow({
href={`/titles/tmdb-${item.tmdbId}-${item.type}`}
showQuickAdd
userStatus={userStatuses?.[`${item.tmdbId}-${item.type}`]}
episodeProgress={
episodeProgress?.[`${item.tmdbId}-${item.type}`]
}
/>
</motion.div>
</CarouselItem>