From 38cb7068ef0111f5171beb4829e12c0b640a8638 Mon Sep 17 00:00:00 2001
From: Fredrik Burmester <fredrik.burmester@gmail.com>
Date: Fri, 16 Jan 2026 19:04:13 +0100
Subject: [PATCH] style(search): remove redundant search label on TV search
 page

---
 components/ItemContent.tv.tsx        | 96 ++++++++++++++++++++++++++--
 components/ItemTechnicalDetails.tsx  |  2 +-
 components/MediaSourceButton.tsx     |  2 +-
 components/SubtitleTrackSelector.tsx |  4 +-
 components/search/TVSearchPage.tsx   |  9 ---
 5 files changed, 96 insertions(+), 17 deletions(-)

diff --git a/components/ItemContent.tv.tsx b/components/ItemContent.tv.tsx
index b742c175..a26dde7e 100644
--- a/components/ItemContent.tv.tsx
+++ b/components/ItemContent.tv.tsx
@@ -467,6 +467,88 @@ const TVOptionCard: React.FC<{
   );
 };
 
+// Glass-style back button for TV (Apple TV design)
+const TVBackButton: React.FC<{
+  onPress: () => void;
+}> = ({ 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.08);
+      }}
+      onBlur={() => {
+        setFocused(false);
+        animateTo(1);
+      }}
+      style={{ alignSelf: "flex-start", marginBottom: 20 }}
+    >
+      <Animated.View
+        style={{
+          transform: [{ scale }],
+          shadowColor: "#fff",
+          shadowOffset: { width: 0, height: 0 },
+          shadowOpacity: focused ? 0.5 : 0,
+          shadowRadius: focused ? 15 : 0,
+        }}
+      >
+        <BlurView
+          intensity={focused ? 100 : 60}
+          tint='dark'
+          style={{
+            borderRadius: 16,
+            overflow: "hidden",
+            borderWidth: 1,
+            borderColor: focused
+              ? "rgba(255, 255, 255, 0.4)"
+              : "rgba(255, 255, 255, 0.15)",
+          }}
+        >
+          <View
+            style={{
+              flexDirection: "row",
+              alignItems: "center",
+              paddingVertical: 12,
+              paddingHorizontal: 18,
+              backgroundColor: focused
+                ? "rgba(255, 255, 255, 0.2)"
+                : "rgba(255, 255, 255, 0.08)",
+            }}
+          >
+            <Ionicons
+              name='chevron-back'
+              size={22}
+              color={focused ? "#fff" : "rgba(255, 255, 255, 0.8)"}
+            />
+            <Text
+              style={{
+                fontSize: 16,
+                fontWeight: "500",
+                color: focused ? "#fff" : "rgba(255, 255, 255, 0.8)",
+                marginLeft: 6,
+              }}
+            >
+              Back
+            </Text>
+          </View>
+        </BlurView>
+      </Animated.View>
+    </Pressable>
+  );
+};
+
 // Button to open option selector
 const TVOptionButton: React.FC<{
   label: string;
@@ -735,7 +817,9 @@ export const ItemContentTV: React.FC<ItemContentTVProps> = React.memo(
       const track = subtitleTracks.find(
         (t) => t.Index === selectedOptions?.subtitleIndex,
       );
-      return track?.DisplayTitle || track?.Language || t("item_card.subtitles");
+      return (
+        track?.DisplayTitle || track?.Language || t("item_card.subtitles.label")
+      );
     }, [subtitleTracks, selectedOptions?.subtitleIndex, t]);
 
     const selectedMediaSourceLabel = useMemo(() => {
@@ -838,13 +922,17 @@ export const ItemContentTV: React.FC<ItemContentTVProps> = React.memo(
               minHeight: SCREEN_HEIGHT * 0.45,
             }}
           >
-            {/* Left side - Poster */}
+            {/* Left side - Back button + Poster */}
             <View
               style={{
                 width: SCREEN_WIDTH * 0.22,
                 marginRight: 50,
               }}
             >
+              {/* Glass back button */}
+              <TVBackButton onPress={() => router.back()} />
+
+              {/* Poster */}
               <View
                 style={{
                   aspectRatio: 2 / 3,
@@ -1043,7 +1131,7 @@ export const ItemContentTV: React.FC<ItemContentTVProps> = React.memo(
                 {(subtitleTracks.length > 0 ||
                   selectedOptions?.subtitleIndex !== undefined) && (
                   <TVOptionButton
-                    label={t("item_card.subtitles")}
+                    label={t("item_card.subtitles.label")}
                     value={selectedSubtitleLabel}
                     onPress={() => setOpenModal("subtitle")}
                   />
@@ -1233,7 +1321,7 @@ export const ItemContentTV: React.FC<ItemContentTVProps> = React.memo(
 
         <TVOptionSelector
           visible={openModal === "subtitle"}
-          title={t("item_card.subtitles")}
+          title={t("item_card.subtitles.label")}
           options={subtitleOptions}
           onSelect={handleSubtitleChange}
           onClose={() => setOpenModal(null)}
diff --git a/components/ItemTechnicalDetails.tsx b/components/ItemTechnicalDetails.tsx
index 49614a2c..5708318d 100644
--- a/components/ItemTechnicalDetails.tsx
+++ b/components/ItemTechnicalDetails.tsx
@@ -77,7 +77,7 @@ export const ItemTechnicalDetails: React.FC<Props> = ({ source }) => {
 
             <View>
               <Text className='text-lg font-bold mb-2'>
-                {t("item_card.subtitles")}
+                {t("item_card.subtitles.label")}
               </Text>
               <SubtitleStreamInfo
                 subtitleStreams={
diff --git a/components/MediaSourceButton.tsx b/components/MediaSourceButton.tsx
index 05847f35..6413b462 100644
--- a/components/MediaSourceButton.tsx
+++ b/components/MediaSourceButton.tsx
@@ -142,7 +142,7 @@ export const MediaSourceButton: React.FC<Props> = ({
       }));
 
       groups.push({
-        title: t("item_card.subtitles"),
+        title: t("item_card.subtitles.label"),
         options: [noneOption, ...subtitleOptions],
       });
     }
diff --git a/components/SubtitleTrackSelector.tsx b/components/SubtitleTrackSelector.tsx
index 6fca1955..12c68e5c 100644
--- a/components/SubtitleTrackSelector.tsx
+++ b/components/SubtitleTrackSelector.tsx
@@ -76,7 +76,7 @@ export const SubtitleTrackSelector: React.FC<Props> = ({
   const trigger = (
     <View className='flex flex-col' {...props}>
       <Text numberOfLines={1} className='opacity-50 mb-1 text-xs'>
-        {t("item_card.subtitles")}
+        {t("item_card.subtitles.label")}
       </Text>
       <TouchableOpacity
         className='bg-neutral-900 h-10 rounded-xl border-neutral-800 border px-3 py-2 flex flex-row items-center justify-between'
@@ -97,7 +97,7 @@ export const SubtitleTrackSelector: React.FC<Props> = ({
     <PlatformDropdown
       groups={optionGroups}
       trigger={trigger}
-      title={t("item_card.subtitles")}
+      title={t("item_card.subtitles.label")}
       open={open}
       onOpenChange={setOpen}
       onOptionSelect={handleOptionSelect}
diff --git a/components/search/TVSearchPage.tsx b/components/search/TVSearchPage.tsx
index 5563f7b6..32a706d9 100644
--- a/components/search/TVSearchPage.tsx
+++ b/components/search/TVSearchPage.tsx
@@ -258,15 +258,6 @@ export const TVSearchPage: React.FC<TVSearchPageProps> = ({
       {/* Example Searches (when no search query) */}
       {!loading && debouncedSearch.length === 0 && (
         <View style={{ alignItems: "center", paddingTop: 40, gap: 16 }}>
-          <Text
-            style={{
-              fontSize: 18,
-              color: "#9CA3AF",
-              marginBottom: 8,
-            }}
-          >
-            {t("search.search")}
-          </Text>
           <View
             style={{
               flexDirection: "row",