@ethora/chat-component-rn 26.7.4 → 26.7.5

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

@@ -1,67 +1,51 @@
 "use strict";
 
-/** @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 React, { useEffect, useMemo, useState } from 'react';
 import { useFileToken } from '../../../hooks/useFileToken';
 import { appendFileToken } from '../../../helpers/secureFileUrl';
-import { ModalContainerFullScreen } from '../styledModalComponents';
+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';
+import { useDispatch, useSelector } from 'react-redux';
 import { getActiveRoom } from '../../../roomStore';
 import { uploadFile } from '../../../networking/api-requests/auth.api';
 import { useXmppClient } from '../../../context/xmppProvider';
-import { deleteRoom, updateRoom } from '../../../roomStore/roomsSlice';
+import { updateRoom } from '../../../roomStore/roomsSlice';
+import * as ImagePicker from 'expo-image-picker';
 import Loader from '../../styled/Loader';
-import { AddNewIcon, DeleteIcon, EditIcon, LeaveIcon, ReportIcon, SearchIcon } from '../../../assets/icons';
+import Button from '../../styled/Button';
+import { DeleteIcon, MoreIcon, QrIcon } from '../../../assets/icons';
 import { useChatSettingState } from '../../../hooks/useChatSettingState';
 import { chatTextStyle } from '../../../helpers/typography';
 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 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();
-};
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const ChatProfileModal = ({
   handleCloseModal
 }) => {
-  const t = useT();
   const [loading, setLoading] = 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 [visible, setVisible] = useState(false);
+  const [isModalOpen, setIsModalOpen] = useState(false);
   const {
     showToast
   } = useToast();
+  const chatMenuOptions = useMemo(() => [{
+    label: 'Delete chat',
+    icon: /*#__PURE__*/_jsx(DeleteIcon, {}),
+    onClick: () => {
+      setIsModalOpen(true);
+    },
+    styles: {
+      color: 'red'
+    }
+  }], []);
   const dispatch = useDispatch();
   const {
     client
@@ -73,22 +57,6 @@ const ChatProfileModal = ({
   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 /
   // item.members.length); the actual roster comes from a `getRoomMembers`
@@ -102,11 +70,6 @@ const ChatProfileModal = ({
       }
     }
   }, [client, activeRoom?.jid]);
-  useEffect(() => {
-    if (!activeRoom) {
-      dispatch(setActiveModal(undefined));
-    }
-  }, [activeRoom, dispatch]);
   const onUpload = async () => {
     let loadingSet = false;
     try {
@@ -119,7 +82,7 @@ const ChatProfileModal = ({
       const perm = await ImagePicker.requestMediaLibraryPermissionsAsync();
       if (!perm.granted) {
         Alert.alert('Permission required', 'Photo library permission is needed to select images.', [{
-          text: t('action.cancel'),
+          text: 'Cancel',
           onPress: () => setLoading(false),
           style: 'cancel'
         }, {
@@ -181,17 +144,7 @@ const ChatProfileModal = ({
       }
     }
   };
-  const onRemoveIcon = () => {
-    client?.setRoomImageStanza(activeRoom?.jid || '', '', 'icon', 'none');
-    dispatch(updateRoom({
-      jid: activeRoom?.jid || '',
-      updates: {
-        icon: null
-      }
-    }));
-  };
-  const handleDeleteUser = async user => {
-    const userId = user.xmppUsername;
+  const handleDeleteUser = async userId => {
     try {
       await deleteRoomMember({
         roomId: activeRoom?.jid?.split('@')[0] || '',
@@ -200,7 +153,7 @@ const ChatProfileModal = ({
       dispatch(updateRoom({
         jid: activeRoom?.jid || '',
         updates: {
-          roomMembers: activeRoom?.roomMembers?.filter(member => member.xmppUsername !== userId)
+          roomMembers: activeRoom?.roomMembers?.filter(user => user.xmppUsername !== userId)
         }
       }));
       showToast({
@@ -219,15 +172,14 @@ const ChatProfileModal = ({
       });
     }
   };
-  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 onRemoveClick = async () => {
+    client?.setRoomImageStanza(activeRoom?.jid || '', '', 'icon', 'none');
+    dispatch(updateRoom({
+      jid: activeRoom?.jid || '',
+      updates: {
+        icon: null
+      }
+    }));
   };
   const handleUserAvatarClick = user => {
     dispatch(setActiveModal(MODAL_TYPES.PROFILE));
@@ -241,499 +193,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 = () => {
-    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;
-    }
-    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 menuOptions = useMemo(() => userId => [{
+    label: 'Appoint as an admin',
+    icon: null,
+    onClick: () => {
+      dispatch(setActiveModal(MODAL_TYPES.PROFILE));
+      console.log('Profile clicked');
     }
-    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
-  }, {
-    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
-        });
-      }
+    label: 'Unban',
+    icon: null,
+    onClick: () => {
+      dispatch(setActiveModal(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__*/_jsx(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__*/_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)
-      });
+  }], []);
+  useEffect(() => {
+    if (!activeRoom) {
+      dispatch(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 = 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: 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 || '—'
+    style: {
+      position: 'relative'
+    },
+    children: [/*#__PURE__*/_jsx(ModalHeaderComponent, {
+      handleCloseModal: handleCloseModal,
+      headerTitle: 'Chat Profile',
+      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__*/_jsx(ScrollView, {
+      style: {
+        width: '100%',
+        flex: 1
+      },
+      contentContainerStyle: {
+        flexGrow: 1
+      },
+      showsVerticalScrollIndicator: true,
+      children: /*#__PURE__*/_jsxs(CenterContainer, {
+        children: [/*#__PURE__*/_jsx(ProfileImagePlaceholder, {
+          name: activeRoom.title || activeRoom.name,
+          icon: 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__*/_jsxs(UserInfo, {
+          children: [/*#__PURE__*/_jsx(UserName, {
+            fontSize: config?.typography?.profile?.title?.fontSize,
+            fontWeight: config?.typography?.profile?.title?.fontWeight,
+            children: activeRoom.title || activeRoom.name
+          }), /*#__PURE__*/_jsxs(UserStatus, {
+            style: getElementFont(config, 'profileStatus'),
+            children: [activeRoom.usersCnt, ' ', activeRoom.usersCnt > 1 ? 'members' : 'member']
+          })]
+        }), 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: "Description"
+          }), /*#__PURE__*/_jsx(Label, {
+            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,
+        }), !config?.disableChatInfo?.disableType && /*#__PURE__*/_jsxs(BorderedContainer, {
+          children: [/*#__PURE__*/_jsx(LabelData, {
+            style: getElementFont(config, 'profileSectionLabel'),
+            children: "Chat type"
+          }), /*#__PURE__*/_jsx(Label, {
             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
+        }), !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: "Member list unavailable"
+          }) : /*#__PURE__*/_jsx(View, {
+            children: activeRoom?.roomMembers?.map((user, index) => /*#__PURE__*/_jsxs(View, {
+              style: {
+                flexDirection: 'column',
+                alignItems: 'flex-start'
               },
-              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: 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__*/_jsx(ProfileImagePlaceholder, {
-                  name: `${user.firstName} ${user.lastName}`,
-                  size: 40
-                }), /*#__PURE__*/_jsxs(View, {
-                  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(Text, {
-                    numberOfLines: 1,
-                    style: [styles.memberStatus, getElementFont(config, 'profileSectionLabel')],
-                    children: new Date(user.last_active * 1000).toLocaleString()
+              children: [/*#__PURE__*/_jsxs(View, {
+                style: {
+                  flexDirection: 'row',
+                  justifyContent: 'flex-start',
+                  paddingHorizontal: 8,
+                  paddingVertical: 0,
+                  alignItems: 'center',
+                  width: '100%'
+                },
+                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.
+                  ,
+                  onPress: config?.disableChatInfo?.disableMemberTap ? undefined : () => handleUserAvatarClick(user),
+                  disabled: !!config?.disableChatInfo?.disableMemberTap,
+                  children: [/*#__PURE__*/_jsx(ProfileImagePlaceholder, {
+                    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)],
+                      children: [user.firstName, " ", user.lastName]
+                    }), user.last_active && /*#__PURE__*/_jsx(LabelData, {
+                      style: 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
+                  },
+                  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: "More Options"
+                    })
+                  }),
+                  onClose: () => console.log('Dropdown closed')
                 })]
-              }), (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
-                },
-                style: styles.memberRemove,
-                onPress: () => confirmRemoveMember(user),
-                children: /*#__PURE__*/_jsx(DeleteIcon, {
-                  width: 20,
-                  height: 20
-                })
-              })]
-            }, user.xmppUsername);
-          })]
+              }), index < (activeRoom?.roomMembers?.length || 0) - 1 && /*#__PURE__*/_jsx(Divider, {})]
+            }, 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: isDeleteOpen,
-      setIsModalOpen: setIsDeleteOpen
-    }), /*#__PURE__*/_jsx(ReportChatModal, {
-      visible: isReportOpen,
-      onClose: () => setIsReportOpen(false)
+      isModalOpen: isModalOpen,
+      setIsModalOpen: setIsModalOpen
     })]
   });
 };
-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