@ethora/chat-component-rn 26.8.1 → 26.8.2

package/lib/module/components/Modals/ChatProfileModal/ChatProfileModal.js

@@ -1,51 +1,67 @@
 "use strict";
 
-import React, { useEffect, useMemo, useState } from 'react';
-import { CenterContainer, UserInfo, UserName, UserStatus, ModalContainerFullScreen, Label, BorderedContainer, LabelData, Divider } from '../styledModalComponents';
-import { Pressable, View, Text, ScrollView, Alert, Linking } from 'react-native';
-import ModalHeaderComponent from '../ModalHeaderComponent';
-import { ProfileImagePlaceholder } from '../../MainComponents/ProfileImagePlaceholder';
+/** @format */
+
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import { Alert, Animated, Keyboard, Linking, Pressable, StyleSheet, Text, TextInput, TouchableOpacity, View } from 'react-native';
 import { useDispatch, useSelector } from 'react-redux';
+import * as ImagePicker from 'expo-image-picker';
+import { useFileToken } from '../../../hooks/useFileToken';
+import { appendFileToken } from '../../../helpers/secureFileUrl';
+import { ModalContainerFullScreen } from '../styledModalComponents';
+import { ProfileImagePlaceholder } from '../../MainComponents/ProfileImagePlaceholder';
 import { getActiveRoom } from '../../../roomStore';
 import { uploadFile } from '../../../networking/api-requests/auth.api';
 import { useXmppClient } from '../../../context/xmppProvider';
-import { updateRoom } from '../../../roomStore/roomsSlice';
-import * as ImagePicker from 'expo-image-picker';
+import { deleteRoom, updateRoom } from '../../../roomStore/roomsSlice';
 import Loader from '../../styled/Loader';
-import Button from '../../styled/Button';
-import { DeleteIcon, MoreIcon, QrIcon } from '../../../assets/icons';
+import { AddNewIcon, DeleteIcon, EditIcon, LeaveIcon, ReportIcon, SearchIcon } from '../../../assets/icons';
 import { useChatSettingState } from '../../../hooks/useChatSettingState';
 import { chatTextStyle } from '../../../helpers/typography';
-import { useT } from '../../../i18n/useT';
 import { getElementFont } from '../../../helpers/getElementFont';
+import { getIconColor } from '../../../helpers/getIconColor';
 import { deleteRoomMember } from '../../../networking/api-requests/rooms.api';
 import { setActiveModal, setSelectedUser } from '../../../roomStore/chatSettingsSlice';
 import { MODAL_TYPES } from '../../../helpers/constants/MODAL_TYPES';
-import DropdownMenu from '../../DropdownMenu/DropdownMenu';
 import SelectUsersModal from '../SelectUsersModal/SelectUsersModal';
 import { useToast } from '../../../context/ToastContext';
