fix bugs

components/ServerSettingsModal.tsx

@@ -0,0 +1,157 @@
+import React from 'react';
+import {
+    Alert,
+    Modal,
+    StyleSheet,
+    Text,
+    TextInput,
+    TouchableOpacity,
+    View,
+} from 'react-native';
+import { saveServerDomain } from '../services/api';
+
+const PRESETS = [
+    { label: 'aa.pfgame.org', host: 'aa.pfgame.org', port: '443' },
+    { label: '192.168.1.117:16000', host: '192.168.1.117', port: '16000' },
+];
+
+type Props = {
+    visible: boolean;
+    host: string;
+    port: string;
+    onHostChange: (host: string) => void;
+    onPortChange: (port: string) => void;
+    onClose: () => void;
+};
+
+export const ServerSettingsModal: React.FC<Props> = ({
+    visible,
+    host,
+    port,
+    onHostChange,
+    onPortChange,
+    onClose,
+}) => (
+    <Modal visible={visible} transparent animationType="fade">
+        <View style={styles.overlay}>
+            <View style={styles.box}>
+                <Text style={styles.title}>Server Settings</Text>
+                <View style={styles.presets}>
+                    {PRESETS.map((p) => (
+                        <TouchableOpacity
+                            key={p.label}
+                            onPress={() => {
+                                onHostChange(p.host);
+                                onPortChange(p.port);
+                            }}
+                            style={[styles.presetBtn, host === p.host && port === p.port && styles.presetBtnActive]}
+                        >
+                            <Text
+                                style={{
+                                    fontSize: 12,
+                                    color: host === p.host && port === p.port ? '#fff' : '#333',
+                                }}
+                            >
+                                {p.label}
+                            </Text>
+                        </TouchableOpacity>
+                    ))}
+                </View>
+                <Text style={styles.inputLabel}>Host</Text>
+                <TextInput
+                    style={styles.textInput}
+                    value={host}
+                    onChangeText={onHostChange}
+                    placeholder="192.168.1.198"
+                    autoCapitalize="none"
+                />
+                <Text style={styles.inputLabel}>Port</Text>
+                <TextInput
+                    style={[styles.textInput, { marginBottom: 20 }]}
+                    value={port}
+                    onChangeText={onPortChange}
+                    placeholder="16000"
+                    keyboardType="number-pad"
+                />
+                <View style={styles.actions}>
+                    <TouchableOpacity onPress={onClose} style={styles.cancelBtn}>
+                        <Text style={{ color: '#666' }}>Cancel</Text>
+                    </TouchableOpacity>
+                    <TouchableOpacity
+                        onPress={async () => {
+                            const domain = port ? `${host}:${port}` : host;
+                            await saveServerDomain(domain, port === '443');
+                            onClose();
+                            Alert.alert('Saved', 'Restart app to take effect');
+                        }}
+                        style={styles.saveBtn}
+                    >
+                        <Text style={{ color: '#fff', fontWeight: 'bold' }}>Save</Text>
+                    </TouchableOpacity>
+                </View>
+            </View>
+        </View>
+    </Modal>
+);
+
+const styles = StyleSheet.create({
+    overlay: {
+        flex: 1,
+        backgroundColor: 'rgba(0,0,0,0.5)',
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    box: {
+        backgroundColor: '#fff',
+        borderRadius: 10,
+        padding: 20,
+        width: '85%',
+    },
+    title: {
+        fontSize: 16,
+        fontWeight: 'bold',
+        marginBottom: 12,
+    },
+    presets: {
+        flexDirection: 'row',
+        flexWrap: 'wrap',
+        gap: 6,
+        marginBottom: 14,
+    },
+    presetBtn: {
+        paddingHorizontal: 10,
+        paddingVertical: 5,
+        borderRadius: 6,
+        backgroundColor: '#f0f0f0',
+    },
+    presetBtnActive: { backgroundColor: '#3498db' },
+    inputLabel: {
+        fontSize: 13,
+        color: '#666',
+        marginBottom: 4,
+    },
+    textInput: {
+        borderWidth: 1,
+        borderColor: '#ddd',
+        borderRadius: 6,
+        paddingHorizontal: 10,
+        paddingVertical: 8,
+        marginBottom: 12,
+        fontSize: 14,
+    },
+    actions: {
+        flexDirection: 'row',
+        justifyContent: 'flex-end',
+    },
+    cancelBtn: {
+        paddingHorizontal: 16,
+        paddingVertical: 8,
+        marginRight: 10,
+    },
+    saveBtn: {
+        backgroundColor: '#3498db',
+        paddingHorizontal: 16,
+        paddingVertical: 8,
+        borderRadius: 6,
+    },
+});