fix(mobile): streamline themes and improve UI polish

Author: batalabs

apps/mobile/v1/src/components/settings/UsageBottomSheet.tsx

@@ -57,6 +57,7 @@ export function UsageBottomSheet({ sheetRef, snapPoints }: UsageBottomSheetProps
         {...props}
         disappearsOnIndex={-1}
         appearsOnIndex={0}
+        opacity={0.3}
       />
     ),
     []

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

@@ -30,6 +30,7 @@ export const CreateFolderSheet = forwardRef<BottomSheetModal, CreateFolderSheetP
           {...props}
           disappearsOnIndex={-1}
           appearsOnIndex={0}
+          opacity={0.3}
         />
       ),
       []

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

@@ -38,7 +38,7 @@ export const FilterSortSheet = forwardRef<BottomSheetModal, FilterSortSheetProps
           {...props}
           disappearsOnIndex={-1}
           appearsOnIndex={0}
-          opacity={0.5}
+          opacity={0.3}
           pressBehavior="close"
         />
       ),

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

@@ -50,6 +50,7 @@ export const NoteActionsSheet = forwardRef<NoteActionsSheetRef, NoteActionsSheet
           {...props}
           disappearsOnIndex={-1}
           appearsOnIndex={0}
+          opacity={0.3}
         />
       ),
       []

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

