feat(person): add filters to Known For section (issue #91)

Author: ellite

backend/routers/media.py

@@ -1420,6 +1420,10 @@ async def recently_added(
 async def get_person_details(
     person_id: int,
     page: int = Query(1, ge=1),
+    collection: str | None = Query(None),  # "in" | "out" | None (no filter)
+    genre: list[str] = Query(default=[]),  # OR'd together — any selected genre matches
+    year: list[int] = Query(default=[]),  # OR'd together — any selected year matches
+    min_rating: str | None = Query(None),  # "9".."5" (N+ stars) or "lt5" (under 5 stars)
     db: AsyncSession = Depends(get_db),
     current_user: User = Depends(get_current_user),
 ):
@@ -1448,6 +1452,8 @@ async def get_person_details(
                 "character": c.get("character"),
                 "popularity": popularity,
                 "adult": c.get("adult", False),
+                "genre_ids": c.get("genre_ids", []),
+                "vote_average": c.get("vote_average") or 0,
                 "_score": popularity * max(role_weight, 0.05),
             })
         _crew_dept_weight = {"Directing": 1.0, "Writing": 0.9, "Production": 0.7, "Creator": 1.0}
@@ -1464,6 +1470,8 @@ async def get_person_details(
                 "character": c.get("job"),
                 "popularity": popularity,
                 "adult": c.get("adult", False),
+                "genre_ids": c.get("genre_ids", []),
+                "vote_average": c.get("vote_average") or 0,
                 "_score": popularity * role_weight,
             })
         # Deduplicate by tmdb_id — a person may appear in multiple episodes of the
