@droppii-org/chat-mobile 0.2.85 → 0.2.86

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

@@ -145,6 +145,10 @@ export const ChatListLegend = memo(
     const isAtBottomRef = useRef(true);
     const scrollDebounceRef = useRef<NodeJS.Timeout | undefined>(undefined);
     const rowRefsMap = useRef<Map<string, View | null>>(new Map());
+    // Flips true once LegendList's onLoad fires (initial layout + initial
+    // scroll both settled) — before that, onStartReached/onEndReached can
+    // fire purely from resting scroll position, not a real user gesture.
+    const hasSettledRef = useRef(false);
     const [showBadge, setShowBadge] = useState(false);
     const [highlightedId, setHighlightedId] = useState<string | null>(null);
     const highlightTimerRef = useRef<ReturnType<typeof setTimeout> | null>(
@@ -226,7 +230,7 @@ export const ChatListLegend = memo(
           return (
             <>
               {(dayStart || timeBreak) && (
-                <LegendChatDay createdAt={createdAt} timeOnly={!dayStart} />
+                <LegendChatDay createdAt={createdAt} />
               )}
               <KContainer.View
                 ref={(node: View | null) => {
@@ -453,23 +457,51 @@ export const ChatListLegend = memo(
     );
 
     const handleStartReached = useCallback(() => {
+      const willLoad = hasMoreOld && !moreOldLoading;
       if (__DEV__) {
-        console.log('[LegendList] onStartReached triggered', {
-          hasMoreOld,
-          moreOldLoading,
-          willLoad: hasMoreOld && !moreOldLoading,
-        });
+        console.log(
+          willLoad && !hasSettledRef.current
+            ? '[LegendList] ⚠️ onStartReached SPURIOUS mount-time load'
+            : '[LegendList] onStartReached triggered',
+          {
+            conversationId,
+            messagesLength: messages.length,
+            firstMessageId:
+              messages[0]?.clientMsgID || messages[0]?.serverMsgID,
+            hasMoreOld,
+            moreOldLoading,
+            willLoad,
+            duringInitialSettle: !hasSettledRef.current,
+          }
+        );
       }
-      if (hasMoreOld && !moreOldLoading) {
+      if (willLoad) {
         onLoadMoreOld?.(true);
       }
-    }, [hasMoreOld, moreOldLoading, onLoadMoreOld]);
+    }, [conversationId, messages, hasMoreOld, moreOldLoading, onLoadMoreOld]);
 
     const handleEndReached = useCallback(() => {
-      if (hasMoreNew && !moreNewLoading) {
+      const willLoad = hasMoreNew && !moreNewLoading;
+      if (__DEV__) {
+        console.log(
+          willLoad && !hasSettledRef.current
+            ? '[LegendList] ⚠️ onEndReached SPURIOUS mount-time load'
+            : '[LegendList] onEndReached triggered',
+          {
+            conversationId,
+            messagesLength: messages.length,
+            lastMessageId: messages[messages.length - 1]?.clientMsgID,
+            hasMoreNew,
+            moreNewLoading,
+            willLoad,
+            duringInitialSettle: !hasSettledRef.current,
+          }
+        );
+      }
+      if (willLoad) {
         onLoadMoreNew?.(true);
       }
-    }, [hasMoreNew, moreNewLoading, onLoadMoreNew]);
+    }, [conversationId, messages, hasMoreNew, moreNewLoading, onLoadMoreNew]);
 
     const handleScroll = useCallback(
       (e: any) => {
@@ -527,6 +559,14 @@ export const ChatListLegend = memo(
       };
     }, []);
 
+    // Debug-only: this component can stay mounted across a conversationId
+    // change (e.g. navigation.replace reusing the same screen instance), so
+    // hasSettledRef must reset per-conversation for the spurious-load log
+    // above to stay accurate for the newly opened conversation.
+    useEffect(() => {
+      hasSettledRef.current = false;
+    }, [conversationId]);
+
     useEffect(() => {
       const bottomSubscription = DeviceEventEmitter.addListener(
         ChatEvent.ScrollToBottom,
@@ -598,6 +638,7 @@ export const ChatListLegend = memo(
       );
     }
 
+    console.log('messages length: ', +messages.length);
     return (
       <KContainer.View flex background={KColors.white} style={styles.container}>
         <ListComponent
@@ -621,6 +662,16 @@ export const ChatListLegend = memo(
           ListHeaderComponent={
             <LegendChatLoadEarlier isLoading={moreOldLoading} />
           }
+          onLoad={(info: { elapsedTimeInMs: number }) => {
+            hasSettledRef.current = true;
+            if (__DEV__) {
+              console.log('[LegendList] onLoad (initial settle done)', {
+                conversationId,
+                messagesLength: messages.length,
+                elapsedTimeInMs: info.elapsedTimeInMs,
+              });
+            }
+          }}
           onStartReached={handleStartReached}
           onStartReachedThreshold={0.5}
           onEndReached={handleEndReached}

package/src/screens/chat-detail/components/MentionSuggestionList.tsx

@@ -1,6 +1,6 @@
 import { memo, useCallback } from 'react';
 import { ActivityIndicator, StyleSheet } from 'react-native';
-import { LegendList } from '@legendapp/list/react-native';
+import { FlatList } from 'react-native-gesture-handler';
 import { KContainer, KLabel, KColors, KSpacingValue } from '@droppii/libs';
 import { MentionSuggestionItem } from './MentionSuggestionItem';
 import { trans } from '../../../translation';
@@ -11,8 +11,9 @@ import type { MentionSuggestion } from '../../../types/mention';
 // used as the shared estimate since most rows are the single-line kind.
 const ROW_HEIGHT = 40;
 const ROW_GAP = 8;
-const MAX_VISIBLE_ROWS = 6;
-const MAX_PANEL_HEIGHT =
+const MAX_VISIBLE_ROWS = 5;
+// Fixed, not a cap — see listWrapper's `height` below for why.
+const PANEL_HEIGHT =
   ROW_HEIGHT * MAX_VISIBLE_ROWS + ROW_GAP * (MAX_VISIBLE_ROWS - 1);
 
 interface MentionSuggestionListProps {
@@ -86,11 +87,10 @@ export const MentionSuggestionList = memo(
             </KContainer.View>
           ) : (
             <KContainer.View style={styles.listWrapper} padding="0.5rem">
-              <LegendList
+              <FlatList
                 data={suggestions}
                 renderItem={renderItem}
                 keyExtractor={keyExtractor}
-                estimatedItemSize={ROW_HEIGHT}
                 keyboardShouldPersistTaps="handled"
                 onEndReached={hasMore ? onLoadMore : undefined}
                 onEndReachedThreshold={0.5}
@@ -124,8 +124,18 @@ const styles = StyleSheet.create({
     borderTopRightRadius: KSpacingValue['0.75rem'],
     overflow: 'hidden',
   },
+  // Fixed `height`, not `maxHeight` — the panel is absolutely positioned
+  // with only `bottom` set (no `top`, see ChatComposer.tsx's mentionPanel
+  // style), so its height would otherwise have to be inferred from content
+  // through several nested Views. On Android that left the touch/hit-test
+  // bounds out of sync with what was actually painted, so drags over the
+  // list fell through to the message list rendered underneath instead of
+  // scrolling this one. A concrete `height` gives Yoga a definite box from
+  // the very first layout pass. Fixed at 5 rows regardless of result count
+  // so the scrollable area — and the load-more trigger — stays available
+  // even when fewer than 5 suggestions are loaded yet.
   listWrapper: {
-    maxHeight: MAX_PANEL_HEIGHT,
+    height: PANEL_HEIGHT,
   },
   separator: {
     height: ROW_GAP,

package/src/screens/chat-detail/legend/LegendChatDay.tsx

@@ -43,35 +43,25 @@ const formatDayLabel = (createdAt: number): string | null => {
 
 interface LegendChatDayProps {
   createdAt: number;
-  /**
-   * Render just the clock time, without the day. Used where a cluster broke on
-   * elapsed time inside a single day — the date is already on screen above.
-   */
-  timeOnly?: boolean;
 }
 
-export const LegendChatDay = memo(
-  ({ createdAt, timeOnly = false }: LegendChatDayProps) => {
-    const dateStr = useMemo(() => {
-      if (createdAt == null) return null;
-      if (!timeOnly) return formatDayLabel(createdAt);
-
-      const date = new Date(createdAt);
-      return Number.isNaN(date.getTime()) ? null : formatTime(date);
-    }, [createdAt, timeOnly]);
-
-    if (!dateStr) return null;
-
-    return (
-      <KContainer.View center marginV="0.5rem">
-        <KContainer.View>
-          <KLabel.Text typo="TextXsNormal" color={CHAT_BUBBLE_COLORS.dayLabel}>
-            {dateStr}
-          </KLabel.Text>
-        </KContainer.View>
+export const LegendChatDay = memo(({ createdAt }: LegendChatDayProps) => {
+  const dateStr = useMemo(() => {
+    if (createdAt == null) return null;
+    return formatDayLabel(createdAt);
+  }, [createdAt]);
+
+  if (!dateStr) return null;
+
+  return (
+    <KContainer.View center marginV="0.5rem">
+      <KContainer.View>
+        <KLabel.Text typo="TextXsNormal" color={CHAT_BUBBLE_COLORS.dayLabel}>
+          {dateStr}
+        </KLabel.Text>
       </KContainer.View>
-    );
-  }
-);
+    </KContainer.View>
+  );
+});
 
 LegendChatDay.displayName = 'LegendChatDay';

package/src/translation/resources/i18n.ts

@@ -141,9 +141,9 @@ const i18nKey: Record<string, string> = {
   'chat:info_leave_group': 'Rời nhóm',
   'chat:leave_group_confirm_title': 'Rời nhóm?',
   'chat:leave_group_confirm_desc_private':
-    'Sau khi rời nhóm, bạn sẽ không thể xem tin nhắn từ cuộc trò chuyện này nữa. Bạn có chắc chắn muốn rời khỏi nhóm?',
+    'Sau khi rời nhóm, bạn sẽ không thể xem tin nhắn từ cuộc trò chuyện này nữa. Bạn có chắc chắn muốn <bold>rời khỏi nhóm</bold>?',
   'chat:leave_group_confirm_desc_public':
-    'Sau khi rời nhóm, bạn sẽ không thể nhắn tin hay nhận thông báo từ cuộc trò chuyện này nữa. Bạn có chắc chắn muốn rời khỏi nhóm?',
+    'Sau khi rời nhóm, bạn sẽ không thể nhắn tin hay nhận thông báo từ cuộc trò chuyện này nữa. Bạn có chắc chắn muốn <bold>rời khỏi nhóm</bold>?',
   'chat:leave_group_confirm_primary': 'Rời nhóm',
   'chat:leave_group_confirm_secondary': 'Ở lại nhóm',
   'chat:leave_group_blocked_title': 'Không thể rời nhóm',