Modified requested changes

app/index.tsx

@@ -6,7 +6,9 @@ import {
   Button,
   View,
   StyleSheet,
+  TouchableOpacity,
 } from "react-native";
+import Icon from "react-native-vector-icons/FontAwesome";
 import PlayerSelector from "@/components/PlayerSelector";
 import BuyInSelector from "@/components/BuyInSelector";
 import ChipsSelector from "@/components/ChipsSelector";
@@ -18,8 +20,6 @@ import {
   savePersistentState,
   loadPersistentState,
 } from "@/components/PersistentState";
-
-// Your existing states
 export enum COLORS {
   "white",
   "red",
@@ -36,7 +36,6 @@ const IndexScreen: React.FC = () => {
   const [selectedCurrency, setSelectedCurrency] = useState<string>("$");
   const [isSettingsVisible, setIsSettingsVisible] = useState(false);
 
-  // Load persistent data on startup
   useEffect(() => {
     const loadPersistentData = async () => {
       try {
@@ -44,11 +43,11 @@ const IndexScreen: React.FC = () => {
         const savedState = await loadPersistentState();
         if (savedState) {
           console.log("Persistent state restored:", savedState);
-          setPlayerCount(savedState.playerCount || 2); // Use defaults if missing
+          setPlayerCount(savedState.playerCount || 2);
-          setBuyInAmount(savedState.buyInAmount || 20); // Use defaults if missing
+          setBuyInAmount(savedState.buyInAmount || 20);
-          setNumberOfChips(savedState.numberOfChips || 5); // Use defaults if missing
+          setNumberOfChips(savedState.numberOfChips || 5);
-          setTotalChipsCount(savedState.totalChipsCount || []); // Use defaults if missing
+          setTotalChipsCount(savedState.totalChipsCount || []);
-          setSelectedCurrency(savedState.selectedCurrency || "$"); // Restore the selected currency, defaulting to "$" if not available
+          setSelectedCurrency(savedState.selectedCurrency || "$");
         } else {
           console.log("No persistent state found, using defaults.");
         }
@@ -106,16 +105,17 @@ const IndexScreen: React.FC = () => {
   return (
     <ScrollView contentContainerStyle={{ padding: 20, flexGrow: 1 }}>
       <View style={styles.header}>
-        <Text style={styles.headerTitle}>Poker Chips Helper</Text>
+        <TouchableOpacity
-        <Button
-          title="Settings"
           onPress={() => setIsSettingsVisible(!isSettingsVisible)}
-        />
+        >
+          <Text>
+            <Icon name="cog" size={30} color="black" />
+          </Text>
+        </TouchableOpacity>
       </View>
 
       {isSettingsVisible && (
         <View style={styles.settingsContainer}>
-          <Text style={styles.settingTitle}>Currency Selector</Text>
           <CurrencySelector
             selectedCurrency={selectedCurrency}
             setSelectedCurrency={setSelectedCurrency}
@@ -139,6 +139,7 @@ const IndexScreen: React.FC = () => {
           setTotalChipsCount(chipCountArray);
         }}
       />
+
       <ChipsSelector
         totalChipsCount={totalChipsCount}
         setTotalChipsCount={setTotalChipsCount}
@@ -153,18 +154,20 @@ const IndexScreen: React.FC = () => {
         selectedCurrency={selectedCurrency}
       />
 
-      <Button
+      <View style={styles.buttonContainer}>
-        title="Save to Slot 1"
+        <Button
-        onPress={() => handleSave("SLOT1")}
+          title="Save to Slot 1"
-        disabled={buyInAmount === null}
+          onPress={() => handleSave("SLOT1")}
-      />
+          disabled={buyInAmount === null}
-      <Button
+        />
-        title="Save to Slot 2"
+        <Button
-        onPress={() => handleSave("SLOT2")}
+          title="Save to Slot 2"
-        disabled={buyInAmount === null}
+          onPress={() => handleSave("SLOT2")}
-      />
+          disabled={buyInAmount === null}
-      <Button title="Load from Slot 1" onPress={() => handleLoad("SLOT1")} />
+        />
-      <Button title="Load from Slot 2" onPress={() => handleLoad("SLOT2")} />
+        <Button title="Load from Slot 1" onPress={() => handleLoad("SLOT1")} />
+        <Button title="Load from Slot 2" onPress={() => handleLoad("SLOT2")} />
+      </View>
     </ScrollView>
   );
 };
@@ -172,14 +175,10 @@ const IndexScreen: React.FC = () => {
 const styles = StyleSheet.create({
   header: {
     flexDirection: "row",
-    justifyContent: "space-between",
+    justifyContent: "flex-end",
     alignItems: "center",
     marginBottom: 20,
   },
-  headerTitle: {
-    fontSize: 24,
-    fontWeight: "bold",
-  },
   settingsContainer: {
     marginBottom: 20,
     padding: 10,
@@ -191,6 +190,9 @@ const styles = StyleSheet.create({
     fontWeight: "bold",
     marginBottom: 10,
   },
+  buttonContainer: {
+    marginTop: 20,
+  },
 });
 
 export default IndexScreen;

package-lock.json

@@ -34,6 +34,7 @@
         "react-native-reanimated": "3.16.7",
         "react-native-safe-area-context": "4.12.0",
         "react-native-screens": "4.4.0",
+        "react-native-vector-icons": "^10.2.0",
         "react-native-web": "0.19.13",
         "react-native-webview": "13.12.5"
       },
@@ -14445,6 +14446,92 @@
         "react-native": "*"
       }
     },
+    "node_modules/react-native-vector-icons": {
+      "version": "10.2.0",
+      "resolved": "https://registry.npmjs.org/react-native-vector-icons/-/react-native-vector-icons-10.2.0.tgz",
+      "integrity": "sha512-n5HGcxUuVaTf9QJPs/W22xQpC2Z9u0nb0KgLPnVltP8vdUvOp6+R26gF55kilP/fV4eL4vsAHUqUjewppJMBOQ==",
+      "license": "MIT",
+      "dependencies": {
+        "prop-types": "^15.7.2",
+        "yargs": "^16.1.1"
+      },
+      "bin": {
+        "fa-upgrade.sh": "bin/fa-upgrade.sh",
+        "fa5-upgrade": "bin/fa5-upgrade.sh",
+        "fa6-upgrade": "bin/fa6-upgrade.sh",
+        "generate-icon": "bin/generate-icon.js"
+      }
+    },
+    "node_modules/react-native-vector-icons/node_modules/cliui": {
+      "version": "7.0.4",
+      "resolved": "https://registry.npmjs.org/cliui/-/cliui-7.0.4.tgz",
+      "integrity": "sha512-OcRE68cOsVMXp1Yvonl/fzkQOyjLSu/8bhPDfQt0e0/Eb283TKP20Fs2MqoPsr9SwA595rRCA+QMzYc9nBP+JQ==",
+      "license": "ISC",
+      "dependencies": {
+        "string-width": "^4.2.0",
+        "strip-ansi": "^6.0.0",
+        "wrap-ansi": "^7.0.0"
+      }
+    },
+    "node_modules/react-native-vector-icons/node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+      "license": "MIT"
+    },
+    "node_modules/react-native-vector-icons/node_modules/string-width": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "license": "MIT",
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/react-native-vector-icons/node_modules/strip-ansi": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/react-native-vector-icons/node_modules/yargs": {
+      "version": "16.2.0",
+      "resolved": "https://registry.npmjs.org/yargs/-/yargs-16.2.0.tgz",
+      "integrity": "sha512-D1mvvtDG0L5ft/jGWkLpG1+m0eQxOfaBvTNELraWj22wSVUMWxZUvYgJYcKh6jGGIkJFhH4IZPQhR4TKpc8mBw==",
+      "license": "MIT",
+      "dependencies": {
+        "cliui": "^7.0.2",
+        "escalade": "^3.1.1",
+        "get-caller-file": "^2.0.5",
+        "require-directory": "^2.1.1",
+        "string-width": "^4.2.0",
+        "y18n": "^5.0.5",
+        "yargs-parser": "^20.2.2"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/react-native-vector-icons/node_modules/yargs-parser": {
+      "version": "20.2.9",
+      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-20.2.9.tgz",
+      "integrity": "sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/react-native-web": {
       "version": "0.19.13",
       "resolved": "https://registry.npmjs.org/react-native-web/-/react-native-web-0.19.13.tgz",

package.json

@@ -44,6 +44,7 @@
     "react-native-reanimated": "3.16.7",
     "react-native-safe-area-context": "4.12.0",
     "react-native-screens": "4.4.0",
+    "react-native-vector-icons": "^10.2.0",
     "react-native-web": "0.19.13",
     "react-native-webview": "13.12.5"
   },