@droppii-org/chat-mobile 0.2.109 → 0.2.110

package/src/screens/chat-detail/ChatListLegend.tsx

@@ -63,7 +63,6 @@ import { messageStyles } from './legend/messageTypes';
 import { MessageType, PeerType } from '@droppii/openim-rn-client-sdk';
 import type { MessageItem } from '@droppii/openim-rn-client-sdk';
 import { useUserStore } from '../../store';
-import { ChatMessageAPI } from '../../services';
 import { resolveImageDisplayDims } from '../../components/messages/imageMessage';
 import ChatImageDimens, {
   CHAT_IMAGE_VIEW_SOURCE,
@@ -74,6 +73,16 @@ import { useGuardedPress } from '../../hooks/useGuardedPress';
 import { useDismissKeyboardFirst } from '../../hooks/useDismissKeyboardFirst';
 import { useTimelinePressGuard } from '../../context/TimelinePressGuardContext';
 import { perfMark } from '../../utils/perf-marker';
+import { useMarkConversationRead } from './hooks/useMarkConversationRead';
+import { createUnreadMarkReadGate } from './hooks/createUnreadMarkReadGate';
+import { useUnreadIndicatorInList } from './hooks/useUnreadIndicatorInList';
+import { LegendChatUnreadDivider } from './legend/LegendChatUnreadDivider';
+import { LegendChatUnreadButton } from './legend/LegendChatUnreadButton';
+
+// Safety net: a jump that never reports back can't keep the pill logic and
+// the window-reload edge stuck. Long enough for a slow 3-call search plus the
+// unread jump's older-history paging.
+const JUMP_IN_FLIGHT_TIMEOUT_MS = 20000;
 
 // Cluster spacing: a wide gap after the message that closes a cluster, a tight
 // one between messages inside it. These override the flat margin on the row
@@ -146,6 +155,13 @@ interface ChatListLegendInternalProps extends ChatListProps {
   // While true the content is non-hittable: taps only dismiss the panel.
   isComposerPanelOpen?: boolean;
   onDismissAreaScrollBeginDrag?: () => void;
+  // Unread-indicator session of the owning ChatDetail (useUnreadIndicator):
+  // the token as state (selectors) and as a ref (listeners, async code).
+  unreadToken?: number | null;
+  unreadTokenRef?: RefObject<number | null>;
+  // Deeplink target the screen was opened on (or re-pointed to): the first
+  // list load for it never marks read.
+  deeplinkTargetId?: string;
 }
 
 export const ChatListLegend = memo(
@@ -170,6 +186,9 @@ export const ChatListLegend = memo(
     dismissAreaTouchProps,
     isComposerPanelOpen = false,
     onDismissAreaScrollBeginDrag,
+    unreadToken = null,
+    unreadTokenRef,
+    deeplinkTargetId,
   }: ChatListLegendInternalProps) => {
     const currentUserId = useUserStore((s) => s.user?.userID);
     const windowWidth = useWindowDimensions().width;
@@ -291,6 +310,76 @@ export const ChatListLegend = memo(
     const { applicationType } = useChatContext();
     const searchMessages = useMessageStore((s) => s.searchMessages);
 
+    // True once the list has loaded (onLoad); false while it's remounting
+    // under the spinner. Read by the mark-read policy.
+    const listLoadedRef = useRef(false);
+    // A ScrollToMessage jump is running (in-window scroll or search fallback).
+    const jumpInFlightRef = useRef(false);
+    // Bumped on every ScrollToMessage, to tell whether a search re-emitted.
+    const scrollEventSeqRef = useRef(0);
+    const jumpInFlightTimerRef = useRef<ReturnType<typeof setTimeout> | null>(
+      null
+    );
+    const setJumpInFlight = useCallback((inFlight: boolean) => {
+      jumpInFlightRef.current = inFlight;
+      if (jumpInFlightTimerRef.current) {
+        clearTimeout(jumpInFlightTimerRef.current);
+        jumpInFlightTimerRef.current = null;
+      }
+      if (!inFlight) return;
+      jumpInFlightTimerRef.current = setTimeout(() => {
+        jumpInFlightTimerRef.current = null;
+        jumpInFlightRef.current = false;
+      }, JUMP_IN_FLIGHT_TIMEOUT_MS);
+    }, []);
+
+    const markReadGate = useMemo(
+      () =>
+        unreadTokenRef ? createUnreadMarkReadGate(unreadTokenRef) : undefined,
+      [unreadTokenRef]
+    );
+    const { requestMarkRead, flushMarkRead } = useMarkConversationRead({
+      conversationId,
+      isAtBottomRef,
+      listLoadedRef,
+      hasMoreNew: !!hasMoreNew,
+      deeplinkTargetId,
+      gate: markReadGate,
+    });
+
+    // A session that begins already open (bot thread: no lookup) has no
+    // resolve transition for the gate to report, so retry a pending
+    // mark-read when it lands. Flush-only: landing is not a trigger.
+    useEffect(() => {
+      if (unreadToken != null) flushMarkRead('gate-open');
+    }, [unreadToken, flushMarkRead]);
+
+    const {
+      unreadAnchorRowId,
+      isPillVisible,
+      viewabilityConfig,
+      handleViewableItemsChanged,
+      checkAnchorSeen,
+      markPositionSettled,
+      jumpToFirstUnread,
+    } = useUnreadIndicatorInList({
+      messages,
+      unreadToken,
+      isLoading: !!isLoading,
+      hasMoreOld: !!hasMoreOld,
+      moreOldLoading: !!moreOldLoading,
+      onLoadMoreOld,
+      isBotConversation,
+      listRef,
+      jumpInFlightRef,
+      setJumpInFlight,
+    });
+    // With a composer panel open the tap only dismisses it (DROPPII-30577).
+    const onPressUnreadPill = useGuardedPress(
+      jumpToFirstUnread,
+      shouldSwallowPress
+    );
+
     const handleMessageLongPress = useCallback(
       (messageId: string, message: MessageItem) => {
         if (shouldSwallowPress()) return;
@@ -372,9 +461,14 @@ export const ChatListLegend = memo(
             );
           }
 
+          // The first unread row always carries its time label, under the
+          // divider.
+          const isUnreadAnchor = messageId === unreadAnchorRowId;
+
           return (
             <>
-              {(dayStart || timeBreak) && (
+              {isUnreadAnchor && <LegendChatUnreadDivider />}
+              {(isUnreadAnchor || dayStart || timeBreak) && (
                 <LegendChatDay createdAt={createdAt} />
               )}
               <KContainer.View
@@ -449,6 +543,7 @@ export const ChatListLegend = memo(
         highlightedId,
         revealedMessageId,
         handleMessagePress,
+        unreadAnchorRowId,
       ]
     );
 
@@ -490,6 +585,9 @@ export const ChatListLegend = memo(
         // Both separators add chrome above the row that this function does not
         // account for, and a resolved size is never re-measured.
         if (messageData?.dayStart || messageData?.timeBreak) return undefined;
+        // Same for the unread divider. A late anchor changes this function's
+        // identity, which makes LegendList re-measure the row.
+        if (messageId === unreadAnchorRowId) return undefined;
 
         // Incoming rows in a group chat carry an avatar column and a sender
         // name whose height this function cannot predict — measure them.
@@ -557,6 +655,7 @@ export const ChatListLegend = memo(
         isBotConversation,
         conversationFlow?.flowCurrentStep,
         windowWidth,
+        unreadAnchorRowId,
       ]
     );
 
@@ -571,6 +670,7 @@ export const ChatListLegend = memo(
         lastMessageId,
         highlightedId,
         revealedMessageId,
+        unreadAnchorRowId,
       }),
       [
         messageDataMap,
@@ -578,6 +678,7 @@ export const ChatListLegend = memo(
         lastMessageId,
         highlightedId,
         revealedMessageId,
+        unreadAnchorRowId,
       ]
     );
 
@@ -601,8 +702,10 @@ export const ChatListLegend = memo(
 
     const handleScrollBeginDrag = useCallback(() => {
       hasUserScrolledRef.current = true;
+      // The user has taken over: whatever is on screen now is real.
+      markPositionSettled();
       onDismissAreaScrollBeginDrag?.();
-    }, [onDismissAreaScrollBeginDrag]);
+    }, [onDismissAreaScrollBeginDrag, markPositionSettled]);
 
     const handleScroll = useCallback(
       (e: any) => {
@@ -635,6 +738,7 @@ export const ChatListLegend = memo(
         if (
           grew &&
           distanceFromEnd > 1 &&
+          !jumpInFlightRef.current &&
           Date.now() < anchorToEndUntilRef.current
         ) {
           scrollMessageToEnd({ animated: true, closeKeyboard: false });
@@ -646,19 +750,22 @@ export const ChatListLegend = memo(
         }
 
         scrollDebounceRef.current = setTimeout(() => {
-          if (isAtBottomRef.current !== isAtBottom) {
+          const wasAtBottom = isAtBottomRef.current;
+          if (wasAtBottom !== isAtBottom) {
             isAtBottomRef.current = isAtBottom;
             buttonOpacity.value = withTiming(
               isAtBottom ? 0 : 1,
               BUTTON_FADE_CONFIG
             );
           }
-          if (isAtBottom) {
-            ChatMessageAPI.markConversationAsRead(conversationId || '');
-          }
+          // Edge-triggered: each call is a server round-trip since rc43.
+          if (isAtBottom && !wasAtBottom) requestMarkRead('reached-bottom');
+          // Covers slow scrolling while the anchor row stays viewable (no
+          // viewability change event). Cheap unless that row is viewable.
+          checkAnchorSeen();
         }, 50);
       },
-      [buttonOpacity, conversationId, scrollMessageToEnd]
+      [buttonOpacity, scrollMessageToEnd, requestMarkRead, checkAnchorSeen]
     );
 
     const handleScrollToBottom = useCallback(() => {
@@ -675,7 +782,14 @@ export const ChatListLegend = memo(
       buttonOpacity.value = withTiming(0, BUTTON_FADE_CONFIG);
       isAtBottomRef.current = true;
       setShowBadge(false);
-    }, [hasMoreNew, onLoadMoreOld, scrollMessageToEnd, buttonOpacity]);
+      requestMarkRead('fab');
+    }, [
+      hasMoreNew,
+      onLoadMoreOld,
+      scrollMessageToEnd,
+      buttonOpacity,
+      requestMarkRead,
+    ]);
 
     // `paddingBottom` here replaces the one `styles.content` sets via
     // `paddingVertical`, so the base spacing has to be added back or the last
@@ -882,9 +996,30 @@ export const ChatListLegend = memo(
     // sent or received). Skipped while prepending old history or scrolled
     // away from the bottom. `moreOldLoading` is read via ref, not a
     // dependency, so its own start/finish toggle doesn't re-run this.
+    const prevLoadingRef = useRef(!!isLoading);
     useEffect(() => {
+      const wasLoading = prevLoadingRef.current;
+      prevLoadingRef.current = !!isLoading;
+      // Keep the previous id through the spinner.
+      if (isLoading) return;
       const previousLastMessageId = previousLastMessageIdRef.current;
       previousLastMessageIdRef.current = lastMessageId;
+      if (previousLastMessageId === lastMessageId) return;
+      // An id change landing with the spinner ending is a window replace
+      // (searchMessages / initial fetch), not a new message. Re-aiming at the
+      // end here would yank a jump back to the bottom mid-scroll.
+      if (wasLoading) return;
+
+      // Outside `shouldFire`, so it also counts during an old-history prepend.
+      // Not for the first id: that's whatever window the list mounted with.
+      const last = messagesRef.current[messagesRef.current.length - 1];
+      if (
+        previousLastMessageId !== null &&
+        last &&
+        last.sendID !== currentUserId
+      ) {
+        requestMarkRead('incoming');
+      }
 
       // null → a real id is the initial fetch landing (initialScrollAtEnd +
       // handleListLoad's job), not a new message; a real id → a different
@@ -899,15 +1034,69 @@ export const ChatListLegend = memo(
 
       anchorToEndUntilRef.current = Date.now() + NEW_MESSAGE_ANCHOR_MS;
       scrollMessageToEnd({ animated: true, closeKeyboard: false });
-    }, [lastMessageId, scrollMessageToEnd]);
+    }, [
+      lastMessageId,
+      isLoading,
+      scrollMessageToEnd,
+      currentUserId,
+      requestMarkRead,
+    ]);
+
+    // A divider appearing late grows the content under a list resting at the
+    // end, pushing the last message behind the composer. Re-arm the existing
+    // grow → re-aim path in handleScroll; no new scroll call.
+    const prevUnreadRowIdRef = useRef<string | null>(null);
+    useEffect(() => {
+      const prev = prevUnreadRowIdRef.current;
+      prevUnreadRowIdRef.current = unreadAnchorRowId;
+      // Only for a list genuinely resting at the true end — never under a
+      // jump (a deeplink window lands at its end before scrolling away).
+      if (
+        !prev &&
+        unreadAnchorRowId &&
+        isAtBottomRef.current &&
+        !jumpInFlightRef.current &&
+        !hasMoreNew &&
+        listLoadedRef.current
+      ) {
+        anchorToEndUntilRef.current = Date.now() + NEW_MESSAGE_ANCHOR_MS;
+      }
+    }, [unreadAnchorRowId, hasMoreNew]);
+
+    // The list unmounts under the spinner; `handleListLoad` handles the
+    // remount.
+    useEffect(() => {
+      if (isLoading) listLoadedRef.current = false;
+    }, [isLoading]);
 
     const handleListLoad = useCallback(() => {
-      if (hasCorrectedInitialPaddingRef.current) return;
+      // Set on every list mount, before the one-shot below.
+      listLoadedRef.current = true;
+      if (hasCorrectedInitialPaddingRef.current) {
+        // A remount after a reload. One that isn't a jump (FAB on a
+        // `hasMoreNew` window, a failed search) lands at the end via
+        // `initialScrollAtEnd`; a jump owns its own landing.
+        requestAnimationFrame(markPositionSettled);
+        if (!jumpInFlightRef.current) {
+          isAtBottomRef.current = true;
+          buttonOpacity.value = withTiming(0, BUTTON_FADE_CONFIG);
+          requestMarkRead('window-reload');
+        }
+        return;
+      }
       hasCorrectedInitialPaddingRef.current = true;
       perfMark('history_list_loaded');
 
-      scrollMessageToEnd({ animated: false, closeKeyboard: false });
-    }, [scrollMessageToEnd]);
+      scrollMessageToEnd({ animated: false, closeKeyboard: false }).finally(
+        () => requestAnimationFrame(markPositionSettled)
+      );
+      requestMarkRead('list-load');
+    }, [
+      scrollMessageToEnd,
+      markPositionSettled,
+      requestMarkRead,
+      buttonOpacity,
+    ]);
 
     useEffect(() => {
       const bottomSubscription = DeviceEventEmitter.addListener(
@@ -917,44 +1106,105 @@ export const ChatListLegend = memo(
 
       const subscription = DeviceEventEmitter.addListener(
         ChatEvent.ScrollToMessage,
-        ({ clientMessageId }: ScrollToMessagePayload) => {
+        ({
+          clientMessageId,
+          highlight = true,
+          viewPosition = 0.5,
+          viewOffset,
+          exitOnUnavailable,
+          reemitAfterSearch,
+          fromSearch,
+        }: ScrollToMessagePayload) => {
+          scrollEventSeqRef.current += 1;
+          // Not in the window: load one around the target.
+          const search = () => {
+            // Already the post-search emit: don't search again (loop guard).
+            if (fromSearch) {
+              setJumpInFlight(false);
+              return;
+            }
+            // The window replace is not "at bottom": without this the
+            // lastMessageId effect and the grow re-aim yank the jump back to
+            // the end.
+            isAtBottomRef.current = false;
+            // Kept in step with the ref: the scroll handler only fades the
+            // button on a change, and it would see none from here on.
+            buttonOpacity.value = withTiming(1, BUTTON_FADE_CONFIG);
+            anchorToEndUntilRef.current = 0;
+            setJumpInFlight(true);
+            const seq = scrollEventSeqRef.current;
+            searchMessages({
+              applicationType,
+              conversationId,
+              startClientMsgId: clientMessageId,
+              scrollOptions: {
+                highlight,
+                viewPosition,
+                viewOffset,
+                exitOnUnavailable,
+                reemitAfterSearch,
+              },
+            }).finally(() => {
+              // Finished without re-emitting (search failed): nothing will
+              // land, so release the flag now rather than after the timeout.
+              // With `reemitAfterSearch: false` the caller owns the landing.
+              if (
+                reemitAfterSearch !== false &&
+                scrollEventSeqRef.current === seq
+              ) {
+                setJumpInFlight(false);
+              }
+            });
+          };
+
+          // Same key as `keyExtractor`, so a server-id-only row is found too.
           const index = messagesRef.current.findIndex(
-            (m) => m.clientMsgID === clientMessageId
+            (m) => (m.clientMsgID || m.serverMsgID) === clientMessageId
           );
-
-          if (index >= 0) {
-            try {
-              listRef.current
-                ?.scrollToIndex({
-                  index,
-                  animated: true,
-                  viewPosition: 0.5,
-                })
-                .finally(() => {
-                  if (highlightTimerRef.current)
-                    clearTimeout(highlightTimerRef.current);
-                  setHighlightedId(clientMessageId);
-                  highlightTimerRef.current = setTimeout(
-                    () => setHighlightedId(null),
-                    5000
-                  );
-                });
-            } catch {
-              // scrollToIndex throws if item not rendered yet — force refetch messages
-              searchMessages({
-                applicationType,
-                conversationId,
-                startClientMsgId: clientMessageId,
-              });
-            }
+          if (index < 0) {
+            search();
             return;
           }
 
-          searchMessages({
-            applicationType,
-            conversationId,
-            startClientMsgId: clientMessageId,
-          });
+          try {
+            setJumpInFlight(true);
+            // A pending re-aim at the end would pull the jump back down.
+            anchorToEndUntilRef.current = 0;
+            const scrollToTarget = () =>
+              listRef.current?.scrollToIndex({
+                index,
+                animated: true,
+                viewPosition,
+                viewOffset,
+              }) ?? Promise.resolve();
+            scrollToTarget()
+              // An exact landing (`viewOffset`, the unread jump): the first
+              // pass aims with estimated sizes for the rows above, which
+              // undershoots by their error (measured ~250dp over ~20 rows)
+              // and MVCP then holds that spot. Re-aim once they're measured.
+              .then(() =>
+                viewOffset == null
+                  ? undefined
+                  : new Promise<void>((resolve) =>
+                      requestAnimationFrame(() => resolve())
+                    ).then(scrollToTarget)
+              )
+              .finally(() => {
+                setJumpInFlight(false);
+                markPositionSettled();
+                if (!highlight) return;
+                if (highlightTimerRef.current)
+                  clearTimeout(highlightTimerRef.current);
+                setHighlightedId(clientMessageId);
+                highlightTimerRef.current = setTimeout(
+                  () => setHighlightedId(null),
+                  5000
+                );
+              });
+          } catch {
+            // scrollToIndex throws if item not rendered yet — force refetch messages
+            search();
+          }
         }
       );
 
@@ -968,8 +1218,20 @@ export const ChatListLegend = memo(
       conversationId,
       handleScrollToBottom,
       listRef,
+      setJumpInFlight,
+      markPositionSettled,
+      buttonOpacity,
     ]);
 
+    useEffect(
+      () => () => {
+        if (jumpInFlightTimerRef.current) {
+          clearTimeout(jumpInFlightTimerRef.current);
+        }
+      },
+      []
+    );
+
     if (isLoading) {
       return (
         <KContainer.View flex center background={KColors.white}>
@@ -1032,6 +1294,8 @@ export const ChatListLegend = memo(
             onScroll={handleScroll}
             onScrollBeginDrag={handleScrollBeginDrag}
             onLoad={handleListLoad}
+            onViewableItemsChanged={handleViewableItemsChanged}
+            viewabilityConfig={viewabilityConfig}
             contentContainerStyle={contentContainerStyle}
             scrollIndicatorInsets={{ right: 1 }}
             ListHeaderComponent={
@@ -1049,6 +1313,10 @@ export const ChatListLegend = memo(
             onEndReachedThreshold={0.2}
             initialScrollAtEnd
           />
+          <LegendChatUnreadButton
+            visible={isPillVisible}
+            onPress={onPressUnreadPill}
+          />
         </KContainer.View>
         <Animated.View
           style={[styles.scrollToBottomButton, animatedButtonStyle]}

package/src/screens/chat-detail/hooks/createUnreadMarkReadGate.ts

@@ -0,0 +1,41 @@
+import type { RefObject } from 'react';
+import { FIRST_UNREAD_TIMEOUT_MS } from '../../../services/message';
+import { useUnreadIndicatorStore } from '../../../store/unreadIndicator';
+import {
+  getUnreadGateDeadline,
+  isUnreadGateClosed,
+} from '../../../utils/unreadIndicatorState';
+import type { MarkReadGate } from './useMarkConversationRead';
+
+/**
+ * Holds mark-read back until this screen's first-unread lookup has answered,
+ * so the thread is never marked read before the anchor is captured. Scoped to
+ * the token in `tokenRef`: another screen's session never opens or closes it.
+ */
+export const createUnreadMarkReadGate = (
+  tokenRef: RefObject<number | null>
+): MarkReadGate => ({
+  isClosed: () =>
+    isUnreadGateClosed(
+      useUnreadIndicatorStore.getState(),
+      tokenRef.current,
+      Date.now(),
+      FIRST_UNREAD_TIMEOUT_MS
+    ),
+  openDeadline: () => {
+    const s = useUnreadIndicatorStore.getState();
+    if (tokenRef.current == null || s.token !== tokenRef.current) return null;
+    return s.pending ? getUnreadGateDeadline(s, FIRST_UNREAD_TIMEOUT_MS) : null;
+  },
+  subscribe: ({ onOpen, onClear }) =>
+    useUnreadIndicatorStore.subscribe((next, prev) => {
+      if (tokenRef.current == null || next.token !== tokenRef.current) return;
+      // A session that just began (token change) is not an open.
+      if (prev.token !== next.token) return;
+      // `clear` is never a catch-up: it only runs the 'leave' flush.
+      if (prev.pending && !next.pending && next.settledBy === 'resolve') {
+        onOpen();
+      }
+      if (prev.settledBy !== 'clear' && next.settledBy === 'clear') onClear();
+    }),
+});