mirror of
https://github.com/jakejarvis/sofa.git
synced 2026-08-29 07:25:38 -04:00
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:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user