qdkmkkk

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

@@ -13,7 +13,6 @@ import {
   Modal,
   AppState,
   FlatList,
-  PanResponder,
 } from 'react-native';
 import { SafeAreaView, useSafeAreaInsets } from 'react-native-safe-area-context';
 import * as MediaLibrary from 'expo-media-library';
@@ -84,9 +83,6 @@ export default function PhotosScreen() {
   const isSelecting = selectedIds.size > 0;
 
   // Drag-to-select
-  const isDraggingRef = useRef(false);
-  const dragModeRef = useRef<'add' | 'remove'>('add'); // are we adding or removing?
-  const tileLayoutsRef = useRef<Map<string, { x: number; y: number; width: number; height: number }>>(new Map());
   const listOffsetYRef = useRef(0);
 
   // Sync & Network States
@@ -394,26 +390,6 @@ export default function PhotosScreen() {
     return ids.length > 0 && ids.every(id => selectedIds.has(id));
   }, [selectedIds]);
 
-  // Register tile layout (called in each tile's onLayout)
-  const registerTileLayout = useCallback((id: string, x: number, y: number, w: number, h: number) => {
-    tileLayoutsRef.current.set(id, { x, y, width: w, height: h });
-  }, []);
-
-  // Hit-test a point against registered tiles, return matching id
-  const getTileAtPoint = useCallback((px: number, py: number): string | null => {
-    const scrollY = listOffsetYRef.current;
-    const adjustedY = py + scrollY;
-    for (const [id, layout] of tileLayoutsRef.current.entries()) {
-      if (
-        px >= layout.x && px <= layout.x + layout.width &&
-        adjustedY >= layout.y && adjustedY <= layout.y + layout.height
-      ) {
-        return id;
-      }
-    }
-    return null;
-  }, []);
-
   const openViewer = (asset: UnifiedAsset) => {
     if (isSelecting) { toggleSelect(asset.id); return; }
     const idx = allAssets.findIndex(a => a.id === asset.id);
@@ -445,120 +421,71 @@ export default function PhotosScreen() {
   };
 
   // ── Render helpers ────────────────────────────────────────────
-  const renderRow = useCallback(({ item: row }: { item: UnifiedAsset[] }) => {
-    // PanResponder for drag-to-select on this row
-    const panResponder = PanResponder.create({
-      onMoveShouldSetPanResponder: (_, gs) => Math.abs(gs.dx) > 4 || Math.abs(gs.dy) > 4,
-      onPanResponderGrant: (e) => {
-        isDraggingRef.current = true;
-        const id = getTileAtPoint(e.nativeEvent.pageX, e.nativeEvent.pageY);
-        if (id) {
-          dragModeRef.current = selectedIds.has(id) ? 'remove' : 'add';
-          setSelectedIds(prev => {
-            const next = new Set(prev);
-            dragModeRef.current === 'add' ? next.add(id) : next.delete(id);
-            return next;
-          });
-        }
-      },
-      onPanResponderMove: (e) => {
-        if (!isDraggingRef.current) return;
-        const id = getTileAtPoint(e.nativeEvent.pageX, e.nativeEvent.pageY);
-        if (id) {
-          setSelectedIds(prev => {
-            const next = new Set(prev);
-            if (dragModeRef.current === 'add' && !next.has(id)) { next.add(id); return next; }
-            if (dragModeRef.current === 'remove' && next.has(id)) { next.delete(id); return next; }
-            return prev; // no change, avoid re-render
-          });
-        }
-      },
-      onPanResponderRelease: () => { isDraggingRef.current = false; },
-      onPanResponderTerminate: () => { isDraggingRef.current = false; },
-    });
-
-    return (
-      <View style={styles.row} {...panResponder.panHandlers}>
-        {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={() => {
-                // On first long-press, enter selection mode
-                if (!isSelecting) dragModeRef.current = 'add';
-                toggleSelect(asset.id);
-              }}
-              onLayout={(e) => {
-                const { x, y, width, height } = e.nativeEvent.layout;
-                // onLayout gives position relative to the tile's parent View,
-                // so we need to measure against the page
-              }}
-              ref={(ref) => {
-                if (ref) {
-                  (ref as any).measure((fx: number, fy: number, w: number, h: number, px: number, py: number) => {
-                    registerTileLayout(asset.id, px, py, w, h);
-                  });
+  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)" />
                 }
-              }}
-              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, getTileAtPoint, registerTileLayout]);
+              </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]);
 
   const renderSectionHeader = useCallback(({ section }: { section: SectionData }) => {
     const allDaySelected = isDayFullySelected(section);
@@ -642,9 +569,11 @@ export default function PhotosScreen() {
         </View>
       ) : (
         <View style={styles.header}>
-          <Text style={styles.headerLogo}>KeyStone</Text>
+          <View style={{ flex: 1, marginRight: 8 }}>
+            <Text style={styles.headerLogo}>KeyStone</Text>
+            {statusUI.text && <Text style={[styles.syncCountText, { color: statusUI.color }]} numberOfLines={1}>{statusUI.text}</Text>}
+          </View>
           <View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
-            <Text style={[styles.syncCountText, { color: statusUI.color }]}>{statusUI.text}</Text>
             <TouchableOpacity 
               style={styles.syncIconContainer} 
               onPress={syncAssets} 
@@ -719,23 +648,13 @@ export default function PhotosScreen() {
             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={false}
-                      shouldPlay={isPlaying && viewerIndex === index}
-                    />
-                    <TouchableOpacity
-                      style={styles.playPauseOverlay}
-                      onPress={() => setIsPlaying(!isPlaying)}
-                    >
-                      {!isPlaying && (
-                        <MaterialIcons name="play-circle-fill" size={72} color="rgba(255,255,255,0.8)" />
-                      )}
-                    </TouchableOpacity>
-                  </>
+                  <Video
+                    source={{ uri: item.uri }}
+                    style={styles.viewerMedia}
+                    resizeMode={ResizeMode.CONTAIN}
+                    useNativeControls={true}
+                    shouldPlay={isPlaying && viewerIndex === index}
+                  />
                 ) : (
                   <Image
                     source={{ uri: item.uri }}

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

@@ -109,7 +109,7 @@ export default function SettingsScreen() {
               <View style={styles.iconBox}>
                 <MaterialIcons name="cloud-sync" size={24} color="#1a73e8" />
               </View>
-              <View>
+              <View style={{ flex: 1 }}>
                 <Text style={styles.settingLabel}>Background Backup</Text>
                 <Text style={styles.settingDesc}>Upload photos quietly while the app is closed.</Text>
               </View>
@@ -129,7 +129,7 @@ export default function SettingsScreen() {
               <View style={styles.iconBox}>
                 <MaterialIcons name="network-cell" size={24} color="#1a73e8" />
               </View>
-              <View>
+              <View style={{ flex: 1 }}>
                 <Text style={styles.settingLabel}>Sync on mobile data</Text>
                 <Text style={styles.settingDesc}>Use cellular data to backup photos & videos.</Text>
               </View>
@@ -151,7 +151,7 @@ export default function SettingsScreen() {
               <View style={[styles.iconBox, { backgroundColor: '#fce8e6' }]}>
                 <MaterialIcons name="logout" size={24} color="#d93025" />
               </View>
-              <View>
+              <View style={{ flex: 1 }}>
                 <Text style={[styles.settingLabel, { color: '#d93025' }]}>Log Out</Text>
                 <Text style={styles.settingDesc}>Sign out of this device.</Text>
               </View>