feat(ui): enhance settings sections with responsive layout and keyboard handling

components/settings/SettingsSection.tsx

@@ -1,17 +1,20 @@
 import React, { useState } from "react";
-import { StyleSheet, Pressable } from "react-native";
+import { StyleSheet, Pressable, Platform } from "react-native";
 import { ThemedView } from "@/components/ThemedView";
 import { Colors } from "@/constants/Colors";
+import { useResponsiveLayout } from "@/hooks/useResponsiveLayout";
 
 interface SettingsSectionProps {
   children: React.ReactNode;
   onFocus?: () => void;
   onBlur?: () => void;
+  onPress?: () => void;
   focusable?: boolean;
 }
 
-export const SettingsSection: React.FC<SettingsSectionProps> = ({ children, onFocus, onBlur, focusable = false }) => {
+export const SettingsSection: React.FC<SettingsSectionProps> = ({ children, onFocus, onBlur, onPress, focusable = false }) => {
   const [isFocused, setIsFocused] = useState(false);
+  const deviceType = useResponsiveLayout().deviceType;
 
   const handleFocus = () => {
     setIsFocused(true);
@@ -23,13 +26,24 @@ export const SettingsSection: React.FC<SettingsSectionProps> = ({ children, onFo
     onBlur?.();
   };
 
+  const handlePress = () => {
+    onPress?.();
+  }
+
   if (!focusable) {
     return <ThemedView style={styles.section}>{children}</ThemedView>;
   }
 
   return (
     <ThemedView style={[styles.section, isFocused && styles.sectionFocused]}>
-      <Pressable style={styles.sectionPressable} onFocus={handleFocus} onBlur={handleBlur}>
+      <Pressable
+        android_ripple={Platform.isTV||deviceType !=='tv'? {color:'transparent'}:{color:Colors.dark.link}}
+        style={styles.sectionPressable}
+        // {...(Platform.isTV ? {onFocus: handleFocus, onBlur: handleBlur} : {onPress: onPress})}
+        onFocus={handleFocus}
+        onBlur={handleBlur}
+        onPress={handlePress}
+      >
         {children}
       </Pressable>
     </ThemedView>