feat(tv): add shared filter components and collections page support

.claude/learned-facts.md

@@ -30,4 +30,6 @@ This file is auto-imported into CLAUDE.md and loaded at the start of each sessio
 
 - **MPV avfoundation-composite-osd ordering**: On tvOS, the `avfoundation-composite-osd` option MUST be set immediately after `vo=avfoundation`, before any `hwdec` options. Skipping or reordering this causes the app to freeze when exiting the player. Set to "no" on tvOS (prevents gray tint), "yes" on iOS (for PiP subtitle support). _(2026-01-22)_
 
-- **Thread-safe state for stop flags**: When using flags like `isStopping` that control loop termination across threads, the setter must be synchronous (`stateQueue.sync`) not async, otherwise the value may not be visible to other threads in time. _(2026-01-22)_
+- **Thread-safe state for stop flags**: When using flags like `isStopping` that control loop termination across threads, the setter must be synchronous (`stateQueue.sync`) not async, otherwise the value may not be visible to other threads in time. _(2026-01-22)_
+
+- **TV modals must use navigation pattern**: On TV, never use overlay/absolute-positioned modals (like `TVOptionSelector` at the page level). They don't handle the back button correctly. Always use the navigation-based modal pattern: Jotai atom + hook that calls `router.push()` + page in `app/(auth)/`. Use the existing `useTVOptionModal` hook and `tv-option-modal.tsx` page for option selection. `TVOptionSelector` is only appropriate as a sub-selector *within* a navigation-based modal page. _(2026-01-24)_

app/(auth)/(tabs)/(home,libraries,search,favorites,watchlists)/collections/[collectionId].tsx

@@ -15,14 +15,29 @@ import { useAtom } from "jotai";
 import type React from "react";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { FlatList, View } from "react-native";
