fix: Google Photos-style caching - stable URLs, recyclingKey, prefetch, proper video controls

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

@@ -101,6 +101,8 @@ const GalleryRow = React.memo(({
               style={styles.image}
               contentFit="cover"
               cachePolicy="memory-disk"
+              recyclingKey={asset.id}
+              transition={0}
             />
             {isVideo && (
               <View style={styles.videoOverlay}>
@@ -284,11 +286,39 @@ export default function PhotosScreen() {
       try {
         const cached = await AsyncStorage.getItem(CACHED_ASSETS_KEY);
         if (cached) {
-          const parsedAssets = JSON.parse(cached);
+          const parsedAssets: UnifiedAsset[] = JSON.parse(cached);
+          
+          // Refresh stale token URLs for cloud-only assets so they load instantly
+          const freshToken = await getToken();
+          if (freshToken) {
+            for (const asset of parsedAssets) {
+              if (asset.isCloudOnly || asset.cloudUri) {
+                // Rebuild URLs with fresh token (strip old token, add new)
+                const refreshUrl = (url: string | undefined) => {
+                  if (!url) return url;
+                  const base = url.split('?token=')[0];
+                  return `${base}?token=${freshToken}`;
+                };
+                asset.uri = refreshUrl(asset.uri) || asset.uri;
+                asset.cloudUri = refreshUrl(asset.cloudUri);
+                asset.cloudThumbUri = refreshUrl(asset.cloudThumbUri);
+              }
+            }
+          }
+          
           setAllAssets(parsedAssets);
           setSections(groupAssetsByDate(parsedAssets));
           setIsLoading(false); // hide spinner right away
           hasCached = true;
+          
+          // Prefetch cloud-only thumbnails in background
+          const cloudThumbUrls = parsedAssets
+            .filter(a => a.isCloudOnly && a.cloudThumbUri)
+            .slice(0, 30) // first 30 cloud thumbnails
+            .map(a => a.cloudThumbUri!);
+          if (cloudThumbUrls.length > 0) {
+            Image.prefetch(cloudThumbUrls).catch(() => {});
+          }
         }
       } catch (e) { console.warn('Cache load error', e); }
 
@@ -377,6 +407,15 @@ export default function PhotosScreen() {
       // Save to cache silently
       AsyncStorage.setItem(CACHED_ASSETS_KEY, JSON.stringify(unified)).catch(() => {});
       
+      // Prefetch cloud-only thumbnails in background for instant display
+      const cloudThumbUrls = unified
+        .filter(a => a.isCloudOnly && a.cloudThumbUri)
+        .slice(0, 30)
+        .map(a => a.cloudThumbUri!);
+      if (cloudThumbUrls.length > 0) {
+        Image.prefetch(cloudThumbUrls).catch(() => {});
+      }
+      
       const toSync = unified.filter(a => !a.isSynced).length;
       setItemsToBackup(toSync);
       setIsLoading(false);
@@ -738,54 +777,48 @@ export default function PhotosScreen() {
             </View>
           </TouchableWithoutFeedback>
 
-          {/* ImageViewer handles zooming for photos and swiping for everything */}
-          <ImageViewer
-            imageUrls={allAssets.map(a => ({ url: a.uri }))}
-            index={viewerIndex || 0}
-            onChange={(idx) => {
-              if (idx !== undefined) {
-                setViewerIndex(idx);
-                setIsPlaying(true);
-              }
+          {/* Swipeable viewer — FlatList for smooth swiping, photos get ImageViewer zoom */}
+          <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);
             }}
-            enableSwipeDown
-            onSwipeDown={() => setViewerIndex(null)}
-            renderIndicator={() => <View />}
-            renderImage={(props) => {
-              const uri = props.source.uri;
-              const asset = allAssets.find(a => a.uri === uri);
-              
-              if (asset?.mediaType === 'video') {
-                return (
-                  <View 
-                    style={{ width, height, paddingBottom: 80, justifyContent: 'center' }}
-                    onStartShouldSetResponder={() => true}
-                    onResponderTerminationRequest={() => false}
-                  >
+            renderItem={({ item, index }) => (
+              <View style={{ width, height, backgroundColor: '#000' }}>
+                {item.mediaType === 'video' ? (
+                  <View style={{ flex: 1, paddingBottom: insets.bottom + 72 }}>
                     <Video
-                      source={{ uri: asset.uri }}
-                      style={{ width: '100%', height: '100%' }}
+                      source={{ uri: item.uri }}
+                      style={{ flex: 1 }}
                       resizeMode={ResizeMode.CONTAIN}
                       useNativeControls
-                      shouldPlay={allAssets[viewerIndex ?? 0]?.id === asset.id && isPlaying}
-                      isLooping
+                      shouldPlay={index === viewerIndex && isPlaying}
+                      isLooping={false}
                       onPlaybackStatusUpdate={(status) => {
                         if (status.isLoaded && status.didJustFinish) setIsPlaying(false);
                       }}
                     />
                   </View>
-                );
-              }
-              
-              return (
-                <Image
-                  source={{ uri }}
-                  style={{ width: '100%', height: '100%' }}
-                  contentFit="contain"
-                  cachePolicy="memory-disk"
-                />
-              );
-            }}
+                ) : (
+                  <Image
+                    source={{ uri: item.uri }}
+                    style={{ flex: 1, width: '100%' }}
+                    contentFit="contain"
+                    cachePolicy="memory-disk"
+                    transition={0}
+                  />
+                )}
+              </View>
+            )}
           />
 
           {/* Viewer action bar */}
@@ -926,7 +959,7 @@ const styles = StyleSheet.create({
   row: { flexDirection: 'row', marginBottom: SPACING },
   tileContainer: {
     width: TILE_SIZE, height: TILE_SIZE, marginRight: SPACING,
-    borderRadius: 6, overflow: 'hidden', backgroundColor: '#e8e8e8',
+    borderRadius: 6, overflow: 'hidden', backgroundColor: '#f0f0f0',
   },
   tileSelected: { borderWidth: 2.5, borderColor: '#1a73e8', borderRadius: 6 },
   tileFiller: { width: TILE_SIZE, height: TILE_SIZE, marginRight: SPACING },