display files with cache image

mobile/components/FileThumbnail.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
-import { View, Text, Image, ActivityIndicator, StyleSheet } from 'react-native';
+import { View, Text, ActivityIndicator, StyleSheet } from 'react-native';
+import { Image } from 'expo-image';
 import { MaterialIcons } from '@expo/vector-icons';
 import type { ComponentProps } from 'react';
 import { SyncStatusBadge } from './SyncStatusBadge';
@@ -40,7 +41,7 @@ interface FileThumbnailProps {
   syncStatus?: SyncStatus;
 }
 
-export function FileThumbnail({ uri, thumbnailUrl, mimeType, fileName, size, isLoading, syncStatus }: FileThumbnailProps) {
+export const FileThumbnail = React.memo(function FileThumbnail({ uri, thumbnailUrl, mimeType, fileName, size, isLoading, syncStatus }: FileThumbnailProps) {
   const info = getFileInfo(mimeType, fileName);
   const ext = getExtension(fileName);
 
@@ -57,7 +58,13 @@ export function FileThumbnail({ uri, thumbnailUrl, mimeType, fileName, size, isL
   if (imageUri) {
     return (
       <View style={{ width: size, height: size }}>
-        <Image source={{ uri: imageUri }} style={[styles.image, { width: size, height: size }]} />
+        <Image
+          source={imageUri}
+          style={[styles.image, { width: size, height: size }]}
+          contentFit="cover"
+          transition={200}
+          cachePolicy="memory-disk"
+        />
         {syncStatus && <SyncStatusBadge status={syncStatus} />}
       </View>
     );
@@ -72,7 +79,7 @@ export function FileThumbnail({ uri, thumbnailUrl, mimeType, fileName, size, isL
       {syncStatus && <SyncStatusBadge status={syncStatus} />}
     </View>
   );
-}
+});
 
 const styles = StyleSheet.create({
   container: {

mobile/components/SyncStatusBadge.tsx

@@ -10,8 +10,10 @@ interface SyncStatusBadgeProps {
 
 const STATUS_CONFIG: Record<SyncStatus, { icon: string; color: string; bg: string }> = {
   local: { icon: 'phone-android', color: '#757575', bg: 'rgba(245,245,245,0.9)' },
+  syncing: { icon: 'sync', color: '#FF9800', bg: 'rgba(255,243,224,0.9)' },
   synced: { icon: 'sync', color: '#4CAF50', bg: 'rgba(232,245,233,0.9)' },
   cloud: { icon: 'cloud', color: '#1976D2', bg: 'rgba(227,242,253,0.9)' },
+  conflict: { icon: 'warning', color: '#E53935', bg: 'rgba(255,235,238,0.9)' },
 };
 
 export function SyncStatusBadge({ status, size = 16 }: SyncStatusBadgeProps) {