fix chat jump/mark read/header issues (#28615)

Author: chrisnojima-zoom

shared/chat/conversation/list-area/hooks.tsx

@@ -12,7 +12,8 @@ export const useActions = (p: {conversationIDKey: T.Chat.ConversationIDKey}) =>
       logger.info('mark intially as read bail on not looking at this thread anymore?')
       return
     }
-    C.getConvoState(conversationIDKey).dispatch.markThreadAsRead()
+    // Force mark as read since this is triggered by navigation (user action)
+    C.getConvoState(conversationIDKey).dispatch.markThreadAsRead(true)
   }, [conversationIDKey])
 
   return {markInitiallyLoadedThreadAsRead}

shared/chat/conversation/list-area/index.desktop.tsx

@@ -222,35 +222,39 @@ const useScrolling = (p: {
     }
   }, [cleanupDebounced])
 
-  const initScrollRef = React.useRef(false)
   const [didFirstLoad, setDidFirstLoad] = React.useState(false)
 
-  // handle initial load scrolling only. Either scroll to bottom or scroll to centered
-  React.useLayoutEffect(() => {
-    if (!loaded) return
-    if (!initScrollRef.current) {
-      initScrollRef.current = true
-      if (!markedInitiallyLoaded) {
-        markedInitiallyLoaded = true
-        markInitiallyLoadedThreadAsRead()
-      }
+  // Ensure didFirstLoad is true whenever we're loaded (even if we skipped reload)
+  React.useEffect(() => {
+    if (loaded && !didFirstLoad) {
+      requestAnimationFrame(() => {
+        setDidFirstLoad(true)
+      })
+    }
+  }, [loaded, didFirstLoad])
 
-      if (centeredOrdinal) {
-        lockedToBottomRef.current = false
-        scrollToCentered()
-      } else {
-        scrollToBottom()
-      }
+  // Handle scrolling when loaded becomes true. Scroll to centered ordinal if present, else bottom
+  const prevLoadedRef = React.useRef(loaded)
+  React.useLayoutEffect(() => {
+    const justLoaded = loaded && !prevLoadedRef.current
+    prevLoadedRef.current = loaded
+    
+    if (!justLoaded) return
+
+    if (!markedInitiallyLoaded) {
+      markedInitiallyLoaded = true
+      markInitiallyLoadedThreadAsRead()
     }
 
-    requestAnimationFrame(() => {
-      setDidFirstLoad(true)
-    })
+    if (centeredOrdinal) {
+      lockedToBottomRef.current = false
+      scrollToCentered()
+    } else {
+      scrollToBottom()
+    }
   }, [
-    listRef,
     loaded,
     centeredOrdinal,
-    isLockedToBottom,
     markInitiallyLoadedThreadAsRead,
     scrollToBottom,
     scrollToCentered,
@@ -292,26 +296,27 @@ const useScrolling = (p: {
     // we want this to fire when the ordinals change
   }, [centeredOrdinal, ordinalsLength, isLockedToBottom, isMounted, listRef, firstOrdinal])
 
-  // Check to see if our centered ordinal has changed, and if so, scroll to it
-  const [lastCenteredOrdinal, setLastCenteredOrdinal] = React.useState(centeredOrdinal)
+  // Also handle centered ordinal changing while already loaded (e.g. from thread search results)
+  const prevCenteredOrdinal = React.useRef(centeredOrdinal)
+  const wasLoadedRef = React.useRef(loaded)
   React.useEffect(() => {
-    if (lastCenteredOrdinal === centeredOrdinal) return
+    const wasLoaded = wasLoadedRef.current
+    const changed = prevCenteredOrdinal.current !== centeredOrdinal
+    prevCenteredOrdinal.current = centeredOrdinal
+    wasLoadedRef.current = loaded
+    
+    // Only scroll if we were already loaded and ordinal changed
+    // (the load effect handles scrolling when loaded transitions to true)
+    if (!wasLoaded || !loaded || !changed) return
+    
     if (centeredOrdinal) {
       lockedToBottomRef.current = false
       scrollToCentered()
-    } else if (lastCenteredOrdinal && !centeredOrdinal && containsLatestMessage) {
+    } else if (containsLatestMessage) {
       lockedToBottomRef.current = true
       scrollToBottom()
     }
-    setLastCenteredOrdinal(centeredOrdinal)
-  }, [
-    centeredOrdinal,
-    scrollToCentered,
-    setLastCenteredOrdinal,
-    lastCenteredOrdinal,
-    containsLatestMessage,
-    scrollToBottom,
-  ])
+  }, [centeredOrdinal, loaded, containsLatestMessage, scrollToCentered, scrollToBottom])
 
   const {setScrollRef} = React.useContext(ScrollContext)
   React.useEffect(() => {

shared/chat/conversation/search.tsx

@@ -109,6 +109,8 @@ const useCommon = (ownProps: OwnProps) => {
     if (hasHits && !hadHitsRef.current) {
       hadHitsRef.current = true
       selectResult(0)
+    } else if (!hasHits) {
+      hadHitsRef.current = false
     }
   }, [hasHits, selectResult])
 

shared/chat/inbox-and-conversation-header.tsx

@@ -251,7 +251,7 @@ const Header2 = () => {
             />
             {description ? (
               <>
-                <Kb.Text type="BodySmall" style={styles.desc}>
+                <Kb.Text type="BodySmall" style={styles.descDot}>
                   &nbsp;•&nbsp;
                 </Kb.Text>
                 {description}
@@ -271,15 +271,17 @@ const Header2 = () => {
       <Kb.Box2
         direction="horizontal"
         style={styles.right}
-        fullHeight={!renderDescription}
+        fullHeight={true}
         gap="small"
         alignItems="flex-end"
         alignSelf="flex-end"
       >
-        <Kb.Box2 direction="vertical" style={styles.headerTitle}>
-          {topRow}
-          {bottomRow}
-        </Kb.Box2>
+        <Kb.BoxGrow2 style={{height: '100%'}}>
+          <Kb.Box2 direction="vertical" style={styles.headerTitle}>
+            {topRow}
+            {bottomRow}
+          </Kb.Box2>
+        </Kb.BoxGrow2>
         {rightIcons}
       </Kb.Box2>
     </Kb.Box2>
@@ -298,7 +300,15 @@ const styles = Kb.Styles.styleSheetCreate(
         width: '100%',
       },
       desc: {
-        ...Kb.Styles.platformStyles({isElectron: {...Kb.Styles.desktopStyles.windowDraggingClickable}}),
+        ...Kb.Styles.platformStyles({
+          isElectron: {...Kb.Styles.desktopStyles.windowDraggingClickable, width: '100%'},
+        }),
+        color: Kb.Styles.globalColors.black_50,
+      },
+      descDot: {
+        ...Kb.Styles.platformStyles({
+          isElectron: {...Kb.Styles.desktopStyles.windowDraggingClickable},
+        }),
         color: Kb.Styles.globalColors.black_50,
       },
       descriptionContainer: {
@@ -312,14 +322,15 @@ const styles = Kb.Styles.styleSheetCreate(
       descriptionTooltip: {alignItems: 'flex-start'},
       headerTitle: Kb.Styles.platformStyles({
         common: {
-          flexGrow: 1,
           paddingBottom: Kb.Styles.globalMargins.xtiny,
+          width: '100%',
         },
         isElectron: Kb.Styles.desktopStyles.windowDraggingClickable,
         isTablet: {flex: 1},
       }),
       left: Kb.Styles.platformStyles({
         common: {
+          flexShrink: 0,
           height: Kb.Styles.isTablet ? 36 : 32,
           width: Kb.Styles.globalStyles.mediumSubNavWidth,
         },

shared/constants/chat2/convostate.tsx

@@ -225,7 +225,7 @@ export interface ConvoState extends ConvoStore {
     loadNewerMessagesDueToScroll: (numOrdinals: number) => void
     loadMoreMessages: DebouncedFunc<(p: LoadMoreMessagesParams) => void>
     loadNextAttachment: (from: T.Chat.Ordinal, backInTime: boolean) => Promise<T.Chat.Ordinal>
-    markThreadAsRead: (unreadLineMessageID?: number) => void
+    markThreadAsRead: (force?: boolean) => void
     markTeamAsRead: (teamID: T.Teams.TeamID) => void
     messageAttachmentNativeSave: (ordinal: T.Chat.Ordinal) => void
     messageAttachmentNativeShare: (ordinal: T.Chat.Ordinal) => void
@@ -1594,6 +1594,15 @@ const createSlice: Z.ImmerStateCreator<ConvoState> = (set, get) => {
               })
             }
           }
+
+          // Force mark as read for user-initiated navigations (not auto-selection by service)
+          const isUserNavigation =
+            reason !== 'findNewestConversation' &&
+            reason !== 'findNewestConversationFromLayout' &&
+            reason !== 'tab selected'
+          if (isUserNavigation) {
+            get().dispatch.markThreadAsRead(true)
+          }
         }
 
         const pagination = messageIDControl ? null : scrollDirectionToPagination(sd, numberOfMessagesToLoad)
@@ -1743,7 +1752,7 @@ const createSlice: Z.ImmerStateCreator<ConvoState> = (set, get) => {
       }
       C.ignorePromise(f())
     },
-    markThreadAsRead: () => {
+    markThreadAsRead: force => {
       const f = async () => {
         if (!C.useConfigState.getState().loggedIn) {
           logger.info('mark read bail on not logged in')
@@ -1754,7 +1763,7 @@ const createSlice: Z.ImmerStateCreator<ConvoState> = (set, get) => {
           logger.info('mark read bail on no selected conversation')
           return
         }
-        if (!Common.isUserActivelyLookingAtThisThread(conversationIDKey)) {
+        if (!force && !Common.isUserActivelyLookingAtThisThread(conversationIDKey)) {
           logger.info('mark read bail on not looking at this thread')
           return
         }