fix(mobile): improve encryption performance and fix FAB touch handling

Author: typelets

apps/mobile/v1/src/lib/encryption/core/aes.ts

@@ -13,21 +13,23 @@ let createCipheriv: any = null;
 let createDecipheriv: any = null;
 let QuickCryptoBuffer: any = null;
 
-// Try to get Buffer from global scope (polyfilled by react-native-quick-crypto)
-try {
-  // @ts-ignore - Buffer should be global after react-native-quick-crypto is loaded
-  QuickCryptoBuffer = global.Buffer || Buffer;
-} catch (e) {
-  // Buffer not available globally
-}
-
 try {
   const quickCrypto = require('react-native-quick-crypto');
 
   // Get the cipher functions
   createCipheriv = quickCrypto.createCipheriv;
   createDecipheriv = quickCrypto.createDecipheriv;
 
+  // Get Buffer from @craftzdog/react-native-buffer (same source as react-native-quick-crypto uses)
+  try {
+    const { Buffer: RNBuffer } = require('@craftzdog/react-native-buffer');
+    QuickCryptoBuffer = RNBuffer;
+  } catch (e) {
+    // Fallback to global Buffer if available
+    // @ts-ignore
+    QuickCryptoBuffer = global.Buffer;
+  }
+
   if (createCipheriv && createDecipheriv && QuickCryptoBuffer) {
     console.log('[Encryption] Native AES-GCM available - will use fast implementation');
   } else {

apps/mobile/v1/src/screens/FolderNotes/components/NotesList/index.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { ActivityIndicator, Alert, Animated, DeviceEventEmitter, InteractionManager, Pressable, RefreshControl, StyleSheet, View } from 'react-native';
+import { ActivityIndicator, Alert, Animated, DeviceEventEmitter, InteractionManager, Pressable, RefreshControl, StyleSheet, TouchableOpacity, View } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import { useUser } from '@clerk/clerk-expo';
@@ -757,26 +757,22 @@ export default function NotesList({ navigation, route, renderHeader, scrollY: pa
 
       {/* Floating Action Button - Only visible when Create Note button scrolls off screen */}
       {viewType !== 'trash' && isCreateNoteButtonOffScreen && (
-        <Animated.View
+        <Pressable
           style={[
             styles.fab,
             {
               bottom: insets.bottom + 20,
               right: 20,
-              transform: [{ translateY: fabTranslateY }],
             }
           ]}
+          onPress={() => navigation?.navigate('CreateNote', { folderId: route?.params?.folderId })}
         >
-          <GlassView glassEffectStyle="regular" style={[styles.fabGlass, { backgroundColor: theme.isDark ? 'rgba(255, 255, 255, 0.01)' : 'rgba(0, 0, 0, 0.01)' }]}>
-            <Pressable
-              style={styles.fabButton}
-              onPress={() => navigation?.navigate('CreateNote', { folderId: route?.params?.folderId })}
-              android_ripple={{ color: 'rgba(255, 255, 255, 0.3)', radius: 28 }}
-            >
+          <GlassView glassEffectStyle="regular" style={styles.fabGlass} pointerEvents="none">
+            <View style={[styles.fabButton, { backgroundColor: theme.isDark ? 'rgba(255, 255, 255, 0.01)' : 'rgba(0, 0, 0, 0.01)' }]}>
               <SquarePen size={20} color={theme.colors.foreground} />
-            </Pressable>
+            </View>
           </GlassView>
-        </Animated.View>
+        </Pressable>
       )}
     </View>
   );
@@ -803,7 +799,11 @@ const styles = StyleSheet.create({
   },
   fab: {
     position: 'absolute',
-    elevation: 4,
+    width: 56,
+    height: 56,
+    borderRadius: 28,
+    zIndex: 999,
+    elevation: 8,
     shadowColor: '#000',
     shadowOffset: { width: 0, height: 2 },
     shadowOpacity: 0.25,
@@ -814,13 +814,11 @@ const styles = StyleSheet.create({
     height: 56,
     borderRadius: 28,
     overflow: 'hidden',
-    backgroundColor: 'rgba(0, 0, 0, 0.01)',
   },
   fabButton: {
     width: 56,
     height: 56,
-    borderRadius: 28,
-    justifyContent: 'center',
     alignItems: 'center',
+    justifyContent: 'center',
   },
 });

apps/mobile/v1/src/services/api/encryption.ts

@@ -49,7 +49,14 @@ export async function decryptNote(note: Note, userId: string): Promise<Note> {
 
 // Yield to main thread to prevent UI blocking
 const yieldToMain = (): Promise<void> => {
-  return new Promise(resolve => setTimeout(resolve, 0));
+  return new Promise(resolve => {
+    // Use requestAnimationFrame for smoother UI, fallback to setTimeout
+    if (typeof requestAnimationFrame !== 'undefined') {
+      requestAnimationFrame(() => setTimeout(resolve, 0));
+    } else {
+      setTimeout(resolve, 0);
+    }
+  });
 };
 
 /**
@@ -66,32 +73,27 @@ export async function decryptNotes(
   const decryptStart = performance.now();
   console.log(`[PERF] Starting decryption of ${notes.length} notes...`);
 
-  const BATCH_SIZE = 10; // Process 10 notes at a time
+  const BATCH_SIZE = 3; // Process 3 notes at a time for better UI responsiveness
   const result: Note[] = [];
 
   try {
-    // Process notes in batches to prevent UI blocking
-    for (let i = 0; i < notes.length; i += BATCH_SIZE) {
-      const batch = notes.slice(i, i + BATCH_SIZE);
-
-      const decryptedBatch = await Promise.all(
-        batch.map(async (note) => {
-          try {
-            return await decryptNote(note, userId);
-          } catch {
-            return {
-              ...note,
-              title: note.title || '[Encrypted - Unable to decrypt]',
-              content: note.content || '[This note could not be decrypted]',
-            };
-          }
-        })
-      );
-
-      result.push(...decryptedBatch);
-
-      // Yield to main thread between batches to keep UI responsive
-      if (i + BATCH_SIZE < notes.length) {
+    // Process notes one at a time with yields for maximum UI responsiveness
+    for (let i = 0; i < notes.length; i++) {
+      const note = notes[i];
+
+      try {
+        const decrypted = await decryptNote(note, userId);
+        result.push(decrypted);
+      } catch {
+        result.push({
+          ...note,
+          title: note.title || '[Encrypted - Unable to decrypt]',
+          content: note.content || '[This note could not be decrypted]',
+        });
+      }
+
+      // Yield to main thread every 3 notes to keep UI responsive
+      if ((i + 1) % BATCH_SIZE === 0 && i + 1 < notes.length) {
         await yieldToMain();
       }
     }