feat: gallery performance, image zoom, advanced 3-way delete, native video controls

keystone-app/app/(tabs)/index.tsx

@@ -25,12 +25,14 @@ import { StatusBar } from 'expo-status-bar';
 import { MaterialIcons } from '@expo/vector-icons';
 import { format, isToday, isYesterday } from 'date-fns';
 import AsyncStorage from '@react-native-async-storage/async-storage';
+import ImageViewer from 'react-native-image-zoom-viewer';
 
 import { SYNC_ON_CELLULAR_KEY } from './settings';
 import { runSyncCycle, BACKEND_URL, getToken, getSyncedList, deleteFromCloud } from '../utils/syncManager';
 import { useAuth } from '../../components/AuthContext';
 
 export const TRASHED_ASSETS_KEY = '@trashed_assets';
+export const CACHED_ASSETS_KEY = '@cached_assets';
 
 const { width, height } = Dimensions.get('window');
 const NUM_COLUMNS = 4;
@@ -42,6 +44,7 @@ export type UnifiedAsset = {
   originalId?: string; // local ID if it exists
   uri: string; // local uri or remote URL
   cloudUri?: string; // remote URL if backed up
+  cloudId?: string; // remote relative path for deletion
   filename: string;
   mediaType: 'photo' | 'video';
   creationTime: number;
@@ -65,6 +68,93 @@ function SyncProgressBar({ progress, total }: { progress: number; total: number
   );
 }
 
+// ─── Memoized Gallery Row ────────────────────────────────────────
+const GalleryRow = React.memo(({
+  row,
+  selectedIds,
+  isSelecting,
+  openViewer,
+  toggleSelect,
+}: {
+  row: UnifiedAsset[];
+  selectedIds: Set<string>;
+  isSelecting: boolean;
+  openViewer: (a: UnifiedAsset) => void;
+  toggleSelect: (id: string) => void;
+}) => {
+  return (
+    <View style={styles.row}>
+      {row.map(asset => {
+        const selected = selectedIds.has(asset.id);
+        const isVideo = asset.mediaType === MediaLibrary.MediaType.video;
+        return (
+          <TouchableOpacity
+            key={asset.id}
+            style={[styles.tileContainer, selected && styles.tileSelected]}
+            onPress={() => openViewer(asset)}
+            onLongPress={() => toggleSelect(asset.id)}
+            activeOpacity={0.85}
+          >
+            <Image
+              source={{ uri: asset.uri }}
+              style={styles.image}
+              contentFit="cover"
+              cachePolicy="memory-disk"
+            />
+            {isVideo && (
+              <View style={styles.videoOverlay}>
+                <MaterialIcons name="play-circle-fill" size={22} color="rgba(255,255,255,0.9)" />
+                {asset.duration > 0 && (
+                  <Text style={styles.videoDuration}>
+                    {Math.floor(asset.duration / 60)}:{String(Math.floor(asset.duration % 60)).padStart(2, '0')}
+                  </Text>
+                )}
+              </View>
+            )}
+            
+            {/* Unsynced Cloud Indicator */}
+            {!asset.isSynced && !asset.isCloudOnly && (
+              <View style={styles.unsyncedOverlay}>
+                <MaterialIcons name="cloud-off" size={16} color="rgba(255,255,255,0.8)" />
+              </View>
+            )}
+            
+            {/* Cloud-Only Indicator */}
+            {asset.isCloudOnly && (
+              <View style={styles.cloudOnlyOverlay}>
+                <MaterialIcons name="cloud" size={16} color="rgba(255,255,255,0.8)" />
+              </View>
+            )}
+            {/* Selection check circle — always show in selection mode */}
+            {isSelecting && (
+              <View style={styles.selectionCircleOverlay}>
+                {selected
+                  ? <MaterialIcons name="check-circle" size={22} color="#1a73e8" />
+                  : <MaterialIcons name="radio-button-unchecked" size={22} color="rgba(255,255,255,0.8)" />
+                }
+              </View>
+            )}
+            {!isSelecting && selected && (
+              <View style={styles.selectedOverlay}>
+                <MaterialIcons name="check-circle" size={22} color="#1a73e8" />
+              </View>
+            )}
+          </TouchableOpacity>
+        );
+      })}
+      {Array.from({ length: NUM_COLUMNS - row.length }).map((_, i) => (
+        <View key={`empty-${i}`} style={styles.tileFiller} />
+      ))}
+    </View>
+  );
+}, (prev, next) => {
+  if (prev.isSelecting !== next.isSelecting) return false;
+  // If no selection changes affect this row, we can skip render
+  const prevSelected = prev.row.map(a => prev.selectedIds.has(a.id));
+  const nextSelected = next.row.map(a => next.selectedIds.has(a.id));
+  return prevSelected.every((s, i) => s === nextSelected[i]);
+});
+
 // ─── Main component ──────────────────────────────────────────────
 export default function PhotosScreen() {
   const insets = useSafeAreaInsets();
@@ -98,7 +188,6 @@ export default function PhotosScreen() {
   const [viewerIndex, setViewerIndex] = useState<number | null>(null);
   const viewerRef = useRef<any>(null);
   const [showInfo, setShowInfo] = useState(false);
-  const [showDeleteMenu, setShowDeleteMenu] = useState(false);
   const [isPlaying, setIsPlaying] = useState(true);
 
   // ── Network & Settings Listeners ──────────────────────────────
@@ -188,7 +277,18 @@ export default function PhotosScreen() {
 
   const loadAssets = useCallback(async () => {
     try {
-      setIsLoading(true);
+      // 0. Fast load from Cache
+      try {
+        const cached = await AsyncStorage.getItem(CACHED_ASSETS_KEY);
+        if (cached) {
+          const parsedAssets = JSON.parse(cached);
+          setAllAssets(parsedAssets);
+          setSections(groupAssetsByDate(parsedAssets));
+        }
+      } catch (e) { console.warn('Cache load error', e); }
+
+      // Skip showing skeleton loader if we already have cached assets
+      if (allAssets.length === 0) setIsLoading(true);
       // 1. Fetch Local
       const media = await MediaLibrary.getAssetsAsync({
         first: 800,
@@ -238,6 +338,7 @@ export default function PhotosScreen() {
           isSynced: isSynced || !!matchCloud,
           isCloudOnly: false,
           cloudUri: matchCloud ? `${BACKEND_URL}${matchCloud.uri}?token=${await getToken()}` : undefined,
+          cloudId: matchCloud ? matchCloud.id : undefined,
         });
       }
       
@@ -247,6 +348,7 @@ export default function PhotosScreen() {
             id: c.id, 
             uri: `${BACKEND_URL}${c.uri}?token=${await getToken()}`,
             cloudUri: `${BACKEND_URL}${c.uri}?token=${await getToken()}`,
+            cloudId: c.id,
             filename: c.filename,
             mediaType: c.mediaType,
             creationTime: c.creationTime,
@@ -265,6 +367,9 @@ export default function PhotosScreen() {
       setAllAssets(unified);
       setSections(groupAssetsByDate(unified));
       
+      // Save to cache silently
+      AsyncStorage.setItem(CACHED_ASSETS_KEY, JSON.stringify(unified)).catch(() => {});
+      
       const toSync = unified.filter(a => !a.isSynced).length;
       setItemsToBackup(toSync);
       setIsLoading(false);
@@ -309,32 +414,51 @@ export default function PhotosScreen() {
   };
 
   // ── Delete ────────────────────────────────────────────────────
-  const deleteSelected = () => {
+  const performAdvancedDelete = async (items: UnifiedAsset[], target: 'device' | 'cloud' | 'both') => {
+    try {
+      const token = await getToken();
+      // 1. Delete from Device (Move to local bin)
+      if (target === 'device' || target === 'both') {
+        const trashed = await getTrashedAssets();
+        const newTrashed = [...trashed, ...items];
+        await AsyncStorage.setItem(TRASHED_ASSETS_KEY, JSON.stringify(newTrashed));
+      }
+      // 2. Delete from Cloud
+      if (target === 'cloud' || target === 'both') {
+        for (const item of items) {
+          if (item.cloudId) {
+            await deleteFromCloud(item.cloudId);
+          }
+        }
+      }
+      
+      setSelectedIds(new Set());
+      setViewerIndex(null);
+      await loadAssets();
+    } catch (e) {
+      Alert.alert('Error', 'Failed to delete items.');
+    }
+  };
+
+  const showDeleteOptions = (items: UnifiedAsset[]) => {
+    if (items.length === 0) return;
     Alert.alert(
-      `Move ${selectedIds.size} item${selectedIds.size > 1 ? 's' : ''} to Bin?`,
-      'Items will be moved to your local bin.',
+      `Delete ${items.length} item${items.length > 1 ? 's' : ''}?`,
+      'Choose how you want to delete:',
       [
         { text: 'Cancel', style: 'cancel' },
-        {
-          text: 'Move to Bin',
-          style: 'destructive',
-          onPress: async () => {
-            try {
-              const trashed = await getTrashedAssets();
-              const itemsToTrash = allAssets.filter(a => selectedIds.has(a.id));
-              const newTrashed = [...trashed, ...itemsToTrash];
-              await AsyncStorage.setItem(TRASHED_ASSETS_KEY, JSON.stringify(newTrashed));
-              setSelectedIds(new Set());
-              await loadAssets();
-            } catch (e) {
-              Alert.alert('Error', 'Could not move items to bin.');
-            }
-          },
-        },
+        { text: 'Delete from Device (Bin)', style: 'destructive', onPress: () => performAdvancedDelete(items, 'device') },
+        { text: 'Delete from Cloud', style: 'destructive', onPress: () => performAdvancedDelete(items, 'cloud') },
+        { text: 'Delete from Both', style: 'destructive', onPress: () => performAdvancedDelete(items, 'both') },
       ]
     );
   };
 
+  const deleteSelected = () => {
+    const items = allAssets.filter(a => selectedIds.has(a.id));
+    showDeleteOptions(items);
+  };
+
   // ── Share ─────────────────────────────────────────────────────
   const shareSelected = async () => {
     const ids = [...selectedIds];
@@ -422,70 +546,14 @@ export default function PhotosScreen() {
 
   // ── Render helpers ────────────────────────────────────────────
   const renderRow = useCallback(({ item: row }: { item: UnifiedAsset[] }) => (
-    <View style={styles.row}>
-      {row.map(asset => {
-        const selected = selectedIds.has(asset.id);
-        const isVideo = asset.mediaType === MediaLibrary.MediaType.video;
-        return (
-          <TouchableOpacity
-            key={asset.id}
-            style={[styles.tileContainer, selected && styles.tileSelected]}
-            onPress={() => openViewer(asset)}
-            onLongPress={() => toggleSelect(asset.id)}
-            activeOpacity={0.85}
-          >
-            <Image
-              source={{ uri: asset.uri }}
-              style={styles.image}
-              contentFit="cover"
-              cachePolicy="memory-disk"
-            />
-            {isVideo && (
-              <View style={styles.videoOverlay}>
-                <MaterialIcons name="play-circle-fill" size={22} color="rgba(255,255,255,0.9)" />
-                {asset.duration > 0 && (
-                  <Text style={styles.videoDuration}>
-                    {Math.floor(asset.duration / 60)}:{String(Math.floor(asset.duration % 60)).padStart(2, '0')}
-                  </Text>
-                )}
-              </View>
-            )}
-            
-            {/* Unsynced Cloud Indicator */}
-            {!asset.isSynced && !asset.isCloudOnly && (
-              <View style={styles.unsyncedOverlay}>
-                <MaterialIcons name="cloud-off" size={16} color="rgba(255,255,255,0.8)" />
-              </View>
-            )}
-            
-            {/* Cloud-Only Indicator */}
-            {asset.isCloudOnly && (
-              <View style={styles.cloudOnlyOverlay}>
-                <MaterialIcons name="cloud" size={16} color="rgba(255,255,255,0.8)" />
-              </View>
-            )}
-            {/* Selection check circle — always show in selection mode */}
-            {isSelecting && (
-              <View style={styles.selectionCircleOverlay}>
-                {selected
-                  ? <MaterialIcons name="check-circle" size={22} color="#1a73e8" />
-                  : <MaterialIcons name="radio-button-unchecked" size={22} color="rgba(255,255,255,0.8)" />
-                }
-              </View>
-            )}
-            {!isSelecting && selected && (
-              <View style={styles.selectedOverlay}>
-                <MaterialIcons name="check-circle" size={22} color="#1a73e8" />
-              </View>
-            )}
-          </TouchableOpacity>
-        );
-      })}
-      {Array.from({ length: NUM_COLUMNS - row.length }).map((_, i) => (
-        <View key={`empty-${i}`} style={styles.tileFiller} />
-      ))}
-    </View>
-  ), [selectedIds, isSelecting]);
+    <GalleryRow
+      row={row}
+      selectedIds={selectedIds}
+      isSelecting={isSelecting}
+      openViewer={openViewer}
+      toggleSelect={toggleSelect}
+    />
+  ), [selectedIds, isSelecting, openViewer, toggleSelect]);
 
   const renderSectionHeader = useCallback(({ section }: { section: SectionData }) => {
     const allDaySelected = isDayFullySelected(section);
@@ -631,41 +699,39 @@ export default function PhotosScreen() {
             </View>
           </TouchableWithoutFeedback>
 
-          <FlatList
-            ref={viewerRef}
-            data={allAssets}
-            horizontal
-            pagingEnabled
-            initialScrollIndex={viewerIndex ?? 0}
-            getItemLayout={(_, index) => ({ length: width, offset: width * index, index })}
-            keyExtractor={item => item.id}
-            showsHorizontalScrollIndicator={false}
-            onMomentumScrollEnd={(e) => {
-              const newIndex = Math.round(e.nativeEvent.contentOffset.x / width);
-              setViewerIndex(newIndex);
-              setIsPlaying(true);
-            }}
-            renderItem={({ item, index }) => (
-              <View style={{ width, height: '100%', justifyContent: 'center' }}>
-                {item.mediaType === 'video' ? (
-                  <Video
-                    source={{ uri: item.uri }}
-                    style={styles.viewerMedia}
-                    resizeMode={ResizeMode.CONTAIN}
-                    useNativeControls={true}
-                    shouldPlay={isPlaying && viewerIndex === index}
-                  />
-                ) : (
+          <View style={{ flex: 1, backgroundColor: '#000' }}>
+            <ImageViewer
+              imageUrls={allAssets.map(a => ({ url: a.uri }))}
+              index={viewerIndex ?? 0}
+              onChange={idx => { setViewerIndex(idx ?? null); setIsPlaying(true); }}
+              enableSwipeDown={true}
+              onSwipeDown={() => setViewerIndex(null)}
+              renderIndicator={() => <View />}
+              saveToLocalByLongPress={false}
+              renderImage={(props) => {
+                const asset = allAssets.find(a => a.uri === props.source.uri);
+                if (asset?.mediaType === 'video') {
+                  return (
+                    <Video
+                      source={{ uri: asset.uri }}
+                      style={{ width, height: '100%' }}
+                      resizeMode={ResizeMode.CONTAIN}
+                      useNativeControls={true}
+                      shouldPlay={isPlaying}
+                    />
+                  );
+                }
+                return (
                   <Image
-                    source={{ uri: item.uri }}
-                    style={styles.viewerMedia}
+                    source={{ uri: props.source.uri }}
+                    style={{ width, height: '100%' }}
                     contentFit="contain"
                     cachePolicy="memory-disk"
                   />
-                )}
-              </View>
-            )}
-          />
+                );
+              }}
+            />
+          </View>
 
           {/* Viewer action bar */}
           <View style={[styles.viewerActions, { paddingBottom: insets.bottom + 8 }]}>
@@ -696,7 +762,10 @@ export default function PhotosScreen() {
 
             <TouchableOpacity
               style={styles.viewerActionBtn}
-              onPress={() => setShowDeleteMenu(true)}
+              onPress={() => {
+                const asset = viewerIndex !== null ? allAssets[viewerIndex] : null;
+                if (asset) showDeleteOptions([asset]);
+              }}
             >
               <MaterialIcons name="delete-outline" size={26} color="#ff6b6b" />
               <Text style={[styles.viewerActionLabel, { color: '#ff6b6b' }]}>Delete</Text>
@@ -747,98 +816,7 @@ export default function PhotosScreen() {
         </Modal>
       )}
 
-      {/* Delete Action Sheet Modal */}
-      {showDeleteMenu && viewerIndex !== null && (
-        <Modal transparent animationType="slide" onRequestClose={() => setShowDeleteMenu(false)}>
-          <TouchableOpacity style={styles.infoModalBg} activeOpacity={1} onPress={() => setShowDeleteMenu(false)}>
-            <TouchableWithoutFeedback>
-              <View style={[styles.infoSheet, { paddingBottom: insets.bottom + 20 }]}>
-                <Text style={styles.infoTitle}>Delete Photo</Text>
-                
-                <TouchableOpacity style={styles.infoRow} onPress={async () => {
-                  setShowDeleteMenu(false);
-                  const asset = allAssets[viewerIndex];
-                  try {
-                    const trashed = await getTrashedAssets();
-                    await AsyncStorage.setItem(TRASHED_ASSETS_KEY, JSON.stringify([...trashed, asset]));
-                    setViewerIndex(null);
-                    await loadAssets();
-                  } catch { Alert.alert('Error', 'Could not move to bin.'); }
-                }}>
-                  <MaterialIcons name="delete-outline" size={24} color="#202124" />
-                  <View>
-                    <Text style={[styles.infoText, { fontWeight: '600' }]}>Move to Bin</Text>
-                    <Text style={{ fontSize: 13, color: '#5f6368' }}>Hide from timeline, keep on device and cloud.</Text>
-                  </View>
-                </TouchableOpacity>
-
-                {!allAssets[viewerIndex].isCloudOnly && (
-                  <TouchableOpacity style={styles.infoRow} onPress={async () => {
-                    setShowDeleteMenu(false);
-                    const asset = allAssets[viewerIndex];
-                    try {
-                      if (asset.originalId) {
-                        await MediaLibrary.deleteAssetsAsync([{ id: asset.originalId }] as any);
-                        setViewerIndex(null);
-                        await loadAssets();
-                      }
-                    } catch { Alert.alert('Error', 'Could not delete from device.'); }
-                  }}>
-                    <MaterialIcons name="smartphone" size={24} color="#d93025" />
-                    <View>
-                      <Text style={[styles.infoText, { fontWeight: '600', color: '#d93025' }]}>Delete from Device Only</Text>
-                      <Text style={{ fontSize: 13, color: '#5f6368' }}>Remove from phone. Keep in cloud.</Text>
-                    </View>
-                  </TouchableOpacity>
-                )}
 
-                {allAssets[viewerIndex].isSynced && (
-                  <TouchableOpacity style={styles.infoRow} onPress={async () => {
-                    setShowDeleteMenu(false);
-                    const asset = allAssets[viewerIndex];
-                    try {
-                      const success = await deleteFromCloud(asset.id);
-                      if (success) {
-                        setViewerIndex(null);
-                        await loadAssets();
-                      } else {
-                        Alert.alert('Error', 'Could not delete from cloud.');
-                      }
-                    } catch { Alert.alert('Error', 'Could not delete from cloud.'); }
-                  }}>
-                    <MaterialIcons name="cloud-off" size={24} color="#d93025" />
-                    <View>
-                      <Text style={[styles.infoText, { fontWeight: '600', color: '#d93025' }]}>Delete from Cloud Only</Text>
-                      <Text style={{ fontSize: 13, color: '#5f6368' }}>Remove from backup. Keep on phone.</Text>
-                    </View>
-                  </TouchableOpacity>
-                )}
-
-                <TouchableOpacity style={styles.infoRow} onPress={async () => {
-                  setShowDeleteMenu(false);
-                  const asset = allAssets[viewerIndex];
-                  try {
-                    if (!asset.isCloudOnly && asset.originalId) {
-                      await MediaLibrary.deleteAssetsAsync([{ id: asset.originalId }] as any);
-                    }
-                    if (asset.isSynced) {
-                      await deleteFromCloud(asset.id);
-                    }
-                    setViewerIndex(null);
-                    await loadAssets();
-                  } catch { Alert.alert('Error', 'Could not delete.'); }
-                }}>
-                  <MaterialIcons name="delete-forever" size={24} color="#d93025" />
-                  <View>
-                    <Text style={[styles.infoText, { fontWeight: '600', color: '#d93025' }]}>Delete from Both</Text>
-                    <Text style={{ fontSize: 13, color: '#5f6368' }}>Permanently obliterate from device and cloud.</Text>
-                  </View>
-                </TouchableOpacity>
-              </View>
-            </TouchableWithoutFeedback>
-          </TouchableOpacity>
-        </Modal>
-      )}
 
     </SafeAreaView>
   );

keystone-app/package-lock.json

@@ -29,6 +29,7 @@
         "react": "19.1.0",
         "react-dom": "19.1.0",
         "react-native": "0.81.5",
+        "react-native-image-zoom-viewer": "^3.0.1",
         "react-native-safe-area-context": "~5.6.0",
         "react-native-screens": "~4.16.0",
         "react-native-web": "^0.21.2"
@@ -7819,6 +7820,29 @@
         }
       }
     },
+    "node_modules/react-native-image-pan-zoom": {
+      "version": "2.1.12",
+      "resolved": "https://registry.npmjs.org/react-native-image-pan-zoom/-/react-native-image-pan-zoom-2.1.12.tgz",
+      "integrity": "sha512-BF66XeP6dzuANsPmmFsJshM2Jyh/Mo1t8FsGc1L9Q9/sVP8MJULDabB1hms+eAoqgtyhMr5BuXV3E1hJ5U5H6Q==",
+      "license": "ISC",
+      "peerDependencies": {
+        "react": "*",
+        "react-native": "*"
+      }
+    },
+    "node_modules/react-native-image-zoom-viewer": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/react-native-image-zoom-viewer/-/react-native-image-zoom-viewer-3.0.1.tgz",
+      "integrity": "sha512-la6s5DNSuq4GCRLsi5CZ29FPjgTpdCuGIRdO5T9rUrAtxrlpBPhhSnHrbmPVxsdtOUvxHacTh2Gfa9+RraMZQA==",
+      "license": "MIT",
+      "dependencies": {
+        "react-native-image-pan-zoom": "^2.1.12"
+      },
+      "peerDependencies": {
+        "react": "*",
+        "react-native": "*"
+      }
+    },
     "node_modules/react-native-is-edge-to-edge": {
       "version": "1.3.1",
       "license": "MIT",

keystone-app/package.json

@@ -24,6 +24,7 @@
     "react": "19.1.0",
     "react-dom": "19.1.0",
     "react-native": "0.81.5",
+    "react-native-image-zoom-viewer": "^3.0.1",
     "react-native-safe-area-context": "~5.6.0",
     "react-native-screens": "~4.16.0",
     "react-native-web": "^0.21.2"