@ethora/chat-component-rn 26.8.1 → 26.8.3

package/src/components/Modals/ChatProfileModal/ChatProfileModal.tsx

@@ -1,42 +1,82 @@
-import React, { useEffect, useMemo, useState } from 'react';
+/** @format */
+
+import React, { useEffect, useMemo, useRef, useState } from 'react';
 import {
-  CenterContainer,
-  UserInfo,
-  UserName,
-  UserStatus,
-  ModalContainerFullScreen,
-  Label,
-  BorderedContainer,
-  LabelData,
-  Viewider,
-  Divider,
-} from '../styledModalComponents';
-import { Pressable, View, Text, ScrollView, Alert, Linking } from 'react-native';
-import ModalHeaderComponent from '../ModalHeaderComponent';
-import { ProfileImagePlaceholder } from '../../MainComponents/ProfileImagePlaceholder';
+  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 { RootState, 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 Switch from '../../MainComponents/Switch';
+import {
+  AddNewIcon,
+  BellIcon,
+  BellOffIcon,
+  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 { deleteRoomMember } from '../../../networking/api-requests/rooms.api';
+import { getIconColor } from '../../../helpers/getIconColor';
+import { useTheme } from '../../../hooks/useTheme';
+import type { ChatTheme } from '../../../theme/theme';
+import { deleteRoomMember, setRoomMuted } from '../../../networking/api-requests/rooms.api';
 import { RoomMember } from '../../../types/models/room.model';
 import { setActiveModal, setSelectedUser } from '../../../roomStore/chatSettingsSlice';
 import { MODAL_TYPES } from '../../../helpers/constants/MODAL_TYPES';
-import DropdownMenu, { MenuOption } 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,
+  HeroAction,
+  useHeaderMetrics,
+} from '../ProfileHeader/ProfileHeader';
+import ProfileMenu, { ProfileMenuItem } 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.
+ */
+export const searchScrollTarget = (
+  isCollapsed: boolean,
+  collapseDistance: number
+): number | null => (isCollapsed ? null : collapseDistance);
 
+/** Two uppercase letters for a chat without a picture, same rule the
+ * avatar placeholder uses for people. */
+export const chatInitials = (name?: string | null): string => {
+  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();
+};
 
 interface ChatProfileModalProps {
   handleCloseModal: any;
@@ -45,32 +85,39 @@ interface ChatProfileModalProps {
 const ChatProfileModal: React.FC<ChatProfileModalProps> = ({
   handleCloseModal,
 }) => {
+  const t = useT();
   const [loading, setLoading] = useState<boolean>(false);
-  const [visible, setVisible] = useState<boolean>(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: <DeleteIcon />,
-        onClick: () => {
-          setIsModalOpen(true);
-        },
-        styles: { color: 'red' },
-      },
-    ],
-    [t]
-  );
-
   const dispatch = useDispatch();
-
   const { client } = useXmppClient();
   const { user: stateUser, config } = useChatSettingState();
+  const theme = useTheme();
+  const styles = useMemo(() => createStyles(theme), [theme]);
   const activeRoom = useSelector((state: RootState) => 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<any>(null);
+  const searchInputRef = useRef<TextInput>(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 /
@@ -86,6 +133,12 @@ const ChatProfileModal: React.FC<ChatProfileModalProps> = ({
     }
   }, [client, activeRoom?.jid]);
 
+  useEffect(() => {
+    if (!activeRoom) {
+      dispatch(setActiveModal(undefined));
+    }
+  }, [activeRoom, dispatch]);
+
   const onUpload = async () => {
     let loadingSet = false;
     try {
@@ -171,7 +224,13 @@ const ChatProfileModal: React.FC<ChatProfileModalProps> = ({
     }
   };
 
-  const handleDeleteUser = async (userId: string) => {
+  const onRemoveIcon = () => {
+    client?.setRoomImageStanza(activeRoom?.jid || '', '', 'icon', 'none');
+    dispatch(updateRoom({ jid: activeRoom?.jid || '', updates: { icon: null } }));
+  };
+
+  const handleDeleteUser = async (user: RoomMember) => {
+    const userId = user.xmppUsername;
     try {
       await deleteRoomMember({
         roomId: activeRoom?.jid?.split('@')[0] || '',
@@ -183,7 +242,7 @@ const ChatProfileModal: React.FC<ChatProfileModalProps> = ({
           jid: activeRoom?.jid || '',
           updates: {
             roomMembers: activeRoom?.roomMembers?.filter(
-              (user) => user.xmppUsername !== userId
+              (member) => member.xmppUsername !== userId
             ),
           },
         })
@@ -206,9 +265,19 @@ const ChatProfileModal: React.FC<ChatProfileModalProps> = ({
     }
   };
 
-  const onRemoveClick = async () => {
-    client?.setRoomImageStanza(activeRoom?.jid || '', '', 'icon', 'none');
-    dispatch(updateRoom({ jid: activeRoom?.jid || '', updates: { icon: null } }));
+  const confirmRemoveMember = (user: RoomMember) => {
+    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: RoomMember): void => {
@@ -226,272 +295,559 @@ const ChatProfileModal: React.FC<ChatProfileModalProps> = ({
     );
   };
 
-  const menuOptions = useMemo(
-    () => (userId: string) => [
+  // 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' },
       {
-        label: t('action.appointAsAdmin'),
-        icon: null,
-        onClick: () => {
-          dispatch(setActiveModal(MODAL_TYPES.PROFILE));
-          console.log('Profile clicked');
+        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: number) =>
+    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 sub = Keyboard.addListener('keyboardDidHide', restoreHeader);
+    return () => sub.remove();
+  }, [isSearchOpen]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  const muteInFlightRef = useRef(false);
+  const toggleMuted = async () => {
+    if (!activeRoom?.jid || !activeRoom?.name || muteInFlightRef.current) {return;}
+    const next = !activeRoom.muted;
+    muteInFlightRef.current = true;
+    dispatch(updateRoom({ jid: activeRoom.jid, updates: { muted: next } }));
+    try {
+      const confirmed = await setRoomMuted(activeRoom.name, next);
+      if (confirmed !== next) {
+        dispatch(updateRoom({ jid: activeRoom.jid, updates: { muted: confirmed } }));
+      }
+    } catch (error) {
+      dispatch(updateRoom({ jid: activeRoom.jid, updates: { muted: !next } }));
+      console.warn('[ethora-rn] mute toggle failed', error);
+      showToast({
+        id: Date.now().toString(),
+        title: 'Error',
+        message: t('toast.muteFailed'),
+        type: 'error',
+      });
+    } finally {
+      muteInFlightRef.current = false;
+    }
+  };
+
+  const heroActions: HeroAction[] = useMemo(
+    () => [
       {
-        label: t('action.unban'),
-        icon: null,
-        onClick: () => {
-          dispatch(setActiveModal(MODAL_TYPES.SETTINGS));
-          console.log('Settings clicked');
-        },
+        key: 'mute',
+        label: activeRoom?.muted ? t('action.muted') : t('action.unmuted'),
+        icon: (color: string) =>
+          activeRoom?.muted ? <BellOffIcon color={color} /> : <BellIcon color={color} />,
+        onPress: toggleMuted,
       },
       {
-        label: t('action.delete'),
-        icon: null,
-        onClick: (e: any) => {
-          e?.preventDefault();
-          handleDeleteUser(userId);
-        },
+        key: 'search',
+        label: t('action.search'),
+        icon: (color: string) => <SearchIcon color={color} />,
+        onPress: openMemberSearch,
+      },
+      {
+        key: 'leave',
+        label: t('action.leave'),
+        icon: (color: string) => <LeaveIcon color={color} />,
+        onPress: handleLeave,
+      },
+      {
+        key: 'report',
+        label: t('action.report'),
+        icon: (color: string) => <ReportIcon color={color} />,
+        onPress: () => setIsReportOpen(true),
       },
     ],
-    [t]
+    [t, activeRoom?.jid, activeRoom?.muted] // eslint-disable-line react-hooks/exhaustive-deps
   );
 
-  useEffect(() => {
-    if (!activeRoom) {
-      dispatch(setActiveModal(undefined));
+  // "…" 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: ProfileMenuItem[] = useMemo(() => {
+    const items: ProfileMenuItem[] = [];
+    if (canEditIcon) {
+      items.push({
+        key: 'edit',
+        label: t('action.edit'),
+        icon: <EditIcon color={theme.text} width={18} height={18} />,
+        onPress: onUpload,
+      });
+      if (hasIcon) {
+        items.push({
+          key: 'remove-photo',
+          label: t('modal.chatProfile.removePhoto'),
+          icon: <DeleteIcon width={18} height={18} />,
+          onPress: onRemoveIcon,
+        });
+      }
     }
-  }, [activeRoom, dispatch]);
+    // 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: <SearchIcon color={theme.text} width={18} height={18} />,
+        onPress: openMemberSearch,
+      });
+    }
+    items.push({
+      key: 'report',
+      label: t('action.report'),
+      icon: <ReportIcon color={theme.text} width={18} height={18} />,
+      onPress: () => setIsReportOpen(true),
+    });
+    if (canDeleteChat) {
+      items.push({
+        key: 'delete-and-leave',
+        label: t('action.deleteAndLeave'),
+        icon: <DeleteIcon width={18} height={18} />,
+        destructive: true,
+        onPress: () => setIsDeleteOpen(true),
+      });
+    }
+    return items;
+  }, [canEditIcon, canDeleteChat, hasIcon, isCollapsed, t, theme.text]); // 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 (
-    <ModalContainerFullScreen style={{ position: 'relative' }}>
-      <ModalHeaderComponent
-        handleCloseModal={handleCloseModal}
-        headerTitle={t('modal.chatProfile.title')}
-        titleStyle={chatTextStyle(config?.typography?.profile?.screenTitle)}
-        rightMenu={
-          <>
-            {activeRoom?.type === 'public' && (
-              <Button EndIcon={<QrIcon />} onPress={() => setVisible(true)} />
-            )}
-            {activeRoom.role === 'moderator' &&
-              activeRoom.type !== 'private' && (
-                <DropdownMenu
-                  position="right"
-                  options={chatMenuOptions}
-                  openButton={
-                    <Button
-                      style={{ padding: 8, height: 40 }}
-                      EndIcon={<MoreIcon />}
-                      unstyled
-                    />
-                  }
+    <ModalContainerFullScreen style={styles.screen}>
+      <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: any) => {
+              const y = e?.nativeEvent?.contentOffset?.y ?? 0;
+              setIsCollapsed(y >= collapseDistance - 8);
+            },
+          }
+        )}
+      >
+        <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')}
+        />
+
+        <View style={styles.body}>
+          {!config?.disableChatInfo?.disableDescription && (
+            <View style={styles.card}>
+              <Text style={[styles.cardLabel, getElementFont(config, 'profileSectionLabel')]}>
+                {t('modal.chatProfile.description')}
+              </Text>
+              <Text style={styles.cardValue}>{activeRoom.description || '—'}</Text>
+            </View>
+          )}
+
+          {!config?.disableChatInfo?.disableType && (
+            <View style={styles.card}>
+              <Text style={[styles.cardLabel, getElementFont(config, 'profileSectionLabel')]}>
+                {t('modal.chatProfile.chatType')}
+              </Text>
+              <Text style={styles.cardValue}>{activeRoom.type || '—'}</Text>
+            </View>
+          )}
+
+          {!config?.disableChatInfo?.hideMembers && (
+            <View style={styles.card}>
+              {canAddMembers && (
+                <SelectUsersModal
+                  trigger={(open) => (
+                    <TouchableOpacity
+                      testID="chat-profile-add-members"
+                      activeOpacity={0.7}
+                      style={styles.addMembersRow}
+                      onPress={open}
+                    >
+                      <AddNewIcon color={getIconColor(config)} />
+                      <Text style={styles.addMembersLabel}>
+                        {t('modal.chatProfile.addMembers')}
+                      </Text>
+                    </TouchableOpacity>
+                  )}
                 />
               )}
-          </>
-        }
-      />
-      <CenterContainer>
-        <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}
-        />
-        <UserInfo>
-          <UserName
-            fontSize={config?.typography?.profile?.title?.fontSize}
-            fontWeight={config?.typography?.profile?.title?.fontWeight as any}
-          >
-            {activeRoom.title || activeRoom.name}
-          </UserName>
-          <UserStatus style={getElementFont(config, 'profileStatus')}>
-            {t(
-              activeRoom.usersCnt > 1
-                ? 'modal.chatProfile.memberCountPlural'
-                : 'modal.chatProfile.memberCountSingular',
-              { count: activeRoom.usersCnt }
-            )}
-          </UserStatus>
-        </UserInfo>
-        {activeRoom.role === 'moderator' && activeRoom.type === 'group' && (
-          <>
-            {/* <AddMembersModal /> */}
-            <SelectUsersModal />
-          </>
-        )}
-        {!config?.disableChatInfo?.disableDescription && (
-          <BorderedContainer>
-            <LabelData style={getElementFont(config, 'profileSectionLabel')}>
-              {t('modal.chatProfile.description')}
-            </LabelData>
-            <Label>{activeRoom?.description || '—'}</Label>
-          </BorderedContainer>
-        )}
-        {!config?.disableChatInfo?.disableType && (
-          <BorderedContainer>
-            <LabelData style={getElementFont(config, 'profileSectionLabel')}>
-              {t('modal.chatProfile.chatType')}
-            </LabelData>
-            <Label>{activeRoom.type || '—'}</Label>
-          </BorderedContainer>
-        )}
-        {/* <BorderedContainer
-          style={{
-            justifyContent: 'space-between',
-            flexDirection: 'row',
-            alignItems: 'center',
-          }}
-        >
-          <Label>Notifications</Label>
-          <Label>
-            <Switch
-              onToggle={function (isOn: boolean): void {
-                throw new Error('Function not implemented.');
-              }}
-              bgColor={config?.colors?.primary}
-            />
-          </Label>
-        </BorderedContainer> */}
-        {!config?.disableChatInfo?.hideMembers && (
-        <BorderedContainer style={{ paddingHorizontal: 16, paddingVertical: 8 }}>
-          {loading ? (
-            <Loader />
-          ) : (activeRoom?.roomMembers?.length ?? 0) === 0 ? (
-            <Label style={{ opacity: 0.6, textAlign: 'center', paddingVertical: 8 }}>
-              {t('modal.chatProfile.memberListUnavailable')}
-            </Label>
-          ) : (
-            <ScrollView
-              style={{ maxHeight: 400 }}
-              showsVerticalScrollIndicator={true}
-              nestedScrollEnabled={true}
-            >
-              {activeRoom?.roomMembers?.map((user, index) => (
-                <View
-                  key={user.xmppUsername}
-                  style={{
-                    flexDirection: 'column',
-                    alignItems: 'flex-start',
-                  }}
-                >
-                  <View
-                    style={{
-                      flexDirection: 'row',
-                      justifyContent: 'flex-start',
-                      paddingHorizontal: 8,
-                      paddingVertical: 0,
-                      alignItems: 'center',
-                      width: '100%',
-                    }}
+
+              <Text
+                style={[
+                  styles.cardLabel,
+                  getElementFont(config, 'profileSectionLabel'),
+                ]}
+              >
+                {t('modal.chatProfile.membersLabel', { count: memberCount })}
+              </Text>
+
+              {isSearchOpen && (
+                <View style={styles.searchRow}>
+                  <SearchIcon color={theme.textSecondary} width={18} height={18} />
+                  <TextInput
+                    testID="chat-profile-member-search"
+                    ref={searchInputRef}
+                    style={styles.searchInput}
+                    value={memberQuery}
+                    onChangeText={setMemberQuery}
+                    placeholder={t('search.members')}
+                    placeholderTextColor={theme.textMuted}
+                    autoCorrect={false}
+                    returnKeyType="search"
+                  />
+                  <TouchableOpacity
+                    testID="chat-profile-search-close"
+                    activeOpacity={0.7}
+                    hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}
+                    onPress={closeMemberSearch}
                   >
-                    <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}
+                    <Text style={styles.searchClose}>×</Text>
+                  </TouchableOpacity>
+                </View>
+              )}
+
+              {loading ? (
+                <Loader />
+              ) : visibleMembers.length === 0 ? (
+                <Text testID="chat-profile-members-empty" style={styles.emptyMembers}>
+                  {members.length === 0
+                    ? t('modal.chatProfile.membersUnavailable')
+                    : t('search.noResults')}
+                </Text>
+              ) : (
+                visibleMembers.map((user, index) => {
+                  const banned = user.ban_status === 'banned';
+                  const roleLabel =
+                    user.role && user.role !== 'none' && user.role !== 'participant'
+                      ? user.role
+                      : null;
+                  return (
+                    <View
+                      key={user.xmppUsername}
+                      style={[styles.memberRow, index > 0 && styles.memberDivider]}
                     >
-                      <ProfileImagePlaceholder
-                        name={`${user.firstName} ${user.lastName}`}
-                        size={40}
-                      />
-                      <View
-                        style={{
-                          flexDirection: 'column',
-                          gap: 2,
-                          alignItems: 'flex-start',
-                          justifyContent: 'center',
-                        }}
-                      >
-                        <Label
-                          style={[
-                            { fontSize: 16, fontWeight: 600 },
-                            chatTextStyle(config?.typography?.profile?.memberName),
-                          ]}
-                        >
-                          {user.firstName} {user.lastName}
-                        </Label>
-                        {user.last_active && (
-                          <LabelData style={getElementFont(config, 'profileSectionLabel')}>
-                            {new Date(user.last_active * 1000).toLocaleString()}
-                          </LabelData>
-                        )}
-                      </View>
-                    </Pressable>
-                    {user.role && user.role !== 'none' && (
-                      <Text
-                        style={{
-                          backgroundColor:
-                            user.ban_status !== 'banned' ? '#F3F6FC' : '#FFEBEE',
-                          color:
-                            user.ban_status !== 'banned' ? '#0052CD' : '#F44336',
-                          padding: 5,
-                          borderRadius: 16,
-                          fontSize: 12,
-                        }}
+                      <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}
                       >
-                        {user.role}
-                      </Text>
-                    )}
-                    {stateUser.xmppUsername !== user.xmppUsername &&
-                      activeRoom.role === 'moderator' &&
-                      activeRoom.type !== 'private' && (
-                        <DropdownMenu
-                          options={menuOptions(user.xmppUsername) as MenuOption[]}
-                          openButton={
-                            <Button
-                            onPress={() => {}}
-                            >
-                              <Text>{t('action.moreOptions')}</Text>
-                            </Button>
-                          }
-                          onClose={() => console.log('Dropdown closed')}
+                        <ProfileImagePlaceholder
+                          name={`${user.firstName} ${user.lastName}`}
+                          size={40}
                         />
+                        <View style={styles.memberText}>
+                          <Text
+                            numberOfLines={1}
+                            style={[
+                              styles.memberName,
+                              chatTextStyle(config?.typography?.profile?.memberName),
+                            ]}
+                          >
+                            {user.firstName} {user.lastName}
+                          </Text>
+                          {!!user.last_active && (
+                            <Text
+                              numberOfLines={1}
+                              style={[
+                                styles.memberStatus,
+                                getElementFont(config, 'profileSectionLabel'),
+                              ]}
+                            >
+                              {new Date(user.last_active * 1000).toLocaleString()}
+                            </Text>
+                          )}
+                        </View>
+                      </Pressable>
+
+                      {(banned || roleLabel) && (
+                        <Text
+                          style={[styles.memberRole, banned && styles.memberBanned]}
+                        >
+                          {banned ? t('status.banned') : roleLabel}
+                        </Text>
                       )}
-                  </View>
-                  {index < (activeRoom?.roomMembers?.length || 0) - 1 && <Divider />}
-                </View>
-              ))}
-            </ScrollView>
+
+                      {isModerator &&
+                        activeRoom.type !== 'private' &&
+                        stateUser.xmppUsername !== user.xmppUsername && (
+                          <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)}
+                          >
+                            <DeleteIcon width={20} height={20} />
+                          </TouchableOpacity>
+                        )}
+                    </View>
+                  );
+                })
+              )}
+            </View>
           )}
-        </BorderedContainer>
-        )}
-      </CenterContainer>
+        </View>
+      </Animated.ScrollView>
+
+      <ProfileTopBar
+        title={title}
+        subtitle={subtitle}
+        imageUri={heroImage}
+        fallbackColor={heroColor}
+        initials={chatInitials(title)}
+        scrollY={scrollY}
+        onBack={handleCloseModal}
+        titleStyle={chatTextStyle(config?.typography?.profile?.screenTitle)}
+        menu={<ProfileMenu items={menuItems} />}
+      />
 
       <DeleteChatModal
-        isModalOpen={isModalOpen}
-        setIsModalOpen={setIsModalOpen}
+        isModalOpen={isDeleteOpen}
+        setIsModalOpen={setIsDeleteOpen}
+      />
+      <ReportChatModal
+        visible={isReportOpen}
+        onClose={() => setIsReportOpen(false)}
       />
     </ModalContainerFullScreen>
   );
 };
 
+const createStyles = (theme: ChatTheme) => StyleSheet.create({
+  screen: {
+    position: 'relative',
+    backgroundColor: theme.listBackground,
+  },
+  scroll: {
+    width: '100%',
+    flex: 1,
+  },
+  scrollContent: {
+    paddingBottom: 32,
+  },
+  body: {
+    padding: 12,
+    gap: 12,
+  },
+  card: {
+    backgroundColor: theme.surface,
+    borderRadius: 14,
+    padding: 16,
+    shadowColor: theme.shadow,
+    shadowOffset: { width: 0, height: 1 },
+    shadowOpacity: 0.05,
+    shadowRadius: 4,
+    elevation: 1,
+  },
+  cardLabel: {
+    color: theme.textSecondary,
+    fontSize: 14,
+  },
+  cardValue: {
+    color: theme.text,
+    fontSize: 16,
+    marginTop: 4,
+  },
+  addMembersRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 12,
+    paddingBottom: 14,
+    marginBottom: 10,
+    borderBottomWidth: StyleSheet.hairlineWidth,
+    borderBottomColor: theme.border,
+  },
+  addMembersLabel: {
+    fontSize: 16,
+    fontWeight: '500',
+    color: theme.text,
+  },
+  searchRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8,
+    marginTop: 10,
+    paddingHorizontal: 12,
+    height: 40,
+    borderRadius: 12,
+    backgroundColor: theme.surfaceSecondary,
+  },
+  searchInput: {
+    flex: 1,
+    fontSize: 15,
+    color: theme.text,
+    padding: 0,
+  },
+  searchClose: {
+    fontSize: 22,
+    lineHeight: 24,
+    color: theme.textSecondary,
+  },
+  emptyMembers: {
+    opacity: 0.6,
+    textAlign: 'center',
+    paddingVertical: 8,
+    color: theme.text,
+  },
+  memberRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingVertical: 10,
+  },
+  memberDivider: {
+    borderTopWidth: StyleSheet.hairlineWidth,
+    borderTopColor: theme.border,
+  },
+  memberMain: {
+    flex: 1,
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 12,
+  },
+  memberText: {
+    flex: 1,
+  },
+  memberName: {
+    fontSize: 16,
+    fontWeight: '600',
+    color: theme.text,
+  },
+  memberStatus: {
+    fontSize: 13,
+    color: theme.textSecondary,
+    marginTop: 2,
+  },
+  memberRole: {
+    fontSize: 13,
+    color: theme.textSecondary,
+    marginLeft: 8,
+  },
+  memberBanned: {
+    color: theme.danger,
+  },
+  memberRemove: {
+    marginLeft: 12,
+  },
+  menuButton: {
+    width: 40,
+    height: 40,
+    borderRadius: 20,
+    backgroundColor: 'rgba(0,0,0,0.28)',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});
+
 export default ChatProfileModal;