@ethora/chat-component-rn 26.7.4 → 26.7.5

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

@@ -3,72 +3,55 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.searchScrollTarget = exports.default = exports.chatInitials = void 0;
+exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
-var _reactNative = require("react-native");
-var _reactRedux = require("react-redux");
-var ImagePicker = _interopRequireWildcard(require("expo-image-picker"));
 var _useFileToken = require("../../../hooks/useFileToken");
 var _secureFileUrl = require("../../../helpers/secureFileUrl");
 var _styledModalComponents = require("../styledModalComponents");
+var _reactNative = require("react-native");
+var _ModalHeaderComponent = _interopRequireDefault(require("../ModalHeaderComponent"));
 var _ProfileImagePlaceholder = require("../../MainComponents/ProfileImagePlaceholder");
+var _reactRedux = require("react-redux");
 var _roomStore = require("../../../roomStore");
 var _auth = require("../../../networking/api-requests/auth.api");
 var _xmppProvider = require("../../../context/xmppProvider");
 var _roomsSlice = require("../../../roomStore/roomsSlice");
+var ImagePicker = _interopRequireWildcard(require("expo-image-picker"));
 var _Loader = _interopRequireDefault(require("../../styled/Loader"));
+var _Button = _interopRequireDefault(require("../../styled/Button"));
 var _icons = require("../../../assets/icons");
 var _useChatSettingState = require("../../../hooks/useChatSettingState");
 var _typography = require("../../../helpers/typography");
 var _getElementFont = require("../../../helpers/getElementFont");
-var _getIconColor = require("../../../helpers/getIconColor");
 var _rooms = require("../../../networking/api-requests/rooms.api");
 var _chatSettingsSlice = require("../../../roomStore/chatSettingsSlice");
 var _MODAL_TYPES = require("../../../helpers/constants/MODAL_TYPES");
+var _DropdownMenu = _interopRequireDefault(require("../../DropdownMenu/DropdownMenu"));
 var _SelectUsersModal = _interopRequireDefault(require("../SelectUsersModal/SelectUsersModal"));
 var _ToastContext = require("../../../context/ToastContext");
-var _useT = require("../../../i18n/useT");
 var _DeleteChatModal = _interopRequireDefault(require("./DeleteChatModal"));
