@ethora/chat-component-rn 26.7.3 → 26.7.4

package/src/components/MainComponents/RoomList.tsx

@@ -35,6 +35,14 @@ interface RoomListProps {
   onRoomClick?: (chat: IRoom) => void;
 }
 
+/** Page ground behind the room list, the search field and the header's
+ * 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;
+
 const RoomList: React.FC<RoomListProps> = ({
   chats,
   burgerMenu = false,
@@ -120,6 +128,10 @@ 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);
+
   const toggleDrawer = () => {
     if (isDrawerOpen) {
       closeDrawer();
@@ -180,39 +192,50 @@ const RoomList: React.FC<RoomListProps> = ({
           <>
             <View style={styles.scrollContainer}>
               <HeaderRoomList setDrawerOpen={toggleDrawer} />
-              {/* Search sits ABOVE the list rather than in its
-                  ListHeaderComponent. As a list header it was simply the
-                  first scrolling row, so the moment you scrolled the rooms
-                  it slid up and disappeared behind the opaque header band.
-                  Fixed here it stays reachable, which is the entire point
-                  of a search field over a long list. */}
-              <View style={styles.searchBar}>
-                <SearchInput
-                  icon={<SearchIcon height={20} />}
-                  value={searchTerm}
-                  onChangeText={handleSearchChange}
-                  placeholder={t('search.placeholder')}
+              {/* 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
+                  data={filteredChats}
+                  keyExtractor={(item) => item.jid}
+                  // Clears the floating field on first paint; scrolling
+                  // then slides the rooms under it.
+                  contentContainerStyle={{ paddingTop: searchBarHeight }}
+                  renderItem={({ item }) => (
+                    <Pressable
+                      // Stable testID so e2e drivers can target a room
+                      // row by its jid local-part (e.g. Main chat under
+                      // app id `..._...759` → testID `room-...759`).
+                      testID={`room-${(item.jid || '').split('@')[0]}`}
+                      accessibilityLabel={`room-${item.title || item.name}`}
+                      onPress={() => performClick(item)}
+                      onPressIn={handlePressIn}
+                      onPressOut={handlePressOut}
+                    >
+                      <ChatRoomItem chat={item} config={config} />
+                    </Pressable>
+                  )}
+                  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>
-              <FlatList
-                data={filteredChats}
-                keyExtractor={(item) => item.jid}
-                renderItem={({ item }) => (
-                  <Pressable
-                    // Stable testID so e2e drivers can target a room
-                    // row by its jid local-part (e.g. Main chat under
-                    // app id `..._...759` → testID `room-...759`).
-                    testID={`room-${(item.jid || '').split('@')[0]}`}
-                    accessibilityLabel={`room-${item.title || item.name}`}
-                    onPress={() => performClick(item)}
-                    onPressIn={handlePressIn}
-                    onPressOut={handlePressOut}
-                  >
-                    <ChatRoomItem chat={item} config={config} />
-                  </Pressable>
-                )}
-                style={styles.chatList}
-              />
 
               <HeaderRoomListMenu
                 closeDrawer={closeDrawer}
@@ -238,7 +261,7 @@ const styles = StyleSheet.create({
     width: '100%',
     height: '100%',
     flex: 1,
-    backgroundColor: '#fff',
+    backgroundColor: LIST_BACKGROUND,
   },
   scrollContainer: {
     flexGrow: 1,
@@ -249,6 +272,9 @@ const styles = StyleSheet.create({
     padding: 16,
     justifyContent: 'space-between',
   },
+  listArea: {
+    flex: 1,
+  },
   searchBar: {
     // `row` matters: SearchInputWrapper is `flex: 1` plus a fixed 44px
     // height. In a column parent that flex resolves VERTICALLY against a
@@ -256,14 +282,19 @@ const styles = StyleSheet.create({
     // but its magnifier. As a row it resolves to width, which is what it
     // meant back when the field was a list-header child.
     flexDirection: 'row',
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
     paddingTop: 8,
+    paddingBottom: 8,
     paddingHorizontal: 16,
-    backgroundColor: '#FAFAFA',
+    backgroundColor: 'transparent',
   },
   chatList: {
     flex: 1,
     paddingHorizontal: 16,
-    backgroundColor: '#FAFAFA',
+    backgroundColor: LIST_BACKGROUND,
   },
 });
 

package/src/components/Menu/HeaderRoomListMenu.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useMemo } from 'react';
+import React, { FC, useEffect, useMemo, useRef, useState } from 'react';
 import {
   Alert,
   Animated,
@@ -7,6 +7,8 @@ import {
   TouchableWithoutFeedback,
   StyleSheet,
   Dimensions,
+  Modal,
+  PanResponder,
   View,
 } from 'react-native';
 import {
@@ -16,10 +18,15 @@ import {
   SettingIcon,
 } from '../../assets/icons';
 import { useDispatch } from 'react-redux';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { setActiveModal } from '../../roomStore/chatSettingsSlice';
 import { MODAL_TYPES } from '../../helpers/constants/MODAL_TYPES';
 import { useChatSettingState } from '../../hooks/useChatSettingState';
 import { useLogout } from '../../hooks/useLogout';
+import {
+  shouldClaimVerticalDrag,
+  shouldDismissOnDrag,
+} from '../../helpers/sheetGestures';
 import type { IConfig } from '../../types/types';
 
 type LogoutConfig = NonNullable<IConfig['logout']>;
@@ -85,7 +92,7 @@ export const runLogoutFlow = async (
   }
 };
 
-const { width } = Dimensions.get('window');
+const { height: windowHeight } = Dimensions.get('window');
 
 interface HeaderRoomListMenuProps {
   isDrawerOpen: boolean;
@@ -106,11 +113,102 @@ export const HeaderRoomListMenu: FC<HeaderRoomListMenuProps> = ({
   const logoutConfig = config?.logout?.enabled ? config.logout : undefined;
   const primaryColor = config?.colors?.primary ?? '#0052CD';
 
-  const drawerTranslateX = drawerAnimation.interpolate({
+  const insets = useSafeAreaInsets();
+  // Measured, so the sheet is exactly as tall as its rows and starts
+  // fully off-screen no matter how many options the host enables.
+  const [sheetHeight, setSheetHeight] = useState(windowHeight * 0.4);
+  // Finger offset, layered on top of the open/close animation the parent
+  // drives. Reset once the sheet is unmounted, so a swipe-dismissed sheet
+  // never snaps back into view on its way out.
+  const dragY = useRef(new Animated.Value(0)).current;
+  const sheetHeightRef = useRef(sheetHeight);
+  sheetHeightRef.current = sheetHeight;
+
+  // closeDrawer is a fresh function each render; the responder is built
+  // once, so it reads the current one through a ref rather than the one it
+  // closed over on mount.
+  const closeDrawerRef = useRef(closeDrawer);
+  closeDrawerRef.current = closeDrawer;
+
+  useEffect(() => {
+    if (!isDrawerOpen) {
+      dragY.setValue(0);
+      return;
+    }
+    // Hand `dragY` to the native driver up front. The open/close value is
+    // already native (the parent animates it that way), and a transform
+    // that mixes a native node with a JS-only one drops the JS updates on
+    // the floor — which is exactly a drag that moves nothing.
+    Animated.timing(dragY, {
+      toValue: 0,
+      duration: 0,
+      useNativeDriver: true,
+    }).start();
+  }, [isDrawerOpen, dragY]);
+
+  const openTranslateY = drawerAnimation.interpolate({
     inputRange: [0, 1],
-    outputRange: [width, 0],
+    outputRange: [sheetHeight, 0],
   });
 
+  const dismissByDrag = () => {
+    Animated.timing(dragY, {
+      toValue: sheetHeightRef.current,
+      duration: 180,
+      useNativeDriver: true,
+    }).start();
+    closeDrawerRef.current();
+  };
+
+  const makeDragResponder = (claimOnStart: boolean) =>
+    PanResponder.create({
+      // The grab area claims on touch-DOWN: nothing to negotiate against,
+      // so a pull on the handle always drags.
+      onStartShouldSetPanResponder: () => claimOnStart,
+      // CAPTURE matters on the body: a drag that starts on a row makes
+      // that row's Touchable the responder on touch-down, and a plain
+      // `onMoveShouldSetPanResponder` is never consulted afterwards.
+      // Capturing on the first clearly-vertical movement takes the gesture
+      // back, while a tap (dy ≈ 0) still reaches the row.
+      onMoveShouldSetPanResponderCapture: (_evt, g) =>
+        claimOnStart || shouldClaimVerticalDrag(g.dy, g.dx),
+      onMoveShouldSetPanResponder: (_evt, g) =>
+        claimOnStart || shouldClaimVerticalDrag(g.dy, g.dx),
+      onPanResponderTerminationRequest: () => false,
+      onPanResponderMove: (_evt, g) => {
+        dragY.setValue(Math.max(0, g.dy));
+      },
+      onPanResponderRelease: (_evt, g) => {
+        if (shouldDismissOnDrag(g.dy, g.vy)) {
+          dismissByDrag();
+          return;
+        }
+        Animated.spring(dragY, {
+          toValue: 0,
+          tension: 90,
+          friction: 14,
+          useNativeDriver: true,
+        }).start();
+      },
+      onPanResponderTerminate: () => {
+        Animated.spring(dragY, {
+          toValue: 0,
+          tension: 90,
+          friction: 14,
+          useNativeDriver: true,
+        }).start();
+      },
+    });
+
+  // Built once — `useRef(expr)` would re-run PanResponder.create every
+  // render and throw the result away.
+  const bodyPanRef = useRef<ReturnType<typeof makeDragResponder> | null>(null);
+  const handlePanRef = useRef<ReturnType<typeof makeDragResponder> | null>(null);
+  if (!bodyPanRef.current) {bodyPanRef.current = makeDragResponder(false);}
+  if (!handlePanRef.current) {handlePanRef.current = makeDragResponder(true);}
+  const pan = bodyPanRef.current;
+  const handlePan = handlePanRef.current;
+
   const menuOptions = useMemo(() => {
     const options: {
       label: string;
@@ -122,7 +220,7 @@ export const HeaderRoomListMenu: FC<HeaderRoomListMenuProps> = ({
     }[] = [
       {
         label: 'New Chat',
-        icon: <AddNewIcon color="#8C8C8C" />,
+        icon: <AddNewIcon color={primaryColor} />,
         onClick: () => {
           dispatch(setActiveModal(MODAL_TYPES.NEW_CHAT));
           console.log('New chat clicked');
@@ -131,7 +229,7 @@ export const HeaderRoomListMenu: FC<HeaderRoomListMenuProps> = ({
       },
       {
         label: 'Profile',
-        icon: <ProfileIcon color="#8C8C8C" />,
+        icon: <ProfileIcon color={primaryColor} />,
         onClick: () => {
           dispatch(setActiveModal(MODAL_TYPES.PROFILE));
           console.log('Profile clicked');
@@ -139,7 +237,7 @@ export const HeaderRoomListMenu: FC<HeaderRoomListMenuProps> = ({
       },
       {
         label: 'Settings',
-        icon: <SettingIcon color="#8C8C8C" />,
+        icon: <SettingIcon color={primaryColor} />,
         onClick: () => {
           dispatch(setActiveModal(MODAL_TYPES.SETTINGS));
           console.log('Settings clicked');
@@ -162,47 +260,80 @@ export const HeaderRoomListMenu: FC<HeaderRoomListMenuProps> = ({
   }, [dispatch, logoutConfig, performLogout, primaryColor, closeDrawer]);
 
   return (
-    <>
+    // Presented through a real <Modal>: as an in-tree overlay the sheet was
+    // bounded by the room list's own container, so it stopped short of the
+    // screen's bottom edge (that pale strip under it) and the dim never
+    // reached the host's chrome.
+    <Modal
+      transparent
+      visible={isDrawerOpen}
+      animationType="none"
+      statusBarTranslucent
+      onRequestClose={closeDrawer}
+    >
+      <TouchableWithoutFeedback onPress={closeDrawer}>
+        <Animated.View
+          style={[styles.overlay, { opacity: overlayAnimation }]}
+        />
+      </TouchableWithoutFeedback>
+      {/* A bottom sheet rather than the old full-height right-hand drawer:
+        * three rows never needed the whole screen, and coming up from the
+        * bottom keeps them within thumb reach. Inset by 2pt all round so a
+        * sliver of the dimmed screen shows around it. */}
       <Animated.View
