qdkm

keystone-app/app.json

@@ -7,7 +7,7 @@
     "splash": {
       "image": "./assets/splash-icon.png",
       "resizeMode": "contain",
-      "backgroundColor": "#1a1f2e"
+      "backgroundColor": "#f0ebe3"
     },
     "plugins": [
       [
@@ -34,8 +34,9 @@
       "package": "com.dedeep.keystoneapp",
       "adaptiveIcon": {
         "foregroundImage": "./assets/android-icon-foreground.png",
-        "backgroundImage": "./assets/android-icon-background.png"
+        "backgroundColor": "#f0ebe3"
       }
     }
   }
 }
+

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

@@ -12,6 +12,7 @@ import {
   ActivityIndicator,
   Modal,
   AppState,
+  FlatList,
 } from 'react-native';
 import { SafeAreaView, useSafeAreaInsets } from 'react-native-safe-area-context';
 import * as MediaLibrary from 'expo-media-library';
@@ -26,17 +27,33 @@ import { format, isToday, isYesterday } from 'date-fns';
 import AsyncStorage from '@react-native-async-storage/async-storage';
 
 import { SYNC_ON_CELLULAR_KEY } from './settings';
-import { runSyncCycle } from '../utils/syncManager';
+import { runSyncCycle, BACKEND_URL, getToken, getSyncedList, deleteFromCloud } from '../utils/syncManager';
+import { useAuth } from '../../components/AuthContext';
 
-const SYNCED_ASSETS_KEY = '@synced_assets_v2';
+export const TRASHED_ASSETS_KEY = '@trashed_assets';
 
 const { width, height } = Dimensions.get('window');
 const NUM_COLUMNS = 4;
 const SPACING = 2;
 const TILE_SIZE = (width - SPACING * (NUM_COLUMNS + 1)) / NUM_COLUMNS;
 
