feat: added new API UI

app/AppSettingsMenu.tsx

@@ -85,14 +85,12 @@ const AppSettingsMenu = () => {
     const [notificationVibrate, setNotificationVibrate] = useMMKVBoolean(
         AppSettings.VibrateNotification
     )
-
     const [showNotificationText, setShowNotificationText] = useMMKVBoolean(
         AppSettings.ShowNotificationText
     )
-
     const [authLocal, setAuthLocal] = useMMKVBoolean(AppSettings.LocallyAuthenticateUser)
-
     const [unlockOrientation, setUnlockOrientation] = useMMKVBoolean(AppSettings.UnlockOrientation)
+    const [useLegacyAPI, setUseLegacyAPI] = useMMKVBoolean(AppSettings.UseLegacyAPI)
 
     return (
         <ScrollView style={styles.mainContainer}>
@@ -154,6 +152,13 @@ const AppSettingsMenu = () => {
                 description="Ignores context length limits when building prompts"
             />
 
+            <SwitchWithDescription
+                title="Use Legacy API System"
+                value={useLegacyAPI}
+                onValueChange={setUseLegacyAPI}
+                description="Use old API system"
+            />
+
             <SectionTitle>Notifications</SectionTitle>
 
             <SwitchWithDescription

app/SamplerMenu.tsx

@@ -1,17 +1,19 @@
 import { Alert } from '@components/Alert'
 import FadeDownView from '@components/FadeDownView'
-import { AppMode } from '@constants/GlobalValues'
+import { defaultTemplates } from '@constants/API/DefaultAPI'
+import { AppMode, AppSettings } from '@constants/GlobalValues'
 import { FontAwesome } from '@expo/vector-icons'
-import { Global, Presets, saveStringExternal, Logger, Style, API } from '@globals'
+import { API, Global, Logger, Presets, saveStringExternal, Style } from '@globals'
+import { APIState as APIStateNew } from 'app/constants/API/APIManagerState'
 import { APIState } from 'app/constants/APIState'
-import { Samplers, SamplerPreset } from 'app/constants/SamplerData'
+import { SamplerPreset, Samplers } from 'app/constants/SamplerData'
 import { Stack } from 'expo-router'
-import { useState, useEffect } from 'react'
-import { View, Text, StyleSheet, SafeAreaView, ScrollView, TouchableOpacity } from 'react-native'
+import { useEffect, useState } from 'react'
+import { SafeAreaView, ScrollView, StyleSheet, Text, TouchableOpacity, View } from 'react-native'
 import { Dropdown } from 'react-native-element-dropdown'
-import { useMMKVObject, useMMKVString } from 'react-native-mmkv'
+import { useMMKVBoolean, useMMKVObject, useMMKVString } from 'react-native-mmkv'
 
-import { TextBoxModal, SliderItem, TextBox, CheckboxTitle } from './components'
+import { CheckboxTitle, SliderItem, TextBox, TextBoxModal } from './components'
 
 type PresetLabel = {
     label: string
@@ -45,8 +47,19 @@ const SamplerMenu = () => {
         loadPresetList(presetName ?? '')
     }, [])
 
+    // TODO: Figure this out
+    const [legacy, setLegacy] = useMMKVBoolean(AppSettings.UseLegacyAPI)
+    const apiValues = APIStateNew.useAPIState((state) => state.values)
+
     const samplerList =
-        appMode === AppMode.LOCAL ? APIState[API.LOCAL].samplers : APIState[APIType as API].samplers
+        appMode === AppMode.LOCAL
+            ? APIState[API.LOCAL].samplers
+            : legacy
+              ? APIState[APIType as API].samplers
+              : // This is bad
+                (defaultTemplates.filter(
+                    (item) => item.name === apiValues.filter((item) => item.active)[0].configName
+                )[0].request.samplerFields ?? [])
 
     return (
         <FadeDownView style={{ flex: 1 }}>

app/components/APIManager/APIValueItem.tsx

@@ -0,0 +1,126 @@
+import { Alert } from '@components/Alert'
+import SwitchComponent from '@components/SwitchTitle'
+import { APIManagerValue, APIState } from '@constants/API/APIManagerState'
+import { AntDesign } from '@expo/vector-icons'
+import { Style } from '@globals'
+import { View, Text, StyleSheet, TouchableOpacity } from 'react-native'
+import Animated, {
+    interpolateColor,
+    useAnimatedStyle,
+    useSharedValue,
+    withTiming,
+} from 'react-native-reanimated'
+
+type APIValueItemProps = {
+    item: APIManagerValue
+    index: number
+}
+
+const APIValueItem: React.FC<APIValueItemProps> = ({ item, index }) => {
+    const { removeValue, editValue } = APIState.useAPIState((state) => ({
+        removeValue: state.removeValue,
+        editValue: state.editValue,
+    }))
+
+    const handleDelete = () => {
+        Alert.alert({
+            title: 'Delete API Entry',
+            description: `Are you sure you want to delete "${item.friendlyName}"?`,
+            buttons: [
+                { label: 'Cancel' },
+                {
+                    label: 'Delete API',
+                    onPress: () => {
+                        removeValue(index)
+                    },
+                    type: 'warning',
+                },
+            ],
+        })
+    }
+
+    return (
+        <Animated.View style={item.active ? styles.longContainer : styles.longContainerInactive}>
+            <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+                <SwitchComponent
+                    value={item.active}
+                    onValueChange={(value) => {
+                        editValue({ ...item, active: value }, index)
+                    }}
+                />
+
+                <View style={{ marginLeft: 18 }}>
+                    <Text style={item.active ? styles.name : styles.nameInactive}>
+                        {item.friendlyName}
+                    </Text>
+                    <Text style={item.active ? styles.config : styles.configInactive}>
+                        Config: {item.configName}
+                    </Text>
+                </View>
+            </View>
+            <View style={{ flexDirection: 'row', alignItems: 'center', columnGap: 16 }}>
+                <TouchableOpacity onPress={handleDelete}>
+                    <AntDesign
+                        name="delete"
+                        color={Style.getColor('destructive-brand')}
+                        size={24}
+                    />
+                </TouchableOpacity>
+                <TouchableOpacity>
+                    <AntDesign name="edit" color={Style.getColor('primary-text1')} size={24} />
+                </TouchableOpacity>
+            </View>
+        </Animated.View>
+    )
+}
+
+export default APIValueItem
+
+const styles = StyleSheet.create({
+    longContainer: {
+        backgroundColor: Style.getColor('primary-surface2'),
+        borderColor: Style.getColor('primary-surface2'),
+        borderWidth: 2,
+        flexDirection: 'row',
+        marginBottom: 8,
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        borderRadius: 16,
+        flex: 1,
+        paddingLeft: 12,
+        paddingRight: 24,
+        paddingVertical: 16,
+    },
+
+    longContainerInactive: {
+        borderColor: Style.getColor('primary-surface4'),
+        borderWidth: 2,
+        flexDirection: 'row',
+        marginBottom: 8,
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        borderRadius: 16,
+        flex: 1,
+        paddingHorizontal: 12,
+        paddingRight: 24,
+        paddingVertical: 16,
+    },
+
+    name: {
+        fontSize: 17,
+        color: Style.getColor('primary-text1'),
+    },
+
+    nameInactive: {
+        fontSize: 17,
+        color: Style.getColor('primary-text2'),
+    },
+
+    config: {
+        color: Style.getColor('primary-text2'),
+    },
+
+    configInactive: {
+        color: Style.getColor('primary-text3'),
+    },
+})