@ethora/chat-component-rn 26.10.9 → 26.10.10

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,

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

@@ -0,0 +1,191 @@
+/** @format */
+
+import React, { useMemo, useState } from 'react';
+import {
+  ActivityIndicator,
+  Alert,
+  Modal,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import { useSelector } from 'react-redux';
+import type { RootState } from '../../../roomStore';
+import { ProfileImagePlaceholder } from '../../MainComponents/ProfileImagePlaceholder';
+import { useLeaveRoom } from '../../../hooks/useLeaveRoom';
+import { useFileToken } from '../../../hooks/useFileToken';
+import { appendFileToken } from '../../../helpers/secureFileUrl';
+import { useTheme } from '../../../hooks/useTheme';
+import { useT } from '../../../i18n/useT';
+import type { ChatTheme } from '../../../theme/theme';
+
+interface LeaveChatModalProps {
+  /** The room to leave; the modal is shown while this is set. */
+  roomJid: string | null;
+  onClose: () => void;
+  /** Called after the server took us out, before the modal closes. */
+  onLeft?: (jid: string) => void;
+}
+
+/**
+ * Telegram-style confirmation in front of every Leave: the chat's avatar and
+ * name, the question, Cancel and a red Leave. The leave itself runs here, so
+ * the card stays up with a spinner until the server answers and a failure is
+ * reported over it instead of after it has gone.
+ */
+const LeaveChatModal: React.FC<LeaveChatModalProps> = ({
+  roomJid,
+  onClose,
+  onLeft,
+}) => {
+  const t = useT();
+  const theme = useTheme();
+  const styles = useMemo(() => createStyles(theme), [theme]);
+  const fileToken = useFileToken();
+  const leaveRoom = useLeaveRoom();
+  const room = useSelector((state: RootState) =>
+    roomJid ? state.rooms.rooms?.[roomJid] : undefined
+  );
+  const [leaving, setLeaving] = useState(false);
+
+  const name = room?.title || room?.name || '';
+
+  const close = () => {
+    if (!leaving) {onClose();}
+  };
+
+  const confirm = async () => {
+    if (!roomJid || leaving) {return;}
+    setLeaving(true);
+    const ok = await leaveRoom(roomJid);
+    setLeaving(false);
+    if (!ok) {
+      Alert.alert(t('toast.error'), t('toast.leaveFailed'));
+      return;
+    }
+    onLeft?.(roomJid);
+    onClose();
+  };
+
+  return (
+    <Modal
+      transparent
+      visible={roomJid !== null}
+      animationType="fade"
+      onRequestClose={close}
+    >
+      <View style={styles.backdrop}>
+        <TouchableOpacity
+          testID="leave-backdrop"
+          style={StyleSheet.absoluteFill}
+          activeOpacity={1}
+          onPress={close}
+        />
+        <View style={styles.card}>
+          <View style={styles.header}>
+            <ProfileImagePlaceholder
+              name={name}
+              size={40}
+              icon={appendFileToken(room?.icon, fileToken)}
+              disableOverlay
+            />
+            <Text style={styles.title} numberOfLines={1}>
+              {t('modal.leaveChat.title')}
+            </Text>
+          </View>
+          <Text style={styles.description}>
+            {name
+              ? t('modal.leaveChat.descriptionNamed', { name })
+              : t('modal.leaveChat.description')}
+          </Text>
+          <View style={styles.buttons}>
+            <TouchableOpacity
+              testID="leave-cancel"
+              activeOpacity={0.7}
+              disabled={leaving}
+              style={[styles.button, styles.cancel]}
+              onPress={close}
+            >
+              <Text style={styles.cancelLabel}>{t('action.cancel')}</Text>
+            </TouchableOpacity>
+            <TouchableOpacity
+              testID="leave-confirm"
+              activeOpacity={0.7}
+              disabled={leaving}
+              style={[styles.button, { backgroundColor: theme.danger }]}
+              onPress={confirm}
+            >
+              {leaving ? (
+                <ActivityIndicator color={theme.textOnPrimary} />
+              ) : (
+                <Text style={styles.leaveLabel}>{t('action.leave')}</Text>
+              )}
+            </TouchableOpacity>
+          </View>
+        </View>
+      </View>
+    </Modal>
+  );
+};
+
+const createStyles = (theme: ChatTheme) => StyleSheet.create({
+  backdrop: {
+    flex: 1,
+    backgroundColor: theme.overlay,
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: 24,
+  },
+  card: {
+    width: '100%',
+    maxWidth: 400,
+    borderRadius: 16,
+    backgroundColor: theme.surface,
+    padding: 20,
+  },
+  header: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 12,
+    marginBottom: 12,
+  },
+  title: {
+    flex: 1,
+    fontSize: 18,
+    fontWeight: '600',
+    color: theme.text,
+  },
+  description: {
+    fontSize: 15,
+    lineHeight: 21,
+    color: theme.text,
+  },
+  buttons: {
+    flexDirection: 'row',
+    gap: 12,
+    marginTop: 20,
+  },
+  button: {
+    flex: 1,
+    height: 44,
+    borderRadius: 12,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  cancel: {
+    backgroundColor: theme.surfaceSecondary,
+  },
+  cancelLabel: {
+    fontSize: 16,
+    fontWeight: '500',
+    color: theme.text,
+  },
+  leaveLabel: {
+    fontSize: 16,
+    fontWeight: '600',
+    color: theme.textOnPrimary,
+  },
+});
+
+export default LeaveChatModal;