feat: enhance database service with centralized error logging and improve media handling across services

src/components/PhotoGrid.js

@@ -21,7 +21,31 @@ const PhotoGrid = ({
   const itemSize = (width - GRID_GAP * (columns + 1)) / columns;
 
   const getServiceIcon = (type) =>
-    ({ GOOGLE_PHOTOS: '📷', ICLOUD_PHOTOS: '🍎', NAS: '💾' }[type] || '📱');
+    ({ DEVICE: '📱', GOOGLE_PHOTOS: '📷', ICLOUD_PHOTOS: '🍎', NAS: '💾' }[type] || '📱');
+
+  const renderSourceBadges = (item) => {
+    const sources = item.sources && item.sources.length > 0
+      ? item.sources
+      : [item.source_service];
+
+    if (sources.length === 1) {
+      // Single source — simple badge
+      return (
+        <View style={styles.sourceBadge}>
+          <Text style={{ fontSize: 10 }}>{getServiceIcon(sources[0])}</Text>
+        </View>
+      );
+    }
+
+    // Multiple sources — show all icons with a subtle indicator
+    return (
+      <View style={styles.multiSourceBadge}>
+        {sources.map((src, i) => (
+          <Text key={src + i} style={{ fontSize: 9 }}>{getServiceIcon(src)}</Text>
+        ))}
+      </View>
+    );
+  };
 
   const renderItem = ({ item }) => (
     <TouchableOpacity
@@ -41,9 +65,7 @@ const PhotoGrid = ({
           <Text style={{ color: '#fff', fontSize: 20 }}>▶</Text>
         </View>
       )}
-      <View style={styles.sourceBadge}>
-        <Text style={{ fontSize: 10 }}>{getServiceIcon(item.source_service)}</Text>
-      </View>
+      {renderSourceBadges(item)}
     </TouchableOpacity>
   );
 
@@ -82,6 +104,11 @@ const styles = StyleSheet.create({
     position: 'absolute', bottom: 4, right: 4, backgroundColor: 'rgba(0,0,0,0.5)',
     borderRadius: 8, paddingHorizontal: 4, paddingVertical: 2,
   },
+  multiSourceBadge: {
+    position: 'absolute', bottom: 4, right: 4, backgroundColor: 'rgba(0,0,0,0.6)',
+    borderRadius: 8, paddingHorizontal: 4, paddingVertical: 2,
+    flexDirection: 'row', gap: 2,
+  },
 });
 
 export default PhotoGrid;