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

src/components/MediaViewer.js

@@ -0,0 +1,74 @@
+import React from 'react';
+import {
+  Modal, View, Text, TouchableOpacity, Image, StyleSheet,
+} from 'react-native';
+import { useTheme } from '../services/ThemeContext';
+
+const getServiceIcon = (type) =>
+  ({ GOOGLE_PHOTOS: '📷', ICLOUD_PHOTOS: '🍎', NAS: '💾' }[type] || '📱');
+const getServiceName = (type) =>
+  ({ GOOGLE_PHOTOS: 'Google Photos', ICLOUD_PHOTOS: 'iCloud', NAS: 'NAS' }[type] || type);
+
+const MediaViewer = ({ visible, media, onClose }) => {
+  const { theme } = useTheme();
+
+  if (!media) return null;
+
+  return (
+    <Modal visible={visible} transparent animationType="fade" onRequestClose={onClose}>
+      <View style={[styles.container, { backgroundColor: theme.modalBg }]}>
+        <TouchableOpacity style={styles.closeButton} onPress={onClose}>
+          <Text style={styles.closeText}>✕</Text>
+        </TouchableOpacity>
+        {media.local_path ? (
+          <Image source={{ uri: media.local_path }} style={styles.fullImage} resizeMode="contain" />
+        ) : (
+          <View style={styles.fullPlaceholder}>
+            <Text style={{ fontSize: 64 }}>📷</Text>
+          </View>
+        )}
+        <View style={[styles.infoPanel, { backgroundColor: theme.modalInfoBg }]}>
+          <Text style={styles.title}>{media.title || 'Photo'}</Text>
+          <View style={styles.row}>
+            <Text style={styles.label}>Source</Text>
+            <Text style={styles.value}>
+              {getServiceIcon(media.source_service)} {getServiceName(media.source_service)}
+            </Text>
+          </View>
+          {media.created_date && (
+            <View style={styles.row}>
+              <Text style={styles.label}>Date</Text>
+              <Text style={styles.value}>
+                {new Date(media.created_date).toLocaleDateString()}
+              </Text>
+            </View>
+          )}
+        </View>
+      </View>
+    </Modal>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: { flex: 1 },
+  closeButton: {
+    position: 'absolute', top: 44, right: 16, zIndex: 20,
+    width: 36, height: 36, borderRadius: 18,
+    backgroundColor: 'rgba(255,255,255,0.2)',
+    justifyContent: 'center', alignItems: 'center',
+  },
+  closeText: { color: '#fff', fontSize: 20, fontWeight: '600' },
+  fullImage: { flex: 1, width: '100%' },
+  fullPlaceholder: { flex: 1, justifyContent: 'center', alignItems: 'center' },
+  infoPanel: {
+    padding: 16, paddingBottom: 32,
+    borderTopLeftRadius: 16, borderTopRightRadius: 16,
+  },
+  title: { fontSize: 16, fontWeight: '600', color: '#fff', marginBottom: 8 },
+  row: { flexDirection: 'row', justifyContent: 'space-between', marginBottom: 4 },
+  label: { fontSize: 12, color: '#9aa0a6' },
+  value: { fontSize: 12, color: '#e8eaed', fontWeight: '500' },
+});
+
+export default MediaViewer;
+