fix(tv): keep focus on search field instead of jumping to results grid (#1637)

Signed-off-by: Lance Chant <13349722+lancechant@users.noreply.github.com>

app/(auth)/(tabs)/(libraries)/_layout.tsx

@@ -166,7 +166,7 @@ export default function IndexLayout() {
                 open={dropdownOpen}
                 onOpenChange={setDropdownOpen}
                 trigger={
-                  <View className='pl-1.5'>
+                  <View>
                     <Ionicons
                       name='ellipsis-horizontal-outline'
                       size={24}

components/home/Home.tsx

@@ -133,7 +133,6 @@ const HomeMobile = () => {
           onPress={() => {
             router.push("/(auth)/downloads");
           }}
-          className='ml-1.5'
           style={{ marginRight: Platform.OS === "android" ? 16 : 0 }}
         >
           <Feather

components/search/TVJellyseerrSearchResults.tsx

@@ -401,10 +401,6 @@ export const TVJellyseerrSearchResults: React.FC<
 }) => {
   const { t } = useTranslation();
 
-  const hasMovies = movieResults && movieResults.length > 0;
-  const hasTv = tvResults && tvResults.length > 0;
-  const hasPersons = personResults && personResults.length > 0;
-
   if (loading) {
     return null;
   }
@@ -431,22 +427,26 @@ export const TVJellyseerrSearchResults: React.FC<
 
   return (
     <View>
+      {/* No section requests `hasTVPreferredFocus`: the native search field
+          keeps focus while typing, otherwise the first result would re-grab
+          focus on every keystroke as results re-render. The user navigates
+          down to the grid manually. */}
       <TVJellyseerrMovieSection
         title={t("search.request_movies")}
         items={movieResults}
-        isFirstSection={hasMovies}
+        isFirstSection={false}
         onItemPress={onMoviePress}
       />
       <TVJellyseerrTvSection
         title={t("search.request_series")}
         items={tvResults}
-        isFirstSection={!hasMovies && hasTv}
+        isFirstSection={false}
         onItemPress={onTvPress}
       />
       <TVJellyseerrPersonSection
         title={t("search.actors")}
         items={personResults}
-        isFirstSection={!hasMovies && !hasTv && hasPersons}
+        isFirstSection={false}
         onItemPress={onPersonPress}
       />
     </View>

components/search/TVSearchPage.tsx

@@ -235,10 +235,13 @@ export const TVSearchPage: React.FC<TVSearchPageProps> = ({
             module). It renders the native search bar + grid keyboard and
             forwards typed text into the existing query pipeline via setSearch;
             our own results grid renders below. */}
+        {/* No horizontal margin here: the native tvOS search bar centers itself
+            and renders a trailing "Hold to Dictate in <Language>" hint. Extra
+            margins squeeze the bar's width and clip that trailing hint, so let
+            the native view span the full width and own its own insets. */}
         <View
           style={{
             marginBottom: 24,
-            marginHorizontal: HORIZONTAL_PADDING,
             height: SEARCH_AREA_HEIGHT,
           }}
         >
@@ -280,13 +283,17 @@ export const TVSearchPage: React.FC<TVSearchPageProps> = ({
         {/* Library Search Results */}
         {isLibraryMode && !loading && (
           <View style={{ gap: SECTION_GAP }}>
-            {sections.map((section, index) => (
+            {sections.map((section) => (
               <TVSearchSection
                 key={section.key}
                 title={section.title}
                 items={section.items!}
                 orientation={section.orientation || "vertical"}
-                isFirstSection={index === 0}
+                // Never auto-focus a result. The native search field owns focus
+                // while typing; `hasTVPreferredFocus` here would re-grab focus on
+                // every keystroke as results re-render. User navigates down to the
+                // grid manually.
+                isFirstSection={false}
                 onItemPress={onItemPress}
                 onItemLongPress={onItemLongPress}
                 imageUrlGetter={

components/search/TVSearchSection.tsx

@@ -297,12 +297,12 @@ export const TVSearchSection: React.FC<TVSearchSectionProps> = ({
         removeClippedSubviews={false}
         getItemLayout={getItemLayout}
         style={{ overflow: "visible" }}
-        contentInset={{
+        // Edge padding via contentContainerStyle, NOT contentInset+contentOffset.
-          left: edgePadding,
+        // contentOffset only applies on initial mount; since this FlatList is
-          right: edgePadding,
+        // reused across searches (stable key), a second search left the inset
-        }}
+        // without the offset and the grid snapped flush to the left edge.
-        contentOffset={{ x: -edgePadding, y: 0 }}
         contentContainerStyle={{
+          paddingHorizontal: edgePadding,
           paddingVertical: SCALE_PADDING,
         }}
       />

components/video-player/controls/Controls.tv.tsx

@@ -1254,7 +1254,7 @@ export const Controls: FC<Props> = ({
                 <Text
                   style={[styles.endsAtText, { fontSize: typography.callout }]}
                 >
-                  {t("player.ends_at")} {getFinishTime()}
+                  {t("player.ends_at", { time: getFinishTime() })}
                 </Text>
               </View>
             )}
@@ -1448,7 +1448,7 @@ export const Controls: FC<Props> = ({
                 <Text
                   style={[styles.endsAtText, { fontSize: typography.callout }]}
                 >
-                  {t("player.ends_at")} {getFinishTime()}
+                  {t("player.ends_at", { time: getFinishTime() })}
                 </Text>
               </View>
             )}