-type Asset = MediaLibrary.Asset;
-type SectionData = { title: string; data: Asset[][] };
+export type UnifiedAsset = {
+  id: string; // unique key (local ID or cloud path)
+  originalId?: string; // local ID if it exists
+  uri: string; // local uri or remote URL
+  cloudUri?: string; // remote URL if backed up
+  filename: string;
+  mediaType: 'photo' | 'video';
+  creationTime: number;
+  duration: number;
+  width: number;
+  height: number;
+  isSynced: boolean;
+  isCloudOnly: boolean;
+  size?: number;
+};
+
+type SectionData = { title: string; data: UnifiedAsset[][] };
 
 // ─── Sync progress bar ───────────────────────────────────────────
 function SyncProgressBar({ progress, total }: { progress: number; total: number }) {
@@ -51,13 +68,14 @@ function SyncProgressBar({ progress, total }: { progress: number; total: number
 // ─── Main component ──────────────────────────────────────────────
 export default function PhotosScreen() {
   const insets = useSafeAreaInsets();
+  const { username } = useAuth();
 
   // Permissions
   const [permissionResponse, setPermissionResponse] = useState<any>(null);
 
   // Data
   const [sections, setSections] = useState<SectionData[]>([]);
-  const [allAssets, setAllAssets] = useState<Asset[]>([]);
+  const [allAssets, setAllAssets] = useState<UnifiedAsset[]>([]);
   const [isLoading, setIsLoading] = useState(true);
 
   // Selection
@@ -74,7 +92,11 @@ export default function PhotosScreen() {
   const [itemsToBackup, setItemsToBackup] = useState(0);
 
   // Viewer
-  const [viewerAsset, setViewerAsset] = useState<Asset | null>(null);
+  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 ──────────────────────────────
   useEffect(() => {
@@ -138,8 +160,8 @@ export default function PhotosScreen() {
   }, []);
 
   // ── Load media ────────────────────────────────────────────────
-  const groupAssetsByDate = useCallback((assets: Asset[]): SectionData[] => {
-    const groups: Record<string, Asset[]> = {};
+  const groupAssetsByDate = useCallback((assets: UnifiedAsset[]): SectionData[] => {
+    const groups: Record<string, UnifiedAsset[]> = {};
     for (const asset of assets) {
       const date = new Date(asset.creationTime);
       const key = isToday(date) ? 'Today' : isYesterday(date) ? 'Yesterday' : format(date, 'EEE, MMM d');
@@ -147,40 +169,108 @@ export default function PhotosScreen() {
       groups[key].push(asset);
     }
     return Object.keys(groups).map(key => {
-      const rows: Asset[][] = [];
+      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 getTrashedAssets = async (): Promise<UnifiedAsset[]> => {
+    try {
+      const v = await AsyncStorage.getItem(TRASHED_ASSETS_KEY);
+      return v ? JSON.parse(v) : [];
+    } catch { return []; }
+  };
+
   const loadAssets = useCallback(async () => {
     try {
+      setIsLoading(true);
+      // 1. Fetch Local
       const media = await MediaLibrary.getAssetsAsync({
         first: 800,
         sortBy: [MediaLibrary.SortBy.creationTime],
         mediaType: [MediaLibrary.MediaType.photo, MediaLibrary.MediaType.video],
       });
-      setAllAssets(media.assets);
-      setSections(groupAssetsByDate(media.assets));
       
-      // Calculate pending backups
-      const synced = await getSyncedList();
-      const toSync = media.assets.filter(a => !synced.includes(a.id));
-      setItemsToBackup(toSync.length);
+      // 2. Fetch Cloud
+      let cloudAssets: any[] = [];
+      try {
+        const token = await getToken();
+        if (token) {
+          const res = await fetch(`${BACKEND_URL}/photos?token=${token}`);
+          const data = await res.json();
+          cloudAssets = data.assets || [];
+        }
+      } catch (e) {
+        console.warn('Could not fetch cloud timeline', e);
+      }
+      
+      // 3. Fetch Synced & Trashed
+      const syncedIds = await getSyncedList();
+      const trashedAssets = await getTrashedAssets();
+      const trashedIds = trashedAssets.map(t => t.id);
+      
+      // 4. Merge
+      const unified: UnifiedAsset[] = [];
+      const localFilenames = new Set();
+      
+      for (const a of media.assets) {
+        if (trashedIds.includes(a.id)) continue;
+        
+        const isSynced = syncedIds.includes(a.id);
+        const matchCloud = cloudAssets.find(c => c.filename === a.filename);
+        localFilenames.add(a.filename);
+        
+        unified.push({
+          id: a.id,
+          originalId: a.id,
+          uri: a.uri,
+          filename: a.filename,
+          mediaType: a.mediaType as any,
+          creationTime: a.creationTime,
+          duration: a.duration || 0,
+          width: a.width,
+          height: a.height,
+          isSynced: isSynced || !!matchCloud,
+          isCloudOnly: false,
+          cloudUri: matchCloud ? `${BACKEND_URL}${matchCloud.uri}?token=${await getToken()}` : undefined,
+        });
+      }
+      
+      for (const c of cloudAssets) {
+        if (!localFilenames.has(c.filename) && !trashedIds.includes(c.id)) {
+          unified.push({
+            id: c.id, 
+            uri: `${BACKEND_URL}${c.uri}?token=${await getToken()}`,
+            cloudUri: `${BACKEND_URL}${c.uri}?token=${await getToken()}`,
+            filename: c.filename,
+            mediaType: c.mediaType,
+            creationTime: c.creationTime,
+            duration: 0,
+            width: 1920, 
+            height: 1080,
+            size: c.size,
+            isSynced: true,
+            isCloudOnly: true,
+          });
+        }
+      }
+      
+      unified.sort((a, b) => b.creationTime - a.creationTime);
+      
+      setAllAssets(unified);
+      setSections(groupAssetsByDate(unified));
+      
+      const toSync = unified.filter(a => !a.isSynced).length;
+      setItemsToBackup(toSync);
+      setIsLoading(false);
     } catch (e) {
       console.error('loadAssets error', e);
+      setIsLoading(false);
     }
   }, [groupAssetsByDate]);
 
-  // ── Sync ──────────────────────────────────────────────────────
-  const getSyncedList = async (): Promise<string[]> => {
-    try {
-      const v = await AsyncStorage.getItem(SYNCED_ASSETS_KEY);
-      return v ? JSON.parse(v) : [];
-    } catch { return []; }
-  };
-
   const syncAssets = async () => {
     if (isSyncing || itemsToBackup === 0) return;
     
@@ -218,20 +308,23 @@ export default function PhotosScreen() {
   // ── Delete ────────────────────────────────────────────────────
   const deleteSelected = () => {
     Alert.alert(
-      `Delete ${selectedIds.size} item${selectedIds.size > 1 ? 's' : ''}?`,
-      'This will permanently delete them from your device.',
+      `Move ${selectedIds.size} item${selectedIds.size > 1 ? 's' : ''} to Bin?`,
+      'Items will be moved to your local bin.',
       [
         { text: 'Cancel', style: 'cancel' },
         {
-          text: 'Delete',
+          text: 'Move to Bin',
           style: 'destructive',
           onPress: async () => {
             try {
-              await MediaLibrary.deleteAssetsAsync([...selectedIds]);
+              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 delete items. Make sure permissions are granted.');
+              Alert.alert('Error', 'Could not move items to bin.');
             }
           },
         },
@@ -246,10 +339,12 @@ export default function PhotosScreen() {
     const infos = await Promise.all(
       ids.map(id => {
         const asset = allAssets.find(a => a.id === id);
-        return asset ? MediaLibrary.getAssetInfoAsync(asset) : null;
+        // If it's cloud only, we'd need to download it first. For now, share uri directly (might fail on some apps if not local)
+        if (asset?.isCloudOnly) return { localUri: asset.uri };
+        return asset && asset.originalId ? MediaLibrary.getAssetInfoAsync({ id: asset.originalId } as any) : null;
       })
     );
-    const uris = infos.map(i => i?.localUri || i?.uri).filter(Boolean) as string[];
+    const uris = infos.map(i => i?.localUri || (i as any)?.uri).filter(Boolean) as string[];
     if (!uris.length) return;
     try {
       if (uris.length === 1) {
@@ -272,9 +367,11 @@ export default function PhotosScreen() {
     });
   };
 
-  const openViewer = (asset: Asset) => {
+  const openViewer = (asset: UnifiedAsset) => {
     if (isSelecting) { toggleSelect(asset.id); return; }
-    setViewerAsset(asset);
+    const idx = allAssets.findIndex(a => a.id === asset.id);
+    setViewerIndex(idx >= 0 ? idx : null);
+    setIsPlaying(true);
   };
 
   // ── UI Status Helpers ─────────────────────────────────────────
@@ -301,7 +398,7 @@ export default function PhotosScreen() {
   };
 
   // ── Render helpers ────────────────────────────────────────────
-  const renderRow = useCallback(({ item: row }: { item: Asset[] }) => (
+  const renderRow = useCallback(({ item: row }: { item: UnifiedAsset[] }) => (
     <View style={styles.row}>
       {row.map(asset => {
         const selected = selectedIds.has(asset.id);
@@ -323,9 +420,25 @@ export default function PhotosScreen() {
             {isVideo && (
               <View style={styles.videoOverlay}>
                 <MaterialIcons name="play-circle-fill" size={22} color="rgba(255,255,255,0.9)" />
-                <Text style={styles.videoDuration}>
-                  {Math.floor(asset.duration / 60)}:{String(Math.floor(asset.duration % 60)).padStart(2, '0')}
-                </Text>
+                {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>
             )}
             {selected && (
@@ -409,7 +522,7 @@ export default function PhotosScreen() {
       ) : (
         <View style={styles.header}>
           <Text style={styles.headerLogo}>KeyStone</Text>
-          <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
+          <View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
             <Text style={[styles.syncCountText, { color: statusUI.color }]}>{statusUI.text}</Text>
             <TouchableOpacity 
               style={styles.syncIconContainer} 
@@ -422,6 +535,11 @@ export default function PhotosScreen() {
                 <MaterialIcons name={statusUI.icon as any} size={24} color={statusUI.color} />
               )}
             </TouchableOpacity>
+            {username && (
+              <View style={styles.avatarCircle}>
+                <Text style={styles.avatarText}>{username.charAt(0).toUpperCase()}</Text>
+              </View>
+            )}
           </View>
         </View>
       )}
@@ -448,69 +566,95 @@ export default function PhotosScreen() {
 
       {/* ── Full-screen viewer modal ── */}
       <Modal
-        visible={!!viewerAsset}
+        visible={viewerIndex !== null}
         transparent={false}
         animationType="fade"
         statusBarTranslucent
-        onRequestClose={() => setViewerAsset(null)}
+        onRequestClose={() => setViewerIndex(null)}
       >
         <View style={styles.viewer}>
-          <TouchableWithoutFeedback onPress={() => setViewerAsset(null)}>
+          <TouchableWithoutFeedback onPress={() => setViewerIndex(null)}>
             <View style={styles.viewerClose}>
               <MaterialIcons name="arrow-back" size={28} color="#fff" />
             </View>
           </TouchableWithoutFeedback>
 
-          {viewerAsset?.mediaType === MediaLibrary.MediaType.video ? (
-            <Video
-              source={{ uri: viewerAsset.uri }}
-              style={styles.viewerMedia}
-              resizeMode={ResizeMode.CONTAIN}
-              useNativeControls
-              shouldPlay
-            />
-          ) : (
-            <Image
-              source={{ uri: viewerAsset?.uri }}
-              style={styles.viewerMedia}
-              contentFit="contain"
-              cachePolicy="memory-disk"
-            />
-          )}
+          <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={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>
+                  </>
+                ) : (
+                  <Image
+                    source={{ uri: item.uri }}
+                    style={styles.viewerMedia}
+                    contentFit="contain"
+                    cachePolicy="memory-disk"
+                  />
+                )}
+              </View>
+            )}
+          />
 
           {/* Viewer action bar */}
           <View style={[styles.viewerActions, { paddingBottom: insets.bottom + 8 }]}>
             <TouchableOpacity
               style={styles.viewerActionBtn}
               onPress={async () => {
-                if (!viewerAsset) return;
-                const info = await MediaLibrary.getAssetInfoAsync(viewerAsset);
-                const uri = info.localUri || viewerAsset.uri;
-                await Sharing.shareAsync(uri);
+                const asset = viewerIndex !== null ? allAssets[viewerIndex] : null;
+                if (!asset) return;
+                let uriToShare = asset.uri;
+                if (!asset.isCloudOnly && asset.originalId) {
+                  const info = await MediaLibrary.getAssetInfoAsync({ id: asset.originalId } as any);
+                  uriToShare = info.localUri || asset.uri;
+                }
+                await Sharing.shareAsync(uriToShare);
               }}
             >
               <MaterialIcons name="share" size={26} color="#fff" />
               <Text style={styles.viewerActionLabel}>Share</Text>
             </TouchableOpacity>
+
             <TouchableOpacity
               style={styles.viewerActionBtn}
-              onPress={() => {
-                if (!viewerAsset) return;
-                Alert.alert('Delete?', 'This will permanently delete the item from your device.', [
-                  { text: 'Cancel', style: 'cancel' },
-                  {
-                    text: 'Delete', style: 'destructive', onPress: async () => {
-                      try {
-                        await MediaLibrary.deleteAssetsAsync([viewerAsset.id]);
-                        setViewerAsset(null);
-                        await loadAssets();
-                      } catch {
-                        Alert.alert('Error', 'Could not delete. Check permissions.');
-                      }
-                    },
-                  },
-                ]);
-              }}
+              onPress={() => setShowInfo(true)}
+            >
+              <MaterialIcons name="info-outline" size={26} color="#fff" />
+              <Text style={styles.viewerActionLabel}>Info</Text>
+            </TouchableOpacity>
+
+            <TouchableOpacity
+              style={styles.viewerActionBtn}
+              onPress={() => setShowDeleteMenu(true)}
             >
               <MaterialIcons name="delete-outline" size={26} color="#ff6b6b" />
               <Text style={[styles.viewerActionLabel, { color: '#ff6b6b' }]}>Delete</Text>
@@ -518,6 +662,142 @@ export default function PhotosScreen() {
           </View>
         </View>
       </Modal>
+
+      {/* Info Modal */}
+      {showInfo && viewerIndex !== null && (
+        <Modal transparent animationType="slide" onRequestClose={() => setShowInfo(false)}>
+          <TouchableOpacity style={styles.infoModalBg} activeOpacity={1} onPress={() => setShowInfo(false)}>
+            <TouchableWithoutFeedback>
+              <View style={[styles.infoSheet, { paddingBottom: insets.bottom + 20 }]}>
+                <Text style={styles.infoTitle}>Details</Text>
+                <View style={styles.infoRow}>
+                  <MaterialIcons name="insert-drive-file" size={20} color="#5f6368" />
+                  <Text style={styles.infoText}>{allAssets[viewerIndex].filename}</Text>
+                </View>
+                <View style={styles.infoRow}>
+                  <MaterialIcons name="event" size={20} color="#5f6368" />
+                  <Text style={styles.infoText}>
+                    {format(new Date(allAssets[viewerIndex].creationTime), 'PPpp')}
+                  </Text>
+                </View>
+                <View style={styles.infoRow}>
+                  <MaterialIcons name="aspect-ratio" size={20} color="#5f6368" />
+                  <Text style={styles.infoText}>
+                    {allAssets[viewerIndex].width} x {allAssets[viewerIndex].height}
+                  </Text>
+                </View>
+                {allAssets[viewerIndex].isCloudOnly ? (
+                  <View style={styles.infoRow}>
+                    <MaterialIcons name="cloud" size={20} color="#1a73e8" />
+                    <Text style={[styles.infoText, { color: '#1a73e8' }]}>Cloud Only (Not on device)</Text>
+                  </View>
+                ) : (
+                  <View style={styles.infoRow}>
+                    <MaterialIcons name={allAssets[viewerIndex].isSynced ? "cloud-done" : "cloud-off"} size={20} color={allAssets[viewerIndex].isSynced ? "#34a853" : "#d93025"} />
+                    <Text style={[styles.infoText, { color: allAssets[viewerIndex].isSynced ? "#34a853" : "#d93025" }]}>
+                      {allAssets[viewerIndex].isSynced ? 'Backed up securely' : 'Not backed up yet'}
+                    </Text>
+                  </View>
+                )}
+              </View>
+            </TouchableWithoutFeedback>
+          </TouchableOpacity>
+        </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>
   );
 }
@@ -538,6 +818,13 @@ const styles = StyleSheet.create({
   },
   headerLogo: { fontSize: 22, fontWeight: '700', color: '#202124', letterSpacing: -0.5 },
   selectionCount: { fontSize: 18, fontWeight: '600', color: '#202124' },
+  avatarCircle: {
+    width: 34, height: 34, borderRadius: 17,
+    backgroundColor: '#1a73e8',
+    justifyContent: 'center', alignItems: 'center',
+    marginLeft: 2,
+  },
+  avatarText: { color: '#fff', fontSize: 15, fontWeight: '700', letterSpacing: 0.5 },
   syncCountText: { fontSize: 12, fontWeight: '500' },
   syncIconContainer: { padding: 8, borderRadius: 24, backgroundColor: '#f1f3f4', marginLeft: 4 },
   iconBtn: { padding: 8, borderRadius: 20, backgroundColor: '#f1f3f4', marginLeft: 4 },
@@ -563,6 +850,8 @@ const styles = StyleSheet.create({
     flexDirection: 'row', alignItems: 'center', gap: 3,
   },
   videoDuration: { color: '#fff', fontSize: 11, fontWeight: '600', textShadowColor: 'rgba(0,0,0,0.6)', textShadowRadius: 4, textShadowOffset: { width: 0, height: 1 } },
+  unsyncedOverlay: { position: 'absolute', top: 4, right: 4, backgroundColor: 'rgba(0,0,0,0.4)', borderRadius: 12, padding: 3 },
+  cloudOnlyOverlay: { position: 'absolute', top: 4, right: 4, backgroundColor: 'rgba(26,115,232,0.8)', borderRadius: 12, padding: 3 },
   selectedOverlay: {
     ...StyleSheet.absoluteFillObject, backgroundColor: 'rgba(26,115,232,0.15)',
     justifyContent: 'flex-start', alignItems: 'flex-end', padding: 4,
@@ -571,6 +860,7 @@ const styles = StyleSheet.create({
   viewer: { flex: 1, backgroundColor: '#000' },
   viewerClose: { position: 'absolute', top: 48, left: 16, zIndex: 10, padding: 8, backgroundColor: 'rgba(0,0,0,0.4)', borderRadius: 20 },
   viewerMedia: { flex: 1, width: '100%', height: '100%' },
+  playPauseOverlay: { ...StyleSheet.absoluteFillObject, justifyContent: 'center', alignItems: 'center' },
   viewerActions: {
     position: 'absolute', bottom: 0, left: 0, right: 0,
     flexDirection: 'row', justifyContent: 'space-around',
@@ -578,4 +868,10 @@ const styles = StyleSheet.create({
   },
   viewerActionBtn: { alignItems: 'center', gap: 4, paddingHorizontal: 24 },
   viewerActionLabel: { color: '#fff', fontSize: 13, fontWeight: '500' },
+  
+  infoModalBg: { flex: 1, justifyContent: 'flex-end', backgroundColor: 'rgba(0,0,0,0.5)' },
+  infoSheet: { backgroundColor: '#fff', borderTopLeftRadius: 16, borderTopRightRadius: 16, padding: 24 },
+  infoTitle: { fontSize: 20, fontWeight: '700', color: '#202124', marginBottom: 16 },
+  infoRow: { flexDirection: 'row', alignItems: 'center', marginBottom: 16, gap: 12 },
+  infoText: { fontSize: 15, color: '#3c4043', flex: 1 },
 });

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

@@ -10,6 +10,7 @@ import {
   Platform,
   SectionList,
   Animated,
+  TouchableWithoutFeedback,
 } from 'react-native';
 import { SafeAreaView } from 'react-native-safe-area-context';
 import * as MediaLibrary from 'expo-media-library';
@@ -17,6 +18,9 @@ import { Image } from 'expo-image';
 import { StatusBar } from 'expo-status-bar';
 import { MaterialIcons } from '@expo/vector-icons';
 import { format } from 'date-fns';
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import { TRASHED_ASSETS_KEY, UnifiedAsset } from './index';
+import { deleteFromCloud, downloadToDevice } from '../utils/syncManager';
 
 const { width } = Dimensions.get('window');
 const ALBUM_TILE = (width - 48) / 2;
@@ -49,8 +53,13 @@ export default function LibraryScreen() {
   const [openAlbum, setOpenAlbum] = useState<AlbumWithCover | null>(null);
   const [albumAssets, setAlbumAssets] = useState<MediaLibrary.Asset[]>([]);
   const [loadingAlbum, setLoadingAlbum] = useState(false);
-  const [viewerAsset, setViewerAsset] = useState<MediaLibrary.Asset | null>(null);
+  const [viewerAsset, setViewerAsset] = useState<MediaLibrary.Asset | UnifiedAsset | null>(null);
+  const [isViewerFromBin, setIsViewerFromBin] = useState(false);
   const [stats, setStats] = useState({ photos: 0, videos: 0, sizeMB: 0 });
+  const [trashedAssets, setTrashedAssets] = useState<UnifiedAsset[]>([]);
+  const [viewingBin, setViewingBin] = useState(false);
+  const [showRestoreMenu, setShowRestoreMenu] = useState(false);
+  const [showBinDeleteMenu, setShowBinDeleteMenu] = useState(false);
 
   useEffect(() => {
     if (Platform.OS === 'web') { setIsLoading(false); return; }
@@ -64,6 +73,9 @@ export default function LibraryScreen() {
       catch { res = { granted: false }; }
       if (!res.granted) { setIsLoading(false); return; }
       setHasPermission(true);
+      
+      const trashedRaw = await AsyncStorage.getItem(TRASHED_ASSETS_KEY);
+      setTrashedAssets(trashedRaw ? JSON.parse(trashedRaw) : []);
 
       // Load all albums
       const albumsResult = await MediaLibrary.getAlbumsAsync({ includeSmartAlbums: true });
@@ -183,7 +195,21 @@ export default function LibraryScreen() {
           maxToRenderPerBatch={10}
           windowSize={5}
           removeClippedSubviews={true}
-          ListHeaderComponent={<Text style={styles.sectionLabel}>Albums</Text>}
+          ListHeaderComponent={
+            <>
+              <Text style={styles.sectionLabel}>Library</Text>
+              <View style={styles.grid}>
+                <TouchableOpacity style={styles.albumCard} onPress={() => setViewingBin(true)}>
+                  <View style={[styles.albumThumb, { backgroundColor: '#fce8e6', justifyContent: 'center', alignItems: 'center' }]}>
+                    <MaterialIcons name="delete" size={36} color="#d93025" />
+                  </View>
+                  <Text style={styles.albumName}>Recently Deleted</Text>
+                  <Text style={styles.albumCount}>{trashedAssets.length} items</Text>
+                </TouchableOpacity>
+              </View>
+              <Text style={styles.sectionLabel}>Albums</Text>
+            </>
+          }
           renderItem={({ item: album }) => (
             <TouchableOpacity
               style={styles.albumCard}
@@ -256,12 +282,39 @@ export default function LibraryScreen() {
         </SafeAreaView>
       </Modal>
 
+      {/* Bin detail modal */}
+      <Modal visible={viewingBin} animationType="slide" onRequestClose={() => setViewingBin(false)}>
+        <SafeAreaView style={{ flex: 1, backgroundColor: '#fff' }}>
+          <View style={styles.modalHeader}>
+            <TouchableOpacity onPress={() => setViewingBin(false)} style={{ padding: 8 }}>
+              <MaterialIcons name="arrow-back" size={24} color="#202124" />
+            </TouchableOpacity>
+            <Text style={styles.modalTitle}>Recently Deleted</Text>
+            <Text style={styles.modalCount}>{trashedAssets.length} items</Text>
+          </View>
+          <FlatList
+            data={trashedAssets}
+            numColumns={3}
+            keyExtractor={a => a.id}
+            contentContainerStyle={{ padding: 4 }}
+            renderItem={({ item }) => (
+              <TouchableOpacity
+                style={{ flex: 1, margin: 2, aspectRatio: 1, borderRadius: 4, overflow: 'hidden', backgroundColor: '#e0e0e0' }}
+                onPress={() => { setViewerAsset(item); setIsViewerFromBin(true); }}
+              >
+                <Image source={{ uri: item.uri }} style={StyleSheet.absoluteFill} contentFit="cover" cachePolicy="memory-disk" />
+              </TouchableOpacity>
+            )}
+          />
+        </SafeAreaView>
+      </Modal>
+
       {/* Full-screen viewer */}
-      <Modal visible={!!viewerAsset} transparent={false} animationType="fade" onRequestClose={() => setViewerAsset(null)}>
+      <Modal visible={!!viewerAsset} transparent={false} animationType="fade" onRequestClose={() => { setViewerAsset(null); setIsViewerFromBin(false); }}>
         <View style={{ flex: 1, backgroundColor: '#000' }}>
           <TouchableOpacity
             style={{ position: 'absolute', top: 52, left: 16, zIndex: 10, padding: 8, backgroundColor: 'rgba(0,0,0,0.5)', borderRadius: 20 }}
-            onPress={() => setViewerAsset(null)}
+            onPress={() => { setViewerAsset(null); setIsViewerFromBin(false); }}
           >
             <MaterialIcons name="close" size={26} color="#fff" />
           </TouchableOpacity>
@@ -271,14 +324,162 @@ export default function LibraryScreen() {
             contentFit="contain"
             cachePolicy="memory-disk"
           />
-          {viewerAsset && (
-            <View style={{ position: 'absolute', bottom: 40, left: 0, right: 0, alignItems: 'center' }}>
-              <Text style={{ color: '#fff', fontSize: 13, backgroundColor: 'rgba(0,0,0,0.5)', paddingHorizontal: 12, paddingVertical: 6, borderRadius: 16 }}>
-                {format(new Date(viewerAsset.creationTime), 'MMM d, yyyy · h:mm a')}
-              </Text>
+          {viewerAsset && isViewerFromBin && (
+            <View style={{ position: 'absolute', bottom: 0, left: 0, right: 0, flexDirection: 'row', justifyContent: 'space-around', backgroundColor: 'rgba(0,0,0,0.8)', paddingVertical: 16, paddingBottom: 32 }}>
+              <TouchableOpacity onPress={() => setShowRestoreMenu(true)} style={{ alignItems: 'center' }}>
+                <MaterialIcons name="restore" size={26} color="#1a73e8" />
+                <Text style={{ color: '#1a73e8', fontSize: 13, marginTop: 4 }}>Restore</Text>
+              </TouchableOpacity>
+
+              <TouchableOpacity onPress={() => setShowBinDeleteMenu(true)} style={{ alignItems: 'center' }}>
+                <MaterialIcons name="delete-forever" size={26} color="#ff6b6b" />
+                <Text style={{ color: '#ff6b6b', fontSize: 13, marginTop: 4 }}>Delete Permanently</Text>
+              </TouchableOpacity>
             </View>
           )}
         </View>
+
+        {/* Restore Action Sheet Modal */}
+        {showRestoreMenu && viewerAsset && (
+          <Modal transparent animationType="slide" onRequestClose={() => setShowRestoreMenu(false)}>
+            <TouchableOpacity style={styles.actionSheetBg} activeOpacity={1} onPress={() => setShowRestoreMenu(false)}>
+              <TouchableWithoutFeedback>
+                <View style={styles.actionSheet}>
+                  <Text style={styles.actionSheetTitle}>Restore Photo</Text>
+                  
+                  <TouchableOpacity style={styles.actionSheetRow} onPress={async () => {
+                    setShowRestoreMenu(false);
+                    const unified = viewerAsset as UnifiedAsset;
+                    if (unified.isCloudOnly && unified.cloudUri) {
+                      await downloadToDevice(unified.cloudUri, unified.filename);
+                    }
+                    const newTrashed = trashedAssets.filter(a => a.id !== viewerAsset.id);
+                    await AsyncStorage.setItem(TRASHED_ASSETS_KEY, JSON.stringify(newTrashed));
+                    setTrashedAssets(newTrashed);
+                    setViewerAsset(null); setIsViewerFromBin(false);
+                  }}>
+                    <MaterialIcons name="sync" size={24} color="#1a73e8" />
+                    <View>
+                      <Text style={[styles.actionSheetText, { color: '#1a73e8' }]}>Recover to Both</Text>
+                      <Text style={{ fontSize: 13, color: '#5f6368' }}>Ensures photo is on device and cloud.</Text>
+                    </View>
+                  </TouchableOpacity>
+
+                  <TouchableOpacity style={styles.actionSheetRow} onPress={async () => {
+                    setShowRestoreMenu(false);
+                    const unified = viewerAsset as UnifiedAsset;
+                    if (!unified.isCloudOnly && unified.originalId) {
+                      await MediaLibrary.deleteAssetsAsync([{ id: unified.originalId }] as any);
+                    }
+                    const newTrashed = trashedAssets.filter(a => a.id !== viewerAsset.id);
+                    await AsyncStorage.setItem(TRASHED_ASSETS_KEY, JSON.stringify(newTrashed));
+                    setTrashedAssets(newTrashed);
+                    setViewerAsset(null); setIsViewerFromBin(false);
+                  }}>
+                    <MaterialIcons name="cloud-upload" size={24} color="#202124" />
+                    <View>
+                      <Text style={styles.actionSheetText}>Recover to Cloud Only</Text>
+                      <Text style={{ fontSize: 13, color: '#5f6368' }}>Deletes local copy, keeps in cloud.</Text>
+                    </View>
+                  </TouchableOpacity>
+
+                  <TouchableOpacity style={styles.actionSheetRow} onPress={async () => {
+                    setShowRestoreMenu(false);
+                    const unified = viewerAsset as UnifiedAsset;
+                    if (unified.isCloudOnly && unified.cloudUri) {
+                      await downloadToDevice(unified.cloudUri, unified.filename);
+                    }
+                    if (unified.isSynced) {
+                      await deleteFromCloud(unified.id);
+                    }
+                    const newTrashed = trashedAssets.filter(a => a.id !== viewerAsset.id);
+                    await AsyncStorage.setItem(TRASHED_ASSETS_KEY, JSON.stringify(newTrashed));
+                    setTrashedAssets(newTrashed);
+                    setViewerAsset(null); setIsViewerFromBin(false);
+                  }}>
+                    <MaterialIcons name="smartphone" size={24} color="#202124" />
+                    <View>
+                      <Text style={styles.actionSheetText}>Recover to Device Only</Text>
+                      <Text style={{ fontSize: 13, color: '#5f6368' }}>Downloads if needed, deletes from cloud.</Text>
+                    </View>
+                  </TouchableOpacity>
+                </View>
+              </TouchableWithoutFeedback>
+            </TouchableOpacity>
+          </Modal>
+        )}
+
+        {/* Delete Action Sheet Modal */}
+        {showBinDeleteMenu && viewerAsset && (
+          <Modal transparent animationType="slide" onRequestClose={() => setShowBinDeleteMenu(false)}>
+            <TouchableOpacity style={styles.actionSheetBg} activeOpacity={1} onPress={() => setShowBinDeleteMenu(false)}>
+              <TouchableWithoutFeedback>
+                <View style={styles.actionSheet}>
+                  <Text style={styles.actionSheetTitle}>Delete Permanently</Text>
+                  
+                  <TouchableOpacity style={styles.actionSheetRow} onPress={async () => {
+                    setShowBinDeleteMenu(false);
+                    const unified = viewerAsset as UnifiedAsset;
+                    if (!unified.isCloudOnly && unified.originalId) {
+                      await MediaLibrary.deleteAssetsAsync([{ id: unified.originalId }] as any);
+                    }
+                    // It's still in the cloud, so it should stay in Bin or return to timeline as Cloud Only?
+                    // Usually this removes it from Bin. Let's remove it.
+                    const newTrashed = trashedAssets.filter(a => a.id !== viewerAsset.id);
+                    await AsyncStorage.setItem(TRASHED_ASSETS_KEY, JSON.stringify(newTrashed));
+                    setTrashedAssets(newTrashed);
+                    setViewerAsset(null); setIsViewerFromBin(false);
+                  }}>
+                    <MaterialIcons name="smartphone" size={24} color="#d93025" />
+                    <View>
+                      <Text style={[styles.actionSheetText, { color: '#d93025' }]}>Delete from Device Only</Text>
+                      <Text style={{ fontSize: 13, color: '#5f6368' }}>Permanently remove from phone.</Text>
+                    </View>
+                  </TouchableOpacity>
+
+                  <TouchableOpacity style={styles.actionSheetRow} onPress={async () => {
+                    setShowBinDeleteMenu(false);
+                    const unified = viewerAsset as UnifiedAsset;
+                    if (unified.isSynced) {
+                      await deleteFromCloud(unified.id);
+                    }
+                    const newTrashed = trashedAssets.filter(a => a.id !== viewerAsset.id);
+                    await AsyncStorage.setItem(TRASHED_ASSETS_KEY, JSON.stringify(newTrashed));
+                    setTrashedAssets(newTrashed);
+                    setViewerAsset(null); setIsViewerFromBin(false);
+                  }}>
+                    <MaterialIcons name="cloud-off" size={24} color="#d93025" />
+                    <View>
+                      <Text style={[styles.actionSheetText, { color: '#d93025' }]}>Delete from Cloud Only</Text>
+                      <Text style={{ fontSize: 13, color: '#5f6368' }}>Permanently remove from backup.</Text>
+                    </View>
+                  </TouchableOpacity>
+
+                  <TouchableOpacity style={styles.actionSheetRow} onPress={async () => {
+                    setShowBinDeleteMenu(false);
+                    const unified = viewerAsset as UnifiedAsset;
+                    if (!unified.isCloudOnly && unified.originalId) {
+                      await MediaLibrary.deleteAssetsAsync([{ id: unified.originalId }] as any);
+                    }
+                    if (unified.isSynced) {
+                      await deleteFromCloud(unified.id);
+                    }
+                    const newTrashed = trashedAssets.filter(a => a.id !== viewerAsset.id);
+                    await AsyncStorage.setItem(TRASHED_ASSETS_KEY, JSON.stringify(newTrashed));
+                    setTrashedAssets(newTrashed);
+                    setViewerAsset(null); setIsViewerFromBin(false);
+                  }}>
+                    <MaterialIcons name="delete-forever" size={24} color="#d93025" />
+                    <View>
+                      <Text style={[styles.actionSheetText, { color: '#d93025' }]}>Delete from Both</Text>
+                      <Text style={{ fontSize: 13, color: '#5f6368' }}>Completely obliterate everywhere.</Text>
+                    </View>
+                  </TouchableOpacity>
+                </View>
+              </TouchableWithoutFeedback>
+            </TouchableOpacity>
+          </Modal>
+        )}
       </Modal>
     </SafeAreaView>
   );
@@ -315,4 +516,10 @@ const styles = StyleSheet.create({
   modalHeader: { flexDirection: 'row', alignItems: 'center', paddingHorizontal: 8, paddingVertical: 12, borderBottomWidth: StyleSheet.hairlineWidth, borderBottomColor: '#e0e0e0' },
   modalTitle: { flex: 1, fontSize: 18, fontWeight: '700', color: '#202124', marginLeft: 8 },
   modalCount: { fontSize: 13, color: '#5f6368', marginRight: 8 },
+
+  actionSheetBg: { flex: 1, justifyContent: 'flex-end', backgroundColor: 'rgba(0,0,0,0.5)' },
+  actionSheet: { backgroundColor: '#fff', borderTopLeftRadius: 16, borderTopRightRadius: 16, padding: 24, paddingBottom: 40 },
+  actionSheetTitle: { fontSize: 20, fontWeight: '700', color: '#202124', marginBottom: 16 },
+  actionSheetRow: { flexDirection: 'row', alignItems: 'center', marginBottom: 20, gap: 12 },
+  actionSheetText: { fontSize: 15, fontWeight: '600', color: '#202124' },
 });

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

@@ -1,14 +1,16 @@
 import React, { useEffect, useState } from 'react';
-import { View, Text, StyleSheet, Switch, Platform } from 'react-native';
+import { View, Text, StyleSheet, Switch, Platform, TouchableOpacity, Alert } from 'react-native';
 import { SafeAreaView } from 'react-native-safe-area-context';
 import { StatusBar } from 'expo-status-bar';
 import { MaterialIcons } from '@expo/vector-icons';
 import AsyncStorage from '@react-native-async-storage/async-storage';
 import { BACKGROUND_SYNC_ENABLED_KEY } from '../utils/syncManager';
+import { useAuth } from '../../components/AuthContext';
 
 export const SYNC_ON_CELLULAR_KEY = '@setting_sync_cellular';
 
 export default function SettingsScreen() {
+  const { logout, username } = useAuth();
   const [syncOnCellular, setSyncOnCellular] = useState(false);
   const [bgSync, setBgSync] = useState(true); // Default to true if not set
   const [isLoading, setIsLoading] = useState(true);
@@ -57,6 +59,17 @@ export default function SettingsScreen() {
     }
   };
 
+  const handleLogout = async () => {
+    Alert.alert('Log Out', 'Are you sure you want to sign out?', [
+      { text: 'Cancel', style: 'cancel' },
+      {
+        text: 'Log Out', style: 'destructive', onPress: async () => {
+          await logout();
+        }
+      }
+    ]);
+  };
+
   if (Platform.OS === 'web') {
     return (
       <View style={styles.center}>
@@ -74,6 +87,19 @@ export default function SettingsScreen() {
         <Text style={styles.headerTitle}>Settings</Text>
       </View>
 
+      {/* Profile Card */}
+      {username && (
+        <View style={styles.profileCard}>
+          <View style={styles.profileAvatar}>
+            <Text style={styles.profileAvatarText}>{username.charAt(0).toUpperCase()}</Text>
+          </View>
+          <View>
+            <Text style={styles.profileName}>{username}</Text>
+            <Text style={styles.profileSub}>Signed in</Text>
+          </View>
+        </View>
+      )}
+
       {!isLoading && (
         <View style={styles.settingsList}>
           <Text style={styles.sectionHeader}>Sync & Backup</Text>
@@ -117,6 +143,22 @@ export default function SettingsScreen() {
           </View>
         </View>
       )}
+
+      {!isLoading && (
+        <View style={[styles.settingsList, { marginTop: 24 }]}>
+          <TouchableOpacity style={styles.settingItem} onPress={handleLogout}>
+            <View style={styles.settingLeft}>
+              <View style={[styles.iconBox, { backgroundColor: '#fce8e6' }]}>
+                <MaterialIcons name="logout" size={24} color="#d93025" />
+              </View>
+              <View>
+                <Text style={[styles.settingLabel, { color: '#d93025' }]}>Log Out</Text>
+                <Text style={styles.settingDesc}>Sign out of this device.</Text>
+              </View>
+            </View>
+          </TouchableOpacity>
+        </View>
+      )}
     </SafeAreaView>
   );
 }
@@ -139,4 +181,20 @@ const styles = StyleSheet.create({
   iconBox: { width: 40, height: 40, borderRadius: 20, backgroundColor: '#e8f0fe', justifyContent: 'center', alignItems: 'center', marginRight: 16 },
   settingLabel: { fontSize: 16, fontWeight: '600', color: '#202124' },
   settingDesc: { fontSize: 13, color: '#5f6368', marginTop: 2 },
+
+  profileCard: {
+    flexDirection: 'row', alignItems: 'center', gap: 16,
+    marginHorizontal: 16, marginTop: 16, marginBottom: 4,
+    backgroundColor: '#fff', borderRadius: 16, padding: 16,
+    shadowColor: '#000', shadowOffset: { width: 0, height: 1 },
+    shadowOpacity: 0.04, shadowRadius: 4, elevation: 1,
+  },
+  profileAvatar: {
+    width: 52, height: 52, borderRadius: 26,
+    backgroundColor: '#1a73e8',
+    justifyContent: 'center', alignItems: 'center',
+  },
+  profileAvatarText: { color: '#fff', fontSize: 22, fontWeight: '700' },
+  profileName: { fontSize: 17, fontWeight: '700', color: '#202124' },
+  profileSub: { fontSize: 13, color: '#5f6368', marginTop: 2 },
 });

keystone-app/app/_layout.tsx

@@ -2,19 +2,23 @@ import { Stack } from 'expo-router';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
 import * as BackgroundFetch from 'expo-background-fetch';
 import { useEffect } from 'react';
+import { View, ActivityIndicator } from 'react-native';
+import LoginScreen from '../components/LoginScreen';
+import { AuthProvider, useAuth } from '../components/AuthContext';
 
 // Import syncManager to ensure TaskManager.defineTask is called in the global scope
 import { BACKGROUND_SYNC_TASK } from './utils/syncManager';
 
-export default function Layout() {
+function AppContent() {
+  const { isAuthenticated, login } = useAuth();
+
   useEffect(() => {
-    // Register the background fetch task with the OS
     const registerTask = async () => {
       try {
         await BackgroundFetch.registerTaskAsync(BACKGROUND_SYNC_TASK, {
-          minimumInterval: 60 * 15, // 15 minutes
-          stopOnTerminate: false, // Android only
-          startOnBoot: true, // Android only
+          minimumInterval: 60 * 15,
+          stopOnTerminate: false,
+          startOnBoot: true,
         });
       } catch (err) {
         console.warn('Background fetch failed to register:', err);
@@ -23,6 +27,18 @@ export default function Layout() {
     registerTask();
   }, []);
 
+  if (isAuthenticated === null) {
+    return (
+      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#f8f9fa' }}>
+        <ActivityIndicator size="large" color="#1a73e8" />
+      </View>
+    );
+  }
+
+  if (!isAuthenticated) {
+    return <LoginScreen onLoginSuccess={(token: string) => login(token)} />;
+  }
+
   return (
     <SafeAreaProvider>
       <Stack>
@@ -30,4 +46,12 @@ export default function Layout() {
       </Stack>
     </SafeAreaProvider>
   );
+}
+
+export default function Layout() {
+  return (
+    <AuthProvider>
+      <AppContent />
+    </AuthProvider>
+  );
 }

keystone-app/app/utils/syncManager.ts

@@ -9,9 +9,13 @@ import { SYNC_ON_CELLULAR_KEY } from '../(tabs)/settings';
 export const BACKGROUND_SYNC_TASK = 'BACKGROUND_SYNC_TASK';
 export const BACKGROUND_SYNC_ENABLED_KEY = '@setting_background_sync';
 
-const BACKEND_URL = 'https://dpv007-keystone.hf.space';
-const MOCK_TOKEN = 'mock-jwt-token-xyz123';
-const SYNCED_ASSETS_KEY = '@synced_assets_v2';
+export const BACKEND_URL = 'https://dpv007-keystone.hf.space';
+
+export const getToken = async () => {
+  return await AsyncStorage.getItem('jwt_token');
+};
+
+export const SYNCED_ASSETS_KEY = '@synced_assets_v2';
 
 export type SyncCallbacks = {
   onProgress?: (current: number, total: number) => void;
@@ -19,7 +23,7 @@ export type SyncCallbacks = {
   onInterrupted?: (reason: string) => void;
 };
 
-const getSyncedList = async (): Promise<string[]> => {
+export const getSyncedList = async (): Promise<string[]> => {
   try {
     const v = await AsyncStorage.getItem(SYNCED_ASSETS_KEY);
     return v ? JSON.parse(v) : [];
@@ -28,7 +32,7 @@ const getSyncedList = async (): Promise<string[]> => {
   }
 };
 
-const addSyncedId = async (id: string, list: string[]): Promise<string[]> => {
+export const addSyncedId = async (id: string, list: string[]): Promise<string[]> => {
   const next = [...list, id];
   try {
     await AsyncStorage.setItem(SYNCED_ASSETS_KEY, JSON.stringify(next));
@@ -36,6 +40,34 @@ const addSyncedId = async (id: string, list: string[]): Promise<string[]> => {
   return next;
 };
 
+/**
+ * Upload a single asset to the backend using the stored JWT.
+ */
+const uploadAsset = async (asset: MediaLibrary.Asset): Promise<boolean> => {
+  try {
+    const token = await getToken();
+    if (!token) return false;
+
+    const info = await MediaLibrary.getAssetInfoAsync(asset);
+    const uri = info.localUri || asset.uri;
+
+    const res = await FileSystem.uploadAsync(`${BACKEND_URL}/upload`, uri, {
+      httpMethod: 'POST',
+      uploadType: FileSystem.FileSystemUploadType.MULTIPART,
+      fieldName: 'file',
+      parameters: {
+        creation_time: asset.creationTime.toString(),
+        token: token,
+      },
+    });
+
+    return res.status === 200 || res.status === 201;
+  } catch (error) {
+    console.error(`Error uploading asset ${asset.id}:`, error);
+    return false;
+  }
+};
+
 /**
  * Core sync logic used by both foreground UI and background fetch.
  */
@@ -92,27 +124,15 @@ export const runSyncCycle = async (callbacks?: SyncCallbacks) => {
   for (let i = 0; i < toSync.length; i++) {
     callbacks?.onProgress?.(i + 1, toSync.length);
     const asset = toSync[i];
-    try {
-      const info = await MediaLibrary.getAssetInfoAsync(asset);
-      const localUri = info.localUri || asset.uri;
-      
-      const resp = await FileSystem.uploadAsync(`${BACKEND_URL}/upload?token=${MOCK_TOKEN}`, localUri, {
-        fieldName: 'file',
-        httpMethod: 'POST',
-        uploadType: FileSystem.FileSystemUploadType.MULTIPART,
-        parameters: { creation_time: asset.creationTime.toString() },
-        headers: { authorization: `Bearer ${MOCK_TOKEN}` },
-      });
-      
-      if (resp.status === 200 || resp.status === 201) {
-        synced = await addSyncedId(asset.id, synced);
-        ok++;
-        callbacks?.onStatusChange?.('syncing', toSync.length - ok);
-      }
-    } catch (e) {
-      console.error('Upload error', e);
+    
+    const success = await uploadAsset(asset);
+    if (success) {
+      synced = await addSyncedId(asset.id, synced);
+      ok++;
+      callbacks?.onStatusChange?.('syncing', toSync.length - ok);
+    } else {
       callbacks?.onInterrupted?.('Sync Interrupted');
-      return false; // Stop sync on failure to preserve battery/retries
+      return false;
     }
   }
 
@@ -120,6 +140,31 @@ export const runSyncCycle = async (callbacks?: SyncCallbacks) => {
   return true;
 };
 
+export const deleteFromCloud = async (cloudId: string): Promise<boolean> => {
+  try {
+    const token = await getToken();
+    if (!token) return false;
+    
+    const res = await fetch(`${BACKEND_URL}/photos/delete/${cloudId}?token=${token}`, { method: 'DELETE' });
+    return res.ok;
+  } catch (e) {
+    console.error('Failed to delete from cloud', e);
+    return false;
+  }
+};
+
+export const downloadToDevice = async (cloudUri: string, filename: string): Promise<boolean> => {
+  try {
+    const fileUri = `${FileSystem.documentDirectory}${filename}`;
+    const { uri } = await FileSystem.downloadAsync(cloudUri, fileUri);
+    const asset = await MediaLibrary.createAssetAsync(uri);
+    return !!asset;
+  } catch (e) {
+    console.error('Failed to download to device', e);
+    return false;
+  }
+};
+
 // ─── Background Task Definition ─────────────────────────────────────
 TaskManager.defineTask(BACKGROUND_SYNC_TASK, async () => {
   try {

keystone-app/components/AuthContext.tsx

@@ -0,0 +1,61 @@
+import React, { createContext, useContext, useState, useEffect } from 'react';
+import AsyncStorage from '@react-native-async-storage/async-storage';
+
+interface AuthContextType {
+  isAuthenticated: boolean | null;
+  username: string | null;
+  login: (token: string) => void;
+  logout: () => Promise<void>;
+}
+
+const AuthContext = createContext<AuthContextType>({
+  isAuthenticated: null,
+  username: null,
+  login: () => {},
+  logout: async () => {},
+});
+
+export function AuthProvider({ children }: { children: React.ReactNode }) {
+  const [isAuthenticated, setIsAuthenticated] = useState<boolean | null>(null);
+  const [username, setUsername] = useState<string | null>(null);
+
+  const decodeJwt = (token: string): string | null => {
+    try {
+      const base64Payload = token.split('.')[1];
+      const payload = JSON.parse(atob(base64Payload));
+      return payload.sub || null;
+    } catch {
+      return null;
+    }
+  };
+
+  useEffect(() => {
+    AsyncStorage.getItem('jwt_token').then(token => {
+      if (token) {
+        setUsername(decodeJwt(token));
+        setIsAuthenticated(true);
+      } else {
+        setIsAuthenticated(false);
+      }
+    });
+  }, []);
+
+  const login = (token: string) => {
+    setUsername(decodeJwt(token));
+    setIsAuthenticated(true);
+  };
+
+  const logout = async () => {
+    await AsyncStorage.removeItem('jwt_token');
+    setUsername(null);
+    setIsAuthenticated(false);
+  };
+
+  return (
+    <AuthContext.Provider value={{ isAuthenticated, username, login, logout }}>
+      {children}
+    </AuthContext.Provider>
+  );
+}
+
+export const useAuth = () => useContext(AuthContext);

keystone-app/components/LoginScreen.tsx

@@ -0,0 +1,169 @@
+import React, { useState } from 'react';
+import { View, Text, TextInput, TouchableOpacity, StyleSheet, ActivityIndicator, KeyboardAvoidingView, Platform, Alert } from 'react-native';
+import { MaterialIcons } from '@expo/vector-icons';
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import { BACKEND_URL } from '../app/utils/syncManager';
+
+interface Props {
+  onLoginSuccess: (token: string) => void;
+}
+
+export default function LoginScreen({ onLoginSuccess }: Props) {
+  const [username, setUsername] = useState('');
+  const [password, setPassword] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+
+  const handleLogin = async () => {
+    if (!username || !password) {
+      Alert.alert('Error', 'Please enter both username and password.');
+      return;
+    }
+
+    setIsLoading(true);
+    try {
+      const res = await fetch(`${BACKEND_URL}/auth/login`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ username, password }),
+      });
+      
+      const data = await res.json();
+      
+      if (res.ok && data.token) {
+        await AsyncStorage.setItem('jwt_token', data.token);
+        onLoginSuccess(data.token);
+      } else {
+        Alert.alert('Login Failed', data.detail || 'Invalid credentials');
+      }
+    } catch (e) {
+      Alert.alert('Network Error', 'Could not connect to server.');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <KeyboardAvoidingView 
+      behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+      style={styles.container}
+    >
+      <View style={styles.card}>
+        <View style={styles.header}>
+          <MaterialIcons name="cloud-sync" size={48} color="#1a73e8" />
+          <Text style={styles.title}>KeyStone</Text>
+          <Text style={styles.subtitle}>Sign in to your private cloud</Text>
+        </View>
+
+        <View style={styles.form}>
+          <View style={styles.inputContainer}>
+            <MaterialIcons name="person" size={20} color="#5f6368" style={styles.inputIcon} />
+            <TextInput
+              style={styles.input}
+              placeholder="Username"
+              placeholderTextColor="#9aa0a6"
+              value={username}
+              onChangeText={setUsername}
+              autoCapitalize="none"
+              autoCorrect={false}
+            />
+          </View>
+
+          <View style={styles.inputContainer}>
+            <MaterialIcons name="lock" size={20} color="#5f6368" style={styles.inputIcon} />
+            <TextInput
+              style={styles.input}
+              placeholder="Password"
+              placeholderTextColor="#9aa0a6"
+              secureTextEntry
+              value={password}
+              onChangeText={setPassword}
+            />
+          </View>
+
+          <TouchableOpacity 
+            style={[styles.button, isLoading && styles.buttonDisabled]} 
+            onPress={handleLogin}
+            disabled={isLoading}
+          >
+            {isLoading ? (
+              <ActivityIndicator color="#fff" />
+            ) : (
+              <Text style={styles.buttonText}>Sign In</Text>
+            )}
+          </TouchableOpacity>
+        </View>
+      </View>
+    </KeyboardAvoidingView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#f8f9fa',
+    justifyContent: 'center',
+    padding: 24,
+  },
+  card: {
+    backgroundColor: '#fff',
+    borderRadius: 24,
+    padding: 32,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 8 },
+    shadowOpacity: 0.05,
+    shadowRadius: 24,
+    elevation: 4,
+  },
+  header: {
+    alignItems: 'center',
+    marginBottom: 32,
+  },
+  title: {
+    fontSize: 28,
+    fontWeight: '800',
+    color: '#202124',
+    marginTop: 16,
+    letterSpacing: -0.5,
+  },
+  subtitle: {
+    fontSize: 15,
+    color: '#5f6368',
+    marginTop: 8,
+  },
+  form: {
+    gap: 16,
+  },
+  inputContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    backgroundColor: '#f1f3f4',
+    borderRadius: 12,
+    paddingHorizontal: 16,
+    height: 56,
+  },
+  inputIcon: {
+    marginRight: 12,
+  },
+  input: {
+    flex: 1,
+    fontSize: 16,
+    color: '#202124',
+    height: '100%',
+  },
+  button: {
+    backgroundColor: '#1a73e8',
+    height: 56,
+    borderRadius: 12,
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginTop: 8,
+  },
+  buttonDisabled: {
+    opacity: 0.7,
+  },
+  buttonText: {
+    color: '#fff',
+    fontSize: 16,
+    fontWeight: '700',
+  },
+});

keystone-backend/main.py

@@ -1,19 +1,31 @@
 import os
-from datetime import datetime
+from datetime import datetime, timedelta
 from fastapi import FastAPI, HTTPException, Header, Depends, UploadFile, File, Form, Request
 from fastapi.middleware.cors import CORSMiddleware
+from fastapi.responses import FileResponse
 from pydantic import BaseModel
 from dotenv import load_dotenv
+import jwt
 
 # Load local environment variables
 load_dotenv()
 
 app = FastAPI(title="KeyStone API", version="0.1.0")
 
-# Fetch credentials from environment variables
-DEV_USERNAME = os.getenv("DEV_USERNAME", "admin")
-DEV_PASSWORD = os.getenv("DEV_LOGIN_PASSWORD", "password123")
-MOCK_TOKEN = "mock-jwt-token-xyz123"
+# JWT Configuration
+JWT_SECRET = os.getenv("JWT_SECRET", "super-secret-default-key-change-in-prod")
+JWT_ALGORITHM = "HS256"
+JWT_EXPIRATION_DAYS = 365
+
+# Load Users dynamically from Environment Variables
+# Format: USER_1=john, PASSWORD_1=secret
+VALID_USERS = {}
+for key, value in os.environ.items():
+    if key.startswith("USER_"):
+        idx = key.split("_")[1]
+        password = os.environ.get(f"PASSWORD_{idx}")
+        if password:
+            VALID_USERS[value] = password
 
 # --- BUCKET STORAGE ENFORCEMENT ---
 # The Hugging Face bucket MUST be mounted at /data for this service to operate.
@@ -55,22 +67,20 @@ app.add_middleware(
     allow_headers=["*"],
 )
 
-class LoginPayload(BaseModel):
+class LoginRequest(BaseModel):
     username: str
     password: str
 
-def verify_mock_token(request: Request, authorization: str = Header(None)):
-    token = None
-    if authorization and authorization.startswith("Bearer "):
-        token = authorization.split(" ")[1]
-        
-    # Fallback to query parameter (useful if proxy strips Authorization header)
+def verify_jwt_token(token: str = None):
     if not token:
-        token = request.query_params.get("token")
-        
-    if token != MOCK_TOKEN:
-        raise HTTPException(status_code=401, detail="Unauthorized: Invalid Token")
-    return token
+        raise HTTPException(status_code=401, detail="Missing token")
+    try:
+        payload = jwt.decode(token, JWT_SECRET, algorithms=[JWT_ALGORITHM])
+        return payload.get("sub")
+    except jwt.ExpiredSignatureError:
+        raise HTTPException(status_code=401, detail="Token expired")
+    except jwt.InvalidTokenError:
+        raise HTTPException(status_code=401, detail="Invalid token")
 
 @app.get("/")
 async def root():
@@ -89,21 +99,25 @@ async def health_check():
     }
 
 @app.post("/auth/login")
-async def mock_login(payload: LoginPayload):
-    if payload.username == DEV_USERNAME and payload.password == DEV_PASSWORD:
-        return {
-            "access_token": MOCK_TOKEN,
-            "token_type": "bearer",
-            "user": {"username": payload.username, "id": "mock-uuid-1111-2222"}
-        }
-    raise HTTPException(status_code=400, detail="Incorrect username or password")
+async def login(req: LoginRequest):
+    if req.username not in VALID_USERS or VALID_USERS[req.username] != req.password:
+        raise HTTPException(status_code=401, detail="Invalid username or password")
+    
+    payload = {
+        "sub": req.username,
+        "exp": datetime.utcnow() + timedelta(days=JWT_EXPIRATION_DAYS)
+    }
+    token = jwt.encode(payload, JWT_SECRET, algorithm=JWT_ALGORITHM)
+    return {"token": token, "username": req.username}
 
 @app.post("/upload")
 async def upload_photo(
     file: UploadFile = File(...), 
     creation_time: str = Form(None),
-    token: str = Depends(verify_mock_token)
+    token: str = Form(...)
 ):
+    username = verify_jwt_token(token)
+    
     # Determine the date for folder structure
     dt = datetime.now()
     if creation_time:
@@ -119,8 +133,8 @@ async def upload_photo(
     year_folder = dt.strftime("%Y")
     month_folder = dt.strftime("%m")
 
-    # Create target directory: e.g., /data/photos/2024/07
-    target_dir = os.path.join(BASE_STORAGE_DIR, year_folder, month_folder)
+    # Create target directory: e.g., /data/photos/username/2024/07
+    target_dir = os.path.join(BASE_STORAGE_DIR, username, year_folder, month_folder)
     os.makedirs(target_dir, exist_ok=True)
 
     file_path = os.path.join(target_dir, file.filename)
@@ -139,6 +153,11 @@ async def upload_photo(
         with open(file_path, "wb") as buffer:
             while content := await file.read(1024 * 1024): 
                 buffer.write(content)
+                
+        # Preserve original creation time on the filesystem for the GET /photos API
+        ts = dt.timestamp()
+        os.utime(file_path, (ts, ts))
+        
     except Exception as e:
         raise HTTPException(status_code=500, detail=f"Could not save file: {str(e)}")
         
@@ -147,4 +166,56 @@ async def upload_photo(
         "filename": file.filename,
         "path": file_path,
         "status": "uploaded"
-    }
+    }
+
+@app.get("/photos")
+async def list_photos(username: str = Depends(verify_jwt_token)):
+    photos = []
+    user_dir = os.path.join(BASE_STORAGE_DIR, username)
+    if not os.path.exists(user_dir):
+        return {"assets": []}
+        
+    for root_dir, dirs, files in os.walk(user_dir):
+        for f in files:
+            full_path = os.path.join(root_dir, f)
+            rel_path = os.path.relpath(full_path, user_dir)
+            stat = os.stat(full_path)
+            
+            clean_rel = rel_path.replace("\\", "/")
+            serve_url = f"/photos/serve/{clean_rel}"
+            
+            media_type = "video" if f.lower().endswith(('.mp4', '.mov', '.avi', '.webm')) else "photo"
+            
+            photos.append({
+                "id": clean_rel, 
+                "uri": serve_url,
+                "creationTime": int(stat.st_mtime * 1000),
+                "mediaType": media_type,
+                "filename": f,
+                "size": stat.st_size
+            })
+            
+    return {"assets": photos}
+
+@app.get("/photos/serve/{year}/{month}/{filename}")
+async def serve_photo(
+    year: str, month: str, filename: str,
+    username: str = Depends(verify_jwt_token)
+):
+    file_path = os.path.join(BASE_STORAGE_DIR, username, year, month, filename)
+    if not os.path.exists(file_path):
+        raise HTTPException(status_code=404, detail="File not found")
+    return FileResponse(file_path)
+
+@app.delete("/photos/delete/{file_path:path}")
+async def delete_photo(file_path: str, username: str = Depends(verify_jwt_token)):
+    clean_path = os.path.normpath(file_path)
+    if clean_path.startswith("..") or os.path.isabs(clean_path):
+        raise HTTPException(status_code=400, detail="Invalid path")
+        
+    full_path = os.path.join(BASE_STORAGE_DIR, username, clean_path)
+    if os.path.exists(full_path):
+        os.remove(full_path)
+        return {"message": "Deleted successfully"}
+    else:
+        raise HTTPException(status_code=404, detail="File not found")

keystone-backend/requirements.txt

@@ -5,4 +5,5 @@ alembic
 supabase
 python-multipart
 pillow
-python-dotenv
+python-dotenv
+PyJWT