+        testID="header-menu-sheet"
+        onLayout={(e) => {
+          const measured = e.nativeEvent.layout.height;
+          if (measured > 0) {setSheetHeight(measured);}
+        }}
         style={[
-          styles.drawer,
-          { transform: [{ translateX: drawerTranslateX }] },
+          styles.sheet,
+          {
+            paddingBottom: insets.bottom + 20,
+            // Two entries rather than Animated.add: the parent's value is
+            // driven natively, and stacking the transforms keeps each node
+            // on its own driver instead of mixing them in one expression.
+            transform: [{ translateY: openTranslateY }, { translateY: dragY }],
+          },
         ]}
+        {...pan.panHandlers}
       >
-        {menuOptions.map((option, index) => (
-          <View key={index} style={styles.menuItemWrapper}>
-            <TouchableOpacity
-              style={styles.menuItem}
-              testID={`header-menu-${option.label}`}
-              onPress={() => {
-                option.onClick();
-                if (!option.closesDrawer) {
-                  closeDrawer();
-                }
-              }}
-            >
-              <View
-                style={{
-                  width: 22,
-                  alignItems: 'center',
+        {/* Full-width grab area, not just the 40pt pill: it claims the
+          * gesture the moment it is touched. */}
+        <View
+          testID="header-menu-grabber"
+          style={styles.grabArea}
+          {...handlePan.panHandlers}
+        >
+          <View style={styles.grabber} />
+        </View>
+        <View style={styles.card}>
+          {menuOptions.map((option, index) => (
+            <View key={index} style={styles.menuItemWrapper}>
+              <TouchableOpacity
+                style={styles.menuItem}
+                testID={`header-menu-${option.label}`}
+                activeOpacity={0.6}
+                onPress={() => {
+                  option.onClick();
+                  if (!option.closesDrawer) {
+                    closeDrawer();
+                  }
                 }}
               >
-                {option.icon}
-              </View>
-              <Text style={[styles.label, option?.styles]}>{option.label}</Text>
-            </TouchableOpacity>
-            {index < menuOptions.length - 1 && <View style={styles.divider} />}
-          </View>
-        ))}
+                <View style={styles.iconSlot}>{option.icon}</View>
+                <Text style={[styles.label, option?.styles]}>
+                  {option.label}
+                </Text>
+              </TouchableOpacity>
+              {index < menuOptions.length - 1 && (
+                <View style={styles.divider} />
+              )}
+            </View>
+          ))}
+        </View>
       </Animated.View>
-      {isDrawerOpen && (
-        <TouchableWithoutFeedback onPress={closeDrawer}>
-          <Animated.View
-            style={[styles.overlay, { opacity: overlayAnimation }]}
-          />
-        </TouchableWithoutFeedback>
-      )}
-    </>
+    </Modal>
   );
 };
 