+import { useT } from '../../../i18n/useT';
 import DeleteChatModal from './DeleteChatModal';
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import ReportChatModal from './ReportChatModal';
+import { ProfileHero, ProfileTopBar, useHeaderMetrics } from '../ProfileHeader/ProfileHeader';
+import ProfileMenu from '../ProfileHeader/ProfileMenu';
+
+/**
+ * Where the header should sit when search opens: tucked away at the
+ * collapsed offset when the picture is still expanded, and left exactly
+ * where it is when the user already scrolled it away.
+ */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const searchScrollTarget = (isCollapsed, collapseDistance) => isCollapsed ? null : collapseDistance;
+
+/** Two uppercase letters for a chat without a picture, same rule the
+ * avatar placeholder uses for people. */
+export const chatInitials = name => {
+  const words = (name || '').trim().split(/\s+/).filter(Boolean);
+  const letters = (words.length >= 2 ? [words[0][0], words[1][0]] : [words[0]?.[0], words[0]?.[1]]).filter(c => !!c && /[\p{L}\p{N}]/u.test(c));
+  return letters.join('').toUpperCase();
+};
 const ChatProfileModal = ({
   handleCloseModal
 }) => {
+  const t = useT();
   const [loading, setLoading] = useState(false);
-  const [visible, setVisible] = useState(false);
-  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [isDeleteOpen, setIsDeleteOpen] = useState(false);
+  const [isReportOpen, setIsReportOpen] = useState(false);
+  const [memberQuery, setMemberQuery] = useState('');
+  const [isSearchOpen, setIsSearchOpen] = useState(false);
+  // Measured, not guessed: this screen renders inside whatever frame the
+  // host gives it (the demo app keeps its own tab bar above), so the
+  // window height would overshoot.
+  const [viewportHeight, setViewportHeight] = useState(0);
   const {
     showToast
   } = useToast();
-  const t = useT();
-  const chatMenuOptions = useMemo(() => [{
-    label: t('action.deleteChat'),
-    icon: /*#__PURE__*/_jsx(DeleteIcon, {}),
-    onClick: () => {
-      setIsModalOpen(true);
-    },
-    styles: {
-      color: 'red'
-    }
-  }], [t]);
   const dispatch = useDispatch();
   const {
     client
@@ -55,6 +71,23 @@ const ChatProfileModal = ({
     config
   } = useChatSettingState();
   const activeRoom = useSelector(state => getActiveRoom(state));
+  const fileToken = useFileToken();
+
+  // Drives both the hero's parallax and the collapsed bar's fade-in. One
+  // shared value, written natively by the ScrollView.
+  const scrollY = useRef(new Animated.Value(0)).current;
+  const scrollRef = useRef(null);
+  const searchInputRef = useRef(null);
+  const {
+    collapseDistance
+  } = useHeaderMetrics();
+  // `scrollY` is driven natively, so its value can't be read back with
+  // addListener. The Animated.event's `listener` still fires on the JS
+  // side, which is enough to know which state the header is in.
+  const [isCollapsed, setIsCollapsed] = useState(false);
+  // Set when search collapsed the header itself, so only then does
+  // dismissing search (or the keyboard) expand it again.
+  const collapsedForSearchRef = useRef(false);
 
   // Pull live member list from the MUC when the modal opens — REST
   // hydration only fills the *count* (item.participants /
@@ -69,6 +102,11 @@ const ChatProfileModal = ({
       }
     }
   }, [client, activeRoom?.jid]);
+  useEffect(() => {
+    if (!activeRoom) {
+      dispatch(setActiveModal(undefined));
+    }
+  }, [activeRoom, dispatch]);
   const onUpload = async () => {
     let loadingSet = false;
     try {
@@ -143,7 +181,17 @@ const ChatProfileModal = ({
       }
     }
   };
-  const handleDeleteUser = async userId => {
+  const onRemoveIcon = () => {
+    client?.setRoomImageStanza(activeRoom?.jid || '', '', 'icon', 'none');
+    dispatch(updateRoom({
+      jid: activeRoom?.jid || '',
+      updates: {
+        icon: null
+      }
+    }));
+  };
+  const handleDeleteUser = async user => {
+    const userId = user.xmppUsername;
     try {
       await deleteRoomMember({
         roomId: activeRoom?.jid?.split('@')[0] || '',
@@ -152,7 +200,7 @@ const ChatProfileModal = ({
       dispatch(updateRoom({
         jid: activeRoom?.jid || '',
         updates: {
-          roomMembers: activeRoom?.roomMembers?.filter(user => user.xmppUsername !== userId)
+          roomMembers: activeRoom?.roomMembers?.filter(member => member.xmppUsername !== userId)
         }
       }));
       showToast({
@@ -173,14 +221,15 @@ const ChatProfileModal = ({
       });
     }
   };
-  const onRemoveClick = async () => {
-    client?.setRoomImageStanza(activeRoom?.jid || '', '', 'icon', 'none');
-    dispatch(updateRoom({
-      jid: activeRoom?.jid || '',
-      updates: {
-        icon: null
-      }
-    }));
+  const confirmRemoveMember = user => {
+    Alert.alert(t('modal.chatProfile.removeMember'), `${user.firstName} ${user.lastName}`.trim(), [{
+      text: t('action.cancel'),
+      style: 'cancel'
+    }, {
+      text: t('action.delete'),
+      style: 'destructive',
+      onPress: () => handleDeleteUser(user)
+    }]);
   };
   const handleUserAvatarClick = user => {
     dispatch(setActiveModal(MODAL_TYPES.PROFILE));
@@ -194,154 +243,311 @@ const ChatProfileModal = ({
       refreshToken: ''
     }));
   };
-  const menuOptions = useMemo(() => userId => [{
-    label: t('action.appointAsAdmin'),
-    icon: null,
-    onClick: () => {
-      dispatch(setActiveModal(MODAL_TYPES.PROFILE));
-      console.log('Profile clicked');
+
+  // Leaving is XMPP-side (an unavailable presence to the MUC); dropping the
+  // room from the store is what actually takes the user out of the chat in
+  // the UI, and the `!activeRoom` effect above then closes this modal.
+  const handleLeave = () => {
+    Alert.alert(t('modal.leaveChat.title'), t('modal.leaveChat.description'), [{
+      text: t('action.cancel'),
+      style: 'cancel'
+    }, {
+      text: t('action.leave'),
+      style: 'destructive',
+      onPress: () => {
+        try {
+          client?.leaveTheRoomStanza?.(activeRoom?.jid || '');
+        } catch (error) {
+          console.error('Failed to leave the room:', error);
+        }
+        dispatch(deleteRoom({
+          jid: activeRoom?.jid || ''
+        }));
+        handleCloseModal?.();
+      }
+    }]);
+  };
+  const isModerator = activeRoom?.role === 'moderator';
+  const canEditIcon = !config?.disableChatInfo?.disableIconEdit && activeRoom?.role !== 'participant';
+  const canAddMembers = isModerator && activeRoom?.type === 'group';
+  const canDeleteChat = isModerator && activeRoom?.type !== 'private';
+  const hasIcon = !!activeRoom?.icon;
+  const scrollHeaderTo = y => scrollRef.current?.scrollTo?.({
+    y,
+    animated: true
+  });
+
+  // Opening search from an expanded header tucks the picture away so the
+  // results and the keyboard have room; from an already-collapsed header
+  // it just opens the field. Whatever it collapsed, it puts back.
+  const openMemberSearch = () => {
+    const target = searchScrollTarget(isCollapsed, collapseDistance);
+    if (target !== null) {
+      collapsedForSearchRef.current = true;
+      scrollHeaderTo(target);
+    }
+    setIsSearchOpen(true);
+    setTimeout(() => searchInputRef.current?.focus(), 50);
+  };
+  const restoreHeader = () => {
+    if (!collapsedForSearchRef.current) {
+      return;
     }
-  }, {
-    label: t('action.unban'),
-    icon: null,
-    onClick: () => {
-      dispatch(setActiveModal(MODAL_TYPES.SETTINGS));
-      console.log('Settings clicked');
+    collapsedForSearchRef.current = false;
+    scrollHeaderTo(0);
+  };
+  const closeMemberSearch = () => {
+    setMemberQuery('');
+    setIsSearchOpen(false);
+    Keyboard.dismiss();
+    restoreHeader();
+  };
+
+  // Putting the keyboard away is the other way out of search, so it
+  // restores the header too — the field stays, results and all.
+  useEffect(() => {
+    if (!isSearchOpen) {
+      return undefined;
     }
+    const sub = Keyboard.addListener('keyboardDidHide', restoreHeader);
+    return () => sub.remove();
+  }, [isSearchOpen]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  const heroActions = useMemo(() => [{
+    key: 'search',
+    label: t('action.search'),
+    icon: color => /*#__PURE__*/_jsx(SearchIcon, {
+      color: color
+    }),
+    onPress: openMemberSearch
   }, {
-    label: t('action.delete'),
-    icon: null,
-    onClick: e => {
-      e?.preventDefault();
-      handleDeleteUser(userId);
+    key: 'leave',
+    label: t('action.leave'),
+    icon: color => /*#__PURE__*/_jsx(LeaveIcon, {
+      color: color
+    }),
+    onPress: handleLeave
+  }, {
+    key: 'report',
+    label: t('action.report'),
+    icon: color => /*#__PURE__*/_jsx(ReportIcon, {
+      color: color
+    }),
+    onPress: () => setIsReportOpen(true)
+  }], [t, activeRoom?.jid] // eslint-disable-line react-hooks/exhaustive-deps
+  );
+
+  // "…" menu. Edit is the chat picture — the only chat detail this SDK can
+  // actually change (there is no update-chat endpoint for title/description),
+  // so it is only offered when the picture is editable.
+  const menuItems = useMemo(() => {
+    const items = [];
+    if (canEditIcon) {
+      items.push({
+        key: 'edit',
+        label: t('action.edit'),
+        icon: /*#__PURE__*/_jsx(EditIcon, {
+          color: "#141414",
+          width: 18,
+          height: 18
+        }),
+        onPress: onUpload
+      });
+      if (hasIcon) {
+        items.push({
+          key: 'remove-photo',
+          label: t('modal.chatProfile.removePhoto'),
+          icon: /*#__PURE__*/_jsx(DeleteIcon, {
+            width: 18,
+            height: 18
+          }),
+          onPress: onRemoveIcon
+        });
+      }
     }
-  }], [t]);
-  useEffect(() => {
-    if (!activeRoom) {
-      dispatch(setActiveModal(undefined));
+    // The hero's Search button is off-screen once collapsed, so the menu
+    // carries it — the design's collapsed menu does the same.
+    if (isCollapsed) {
+      items.push({
+        key: 'search',
+        label: t('action.search'),
+        icon: /*#__PURE__*/_jsx(SearchIcon, {
+          color: "#141414",
+          width: 18,
+          height: 18
+        }),
+        onPress: openMemberSearch
+      });
     }
-  }, [activeRoom, dispatch]);
+    items.push({
+      key: 'report',
+      label: t('action.report'),
+      icon: /*#__PURE__*/_jsx(ReportIcon, {
+        color: "#141414",
+        width: 18,
+        height: 18
+      }),
+      onPress: () => setIsReportOpen(true)
+    });
+    if (canDeleteChat) {
+      items.push({
+        key: 'delete-and-leave',
+        label: t('action.deleteAndLeave'),
+        icon: /*#__PURE__*/_jsx(DeleteIcon, {
+          width: 18,
+          height: 18
+        }),
+        destructive: true,
+        onPress: () => setIsDeleteOpen(true)
+      });
+    }
+    return items;
+  }, [canEditIcon, canDeleteChat, hasIcon, isCollapsed, t]); // eslint-disable-line react-hooks/exhaustive-deps
+
   if (!activeRoom) {
     return null;
   }
+  const title = activeRoom.title || activeRoom.name;
+  const memberCount = activeRoom.usersCnt ?? 0;
+  const subtitle = t(memberCount === 1 ? 'modal.chatProfile.memberCountSingular' : 'modal.chatProfile.memberCountPlural', {
+    count: memberCount
+  });
+  const heroImage = appendFileToken(activeRoom.icon, fileToken) || null;
+  // A single flat colour behind the initials — the config's avatar colour
+  // when set, otherwise the primary. (The old per-name hash colour is what
+  // made the header read as two different greens next to the members' own
+  // avatars.)
+  const heroColor = config?.colors?.avatar || getIconColor(config);
+  const members = activeRoom.roomMembers ?? [];
+  const query = memberQuery.trim().toLowerCase();
+  const visibleMembers = query ? members.filter(user => `${user.firstName ?? ''} ${user.lastName ?? ''}`.toLowerCase().includes(query)) : members;
   return /*#__PURE__*/_jsxs(ModalContainerFullScreen, {
-    style: {
-      position: 'relative'
-    },
-    children: [/*#__PURE__*/_jsx(ModalHeaderComponent, {
-      handleCloseModal: handleCloseModal,
-      headerTitle: t('modal.chatProfile.title'),
-      titleStyle: chatTextStyle(config?.typography?.profile?.screenTitle),
-      rightMenu: /*#__PURE__*/_jsxs(_Fragment, {
-        children: [activeRoom?.type === 'public' && /*#__PURE__*/_jsx(Button, {
-          EndIcon: /*#__PURE__*/_jsx(QrIcon, {}),
-          onPress: () => setVisible(true)
-        }), activeRoom.role === 'moderator' && activeRoom.type !== 'private' && /*#__PURE__*/_jsx(DropdownMenu, {
-          position: "right",
-          options: chatMenuOptions,
-          openButton: /*#__PURE__*/_jsx(Button, {
-            style: {
-              padding: 8,
-              height: 40
-            },
-            EndIcon: /*#__PURE__*/_jsx(MoreIcon, {}),
-            unstyled: true
-          })
-        })]
-      })
-    }), /*#__PURE__*/_jsxs(CenterContainer, {
-      children: [/*#__PURE__*/_jsx(ProfileImagePlaceholder, {
-        name: activeRoom.title || activeRoom.name,
-        icon: activeRoom.icon
-        // Two gates control whether the icon is editable:
-        //   1. role — only non-participants could edit before.
-        //   2. NEW: `disableChatInfo.disableIconEdit` — hard kill from
-        //      config so a consumer can make the icon read-only for
-        //      everyone (e.g. branded rooms, patient-facing apps).
-        // Both must allow it for the picker/remove affordances to show.
-        ,
-        upload: {
-          onUpload,
-          active: !config?.disableChatInfo?.disableIconEdit && activeRoom?.role !== 'participant'
-        },
-        remove: {
-          enabled: !config?.disableChatInfo?.disableIconEdit,
-          onRemoveClick
-        },
-        role: activeRoom?.role,
-        size: 128
-      }), /*#__PURE__*/_jsxs(UserInfo, {
-        children: [/*#__PURE__*/_jsx(UserName, {
-          fontSize: config?.typography?.profile?.title?.fontSize,
-          fontWeight: config?.typography?.profile?.title?.fontWeight,
-          children: activeRoom.title || activeRoom.name
-        }), /*#__PURE__*/_jsx(UserStatus, {
-          style: getElementFont(config, 'profileStatus'),
-          children: t(activeRoom.usersCnt > 1 ? 'modal.chatProfile.memberCountPlural' : 'modal.chatProfile.memberCountSingular', {
-            count: activeRoom.usersCnt
-          })
-        })]
-      }), activeRoom.role === 'moderator' && activeRoom.type === 'group' && /*#__PURE__*/_jsx(_Fragment, {
-        children: /*#__PURE__*/_jsx(SelectUsersModal, {})
-      }), !config?.disableChatInfo?.disableDescription && /*#__PURE__*/_jsxs(BorderedContainer, {
-        children: [/*#__PURE__*/_jsx(LabelData, {
-          style: getElementFont(config, 'profileSectionLabel'),
-          children: t('modal.chatProfile.description')
-        }), /*#__PURE__*/_jsx(Label, {
-          children: activeRoom?.description || '—'
-        })]
-      }), !config?.disableChatInfo?.disableType && /*#__PURE__*/_jsxs(BorderedContainer, {
-        children: [/*#__PURE__*/_jsx(LabelData, {
-          style: getElementFont(config, 'profileSectionLabel'),
-          children: t('modal.chatProfile.chatType')
-        }), /*#__PURE__*/_jsx(Label, {
-          children: activeRoom.type || '—'
-        })]
-      }), !config?.disableChatInfo?.hideMembers && /*#__PURE__*/_jsx(BorderedContainer, {
-        style: {
-          paddingHorizontal: 16,
-          paddingVertical: 8
-        },
-        children: loading ? /*#__PURE__*/_jsx(Loader, {}) : (activeRoom?.roomMembers?.length ?? 0) === 0 ? /*#__PURE__*/_jsx(Label, {
-          style: {
-            opacity: 0.6,
-            textAlign: 'center',
-            paddingVertical: 8
-          },
-          children: t('modal.chatProfile.memberListUnavailable')
-        }) : /*#__PURE__*/_jsx(ScrollView, {
-          style: {
-            maxHeight: 400
-          },
-          showsVerticalScrollIndicator: true,
-          nestedScrollEnabled: true,
-          children: activeRoom?.roomMembers?.map((user, index) => /*#__PURE__*/_jsxs(View, {
-            style: {
-              flexDirection: 'column',
-              alignItems: 'flex-start'
-            },
-            children: [/*#__PURE__*/_jsxs(View, {
-              style: {
-                flexDirection: 'row',
-                justifyContent: 'flex-start',
-                paddingHorizontal: 8,
-                paddingVertical: 0,
-                alignItems: 'center',
-                width: '100%'
+    style: styles.screen,
+    children: [/*#__PURE__*/_jsxs(Animated.ScrollView, {
+      ref: scrollRef,
+      style: styles.scroll
+      // The collapsed state has to be reachable even when the member list
+      // is short: without this the content was shorter than the viewport,
+      // so the scroll had nowhere to go and simply bounced back.
+      ,
+      contentContainerStyle: [styles.scrollContent, viewportHeight > 0 && {
+        minHeight: viewportHeight + collapseDistance
+      }],
+      onLayout: e => setViewportHeight(e.nativeEvent.layout.height),
+      showsVerticalScrollIndicator: false,
+      keyboardShouldPersistTaps: "handled",
+      scrollEventThrottle: 16,
+      onScroll: Animated.event([{
+        nativeEvent: {
+          contentOffset: {
+            y: scrollY
+          }
+        }
+      }], {
+        useNativeDriver: true,
+        listener: e => {
+          const y = e?.nativeEvent?.contentOffset?.y ?? 0;
+          setIsCollapsed(y >= collapseDistance - 8);
+        }
+      }),
+      children: [/*#__PURE__*/_jsx(ProfileHero, {
+        title: title,
+        subtitle: subtitle,
+        imageUri: heroImage,
+        fallbackColor: heroColor,
+        initials: chatInitials(title),
+        scrollY: scrollY,
+        actions: heroActions,
+        titleStyle: chatTextStyle(config?.typography?.profile?.title),
+        subtitleStyle: getElementFont(config, 'profileStatus')
+      }), /*#__PURE__*/_jsxs(View, {
+        style: styles.body,
+        children: [!config?.disableChatInfo?.disableDescription && /*#__PURE__*/_jsxs(View, {
+          style: styles.card,
+          children: [/*#__PURE__*/_jsx(Text, {
+            style: [styles.cardLabel, getElementFont(config, 'profileSectionLabel')],
+            children: t('modal.chatProfile.description')
+          }), /*#__PURE__*/_jsx(Text, {
+            style: styles.cardValue,
+            children: activeRoom.description || '—'
+          })]
+        }), !config?.disableChatInfo?.disableType && /*#__PURE__*/_jsxs(View, {
+          style: styles.card,
+          children: [/*#__PURE__*/_jsx(Text, {
+            style: [styles.cardLabel, getElementFont(config, 'profileSectionLabel')],
+            children: t('modal.chatProfile.chatType')
+          }), /*#__PURE__*/_jsx(Text, {
+            style: styles.cardValue,
+            children: activeRoom.type || '—'
+          })]
+        }), !config?.disableChatInfo?.hideMembers && /*#__PURE__*/_jsxs(View, {
+          style: styles.card,
+          children: [canAddMembers && /*#__PURE__*/_jsx(SelectUsersModal, {
+            trigger: open => /*#__PURE__*/_jsxs(TouchableOpacity, {
+              testID: "chat-profile-add-members",
+              activeOpacity: 0.7,
+              style: styles.addMembersRow,
+              onPress: open,
+              children: [/*#__PURE__*/_jsx(AddNewIcon, {
+                color: getIconColor(config)
+              }), /*#__PURE__*/_jsx(Text, {
+                style: styles.addMembersLabel,
+                children: t('modal.chatProfile.addMembers')
+              })]
+            })
+          }), /*#__PURE__*/_jsx(Text, {
+            style: [styles.cardLabel, getElementFont(config, 'profileSectionLabel')],
+            children: t('modal.chatProfile.membersLabel', {
+              count: memberCount
+            })
+          }), isSearchOpen && /*#__PURE__*/_jsxs(View, {
+            style: styles.searchRow,
+            children: [/*#__PURE__*/_jsx(SearchIcon, {
+              color: "#8C8C8C",
+              width: 18,
+              height: 18
+            }), /*#__PURE__*/_jsx(TextInput, {
+              testID: "chat-profile-member-search",
+              ref: searchInputRef,
+              style: styles.searchInput,
+              value: memberQuery,
+              onChangeText: setMemberQuery,
+              placeholder: t('search.members'),
+              placeholderTextColor: "#8C8C8C",
+              autoCorrect: false,
+              returnKeyType: "search"
+            }), /*#__PURE__*/_jsx(TouchableOpacity, {
+              testID: "chat-profile-search-close",
+              activeOpacity: 0.7,
+              hitSlop: {
+                top: 8,
+                bottom: 8,
+                left: 8,
+                right: 8
               },
+              onPress: closeMemberSearch,
+              children: /*#__PURE__*/_jsx(Text, {
+                style: styles.searchClose,
+                children: "\xD7"
+              })
+            })]
+          }), loading ? /*#__PURE__*/_jsx(Loader, {}) : visibleMembers.length === 0 ? /*#__PURE__*/_jsx(Text, {
+            testID: "chat-profile-members-empty",
+            style: styles.emptyMembers,
+            children: members.length === 0 ? t('modal.chatProfile.membersUnavailable') : t('search.noResults')
+          }) : visibleMembers.map((user, index) => {
+            const banned = user.ban_status === 'banned';
+            const roleLabel = user.role && user.role !== 'none' && user.role !== 'participant' ? user.role : null;
+            return /*#__PURE__*/_jsxs(View, {
+              style: [styles.memberRow, index > 0 && styles.memberDivider],
               children: [/*#__PURE__*/_jsxs(Pressable, {
-                style: {
-                  flexDirection: 'row',
-                  alignItems: 'center',
-                  justifyContent: 'flex-start',
-                  gap: 16
-                }
-                // `disableChatInfo.disableMemberTap` blocks the
-                // tap entirely so the user-profile popup never
-                // opens. `disableMemberProfileActions` only hid
-                // the action buttons INSIDE that popup, leaving
-                // the popup itself to open on tap — this gate
-                // closes the door. Customer-reported #16.
+                style: styles.memberMain
+                // `disableChatInfo.disableMemberTap` blocks the tap
+                // entirely so the user-profile popup never opens.
+                // `disableMemberProfileActions` only hid the action
+                // buttons INSIDE that popup, leaving the popup itself
+                // to open on tap — this gate closes the door.
+                // Customer-reported #16.
                 ,
                 onPress: config?.disableChatInfo?.disableMemberTap ? undefined : () => handleUserAvatarClick(user),
                 disabled: !!config?.disableChatInfo?.disableMemberTap,
@@ -349,51 +555,187 @@ const ChatProfileModal = ({
                   name: `${user.firstName} ${user.lastName}`,
                   size: 40
                 }), /*#__PURE__*/_jsxs(View, {
-                  style: {
-                    flexDirection: 'column',
-                    gap: 2,
-                    alignItems: 'flex-start',
-                    justifyContent: 'center'
-                  },
-                  children: [/*#__PURE__*/_jsxs(Label, {
-                    style: [{
-                      fontSize: 16,
-                      fontWeight: 600
-                    }, chatTextStyle(config?.typography?.profile?.memberName)],
+                  style: styles.memberText,
+                  children: [/*#__PURE__*/_jsxs(Text, {
+                    numberOfLines: 1,
+                    style: [styles.memberName, chatTextStyle(config?.typography?.profile?.memberName)],
                     children: [user.firstName, " ", user.lastName]
-                  }), user.last_active && /*#__PURE__*/_jsx(LabelData, {
-                    style: getElementFont(config, 'profileSectionLabel'),
+                  }), !!user.last_active && /*#__PURE__*/_jsx(Text, {
+                    numberOfLines: 1,
+                    style: [styles.memberStatus, getElementFont(config, 'profileSectionLabel')],
                     children: new Date(user.last_active * 1000).toLocaleString()
                   })]
                 })]
-              }), user.role && user.role !== 'none' && /*#__PURE__*/_jsx(Text, {
-                style: {
-                  backgroundColor: user.ban_status !== 'banned' ? '#F3F6FC' : '#FFEBEE',
-                  color: user.ban_status !== 'banned' ? '#0052CD' : '#F44336',
-                  padding: 5,
-                  borderRadius: 16,
-                  fontSize: 12
+              }), (banned || roleLabel) && /*#__PURE__*/_jsx(Text, {
+                style: [styles.memberRole, banned && styles.memberBanned],
+                children: banned ? t('status.banned') : roleLabel
+              }), isModerator && activeRoom.type !== 'private' && stateUser.xmppUsername !== user.xmppUsername && /*#__PURE__*/_jsx(TouchableOpacity, {
+                testID: `chat-profile-remove-${user.xmppUsername}`,
+                activeOpacity: 0.7,
+                hitSlop: {
+                  top: 8,
+                  bottom: 8,
+                  left: 8,
+                  right: 8
                 },
-                children: user.role
-              }), stateUser.xmppUsername !== user.xmppUsername && activeRoom.role === 'moderator' && activeRoom.type !== 'private' && /*#__PURE__*/_jsx(DropdownMenu, {
-                options: menuOptions(user.xmppUsername),
-                openButton: /*#__PURE__*/_jsx(Button, {
-                  onPress: () => {},
-                  children: /*#__PURE__*/_jsx(Text, {
-                    children: t('action.moreOptions')
-                  })
-                }),
-                onClose: () => console.log('Dropdown closed')
+                style: styles.memberRemove,
+                onPress: () => confirmRemoveMember(user),
+                children: /*#__PURE__*/_jsx(DeleteIcon, {
+                  width: 20,
+                  height: 20
+                })
               })]
-            }), index < (activeRoom?.roomMembers?.length || 0) - 1 && /*#__PURE__*/_jsx(Divider, {})]
-          }, user.xmppUsername))
-        })
+            }, user.xmppUsername);
+          })]
+        })]
       })]
+    }), /*#__PURE__*/_jsx(ProfileTopBar, {
+      title: title,
+      subtitle: subtitle,
+      imageUri: heroImage,
+      fallbackColor: heroColor,
+      initials: chatInitials(title),
+      scrollY: scrollY,
+      onBack: handleCloseModal,
+      titleStyle: chatTextStyle(config?.typography?.profile?.screenTitle),
+      menu: /*#__PURE__*/_jsx(ProfileMenu, {
+        items: menuItems
+      })
     }), /*#__PURE__*/_jsx(DeleteChatModal, {
-      isModalOpen: isModalOpen,
-      setIsModalOpen: setIsModalOpen
+      isModalOpen: isDeleteOpen,
+      setIsModalOpen: setIsDeleteOpen
+    }), /*#__PURE__*/_jsx(ReportChatModal, {
+      visible: isReportOpen,
+      onClose: () => setIsReportOpen(false)
     })]
   });
 };
+const styles = StyleSheet.create({
+  screen: {
+    position: 'relative',
+    backgroundColor: '#F2F3F5'
+  },
+  scroll: {
+    width: '100%',
+    flex: 1
+  },
+  scrollContent: {
+    paddingBottom: 32
+  },
+  body: {
+    padding: 12,
+    gap: 12
+  },
+  card: {
+    backgroundColor: '#FFFFFF',
+    borderRadius: 14,
+    padding: 16,
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 1
+    },
+    shadowOpacity: 0.05,
+    shadowRadius: 4,
+    elevation: 1
+  },
+  cardLabel: {
+    color: '#8C8C8C',
+    fontSize: 14
+  },
+  cardValue: {
+    color: '#141414',
+    fontSize: 16,
+    marginTop: 4
+  },
+  addMembersRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 12,
+    paddingBottom: 14,
+    marginBottom: 10,
+    borderBottomWidth: StyleSheet.hairlineWidth,
+    borderBottomColor: '#EFEFF2'
+  },
+  addMembersLabel: {
+    fontSize: 16,
+    fontWeight: '500',
+    color: '#141414'
+  },
+  searchRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8,
+    marginTop: 10,
+    paddingHorizontal: 12,
+    height: 40,
+    borderRadius: 12,
+    backgroundColor: '#F2F3F5'
+  },
+  searchInput: {
+    flex: 1,
+    fontSize: 15,
+    color: '#141414',
+    padding: 0
+  },
+  searchClose: {
+    fontSize: 22,
+    lineHeight: 24,
+    color: '#8C8C8C'
+  },
+  emptyMembers: {
+    opacity: 0.6,
+    textAlign: 'center',
+    paddingVertical: 8,
+    color: '#141414'
+  },
+  memberRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingVertical: 10
+  },
+  memberDivider: {
+    borderTopWidth: StyleSheet.hairlineWidth,
+    borderTopColor: '#EFEFF2'
+  },
+  memberMain: {
+    flex: 1,
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 12
+  },
+  memberText: {
+    flex: 1
+  },
+  memberName: {
+    fontSize: 16,
+    fontWeight: '600',
+    color: '#141414'
+  },
+  memberStatus: {
+    fontSize: 13,
+    color: '#8C8C8C',
+    marginTop: 2
+  },
+  memberRole: {
+    fontSize: 13,
+    color: '#8C8C8C',
+    marginLeft: 8
+  },
+  memberBanned: {
+    color: '#E53935'
+  },
+  memberRemove: {
+    marginLeft: 12
+  },
+  menuButton: {
+    width: 40,
+    height: 40,
+    borderRadius: 20,
+    backgroundColor: 'rgba(0,0,0,0.28)',
+    alignItems: 'center',
+    justifyContent: 'center'
+  }
+});
 export default ChatProfileModal;
 //# sourceMappingURL=ChatProfileModal.js.map