@ethora/chat-component-rn 26.7.4 → 26.7.6

package/src/components/MainComponents/RoomList.tsx

@@ -13,8 +13,8 @@ import {
   FlatList,
   Pressable,
   Animated,
-  Text,
-  TouchableOpacity,
+  NativeScrollEvent,
+  NativeSyntheticEvent,
 } from 'react-native';
 import { IRoom } from '../../types/types';
 import { SearchInput } from '../InputComponents/Search';
@@ -39,9 +39,37 @@ interface RoomListProps {
  * rounded bottom corners. */
 const LIST_BACKGROUND = '#E8EDF2';
 
-/** First-paint fallback until the floating search strip reports its real
- * height; the list's top padding follows the measurement after that. */
-const SEARCH_BAR_ESTIMATE = 60;
+/** A release that leaves the search strip in between is settled by
+ * scrolling to whichever end is nearer; this delay lets the platform tell
+ * us first whether the finger threw the list (momentum) or just let go. */
+const SNAP_SETTLE_DELAY = 60;
+
+const COLLAPSED_SCALE = 0.86;
+
+const SEARCH_REST_GAP = 16;
+
+export const searchRevealStyle = (
+  scrollY: Animated.Value,
+  hiddenOffset: number
+) => {
+  const travel = Math.max(hiddenOffset, 1);
+  return {
+    opacity: scrollY.interpolate({
+      inputRange: [0, travel * 0.85],
+      outputRange: [1, 0],
+      extrapolate: 'clamp' as const,
+    }),
+    transform: [
+      {
+        scale: scrollY.interpolate({
+          inputRange: [0, travel],
+          outputRange: [1, COLLAPSED_SCALE],
+          extrapolate: 'clamp' as const,
+        }),
+      },
+    ],
+  };
+};
 
 const RoomList: React.FC<RoomListProps> = ({
   chats,
@@ -55,9 +83,12 @@ const RoomList: React.FC<RoomListProps> = ({
   const [searchTerm, setSearchTerm] = useState('');
   const [isLongPress, setIsLongPress] = useState(false);
   const [isDrawerOpen, setDrawerOpen] = useState(false);
+  const [isSearchFocused, setSearchFocused] = useState(false);
 
   const pressTimer = useRef<NodeJS.Timeout | null>(null);
   const containerRef = useRef<View>(null);
+  const listRef = useRef<FlatList<IRoom> | null>(null);
+  const scrollY = useRef(new Animated.Value(0)).current;
 
   const drawerAnimation = useRef(new Animated.Value(0)).current;
   const overlayAnimation = useRef(new Animated.Value(0)).current;
@@ -128,9 +159,123 @@ const RoomList: React.FC<RoomListProps> = ({
     }
   }, [burgerMenu]);
 
-  // Measured, so the list's top padding always matches the floating
-  // search strip — including when a larger font or a taller field grows it.
-  const [searchBarHeight, setSearchBarHeight] = useState(SEARCH_BAR_ESTIMATE);
+  // The search field is the list's own header rather than a bar pinned
+  // above it: it lives in the scrollable content, so the list opens
+  // already scrolled past it (rooms first, no search in sight) and
+  // dragging the content down brings it back with the finger — the way
+  // Telegram's chat list behaves. A pinned bar could not do this on
+  // Android, where a list sitting at offset 0 has nothing left to drag.
+  const searchBarHeight = useRef(0);
+  const [measuredBarHeight, setMeasuredBarHeight] = useState(0);
+  const listHeight = useRef(0);
+  const contentHeight = useRef(0);
+  /** The list starts hidden-search only once, and only before the user
+   * has touched it — chats arriving later must not yank the view. */
+  const didInitialHide = useRef(false);
+  const hasDragged = useRef(false);
+  const inMomentum = useRef(false);
+  const settleTimer = useRef<NodeJS.Timeout | null>(null);
+
+  // A search being typed in (or just focused) is never tucked away
+  // under the header, whichever way the list is then dragged.
+  const searchIsActive = useRef(false);
+  searchIsActive.current = isSearchFocused || searchTerm.length > 0;
+
+  /** How far the list can scroll — the strip can only be hidden fully
+   * when the rooms below it are tall enough to take its place. */
+  const maxOffset = () => contentHeight.current - listHeight.current;
+
+  const hiddenOffset = () =>
+    Math.max(searchBarHeight.current - SEARCH_REST_GAP, 0);
+
+  const hideSearchInitially = useCallback(() => {
+    if (didInitialHide.current || hasDragged.current) return;
+    const hidden = hiddenOffset();
+    if (!hidden || !listHeight.current || !contentHeight.current) return;
+    if (maxOffset() < hidden) return;
+    didInitialHide.current = true;
+    listRef.current?.scrollToOffset({ offset: hidden, animated: false });
+  }, []);
+
+  /** The magnet: a strip left half-way in or out settles to whichever
+   * end it is closer to. */
+  const snapSearch = useCallback((offset: number) => {
+    const hidden = hiddenOffset();
+    if (!hidden || maxOffset() < hidden) return;
+    if (offset <= 0 || offset >= hidden) return;
+    const hide = !searchIsActive.current && offset > hidden / 2;
+    listRef.current?.scrollToOffset({
+      offset: hide ? hidden : 0,
+      animated: true,
+    });
+  }, []);
+
+  const clearSettleTimer = () => {
+    if (settleTimer.current) {
+      clearTimeout(settleTimer.current);
+      settleTimer.current = null;
+    }
+  };
+
+  useEffect(() => clearSettleTimer, []);
+
+  const handleScroll = useMemo(
+    () =>
+      Animated.event([{ nativeEvent: { contentOffset: { y: scrollY } } }], {
+        useNativeDriver: true,
+      }),
+    [scrollY]
+  );
+
+  const revealStyle = useMemo(
+    () =>
+      searchRevealStyle(
+        scrollY,
+        Math.max(measuredBarHeight - SEARCH_REST_GAP, 0)
+      ),
+    [scrollY, measuredBarHeight]
+  );
+
+  const handleScrollBeginDrag = useCallback(() => {
+    hasDragged.current = true;
+    clearSettleTimer();
+  }, []);
+
+  const handleScrollEndDrag = useCallback(
+    (e: NativeSyntheticEvent<NativeScrollEvent>) => {
+      const offset = e.nativeEvent.contentOffset.y;
+      inMomentum.current = false;
+      clearSettleTimer();
+      // A flick keeps scrolling after the release; snapping now would
+      // fight it, so wait a beat and let momentum claim the gesture.
+      settleTimer.current = setTimeout(() => {
+        settleTimer.current = null;
+        if (!inMomentum.current) snapSearch(offset);
+      }, SNAP_SETTLE_DELAY);
+    },
+    [snapSearch]
+  );
+
+  const handleMomentumBegin = useCallback(() => {
+    inMomentum.current = true;
+    clearSettleTimer();
+  }, []);
+
+  const handleMomentumEnd = useCallback(
+    (e: NativeSyntheticEvent<NativeScrollEvent>) => {
+      inMomentum.current = false;
+      snapSearch(e.nativeEvent.contentOffset.y);
+    },
+    [snapSearch]
+  );
+
+  // Tapping the field pulls it fully into view even if it was caught
+  // half-way, so the caret never sits under the header.
+  useEffect(() => {
+    if (isSearchFocused) {
+      listRef.current?.scrollToOffset({ offset: 0, animated: true });
+    }
+  }, [isSearchFocused]);
 
   const toggleDrawer = () => {
     if (isDrawerOpen) {
@@ -169,6 +314,33 @@ const RoomList: React.FC<RoomListProps> = ({
     });
   };
 
+  const searchHeader = (
+    <View
+      testID="room-list-search"
+      style={styles.searchBar}
+      onLayout={(e) => {
+        const height = e.nativeEvent.layout.height;
+        searchBarHeight.current = height;
+        setMeasuredBarHeight((prev) => (prev === height ? prev : height));
+        hideSearchInitially();
+      }}
+    >
+      <Animated.View
+        testID="room-list-search-field"
+        style={[styles.searchField, revealStyle]}
+      >
+        <SearchInput
+          icon={<SearchIcon height={20} />}
+          value={searchTerm}
+          onChangeText={handleSearchChange}
+          onFocus={() => setSearchFocused(true)}
+          onBlur={() => setSearchFocused(false)}
+          placeholder={t('search.placeholder')}
+        />
+      </Animated.View>
+    </View>
+  );
+
   return (
     <>
       {burgerMenu && !open && (
@@ -192,19 +364,29 @@ const RoomList: React.FC<RoomListProps> = ({
           <>
             <View style={styles.scrollContainer}>
               <HeaderRoomList setDrawerOpen={toggleDrawer} />
-              {/* The search field floats OVER the list rather than
-                  sitting above it in the column: its strip is transparent
-                  and the rooms scroll underneath, which is what the design
-                  shows. It is still fixed (not a ListHeaderComponent), so
-                  it stays reachable however far the list is scrolled — as a
-                  list header it scrolled away behind the opaque header. */}
               <View style={styles.listArea}>
-                <FlatList
+                {/* Animated.FlatList, so the reveal runs on the native
+                    thread off the very same scroll it follows. */}
+                <Animated.FlatList
+                  ref={listRef}
                   data={filteredChats}
                   keyExtractor={(item) => item.jid}
-                  // Clears the floating field on first paint; scrolling
-                  // then slides the rooms under it.
-                  contentContainerStyle={{ paddingTop: searchBarHeight }}
+                  ListHeaderComponent={searchHeader}
+                  onLayout={(e) => {
+                    listHeight.current = e.nativeEvent.layout.height;
+                    hideSearchInitially();
+                  }}
+                  onContentSizeChange={(_w, h) => {
+                    contentHeight.current = h;
+                    hideSearchInitially();
+                  }}
+                  onScroll={handleScroll}
+                  scrollEventThrottle={16}
+                  onScrollBeginDrag={handleScrollBeginDrag}
+                  onScrollEndDrag={handleScrollEndDrag}
+                  onMomentumScrollBegin={handleMomentumBegin}
+                  onMomentumScrollEnd={handleMomentumEnd}
+                  keyboardShouldPersistTaps="handled"
                   renderItem={({ item }) => (
                     <Pressable
                       // Stable testID so e2e drivers can target a room
@@ -221,20 +403,6 @@ const RoomList: React.FC<RoomListProps> = ({
                   )}
                   style={styles.chatList}
                 />
-                <View
-                  testID="room-list-search"
-                  style={styles.searchBar}
-                  onLayout={(e) =>
-                    setSearchBarHeight(e.nativeEvent.layout.height)
-                  }
-                >
-                  <SearchInput
-                    icon={<SearchIcon height={20} />}
-                    value={searchTerm}
-                    onChangeText={handleSearchChange}
-                    placeholder={t('search.placeholder')}
-                  />
-                </View>
               </View>
 
               <HeaderRoomListMenu
@@ -276,21 +444,19 @@ const styles = StyleSheet.create({
     flex: 1,
   },
   searchBar: {
+    paddingBottom: 4,
     // `row` matters: SearchInputWrapper is `flex: 1` plus a fixed 44px
     // height. In a column parent that flex resolves VERTICALLY against a
     // parent with no height of its own and collapses the field to nothing
-    // but its magnifier. As a row it resolves to width, which is what it
-    // meant back when the field was a list-header child.
+    // but its magnifier. As a row it resolves to width.
     flexDirection: 'row',
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    right: 0,
     paddingTop: 8,
-    paddingBottom: 8,
-    paddingHorizontal: 16,
     backgroundColor: 'transparent',
   },
+  searchField: {
+    flexDirection: 'row',
+    flex: 1,
+  },
   chatList: {
     flex: 1,
     paddingHorizontal: 16,

package/src/components/Menu/HeaderRoomListMenu.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useEffect, useMemo, useRef, useState } from 'react';
+import React, { FC, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import {
   Alert,
   Animated,
@@ -9,6 +9,7 @@ import {
   Dimensions,
   Modal,
   PanResponder,
+  Platform,
   View,
 } from 'react-native';
 import {
@@ -130,6 +131,30 @@ export const HeaderRoomListMenu: FC<HeaderRoomListMenuProps> = ({
   const closeDrawerRef = useRef(closeDrawer);
   closeDrawerRef.current = closeDrawer;
 
+  const pendingActionRef = useRef<(() => void) | null>(null);
+
+  const runPendingAction = useCallback(() => {
+    const action = pendingActionRef.current;
+    pendingActionRef.current = null;
+    action?.();
+  }, []);
+
+  useEffect(() => {
+    if (Platform.OS === 'ios' || isDrawerOpen) {
+      return;
+    }
+    const id = setTimeout(runPendingAction, 0);
+    return () => clearTimeout(id);
+  }, [isDrawerOpen, runPendingAction]);
+
+  const handleOptionPress = useCallback(
+    (action: () => void) => {
+      pendingActionRef.current = action;
+      closeDrawer();
+    },
+    [closeDrawer]
+  );
+
   useEffect(() => {
     if (!isDrawerOpen) {
       dragY.setValue(0);
@@ -215,15 +240,12 @@ export const HeaderRoomListMenu: FC<HeaderRoomListMenuProps> = ({
       icon: React.ReactElement;
       onClick: () => void;
       styles?: { color: string };
-      /** When true the row closes the drawer itself before acting. */
-      closesDrawer?: boolean;
     }[] = [
       {
         label: 'New Chat',
         icon: <AddNewIcon color={primaryColor} />,
         onClick: () => {
           dispatch(setActiveModal(MODAL_TYPES.NEW_CHAT));
-          console.log('New chat clicked');
         },
         styles: { color: '#141414' },
       },
@@ -232,7 +254,6 @@ export const HeaderRoomListMenu: FC<HeaderRoomListMenuProps> = ({
         icon: <ProfileIcon color={primaryColor} />,
         onClick: () => {
           dispatch(setActiveModal(MODAL_TYPES.PROFILE));
-          console.log('Profile clicked');
         },
       },
       {
@@ -240,7 +261,6 @@ export const HeaderRoomListMenu: FC<HeaderRoomListMenuProps> = ({
         icon: <SettingIcon color={primaryColor} />,
         onClick: () => {
           dispatch(setActiveModal(MODAL_TYPES.SETTINGS));
-          console.log('Settings clicked');
         },
       },
     ];
@@ -249,15 +269,13 @@ export const HeaderRoomListMenu: FC<HeaderRoomListMenuProps> = ({
         label: logoutConfig.label ?? DEFAULT_LOGOUT_LABEL,
         icon: <LogoutIcon color={primaryColor} />,
         styles: { color: primaryColor },
-        closesDrawer: true,
         onClick: () => {
-          closeDrawer();
           runLogoutFlow(logoutConfig, performLogout).catch(() => {});
         },
       });
     }
     return options;
-  }, [dispatch, logoutConfig, performLogout, primaryColor, closeDrawer]);
+  }, [dispatch, logoutConfig, performLogout, primaryColor]);
 
   return (
     // Presented through a real <Modal>: as an in-tree overlay the sheet was
@@ -270,6 +288,7 @@ export const HeaderRoomListMenu: FC<HeaderRoomListMenuProps> = ({
       animationType="none"
       statusBarTranslucent
       onRequestClose={closeDrawer}
+      onDismiss={runPendingAction}
     >
       <TouchableWithoutFeedback onPress={closeDrawer}>
         <Animated.View
@@ -314,12 +333,7 @@ export const HeaderRoomListMenu: FC<HeaderRoomListMenuProps> = ({
                 style={styles.menuItem}
                 testID={`header-menu-${option.label}`}
                 activeOpacity={0.6}
-                onPress={() => {
-                  option.onClick();
-                  if (!option.closesDrawer) {
-                    closeDrawer();
-                  }
-                }}
+                onPress={() => handleOptionPress(option.onClick)}
               >
                 <View style={styles.iconSlot}>{option.icon}</View>
                 <Text style={[styles.label, option?.styles]}>

package/src/context/xmppProvider.tsx

@@ -37,6 +37,7 @@ import {
 import { ensureScopedChatCache } from '../helpers/ensureScopedChatCache';
 import { getRooms as prefetchRoomsViaRest } from '../networking/api-requests/rooms.api';
 import { allRoomPresences } from '../networking/xmpp/allRoomPresences.xmpp';
+import { pushSubscriptionService } from '../services/pushSubscriptionService';
 import { store } from '../roomStore';
 import { logout, setStoreClient, setConfig } from '../roomStore/chatSettingsSlice';
 import {
@@ -83,6 +84,16 @@ interface XmppProviderProps {
 
 const LOGOUT_EVENT = 'ethora-xmpp-logout';
 
+const subscribeAllRoomsForPush = (client: any, reason: string) => {
+  const rooms = Object.keys(store.getState().rooms.rooms || {});
+  if (!client || !rooms.length) {return;}
+  const nick = client.jid?.getLocal();
+  pushSubscriptionService
+    .subscribeToRooms(client, rooms, nick)
+    .then(() => devPushLog('xmpp', `${reason}: mucsub ok for ${rooms.length} rooms`))
+    .catch((e) => devPushLog('warn', `${reason}: mucsub subscribe failed`, e));
+};
+
 export const XmppProvider: React.FC<XmppProviderProps> = ({ children, config, isVisible }) => {
   const [client, setClient] = useState<XmppClient | null>(null);
   const [providerBootstrapStatus, setProviderBootstrapStatus] =
@@ -115,7 +126,7 @@ export const XmppProvider: React.FC<XmppProviderProps> = ({ children, config, is
       //    the shared rotation point covers both the consumer-supplied
       //    function and the built-in endpoint.
       if (config?.refreshTokens?.enabled) {
-        const rotated = await refreshAuthTokensQuietly();
+        const rotated = await refreshAuthTokensQuietly({ force: true });
 
         if (rotated?.xmppPassword) {
           const rotatedUser = store.getState().chatSettingStore.user;
@@ -229,9 +240,11 @@ export const XmppProvider: React.FC<XmppProviderProps> = ({ children, config, is
       created.setOnOnline(() => {
         const underlying = (created as any).client;
         if (!underlying) {return;}
-        allRoomPresences(underlying).catch((e) =>
-          devPushLog('warn', 'reconnect: allRoomPresences re-join failed', e)
-        );
+        allRoomPresences(underlying)
+          .catch((e) =>
+            devPushLog('warn', 'reconnect: allRoomPresences re-join failed', e)
+          )
+          .finally(() => subscribeAllRoomsForPush(underlying, 'reconnect'));
         // Also refresh the private store so unread / lastViewed markers
         // are accurate after a long reconnect — the MUC re-join above only
         // restores delivery, not unread state. Idempotent on first connect.
@@ -384,7 +397,7 @@ export const XmppProvider: React.FC<XmppProviderProps> = ({ children, config, is
         // jwtLogin is skipped: /users/client just minted fresh creds.
         let connectPassword = resolved.xmppPassword;
         if (config?.refreshTokens?.enabled && !config?.jwtLogin?.enabled) {
-          const rotated = await refreshAuthTokensQuietly();
+          const rotated = await refreshAuthTokensQuietly({ force: true });
           if (cancelled) {return;}
           if (rotated?.xmppPassword) {
             connectPassword = rotated.xmppPassword;
@@ -436,6 +449,7 @@ export const XmppProvider: React.FC<XmppProviderProps> = ({ children, config, is
         } catch (e) {
           devPushLog('warn', 'initBeforeLoad: allRoomPresences failed', e);
         }
+        subscribeAllRoomsForPush((c as any).client, 'initBeforeLoad');
 
         store.dispatch(setStoreClient(c));
         completedBootstrapKeyRef.current = key;

package/src/networking/authRefresh.ts

@@ -382,6 +382,9 @@ export interface RefreshOptions {
 
 let inflight: Promise<RefreshResult> | null = null;
 
+let lastRotationAt = 0;
+const QUIET_ROTATION_MIN_INTERVAL_MS = 5 * 60 * 1000;
+
 /**
  * Rotate the tokens. Concurrent callers share ONE request — this is the
  * lock the new backend scheme requires.
@@ -399,9 +402,14 @@ export function refreshAuthTokens(
     return inflight;
   }
 
-  inflight = performRefresh(options?.refreshToken).finally(() => {
-    inflight = null;
-  });
+  inflight = performRefresh(options?.refreshToken)
+    .then((result) => {
+      lastRotationAt = Date.now();
+      return result;
+    })
+    .finally(() => {
+      inflight = null;
+    });
 
   return inflight;
 }
@@ -411,7 +419,19 @@ export function refreshAuthTokens(
  * tokens are fresh" and have no meaningful error handling — chat
  * bootstrap, XMPP reconnect. Never rejects.
  */
-export async function refreshAuthTokensQuietly(): Promise<RefreshResult | null> {
+export interface QuietRefreshOptions {
+  force?: boolean;
+}
+
+export async function refreshAuthTokensQuietly(
+  options?: QuietRefreshOptions
+): Promise<RefreshResult | null> {
+  if (
+    !options?.force &&
+    Date.now() - lastRotationAt < QUIET_ROTATION_MIN_INTERVAL_MS
+  ) {
+    return null;
+  }
   try {
     return await refreshAuthTokens();
   } catch (error) {
@@ -427,4 +447,5 @@ export async function refreshAuthTokensQuietly(): Promise<RefreshResult | null>
 /** Test seam — drops any shared in-flight promise between cases. */
 export function __resetAuthRefreshStateForTests(): void {
   inflight = null;
+  lastRotationAt = 0;
 }

package/src/networking/xmpp/presenceInRoom.xmpp.ts

@@ -70,7 +70,12 @@ export const presenceInRoom = async (
       try {
         await createTimeoutPromise(2000, unsubscribe);
       } catch (err) {
-        reject(err);
+        // The room's reply schedules resolve() `delay` ms later (2000 by
+        // default) — the same length as this timeout, so the timeout used
+        // to win the race and reject a join that had actually succeeded
+        // (allRoomPresences "failed" with undefined on every bootstrap).
+        // Only a join that never got an answer is a failure.
+        if (!settled) {reject(err);}
       }
     })();
   });

package/src/types/types.ts

@@ -397,6 +397,16 @@ export interface IConfig {
      * value takes effect.
      */
     height?: number;
+    /**
+     * Extend the header cards (room list + chat) under the status bar:
+     * each pads its top by the safe-area inset and paints it white, so
+     * the card and the status-bar band are one surface. Use this instead
+     * of wrapping `<Chat>` in a top-edge SafeAreaView: a host-side white
+     * band above the card shows a hairline seam where the card's
+     * shadow/elevation starts. Off by default (hosts that already pad the
+     * top keep their layout).
+     */
+    safeAreaTop?: boolean;
   };
   disableHeader?: boolean;
   disableMedia?: boolean;