Fix storage stats bar and increase MediaLibrary photo fetch limit for WhatsApp

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

@@ -12,9 +12,10 @@ import {
   ActivityIndicator,
   Modal,
   AppState,
-  FlatList,
   RefreshControl,
+  Animated,
 } from 'react-native';
+import { FlashList } from '@shopify/flash-list';
 import { SafeAreaView, useSafeAreaInsets } from 'react-native-safe-area-context';
 import * as MediaLibrary from 'expo-media-library';
 import { Image } from 'expo-image';
@@ -105,6 +106,7 @@ const GalleryRow = React.memo(({
               contentFit="cover"
               cachePolicy="memory-disk"
               transition={200}
+              allowDownscaling={true}
               backgroundColor="transparent"
             />
             {isVideo && (
@@ -178,7 +180,8 @@ export default function PhotosScreen() {
   const [permissionResponse, setPermissionResponse] = useState<any>(null);
 
   // Data
-  const [sections, setSections] = useState<SectionData[]>([]);
+  const [flattenedData, setFlattenedData] = useState<any[]>([]);
+  const [stickyIndices, setStickyIndices] = useState<number[]>([]);
   const [allAssets, setAllAssets] = useState<UnifiedAsset[]>([]);
   const [isLoading, setIsLoading] = useState(true);
   const [isRefreshing, setIsRefreshing] = useState(false);
@@ -267,7 +270,7 @@ export default function PhotosScreen() {
   }, []);
 
   // ── Load media ────────────────────────────────────────────────
-  const groupAssetsByDate = useCallback((assets: UnifiedAsset[]): SectionData[] => {
+  const flattenAssets = useCallback((assets: UnifiedAsset[]) => {
     const groups: Record<string, UnifiedAsset[]> = {};
     for (const asset of assets) {
       const date = new Date(asset.creationTime);
@@ -275,12 +278,21 @@ export default function PhotosScreen() {
       if (!groups[key]) groups[key] = [];
       groups[key].push(asset);
     }
-    return Object.keys(groups).map(key => {
-      const rows: UnifiedAsset[][] = [];
-      for (let i = 0; i < groups[key].length; i += NUM_COLUMNS)
-        rows.push(groups[key].slice(i, i + NUM_COLUMNS));
-      return { title: key, data: rows };
-    });
+    
+    const flat: any[] = [];
+    const indices: number[] = [];
+    let currentIndex = 0;
+    
+    for (const key of Object.keys(groups)) {
+      flat.push({ type: 'header', title: key });
+      indices.push(currentIndex);
+      currentIndex++;
+      for (let i = 0; i < groups[key].length; i += NUM_COLUMNS) {
+        flat.push({ type: 'row', data: groups[key].slice(i, i + NUM_COLUMNS) });
+        currentIndex++;
+      }
+    }
+    return { flat, indices };
   }, []);
 
   const getTrashedAssets = async (): Promise<UnifiedAsset[]> => {
@@ -301,7 +313,9 @@ export default function PhotosScreen() {
           
           // Paint cached assets immediately for instant UI
           setAllAssets(parsedAssets);
-          setSections(groupAssetsByDate(parsedAssets));
+          const { flat, indices } = flattenAssets(parsedAssets);
+          setFlattenedData(flat);
+          setStickyIndices(indices);
           setIsLoading(false); // hide spinner right away
           hasCached = true;
           
@@ -325,7 +339,9 @@ export default function PhotosScreen() {
                 return asset;
               });
               setAllAssets(refreshed);
-              setSections(groupAssetsByDate(refreshed));
+              const { flat, indices } = flattenAssets(refreshed);
+              setFlattenedData(flat);
+              setStickyIndices(indices);
               
               // Prefetch cloud-only thumbnails in background
               const cloudThumbUrls = refreshed
@@ -346,11 +362,22 @@ export default function PhotosScreen() {
       const token = await getToken();
       
       // 1. Fetch Local
-      const media = await MediaLibrary.getAssetsAsync({
-        first: 800,
-        sortBy: [MediaLibrary.SortBy.creationTime],
-        mediaType: [MediaLibrary.MediaType.photo, MediaLibrary.MediaType.video],
-      });
+      let localAssets: MediaLibrary.Asset[] = [];
+      let hasNextPage = true;
+      let after: string | undefined = undefined;
+      
+      while (hasNextPage) {
+        const mediaPage = await MediaLibrary.getAssetsAsync({
+          first: 1500,
+          after,
+          sortBy: [MediaLibrary.SortBy.creationTime],
+          mediaType: [MediaLibrary.MediaType.photo, MediaLibrary.MediaType.video],
+        });
+        localAssets.push(...mediaPage.assets);
+        hasNextPage = mediaPage.hasNextPage;
+        after = mediaPage.endCursor;
+        if (localAssets.length >= 10000) break; // Safe limit
+      }
       
       // 2. Fetch Cloud
       let cloudAssets: any[] = [];
@@ -373,7 +400,7 @@ export default function PhotosScreen() {
       const unified: UnifiedAsset[] = [];
       const localFilenames = new Set();
       
-      for (const a of media.assets) {
+      for (const a of localAssets) {
         if (trashedIds.includes(a.id)) continue;
         
         const isSynced = syncedIds.includes(a.id);
@@ -422,7 +449,9 @@ export default function PhotosScreen() {
       unified.sort((a, b) => b.creationTime - a.creationTime);
       
       setAllAssets(unified);
-      setSections(groupAssetsByDate(unified));
+      const { flat, indices } = flattenAssets(unified);
+      setFlattenedData(flat);
+      setStickyIndices(indices);
       
       // Save to cache silently
       AsyncStorage.setItem(CACHED_ASSETS_KEY, JSON.stringify(unified)).catch(() => {});
@@ -443,7 +472,8 @@ export default function PhotosScreen() {
       console.error('loadAssets error', e);
       setIsLoading(false);
     }
-  }, [groupAssetsByDate]);
+    }
+  }, [flattenAssets]);
 
 
 
@@ -607,8 +637,18 @@ export default function PhotosScreen() {
   };
 
   // Select / deselect all assets in a given section title
-  const toggleDaySelection = useCallback((section: SectionData) => {
-    const ids = section.data.flat().map(a => a.id);
+  const toggleDaySelection = useCallback((title: string) => {
+    // Find all assets in flattenedData under this header
+    const ids: string[] = [];
+    let collecting = false;
+    for (const item of flattenedData) {
+      if (item.type === 'header') {
+        if (collecting) break; // Reached next header
+        if (item.title === title) collecting = true;
+      } else if (item.type === 'row' && collecting) {
+        item.data.forEach((a: UnifiedAsset) => ids.push(a.id));
+      }
+    }
     setSelectedIds(prev => {
       const next = new Set(prev);
       const allSelected = ids.every(id => next.has(id));
@@ -621,10 +661,19 @@ export default function PhotosScreen() {
     });
   }, []);
 
-  const isDayFullySelected = useCallback((section: SectionData) => {
-    const ids = section.data.flat().map(a => a.id);
+  const isDayFullySelected = useCallback((title: string) => {
+    const ids: string[] = [];
+    let collecting = false;
+    for (const item of flattenedData) {
+      if (item.type === 'header') {
+        if (collecting) break;
+        if (item.title === title) collecting = true;
+      } else if (item.type === 'row' && collecting) {
+        item.data.forEach((a: UnifiedAsset) => ids.push(a.id));
+      }
+    }
     return ids.length > 0 && ids.every(id => selectedIds.has(id));
-  }, [selectedIds]);
+  }, [selectedIds, flattenedData]);
 
   const openViewer = (asset: UnifiedAsset) => {
     if (isSelecting) { toggleSelect(asset.id); return; }
@@ -667,14 +716,14 @@ export default function PhotosScreen() {
     />
   ), [selectedIds, isSelecting, openViewer, toggleSelect]);
 
-  const renderSectionHeader = useCallback(({ section }: { section: SectionData }) => {
-    const allDaySelected = isDayFullySelected(section);
+  const renderSectionHeader = useCallback((title: string) => {
+    const allDaySelected = isDayFullySelected(title);
     return (
       <View style={styles.sectionHeader}>
-        <Text style={styles.sectionTitle}>{section.title}</Text>
+        <Text style={styles.sectionTitle}>{title}</Text>
         {isSelecting && (
           <TouchableOpacity
-            onPress={() => toggleDaySelection(section)}
+            onPress={() => toggleDaySelection(title)}
             style={styles.dayCheckBtn}
             hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}
           >
@@ -688,6 +737,19 @@ export default function PhotosScreen() {
       </View>
     );
   }, [isSelecting, isDayFullySelected, toggleDaySelection]);
+  
+  const renderItem = useCallback(({ item }: { item: any }) => {
+    if (item.type === 'header') {
+      return renderSectionHeader(item.title);
+    }
+    return <GalleryRow
+      row={item.data}
+      selectedIds={selectedIds}
+      isSelecting={isSelecting}
+      openViewer={openViewer}
+      toggleSelect={toggleSelect}
+    />;
+  }, [renderSectionHeader, selectedIds, isSelecting, openViewer, toggleSelect]);
 
   const renderLoadingSkeleton = () => (
     <View style={{ flex: 1, padding: 24, justifyContent: 'center', alignItems: 'center' }}>
@@ -779,29 +841,28 @@ export default function PhotosScreen() {
 
       {/* ── Gallery ── */}
       {isLoading ? renderLoadingSkeleton() : (
-        <SectionList
-          sections={sections}
-          keyExtractor={(item, idx) => `row-${idx}-${item[0]?.id}`}
-          renderItem={renderRow}
-          renderSectionHeader={renderSectionHeader}
-          showsVerticalScrollIndicator={false}
-          contentContainerStyle={styles.listContent}
-          stickySectionHeadersEnabled={false}
-          onScroll={(e) => { listOffsetYRef.current = e.nativeEvent.contentOffset.y; }}
-          scrollEventThrottle={16}
-          initialNumToRender={10}
-          maxToRenderPerBatch={10}
-          windowSize={5}
-          removeClippedSubviews={true}
-          refreshControl={
-            <RefreshControl
-              refreshing={isRefreshing}
-              onRefresh={onRefresh}
-              tintColor="#1a73e8"
-              colors={['#1a73e8']}
-            />
-          }
-        />
+        <View style={{ flex: 1 }}>
+          <FlashList
+            data={flattenedData}
+            keyExtractor={(_, idx) => `item-${idx}`}
+            renderItem={renderItem}
+            getItemType={(item) => item.type}
+            stickyHeaderIndices={stickyIndices}
+            showsVerticalScrollIndicator={false}
+            contentContainerStyle={styles.listContent}
+            onScroll={(e) => { listOffsetYRef.current = e.nativeEvent.contentOffset.y; }}
+            scrollEventThrottle={16}
+            estimatedItemSize={120}
+            refreshControl={
+              <RefreshControl
+                refreshing={isRefreshing}
+                onRefresh={onRefresh}
+                tintColor="#1a73e8"
+                colors={['#1a73e8']}
+              />
+            }
+          />
+        </View>
       )}
 
       {/* ── Full-screen viewer modal ── */}

keystone-app/app/utils/syncManager.ts

@@ -98,11 +98,23 @@ export const runSyncCycle = async (callbacks?: SyncCallbacks) => {
       return false;
     }
 
-    media = await MediaLibrary.getAssetsAsync({
-      first: 800,
-      sortBy: [MediaLibrary.SortBy.creationTime],
-      mediaType: [MediaLibrary.MediaType.photo, MediaLibrary.MediaType.video],
-    });
+    let localAssets: MediaLibrary.Asset[] = [];
+    let hasNextPage = true;
+    let after: string | undefined = undefined;
+    
+    while (hasNextPage) {
+      const mediaPage = await MediaLibrary.getAssetsAsync({
+        first: 1500,
+        after,
+        sortBy: [MediaLibrary.SortBy.creationTime],
+        mediaType: [MediaLibrary.MediaType.photo, MediaLibrary.MediaType.video],
+      });
+      localAssets.push(...mediaPage.assets);
+      hasNextPage = mediaPage.hasNextPage;
+      after = mediaPage.endCursor;
+      if (localAssets.length >= 10000) break; // Safe limit
+    }
+    media = { assets: localAssets } as any;
   } catch (e) {
     callbacks?.onInterrupted?.('Media Library Error');
     return false;

keystone-app/package-lock.json

@@ -11,6 +11,7 @@
         "@expo/metro-runtime": "~6.1.2",
         "@expo/vector-icons": "^15.0.3",
         "@react-native-async-storage/async-storage": "2.2.0",
+        "@shopify/flash-list": "2.0.2",
         "date-fns": "^4.4.0",
         "expo": "^54.0.36",
         "expo-av": "~16.0.8",
@@ -3706,6 +3707,20 @@
         "nanoid": "^3.3.11"
       }
     },
+    "node_modules/@shopify/flash-list": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/@shopify/flash-list/-/flash-list-2.0.2.tgz",
+      "integrity": "sha512-zhlrhA9eiuEzja4wxVvotgXHtqd3qsYbXkQ3rsBfOgbFA9BVeErpDE/yEwtlIviRGEqpuFj/oU5owD6ByaNX+w==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "2.8.1"
+      },
+      "peerDependencies": {
+        "@babel/runtime": "*",
+        "react": "*",
+        "react-native": "*"
+      }
+    },
     "node_modules/@sinclair/typebox": {
       "version": "0.27.12",
       "license": "MIT"

keystone-app/package.json

@@ -6,6 +6,7 @@
     "@expo/metro-runtime": "~6.1.2",
     "@expo/vector-icons": "^15.0.3",
     "@react-native-async-storage/async-storage": "2.2.0",
+    "@shopify/flash-list": "2.0.2",
     "date-fns": "^4.4.0",
     "expo": "^54.0.36",
     "expo-av": "~16.0.8",

keystone-backend/main.py

@@ -117,10 +117,28 @@ async def health_check():
         "storage_path": BASE_STORAGE_DIR
     }
 
+def get_dir_size(path):
+    total = 0
+    try:
+        with os.scandir(path) as it:
+            for entry in it:
+                if entry.is_file():
+                    total += entry.stat().st_size
+                elif entry.is_dir():
+                    total += get_dir_size(entry.path)
+    except FileNotFoundError:
+        pass
+    return total
+
 @app.get("/storage/stats")
 async def storage_stats(username: str = Depends(verify_jwt_token)):
-    # Get overall bucket storage stats
-    total, used, free = shutil.disk_usage(BASE_STORAGE_DIR)
+    user_dir = get_user_dir(username)
+    used = get_dir_size(user_dir)
+    
+    # Define a default quota of 15 GB
+    total = 15 * 1024 * 1024 * 1024
+    free = max(0, total - used)
+    
     return {
         "total": total,
         "used": used,