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
+9
View File
@@ -7,6 +7,7 @@ import { db } from "@/lib/db/client";
import { userTitleStatus } from "@/lib/db/schema";
import { importTitle } from "@/lib/services/metadata";
import {
getEpisodeProgressByTmdbIds,
getUserStatusesByTmdbIds,
setTitleStatus,
} from "@/lib/services/tracking";
@@ -19,6 +20,14 @@ export async function fetchUserStatuses(
return getUserStatusesByTmdbIds(session.user.id, tmdbIds);
}
export async function fetchEpisodeProgress(
tmdbIds: { tmdbId: number; type: string }[],
): Promise<Record<string, { watched: number; total: number }>> {
const session = await auth.api.getSession({ headers: await headers() });
if (!session) return {};
return getEpisodeProgressByTmdbIds(session.user.id, tmdbIds);
}
export async function quickAddToWatchlist(
tmdbId: number,
type: "movie" | "tv",