From 5f44540b6f28fb96ee821ff74a7c2bc29e2c8056 Mon Sep 17 00:00:00 2001
From: Fredrik Burmester <fredrik.burmester@gmail.com>
Date: Mon, 19 Jan 2026 20:01:00 +0100
Subject: [PATCH] fix(tv): design

---
 components/common/ProgressBar.tsx             |  5 +--
 .../InfiniteScrollingCollectionList.tv.tsx    | 33 ++-----------------
 components/series/TVSeriesHeader.tsx          |  2 +-
 components/tv/TVProgressBar.tsx               |  2 +-
 4 files changed, 8 insertions(+), 34 deletions(-)

diff --git a/components/common/ProgressBar.tsx b/components/common/ProgressBar.tsx
index 1a47327e..23ff1249 100644
--- a/components/common/ProgressBar.tsx
+++ b/components/common/ProgressBar.tsx
@@ -1,6 +1,6 @@
 import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
 import React, { useMemo } from "react";
-import { View } from "react-native";
+import { Platform, View } from "react-native";
 
 interface ProgressBarProps {
   item: BaseItemDto;
@@ -39,8 +39,9 @@ export const ProgressBar: React.FC<ProgressBarProps> = ({ item }) => {
       <View
         style={{
           width: `${progress}%`,
+          backgroundColor: Platform.isTV ? "#ffffff" : undefined,
         }}
-        className={"absolute bottom-0 left-0 h-1 bg-purple-600 w-full"}
+        className={`absolute bottom-0 left-0 h-1 w-full ${Platform.isTV ? "" : "bg-purple-600"}`}
       />
     </>
   );
diff --git a/components/home/InfiniteScrollingCollectionList.tv.tsx b/components/home/InfiniteScrollingCollectionList.tv.tsx
index 8de15f87..4b85c441 100644
--- a/components/home/InfiniteScrollingCollectionList.tv.tsx
+++ b/components/home/InfiniteScrollingCollectionList.tv.tsx
@@ -20,7 +20,6 @@ import MoviePoster, {
   TV_POSTER_WIDTH,
 } from "@/components/posters/MoviePoster.tv";
 import { TVFocusablePoster } from "@/components/tv/TVFocusablePoster";
-import { Colors } from "@/constants/Colors";
 import { TVTypography } from "@/constants/TVTypography";
 import useRouter from "@/hooks/useAppRouter";
 import { SortByOption, SortOrderOption } from "@/utils/atoms/filters";
@@ -172,35 +171,9 @@ export const InfiniteScrollingCollectionList: React.FC<Props> = ({
   const segments = useSegments();
   const from = (segments as string[])[2] || "(home)";
 
-  // Track focus within section and scroll back to start when leaving
+  // Track focus within section for item focus/blur callbacks
   const flatListRef = useRef<FlatList<BaseItemDto>>(null);
-  const [focusedCount, setFocusedCount] = useState(0);
-  const prevFocusedCount = useRef(0);
-  const scrollBackTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-
-  // When section loses all focus, scroll back to start (with debounce to avoid
-  // triggering during transient focus changes like infinite scroll loading)
-  useEffect(() => {
-    // Clear any pending scroll-back timer
-    if (scrollBackTimerRef.current) {
-      clearTimeout(scrollBackTimerRef.current);
-      scrollBackTimerRef.current = null;
-    }
-
-    if (prevFocusedCount.current > 0 && focusedCount === 0) {
-      // Debounce the scroll-back to avoid triggering during re-renders
-      scrollBackTimerRef.current = setTimeout(() => {
-        flatListRef.current?.scrollToOffset({ offset: 0, animated: true });
-      }, 150);
-    }
-    prevFocusedCount.current = focusedCount;
-
-    return () => {
-      if (scrollBackTimerRef.current) {
-        clearTimeout(scrollBackTimerRef.current);
-      }
-    };
-  }, [focusedCount]);
+  const [_focusedCount, setFocusedCount] = useState(0);
 
   const handleItemFocus = useCallback(
     (item: BaseItemDto) => {
@@ -494,7 +467,7 @@ export const InfiniteScrollingCollectionList: React.FC<Props> = ({
                     height: orientation === "horizontal" ? 191 : 315,
                   }}
                 >
-                  <ActivityIndicator size='small' color={Colors.primary} />
+                  <ActivityIndicator size='small' color='white' />
                 </View>
               )}
               {parentId && allItems.length > 0 && (
diff --git a/components/series/TVSeriesHeader.tsx b/components/series/TVSeriesHeader.tsx
index 6be2e56d..02d16148 100644
--- a/components/series/TVSeriesHeader.tsx
+++ b/components/series/TVSeriesHeader.tsx
@@ -80,7 +80,7 @@ export const TVSeriesHeader: React.FC<TVSeriesHeaderProps> = ({ item }) => {
         }}
       >
         {yearString && (
-          <Text style={{ color: "#9CA3AF", fontSize: TVTypography.body }}>
+          <Text style={{ color: "white", fontSize: TVTypography.body }}>
             {yearString}
           </Text>
         )}
diff --git a/components/tv/TVProgressBar.tsx b/components/tv/TVProgressBar.tsx
index 54ac5df1..026b9247 100644
--- a/components/tv/TVProgressBar.tsx
+++ b/components/tv/TVProgressBar.tsx
@@ -18,7 +18,7 @@ export const TVProgressBar: React.FC<TVProgressBarProps> = React.memo(
   ({
     progress,
     trackColor = "rgba(255,255,255,0.2)",
-    fillColor = "#a855f7",
+    fillColor = "#ffffff",
     maxWidth = 400,
     height = 4,
   }) => {