fix: conditionals for tv to build / run

components/GenreTags.tsx

@@ -23,7 +23,7 @@ export const Tag: React.FC<
     textStyle?: StyleProp<TextStyle>;
   } & ViewProps
 > = ({ text, textClass, textStyle, ...props }) => {
-  if (Platform.OS === "ios") {
+  if (Platform.OS === "ios" && !Platform.isTV) {
     return (
       <View>
         <GlassEffectView style={styles.glass}>

components/common/Input.tsx

@@ -1,50 +1,125 @@
-import React, { useState } from "react";
+import { useRef, useState } from "react";
 import {
+  Animated,
+  Easing,
   Platform,
+  Pressable,
   TextInput,
   type TextInputProps,
-  TouchableOpacity,
+  View,
 } from "react-native";
 
 interface InputProps extends TextInputProps {
-  extraClassName?: string; // new prop for additional classes
+  extraClassName?: string;
 }
 
 export function Input(props: InputProps) {
   const { style, extraClassName = "", ...otherProps } = props;
-  const inputRef = React.useRef<TextInput>(null);
+  const inputRef = useRef<TextInput>(null);
   const [isFocused, setIsFocused] = useState(false);
+  const scale = useRef(new Animated.Value(1)).current;
 
-  return Platform.isTV ? (
-    <TouchableOpacity
-      onPress={() => inputRef?.current?.focus?.()}
-      activeOpacity={1}
-    >
-      <TextInput
-        ref={inputRef}
-        className={`
-          w-full text-lg px-5 py-4 rounded-2xl
-          ${isFocused ? "bg-neutral-700 border-2 border-white" : "bg-neutral-900 border-2 border-transparent"}
-          text-white ${extraClassName}
-        `}
-        allowFontScaling={false}
-        style={[
-          style,
-          {
-            backgroundColor: isFocused ? "#ffffff88" : "#8f8d8d88",
-          },
-        ]}
-        placeholderTextColor={"#ffffffff"}
-        clearButtonMode='while-editing'
-        onFocus={() => setIsFocused(true)}
-        onBlur={() => setIsFocused(false)}
-        {...otherProps}
-      />
-    </TouchableOpacity>
-  ) : (
+  const animateFocus = (focused: boolean) => {
+    Animated.timing(scale, {
+      toValue: focused ? 1.02 : 1,
+      duration: 150,
+      easing: Easing.out(Easing.quad),
+      useNativeDriver: true,
+    }).start();
+  };
+
+  const handleFocus = () => {
+    setIsFocused(true);
+    animateFocus(true);
+  };
+
+  const handleBlur = () => {
+    setIsFocused(false);
+    animateFocus(false);
+  };
+
+  if (Platform.isTV) {
+    return (
+      <Pressable
+        onPress={() => inputRef.current?.focus()}
+        onFocus={handleFocus}
+        onBlur={handleBlur}
+      >
+        <Animated.View
+          style={{
+            transform: [{ scale }],
+          }}
+        >
+          {/* Outer glow when focused */}
+          {isFocused && (
+            <View
+              style={{
+                position: "absolute",
+                top: -4,
+                left: -4,
+                right: -4,
+                bottom: -4,
+                backgroundColor: "#9334E9",
+                borderRadius: 18,
+                opacity: 0.5,
+              }}
+            />
+          )}
+
+          <View
+            style={{
+              backgroundColor: isFocused ? "#2a2a2a" : "#1a1a1a",
+              borderWidth: 3,
+              borderColor: isFocused ? "#FFFFFF" : "#333333",
+              borderRadius: 14,
+              overflow: "hidden",
+            }}
+          >
+            {/* Purple accent bar at top when focused */}
+            {isFocused && (
+              <View
+                style={{
+                  position: "absolute",
+                  top: 0,
+                  left: 0,
+                  right: 0,
+                  height: 3,
+                  backgroundColor: "#9334E9",
+                }}
+              />
+            )}
+
+            <TextInput
+              ref={inputRef}
+              allowFontScaling={false}
+              placeholderTextColor={isFocused ? "#AAAAAA" : "#666666"}
+              style={[
+                {
+                  height: 60,
+                  fontSize: 22,
+                  fontWeight: "500",
+                  paddingHorizontal: 20,
+                  paddingTop: isFocused ? 4 : 0,
+                  color: "#FFFFFF",
+                  backgroundColor: "transparent",
+                },
+                style,
+              ]}
+              onFocus={handleFocus}
+              onBlur={handleBlur}
+              {...otherProps}
+            />
+          </View>
+        </Animated.View>
+      </Pressable>
+    );
+  }
+
+  // Mobile version unchanged
+  return (
     <TextInput
       ref={inputRef}
-      className='p-4  rounded-xl bg-neutral-900'
+      className={`p-4 rounded-xl bg-neutral-900 ${extraClassName}`}
       allowFontScaling={false}
       style={[{ color: "white" }, style]}
       placeholderTextColor={"#9CA3AF"}

components/music/MiniPlayerBar.tsx

@@ -243,7 +243,7 @@ export const MiniPlayerBar: React.FC = () => {
         ]}
       >
         <Animated.View style={[styles.touchable, animatedBarStyle]}>
-          {Platform.OS === "ios" ? (
+          {Platform.OS === "ios" && !Platform.isTV ? (
             <GlassEffectView style={styles.blurContainer}>
               <View
                 style={{