delete files etc ..

mobile/components/FileThumbnail.tsx

@@ -40,9 +40,11 @@ interface FileThumbnailProps {
   isLoading?: boolean;
   syncStatus?: SyncStatus;
   isFolder?: boolean;
+  isUploading?: boolean;
+  uploadProgress?: number;
 }
 
-export const FileThumbnail = React.memo(function FileThumbnail({ uri, thumbnailUrl, mimeType, fileName, size, isLoading, syncStatus, isFolder }: FileThumbnailProps) {
+export const FileThumbnail = React.memo(function FileThumbnail({ uri, thumbnailUrl, mimeType, fileName, size, isLoading, syncStatus, isFolder, isUploading, uploadProgress }: FileThumbnailProps) {
   const info = getFileInfo(mimeType, fileName);
   const ext = getExtension(fileName);
 
@@ -75,15 +77,32 @@ export const FileThumbnail = React.memo(function FileThumbnail({ uri, thumbnailU
           cachePolicy="memory-disk"
         />
         {syncStatus && <SyncStatusBadge status={syncStatus} />}
+        {isUploading && (
+          <View style={styles.uploadOverlay}>
+            <ActivityIndicator size="small" color="#fff" />
+            <Text style={styles.uploadProgressText}>{uploadProgress ?? 0}%</Text>
+            <View style={[styles.uploadProgressBar, { width: `${uploadProgress ?? 0}%` }]} />
+          </View>
+        )}
       </View>
     );
   }
 
   return (
-    <View style={[styles.container, { width: size, height: size, backgroundColor: info.bg }]}>
-      <MaterialIcons name={info.icon} size={size * 0.35} color={info.color} />
-      {ext.length <= 4 && (
-        <Text style={[styles.ext, { color: info.color }]}>{ext}</Text>
+    <View style={[styles.container, { width: size, height: size, backgroundColor: isUploading ? '#E3F2FD' : info.bg }]}>
+      {isUploading ? (
+        <View style={styles.uploadGhost}>
+          <MaterialIcons name="cloud-upload" size={size * 0.3} color="#1976D2" />
+          <ActivityIndicator size="small" color="#1976D2" />
+          <Text style={styles.uploadPercent}>{uploadProgress ?? 0}%</Text>
+        </View>
+      ) : (
+        <>
+          <MaterialIcons name={info.icon} size={size * 0.35} color={info.color} />
+          {ext.length <= 4 && (
+            <Text style={[styles.ext, { color: info.color }]}>{ext}</Text>
+          )}
+        </>
       )}
       {syncStatus && <SyncStatusBadge status={syncStatus} />}
     </View>
@@ -104,4 +123,34 @@ const styles = StyleSheet.create({
     fontSize: 11,
     fontWeight: '700',
   },
+  uploadGhost: {
+    alignItems: 'center',
+    gap: 4,
+  },
+  uploadPercent: {
+    fontSize: 11,
+    fontWeight: '700',
+    color: '#1976D2',
+  },
+  uploadOverlay: {
+    ...StyleSheet.absoluteFill,
+    backgroundColor: 'rgba(0,0,0,0.45)',
+    borderRadius: 6,
+    justifyContent: 'center',
+    alignItems: 'center',
+    gap: 4,
+  },
+  uploadProgressText: {
+    fontSize: 12,
+    fontWeight: '700',
+    color: '#fff',
+  },
+  uploadProgressBar: {
+    position: 'absolute',
+    bottom: 0,
+    left: 0,
+    height: 3,
+    backgroundColor: '#1976D2',
+    borderBottomLeftRadius: 6,
+  },
 });

mobile/components/SyncStatusIcon.tsx

@@ -14,14 +14,18 @@ import Animated, {
 interface SyncStatusIconProps {
   isSyncing: boolean;
   pendingCount: number;
+  isUploading: boolean;
+  uploadPendingCount: number;
   onPress: () => void;
 }
 
-export function SyncStatusIcon({ isSyncing, pendingCount, onPress }: SyncStatusIconProps) {
+export function SyncStatusIcon({ isSyncing, pendingCount, isUploading, uploadPendingCount, onPress }: SyncStatusIconProps) {
   const rotation = useSharedValue(0);
+  const isActive = isSyncing || isUploading;
+  const totalPending = pendingCount + uploadPendingCount;
 
   useEffect(() => {
-    if (isSyncing) {
+    if (isActive) {
       rotation.value = withRepeat(
         withSequence(
           withTiming(360, { duration: 1000, easing: Easing.linear }),
@@ -33,7 +37,7 @@ export function SyncStatusIcon({ isSyncing, pendingCount, onPress }: SyncStatusI
       cancelAnimation(rotation);
       rotation.value = withTiming(0, { duration: 200 });
     }
-  }, [isSyncing, rotation]);
+  }, [isActive, rotation]);
 
   const animatedStyle = useAnimatedStyle(() => ({
     transform: [{ rotate: `${rotation.value}deg` }],
@@ -45,13 +49,13 @@ export function SyncStatusIcon({ isSyncing, pendingCount, onPress }: SyncStatusI
         <MaterialIcons
           name="sync"
           size={22}
-          color={isSyncing ? '#1976D2' : pendingCount > 0 ? '#F57C00' : '#666'}
+          color={isActive ? '#1976D2' : totalPending > 0 ? '#F57C00' : '#666'}
         />
       </Animated.View>
-      {pendingCount > 0 && !isSyncing && (
+      {totalPending > 0 && !isActive && (
         <View style={styles.badge}>
           <Text style={styles.badgeText}>
-            {pendingCount > 99 ? '99+' : pendingCount}
+            {totalPending > 99 ? '99+' : totalPending}
           </Text>
         </View>
       )}