From 68873c0744e54a101437e75ca86b828e173704a2 Mon Sep 17 00:00:00 2001
From: ~latter-bolden <brian@tlon.io>
Date: Fri, 19 Jul 2024 10:02:19 -0400
Subject: [PATCH 1/2] refetch unreads less enthusiastically

---
 .../src/components/AuthenticatedApp.tsx       |  5 ++++
 .../src/hooks/useAppForegrounded.ts           | 30 +++++++++++++++++++
 .../src/screens/ChatListScreen.tsx            |  1 -
 3 files changed, 35 insertions(+), 1 deletion(-)
 create mode 100644 apps/tlon-mobile/src/hooks/useAppForegrounded.ts

diff --git a/apps/tlon-mobile/src/components/AuthenticatedApp.tsx b/apps/tlon-mobile/src/components/AuthenticatedApp.tsx
index 5b5170e4d2..e963bf75ab 100644
--- a/apps/tlon-mobile/src/components/AuthenticatedApp.tsx
+++ b/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 />
diff --git a/apps/tlon-mobile/src/hooks/useAppForegrounded.ts b/apps/tlon-mobile/src/hooks/useAppForegrounded.ts
new file mode 100644
index 0000000000..43531e4e29
--- /dev/null
+++ b/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;
diff --git a/apps/tlon-mobile/src/screens/ChatListScreen.tsx b/apps/tlon-mobile/src/screens/ChatListScreen.tsx
index f461ac1a26..82d7a7af5d 100644
--- a/apps/tlon-mobile/src/screens/ChatListScreen.tsx
+++ b/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);
     }, [])
   );

From c346d062ef10ce93932a85a65db5d697f555e102 Mon Sep 17 00:00:00 2001
From: ~latter-bolden <brian@tlon.io>
Date: Fri, 19 Jul 2024 13:11:21 -0400
Subject: [PATCH 2/2] prevent bottom of chat list from being hidden

---
 packages/ui/src/components/ChatList.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/ui/src/components/ChatList.tsx b/packages/ui/src/components/ChatList.tsx
index a9f945df5c..98241a898a 100644
--- a/packages/ui/src/components/ChatList.tsx
+++ b/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>;