@ethora/chat-component-rn 26.10.9 → 26.10.10

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

@@ -0,0 +1,154 @@
+"use strict";
+
+/** @format */
+
+import React, { useMemo, useState } from 'react';
+import { ActivityIndicator, Image, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+import { useSelector, useStore } from 'react-redux';
+import { collectRoomMedia } from '../../../helpers/roomMedia';
+import { loadRoomHistory } from '../../../helpers/loadRoomHistory';
+import { useFileToken } from '../../../hooks/useFileToken';
+import { useChatSettingState } from '../../../hooks/useChatSettingState';
+import { useXmppClient } from '../../../context/xmppProvider';
+import { useTheme } from '../../../hooks/useTheme';
+import { getIconColor } from '../../../helpers/getIconColor';
+import { useT } from '../../../i18n/useT';
+import { PlayIcon } from '../../../assets/icons';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** Older history pages asked for from here; one at a time per room. */
+const inFlight = new Set();
+const PAGE_SIZE = 30;
+/**
+ * The chat profile's Media tab: a three-column grid of the room's pictures
+ * and videos. It shows what history is loaded and pages older history in on
+ * demand, the same MAM pages the message list asks for.
+ */
+const ChatMediaGrid = ({
+  roomJid,
+  onOpen
+}) => {
+  const t = useT();
+  const theme = useTheme();
+  const styles = useMemo(() => createStyles(theme), [theme]);
+  const store = useStore();
+  const {
+    client
+  } = useXmppClient();
+  const fileToken = useFileToken();
+  const {
+    user,
+    config
+  } = useChatSettingState();
+  const messages = useSelector(state => state.rooms.rooms?.[roomJid]?.messages);
+  const historyComplete = useSelector(state => !!state.rooms.rooms?.[roomJid]?.historyComplete);
+  const [loadingMore, setLoadingMore] = useState(false);
+  const files = useMemo(() => collectRoomMedia(messages, roomJid, {
+    me: user,
+    fileToken,
+    interactive: !config?.disableInteractions,
+    repliesOn: !config?.disableReplies
+  }), [messages, roomJid, user, fileToken, config?.disableInteractions, config?.disableReplies]);
+  const loadMore = () => loadRoomHistory({
+    client,
+    room: store.getState().rooms.rooms?.[roomJid],
+    inFlight,
+    chatJID: roomJid,
+    max: PAGE_SIZE,
+    onBusyChange: setLoadingMore
+  });
+  return /*#__PURE__*/_jsxs(View, {
+    children: [files.length === 0 && !loadingMore ? /*#__PURE__*/_jsx(Text, {
+      testID: "chat-profile-media-empty",
+      style: styles.empty,
+      children: t('modal.chatProfile.mediaEmpty')
+    }) : /*#__PURE__*/_jsx(View, {
+      style: styles.grid,
+      children: files.map((file, index) => {
+        const isVideo = file.mimetype.startsWith('video/');
+        const thumb = isVideo ? file.previewURL : file.fileURL;
+        return /*#__PURE__*/_jsxs(TouchableOpacity, {
+          testID: `chat-profile-media-${index}`,
+          activeOpacity: 0.8,
+          style: styles.tile,
+          onPress: () => onOpen({
+            ...file,
+            siblings: files,
+            index
+          }),
+          children: [!!thumb && /*#__PURE__*/_jsx(Image, {
+            source: {
+              uri: thumb
+            },
+            style: styles.image,
+            resizeMode: "cover"
+          }), isVideo && /*#__PURE__*/_jsx(View, {
+            style: styles.videoBadge,
+            pointerEvents: "none",
+            children: /*#__PURE__*/_jsx(PlayIcon, {
+              width: 18,
+              height: 18
+            })
+          })]
+        }, `${file.source?.messageId}-${index}`);
+      })
+    }), loadingMore ? /*#__PURE__*/_jsx(ActivityIndicator, {
+      style: styles.more,
+      color: getIconColor(config)
+    }) : !historyComplete && /*#__PURE__*/_jsx(TouchableOpacity, {
+      testID: "chat-profile-media-load-more",
+      activeOpacity: 0.7,
+      style: styles.more,
+      onPress: loadMore,
+      children: /*#__PURE__*/_jsx(Text, {
+        style: [styles.moreLabel, {
+          color: getIconColor(config)
+        }],
+        children: t('search.messages.loadMore')
+      })
+    })]
+  });
+};
+const createStyles = theme => StyleSheet.create({
+  grid: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    gap: 6
+  },
+  tile: {
+    width: '31.8%',
+    aspectRatio: 1,
+    borderRadius: 10,
+    overflow: 'hidden',
+    backgroundColor: theme.dark ? theme.surfaceSecondary : '#1F1F1F'
+  },
+  image: {
+    width: '100%',
+    height: '100%'
+  },
+  videoBadge: {
+    position: 'absolute',
+    left: 6,
+    bottom: 6,
+    width: 28,
+    height: 28,
+    borderRadius: 14,
+    backgroundColor: 'rgba(0, 0, 0, 0.55)',
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  empty: {
+    paddingVertical: 16,
+    textAlign: 'center',
+    color: theme.textSecondary
+  },
+  more: {
+    paddingVertical: 14,
+    alignItems: 'center'
+  },
+  moreLabel: {
+    fontSize: 15,
+    fontWeight: '500'
+  }
+});
+export default ChatMediaGrid;
+//# sourceMappingURL=ChatMediaGrid.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","useMemo","useState","ActivityIndicator","Image","StyleSheet","Text","TouchableOpacity","View","useSelector","useStore","collectRoomMedia","loadRoomHistory","useFileToken","useChatSettingState","useXmppClient","useTheme","getIconColor","useT","PlayIcon","jsx","_jsx","jsxs","_jsxs","inFlight","Set","PAGE_SIZE","ChatMediaGrid","roomJid","onOpen","t","theme","styles","createStyles","store","client","fileToken","user","config","messages","state","rooms","historyComplete","loadingMore","setLoadingMore","files","me","interactive","disableInteractions","repliesOn","disableReplies","loadMore","room","getState","chatJID","max","onBusyChange","children","length","testID","style","empty","grid","map","file","index","isVideo","mimetype","startsWith","thumb","previewURL","fileURL","activeOpacity","tile","onPress","siblings","source","uri","image","resizeMode","videoBadge","pointerEvents","width","height","messageId","more","color","moreLabel","create","flexDirection","flexWrap","gap","aspectRatio","borderRadius","overflow","backgroundColor","dark","surfaceSecondary","position","left","bottom","alignItems","justifyContent","paddingVertical","textAlign","textSecondary","fontSize","fontWeight"],"sourceRoot":"../../../../../src","sources":["components/Modals/ChatProfileModal/ChatMediaGrid.tsx"],"mappings":"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","ignoreList":[]}

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

@@ -29,7 +29,7 @@ import { MODAL_TYPES } from '../../../helpers/constants/MODAL_TYPES';
 import SelectUsersModal from '../SelectUsersModal/SelectUsersModal';
 import { useToast } from '../../../context/ToastContext';
 import { useRoomMute } from '../../../hooks/useRoomMute';
-import { useLeaveRoom } from '../../../hooks/useLeaveRoom';
+import LeaveChatModal from './LeaveChatModal';
 import { useT } from '../../../i18n/useT';
 import DeleteChatModal from './DeleteChatModal';
 import { isMessageSearchEnabled } from '../../../helpers/isMessageSearchEnabled';
@@ -39,9 +39,11 @@ import ProfileMenu from '../ProfileHeader/ProfileMenu';
 import { dedupeMembers } from '../../../helpers/dedupeMembers';
 import { getRoomUserCount, isRoomMembersTruncated } from '../../../helpers/roomUserCount';
 import { useRoomDirectory } from '../../../hooks/useRoomDirectory';
-
+import ChatMediaGrid from './ChatMediaGrid';
+import MediaViewer from '../FilePreviewModal/MediaViewer';
+import { useSaveFile } from '../FilePreviewModal/useSaveFile';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 /** Member rows rendered per step; the rest sits behind a 'Show more' row. */
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const MEMBER_PAGE_SIZE = 50;
 
 /**
@@ -65,6 +67,11 @@ const ChatProfileModal = ({
   const [loading, setLoading] = useState(false);
   const [isDeleteOpen, setIsDeleteOpen] = useState(false);
   const [isReportOpen, setIsReportOpen] = useState(false);
+  const [isLeaveOpen, setIsLeaveOpen] = useState(false);
+  const [activeTab, setActiveTab] = useState('members');
+  // A picture or video opened from the Media tab, shown over this screen.
+  const [viewerFile, setViewerFile] = useState(null);
+  const saveFile = useSaveFile();
   const [memberQuery, setMemberQuery] = useState('');
   const [isSearchOpen, setIsSearchOpen] = useState(false);
   // Measured, not guessed: this screen renders inside whatever frame the
@@ -78,7 +85,6 @@ const ChatProfileModal = ({
   const {
     client
   } = useXmppClient();
-  const leaveRoom = useLeaveRoom();
   const {
     user: stateUser,
     config
@@ -287,25 +293,11 @@ const ChatProfileModal = ({
   // Leaving takes us out of the members on the server, then out of the MUC;
   // dropping the room from the store is what 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: async () => {
-        if (!(await leaveRoom(activeRoom?.jid || ''))) {
-          Alert.alert(t('toast.error'), t('toast.leaveFailed'));
-          return;
-        }
-        handleCloseModal?.();
-      }
-    }]);
-  };
+  const handleLeave = () => setIsLeaveOpen(true);
   const isModerator = activeRoom?.role === 'moderator';
   const canEditIcon = !config?.disableChatInfo?.disableIconEdit && activeRoom?.role !== 'participant';
   const canAddMembers = isModerator && activeRoom?.type === 'group';
+  const showMembers = !config?.disableChatInfo?.hideMembers;
   const canDeleteChat = isModerator && activeRoom?.type !== 'private';
   const hasIcon = !!activeRoom?.icon;
   const scrollHeaderTo = y => scrollRef.current?.scrollTo?.({
@@ -322,9 +314,15 @@ const ChatProfileModal = ({
       collapsedForSearchRef.current = true;
       scrollHeaderTo(target);
     }
+    setActiveTab('members');
     setIsSearchOpen(true);
     setTimeout(() => searchInputRef.current?.focus(), 50);
   };
+
+  // Search looks through this chat's messages, like the room list's search
+  // does across chats. Where message search is off it falls back to the
+  // member search it used to be; members keep their own magnifier either way.
+  const openSearch = () => isMessageSearchEnabled(config) ? dispatch(setActiveModal(MODAL_TYPES.CHAT_MESSAGE_SEARCH)) : openMemberSearch();
   const restoreHeader = () => {
     if (!collapsedForSearchRef.current) {
       return;
@@ -380,7 +378,7 @@ const ChatProfileModal = ({
     icon: color => /*#__PURE__*/_jsx(SearchIcon, {
       color: color
     }),
-    onPress: openMemberSearch
+    onPress: openSearch
   }, {
     key: 'leave',
     label: t('action.leave'),
@@ -437,7 +435,7 @@ const ChatProfileModal = ({
           width: 18,
           height: 18
         }),
-        onPress: openMemberSearch
+        onPress: openSearch
       });
     }
     items.push({
@@ -548,58 +546,32 @@ const ChatProfileModal = ({
             style: styles.cardValue,
             children: activeRoom.type || '—'
           })]
-        }), isMessageSearchEnabled(config) && /*#__PURE__*/_jsx(View, {
+        }), /*#__PURE__*/_jsxs(View, {
           style: styles.card,
-          children: /*#__PURE__*/_jsxs(TouchableOpacity, {
-            testID: "chat-profile-search-messages",
-            activeOpacity: 0.7,
-            style: styles.addMembersRow,
-            onPress: () => dispatch(setActiveModal(MODAL_TYPES.MESSAGE_SEARCH)),
-            children: [/*#__PURE__*/_jsx(SearchIcon, {
-              color: getIconColor(config)
-            }), /*#__PURE__*/_jsx(Text, {
-              style: styles.addMembersLabel,
-              children: t('search.messages.title')
-            })]
-          })
-        }), !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: theme.textSecondary,
-              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: theme.textMuted,
-              autoCorrect: false,
-              returnKeyType: "search"
-            }), /*#__PURE__*/_jsx(TouchableOpacity, {
-              testID: "chat-profile-search-close",
+          children: [showMembers ? /*#__PURE__*/_jsxs(View, {
+            style: styles.tabsRow,
+            children: [['members', 'media'].map(tab => {
+              const active = tab === activeTab;
+              return /*#__PURE__*/_jsx(TouchableOpacity, {
+                testID: `chat-profile-tab-${tab}`,
+                activeOpacity: 0.7,
+                style: [styles.tab, active && {
+                  borderBottomColor: getIconColor(config)
+                }],
+                onPress: () => setActiveTab(tab),
+                children: /*#__PURE__*/_jsx(Text, {
+                  style: [styles.tabLabel, getElementFont(config, 'profileSectionLabel'), active && {
+                    color: getIconColor(config)
+                  }],
+                  children: tab === 'members' ? t('modal.chatProfile.membersLabel', {
+                    count: memberCount
+                  }) : t('modal.chatProfile.media')
+                })
+              }, tab);
+            }), activeTab === 'members' && !isSearchOpen && /*#__PURE__*/_jsx(TouchableOpacity, {
+              testID: "chat-profile-member-search-open",
+              accessibilityRole: "button",
+              accessibilityLabel: t('search.members'),
               activeOpacity: 0.7,
               hitSlop: {
                 top: 8,
@@ -607,57 +579,52 @@ const ChatProfileModal = ({
                 left: 8,
                 right: 8
               },
-              onPress: closeMemberSearch,
-              children: /*#__PURE__*/_jsx(Text, {
-                style: styles.searchClose,
-                children: "\xD7"
+              style: styles.tabsSearch,
+              onPress: openMemberSearch,
+              children: /*#__PURE__*/_jsx(SearchIcon, {
+                color: theme.textSecondary,
+                width: 18,
+                height: 18
               })
             })]
-          }), directoryLoading && /*#__PURE__*/_jsx(Text, {
-            testID: "chat-profile-members-loading",
-            style: styles.emptyMembers,
-            children: t('modal.chatProfile.membersLoadingAll')
-          }), 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: composeName(user.firstName, user.lastName),
-                  icon: appendFileToken(user.profileImage, fileToken) || null,
-                  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()
-                  })]
+          }) : /*#__PURE__*/_jsx(Text, {
+            style: [styles.cardLabel, getElementFont(config, 'profileSectionLabel')],
+            children: t('modal.chatProfile.media')
+          }), !showMembers || activeTab === 'media' ? /*#__PURE__*/_jsx(ChatMediaGrid, {
+            roomJid: activeRoom.jid,
+            onOpen: setViewerFile
+          }) : /*#__PURE__*/_jsxs(_Fragment, {
+            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')
                 })]
-              }), (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}`,
+              })
+            }), isSearchOpen && /*#__PURE__*/_jsxs(View, {
+              style: styles.searchRow,
+              children: [/*#__PURE__*/_jsx(SearchIcon, {
+                color: theme.textSecondary,
+                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: theme.textMuted,
+                autoCorrect: false,
+                returnKeyType: "search"
+              }), /*#__PURE__*/_jsx(TouchableOpacity, {
+                testID: "chat-profile-search-close",
                 activeOpacity: 0.7,
                 hitSlop: {
                   top: 8,
@@ -665,23 +632,82 @@ const ChatProfileModal = ({
                   left: 8,
                   right: 8
                 },
-                style: styles.memberRemove,
-                onPress: () => confirmRemoveMember(user),
-                children: /*#__PURE__*/_jsx(DeleteIcon, {
-                  width: 20,
-                  height: 20
+                onPress: closeMemberSearch,
+                children: /*#__PURE__*/_jsx(Text, {
+                  style: styles.searchClose,
+                  children: "\xD7"
                 })
               })]
-            }, user.xmppUsername);
-          }), hiddenMemberCount > 0 && /*#__PURE__*/_jsx(TouchableOpacity, {
-            testID: "chat-profile-members-show-more",
-            activeOpacity: 0.7,
-            style: styles.showMoreRow,
-            onPress: () => setVisibleCount(c => c + MEMBER_PAGE_SIZE),
-            children: /*#__PURE__*/_jsx(Text, {
-              style: styles.addMembersLabel,
-              children: t('search.messages.loadMore')
-            })
+            }), directoryLoading && /*#__PURE__*/_jsx(Text, {
+              testID: "chat-profile-members-loading",
+              style: styles.emptyMembers,
+              children: t('modal.chatProfile.membersLoadingAll')
+            }), 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: composeName(user.firstName, user.lastName),
+                    icon: appendFileToken(user.profileImage, fileToken) || null,
+                    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()
+                    })]
+                  })]
+                }), (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);
+            }), hiddenMemberCount > 0 && /*#__PURE__*/_jsx(TouchableOpacity, {
+              testID: "chat-profile-members-show-more",
+              activeOpacity: 0.7,
+              style: styles.showMoreRow,
+              onPress: () => setVisibleCount(c => c + MEMBER_PAGE_SIZE),
+              children: /*#__PURE__*/_jsx(Text, {
+                style: styles.addMembersLabel,
+                children: t('search.messages.loadMore')
+              })
+            })]
           })]
         })]
       })]
@@ -703,6 +729,27 @@ const ChatProfileModal = ({
     }), /*#__PURE__*/_jsx(ReportChatModal, {
       visible: isReportOpen,
       onClose: () => setIsReportOpen(false)
+    }), /*#__PURE__*/_jsx(LeaveChatModal, {
+      roomJid: isLeaveOpen && activeRoom?.jid ? activeRoom.jid : null,
+      onClose: () => setIsLeaveOpen(false),
+      onLeft: () => handleCloseModal?.()
+    }), viewerFile && /*#__PURE__*/_jsx(MediaViewer, {
+      file: viewerFile,
+      onClose: () => setViewerFile(null),
+      onPage: index => {
+        const next = viewerFile.siblings?.[index];
+        if (next) {
+          setViewerFile({
+            ...next,
+            siblings: viewerFile.siblings,
+            index
+          });
+        }
+      },
+      onSave: () => saveFile(viewerFile)
+      // Reply opens the thread in the chat underneath this screen.
+      ,
+      onReplyOpened: () => handleCloseModal?.()
     })]
   });
 };
@@ -722,6 +769,27 @@ const createStyles = theme => StyleSheet.create({
     padding: 12,
     gap: 12
   },
+  tabsRow: {
+    flexDirection: 'row',
+    gap: 20,
+    borderBottomWidth: StyleSheet.hairlineWidth,
+    borderBottomColor: theme.border,
+    marginBottom: 12
+  },
+  tabsSearch: {
+    marginLeft: 'auto',
+    paddingBottom: 10
+  },
+  tab: {
+    paddingBottom: 10,
+    borderBottomWidth: 2,
+    borderBottomColor: 'transparent'
+  },
+  tabLabel: {
+    fontSize: 15,
+    fontWeight: '500',
+    color: theme.textSecondary
+  },
   card: {
     backgroundColor: theme.surface,
     borderRadius: 14,