@ethora/chat-component-rn 26.10.9 → 26.10.11

package/src/components/MainComponents/LanguageSelectorModal.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useCallback } from 'react';
+import React, { FC, useCallback, useMemo } from 'react';
 import {
   Modal,
   Pressable,
@@ -15,7 +15,7 @@ import {
   setTranslateMode,
 } from '../../roomStore/chatSettingsSlice';
 import { useChatSettingState } from '../../hooks/useChatSettingState';
-import { LANGUAGE_OPTIONS } from '../../helpers/constants/LANGUAGE_OPTIONS';
+import { chatLanguageChoices } from '../../services/languageSettings';
 import { Iso639_1Codes } from '../../types/models/language.model';
 import {
   canReaderChooseTranslateMode,
@@ -79,12 +79,16 @@ export const LanguageSelectorModal: FC<{
   const translates = config?.translates;
   const effectiveMode = resolveTranslateMode(translates, translateMode);
   const showModeSwitcher = canReaderChooseTranslateMode(translates);
-  const showLanguageList = translates?.showLanguageList !== false;
+  // The install's translateLanguages (get-config) when the host passed
+  // them, the built-in list otherwise; empty hides the list.
+  const languageChoices = useMemo(() => chatLanguageChoices(config), [config]);
+  const showLanguageList =
+    translates?.showLanguageList !== false && languageChoices.length > 0;
   const activeLocale = translates?.readerLocale || langSource;
 
   const selectLanguage = useCallback(
-    (id: Iso639_1Codes) => {
-      dispatch(setLangSource(id));
+    (id: string) => {
+      dispatch(setLangSource(id as Iso639_1Codes));
       onClose();
     },
     [dispatch, onClose]
@@ -166,7 +170,7 @@ export const LanguageSelectorModal: FC<{
                 {t('language.select')}
               </Text>
               <ScrollView style={styles.list}>
-                {LANGUAGE_OPTIONS.map((option) => {
+                {languageChoices.map((option) => {
                   // Compare on the base language so a reader on "fr" still
                   // sees "Français" (id fr-CA) ticked.
                   const selected =

package/src/components/MainComponents/MediaMessage.tsx

@@ -1,5 +1,5 @@
 import React, { useMemo } from 'react';
-import { IAttachment, IMessage } from '../../types/types';
+import { IAttachment, IMessage, ModalFileSource } from '../../types/types';
 import FileDownload from '../styled/UnsupportedType';
 import CustomMessageImage from '../styled/MessageImage';
 import CustomMessageVideo from '../styled/VideoMessage';
@@ -25,6 +25,7 @@ import AlbumGrid from './AlbumGrid';
 import MediaCaption from '../MessageBubble/MediaCaption';
 import MediaUploadOverlay from './MediaUploadOverlay';
 import { requestMediaRetry } from '../../helpers/mediaSendRetry';
+import { MediaSourceProvider } from '../../context/MediaSourceContext';
 
 interface MediaMessageProps {
   mimeType?: string;
@@ -32,6 +33,8 @@ interface MediaMessageProps {
   location?: string;
   messageText?: string;
   isUser: boolean;
+  /** What the file viewer's Reply and Delete act on, when opened from here. */
+  viewerSource?: ModalFileSource;
 }
 
 const pendingImageDims = defaultMediaDims();
@@ -289,7 +292,15 @@ const AttachmentCard: React.FC<AttachmentCardProps> = ({
   }
 };
 
-const MediaMessage: React.FC<MediaMessageProps> = ({
+// The viewer source wraps the whole bubble, so every picture and video in it
+// (single card or album tile) opens the viewer with it.
+const MediaMessage: React.FC<MediaMessageProps> = ({ viewerSource, ...props }) => (
+  <MediaSourceProvider value={viewerSource}>
+    <MediaMessageBody {...props} />
+  </MediaSourceProvider>
+);
+
+const MediaMessageBody: React.FC<Omit<MediaMessageProps, 'viewerSource'>> = ({
   mimeType,
   location: rawLocation,
   messageText: rawMessageText,

package/src/components/MainComponents/MessageContainer.tsx

@@ -10,6 +10,8 @@ import {
 import { View } from 'react-native';
 import { useT } from '../../i18n/useT';
 import { formatCallLogLabel } from '../../helpers/callLogMessage';
+import { isScheduledCallMessage } from '../../booking/scheduledCall';
+import ScheduledCallMessage from '../Booking/ScheduledCallMessage';
 
 interface MessageContainerProps {
   CustomMessage?: React.ComponentType<{
@@ -54,6 +56,19 @@ const MessageContainerImpl: FC<MessageContainerProps> = ({
 
   const messageDate = new Date(message.date);
 
+  // Before the system-message branch: the backend sends the invite from the
+  // system account, but it is a card, not a centred pill.
+  if (isScheduledCallMessage(message)) {
+    return (
+      <ScheduledCallMessage
+        message={message}
+        config={config}
+        showDateLabel={showDateLabel}
+        CustomDaySeparator={CustomDaySeparator}
+      />
+    );
+  }
+
   if (message?.isSystemMessage === 'true') {
     const SystemMessageComponent = config?.customSystemMessage;
     return (

package/src/components/MainComponents/ReduxWrapper.tsx

@@ -26,7 +26,9 @@ import '../../helpers/storeConsole';
 import {installPromiseRejectionTracker} from '../../utils/installPromiseRejectionTracker';
 import {useChatFonts} from '../../hooks/useChatFonts';
 import {installPushTokenHook} from '../../services/pushRegistration';
+import {installAppBadgeSync} from '../../services/appBadge';
 import {setE2eeEnabled} from '../../e2ee';
+import {installScheduledCallHook} from '../../booking/pendingScheduledCall';
 
 const gestureRootStyle = {flex: 1};
 
@@ -41,6 +43,14 @@ installPromiseRejectionTracker();
 // (one store subscription), no-op for hosts that never use push.
 installPushTokenHook();
 
+// The server sets the icon badge only with a push; in the foreground it
+// follows the unread total instead, so opening the app clears a stale one.
+installAppBadgeSync();
+
+// Arms the scheduled-call link watcher: a link held before sign-in or before
+// the chat was up opens as soon as both are true.
+installScheduledCallHook();
+
 interface ChatWrapperProps {
   token?: string;
   roomJID?: string;

package/src/components/MainComponents/RoomList.tsx

@@ -32,7 +32,7 @@ import { getIconColor } from '../../helpers/getIconColor';
 import { useT } from '../../i18n/useT';
 import { useTheme } from '../../hooks/useTheme';
 import { useRoomMute } from '../../hooks/useRoomMute';
-import { useLeaveRoom } from '../../hooks/useLeaveRoom';
+import LeaveChatModal from '../Modals/ChatProfileModal/LeaveChatModal';
 import { isMessageSearchEnabled } from '../../helpers/isMessageSearchEnabled';
 import { useMessageSearch } from '../Modals/MessageSearchModal/useMessageSearch';
 import type { MessageSearchHit } from '../../networking/api-requests/messageSearch.api';
@@ -97,6 +97,8 @@ const RoomList: React.FC<RoomListProps> = ({
   const [open, setOpen] = useState(false);
   // The room a swiped row's Report opened the form for.
   const [reportJid, setReportJid] = useState<string | null>(null);
+  // The room a swiped row's Leave is asking about.
+  const [leaveJid, setLeaveJid] = useState<string | null>(null);
   const [searchTerm, setSearchTerm] = useState('');
   const [isLongPress, setIsLongPress] = useState(false);
   const [isDrawerOpen, setDrawerOpen] = useState(false);
@@ -140,24 +142,7 @@ const RoomList: React.FC<RoomListProps> = ({
   // Behind a row swiped left. Leaving is the chat profile's flow: the
   // server takes us out of the members, then the MUC and the store.
   const swipeActions = !config?.disableRoomSwipeActions;
-  const leaveRoom = useLeaveRoom();
-  const handleLeaveRoom = useCallback(
-    (jid: string) => {
-      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(jid))) {
-              Alert.alert(t('toast.error'), t('toast.leaveFailed'));
-            }
-          },
-        },
-      ]);
-    },
-    [leaveRoom, t]
-  );
+  const handleLeaveRoom = useCallback((jid: string) => setLeaveJid(jid), []);
   const handleReportRoom = useCallback((jid: string) => setReportJid(jid), []);
   const toggleRoomMuted = useRoomMute();
   const handleToggleMute = useCallback(
@@ -592,6 +577,10 @@ const RoomList: React.FC<RoomListProps> = ({
                   onClose={() => setReportJid(null)}
                 />
               )}
+              <LeaveChatModal
+                roomJid={leaveJid}
+                onClose={() => setLeaveJid(null)}
+              />
             </View>
           </>
         )}

package/src/components/MessageBubble/Message.tsx

@@ -33,7 +33,7 @@ import {
 import { MODAL_TYPES } from '../../helpers/constants/MODAL_TYPES';
 import { setActiveMessage, setEditAction } from '../../roomStore/roomsSlice';
 import styled from 'styled-components/native';
-import { IUser, MessageProps } from '../../types/types';
+import { IUser, MessageProps, ModalFileSource } from '../../types/types';
 import MediaMessage from '../MainComponents/MediaMessage';
 import MessageTranslate from './MessageTranslate';
 import { isUnresolvedSenderId } from '../../helpers/isUnresolvedSenderId';
@@ -376,6 +376,28 @@ const Message: React.FC<MessageProps> = ({ message, isUser, isReply }) => {
     return setIsPressed(false);
   };
 
+  // What the file viewer offers for this message's pictures and videos: the
+  // same Reply and Delete as the long-press menu, under the same rules.
+  const viewerSource = useMemo<ModalFileSource | undefined>(() => {
+    if (!message?.id || !message.roomJid) {return undefined;}
+    const interactive = !config?.disableInteractions && !message.pending;
+    const parent = parseMessageReference(message);
+    const sentAt = new Date(message.date as any).getTime();
+    return {
+      messageId: message.id,
+      roomJid: message.roomJid,
+      own: interactive && isUser,
+      replyTo:
+        interactive && !isReply && !config?.disableReplies
+          ? parent
+            ? { id: parent.id, chatJID: parent.roomJid || message.roomJid }
+            : { id: message.id, chatJID: message.roomJid }
+          : undefined,
+      senderName: senderNamePending ? undefined : senderDisplayName,
+      timestamp: Number.isFinite(sentAt) ? sentAt : undefined,
+    };
+  }, [message, isUser, isReply, config?.disableInteractions, config?.disableReplies, senderNamePending, senderDisplayName]);
+
   const handleDeleteMessage = () => {
     dispatch(
       setDeleteModal({
@@ -625,6 +647,7 @@ const Message: React.FC<MessageProps> = ({ message, isUser, isReply }) => {
           location={message?.location}
           message={message}
           isUser={isUser}
+          viewerSource={viewerSource}
         />
       ) : (
         <>

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

@@ -0,0 +1,174 @@
+/** @format */
+
+import React, { useMemo, useState } from 'react';
+import {
+  ActivityIndicator,
+  Image,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import { useSelector, useStore } from 'react-redux';
+import type { RootState } from '../../../roomStore';
+import type { ModalFile } from '../../../types/types';
+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 type { ChatTheme } from '../../../theme/theme';
+
+/** Older history pages asked for from here; one at a time per room. */
+const inFlight = new Set<string>();
+const PAGE_SIZE = 30;
+
+interface ChatMediaGridProps {
+  roomJid: string;
+  /** Opens the viewer; the file comes with the whole grid as its siblings. */
+  onOpen: (file: ModalFile) => void;
+}
+
+/**
+ * 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: React.FC<ChatMediaGridProps> = ({ roomJid, onOpen }) => {
+  const t = useT();
+  const theme = useTheme();
+  const styles = useMemo(() => createStyles(theme), [theme]);
+  const store = useStore<RootState>();
+  const { client } = useXmppClient();
+  const fileToken = useFileToken();
+  const { user, config } = useChatSettingState();
+  const messages = useSelector(
+    (state: RootState) => state.rooms.rooms?.[roomJid]?.messages
+  );
+  const historyComplete = useSelector(
+    (state: RootState) => !!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 (
+    <View>
+      {files.length === 0 && !loadingMore ? (
+        <Text testID="chat-profile-media-empty" style={styles.empty}>
+          {t('modal.chatProfile.mediaEmpty')}
+        </Text>
+      ) : (
+        <View style={styles.grid}>
+          {files.map((file, index) => {
+            const isVideo = file.mimetype.startsWith('video/');
+            const thumb = isVideo ? file.previewURL : file.fileURL;
+            return (
+              <TouchableOpacity
+                key={`${file.source?.messageId}-${index}`}
+                testID={`chat-profile-media-${index}`}
+                activeOpacity={0.8}
+                style={styles.tile}
+                onPress={() => onOpen({ ...file, siblings: files, index })}
+              >
+                {!!thumb && (
+                  <Image source={{ uri: thumb }} style={styles.image} resizeMode="cover" />
+                )}
+                {isVideo && (
+                  <View style={styles.videoBadge} pointerEvents="none">
+                    <PlayIcon width={18} height={18} />
+                  </View>
+                )}
+              </TouchableOpacity>
+            );
+          })}
+        </View>
+      )}
+
+      {loadingMore ? (
+        <ActivityIndicator style={styles.more} color={getIconColor(config)} />
+      ) : (
+        !historyComplete && (
+          <TouchableOpacity
+            testID="chat-profile-media-load-more"
+            activeOpacity={0.7}
+            style={styles.more}
+            onPress={loadMore}
+          >
+            <Text style={[styles.moreLabel, { color: getIconColor(config) }]}>
+              {t('search.messages.loadMore')}
+            </Text>
+          </TouchableOpacity>
+        )
+      )}
+    </View>
+  );
+};
+
+const createStyles = (theme: ChatTheme) => 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;

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

@@ -49,7 +49,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';
@@ -67,6 +67,10 @@ import {
   isRoomMembersTruncated,
 } from '../../../helpers/roomUserCount';
 import { useRoomDirectory } from '../../../hooks/useRoomDirectory';
+import ChatMediaGrid from './ChatMediaGrid';
+import MediaViewer from '../FilePreviewModal/MediaViewer';
+import { useSaveFile } from '../FilePreviewModal/useSaveFile';
+import type { ModalFile } from '../../../types/types';
 
 /** Member rows rendered per step; the rest sits behind a 'Show more' row. */
 export const MEMBER_PAGE_SIZE = 50;
@@ -103,6 +107,11 @@ const ChatProfileModal: React.FC<ChatProfileModalProps> = ({
   const [loading, setLoading] = useState<boolean>(false);
   const [isDeleteOpen, setIsDeleteOpen] = useState(false);
   const [isReportOpen, setIsReportOpen] = useState(false);
+  const [isLeaveOpen, setIsLeaveOpen] = useState(false);
+  const [activeTab, setActiveTab] = useState<'members' | 'media'>('members');
+  // A picture or video opened from the Media tab, shown over this screen.
+  const [viewerFile, setViewerFile] = useState<ModalFile | null>(null);
+  const saveFile = useSaveFile();
   const [memberQuery, setMemberQuery] = useState('');
   const [isSearchOpen, setIsSearchOpen] = useState(false);
   // Measured, not guessed: this screen renders inside whatever frame the
@@ -113,7 +122,6 @@ const ChatProfileModal: React.FC<ChatProfileModalProps> = ({
   const { showToast } = useToast();
   const dispatch = useDispatch();
   const { client } = useXmppClient();
-  const leaveRoom = useLeaveRoom();
   const { user: stateUser, config } = useChatSettingState();
   const theme = useTheme();
   const styles = useMemo(() => createStyles(theme), [theme]);
@@ -343,27 +351,13 @@ const ChatProfileModal: React.FC<ChatProfileModalProps> = ({
   // 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;
 
@@ -379,10 +373,19 @@ const ChatProfileModal: React.FC<ChatProfileModalProps> = ({
       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;}
     collapsedForSearchRef.current = false;
@@ -432,7 +435,7 @@ const ChatProfileModal: React.FC<ChatProfileModalProps> = ({
         key: 'search',
         label: t('action.search'),
         icon: (color: string) => <SearchIcon color={color} />,
-        onPress: openMemberSearch,
+        onPress: openSearch,
       },
       {
         key: 'leave',
@@ -478,7 +481,7 @@ const ChatProfileModal: React.FC<ChatProfileModalProps> = ({
         key: 'search',
         label: t('action.search'),
         icon: <SearchIcon color={theme.text} width={18} height={18} />,
-        onPress: openMemberSearch,
+        onPress: openSearch,
       });
     }
     items.push({
@@ -593,24 +596,61 @@ const ChatProfileModal: React.FC<ChatProfileModalProps> = ({
             </View>
           )}
 
-          {isMessageSearchEnabled(config) && (
-            <View style={styles.card}>
-              <TouchableOpacity
-                testID="chat-profile-search-messages"
-                activeOpacity={0.7}
-                style={styles.addMembersRow}
-                onPress={() => dispatch(setActiveModal(MODAL_TYPES.MESSAGE_SEARCH))}
-              >
-                <SearchIcon color={getIconColor(config)} />
-                <Text style={styles.addMembersLabel}>
-                  {t('search.messages.title')}
-                </Text>
-              </TouchableOpacity>
-            </View>
-          )}
 
-          {!config?.disableChatInfo?.hideMembers && (
-            <View style={styles.card}>
+          <View style={styles.card}>
+            {showMembers ? (
+              <View style={styles.tabsRow}>
+                {(['members', 'media'] as const).map((tab) => {
+                  const active = tab === activeTab;
+                  return (
+                    <TouchableOpacity
+                      key={tab}
+                      testID={`chat-profile-tab-${tab}`}
+                      activeOpacity={0.7}
+                      style={[
+                        styles.tab,
+                        active && { borderBottomColor: getIconColor(config) },
+                      ]}
+                      onPress={() => setActiveTab(tab)}
+                    >
+                      <Text
+                        style={[
+                          styles.tabLabel,
+                          getElementFont(config, 'profileSectionLabel'),
+                          active && { color: getIconColor(config) },
+                        ]}
+                      >
+                        {tab === 'members'
+                          ? t('modal.chatProfile.membersLabel', { count: memberCount })
+                          : t('modal.chatProfile.media')}
+                      </Text>
+                    </TouchableOpacity>
+                  );
+                })}
+                {activeTab === 'members' && !isSearchOpen && (
+                  <TouchableOpacity
+                    testID="chat-profile-member-search-open"
+                    accessibilityRole="button"
+                    accessibilityLabel={t('search.members')}
+                    activeOpacity={0.7}
+                    hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}
+                    style={styles.tabsSearch}
+                    onPress={openMemberSearch}
+                  >
+                    <SearchIcon color={theme.textSecondary} width={18} height={18} />
+                  </TouchableOpacity>
+                )}
+              </View>
+            ) : (
+              <Text style={[styles.cardLabel, getElementFont(config, 'profileSectionLabel')]}>
+                {t('modal.chatProfile.media')}
+              </Text>
+            )}
+
+            {!showMembers || activeTab === 'media' ? (
+              <ChatMediaGrid roomJid={activeRoom.jid} onOpen={setViewerFile} />
+            ) : (
+            <>
               {canAddMembers && (
                 <SelectUsersModal
                   trigger={(open) => (
@@ -629,15 +669,6 @@ const ChatProfileModal: React.FC<ChatProfileModalProps> = ({
                 />
               )}
 
-              <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} />
@@ -773,8 +804,9 @@ const ChatProfileModal: React.FC<ChatProfileModalProps> = ({
                   </Text>
                 </TouchableOpacity>
               )}
-            </View>
-          )}
+            </>
+            )}
+          </View>
         </View>
       </Animated.ScrollView>
 
@@ -798,6 +830,24 @@ const ChatProfileModal: React.FC<ChatProfileModalProps> = ({
         visible={isReportOpen}
         onClose={() => setIsReportOpen(false)}
       />
+      <LeaveChatModal
+        roomJid={isLeaveOpen && activeRoom?.jid ? activeRoom.jid : null}
+        onClose={() => setIsLeaveOpen(false)}
+        onLeft={() => handleCloseModal?.()}
+      />
+      {viewerFile && (
+        <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?.()}
+        />
+      )}
     </ModalContainerFullScreen>
   );
 };
@@ -818,6 +868,27 @@ const createStyles = (theme: ChatTheme) => 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,