-var _ReportChatModal = _interopRequireDefault(require("./ReportChatModal"));
-var _ProfileHeader = require("../ProfileHeader/ProfileHeader");
-var _ProfileMenu = _interopRequireDefault(require("../ProfileHeader/ProfileMenu"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
-/** @format */
-
-/**
- * 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.
- */
-const searchScrollTarget = (isCollapsed, collapseDistance) => isCollapsed ? null : collapseDistance;
-
-/** Two uppercase letters for a chat without a picture, same rule the
- * avatar placeholder uses for people. */
-exports.searchScrollTarget = searchScrollTarget;
-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();
-};
-exports.chatInitials = chatInitials;
 const ChatProfileModal = ({
   handleCloseModal
 }) => {
-  const t = (0, _useT.useT)();
   const [loading, setLoading] = (0, _react.useState)(false);
-  const [isDeleteOpen, setIsDeleteOpen] = (0, _react.useState)(false);
-  const [isReportOpen, setIsReportOpen] = (0, _react.useState)(false);
-  const [memberQuery, setMemberQuery] = (0, _react.useState)('');
-  const [isSearchOpen, setIsSearchOpen] = (0, _react.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] = (0, _react.useState)(0);
+  const [visible, setVisible] = (0, _react.useState)(false);
+  const [isModalOpen, setIsModalOpen] = (0, _react.useState)(false);
   const {
     showToast
   } = (0, _ToastContext.useToast)();
+  const chatMenuOptions = (0, _react.useMemo)(() => [{
+    label: 'Delete chat',
+    icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.DeleteIcon, {}),
+    onClick: () => {
+      setIsModalOpen(true);
+    },
+    styles: {
+      color: 'red'
+    }
+  }], []);
   const dispatch = (0, _reactRedux.useDispatch)();
   const {
     client
@@ -80,22 +63,6 @@ const ChatProfileModal = ({
   const activeRoom = (0, _reactRedux.useSelector)(state => (0, _roomStore.getActiveRoom)(state));
   const fileToken = (0, _useFileToken.useFileToken)();
 
-  // Drives both the hero's parallax and the collapsed bar's fade-in. One
-  // shared value, written natively by the ScrollView.
-  const scrollY = (0, _react.useRef)(new _reactNative.Animated.Value(0)).current;
-  const scrollRef = (0, _react.useRef)(null);
-  const searchInputRef = (0, _react.useRef)(null);
-  const {
-    collapseDistance
-  } = (0, _ProfileHeader.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] = (0, _react.useState)(false);
-  // Set when search collapsed the header itself, so only then does
-  // dismissing search (or the keyboard) expand it again.
-  const collapsedForSearchRef = (0, _react.useRef)(false);
-
   // Pull live member list from the MUC when the modal opens — REST
   // hydration only fills the *count* (item.participants /
   // item.members.length); the actual roster comes from a `getRoomMembers`
@@ -109,11 +76,6 @@ const ChatProfileModal = ({
       }
     }
   }, [client, activeRoom?.jid]);
-  (0, _react.useEffect)(() => {
-    if (!activeRoom) {
-      dispatch((0, _chatSettingsSlice.setActiveModal)(undefined));
-    }
-  }, [activeRoom, dispatch]);
   const onUpload = async () => {
     let loadingSet = false;
     try {
@@ -126,7 +88,7 @@ const ChatProfileModal = ({
       const perm = await ImagePicker.requestMediaLibraryPermissionsAsync();
       if (!perm.granted) {
         _reactNative.Alert.alert('Permission required', 'Photo library permission is needed to select images.', [{
-          text: t('action.cancel'),
+          text: 'Cancel',
           onPress: () => setLoading(false),
           style: 'cancel'
         }, {
@@ -188,17 +150,7 @@ const ChatProfileModal = ({
       }
     }
   };
-  const onRemoveIcon = () => {
-    client?.setRoomImageStanza(activeRoom?.jid || '', '', 'icon', 'none');
-    dispatch((0, _roomsSlice.updateRoom)({
-      jid: activeRoom?.jid || '',
-      updates: {
-        icon: null
-      }
-    }));
-  };
-  const handleDeleteUser = async user => {
-    const userId = user.xmppUsername;
+  const handleDeleteUser = async userId => {
     try {
       await (0, _rooms.deleteRoomMember)({
         roomId: activeRoom?.jid?.split('@')[0] || '',
@@ -207,7 +159,7 @@ const ChatProfileModal = ({
       dispatch((0, _roomsSlice.updateRoom)({
         jid: activeRoom?.jid || '',
         updates: {
-          roomMembers: activeRoom?.roomMembers?.filter(member => member.xmppUsername !== userId)
+          roomMembers: activeRoom?.roomMembers?.filter(user => user.xmppUsername !== userId)
         }
       }));
       showToast({
@@ -226,15 +178,14 @@ const ChatProfileModal = ({
       });
     }
   };
-  const confirmRemoveMember = user => {
-    _reactNative.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 onRemoveClick = async () => {
+    client?.setRoomImageStanza(activeRoom?.jid || '', '', 'icon', 'none');
+    dispatch((0, _roomsSlice.updateRoom)({
+      jid: activeRoom?.jid || '',
+      updates: {
+        icon: null
+      }
+    }));
   };
   const handleUserAvatarClick = user => {
     dispatch((0, _chatSettingsSlice.setActiveModal)(_MODAL_TYPES.MODAL_TYPES.PROFILE));
@@ -248,499 +199,209 @@ const ChatProfileModal = ({
       refreshToken: ''
     }));
   };
-
-  // 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 = () => {
-    _reactNative.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((0, _roomsSlice.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;
-    }
-    collapsedForSearchRef.current = false;
-    scrollHeaderTo(0);
-  };
-  const closeMemberSearch = () => {
-    setMemberQuery('');
-    setIsSearchOpen(false);
-    _reactNative.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.
-  (0, _react.useEffect)(() => {
-    if (!isSearchOpen) {
-      return undefined;
+  const menuOptions = (0, _react.useMemo)(() => userId => [{
+    label: 'Appoint as an admin',
+    icon: null,
+    onClick: () => {
+      dispatch((0, _chatSettingsSlice.setActiveModal)(_MODAL_TYPES.MODAL_TYPES.PROFILE));
+      console.log('Profile clicked');
     }
-    const sub = _reactNative.Keyboard.addListener('keyboardDidHide', restoreHeader);
-    return () => sub.remove();
-  }, [isSearchOpen]); // eslint-disable-line react-hooks/exhaustive-deps
-
-  const heroActions = (0, _react.useMemo)(() => [{
-    key: 'search',
-    label: t('action.search'),
-    icon: color => /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.SearchIcon, {
-      color: color
-    }),
-    onPress: openMemberSearch
-  }, {
-    key: 'leave',
-    label: t('action.leave'),
-    icon: color => /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.LeaveIcon, {
-      color: color
-    }),
-    onPress: handleLeave
   }, {
-    key: 'report',
-    label: t('action.report'),
-    icon: color => /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.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 = (0, _react.useMemo)(() => {
-    const items = [];
-    if (canEditIcon) {
-      items.push({
-        key: 'edit',
-        label: t('action.edit'),
-        icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.EditIcon, {
-          color: "#141414",
-          width: 18,
-          height: 18
-        }),
-        onPress: onUpload
-      });
-      if (hasIcon) {
-        items.push({
-          key: 'remove-photo',
-          label: t('modal.chatProfile.removePhoto'),
-          icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.DeleteIcon, {
-            width: 18,
-            height: 18
-          }),
-          onPress: onRemoveIcon
-        });
-      }
+    label: 'Unban',
+    icon: null,
+    onClick: () => {
+      dispatch((0, _chatSettingsSlice.setActiveModal)(_MODAL_TYPES.MODAL_TYPES.SETTINGS));
+      console.log('Settings clicked');
     }
-    // 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__*/(0, _jsxRuntime.jsx)(_icons.SearchIcon, {
-          color: "#141414",
-          width: 18,
-          height: 18
-        }),
-        onPress: openMemberSearch
-      });
+  }, {
+    label: 'Delete',
+    icon: null,
+    onClick: e => {
+      e?.preventDefault();
+      handleDeleteUser(userId);
     }
-    items.push({
-      key: 'report',
-      label: t('action.report'),
-      icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.ReportIcon, {
-        color: "#141414",
-        width: 18,
-        height: 18
-      }),
-      onPress: () => setIsReportOpen(true)
-    });
-    if (canDeleteChat) {
-      items.push({
-        key: 'delete-and-leave',
-        label: t('action.deleteAndLeave'),
-        icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.DeleteIcon, {
-          width: 18,
-          height: 18
-        }),
-        destructive: true,
-        onPress: () => setIsDeleteOpen(true)
-      });
+  }], []);
+  (0, _react.useEffect)(() => {
+    if (!activeRoom) {
+      dispatch((0, _chatSettingsSlice.setActiveModal)(undefined));
     }
-    return items;
-  }, [canEditIcon, canDeleteChat, hasIcon, isCollapsed, t]); // eslint-disable-line react-hooks/exhaustive-deps
-
+  }, [activeRoom, dispatch]);
   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 = (0, _secureFileUrl.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 || (0, _getIconColor.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__*/(0, _jsxRuntime.jsxs)(_styledModalComponents.ModalContainerFullScreen, {
-    style: styles.screen,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.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: _reactNative.Animated.event([{
-        nativeEvent: {
-          contentOffset: {
-            y: scrollY
-          }
-        }
-      }], {
-        useNativeDriver: true,
-        listener: e => {
-          const y = e?.nativeEvent?.contentOffset?.y ?? 0;
-          setIsCollapsed(y >= collapseDistance - 8);
-        }
-      }),
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ProfileHeader.ProfileHero, {
-        title: title,
-        subtitle: subtitle,
-        imageUri: heroImage,
-        fallbackColor: heroColor,
-        initials: chatInitials(title),
-        scrollY: scrollY,
-        actions: heroActions,
-        titleStyle: (0, _typography.chatTextStyle)(config?.typography?.profile?.title),
-        subtitleStyle: (0, _getElementFont.getElementFont)(config, 'profileStatus')
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-        style: styles.body,
-        children: [!config?.disableChatInfo?.disableDescription && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-          style: styles.card,
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-            style: [styles.cardLabel, (0, _getElementFont.getElementFont)(config, 'profileSectionLabel')],
-            children: t('modal.chatProfile.description')
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-            style: styles.cardValue,
-            children: activeRoom.description || '—'
+    style: {
+      position: 'relative'
+    },
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ModalHeaderComponent.default, {
+      handleCloseModal: handleCloseModal,
+      headerTitle: 'Chat Profile',
+      titleStyle: (0, _typography.chatTextStyle)(config?.typography?.profile?.screenTitle),
+      rightMenu: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+        children: [activeRoom?.type === 'public' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+          EndIcon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.QrIcon, {}),
+          onPress: () => setVisible(true)
+        }), activeRoom.role === 'moderator' && activeRoom.type !== 'private' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_DropdownMenu.default, {
+          position: "right",
+          options: chatMenuOptions,
+          openButton: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+            style: {
+              padding: 8,
+              height: 40
+            },
+            EndIcon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.MoreIcon, {}),
+            unstyled: true
+          })
+        })]
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
+      style: {
+        width: '100%',
+        flex: 1
+      },
+      contentContainerStyle: {
+        flexGrow: 1
+      },
+      showsVerticalScrollIndicator: true,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styledModalComponents.CenterContainer, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ProfileImagePlaceholder.ProfileImagePlaceholder, {
+          name: activeRoom.title || activeRoom.name,
+          icon: (0, _secureFileUrl.appendFileToken)(activeRoom.icon, fileToken)
+          // 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__*/(0, _jsxRuntime.jsxs)(_styledModalComponents.UserInfo, {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_styledModalComponents.UserName, {
+            fontSize: config?.typography?.profile?.title?.fontSize,
+            fontWeight: config?.typography?.profile?.title?.fontWeight,
+            children: activeRoom.title || activeRoom.name
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styledModalComponents.UserStatus, {
+            style: (0, _getElementFont.getElementFont)(config, 'profileStatus'),
+            children: [activeRoom.usersCnt, ' ', activeRoom.usersCnt > 1 ? 'members' : 'member']
+          })]
+        }), activeRoom.role === 'moderator' && activeRoom.type === 'group' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SelectUsersModal.default, {})
+        }), !config?.disableChatInfo?.disableDescription && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styledModalComponents.BorderedContainer, {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_styledModalComponents.LabelData, {
+            style: (0, _getElementFont.getElementFont)(config, 'profileSectionLabel'),
+            children: "Description"
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_styledModalComponents.Label, {
+            children: activeRoom?.description || '—'
           })]
-        }), !config?.disableChatInfo?.disableType && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-          style: styles.card,
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-            style: [styles.cardLabel, (0, _getElementFont.getElementFont)(config, 'profileSectionLabel')],
-            children: t('modal.chatProfile.chatType')
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-            style: styles.cardValue,
+        }), !config?.disableChatInfo?.disableType && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styledModalComponents.BorderedContainer, {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_styledModalComponents.LabelData, {
+            style: (0, _getElementFont.getElementFont)(config, 'profileSectionLabel'),
+            children: "Chat type"
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_styledModalComponents.Label, {
             children: activeRoom.type || '—'
           })]
-        }), !config?.disableChatInfo?.hideMembers && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-          style: styles.card,
-          children: [canAddMembers && /*#__PURE__*/(0, _jsxRuntime.jsx)(_SelectUsersModal.default, {
-            trigger: open => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
-              testID: "chat-profile-add-members",
-              activeOpacity: 0.7,
-              style: styles.addMembersRow,
-              onPress: open,
-              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.AddNewIcon, {
-                color: (0, _getIconColor.getIconColor)(config)
-              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-                style: styles.addMembersLabel,
-                children: t('modal.chatProfile.addMembers')
-              })]
-            })
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-            style: [styles.cardLabel, (0, _getElementFont.getElementFont)(config, 'profileSectionLabel')],
-            children: t('modal.chatProfile.membersLabel', {
-              count: memberCount
-            })
-          }), isSearchOpen && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-            style: styles.searchRow,
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.SearchIcon, {
-              color: "#8C8C8C",
-              width: 18,
-              height: 18
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.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__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
-              testID: "chat-profile-search-close",
-              activeOpacity: 0.7,
-              hitSlop: {
-                top: 8,
-                bottom: 8,
-                left: 8,
-                right: 8
+        }), !config?.disableChatInfo?.hideMembers && /*#__PURE__*/(0, _jsxRuntime.jsx)(_styledModalComponents.BorderedContainer, {
+          style: {
+            paddingHorizontal: 16,
+            paddingVertical: 8
+          },
+          children: loading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Loader.default, {}) : (activeRoom?.roomMembers?.length ?? 0) === 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_styledModalComponents.Label, {
+            style: {
+              opacity: 0.6,
+              textAlign: 'center',
+              paddingVertical: 8
+            },
+            children: "Member list unavailable"
+          }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+            children: activeRoom?.roomMembers?.map((user, index) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+              style: {
+                flexDirection: 'column',
+                alignItems: 'flex-start'
               },
-              onPress: closeMemberSearch,
-              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-                style: styles.searchClose,
-                children: "\xD7"
-              })
-            })]
-          }), loading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Loader.default, {}) : visibleMembers.length === 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.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__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-              style: [styles.memberRow, index > 0 && styles.memberDivider],
-              children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Pressable, {
-                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,
-                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ProfileImagePlaceholder.ProfileImagePlaceholder, {
-                  name: `${user.firstName} ${user.lastName}`,
-                  size: 40
-                }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-                  style: styles.memberText,
-                  children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
-                    numberOfLines: 1,
-                    style: [styles.memberName, (0, _typography.chatTextStyle)(config?.typography?.profile?.memberName)],
-                    children: [user.firstName, " ", user.lastName]
-                  }), !!user.last_active && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-                    numberOfLines: 1,
-                    style: [styles.memberStatus, (0, _getElementFont.getElementFont)(config, 'profileSectionLabel')],
-                    children: new Date(user.last_active * 1000).toLocaleString()
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+                style: {
+                  flexDirection: 'row',
+                  justifyContent: 'flex-start',
+                  paddingHorizontal: 8,
+                  paddingVertical: 0,
+                  alignItems: 'center',
+                  width: '100%'
+                },
+                children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.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.
+                  ,
+                  onPress: config?.disableChatInfo?.disableMemberTap ? undefined : () => handleUserAvatarClick(user),
+                  disabled: !!config?.disableChatInfo?.disableMemberTap,
+                  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ProfileImagePlaceholder.ProfileImagePlaceholder, {
+                    name: `${user.firstName} ${user.lastName}`,
+                    size: 40
+                  }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+                    style: {
+                      flexDirection: 'column',
+                      gap: 2,
+                      alignItems: 'flex-start',
+                      justifyContent: 'center'
+                    },
+                    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_styledModalComponents.Label, {
+                      style: [{
+                        fontSize: 16,
+                        fontWeight: 600
+                      }, (0, _typography.chatTextStyle)(config?.typography?.profile?.memberName)],
+                      children: [user.firstName, " ", user.lastName]
+                    }), user.last_active && /*#__PURE__*/(0, _jsxRuntime.jsx)(_styledModalComponents.LabelData, {
+                      style: (0, _getElementFont.getElementFont)(config, 'profileSectionLabel'),
+                      children: new Date(user.last_active * 1000).toLocaleString()
+                    })]
                   })]