+import { FlatList, Platform, useWindowDimensions, View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { Text } from "@/components/common/Text";
-import { TouchableItemRouter } from "@/components/common/TouchableItemRouter";
+import {
+  getItemNavigation,
+  TouchableItemRouter,
+} from "@/components/common/TouchableItemRouter";
 import { FilterButton } from "@/components/filters/FilterButton";
 import { ResetFiltersButton } from "@/components/filters/ResetFiltersButton";
 import { ItemCardText } from "@/components/ItemCardText";
+import { Loader } from "@/components/Loader";
 import { ItemPoster } from "@/components/posters/ItemPoster";
+import MoviePoster, {
+  TV_POSTER_WIDTH,
+} from "@/components/posters/MoviePoster.tv";
+import SeriesPoster from "@/components/posters/SeriesPoster.tv";
+import {
+  TVFilterButton,
+  TVFocusablePoster,
+  TVItemCardText,
+} from "@/components/tv";
+import useRouter from "@/hooks/useAppRouter";
+import { useTVOptionModal } from "@/hooks/useTVOptionModal";
 import * as ScreenOrientation from "@/packages/expo-screen-orientation";
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
 import {
@@ -36,6 +51,10 @@ import {
   tagsFilterAtom,
   yearFilterAtom,
 } from "@/utils/atoms/filters";
+import type { TVOptionItem } from "@/utils/atoms/tvOptionModal";
+
+const TV_ITEM_GAP = 16;
+const TV_SCALE_PADDING = 20;
 
 const page: React.FC = () => {
   const searchParams = useLocalSearchParams();
@@ -44,11 +63,15 @@ const page: React.FC = () => {
   const [api] = useAtom(apiAtom);
   const [user] = useAtom(userAtom);
   const navigation = useNavigation();
+  const router = useRouter();
+  const { showOptions } = useTVOptionModal();
+  const { width: screenWidth } = useWindowDimensions();
   const [orientation, _setOrientation] = useState(
     ScreenOrientation.Orientation.PORTRAIT_UP,
   );
 
   const { t } = useTranslation();
+  const insets = useSafeAreaInsets();
 
   const [selectedGenres, setSelectedGenres] = useAtom(genreFilterAtom);
   const [selectedYears, setSelectedYears] = useAtom(yearFilterAtom);
@@ -56,7 +79,7 @@ const page: React.FC = () => {
   const [sortBy, setSortBy] = useAtom(sortByAtom);
   const [sortOrder, setSortOrder] = useAtom(sortOrderAtom);
 
-  const { data: collection } = useQuery({
+  const { data: collection, isLoading: isCollectionLoading } = useQuery({
     queryKey: ["collection", collectionId],
     queryFn: async () => {
       if (!api) return null;
@@ -71,6 +94,46 @@ const page: React.FC = () => {
     staleTime: 60 * 1000,
   });
 
+  // TV Filter queries
+  const { data: tvGenreOptions } = useQuery({
+    queryKey: ["filters", "Genres", "tvGenreFilter", collectionId],
+    queryFn: async () => {
+      if (!api) return [];
+      const response = await getFilterApi(api).getQueryFiltersLegacy({
+        userId: user?.Id,
+        parentId: collectionId,
+      });
+      return response.data.Genres || [];
+    },
+    enabled: Platform.isTV && !!api && !!user?.Id && !!collectionId,
+  });
+
+  const { data: tvYearOptions } = useQuery({
+    queryKey: ["filters", "Years", "tvYearFilter", collectionId],
+    queryFn: async () => {
+      if (!api) return [];
+      const response = await getFilterApi(api).getQueryFiltersLegacy({
+        userId: user?.Id,
+        parentId: collectionId,
+      });
+      return response.data.Years || [];
+    },
+    enabled: Platform.isTV && !!api && !!user?.Id && !!collectionId,
+  });
+
+  const { data: tvTagOptions } = useQuery({
+    queryKey: ["filters", "Tags", "tvTagFilter", collectionId],
+    queryFn: async () => {
+      if (!api) return [];
+      const response = await getFilterApi(api).getQueryFiltersLegacy({
+        userId: user?.Id,
+        parentId: collectionId,
+      });
+      return response.data.Tags || [];
+    },
+    enabled: Platform.isTV && !!api && !!user?.Id && !!collectionId,
+  });
+
   useEffect(() => {
     navigation.setOptions({ title: collection?.Name || "" });
     setSortOrder([SortOrderOption.Ascending]);
@@ -87,6 +150,18 @@ const page: React.FC = () => {
     setSortBy([sortByOption]);
   }, [navigation, collection]);
 
+  // Calculate columns for TV grid
+  const nrOfCols = useMemo(() => {
+    if (Platform.isTV) {
+      const itemWidth = TV_POSTER_WIDTH + TV_ITEM_GAP;
+      return Math.max(
+        1,
+        Math.floor((screenWidth - TV_SCALE_PADDING * 2) / itemWidth),
+      );
+    }
+    return orientation === ScreenOrientation.Orientation.PORTRAIT_UP ? 3 : 5;
+  }, [screenWidth, orientation]);
+
   const fetchItems = useCallback(
     async ({
       pageParam,
@@ -98,7 +173,7 @@ const page: React.FC = () => {
       const response = await getItemsApi(api).getItems({
         userId: user?.Id,
         parentId: collectionId,
-        limit: 18,
+        limit: Platform.isTV ? 36 : 18,
         startIndex: pageParam,
         // Set one ordering at a time. As collections do not work with correctly with multiple.
         sortBy: [sortBy[0]],
@@ -123,6 +198,7 @@ const page: React.FC = () => {
       api,
       user?.Id,
       collection,
+      collectionId,
       selectedGenres,
       selectedYears,
       selectedTags,
@@ -131,39 +207,40 @@ const page: React.FC = () => {
     ],
   );
 
-  const { data, isFetching, fetchNextPage, hasNextPage } = useInfiniteQuery({
-    queryKey: [
-      "collection-items",
-      collection,
-      selectedGenres,
-      selectedYears,
-      selectedTags,
-      sortBy,
-      sortOrder,
-    ],
-    queryFn: fetchItems,
-    getNextPageParam: (lastPage, pages) => {
-      if (
-        !lastPage?.Items ||
-        !lastPage?.TotalRecordCount ||
-        lastPage?.TotalRecordCount === 0
-      )
+  const { data, isFetching, fetchNextPage, hasNextPage, isLoading } =
+    useInfiniteQuery({
+      queryKey: [
+        "collection-items",
+        collectionId,
+        selectedGenres,
+        selectedYears,
+        selectedTags,
+        sortBy,
+        sortOrder,
+      ],
+      queryFn: fetchItems,
+      getNextPageParam: (lastPage, pages) => {
+        if (
+          !lastPage?.Items ||
+          !lastPage?.TotalRecordCount ||
+          lastPage?.TotalRecordCount === 0
+        )
+          return undefined;
+
+        const totalItems = lastPage.TotalRecordCount;
+        const accumulatedItems = pages.reduce(
+          (acc, curr) => acc + (curr?.Items?.length || 0),
+          0,
+        );
+
+        if (accumulatedItems < totalItems) {
+          return lastPage?.Items?.length * pages.length;
+        }
         return undefined;
-
-      const totalItems = lastPage.TotalRecordCount;
-      const accumulatedItems = pages.reduce(
-        (acc, curr) => acc + (curr?.Items?.length || 0),
-        0,
-      );
-
-      if (accumulatedItems < totalItems) {
-        return lastPage?.Items?.length * pages.length;
-      }
-      return undefined;
-    },
-    initialPageParam: 0,
-    enabled: !!api && !!user?.Id && !!collection,
-  });
+      },
+      initialPageParam: 0,
+      enabled: !!api && !!user?.Id && !!collection,
+    });
 
   const flatData = useMemo(() => {
     return (
@@ -195,7 +272,6 @@ const page: React.FC = () => {
           }}
         >
           <ItemPoster item={item} />
-          {/* <MoviePoster item={item} /> */}
           <ItemCardText item={item} />
         </View>
       </TouchableItemRouter>
@@ -203,9 +279,38 @@ const page: React.FC = () => {
     [orientation],
   );
 
-  const keyExtractor = useCallback((item: BaseItemDto) => item.Id || "", []);
+  const renderTVItem = useCallback(
+    ({ item }: { item: BaseItemDto }) => {
+      const handlePress = () => {
+        const navTarget = getItemNavigation(item, "(home)");
+        router.push(navTarget as any);
+      };
 
-  const _insets = useSafeAreaInsets();
+      return (
+        <View
+          style={{
+            marginRight: TV_ITEM_GAP,
+            marginBottom: TV_ITEM_GAP,
+            width: TV_POSTER_WIDTH,
+          }}
+        >
+          <TVFocusablePoster onPress={handlePress}>
+            {item.Type === "Movie" && <MoviePoster item={item} />}
+            {(item.Type === "Series" || item.Type === "Episode") && (
+              <SeriesPoster item={item} />
+            )}
+            {item.Type !== "Movie" &&
+              item.Type !== "Series" &&
+              item.Type !== "Episode" && <MoviePoster item={item} />}
+          </TVFocusablePoster>
+          <TVItemCardText item={item} />
+        </View>
+      );
+    },
+    [router],
+  );
+
+  const keyExtractor = useCallback((item: BaseItemDto) => item.Id || "", []);
 
   const ListHeaderComponent = useCallback(
     () => (
@@ -372,48 +477,315 @@ const page: React.FC = () => {
     ],
   );
 
+  // TV Filter options - with "All" option for clearable filters
+  const tvGenreFilterOptions = useMemo(
+    (): TVOptionItem<string>[] => [
+      {
+        label: t("library.filters.all"),
+        value: "__all__",
+        selected: selectedGenres.length === 0,
+      },
+      ...(tvGenreOptions || []).map((genre) => ({
+        label: genre,
+        value: genre,
+        selected: selectedGenres.includes(genre),
+      })),
+    ],
+    [tvGenreOptions, selectedGenres, t],
+  );
+
+  const tvYearFilterOptions = useMemo(
+    (): TVOptionItem<string>[] => [
+      {
+        label: t("library.filters.all"),
+        value: "__all__",
+        selected: selectedYears.length === 0,
+      },
+      ...(tvYearOptions || []).map((year) => ({
+        label: String(year),
+        value: String(year),
+        selected: selectedYears.includes(String(year)),
+      })),
+    ],
+    [tvYearOptions, selectedYears, t],
+  );
+
+  const tvTagFilterOptions = useMemo(
+    (): TVOptionItem<string>[] => [
+      {
+        label: t("library.filters.all"),
+        value: "__all__",
+        selected: selectedTags.length === 0,
+      },
+      ...(tvTagOptions || []).map((tag) => ({
+        label: tag,
+        value: tag,
+        selected: selectedTags.includes(tag),
+      })),
+    ],
+    [tvTagOptions, selectedTags, t],
+  );
+
+  const tvSortByOptions = useMemo(
+    (): TVOptionItem<SortByOption>[] =>
+      sortOptions.map((option) => ({
+        label: option.value,
+        value: option.key,
+        selected: sortBy[0] === option.key,
+      })),
+    [sortBy],
+  );
+
+  const tvSortOrderOptions = useMemo(
+    (): TVOptionItem<SortOrderOption>[] =>
+      sortOrderOptions.map((option) => ({
+        label: option.value,
+        value: option.key,
+        selected: sortOrder[0] === option.key,
+      })),
+    [sortOrder],
+  );
+
+  // TV Filter handlers using navigation-based modal
+  const handleShowGenreFilter = useCallback(() => {
+    showOptions({
+      title: t("library.filters.genres"),
+      options: tvGenreFilterOptions,
+      onSelect: (value: string) => {
+        if (value === "__all__") {
+          setSelectedGenres([]);
+        } else if (selectedGenres.includes(value)) {
+          setSelectedGenres(selectedGenres.filter((g) => g !== value));
+        } else {
+          setSelectedGenres([...selectedGenres, value]);
+        }
+      },
+    });
+  }, [showOptions, t, tvGenreFilterOptions, selectedGenres, setSelectedGenres]);
+
+  const handleShowYearFilter = useCallback(() => {
+    showOptions({
+      title: t("library.filters.years"),
+      options: tvYearFilterOptions,
+      onSelect: (value: string) => {
+        if (value === "__all__") {
+          setSelectedYears([]);
+        } else if (selectedYears.includes(value)) {
+          setSelectedYears(selectedYears.filter((y) => y !== value));
+        } else {
+          setSelectedYears([...selectedYears, value]);
+        }
+      },
+    });
+  }, [showOptions, t, tvYearFilterOptions, selectedYears, setSelectedYears]);
+
+  const handleShowTagFilter = useCallback(() => {
+    showOptions({
+      title: t("library.filters.tags"),
+      options: tvTagFilterOptions,
+      onSelect: (value: string) => {
+        if (value === "__all__") {
+          setSelectedTags([]);
+        } else if (selectedTags.includes(value)) {
+          setSelectedTags(selectedTags.filter((tag) => tag !== value));
+        } else {
+          setSelectedTags([...selectedTags, value]);
+        }
+      },
+    });
+  }, [showOptions, t, tvTagFilterOptions, selectedTags, setSelectedTags]);
+
+  const handleShowSortByFilter = useCallback(() => {
+    showOptions({
+      title: t("library.filters.sort_by"),
+      options: tvSortByOptions,
+      onSelect: (value: SortByOption) => {
+        setSortBy([value]);
+      },
+    });
+  }, [showOptions, t, tvSortByOptions, setSortBy]);
+
+  const handleShowSortOrderFilter = useCallback(() => {
+    showOptions({
+      title: t("library.filters.sort_order"),
+      options: tvSortOrderOptions,
+      onSelect: (value: SortOrderOption) => {
+        setSortOrder([value]);
+      },
+    });
+  }, [showOptions, t, tvSortOrderOptions, setSortOrder]);
+
+  // TV filter bar state
+  const hasActiveFilters =
+    selectedGenres.length > 0 ||
+    selectedYears.length > 0 ||
+    selectedTags.length > 0;
+
+  const resetAllFilters = useCallback(() => {
+    setSelectedGenres([]);
+    setSelectedYears([]);
+    setSelectedTags([]);
+  }, [setSelectedGenres, setSelectedYears, setSelectedTags]);
+
+  if (isLoading || isCollectionLoading) {
+    return (
+      <View className='w-full h-full flex items-center justify-center'>
+        <Loader />
+      </View>
+    );
+  }
+
   if (!collection) return null;
 
-  return (
-    <FlashList
-      ListEmptyComponent={
-        <View className='flex flex-col items-center justify-center h-full'>
-          <Text className='font-bold text-xl text-neutral-500'>
-            {t("search.no_results")}
-          </Text>
-        </View>
-      }
-      extraData={[
-        selectedGenres,
-        selectedYears,
-        selectedTags,
-        sortBy,
-        sortOrder,
-      ]}
-      contentInsetAdjustmentBehavior='automatic'
-      data={flatData}
-      renderItem={renderItem}
-      keyExtractor={keyExtractor}
-      numColumns={
-        orientation === ScreenOrientation.Orientation.PORTRAIT_UP ? 3 : 5
-      }
-      onEndReached={() => {
-        if (hasNextPage) {
-          fetchNextPage();
+  // Mobile return
+  if (!Platform.isTV) {
+    return (
+      <FlashList
+        ListEmptyComponent={
+          <View className='flex flex-col items-center justify-center h-full'>
+            <Text className='font-bold text-xl text-neutral-500'>
+              {t("search.no_results")}
+            </Text>
+          </View>
         }
-      }}
-      onEndReachedThreshold={0.5}
-      ListHeaderComponent={ListHeaderComponent}
-      contentContainerStyle={{ paddingBottom: 24 }}
-      ItemSeparatorComponent={() => (
-        <View
-          style={{
-            width: 10,
-            height: 10,
-          }}
+        extraData={[
+          selectedGenres,
+          selectedYears,
+          selectedTags,
+          sortBy,
+          sortOrder,
+        ]}
+        contentInsetAdjustmentBehavior='automatic'
+        data={flatData}
+        renderItem={renderItem}
+        keyExtractor={keyExtractor}
+        numColumns={nrOfCols}
+        onEndReached={() => {
+          if (hasNextPage) {
+            fetchNextPage();
+          }
+        }}
+        onEndReachedThreshold={0.5}
+        ListHeaderComponent={ListHeaderComponent}
+        contentContainerStyle={{ paddingBottom: 24 }}
+        ItemSeparatorComponent={() => (
+          <View
+            style={{
+              width: 10,
+              height: 10,
+            }}
+          />
+        )}
+      />
+    );
+  }
+
+  // TV return with filter bar
+  return (
+    <View style={{ flex: 1 }}>
+      {/* Filter bar */}
+      <View
+        style={{
+          flexDirection: "row",
+          flexWrap: "nowrap",
+          marginTop: insets.top + 100,
+          paddingBottom: 8,
+          paddingHorizontal: TV_SCALE_PADDING,
+          gap: 12,
+        }}
+      >
+        {hasActiveFilters && (
+          <TVFilterButton
+            label=''
+            value={t("library.filters.reset")}
+            onPress={resetAllFilters}
+            hasActiveFilter
+          />
+        )}
+        <TVFilterButton
+          label={t("library.filters.genres")}
+          value={
+            selectedGenres.length > 0
+              ? `${selectedGenres.length} selected`
+              : t("library.filters.all")
+          }
+          onPress={handleShowGenreFilter}
+          hasTVPreferredFocus={!hasActiveFilters}
+          hasActiveFilter={selectedGenres.length > 0}
         />
-      )}
-    />
+        <TVFilterButton
+          label={t("library.filters.years")}
+          value={
+            selectedYears.length > 0
+              ? `${selectedYears.length} selected`
+              : t("library.filters.all")
+          }
+          onPress={handleShowYearFilter}
+          hasActiveFilter={selectedYears.length > 0}
+        />
+        <TVFilterButton
+          label={t("library.filters.tags")}
+          value={
+            selectedTags.length > 0
+              ? `${selectedTags.length} selected`
+              : t("library.filters.all")
+          }
+          onPress={handleShowTagFilter}
+          hasActiveFilter={selectedTags.length > 0}
+        />
+        <TVFilterButton
+          label={t("library.filters.sort_by")}
+          value={sortOptions.find((o) => o.key === sortBy[0])?.value || ""}
+          onPress={handleShowSortByFilter}
+        />
+        <TVFilterButton
+          label={t("library.filters.sort_order")}
+          value={
+            sortOrderOptions.find((o) => o.key === sortOrder[0])?.value || ""
+          }
+          onPress={handleShowSortOrderFilter}
+        />
+      </View>
+
+      {/* Grid */}
+      <FlatList
+        key={`${orientation}-${nrOfCols}`}
+        ListEmptyComponent={
+          <View className='flex flex-col items-center justify-center h-full'>
+            <Text className='font-bold text-xl text-neutral-500'>
+              {t("search.no_results")}
+            </Text>
+          </View>
+        }
+        contentInsetAdjustmentBehavior='automatic'
+        data={flatData}
+        renderItem={renderTVItem}
+        extraData={[orientation, nrOfCols]}
+        keyExtractor={keyExtractor}
+        numColumns={nrOfCols}
+        removeClippedSubviews={false}
+        onEndReached={() => {
+          if (hasNextPage) {
+            fetchNextPage();
+          }
+        }}
+        onEndReachedThreshold={1}
+        contentContainerStyle={{
+          paddingBottom: 24,
+          paddingLeft: TV_SCALE_PADDING,
+          paddingRight: TV_SCALE_PADDING,
+          paddingTop: 20,
+        }}
+        ItemSeparatorComponent={() => (
+          <View
+            style={{
+              width: 10,
+              height: 10,
+            }}
+          />
+        )}
+      />
+    </View>
   );
 };
 

app/(auth)/(tabs)/(libraries)/[libraryId].tsx

@@ -1,4 +1,3 @@
-import { Ionicons } from "@expo/vector-icons";
 import type {
   BaseItemDto,
   BaseItemDtoQueryResult,
@@ -12,27 +11,11 @@ import {
 } from "@jellyfin/sdk/lib/utils/api";
 import { FlashList } from "@shopify/flash-list";
 import { useInfiniteQuery, useQuery } from "@tanstack/react-query";
-import { BlurView } from "expo-blur";
 import { useLocalSearchParams, useNavigation } from "expo-router";
 import { useAtom } from "jotai";
-import React, {
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from "react";
+import React, { useCallback, useEffect, useMemo } from "react";
 import { useTranslation } from "react-i18next";
-import {
-  Animated,
-  Easing,
-  FlatList,
-  Platform,
-  Pressable,
-  ScrollView,
-  useWindowDimensions,
-  View,
-} from "react-native";
+import { FlatList, Platform, useWindowDimensions, View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { Text } from "@/components/common/Text";
 import {
@@ -48,9 +31,14 @@ import MoviePoster, {
   TV_POSTER_WIDTH,
 } from "@/components/posters/MoviePoster.tv";
 import SeriesPoster from "@/components/posters/SeriesPoster.tv";
-import { TVFocusablePoster } from "@/components/tv/TVFocusablePoster";
+import {
+  TVFilterButton,
+  TVFocusablePoster,
+  TVItemCardText,
+} from "@/components/tv";
 import useRouter from "@/hooks/useAppRouter";
 import { useOrientation } from "@/hooks/useOrientation";
+import { useTVOptionModal } from "@/hooks/useTVOptionModal";
 import * as ScreenOrientation from "@/packages/expo-screen-orientation";
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
 import {
@@ -74,281 +62,11 @@ import {
   yearFilterAtom,
 } from "@/utils/atoms/filters";
 import { useSettings } from "@/utils/atoms/settings";
+import type { TVOptionItem } from "@/utils/atoms/tvOptionModal";
 
 const TV_ITEM_GAP = 16;
 const TV_SCALE_PADDING = 20;
 
-const TVItemCardText: React.FC<{ item: BaseItemDto }> = ({ item }) => (
-  <View style={{ marginTop: 12 }}>
-    <Text numberOfLines={1} style={{ fontSize: 16, color: "#FFFFFF" }}>
-      {item.Name}
-    </Text>
-    <Text style={{ fontSize: 14, color: "#9CA3AF", marginTop: 2 }}>
-      {item.ProductionYear}
-    </Text>
-  </View>
-);
-
-// TV Filter Types and Components
-type TVFilterModalType =
-  | "genre"
-  | "year"
-  | "tags"
-  | "sortBy"
-  | "sortOrder"
-  | "filterBy"
-  | null;
-
-interface TVFilterOption<T> {
-  label: string;
-  value: T;
-  selected: boolean;
-}
-
-const TVFilterOptionCard: React.FC<{
-  label: string;
-  selected: boolean;
-  hasTVPreferredFocus?: boolean;
-  onPress: () => void;
-}> = ({ label, selected, hasTVPreferredFocus, onPress }) => {
-  const [focused, setFocused] = useState(false);
-  const scale = useRef(new Animated.Value(1)).current;
-
-  const animateTo = (v: number) =>
-    Animated.timing(scale, {
-      toValue: v,
-      duration: 150,
-      easing: Easing.out(Easing.quad),
-      useNativeDriver: true,
-    }).start();
-
-  return (
-    <Pressable
-      onPress={onPress}
-      onFocus={() => {
-        setFocused(true);
-        animateTo(1.05);
-      }}
-      onBlur={() => {
-        setFocused(false);
-        animateTo(1);
-      }}
-      hasTVPreferredFocus={hasTVPreferredFocus}
-    >
-      <Animated.View
-        style={{
-          transform: [{ scale }],
-          width: 160,
-          height: 75,
-          backgroundColor: focused
-            ? "#fff"
-            : selected
-              ? "rgba(255,255,255,0.2)"
-              : "rgba(255,255,255,0.08)",
-          borderRadius: 14,
-          justifyContent: "center",
-          alignItems: "center",
-          paddingHorizontal: 12,
-        }}
-      >
-        <Text
-          style={{
-            fontSize: 16,
-            color: focused ? "#000" : "#fff",
-            fontWeight: focused || selected ? "600" : "400",
-            textAlign: "center",
-          }}
-          numberOfLines={2}
-        >
-          {label}
-        </Text>
-        {selected && !focused && (
-          <View style={{ position: "absolute", top: 8, right: 8 }}>
-            <Ionicons
-              name='checkmark'
-              size={16}
-              color='rgba(255,255,255,0.8)'
-            />
-          </View>
-        )}
-      </Animated.View>
-    </Pressable>
-  );
-};
-
-const TVFilterButton: React.FC<{
-  label: string;
-  value: string;
-  onPress: () => void;
-  hasTVPreferredFocus?: boolean;
-  disabled?: boolean;
-  hasActiveFilter?: boolean;
-}> = ({
-  label,
-  value,
-  onPress,
-  hasTVPreferredFocus,
-  disabled,
-  hasActiveFilter,
-}) => {
-  const [focused, setFocused] = useState(false);
-  const scale = useRef(new Animated.Value(1)).current;
-
-  const animateTo = (v: number) =>
-    Animated.timing(scale, {
-      toValue: v,
-      duration: 120,
-      easing: Easing.out(Easing.quad),
-      useNativeDriver: true,
-    }).start();
-
-  return (
-    <Pressable
-      onPress={onPress}
-      onFocus={() => {
-        setFocused(true);
-        animateTo(1.04);
-      }}
-      onBlur={() => {
-        setFocused(false);
-        animateTo(1);
-      }}
-      hasTVPreferredFocus={hasTVPreferredFocus && !disabled}
-      disabled={disabled}
-      focusable={!disabled}
-    >
-      <Animated.View style={{ transform: [{ scale }] }}>
-        <View
-          style={{
-            backgroundColor: focused
-              ? "#fff"
-              : hasActiveFilter
-                ? "rgba(255, 255, 255, 0.25)"
-                : "rgba(255,255,255,0.1)",
-            borderRadius: 10,
-            paddingVertical: 10,
-            paddingHorizontal: 16,
-            flexDirection: "row",
-            alignItems: "center",
-            gap: 8,
-            borderWidth: hasActiveFilter && !focused ? 1 : 0,
-            borderColor: "rgba(255, 255, 255, 0.4)",
-          }}
-        >
-          {label ? (
-            <Text style={{ fontSize: 14, color: focused ? "#444" : "#bbb" }}>
-              {label}
-            </Text>
-          ) : null}
-          <Text
-            style={{
-              fontSize: 14,
-              color: focused ? "#000" : "#FFFFFF",
-              fontWeight: "500",
-            }}
-            numberOfLines={1}
-          >
-            {value}
-          </Text>
-        </View>
-      </Animated.View>
-    </Pressable>
-  );
-};
-
-const TVFilterSelector = <T,>({
-  visible,
-  title,
-  options,
-  onSelect,
-  onClose,
-}: {
-  visible: boolean;
-  title: string;
-  options: TVFilterOption<T>[];
-  onSelect: (value: T) => void;
-  onClose: () => void;
-}) => {
-  // Track initial focus index - only set once when modal opens
-  const initialFocusIndexRef = useRef<number | null>(null);
-
-  // Calculate initial focus index only once when visible becomes true
-  if (visible && initialFocusIndexRef.current === null) {
-    const idx = options.findIndex((o) => o.selected);
-    initialFocusIndexRef.current = idx >= 0 ? idx : 0;
-  }
-
-  // Reset when modal closes
-  if (!visible) {
-    initialFocusIndexRef.current = null;
-    return null;
-  }
-
-  const initialFocusIndex = initialFocusIndexRef.current ?? 0;
-
-  return (
-    <View
-      style={{
-        position: "absolute",
-        top: 0,
-        left: 0,
-        right: 0,
-        bottom: 0,
-        backgroundColor: "rgba(0, 0, 0, 0.5)",
-        justifyContent: "flex-end",
-        zIndex: 1000,
-      }}
-    >
-      <BlurView
-        intensity={80}
-        tint='dark'
-        style={{
-          borderTopLeftRadius: 24,
-          borderTopRightRadius: 24,
-          overflow: "hidden",
-        }}
-      >
-        <View style={{ paddingVertical: 24 }}>
-          <Text
-            style={{
-              fontSize: 20,
-              fontWeight: "600",
-              color: "#fff",
-              paddingHorizontal: 48,
-              marginBottom: 16,
-            }}
-          >
-            {title}
-          </Text>
-          <ScrollView
-            horizontal
-            showsHorizontalScrollIndicator={false}
-            style={{ overflow: "visible" }}
-            contentContainerStyle={{
-              paddingHorizontal: 48,
-              paddingVertical: 10,
-              gap: 12,
-            }}
-          >
-            {options.map((option, index) => (
-              <TVFilterOptionCard
-                key={String(option.value)}
-                label={option.label}
-                selected={option.selected}
-                hasTVPreferredFocus={index === initialFocusIndex}
-                onPress={() => {
-                  onSelect(option.value);
-                  onClose();
-                }}
-              />
-            ))}
-          </ScrollView>
-        </View>
-      </BlurView>
-    </View>
-  );
-};
-
 const Page = () => {
   const searchParams = useLocalSearchParams() as {
     libraryId: string;
@@ -380,13 +98,7 @@ const Page = () => {
 
   const { t } = useTranslation();
   const router = useRouter();
-
-  // TV Filter modal state
-  const [openFilterModal, setOpenFilterModal] =
-    useState<TVFilterModalType>(null);
-  const isFilterModalOpen = openFilterModal !== null;
-
-  const isFiltersDisabled = isFilterModalOpen;
+  const { showOptions } = useTVOptionModal();
 
   // TV Filter queries
   const { data: tvGenreOptions } = useQuery({
@@ -696,7 +408,7 @@ const Page = () => {
             width: TV_POSTER_WIDTH,
           }}
         >
-          <TVFocusablePoster onPress={handlePress} disabled={isFilterModalOpen}>
+          <TVFocusablePoster onPress={handlePress}>
             {item.Type === "Movie" && <MoviePoster item={item} />}
             {(item.Type === "Series" || item.Type === "Episode") && (
               <SeriesPoster item={item} />
@@ -709,7 +421,7 @@ const Page = () => {
         </View>
       );
     },
-    [router, isFilterModalOpen],
+    [router],
   );
 
   const keyExtractor = useCallback((item: BaseItemDto) => item.Id || "", []);
@@ -912,7 +624,7 @@ const Page = () => {
 
   // TV Filter options - with "All" option for clearable filters
   const tvGenreFilterOptions = useMemo(
-    (): TVFilterOption<string>[] => [
+    (): TVOptionItem<string>[] => [
       {
         label: t("library.filters.all"),
         value: "__all__",
@@ -928,7 +640,7 @@ const Page = () => {
   );
 
   const tvYearFilterOptions = useMemo(
-    (): TVFilterOption<string>[] => [
+    (): TVOptionItem<string>[] => [
       {
         label: t("library.filters.all"),
         value: "__all__",
@@ -944,7 +656,7 @@ const Page = () => {
   );
 
   const tvTagFilterOptions = useMemo(
-    (): TVFilterOption<string>[] => [
+    (): TVOptionItem<string>[] => [
       {
         label: t("library.filters.all"),
         value: "__all__",
@@ -960,7 +672,7 @@ const Page = () => {
   );
 
   const tvSortByOptions = useMemo(
-    (): TVFilterOption<SortByOption>[] =>
+    (): TVOptionItem<SortByOption>[] =>
       sortOptions.map((option) => ({
         label: option.value,
         value: option.key,
@@ -970,7 +682,7 @@ const Page = () => {
   );
 
   const tvSortOrderOptions = useMemo(
-    (): TVFilterOption<SortOrderOption>[] =>
+    (): TVOptionItem<SortOrderOption>[] =>
       sortOrderOptions.map((option) => ({
         label: option.value,
         value: option.key,
@@ -980,7 +692,7 @@ const Page = () => {
   );
 
   const tvFilterByOptions = useMemo(
-    (): TVFilterOption<string>[] => [
+    (): TVOptionItem<string>[] => [
       {
         label: t("library.filters.all"),
         value: "__all__",
@@ -995,56 +707,88 @@ const Page = () => {
     [filterBy, generalFilters, t],
   );
 
-  // TV Filter handlers
-  const handleGenreSelect = useCallback(
-    (value: string) => {
-      if (value === "__all__") {
-        setSelectedGenres([]);
-      } else if (selectedGenres.includes(value)) {
-        setSelectedGenres(selectedGenres.filter((g) => g !== value));
-      } else {
-        setSelectedGenres([...selectedGenres, value]);
-      }
-    },
-    [selectedGenres, setSelectedGenres],
-  );
+  // TV Filter handlers using navigation-based modal
+  const handleShowGenreFilter = useCallback(() => {
+    showOptions({
+      title: t("library.filters.genres"),
+      options: tvGenreFilterOptions,
+      onSelect: (value: string) => {
+        if (value === "__all__") {
+          setSelectedGenres([]);
+        } else if (selectedGenres.includes(value)) {
+          setSelectedGenres(selectedGenres.filter((g) => g !== value));
+        } else {
+          setSelectedGenres([...selectedGenres, value]);
+        }
+      },
+    });
+  }, [showOptions, t, tvGenreFilterOptions, selectedGenres, setSelectedGenres]);
 
-  const handleYearSelect = useCallback(
-    (value: string) => {
-      if (value === "__all__") {
-        setSelectedYears([]);
-      } else if (selectedYears.includes(value)) {
-        setSelectedYears(selectedYears.filter((y) => y !== value));
-      } else {
-        setSelectedYears([...selectedYears, value]);
-      }
-    },
-    [selectedYears, setSelectedYears],
-  );
+  const handleShowYearFilter = useCallback(() => {
+    showOptions({
+      title: t("library.filters.years"),
+      options: tvYearFilterOptions,
+      onSelect: (value: string) => {
+        if (value === "__all__") {
+          setSelectedYears([]);
+        } else if (selectedYears.includes(value)) {
+          setSelectedYears(selectedYears.filter((y) => y !== value));
+        } else {
+          setSelectedYears([...selectedYears, value]);
+        }
+      },
+    });
+  }, [showOptions, t, tvYearFilterOptions, selectedYears, setSelectedYears]);
 
-  const handleTagSelect = useCallback(
-    (value: string) => {
-      if (value === "__all__") {
-        setSelectedTags([]);
-      } else if (selectedTags.includes(value)) {
-        setSelectedTags(selectedTags.filter((t) => t !== value));
-      } else {
-        setSelectedTags([...selectedTags, value]);
-      }
-    },
-    [selectedTags, setSelectedTags],
-  );
+  const handleShowTagFilter = useCallback(() => {
+    showOptions({
+      title: t("library.filters.tags"),
+      options: tvTagFilterOptions,
+      onSelect: (value: string) => {
+        if (value === "__all__") {
+          setSelectedTags([]);
+        } else if (selectedTags.includes(value)) {
+          setSelectedTags(selectedTags.filter((tag) => tag !== value));
+        } else {
+          setSelectedTags([...selectedTags, value]);
+        }
+      },
+    });
+  }, [showOptions, t, tvTagFilterOptions, selectedTags, setSelectedTags]);
 
-  const handleFilterBySelect = useCallback(
-    (value: string) => {
-      if (value === "__all__") {
-        _setFilterBy([]);
-      } else {
-        setFilter([value as FilterByOption]);
-      }
-    },
-    [setFilter, _setFilterBy],
-  );
+  const handleShowSortByFilter = useCallback(() => {
+    showOptions({
+      title: t("library.filters.sort_by"),
+      options: tvSortByOptions,
+      onSelect: (value: SortByOption) => {
+        setSortBy([value]);
+      },
+    });
+  }, [showOptions, t, tvSortByOptions, setSortBy]);
+
+  const handleShowSortOrderFilter = useCallback(() => {
+    showOptions({
+      title: t("library.filters.sort_order"),
+      options: tvSortOrderOptions,
+      onSelect: (value: SortOrderOption) => {
+        setSortOrder([value]);
+      },
+    });
+  }, [showOptions, t, tvSortOrderOptions, setSortOrder]);
+
+  const handleShowFilterByFilter = useCallback(() => {
+    showOptions({
+      title: t("library.filters.filter_by"),
+      options: tvFilterByOptions,
+      onSelect: (value: string) => {
+        if (value === "__all__") {
+          _setFilterBy([]);
+        } else {
+          setFilter([value as FilterByOption]);
+        }
+      },
+    });
+  }, [showOptions, t, tvFilterByOptions, setFilter, _setFilterBy]);
 
   const insets = useSafeAreaInsets();
 
@@ -1097,183 +841,120 @@ const Page = () => {
     );
   }
 
-  // TV return with filter overlays - filter bar outside FlatList to fix focus boundary issues
+  // TV return with filter bar
   return (
     <View style={{ flex: 1 }}>
-      {/* Background content - disabled when modal is open */}
+      {/* Filter bar - using View instead of ScrollView to avoid focus conflicts */}
       <View
-        style={{ flex: 1, opacity: isFilterModalOpen ? 0.3 : 1 }}
-        focusable={!isFilterModalOpen}
-        isTVSelectable={!isFilterModalOpen}
-        pointerEvents={isFilterModalOpen ? "none" : "auto"}
-        accessibilityElementsHidden={isFilterModalOpen}
-        importantForAccessibility={
-          isFilterModalOpen ? "no-hide-descendants" : "auto"
-        }
+        style={{
+          flexDirection: "row",
+          flexWrap: "nowrap",
+          marginTop: insets.top + 100,
+          paddingBottom: 8,
+          paddingHorizontal: TV_SCALE_PADDING,
+          gap: 12,
+        }}
       >
-        {/* Filter bar - using View instead of ScrollView to avoid focus conflicts */}
-        <View
-          style={{
-            flexDirection: "row",
-            flexWrap: "nowrap",
-            marginTop: insets.top + 100,
-            paddingBottom: 8,
-            paddingHorizontal: TV_SCALE_PADDING,
-            gap: 12,
-          }}
-        >
-          {hasActiveFilters && (
-            <TVFilterButton
-              label=''
-              value={t("library.filters.reset")}
-              onPress={resetAllFilters}
-              disabled={isFiltersDisabled}
-              hasActiveFilter
-            />
-          )}
+        {hasActiveFilters && (
           <TVFilterButton
-            label={t("library.filters.genres")}
-            value={
-              selectedGenres.length > 0
-                ? `${selectedGenres.length} selected`
-                : t("library.filters.all")
-            }
-            onPress={() => setOpenFilterModal("genre")}
-            hasTVPreferredFocus={!hasActiveFilters}
-            disabled={isFiltersDisabled}
-            hasActiveFilter={selectedGenres.length > 0}
+            label=''
+            value={t("library.filters.reset")}
+            onPress={resetAllFilters}
+            hasActiveFilter
           />
-          <TVFilterButton
-            label={t("library.filters.years")}
-            value={
-              selectedYears.length > 0
-                ? `${selectedYears.length} selected`
-                : t("library.filters.all")
-            }
-            onPress={() => setOpenFilterModal("year")}
-            disabled={isFiltersDisabled}
-            hasActiveFilter={selectedYears.length > 0}
-          />
-          <TVFilterButton
-            label={t("library.filters.tags")}
-            value={
-              selectedTags.length > 0
-                ? `${selectedTags.length} selected`
-                : t("library.filters.all")
-            }
-            onPress={() => setOpenFilterModal("tags")}
-            disabled={isFiltersDisabled}
-            hasActiveFilter={selectedTags.length > 0}
-          />
-          <TVFilterButton
-            label={t("library.filters.sort_by")}
-            value={sortOptions.find((o) => o.key === sortBy[0])?.value || ""}
-            onPress={() => setOpenFilterModal("sortBy")}
-            disabled={isFiltersDisabled}
-          />
-          <TVFilterButton
-            label={t("library.filters.sort_order")}
-            value={
-              sortOrderOptions.find((o) => o.key === sortOrder[0])?.value || ""
-            }
-            onPress={() => setOpenFilterModal("sortOrder")}
-            disabled={isFiltersDisabled}
-          />
-          <TVFilterButton
-            label={t("library.filters.filter_by")}
-            value={
-              filterBy.length > 0
-                ? generalFilters.find((o) => o.key === filterBy[0])?.value || ""
-                : t("library.filters.all")
-            }
-            onPress={() => setOpenFilterModal("filterBy")}
-            disabled={isFiltersDisabled}
-            hasActiveFilter={filterBy.length > 0}
-          />
-        </View>
-
-        {/* Grid - using FlatList instead of FlashList to fix focus issues */}
-        <FlatList
-          key={`${orientation}-${nrOfCols}`}
-          ListEmptyComponent={
-            <View className='flex flex-col items-center justify-center h-full'>
-              <Text className='font-bold text-xl text-neutral-500'>
-                {t("library.no_results")}
-              </Text>
-            </View>
+        )}
+        <TVFilterButton
+          label={t("library.filters.genres")}
+          value={
+            selectedGenres.length > 0
+              ? `${selectedGenres.length} selected`
+              : t("library.filters.all")
           }
-          contentInsetAdjustmentBehavior='automatic'
-          data={flatData}
-          renderItem={renderTVItem}
-          extraData={[orientation, nrOfCols, isFilterModalOpen]}
-          keyExtractor={keyExtractor}
-          numColumns={nrOfCols}
-          removeClippedSubviews={false}
-          onEndReached={() => {
-            if (hasNextPage) {
-              fetchNextPage();
-            }
-          }}
-          onEndReachedThreshold={1}
-          contentContainerStyle={{
-            paddingBottom: 24,
-            paddingLeft: TV_SCALE_PADDING,
-            paddingRight: TV_SCALE_PADDING,
-            paddingTop: 20,
-          }}
-          ItemSeparatorComponent={() => (
-            <View
-              style={{
-                width: 10,
-                height: 10,
-              }}
-            />
-          )}
+          onPress={handleShowGenreFilter}
+          hasTVPreferredFocus={!hasActiveFilters}
+          hasActiveFilter={selectedGenres.length > 0}
+        />
+        <TVFilterButton
+          label={t("library.filters.years")}
+          value={
+            selectedYears.length > 0
+              ? `${selectedYears.length} selected`
+              : t("library.filters.all")
+          }
+          onPress={handleShowYearFilter}
+          hasActiveFilter={selectedYears.length > 0}
+        />
+        <TVFilterButton
+          label={t("library.filters.tags")}
+          value={
+            selectedTags.length > 0
+              ? `${selectedTags.length} selected`
+              : t("library.filters.all")
+          }
+          onPress={handleShowTagFilter}
+          hasActiveFilter={selectedTags.length > 0}
+        />
+        <TVFilterButton
+          label={t("library.filters.sort_by")}
+          value={sortOptions.find((o) => o.key === sortBy[0])?.value || ""}
+          onPress={handleShowSortByFilter}
+        />
+        <TVFilterButton
+          label={t("library.filters.sort_order")}
+          value={
+            sortOrderOptions.find((o) => o.key === sortOrder[0])?.value || ""
+          }
+          onPress={handleShowSortOrderFilter}
+        />
+        <TVFilterButton
+          label={t("library.filters.filter_by")}
+          value={
+            filterBy.length > 0
+              ? generalFilters.find((o) => o.key === filterBy[0])?.value || ""
+              : t("library.filters.all")
+          }
+          onPress={handleShowFilterByFilter}
+          hasActiveFilter={filterBy.length > 0}
         />
       </View>
 
-      {/* TV Filter Overlays */}
-      <TVFilterSelector
-        visible={openFilterModal === "genre"}
-        title={t("library.filters.genres")}
-        options={tvGenreFilterOptions}
-        onSelect={handleGenreSelect}
-        onClose={() => setOpenFilterModal(null)}
-      />
-      <TVFilterSelector
-        visible={openFilterModal === "year"}
-        title={t("library.filters.years")}
-        options={tvYearFilterOptions}
-        onSelect={handleYearSelect}
-        onClose={() => setOpenFilterModal(null)}
-      />
-      <TVFilterSelector
-        visible={openFilterModal === "tags"}
-        title={t("library.filters.tags")}
-        options={tvTagFilterOptions}
-        onSelect={handleTagSelect}
-        onClose={() => setOpenFilterModal(null)}
-      />
-      <TVFilterSelector
-        visible={openFilterModal === "sortBy"}
-        title={t("library.filters.sort_by")}
-        options={tvSortByOptions}
-        onSelect={(value) => setSortBy([value])}
-        onClose={() => setOpenFilterModal(null)}
-      />
-      <TVFilterSelector
-        visible={openFilterModal === "sortOrder"}
-        title={t("library.filters.sort_order")}
-        options={tvSortOrderOptions}
-        onSelect={(value) => setSortOrder([value])}
-        onClose={() => setOpenFilterModal(null)}
-      />
-      <TVFilterSelector
-        visible={openFilterModal === "filterBy"}
-        title={t("library.filters.filter_by")}
-        options={tvFilterByOptions}
-        onSelect={handleFilterBySelect}
-        onClose={() => setOpenFilterModal(null)}
+      {/* Grid - using FlatList instead of FlashList to fix focus issues */}
+      <FlatList
+        key={`${orientation}-${nrOfCols}`}
+        ListEmptyComponent={
+          <View className='flex flex-col items-center justify-center h-full'>
+            <Text className='font-bold text-xl text-neutral-500'>
+              {t("library.no_results")}
+            </Text>
+          </View>
+        }
+        contentInsetAdjustmentBehavior='automatic'
+        data={flatData}
+        renderItem={renderTVItem}
+        extraData={[orientation, nrOfCols]}
+        keyExtractor={keyExtractor}
+        numColumns={nrOfCols}
+        removeClippedSubviews={false}
+        onEndReached={() => {
+          if (hasNextPage) {
+            fetchNextPage();
+          }
+        }}
+        onEndReachedThreshold={1}
+        contentContainerStyle={{
+          paddingBottom: 24,
+          paddingLeft: TV_SCALE_PADDING,
+          paddingRight: TV_SCALE_PADDING,
+          paddingTop: 20,
+        }}
+        ItemSeparatorComponent={() => (
+          <View
+            style={{
+              width: 10,
+              height: 10,
+            }}
+          />
+        )}
       />
     </View>
   );

components/tv/TVFilterButton.tsx

@@ -0,0 +1,78 @@
+import React from "react";
+import { Animated, Pressable, View } from "react-native";
+import { Text } from "@/components/common/Text";
+import { TVTypography } from "@/constants/TVTypography";
+import { useTVFocusAnimation } from "./hooks/useTVFocusAnimation";
+
+export interface TVFilterButtonProps {
+  label: string;
+  value: string;
+  onPress: () => void;
+  hasTVPreferredFocus?: boolean;
+  disabled?: boolean;
+  hasActiveFilter?: boolean;
+}
+
+export const TVFilterButton: React.FC<TVFilterButtonProps> = ({
+  label,
+  value,
+  onPress,
+  hasTVPreferredFocus = false,
+  disabled = false,
+  hasActiveFilter = false,
+}) => {
+  const { focused, handleFocus, handleBlur, animatedStyle } =
+    useTVFocusAnimation({ scaleAmount: 1.04, duration: 120 });
+
+  return (
+    <Pressable
+      onPress={onPress}
+      onFocus={handleFocus}
+      onBlur={handleBlur}
+      hasTVPreferredFocus={hasTVPreferredFocus && !disabled}
+      disabled={disabled}
+      focusable={!disabled}
+    >
+      <Animated.View style={animatedStyle}>
+        <View
+          style={{
+            backgroundColor: focused
+              ? "#fff"
+              : hasActiveFilter
+                ? "rgba(255, 255, 255, 0.25)"
+                : "rgba(255,255,255,0.1)",
+            borderRadius: 10,
+            paddingVertical: 10,
+            paddingHorizontal: 16,
+            flexDirection: "row",
+            alignItems: "center",
+            gap: 8,
+            borderWidth: hasActiveFilter && !focused ? 1 : 0,
+            borderColor: "rgba(255, 255, 255, 0.4)",
+          }}
+        >
+          {label ? (
+            <Text
+              style={{
+                fontSize: TVTypography.callout,
+                color: focused ? "#444" : "#bbb",
+              }}
+            >
+              {label}
+            </Text>
+          ) : null}
+          <Text
+            style={{
+              fontSize: TVTypography.callout,
+              color: focused ? "#000" : "#FFFFFF",
+              fontWeight: "500",
+            }}
+            numberOfLines={1}
+          >
+            {value}
+          </Text>
+        </View>
+      </Animated.View>
+    </Pressable>
+  );
+};

components/tv/TVItemCardText.tsx

@@ -0,0 +1,29 @@
+import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
+import React from "react";
+import { View } from "react-native";
+import { Text } from "@/components/common/Text";
+import { TVTypography } from "@/constants/TVTypography";
+
+export interface TVItemCardTextProps {
+  item: BaseItemDto;
+}
+
+export const TVItemCardText: React.FC<TVItemCardTextProps> = ({ item }) => (
+  <View style={{ marginTop: 12 }}>
+    <Text
+      numberOfLines={1}
+      style={{ fontSize: TVTypography.callout, color: "#FFFFFF" }}
+    >
+      {item.Name}
+    </Text>
+    <Text
+      style={{
+        fontSize: TVTypography.callout - 2,
+        color: "#9CA3AF",
+        marginTop: 2,
+      }}
+    >
+      {item.ProductionYear}
+    </Text>
+  </View>
+);

components/tv/index.ts

@@ -25,8 +25,12 @@ export type { TVControlButtonProps } from "./TVControlButton";
 export { TVControlButton } from "./TVControlButton";
 export type { TVFavoriteButtonProps } from "./TVFavoriteButton";
 export { TVFavoriteButton } from "./TVFavoriteButton";
+export type { TVFilterButtonProps } from "./TVFilterButton";
+export { TVFilterButton } from "./TVFilterButton";
 export type { TVFocusablePosterProps } from "./TVFocusablePoster";
 export { TVFocusablePoster } from "./TVFocusablePoster";
+export type { TVItemCardTextProps } from "./TVItemCardText";
+export { TVItemCardText } from "./TVItemCardText";
 export type { TVLanguageCardProps } from "./TVLanguageCard";
 export { TVLanguageCard } from "./TVLanguageCard";
 export type { TVMetadataBadgesProps } from "./TVMetadataBadges";