refactored code into components (major cleanup for reused code) added email for local acccount creation and changes to how nas and google photo connections work and added themes

App.js

@@ -4,53 +4,51 @@ import { NavigationContainer } from '@react-navigation/native';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
 import { ActivityIndicator, View, Text, TouchableOpacity } from 'react-native';
+import { ThemeProvider, useTheme } from './src/services/ThemeContext';
 import DatabaseService from './src/services/DatabaseService';
 import LoginScreen from './src/screens/LoginScreen';
 import RegisterScreen from './src/screens/RegisterScreen';
 import OnboardingScreen from './src/screens/OnboardingScreen';
 import HomeScreen from './src/screens/HomeScreen';
 import SearchScreen from './src/screens/SearchScreen';
-import AlbumsScreen from './src/screens/AlbumsScreen';
+import CollectionsScreen from './src/screens/AlbumsScreen';
+import SettingsScreen from './src/screens/SettingsScreen';
 
 const Stack = createNativeStackNavigator();
 const Tab = createBottomTabNavigator();
 
 /**
- * MainTabs - Bottom tab navigator for logged-in users
- * Tabs: Home (Library), Search, Albums
+ * MainTabs – Bottom tab navigator for logged-in users
+ * Tabs: Library, Search, Collections
  */
 function MainTabs({ route }) {
   const { userId } = route.params || {};
+  const { theme } = useTheme();
 
   return (
     <Tab.Navigator
       screenOptions={{
         headerShown: false,
-        tabBarActiveTintColor: '#1a73e8',
-        tabBarInactiveTintColor: '#5f6368',
+        tabBarActiveTintColor: theme.tabActive,
+        tabBarInactiveTintColor: theme.tabInactive,
         tabBarStyle: {
-          backgroundColor: '#fff',
-          borderTopColor: '#e0e0e0',
+          backgroundColor: theme.tabBar,
+          borderTopColor: theme.tabBarBorder,
           borderTopWidth: 1,
           height: 56,
           paddingBottom: 6,
           paddingTop: 6,
         },
-        tabBarLabelStyle: {
-          fontSize: 11,
-          fontWeight: '500',
-        },
+        tabBarLabelStyle: { fontSize: 11, fontWeight: '500' },
       }}
     >
       <Tab.Screen
-        name="Photos"
+        name="Library"
         component={HomeScreen}
         initialParams={{ userId }}
         options={{
-          tabBarLabel: 'Photos',
-          tabBarIcon: ({ color }) => (
-            <Text style={{ fontSize: 22, color }}>🖼️</Text>
-          ),
+          tabBarLabel: 'Library',
+          tabBarIcon: ({ color }) => <Text style={{ fontSize: 22, color }}>🖼️</Text>,
         }}
       />
       <Tab.Screen
@@ -59,20 +57,16 @@ function MainTabs({ route }) {
         initialParams={{ userId }}
         options={{
           tabBarLabel: 'Search',
-          tabBarIcon: ({ color }) => (
-            <Text style={{ fontSize: 22, color }}>🔍</Text>
-          ),
+          tabBarIcon: ({ color }) => <Text style={{ fontSize: 22, color }}>🔍</Text>,
         }}
       />
       <Tab.Screen
-        name="Albums"
-        component={AlbumsScreen}
+        name="Collections"
+        component={CollectionsScreen}
         initialParams={{ userId }}
         options={{
-          tabBarLabel: 'Albums',
-          tabBarIcon: ({ color }) => (
-            <Text style={{ fontSize: 22, color }}>📁</Text>
-          ),
+          tabBarLabel: 'Collections',
+          tabBarIcon: ({ color }) => <Text style={{ fontSize: 22, color }}>📁</Text>,
         }}
       />
     </Tab.Navigator>
@@ -80,31 +74,26 @@ function MainTabs({ route }) {
 }
 
 /**
- * AppNavigator - Root stack navigator
- * Handles auth flow (Login/Register/Onboarding) then MainTabs
+ * AppNavigator – Root stack navigator
  */
 function AppNavigator() {
   return (
-    <Stack.Navigator
-      screenOptions={{
-        headerShown: false,
-      }}
-    >
+    <Stack.Navigator screenOptions={{ headerShown: false }}>
       <Stack.Screen name="Login" component={LoginScreen} />
       <Stack.Screen name="Register" component={RegisterScreen} />
       <Stack.Screen name="Onboarding" component={OnboardingScreen} />
       <Stack.Screen name="MainTabs" component={MainTabs} />
+      <Stack.Screen name="Settings" component={SettingsScreen} />
     </Stack.Navigator>
   );
 }
 
-export default function App() {
+function AppInner() {
+  const { theme } = useTheme();
   const [isReady, setIsReady] = useState(false);
   const [error, setError] = useState(null);
 
-  useEffect(() => {
-    initializeApp();
-  }, []);
+  useEffect(() => { initializeApp(); }, []);
 
   const initializeApp = async () => {
     try {
@@ -120,21 +109,19 @@ export default function App() {
 
   if (!isReady && !error) {
     return (
-      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#fff' }}>
-        <ActivityIndicator size="large" color="#1a73e8" />
+      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: theme.background }}>
+        <ActivityIndicator size="large" color={theme.primary} />
       </View>
     );
   }
 
   if (error) {
     return (
-      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', paddingHorizontal: 20, backgroundColor: '#fff' }}>
-        <Text style={{ fontSize: 16, color: '#333', marginBottom: 12, textAlign: 'center' }}>
-          {error}
-        </Text>
+      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', paddingHorizontal: 20, backgroundColor: theme.background }}>
+        <Text style={{ fontSize: 16, color: theme.text, marginBottom: 12, textAlign: 'center' }}>{error}</Text>
         <TouchableOpacity
           onPress={initializeApp}
-          style={{ backgroundColor: '#1a73e8', paddingHorizontal: 16, paddingVertical: 10, borderRadius: 6 }}
+          style={{ backgroundColor: theme.primary, paddingHorizontal: 16, paddingVertical: 10, borderRadius: 6 }}
         >
           <Text style={{ color: '#fff', fontWeight: '600' }}>Retry</Text>
         </TouchableOpacity>
@@ -147,7 +134,15 @@ export default function App() {
       <NavigationContainer>
         <AppNavigator />
       </NavigationContainer>
-      <StatusBar style="dark" backgroundColor="#fff" />
+      <StatusBar style={theme.statusBarStyle} backgroundColor={theme.background} />
     </>
   );
 }
+
+export default function App() {
+  return (
+    <ThemeProvider>
+      <AppInner />
+    </ThemeProvider>
+  );
+}