+                }), user.role && user.role !== 'none' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                  style: {
+                    backgroundColor: user.ban_status !== 'banned' ? '#F3F6FC' : '#FFEBEE',
+                    color: user.ban_status !== 'banned' ? '#0052CD' : '#F44336',
+                    padding: 5,
+                    borderRadius: 16,
+                    fontSize: 12
+                  },
+                  children: user.role
+                }), stateUser.xmppUsername !== user.xmppUsername && activeRoom.role === 'moderator' && activeRoom.type !== 'private' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_DropdownMenu.default, {
+                  options: menuOptions(user.xmppUsername),
+                  openButton: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+                    onPress: () => {},
+                    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                      children: "More Options"
+                    })
+                  }),
+                  onClose: () => console.log('Dropdown closed')
                 })]
-              }), (banned || roleLabel) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-                style: [styles.memberRole, banned && styles.memberBanned],
-                children: banned ? t('status.banned') : roleLabel
-              }), isModerator && activeRoom.type !== 'private' && stateUser.xmppUsername !== user.xmppUsername && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
-                testID: `chat-profile-remove-${user.xmppUsername}`,
-                activeOpacity: 0.7,
-                hitSlop: {
-                  top: 8,
-                  bottom: 8,
-                  left: 8,
-                  right: 8
-                },
-                style: styles.memberRemove,
-                onPress: () => confirmRemoveMember(user),
-                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.DeleteIcon, {
-                  width: 20,
-                  height: 20
-                })
-              })]
-            }, user.xmppUsername);
-          })]
+              }), index < (activeRoom?.roomMembers?.length || 0) - 1 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_styledModalComponents.Divider, {})]
+            }, user.xmppUsername))
+          })
         })]
-      })]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ProfileHeader.ProfileTopBar, {
-      title: title,
-      subtitle: subtitle,
-      imageUri: heroImage,
-      fallbackColor: heroColor,
-      initials: chatInitials(title),
-      scrollY: scrollY,
-      onBack: handleCloseModal,
-      titleStyle: (0, _typography.chatTextStyle)(config?.typography?.profile?.screenTitle),
-      menu: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ProfileMenu.default, {
-        items: menuItems
       })
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_DeleteChatModal.default, {
-      isModalOpen: isDeleteOpen,
-      setIsModalOpen: setIsDeleteOpen
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ReportChatModal.default, {
-      visible: isReportOpen,
-      onClose: () => setIsReportOpen(false)
+      isModalOpen: isModalOpen,
+      setIsModalOpen: setIsModalOpen
     })]
   });
 };
-const styles = _reactNative.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: _reactNative.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: _reactNative.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'
-  }
-});
 var _default = exports.default = ChatProfileModal;
 //# sourceMappingURL=ChatProfileModal.js.map