@@ -14,6 +14,7 @@ interface NotesHeaderProps {
   onFilterPress: () => void;
   onCreateNotePress: () => void;
   onEmptyTrashPress: () => void;
+  createNoteButtonRef?: React.RefObject<View>;
 }
 
 export const NotesHeader: React.FC<NotesHeaderProps> = ({
@@ -25,6 +26,7 @@ export const NotesHeader: React.FC<NotesHeaderProps> = ({
   onFilterPress,
   onCreateNotePress,
   onEmptyTrashPress,
+  createNoteButtonRef,
 }) => {
   const theme = useTheme();
 
@@ -68,7 +70,7 @@ export const NotesHeader: React.FC<NotesHeaderProps> = ({
           </View>
         )
       ) : (
-        <View style={styles.buttonWrapper}>
+        <View style={styles.buttonWrapper} ref={createNoteButtonRef} collapsable={false}>
           <Pressable
             style={[styles.createNoteButton, { backgroundColor: theme.isDark ? theme.colors.card : theme.colors.secondary, borderColor: theme.colors.border, flexDirection: 'row', alignItems: 'center' }]}
             onPress={onCreateNotePress}

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

@@ -10,6 +10,7 @@ import { useFocusEffect } from '@react-navigation/native';
 import { FlashList, type FlashList as FlashListType } from '@shopify/flash-list';
 import * as Haptics from 'expo-haptics';
 import { useRouter } from 'expo-router';
+import { SquarePen } from 'lucide-react-native';
 
 import { type Folder, type Note, useApiService } from '@/src/services/api';
 import { useTheme } from '@/src/theme';
@@ -27,8 +28,6 @@ import { useNotesFiltering } from './useNotesFiltering';
 import { useNotesLoader } from './useNotesLoader';
 
 // Constants for FAB scroll behavior
-const FAB_SCROLL_THRESHOLD_START = 280; // Start showing FAB when scrolled past this
-const FAB_SCROLL_THRESHOLD_END = 320;   // Fully visible at this scroll position
 const FAB_ANIMATION_DISTANCE = 20;      // Distance to slide up during animation
 
 interface RouteParams {
@@ -101,24 +100,62 @@ export default function NotesList({ navigation, route, renderHeader, scrollY: pa
   const filterSortSheetRef = useRef<BottomSheetModal>(null);
   const noteActionsSheetRef = useRef<NoteActionsSheetRef>(null);
   const flatListRef = useRef<FlashListType<Note>>(null);
+  const createNoteButtonRef = useRef<View>(null);
 
   // Scroll tracking for animated divider (use parent's scrollY if provided)
   const localScrollY = useRef(new Animated.Value(0)).current;
   const scrollY = parentScrollY || localScrollY;
 
-  // Calculate FAB visibility based on scroll position
-  // Show FAB when scrolled past the header
-  const fabOpacity = scrollY.interpolate({
-    inputRange: [FAB_SCROLL_THRESHOLD_START, FAB_SCROLL_THRESHOLD_END],
-    outputRange: [0, 1],
-    extrapolate: 'clamp',
-  });
+  // Track if create note button is off screen
+  const [createNoteButtonY, setCreateNoteButtonY] = useState(0);
+  const [isCreateNoteButtonOffScreen, setIsCreateNoteButtonOffScreen] = useState(false);
 
-  const fabTranslateY = scrollY.interpolate({
-    inputRange: [FAB_SCROLL_THRESHOLD_START, FAB_SCROLL_THRESHOLD_END],
-    outputRange: [FAB_ANIMATION_DISTANCE, 0],
-    extrapolate: 'clamp',
-  });
+  // Calculate FAB visibility based on whether Create Note button is off screen
+  const fabOpacity = useRef(new Animated.Value(0)).current;
+  const fabTranslateY = useRef(new Animated.Value(FAB_ANIMATION_DISTANCE)).current;
+
+  // Update FAB visibility when button goes off screen
+  useEffect(() => {
+    Animated.parallel([
+      Animated.timing(fabOpacity, {
+        toValue: isCreateNoteButtonOffScreen ? 1 : 0,
+        duration: 200,
+        useNativeDriver: true,
+      }),
+      Animated.timing(fabTranslateY, {
+        toValue: isCreateNoteButtonOffScreen ? 0 : FAB_ANIMATION_DISTANCE,
+        duration: 200,
+        useNativeDriver: true,
+      }),
+    ]).start();
+  }, [isCreateNoteButtonOffScreen]);
+
+  // Measure create note button position on mount and layout changes
+  useEffect(() => {
+    if (createNoteButtonRef.current) {
+      createNoteButtonRef.current.measureInWindow((x, y, width, height) => {
+        setCreateNoteButtonY(y + height);
+      });
+    }
+  }, [notes.length, subfolders.length]);
+
+  // Check if button is off screen based on scroll position
+  useEffect(() => {
+    const listenerId = scrollY.addListener(({ value }) => {
+      if (createNoteButtonY > 0) {
+        // Button is off screen when its bottom position is above the top of the screen
+        // Add a small buffer (50px) to trigger slightly before it's completely gone
+        const isOffScreen = value > createNoteButtonY - 100;
+        if (isOffScreen !== isCreateNoteButtonOffScreen) {
+          setIsCreateNoteButtonOffScreen(isOffScreen);
+        }
+      }
+    });
+
+    return () => {
+      scrollY.removeListener(listenerId);
+    };
+  }, [scrollY, createNoteButtonY, isCreateNoteButtonOffScreen]);
 
   // Track last optimistic update to prevent immediate reload from overwriting it
   const lastOptimisticUpdateRef = useRef<number>(0);
@@ -620,6 +657,7 @@ export default function NotesList({ navigation, route, renderHeader, scrollY: pa
           onFilterPress={() => filterSortSheetRef.current?.present()}
           onCreateNotePress={() => navigation?.navigate('CreateNote', { folderId: route?.params?.folderId })}
           onEmptyTrashPress={handleEmptyTrash}
+          createNoteButtonRef={createNoteButtonRef}
         />
       </>
     );
@@ -722,7 +760,7 @@ export default function NotesList({ navigation, route, renderHeader, scrollY: pa
             onPress={() => navigation?.navigate('CreateNote', { folderId: route?.params?.folderId })}
             android_ripple={{ color: 'rgba(255, 255, 255, 0.3)', radius: 20 }}
           >
-            <Ionicons name="add" size={20} color={theme.colors.primaryForeground} />
+            <SquarePen size={20} color={theme.colors.primaryForeground} />
           </Pressable>
         </Animated.View>
       )}

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

@@ -64,6 +64,7 @@ export default function FolderNotesScreen({ folderId, folderName, viewType }: Fo
         {...props}
         disappearsOnIndex={-1}
         appearsOnIndex={0}
+        opacity={0.3}
       />
     ),
     []

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

@@ -90,6 +90,7 @@ export default function HomeScreen() {
         {...props}
         disappearsOnIndex={-1}
         appearsOnIndex={0}
+        opacity={0.3}
       />
     ),
     []

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

@@ -77,16 +77,20 @@ export default function SettingsScreen({ onLogout }: Props) {
   const usageSnapPoints = useMemo(() => ['50%'], []);
   const cachePreferenceSnapPoints = useMemo(() => ['45%'], []);
 
-  // Backdrop component
+  // Backdrop component with theme-aware styling
   const renderBackdrop = useCallback(
     (props: BottomSheetBackdropProps) => (
       <BottomSheetBackdrop
         {...props}
         disappearsOnIndex={-1}
         appearsOnIndex={0}
+        opacity={0.3}
+        style={{
+          backgroundColor: theme.isDark ? '#000000' : '#000000',
+        }}
       />
     ),
-    []
+    [theme.isDark]
   );
 
 

apps/mobile/v1/src/theme/index.tsx

@@ -29,17 +29,17 @@ export const theme = {
       ring: '#b5b5b5',
     },
     dark: {
-      background: '#252525',
+      background: '#0a0a0a',
       foreground: '#fcfcfc',
-      card: '#353535',
+      card: '#1a1a1a',
       cardForeground: '#fcfcfc',
       primary: '#ebebeb',
-      primaryForeground: '#353535',
-      secondary: '#454545',
+      primaryForeground: '#1a1a1a',
+      secondary: '#2a2a2a',
       secondaryForeground: '#fcfcfc',
-      muted: '#454545',
+      muted: '#2a2a2a',
       mutedForeground: '#b5b5b5',
-      accent: '#454545',
+      accent: '#2a2a2a',
       accentForeground: '#fcfcfc',
       destructive: '#b91c1c',
       destructiveForeground: '#fcfcfc',