feat: Refactor settings management into a dedicated page with new configuration options, including live stream source and remote input settings

components/settings/SettingsSection.tsx

@@ -0,0 +1,66 @@
+import React, { useState } from "react";
+import { StyleSheet, Pressable } from "react-native";
+import { ThemedView } from "@/components/ThemedView";
+
+interface SettingsSectionProps {
+  children: React.ReactNode;
+  onFocus?: () => void;
+  onBlur?: () => void;
+  focusable?: boolean;
+}
+
+export const SettingsSection: React.FC<SettingsSectionProps> = ({ 
+  children, 
+  onFocus, 
+  onBlur, 
+  focusable = false 
+}) => {
+  const [isFocused, setIsFocused] = useState(false);
+
+  const handleFocus = () => {
+    setIsFocused(true);
+    onFocus?.();
+  };
+
+  const handleBlur = () => {
+    setIsFocused(false);
+    onBlur?.();
+  };
+
+  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}
+      >
+        {children}
+      </Pressable>
+    </ThemedView>
+  );
+};
+
+const styles = StyleSheet.create({
+  section: {
+    padding: 20,
+    marginBottom: 16,
+    borderRadius: 12,
+    borderWidth: 1,
+    borderColor: "#333",
+  },
+  sectionFocused: {
+    borderColor: "#007AFF",
+    backgroundColor: "#007AFF10",
+  },
+  sectionPressable: {
+    width: "100%",
+  },
+});