feat: settingsscreen placeholder stuff

apps/expo/package.json

@@ -49,6 +49,7 @@
     "react-native-css-interop": "^0.0.35",
     "react-native-gesture-handler": "~2.14.1",
     "react-native-modal": "^13.0.1",
+    "react-native-paper": "^5.12.3",
     "react-native-progress": "^5.0.1",
     "react-native-quick-base64": "^2.0.8",
     "react-native-quick-crypto": "^0.6.1",

apps/expo/src/app/(tabs)/settings.tsx

@@ -1,10 +1,22 @@
+import React, { useState } from "react";
+import { Text, View } from "react-native";
+import { Switch } from "react-native-paper";
+
 import ScreenLayout from "~/components/layout/ScreenLayout";
-import { Text } from "~/components/ui/Text";
 
 export default function SettingsScreen() {
+  const [isSwitchOn, setIsSwitchOn] = useState(true);
+  const onToggleSwitch = () => setIsSwitchOn(!isSwitchOn);
+
   return (
     <ScreenLayout title="Settings">
-      <Text>Settings tab</Text>
+      <View className="p-4">
+        <Text className="mb-4 text-lg font-bold text-gray-300">Player</Text>
+        <View className="flex-row items-center justify-between rounded-lg border border-gray-300 px-4 py-2">
+          <Text className="text-md text-gray-300">Gesture Controls</Text>
+          <Switch value={isSwitchOn} onValueChange={onToggleSwitch} />
+        </View>
+      </View>
     </ScreenLayout>
   );
 }

apps/expo/src/components/DownloadItem.tsx

@@ -34,7 +34,7 @@ export const DownloadItem: React.FC<DownloadItemProps> = ({
 
   return (
     <View className="mb-4 rounded-lg border border-gray-300 p-4">
-      <Text className="mb-2 text-lg text-gray-200">{filename}</Text>
+      <Text className="mb-2 text-lg text-gray-300">{filename}</Text>
       <ProgressBar
         progress={progress}
         width={null}