feat(tv): add scalable poster sizes synchronized with typography settings

app/(auth)/(tabs)/(home)/settings.tv.tsx

@@ -142,22 +142,22 @@ export default function SettingsTV() {
   const typographyScaleOptions: TVOptionItem<TVTypographyScale>[] = useMemo(
     () => [
       {
-        label: t("home.settings.appearance.text_size_small"),
+        label: t("home.settings.appearance.display_size_small"),
         value: TVTypographyScale.Small,
         selected: currentTypographyScale === TVTypographyScale.Small,
       },
       {
-        label: t("home.settings.appearance.text_size_default"),
+        label: t("home.settings.appearance.display_size_default"),
         value: TVTypographyScale.Default,
         selected: currentTypographyScale === TVTypographyScale.Default,
       },
       {
-        label: t("home.settings.appearance.text_size_large"),
+        label: t("home.settings.appearance.display_size_large"),
         value: TVTypographyScale.Large,
         selected: currentTypographyScale === TVTypographyScale.Large,
       },
       {
-        label: t("home.settings.appearance.text_size_extra_large"),
+        label: t("home.settings.appearance.display_size_extra_large"),
         value: TVTypographyScale.ExtraLarge,
         selected: currentTypographyScale === TVTypographyScale.ExtraLarge,
       },
@@ -188,7 +188,7 @@ export default function SettingsTV() {
 
   const typographyScaleLabel = useMemo(() => {
     const option = typographyScaleOptions.find((o) => o.selected);
-    return option?.label || t("home.settings.appearance.text_size_default");
+    return option?.label || t("home.settings.appearance.display_size_default");
   }, [typographyScaleOptions, t]);
 
   return (
@@ -385,11 +385,11 @@ export default function SettingsTV() {
           {/* Appearance Section */}
           <TVSectionHeader title={t("home.settings.appearance.title")} />
           <TVSettingsOptionButton
-            label={t("home.settings.appearance.text_size")}
+            label={t("home.settings.appearance.display_size")}
             value={typographyScaleLabel}
             onPress={() =>
               showOptions({
-                title: t("home.settings.appearance.text_size"),
+                title: t("home.settings.appearance.display_size"),
                 options: typographyScaleOptions,
                 onSelect: (value) =>
                   updateSettings({ tvTypographyScale: value }),

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

@@ -27,15 +27,14 @@ 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 MoviePoster from "@/components/posters/MoviePoster.tv";
 import SeriesPoster from "@/components/posters/SeriesPoster.tv";
 import {
   TVFilterButton,
   TVFocusablePoster,
   TVItemCardText,
 } from "@/components/tv";
+import { useScaledTVPosterSizes } from "@/constants/TVPosterSizes";
 import useRouter from "@/hooks/useAppRouter";
 import { useTVOptionModal } from "@/hooks/useTVOptionModal";
 import * as ScreenOrientation from "@/packages/expo-screen-orientation";
@@ -60,6 +59,7 @@ const page: React.FC = () => {
   const searchParams = useLocalSearchParams();
   const { collectionId } = searchParams as { collectionId: string };
 
+  const posterSizes = useScaledTVPosterSizes();
   const [api] = useAtom(apiAtom);
   const [user] = useAtom(userAtom);
   const navigation = useNavigation();
@@ -153,7 +153,7 @@ const page: React.FC = () => {
   // Calculate columns for TV grid
   const nrOfCols = useMemo(() => {
     if (Platform.isTV) {
-      const itemWidth = TV_POSTER_WIDTH + TV_ITEM_GAP;
+      const itemWidth = posterSizes.poster + TV_ITEM_GAP;
       return Math.max(
         1,
         Math.floor((screenWidth - TV_SCALE_PADDING * 2) / itemWidth),
@@ -291,7 +291,7 @@ const page: React.FC = () => {
           style={{
             marginRight: TV_ITEM_GAP,
             marginBottom: TV_ITEM_GAP,
-            width: TV_POSTER_WIDTH,
+            width: posterSizes.poster,
           }}
         >
           <TVFocusablePoster onPress={handlePress}>

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

@@ -33,15 +33,14 @@ 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 MoviePoster from "@/components/posters/MoviePoster.tv";
 import SeriesPoster from "@/components/posters/SeriesPoster.tv";
 import {
   TVFilterButton,
   TVFocusablePoster,
   TVItemCardText,
 } from "@/components/tv";
+import { useScaledTVPosterSizes } from "@/constants/TVPosterSizes";
 import { useScaledTVTypography } from "@/constants/TVTypography";
 import useRouter from "@/hooks/useAppRouter";
 import { useOrientation } from "@/hooks/useOrientation";
@@ -85,6 +84,7 @@ const Page = () => {
   const { libraryId } = searchParams;
 
   const typography = useScaledTVTypography();
+  const posterSizes = useScaledTVPosterSizes();
   const [api] = useAtom(apiAtom);
   const [user] = useAtom(userAtom);
   const { width: screenWidth } = useWindowDimensions();
@@ -409,7 +409,7 @@ const Page = () => {
         <View
           key={item.Id}
           style={{
-            width: TV_POSTER_WIDTH,
+            width: posterSizes.poster,
           }}
         >
           <TVFocusablePoster onPress={handlePress}>

app/(auth)/(tabs)/(watchlists)/[watchlistId].tsx

@@ -24,11 +24,10 @@ import {
 } from "@/components/common/TouchableItemRouter";
 import { ItemCardText } from "@/components/ItemCardText";
 import { ItemPoster } from "@/components/posters/ItemPoster";
-import MoviePoster, {
-  TV_POSTER_WIDTH,
-} from "@/components/posters/MoviePoster.tv";
+import MoviePoster from "@/components/posters/MoviePoster.tv";
 import SeriesPoster from "@/components/posters/SeriesPoster.tv";
 import { TVFocusablePoster } from "@/components/tv/TVFocusablePoster";
+import { useScaledTVPosterSizes } from "@/constants/TVPosterSizes";
 import { useScaledTVTypography } from "@/constants/TVTypography";
 import useRouter from "@/hooks/useAppRouter";
 import { useOrientation } from "@/hooks/useOrientation";
@@ -73,6 +72,7 @@ const TVItemCardText: React.FC<{
 
 export default function WatchlistDetailScreen() {
   const typography = useScaledTVTypography();
+  const posterSizes = useScaledTVPosterSizes();
   const { t } = useTranslation();
   const router = useRouter();
   const navigation = useNavigation();
@@ -206,7 +206,7 @@ export default function WatchlistDetailScreen() {
         <View
           key={item.Id}
           style={{
-            width: TV_POSTER_WIDTH,
+            width: posterSizes.poster,
           }}
         >
           <TVFocusablePoster