@@ -214,40 +345,54 @@ const styles = StyleSheet.create({
   menuItem: {
     flexDirection: 'row',
     alignItems: 'center',
-    padding: 16,
+    paddingVertical: 18,
+    paddingHorizontal: 16,
+  },
+  iconSlot: {
+    width: 26,
+    alignItems: 'center',
   },
   label: {
     fontSize: 16,
-    marginLeft: 10,
+    fontWeight: '500',
+    color: '#141414',
+    marginLeft: 12,
   },
   divider: {
-    height: 1,
-    width: '100%',
-    backgroundColor: '#0052cd0d',
+    height: StyleSheet.hairlineWidth,
+    marginLeft: 54,
+    backgroundColor: '#E4E4E9',
   },
-  drawer: {
+  sheet: {
     position: 'absolute',
-    top: 0,
-    bottom: 0,
-    right: 0,
-    width: width * 0.7,
-    backgroundColor: '#fff',
-    padding: 20,
+    // Inset rather than flush: the dimmed screen stays visible as a thin
+    // line around the sheet.
+    left: 3,
+    right: 3,
+    bottom: 3,
+    paddingTop: 8,
+    backgroundColor: '#FFFFFF',
+    borderRadius: 20,
     shadowColor: '#000',
-    shadowOpacity: 0.3,
-    shadowOffset: { width: -2, height: 0 },
-    shadowRadius: 5,
-    elevation: 5,
+    shadowOpacity: 0.12,
+    shadowOffset: { width: 0, height: -3 },
+    shadowRadius: 12,
+    elevation: 12,
     zIndex: 999,
   },
-  drawerTitle: {
-    fontSize: 20,
-    fontWeight: 'bold',
-    marginBottom: 20,
+  grabArea: {
+    alignItems: 'center',
+    paddingTop: 6,
+    paddingBottom: 12,
+  },
+  grabber: {
+    width: 40,
+    height: 4,
+    borderRadius: 2,
+    backgroundColor: '#C9CBD1',
   },
-  drawerItem: {
-    fontSize: 18,
-    marginBottom: 10,
+  card: {
+    overflow: 'hidden',
   },
   overlay: {
     position: 'absolute',