Merge pull request #3775 from tloncorp/lb/misc-fixes

native: a few ChatList fixes

apps/tlon-mobile/src/components/AuthenticatedApp.tsx

@@ -6,6 +6,7 @@ import { ZStack } from '@tloncorp/ui';
 import { useEffect } from 'react';
 
 import { useShip } from '../contexts/ship';
+import useAppForegrounded from '../hooks/useAppForegrounded';
 import { useCurrentUserId } from '../hooks/useCurrentUser';
 import { useDeepLinkListener } from '../hooks/useDeepLinkListener';
 import useNotificationListener, {
@@ -44,6 +45,10 @@ function AuthenticatedApp({
     sync.syncStart();
   }, [currentUserId, ship, shipUrl]);
 
+  useAppForegrounded(() => {
+    sync.syncUnreads(sync.SyncPriority.High);
+  });
+
   return (
     <ZStack flex={1}>
       <RootStack />

apps/tlon-mobile/src/hooks/useAppForegrounded.ts

@@ -0,0 +1,30 @@
+import { useCallback, useEffect, useState } from 'react';
+import { AppState, AppStateStatus } from 'react-native';
+
+const useAppForegrounded = (callback: (() => void) | (() => Promise<void>)) => {
+  const [appState, setAppState] = useState(AppState.currentState);
+
+  const handleAppStateChange = useCallback(
+    (nextAppState: AppStateStatus) => {
+      if (appState.match(/inactive|background/) && nextAppState === 'active') {
+        // App has come to the foreground
+        callback();
+      }
+      setAppState(nextAppState);
+    },
+    [appState, callback]
+  );
+
+  useEffect(() => {
+    const subscription = AppState.addEventListener(
+      'change',
+      handleAppStateChange
+    );
+
+    return () => {
+      subscription.remove();
+    };
+  }, [callback, handleAppStateChange]);
+};
+
+export default useAppForegrounded;

apps/tlon-mobile/src/screens/ChatListScreen.tsx

@@ -83,7 +83,6 @@ export default function ChatListScreen(
 
   useFocusEffect(
     useCallback(() => {
-      store.syncUnreads(store.SyncPriority.High);
       store.syncPinnedItems(store.SyncPriority.High);
     }, [])
   );

packages/ui/src/components/ChatList.tsx

@@ -165,6 +165,7 @@ export function ChatList({
     {
       gap: '$s',
       paddingHorizontal: '$l',
+      paddingBottom: 100, // bottom nav height + some cushion
     },
     { resolveValues: 'value' }
   ) as StyleProp<ViewStyle>;