Fix missing userStatus on title cards across dashboard, recommendations, and filmography

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

app/(pages)/dashboard/_components/library-section.tsx

@@ -16,6 +16,7 @@ export async function LibrarySection({ userId }: { userId: string }) {
     posterPath: tmdbImageUrl(t.posterPath, "w500"),
     releaseDate: t.releaseDate ?? t.firstAirDate,
     voteAverage: t.voteAverage,
+    userStatus: t.userStatus as "watchlist" | "in_progress" | "completed",
   }));
 
   return (

app/(pages)/dashboard/_components/title-grid.tsx

@@ -10,6 +10,7 @@ interface TitleGridItem {
   posterPath: string | null;
   releaseDate?: string | null;
   voteAverage?: number | null;
+  userStatus?: "watchlist" | "in_progress" | "completed" | null;
 }
 
 export function TitleGrid({ items }: { items: TitleGridItem[] }) {
@@ -29,6 +30,7 @@ export function TitleGrid({ items }: { items: TitleGridItem[] }) {
             posterPath={t.posterPath}
             releaseDate={t.releaseDate}
             voteAverage={t.voteAverage}
+            userStatus={t.userStatus}
           />
         </div>
       ))}

app/(pages)/people/[id]/_components/filmography-grid.tsx

@@ -18,9 +18,13 @@ type Sort = "newest" | "rating";
 
 interface FilmographyGridProps {
   credits: PersonCredit[];
+  userStatuses?: Record<string, "watchlist" | "in_progress" | "completed">;
 }
 
-export function FilmographyGrid({ credits }: FilmographyGridProps) {
+export function FilmographyGrid({
+  credits,
+  userStatuses,
+}: FilmographyGridProps) {
   const [filter, setFilter] = useState<Filter>("all");
   const [sort, setSort] = useState<Sort>("newest");
 
@@ -128,6 +132,7 @@ export function FilmographyGrid({ credits }: FilmographyGridProps) {
               posterPath={credit.posterPath}
               releaseDate={credit.releaseDate ?? credit.firstAirDate}
               voteAverage={credit.voteAverage}
+              userStatus={userStatuses?.[credit.titleId]}
             />
           </div>
         ))}

app/(pages)/people/[id]/page.tsx

@@ -9,6 +9,7 @@ import {
   getOrFetchPerson,
   getOrFetchPersonByTmdbId,
 } from "@/lib/services/person";
+import { getUserStatusesByTitleIds } from "@/lib/services/tracking";
 import { FilmographyGrid } from "./_components/filmography-grid";
 import { PersonHero } from "./_components/person-hero";
 
@@ -47,11 +48,18 @@ export default async function PersonDetailPage({
   if (!person) notFound();
 
   const filmography = getLocalFilmography(person.id);
+  const session = await getSession();
+  const userStatuses = session
+    ? getUserStatusesByTitleIds(
+        session.user.id,
+        filmography.map((c) => c.titleId),
+      )
+    : {};
 
   return (
     <div className="space-y-10">
       <PersonHero person={person} />
-      <FilmographyGrid credits={filmography} />
+      <FilmographyGrid credits={filmography} userStatuses={userStatuses} />
     </div>
   );
 }

app/(pages)/titles/[id]/_components/recommendations-grid.tsx

@@ -6,8 +6,10 @@ import type { RecommendedTitle } from "@/lib/types/title";
 
 export function RecommendationsGrid({
   recommendations,
+  userStatuses,
 }: {
   recommendations: RecommendedTitle[];
+  userStatuses?: Record<string, "watchlist" | "in_progress" | "completed">;
 }) {
   return (
     <div className="space-y-4">
@@ -30,6 +32,7 @@ export function RecommendationsGrid({
               posterPath={rec.posterPath}
               releaseDate={rec.releaseDate ?? rec.firstAirDate}
               voteAverage={rec.voteAverage}
+              userStatus={userStatuses?.[rec.id]}
             />
           </div>
         ))}

app/(pages)/titles/[id]/_components/title-recommendations.tsx

@@ -1,4 +1,6 @@
+import { getSession } from "@/lib/auth/session";
 import { getRecommendationsForTitle } from "@/lib/services/discovery";
+import { getUserStatusesByTitleIds } from "@/lib/services/tracking";
 import type { RecommendedTitle } from "@/lib/types/title";
 import { RecommendationsGrid } from "./recommendations-grid";
 
@@ -17,5 +19,18 @@ export async function TitleRecommendations({ titleId }: { titleId: string }) {
     voteAverage: r.voteAverage,
   }));
 
-  return <RecommendationsGrid recommendations={recommendations} />;
+  const session = await getSession();
+  const userStatuses = session
+    ? getUserStatusesByTitleIds(
+        session.user.id,
+        recommendations.map((r) => r.id),
+      )
+    : {};
+
+  return (
+    <RecommendationsGrid
+      recommendations={recommendations}
+      userStatuses={userStatuses}
+    />
+  );
 }

lib/services/discovery.ts

@@ -370,6 +370,7 @@ export function getNewAvailableFeed(userId: string, days = 14) {
       firstAirDate: titles.firstAirDate,
       voteAverage: titles.voteAverage,
       popularity: titles.popularity,
+      userStatus: userTitleStatus.status,
     })
     .from(titles)
     .innerJoin(

lib/services/tracking.ts

@@ -451,6 +451,36 @@ export function getUserStatusesByTmdbIds(
   return result;
 }
 
+export function getUserStatusesByTitleIds(
+  userId: string,
+  titleIds: string[],
+): Record<string, "watchlist" | "in_progress" | "completed"> {
+  if (titleIds.length === 0) return {};
+
+  const rows = db
+    .select({
+      titleId: userTitleStatus.titleId,
+      status: userTitleStatus.status,
+    })
+    .from(userTitleStatus)
+    .where(
+      and(
+        eq(userTitleStatus.userId, userId),
+        inArray(userTitleStatus.titleId, titleIds),
+      ),
+    )
+    .all();
+
+  const result: Record<string, "watchlist" | "in_progress" | "completed"> = {};
+  for (const row of rows) {
+    result[row.titleId] = row.status as
+      | "watchlist"
+      | "in_progress"
+      | "completed";
+  }
+  return result;
+}
+
 export function getEpisodeProgressByTmdbIds(
   userId: string,
   tmdbIds: { tmdbId: number; type: string }[],