More cleanup. More robust themed compononents

app/(tabs)/settings/index.tsx

@@ -25,8 +25,8 @@ const SettingsScreen = () => {
         >
           <IconSymbol name="person.fill" size={24} color="#007AFF" style={styles.icon} />
           <ThemedView style={styles.settingContent}>
-            <ThemedText style={styles.settingTitle}>Profile</ThemedText>
-            <ThemedText style={styles.settingSubtitle}>Name, photo, email</ThemedText>
+            <ThemedText style={styles.settingTitle}>Profile Settings</ThemedText>
+            <ThemedText style={styles.settingSubtitle}>Update profile information or sign out.</ThemedText>
           </ThemedView>
           <IconSymbol name="chevron.right" size={20} color="#C7C7CC" />
         </TouchableOpacity>
@@ -59,7 +59,7 @@ const styles = StyleSheet.create({
     fontWeight: 'bold',
   },
   section: {
-    marginVertical: 16,
+    marginVertical: 8,
     borderRadius: 10,
     overflow: 'hidden',
   },

app/(tabs)/settings/profile.tsx

@@ -1,153 +1,177 @@
 import React, { useState, useEffect } from 'react';
-import { StyleSheet, TouchableOpacity, Image, Alert, ActivityIndicator } from 'react-native';
-import * as ImagePicker from 'expo-image-picker';
+import { StyleSheet, Alert, ActivityIndicator, ScrollView } from 'react-native';
 import { supabase } from '@/lib/supabase';
 import { ThemedView, ThemedText, ThemedTextButton, ThemedTextInput } from '@/components/theme';
-import { IconSymbol } from '@/components/ui/IconSymbol';
-import Avatar from '@/components/auth/Profile_Avatar';
-import { Session } from '@supabase/supabase-js'
-import Logout_Button from '@/components/auth/Logout_Button';
+import ProfileAvatar from '@/components/auth/Profile_Avatar';
+import LogoutButton from '@/components/auth/Logout_Button';
+import { useFocusEffect } from '@react-navigation/native';
 
-export default function ProfileScreen() {
-  const [loading, setLoading] = useState(false);
-  const [fullName, setFullName] = useState('');
-  const [email, setEmail] = useState('');
-  const [avatar, setAvatar] = useState(null);
-
-  useEffect(() => {
-    fetchUserProfile();
-  }, []);
+const ProfileScreen = () => {
+  const [loading, setLoading] = useState(true);
+  const [updating, setUpdating] = useState(false);
+  const [profile, setProfile] = useState({
+    full_name: '',
+    email: '',
+    avatar_url: null,
+    provider: ''
+  });
+  
+  // Fetch profile when screen comes into focus
+  useFocusEffect(
+    React.useCallback(() => {
+      fetchUserProfile();
+    }, [])
+  );
 
   const fetchUserProfile = async () => {
     setLoading(true);
     try {
       const { data: { user } } = await supabase.auth.getUser();
       
-      if (user) {
-        const { data, error } = await supabase
-          .from('profiles')
-          .select('*')
-          .eq('id', user.id)
-          .single();
-        
-        if (data) {
-          setFullName(data.full_name || '');
-          setEmail(data.email || '');
-          setAvatar(data.avatar_url || null);
-        }
+      if (!user) {
+        throw new Error('Not authenticated');
+      }
+      
+      const { data, error } = await supabase
+        .from('profiles')
+        .select('*')
+        .eq('id', user.id)
+        .single();
+      
+      if (error) throw error;
+      
+      if (data) {
+        setProfile({
+          full_name: data.full_name || '',
+          email: data.email || '',
+          avatar_url: data.avatar_url,
+          provider: data.provider || ''
+        });
       }
     } catch (error) {
       console.error('Error fetching profile:', error);
+      Alert.alert('Error', 'Failed to load profile information');
     } finally {
       setLoading(false);
     }
   };
 
   const updateProfile = async () => {
-    setLoading(true);
+    setUpdating(true);
     try {
       const { data: { user } } = await supabase.auth.getUser();
       
-      if (!user) throw new Error('User not found');
+      if (!user) throw new Error('Not authenticated');
+      
+      // Validate input
+      if (!profile.full_name.trim()) {
+        Alert.alert('Error', 'Please enter your full name');
+        return;
+      }
       
       const updates = {
         id: user.id,
-        full_name: fullName,
-        email,
+        full_name: profile.full_name.trim(),
         updated_at: new Date(),
       };
       
       const { error } = await supabase
         .from('profiles')
         .upsert(updates);
-        
+      
       if (error) throw error;
       
       Alert.alert('Success', 'Profile updated successfully!');
     } catch (error) {
-      Alert.alert('Error updating profile', error.message);
+      Alert.alert('Error', error instanceof Error ? error.message : 'Failed to update profile');
     } finally {
-      setLoading(false);
+      setUpdating(false);
     }
   };
 
-  // Add image picking functionality here (similar to previous example)
+  const handleAvatarUpload = () => {
+    // Refresh profile data after avatar upload
+    fetchUserProfile();
+  };
+
+  if (loading) {
+    return (
+      <ThemedView style={styles.loadingContainer}>
+        <ActivityIndicator size="large" />
+      </ThemedView>
+    );
+  }
 
   return (
-    <ThemedView style={styles.container}>
-
-      <Avatar
-        size={50}
-        url={avatar}
-        onUpload={updateProfile}
-      />
-
-      <ThemedView style={styles.formSection}>
-        <ThemedText style={styles.label}>Full Name</ThemedText>
-        <ThemedTextInput
-          value={fullName}
-          onChangeText={setFullName}
-          placeholder="Enter your full name"
-          style={styles.input}
+    <ScrollView contentContainerStyle={styles.scrollContainer}>
+      <ThemedView style={styles.container}>
+        <ProfileAvatar
+          url={profile.avatar_url}
+          size={120}
+          onUpload={handleAvatarUpload}
+          disabled={updating}
         />
         
+        {profile.provider && (
+          <ThemedText style={styles.providerText}>
+            Signed in with {profile.provider.charAt(0).toUpperCase() + profile.provider.slice(1)}
+          </ThemedText>
+        )}
+        
+        <ThemedView style={styles.formSection}>
+          <ThemedText type='title' style={styles.label}>Name</ThemedText>
+          <ThemedTextInput
+            value={profile.full_name}
+            onChangeText={(text) => setProfile(prev => ({ ...prev, full_name: text }))}
+            placeholder="Enter your full name"
+            style={styles.input}
+            editable={!updating}
+          />
+        </ThemedView>
+        
+        <ThemedTextButton
+          text={updating ? 'Saving...' : 'Save Changes'}
+          onPress={updateProfile}
+          disabled={updating || !profile.full_name.trim()}
+          fontSize={18}
+          fontWeight='semibold'
+          width='90%'
+          style={styles.saveButton}
+        />
+        
+        <LogoutButton
+          fontSize={18}
+          fontWeight='semibold'
+          width='90%'
+          style={styles.logoutButton}
+        />
       </ThemedView>
-
-      <ThemedTextButton
-        text='Save Changes'
-        onPress={updateProfile}
-        disabled={loading}
-        fontSize={18}
-        fontWeight='semibold'
-        width='90%'
-        style={styles.saveButton}
-      />
-      <Logout_Button 
-        fontSize={18}
-        fontWeight='semibold'
-        width='90%'
-        style={styles.logoutButton}
-      />
-
-    </ThemedView>
+    </ScrollView>
   );
-}
+};
+export default ProfileScreen;
 
 const styles = StyleSheet.create({
+  scrollContainer: {
+    flexGrow: 1,
+  },
   container: {
     flex: 1,
     padding: 16,
     alignItems: 'center',
   },
-  avatarContainer: {
-    alignItems: 'center',
-    marginTop: 20,
-    marginBottom: 30,
-  },
-  avatar: {
-    width: 120,
-    height: 120,
-    borderRadius: 60,
-  },
-  avatarPlaceholder: {
-    width: 120,
-    height: 120,
-    borderRadius: 60,
-    backgroundColor: '#E1E1E1',
+  loadingContainer: {
+    flex: 1,
     justifyContent: 'center',
     alignItems: 'center',
   },
-  changePhotoText: {
-    marginTop: 8,
-    color: '#007AFF',
-    fontSize: 16,
-  },
   formSection: {
-    marginBottom: 30,
+    marginBottom: 20,
   },
   label: {
     marginBottom: 8,
     fontSize: 16,
+    fontWeight: '500',
   },
   input: {
     fontSize: 16,
@@ -155,15 +179,24 @@ const styles = StyleSheet.create({
     paddingHorizontal: 10,
     borderRadius: 8,
     marginBottom: 20,
+    width: '100%',
+  },
+  disabledInput: {
+    opacity: 0.7,
   },
   saveButton: {
     borderRadius: 8,
     alignItems: 'center',
+    marginBottom: 10,
   },
   logoutButton: {
-    backgroundColor: 'red',
-    marginTop: 50,
+    marginTop: 30,
     borderRadius: 8,
     alignItems: 'center',
   },
+  providerText: {
+    marginBottom: 20,
+    fontSize: 14,
+    opacity: 0.7,
+  }
 });