@@ -1481,10 +1489,48 @@ async def get_person_details(
         deduped.sort(key=lambda x: x["_score"], reverse=True)
         for credit in deduped:
             del credit["_score"]
+
+        # Cheap in-memory filters first (no DB work) to shrink the list before
+        # the collection cross-reference below, which does need a DB round-trip.
+        # Selections within a filter are OR'd (any selected genre/year matches);
+        # the different filters are AND'd together.
+        if genre:
+            def _matches_any_genre(credit: dict) -> bool:
+                genre_map = MOVIE_GENRE_IDS if credit["type"] == "movie" else TV_GENRE_IDS
+                target_ids = {genre_map[g] for g in genre if g in genre_map}
+                return bool(target_ids & set(credit.get("genre_ids", [])))
+            deduped = [c for c in deduped if _matches_any_genre(c)]
+        if year:
+            year_strs = {str(y) for y in year}
+            deduped = [c for c in deduped if (c.get("release_date") or "")[:4] in year_strs]
+        if min_rating == "lt5":
+            deduped = [c for c in deduped if c.get("vote_average", 0) < 5]
+        elif min_rating:
+            try:
+                threshold = float(min_rating)
+            except ValueError:
+                threshold = None
+            if threshold is not None:
+                deduped = [c for c in deduped if c.get("vote_average", 0) >= threshold]
+
+        for credit in deduped:
+            credit.pop("genre_ids", None)
+            credit.pop("vote_average", None)
+
+        if collection in ("in", "out"):
+            # Filter before paginating so total_credits/page counts reflect the
+            # filtered set, not the full filmography (enrich_with_state is a
+            # handful of batched queries regardless of list size, same as any
+            # other listing endpoint here).
+            await enrich_with_state(db, current_user.id, deduped)
+            wants_in_library = collection == "in"
+            deduped = [c for c in deduped if bool(c.get("in_library")) == wants_in_library]
+
         total_credits = len(deduped)
         start = (page - 1) * _PERSON_PAGE_SIZE
         top_credits = deduped[start:start + _PERSON_PAGE_SIZE]
-        await enrich_with_state(db, current_user.id, top_credits)
+        if collection not in ("in", "out"):
+            await enrich_with_state(db, current_user.id, top_credits)
 
         # Which of the user's lists contain this person?
         user_list_ids_q = await db.execute(select(UserList.id).where(UserList.user_id == current_user.id))
@@ -1514,6 +1560,7 @@ async def get_person_details(
             "total_credits": total_credits,
             "page": page,
             "page_size": _PERSON_PAGE_SIZE,
+            "collection": collection,
             "in_lists": person_in_lists,
         }
     except Exception as e:

frontend/src/lib/api.ts

@@ -216,6 +216,7 @@ export interface PersonDetail {
   page: number;
   page_size: number;
   in_lists: number[];
+  collection: "in" | "out" | null;
 }
 
 export interface WatchEvent {
@@ -1068,8 +1069,19 @@ export const api = {
     getRecommendations: (type: string, tmdbId: number, token?: string) =>
       get<{ results: MediaItem[] }>(`/media/${type}/${tmdbId}/recommendations`, undefined, token),
 
-    getPerson: (personId: number, page: number = 1, token?: string) =>
-      get<PersonDetail>(`/media/person/${personId}`, { page }, token),
+    getPerson: (
+      personId: number,
+      page: number = 1,
+      token?: string,
+      filters?: { collection?: "in" | "out" | ""; genre?: string[]; year?: number[]; minRating?: string },
+    ) =>
+      get<PersonDetail>(`/media/person/${personId}`, {
+        page,
+        collection: filters?.collection || undefined,
+        genre: filters?.genre?.length ? filters.genre : undefined,
+        year: filters?.year?.length ? filters.year : undefined,
+        min_rating: filters?.minRating || undefined,
+      }, token),
 
     getCollection: (collectionId: number, token?: string) =>
       get<CollectionDetail>(`/media/collection/${collectionId}`, undefined, token),

frontend/src/pages/partials/person-credits.astro

@@ -7,14 +7,19 @@ export const partial = true;
 const token = Astro.cookies.get("token")?.value;
 const personId = parseInt(Astro.url.searchParams.get("person_id") || "0");
 const page = parseInt(Astro.url.searchParams.get("page") || "1");
+const collectionParam = Astro.url.searchParams.get("collection");
+const collection: "in" | "out" | "" = collectionParam === "in" || collectionParam === "out" ? collectionParam : "";
+const genre = Astro.url.searchParams.getAll("genre");
+const year = Astro.url.searchParams.getAll("year").map(Number).filter((y) => !Number.isNaN(y));
+const minRating = Astro.url.searchParams.get("min_rating") ?? "";
 
 if (!token || !personId) {
   return new Response(null, { status: 400 });
 }
 
 let person: Awaited<ReturnType<typeof api.media.getPerson>>;
 try {
-  person = await api.media.getPerson(personId, page, token);
+  person = await api.media.getPerson(personId, page, token, { collection, genre, year, minRating });
 } catch {
   return new Response(null, { status: 500 });
 }

frontend/src/pages/person/[id].astro

@@ -3,15 +3,36 @@ import Base from "../../layouts/Base.astro";
 import MediaCard from "../../components/MediaCard.astro";
 import ActionBar from "../../components/ActionBar.astro";
 import CommentsSection from "../../components/CommentsSection.astro";
+import FilterPanel from "../../components/FilterPanel.astro";
 import { api, type MediaItem } from "../../lib/api";
 export const prerender = false;
 
 const { id } = Astro.params;
 const { token } = Astro.locals;
-const person = await api.media.getPerson(Number(id), 1, token);
+const collectionParam = Astro.url.searchParams.get("collection");
+const collection: "in" | "out" | "" = collectionParam === "in" || collectionParam === "out" ? collectionParam : "";
+const genre = Astro.url.searchParams.getAll("genre");
+const year = Astro.url.searchParams.getAll("year").map(Number).filter((y) => !Number.isNaN(y));
+const minRating = Astro.url.searchParams.get("min_rating") ?? "";
+const person = await api.media.getPerson(Number(id), 1, token, { collection, genre, year, minRating });
 
 const credits = person.credits || [];
 const totalPages = Math.ceil(person.total_credits / person.page_size);
+
+const MOVIE_GENRES = [
+  "Action", "Adventure", "Animation", "Comedy", "Crime", "Documentary",
+  "Drama", "Family", "Fantasy", "History", "Horror", "Music", "Mystery",
+  "Romance", "Science Fiction", "Thriller", "War", "Western",
+];
+const TV_GENRES = [
+  "Action & Adventure", "Animation", "Comedy", "Crime", "Documentary",
+  "Drama", "Family", "Kids", "Mystery", "News", "Reality",
+  "Sci-Fi & Fantasy", "Soap", "Talk", "War & Politics", "Western",
+];
+const CREDIT_GENRES = Array.from(new Set([...MOVIE_GENRES, ...TV_GENRES])).sort();
+
+const currentYear = new Date().getFullYear();
+const years = Array.from({ length: currentYear - 1949 }, (_, i) => currentYear - i);
 ---
 
 <Base title={person.name}>
@@ -93,17 +114,42 @@ const totalPages = Math.ceil(person.total_credits / person.page_size);
       )}
 
       <div>
-        <h2 class="section-headline mb-6">Known For</h2>
-        <div id="credits-grid" class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-4">
-          {credits.map((item) => (
-            <div class="flex flex-col gap-1">
-              <MediaCard item={item as unknown as MediaItem} />
-              {item.character && (
-                <p class="text-xs text-zinc-500 truncate px-1">as {item.character}</p>
-              )}
-            </div>
-          ))}
+        <div class="flex flex-wrap items-center justify-between gap-4 mb-6">
+          <h2 class="section-headline">Known For</h2>
+          <FilterPanel
+            id="person-credits-filters"
+            basePath={`/person/${id}`}
+            sections={[
+              { key: "collection", label: "Collection", options: [{ value: "in", label: "In My Collection" }, { value: "out", label: "Not In My Collection" }], selected: collection ? [collection] : [], multi: false },
+              { key: "genre", label: "Genre", options: CREDIT_GENRES.map((g) => ({ value: g, label: g })), selected: genre },
+              { key: "year", label: "Year", options: years.map((y) => ({ value: String(y), label: String(y) })), selected: year.map(String) },
+              {
+                key: "min_rating",
+                label: "Rating",
+                options: [
+                  ...[9, 8, 7, 6, 5].map((r) => ({ value: String(r), label: `${r}+ Stars` })),
+                  { value: "lt5", label: "Less than 5 Stars" },
+                ],
+                selected: minRating ? [minRating] : [],
+                multi: false,
+              },
+            ]}
+          />
         </div>
+        {credits.length === 0 && (collection || genre.length > 0 || year.length > 0 || minRating) ? (
+          <p class="text-zinc-500 text-sm">No matching credits found.</p>
+        ) : (
+          <div id="credits-grid" class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-4">
+            {credits.map((item) => (
+              <div class="flex flex-col gap-1">
+                <MediaCard item={item as unknown as MediaItem} />
+                {item.character && (
+                  <p class="text-xs text-zinc-500 truncate px-1">as {item.character}</p>
+                )}
+              </div>
+            ))}
+          </div>
+        )}
         {totalPages > 1 && (
           <div id="credits-pagination" class="flex items-center justify-center gap-3 mt-8">
             <button id="credits-prev" disabled class="px-4 py-2 text-sm rounded-lg bg-zinc-800 text-zinc-400 border border-zinc-700 disabled:opacity-40 disabled:cursor-not-allowed cursor-pointer hover:bg-zinc-700 transition-colors">← Prev</button>
@@ -164,7 +210,7 @@ const totalPages = Math.ceil(person.total_credits / person.page_size);
   }
 </script>
 
-<script define:vars={{ personId: person.tmdb_id, totalCredits: person.total_credits, pageSize: person.page_size }}>
+<script define:vars={{ personId: person.tmdb_id, totalCredits: person.total_credits, pageSize: person.page_size, collection, genre, year, minRating }}>
   const totalPages = Math.ceil(totalCredits / pageSize);
   let currentPage = 1;
   let loading = false;
@@ -188,7 +234,12 @@ const totalPages = Math.ceil(person.total_credits / person.page_size);
     grid.style.pointerEvents = 'none';
 
     try {
-      const res = await fetch('/partials/person-credits?person_id=' + personId + '&page=' + page);
+      const params = new URLSearchParams({ person_id: String(personId), page: String(page) });
+      if (collection) params.set('collection', collection);
+      genre.forEach((g) => params.append('genre', g));
+      year.forEach((y) => params.append('year', String(y)));
+      if (minRating) params.set('min_rating', minRating);
+      const res = await fetch('/partials/person-credits?' + params.toString());
       if (!res.ok) return;
       const html = await res.text();
       const tmp = document.createElement('div');