fix(mobile): persist task checkbox state and improve navigation UX

Author: batalabs

apps/mobile/v1/editor/src/components/Editor.tsx

@@ -75,6 +75,12 @@ const createEditorHTML = (content: string, placeholder: string, isDark: boolean,
   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
   <meta name="color-scheme" content="${isDark ? 'dark' : 'light'}">
   <style>
+    :root {
+      --border-color: ${editorColors.border};
+      --blockquote-border-color: ${editorColors.blockquoteBorder};
+      --code-block-border-color: ${editorColors.codeBlockBorder};
+    }
+
     * {
       margin: 0;
       padding: 0;
@@ -144,7 +150,7 @@ const createEditorHTML = (content: string, placeholder: string, isDark: boolean,
     hr {
       margin: 16px 0;
       border: none;
-      border-top: 1px solid ${editorColors.border};
+      border-top: 1px solid var(--border-color);
     }
 
     /* Lists */
@@ -163,7 +169,7 @@ const createEditorHTML = (content: string, placeholder: string, isDark: boolean,
 
     /* Blockquotes */
     blockquote {
-      border-left: 4px solid ${editorColors.blockquoteBorder};
+      border-left: 4px solid var(--blockquote-border-color);
       padding-left: 16px;
       margin: 12px 0;
       color: ${editorColors.blockquoteText};
@@ -244,7 +250,7 @@ const createEditorHTML = (content: string, placeholder: string, isDark: boolean,
 
     pre {
       background-color: ${editorColors.codeBlockBackground};
-      border: 1px solid ${editorColors.codeBlockBorder};
+      border: 1px solid var(--code-block-border-color);
       border-radius: 6px;
       padding: 12px 16px;
       margin: 8px 0;
@@ -385,6 +391,39 @@ const createEditorHTML = (content: string, placeholder: string, isDark: boolean,
     editor.addEventListener('selectionchange', checkActiveFormats);
     document.addEventListener('selectionchange', checkActiveFormats);
 
+    // Handle checkbox clicks in task lists
+    editor.addEventListener('click', function(e) {
+      const target = e.target;
+      if (target && target.tagName === 'INPUT' && target.type === 'checkbox') {
+        e.stopPropagation();
+        // Toggle the checkbox state
+        const newChecked = target.checked;
+
+        // Set both the checked attribute (for HTML persistence) and data-checked
+        if (newChecked) {
+          target.setAttribute('checked', 'checked');
+        } else {
+          target.removeAttribute('checked');
+        }
+        target.setAttribute('data-checked', String(newChecked));
+
+        // Find the parent task item and update its data-checked attribute
+        let taskItem = target.parentElement;
+        while (taskItem && taskItem !== editor) {
+          if (taskItem.tagName === 'LI' && taskItem.getAttribute('data-type') === 'taskItem') {
+            taskItem.setAttribute('data-checked', String(newChecked));
+            break;
+          }
+          taskItem = taskItem.parentElement;
+        }
+
+        // Immediately notify React Native of the change
+        clearTimeout(timeout);
+        const html = editor.innerHTML;
+        window.ReactNativeWebView.postMessage(JSON.stringify({ type: 'content', html }));
+      }
+    });
+
     // Handle Enter and Backspace keys
     editor.addEventListener('keydown', function(e) {
       if (e.key === 'Enter' || e.keyCode === 13) {
@@ -867,7 +906,7 @@ const createEditorHTML = (content: string, placeholder: string, isDark: boolean,
     });
 
     // Handle content updates from React Native (external changes only)
-    window.setContent = function(html) {
+    (window as any).setContent = function(html: string) {
       if (!isInitialized) return;
       if (editor.innerHTML !== html) {
         const selection = window.getSelection();

apps/mobile/v1/src/screens/EditNote/index.tsx

@@ -50,6 +50,7 @@ export default function EditNoteScreen() {
 
   const editorRef = useRef<EditorRef>(null);
   const keyboardHeight = useKeyboardHeight();
+  const saveTimeoutRef = useRef<NodeJS.Timeout | null>(null);
 
   // Map theme colors to editor colors
   const editorColors: EditorColors = useMemo(() => ({
@@ -107,6 +108,34 @@ export default function EditNoteScreen() {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [noteId, isEditing]);
 
+  // Auto-save when content changes (for checkbox clicks)
+  useEffect(() => {
+    // Only auto-save for existing notes when content contains checkboxes and has changed
+    if ((noteId || createdNoteId) && content && content.includes('type="checkbox"')) {
+      // Clear any existing timeout
+      if (saveTimeoutRef.current) {
+        clearTimeout(saveTimeoutRef.current);
+      }
+
+      // Set a new timeout to save after 500ms of no changes
+      saveTimeoutRef.current = setTimeout(() => {
+        if (!isSaving) {
+          handleSave({ skipNavigation: true }).catch(error => {
+            logger.error('[NOTE] Auto-save failed', error instanceof Error ? error : undefined);
+          });
+        }
+      }, 500);
+    }
+
+    // Cleanup timeout on unmount
+    return () => {
+      if (saveTimeoutRef.current) {
+        clearTimeout(saveTimeoutRef.current);
+      }
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [content]);
+
   const refreshAttachments = async () => {
     const currentNoteId = (noteId as string) || createdNoteId;
     if (currentNoteId) {

apps/mobile/v1/src/screens/FoldersScreen.tsx

@@ -1,7 +1,7 @@
 import { Ionicons } from '@expo/vector-icons';
 import { BottomSheetBackdrop, BottomSheetBackdropProps,BottomSheetModal, BottomSheetTextInput, BottomSheetView } from '@gorhom/bottom-sheet';
 import AsyncStorage from '@react-native-async-storage/async-storage';
-import { useIsFocused } from '@react-navigation/native';
+import { useFocusEffect } from '@react-navigation/native';
 import * as Haptics from 'expo-haptics';
 import { useRouter } from 'expo-router';
 import React, { useCallback,useEffect, useMemo, useRef, useState } from 'react';
@@ -107,10 +107,6 @@ export default function FoldersScreen() {
     };
   }, []);
 
-  // Check if screen is focused
-  const isFocused = useIsFocused();
-  const loadTimerRef = useRef<NodeJS.Timeout | null>(null);
-
   // Load folders data
   const loadFoldersData = useCallback(async (isRefresh = false) => {
     try {
@@ -180,23 +176,11 @@ export default function FoldersScreen() {
   }, [loadViewMode]);
 
   // Reload data when screen comes into focus
-  useEffect(() => {
-    if (isFocused) {
-      // Clear any pending load
-      if (loadTimerRef.current) {
-        clearTimeout(loadTimerRef.current);
-      }
-
-      // Load immediately
+  useFocusEffect(
+    useCallback(() => {
       loadFoldersData();
-    }
-
-    return () => {
-      if (loadTimerRef.current) {
-        clearTimeout(loadTimerRef.current);
-      }
-    };
-  }, [isFocused, loadFoldersData]);
+    }, [loadFoldersData])
+  );
 
   // Handle loading delay
   useEffect(() => {

apps/mobile/v1/src/screens/NotesListScreen.tsx

@@ -1,15 +1,22 @@
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { ActivityIndicator, Alert, Animated, FlatList, Keyboard, Pressable, RefreshControl, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+
+import { useUser } from '@clerk/clerk-expo';
 import { Ionicons } from '@expo/vector-icons';
-import { BottomSheetBackdrop, BottomSheetBackdropProps,BottomSheetModal, BottomSheetTextInput, BottomSheetView } from '@gorhom/bottom-sheet';
-import AsyncStorage from '@react-native-async-storage/async-storage';
+import {
+  BottomSheetBackdrop,
+  BottomSheetBackdropProps,
+  BottomSheetModal,
+  BottomSheetTextInput,
+  BottomSheetView,
+} from '@gorhom/bottom-sheet';
 import { useFocusEffect } from '@react-navigation/native';
-import { useUser } from '@clerk/clerk-expo';
+import AsyncStorage from '@react-native-async-storage/async-storage';
 import * as Haptics from 'expo-haptics';
-import React, { useCallback,useEffect, useMemo, useRef, useState } from 'react';
-import { ActivityIndicator, Alert, Animated, FlatList, Keyboard, Pressable, RefreshControl, StyleSheet, Text, TouchableOpacity, useWindowDimensions,View } from 'react-native';
 
-import { FOLDER_CARD, FOLDER_COLORS,NOTE_CARD, SECTION } from '../constants/ui';
-import { type Folder, type FolderCounts,type Note, useApiService } from '../services/api';
-import { decryptNote, isNoteEncrypted } from '../services/api/encryption';
+import { FOLDER_CARD, FOLDER_COLORS, NOTE_CARD, SECTION } from '../constants/ui';
+import { type Folder, type FolderCounts, type Note, useApiService } from '../services/api';
+import { decryptNote } from '../services/api/encryption';
 import { useTheme } from '../theme';
 
 interface RouteParams {
@@ -62,7 +69,6 @@ export default function NotesListScreen({ navigation, route, renderHeader, scrol
   const api = useApiService();
   const { user } = useUser();
   const { folderId, viewType, searchQuery } = route?.params || {};
-  const { height: windowHeight } = useWindowDimensions();
 
   const [notes, setNotes] = useState<Note[]>([]);
   const [subfolders, setSubfolders] = useState<Folder[]>([]);
@@ -71,6 +77,10 @@ export default function NotesListScreen({ navigation, route, renderHeader, scrol
   const [showLoading, setShowLoading] = useState(false);
   const [refreshing, setRefreshing] = useState(false);
 
+  // Track if notes have been loaded to prevent unnecessary refetch on navigation back
+  const hasLoadedRef = useRef(false);
+  const currentParamsRef = useRef<{ folderId?: string; viewType?: string; searchQuery?: string } | null>(null);
+
   // Performance tracking
   const screenFocusTime = useRef<number>(0);
   const notesLoadedTime = useRef<number>(0);
@@ -169,10 +179,29 @@ export default function NotesListScreen({ navigation, route, renderHeader, scrol
   // Load notes when screen focuses or params change
   useFocusEffect(
     React.useCallback(() => {
-      loadNotes();
-      loadViewMode();
-      // Reset scroll position when screen comes into focus
-      if (flatListRef.current) {
+      // Check if params have changed
+      const paramsChanged =
+        !currentParamsRef.current ||
+        currentParamsRef.current.folderId !== folderId ||
+        currentParamsRef.current.viewType !== viewType ||
+        currentParamsRef.current.searchQuery !== searchQuery;
+
+      // Determine if this is the first load
+      const isFirstLoad = !hasLoadedRef.current;
+
+      // Always reload when screen comes into focus
+      // Use refresh mode if not first load to avoid showing spinner
+      if (isFirstLoad || paramsChanged) {
+        loadNotes(); // Full load with spinner on first load or param change
+        loadViewMode();
+        currentParamsRef.current = { folderId, viewType, searchQuery };
+      } else {
+        // Silent refresh without spinner for subsequent focuses
+        loadNotes(true); // Pass true for isRefresh to skip loading state
+      }
+
+      // Reset scroll position when screen comes into focus (only if params changed)
+      if (paramsChanged && flatListRef.current) {
         flatListRef.current.scrollToOffset({ offset: 0, animated: false });
       }
       // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -298,6 +327,9 @@ export default function NotesListScreen({ navigation, route, renderHeader, scrol
           setLoading(false);
         }
 
+        // Mark that notes have been loaded
+        hasLoadedRef.current = true;
+
         // Decrypt remaining notes in background
         if (remaining.length > 0) {
           const encryptedRemaining = remaining.filter(note =>
@@ -331,6 +363,8 @@ export default function NotesListScreen({ navigation, route, renderHeader, scrol
         if (!isRefresh) {
           setLoading(false);
         }
+        // Mark that notes have been loaded
+        hasLoadedRef.current = true;
       }
 
       // Load subfolders and their counts in background (non-blocking)
@@ -383,6 +417,8 @@ export default function NotesListScreen({ navigation, route, renderHeader, scrol
       if (!isRefresh) {
         setLoading(false);
       }
+      // Mark as loaded even on error to prevent reload loop
+      hasLoadedRef.current = true;
     }
   };
 
@@ -470,10 +506,7 @@ export default function NotesListScreen({ navigation, route, renderHeader, scrol
       if (filterConfig.showStarredOnly && !note.starred) {
         return false;
       }
-      if (filterConfig.showHiddenOnly && !note.hidden) {
-        return false;
-      }
-      return true;
+      return !filterConfig.showHiddenOnly || note.hidden;
     });
 
     // Sort notes
@@ -883,7 +916,7 @@ export default function NotesListScreen({ navigation, route, renderHeader, scrol
         </View>
       </>
     );
-  }, [loading, renderHeader, viewType, subfolders, theme.colors, viewMode, filteredNotes.length, notes.length, hasActiveFilters, handleEmptyTrash, navigation, route?.params?.folderId]);
+  }, [loading, renderHeader, viewType, subfolders, theme.colors, theme.isDark, viewMode, filteredNotes.length, notes.length, hasActiveFilters, handleEmptyTrash, navigation, route?.params?.folderId]);
 
   // Render empty state
   const renderEmptyComponent = useCallback(() => {
@@ -1413,7 +1446,7 @@ const styles = StyleSheet.create({
     fontWeight: '400',
   },
   noteListDivider: {
-    height: StyleSheet.hairlineWidth,
+    height: 1,
     marginLeft: 0,
   },
   // Bottom sheet styles

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

@@ -24,7 +24,7 @@ export function createNotesApi(getToken: AuthTokenGetter, getUserId: () => strin
    */
   const invalidateCountsCache = () => {
     // Clear all counts caches (general and folder-specific)
-    apiCache.clearAll(); // This clears all caches including counts
+    apiCache.clearAll();
   };
 
   return {