misc: init

app/(tabs)/settings.tsx

@@ -0,0 +1,231 @@
+import React from 'react';
+import {
+  View,
+  Text,
+  StyleSheet,
+  ScrollView,
+  TouchableOpacity,
+  Alert,
+} from 'react-native';
+import { useAuth } from '../../src/context/AuthContext';
+import AsyncStorage from '@react-native-async-storage/async-storage';
+
+export default function SettingsScreen() {
+  const { user, logout } = useAuth();
+
+  const handleLogout = () => {
+    Alert.alert(
+      'Logout',
+      'Are you sure you want to logout?',
+      [
+        { text: 'Cancel', style: 'cancel' },
+        {
+          text: 'Logout',
+          style: 'destructive',
+          onPress: async () => {
+            await logout();
+          },
+        },
+      ]
+    );
+  };
+
+  const handleClearData = () => {
+    Alert.alert(
+      'Clear Data',
+      'This will clear all stored data. Are you sure?',
+      [
+        { text: 'Cancel', style: 'cancel' },
+        {
+          text: 'Clear',
+          style: 'destructive',
+          onPress: async () => {
+            try {
+              await AsyncStorage.clear();
+              Alert.alert('Success', 'All data cleared');
+            } catch (error) {
+              Alert.alert('Error', 'Failed to clear data');
+            }
+          },
+        },
+      ]
+    );
+  };
+
+  const SettingItem = ({ 
+    label, 
+    value, 
+    onPress 
+  }: { 
+    label: string; 
+    value?: string; 
+    onPress?: () => void;
+  }) => (
+    <TouchableOpacity
+      style={styles.settingItem}
+      onPress={onPress}
+      disabled={!onPress}
+      activeOpacity={onPress ? 0.7 : 1}
+    >
+      <Text style={styles.settingLabel}>{label}</Text>
+      <View style={styles.settingValueContainer}>
+        <Text style={styles.settingValue} numberOfLines={1}>
+          {value || 'N/A'}
+        </Text>
+      </View>
+    </TouchableOpacity>
+  );
+
+  const ActionButton = ({
+    title,
+    onPress,
+    destructive = false,
+  }: {
+    title: string;
+    onPress: () => void;
+    destructive?: boolean;
+  }) => (
+    <TouchableOpacity
+      style={[styles.actionButton, destructive && styles.actionButtonDestructive]}
+      onPress={onPress}
+    >
+      <Text
+        style={[
+          styles.actionButtonText,
+          destructive && styles.actionButtonTextDestructive,
+        ]}
+      >
+        {title}
+      </Text>
+    </TouchableOpacity>
+  );
+
+  return (
+    <ScrollView style={styles.container}>
+      <View style={styles.content}>
+        <View style={styles.section}>
+          <Text style={styles.sectionTitle}>User Information</Text>
+          <SettingItem label="Username" value={user?.username || 'N/A'} />
+          <SettingItem label="Email" value={user?.email || 'N/A'} />
+          <SettingItem 
+            label="User ID" 
+            value={user?.id || 'N/A'} 
+          />
+        </View>
+
+        <View style={styles.section}>
+          <Text style={styles.sectionTitle}>Server</Text>
+          <SettingItem 
+            label="Server URL" 
+            value="https://wol.f6knight.duckdns.org" 
+          />
+          <SettingItem 
+            label="API Base" 
+            value="/api" 
+          />
+        </View>
+
+        <View style={styles.section}>
+          <Text style={styles.sectionTitle}>App Info</Text>
+          <SettingItem label="Version" value="1.0.0" />
+          <SettingItem label="Build" value="Expo" />
+        </View>
+
+        <View style={styles.section}>
+          <Text style={styles.sectionTitle}>Actions</Text>
+          <ActionButton title="Logout" onPress={handleLogout} destructive />
+          <ActionButton title="Clear All Data" onPress={handleClearData} destructive />
+        </View>
+
+        <View style={styles.footer}>
+          <Text style={styles.footerText}>
+            UpSnap Mobile App
+          </Text>
+          <Text style={styles.footerText}>
+            Connect to your UpSnap server
+          </Text>
+        </View>
+      </View>
+    </ScrollView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#f5f5f5',
+  },
+  content: {
+    padding: 20,
+  },
+  section: {
+    backgroundColor: '#fff',
+    borderRadius: 12,
+    marginBottom: 20,
+    overflow: 'hidden',
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.1,
+    shadowRadius: 4,
+    elevation: 3,
+  },
+  sectionTitle: {
+    fontSize: 14,
+    fontWeight: 'bold',
+    color: '#666',
+    paddingHorizontal: 15,
+    paddingTop: 15,
+    paddingBottom: 10,
+    backgroundColor: '#f9f9f9',
+  },
+  settingItem: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingHorizontal: 15,
+    paddingVertical: 15,
+    borderBottomWidth: 1,
+    borderBottomColor: '#f0f0f0',
+  },
+  settingLabel: {
+    fontSize: 16,
+    color: '#333',
+    flex: 1,
+  },
+  settingValueContainer: {
+    flex: 1,
+    alignItems: 'flex-end',
+  },
+  settingValue: {
+    fontSize: 14,
+    color: '#666',
+    maxWidth: 200,
+  },
+  actionButton: {
+    backgroundColor: '#007AFF',
+    margin: 15,
+    padding: 15,
+    borderRadius: 8,
+    alignItems: 'center',
+  },
+  actionButtonDestructive: {
+    backgroundColor: '#f44336',
+  },
+  actionButtonText: {
+    color: '#fff',
+    fontSize: 16,
+    fontWeight: 'bold',
+  },
+  actionButtonTextDestructive: {
+    color: '#fff',
+  },
+  footer: {
+    alignItems: 'center',
+    paddingVertical: 30,
+  },
+  footerText: {
+    fontSize: 14,
+    color: '#999',
+    marginBottom: 5,
+  },
+});