@ethora/chat-component-rn 26.8.7 → 26.8.9

package/src/components/MainComponents/ReduxWrapper.tsx

@@ -11,6 +11,8 @@ import {
   setConfig,
   setPushEnabled,
   setThemePreference,
+  setUiLocale,
+  setLangSource,
 } from '../../roomStore/chatSettingsSlice';
 import {loadPreferences} from '../../helpers/preferencesStorage';
 import {ConfigUser, IConfig, MessageProps} from '../../types/types';
@@ -90,6 +92,10 @@ const ChatThemeProvider: React.FC<{config?: IConfig; children: React.ReactNode}>
       if (typeof prefs.pushEnabled === 'boolean') {
         dispatch(setPushEnabled(prefs.pushEnabled));
       }
+      // The user's languages, as last picked here; the profile's values
+      // take over once the session is up (see languageSettings).
+      if (prefs.uiLocale) {dispatch(setUiLocale(prefs.uiLocale));}
+      if (prefs.chatLanguage) {dispatch(setLangSource(prefs.chatLanguage as any));}
     });
   }, [dispatch]);
 

package/src/components/MainComponents/RoomList.tsx

@@ -8,6 +8,7 @@ import React, {
   useRef,
 } from 'react';
 import {
+  Alert,
   View,
   StyleSheet,
   FlatList,
@@ -16,6 +17,11 @@ import {
   NativeScrollEvent,
   NativeSyntheticEvent,
 } from 'react-native';
+import { useDispatch } from 'react-redux';
+import { deleteRoom } from '../../roomStore/roomsSlice';
+import { useXmppClient } from '../../context/xmppProvider';
+import SwipeableRoomRow, { closeOpenRoomRow } from '../RoomComponents/SwipeableRoomRow';
+import ReportChatModal from '../Modals/ChatProfileModal/ReportChatModal';
 import { IRoom } from '../../types/types';
 import { SearchInput } from '../InputComponents/Search';
 import { BurgerMenuIcon, SearchIcon } from '../../assets/icons';
@@ -79,8 +85,12 @@ const RoomList: React.FC<RoomListProps> = ({
   const { config } = useChatSettingState();
   const t = useT();
   const theme = useTheme();
+  const dispatch = useDispatch();
+  const { client } = useXmppClient();
 
   const [open, setOpen] = useState(false);
+  // The room a swiped row's Report opened the form for.
+  const [reportJid, setReportJid] = useState<string | null>(null);
   const [searchTerm, setSearchTerm] = useState('');
   const [isLongPress, setIsLongPress] = useState(false);
   const [isDrawerOpen, setDrawerOpen] = useState(false);
@@ -121,6 +131,31 @@ const RoomList: React.FC<RoomListProps> = ({
     setSearchTerm(text);
   }, []);
 
+  // Behind a row swiped left. Leaving is the chat profile's flow: an
+  // unavailable presence to the MUC, then the room dropped from the store.
+  const swipeActions = !config?.disableRoomSwipeActions;
+  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: () => {
+            try {
+              client?.leaveTheRoomStanza?.(jid);
+            } catch (error) {
+              console.error('Failed to leave the room:', error);
+            }
+            dispatch(deleteRoom({ jid }));
+          },
+        },
+      ]);
+    },
+    [client, dispatch, t]
+  );
+  const handleReportRoom = useCallback((jid: string) => setReportJid(jid), []);
+
   const activityOf = useCallback((chat: IRoom): number => {
     const last = chat?.messages?.[chat?.messages.length - 1];
     const fromLive = Number(last?.id);
@@ -237,6 +272,8 @@ const RoomList: React.FC<RoomListProps> = ({
   const handleScrollBeginDrag = useCallback(() => {
     hasDragged.current = true;
     clearSettleTimer();
+    // Scrolling folds a row's actions back, as in the messengers.
+    closeOpenRoomRow();
   }, []);
 
   const handleScrollEndDrag = useCallback(
@@ -276,18 +313,38 @@ const RoomList: React.FC<RoomListProps> = ({
   }, [isSearchFocused]);
 
   const renderRoom = useCallback(
-    ({ item }: { item: IRoom }) => (
-      <Pressable
-        testID={`room-${(item.jid || '').split('@')[0]}`}
-        accessibilityLabel={`room-${item.title || item.name}`}
-        onPress={() => performClick(item)}
-        onPressIn={handlePressIn}
-        onPressOut={handlePressOut}
-      >
-        <ChatRoomItem chat={item} config={config} />
-      </Pressable>
-    ),
-    [performClick, handlePressIn, handlePressOut, config]
+    ({ item }: { item: IRoom }) => {
+      const row = (
+        <Pressable
+          testID={`room-${(item.jid || '').split('@')[0]}`}
+          accessibilityLabel={`room-${item.title || item.name}`}
+          onPress={() => performClick(item)}
+          onPressIn={handlePressIn}
+          onPressOut={handlePressOut}
+        >
+          <ChatRoomItem chat={item} config={config} />
+        </Pressable>
+      );
+      if (!swipeActions || !item.jid) {return row;}
+      return (
+        <SwipeableRoomRow
+          roomJid={item.jid}
+          onReport={handleReportRoom}
+          onLeave={handleLeaveRoom}
+        >
+          {row}
+        </SwipeableRoomRow>
+      );
+    },
+    [
+      performClick,
+      handlePressIn,
+      handlePressOut,
+      config,
+      swipeActions,
+      handleReportRoom,
+      handleLeaveRoom,
+    ]
   );
 
   const toggleDrawer = () => {
@@ -418,6 +475,15 @@ const RoomList: React.FC<RoomListProps> = ({
                 overlayAnimation={overlayAnimation}
                 isDrawerOpen={isDrawerOpen}
               />
+              {/* Mounted only while a report is being written: the form
+                  is a Modal of its own and wants the toast context. */}
+              {reportJid !== null && (
+                <ReportChatModal
+                  visible
+                  roomJid={reportJid}
+                  onClose={() => setReportJid(null)}
+                />
+              )}
             </View>
           </>
         )}

package/src/components/Menu/HeaderRoomListMenu.tsx

@@ -30,14 +30,27 @@ import {
   shouldDismissOnDrag,
 } from '../../helpers/sheetGestures';
 import type { IConfig } from '../../types/types';
+import { useT } from '../../i18n/useT';
 
 type LogoutConfig = NonNullable<IConfig['logout']>;
 
-const DEFAULT_LOGOUT_LABEL = 'Sign out';
+/** The sign-out copy in the UI language; a host's `logout.label` etc. win. */
+export interface LogoutStrings {
+  label: string;
+  message: string;
+  cancel: string;
+}
+
+const DEFAULT_LOGOUT_STRINGS: LogoutStrings = {
+  label: 'Sign out',
+  message: 'Are you sure you want to sign out?',
+  cancel: 'Cancel',
+};
 
 const confirmLogout = (
   confirm: LogoutConfig['confirm'],
-  label: string
+  label: string,
+  strings: LogoutStrings
 ): Promise<boolean> => {
   if (confirm === false) {
     return Promise.resolve(true);
@@ -46,10 +59,10 @@ const confirmLogout = (
   return new Promise<boolean>((resolve) => {
     Alert.alert(
       copy.title ?? label,
-      copy.message ?? 'Are you sure you want to sign out?',
+      copy.message ?? strings.message,
       [
         {
-          text: copy.cancelText ?? 'Cancel',
+          text: copy.cancelText ?? strings.cancel,
           style: 'cancel',
           onPress: () => resolve(false),
         },
@@ -66,10 +79,15 @@ const confirmLogout = (
 
 export const runLogoutFlow = async (
   logoutConfig: LogoutConfig,
-  performLogout: () => Promise<void>
+  performLogout: () => Promise<void>,
+  strings: LogoutStrings = DEFAULT_LOGOUT_STRINGS
 ): Promise<void> => {
-  const label = logoutConfig.label ?? DEFAULT_LOGOUT_LABEL;
-  const confirmed = await confirmLogout(logoutConfig.confirm ?? true, label);
+  const label = logoutConfig.label ?? strings.label;
+  const confirmed = await confirmLogout(
+    logoutConfig.confirm ?? true,
+    label,
+    strings
+  );
   if (!confirmed) {
     return;
   }
@@ -112,7 +130,16 @@ export const HeaderRoomListMenu: FC<HeaderRoomListMenuProps> = ({
   const dispatch = useDispatch();
   const { config } = useChatSettingState();
   const performLogout = useLogout();
+  const t = useT();
   const logoutConfig = config?.logout?.enabled ? config.logout : undefined;
+  const logoutStrings = useMemo<LogoutStrings>(
+    () => ({
+      label: t('menu.logout'),
+      message: t('menu.logoutConfirm'),
+      cancel: t('action.cancel'),
+    }),
+    [t]
+  );
   const theme = useTheme();
   const primaryColor = theme.primary;
   const iconColor = theme.icon;
@@ -246,7 +273,7 @@ export const HeaderRoomListMenu: FC<HeaderRoomListMenuProps> = ({
       styles?: { color: string };
     }[] = [
       {
-        label: 'New Chat',
+        label: t('menu.newChat'),
         icon: <AddNewIcon color={iconColor} />,
         onClick: () => {
           dispatch(setActiveModal(MODAL_TYPES.NEW_CHAT));
@@ -254,14 +281,14 @@ export const HeaderRoomListMenu: FC<HeaderRoomListMenuProps> = ({
         styles: { color: labelColor },
       },
       {
-        label: 'Profile',
+        label: t('menu.profile'),
         icon: <ProfileIcon color={iconColor} />,
         onClick: () => {
           dispatch(setActiveModal(MODAL_TYPES.PROFILE));
         },
       },
       {
-        label: 'Settings',
+        label: t('menu.settings'),
         icon: <SettingIcon color={iconColor} />,
         onClick: () => {
           dispatch(setActiveModal(MODAL_TYPES.SETTINGS));
@@ -270,16 +297,16 @@ export const HeaderRoomListMenu: FC<HeaderRoomListMenuProps> = ({
     ];
     if (logoutConfig) {
       options.push({
-        label: logoutConfig.label ?? DEFAULT_LOGOUT_LABEL,
+        label: logoutConfig.label ?? logoutStrings.label,
         icon: <LogoutIcon color={iconColor} />,
         styles: { color: primaryColor },
         onClick: () => {
-          runLogoutFlow(logoutConfig, performLogout).catch(() => {});
+          runLogoutFlow(logoutConfig, performLogout, logoutStrings).catch(() => {});
         },
       });
     }
     return options;
-  }, [dispatch, logoutConfig, performLogout, primaryColor, iconColor, labelColor]);
+  }, [dispatch, logoutConfig, logoutStrings, performLogout, primaryColor, iconColor, labelColor, t]);
 
   return (
     // Presented through a real <Modal>: as an in-tree overlay the sheet was

package/src/components/MenuRoom/MenuRoom.tsx

@@ -2,16 +2,18 @@ import { FC, useMemo } from 'react';
 import DropdownMenu from '../DropdownMenu/DropdownMenu';
 import Button from '../styled/Button';
 import { LeaveIcon, MoreIcon, ReportIcon } from '../../assets/icons';
+import { useT } from '../../i18n/useT';
 
 interface RoomMenuProps {
   handleLeaveClick: () => void;
 }
 
 export const RoomMenu: FC<RoomMenuProps> = ({ handleLeaveClick }) => {
+  const t = useT();
   const menuOptions = useMemo(
     () => [
       {
-        label: 'Report',
+        label: t('action.report'),
         icon: <ReportIcon />,
         onClick: () => {
           console.log('Report clicked');
@@ -19,7 +21,7 @@ export const RoomMenu: FC<RoomMenuProps> = ({ handleLeaveClick }) => {
         styles: { color: 'red' },
       },
       {
-        label: 'Leave',
+        label: t('action.leave'),
         icon: <LeaveIcon />,
         onClick: () => {
           handleLeaveClick();
@@ -27,7 +29,7 @@ export const RoomMenu: FC<RoomMenuProps> = ({ handleLeaveClick }) => {
         styles: { color: 'red' },
       },
     ],
-    [handleLeaveClick]
+    [handleLeaveClick, t]
   );
 
   return (

package/src/components/MessageBubble/Message.tsx

@@ -644,7 +644,7 @@ const Message: React.FC<MessageProps> = ({ message, isUser, isReply }) => {
             <CustomTimestampRow media={message?.isMediafile === 'true'}>
               {!config?.disableSentLogic && isUser && isPending && (
                 <Text style={[styles.timestampText, themedStyles.muted]}>
-                  sending...
+                  {t('message.sending')}
                 </Text>
               )}
               {!config?.disableSentLogic && isUser && isFailed && (
@@ -654,11 +654,11 @@ const Message: React.FC<MessageProps> = ({ message, isUser, isReply }) => {
                   accessibilityRole="button"
                   accessibilityLabel="Retry sending message"
                 >
-                  ! Failed — tap to retry
+                  {t('message.failedRetry')}
                 </Text>
               )}
               {message?.isEdited && !message?.isDeleted && (
-                <Text style={[styles.editedText, themedStyles.muted]}>edited</Text>
+                <Text style={[styles.editedText, themedStyles.muted]}>{t('message.edited')}</Text>
               )}
               {message?.unencrypted && !message?.isDeleted && (
                 <Pressable

package/src/components/MessageBubble/MessageInteractions.tsx

@@ -22,6 +22,7 @@ import * as Clipboard from 'expo-clipboard';
 import { useToast } from '../../context/ToastContext';
 import { useInteractionsOverlay } from './InteractionsOverlay';
 import { useTheme } from '../../hooks/useTheme';
+import { useT } from '../../i18n/useT';
 import { getEmojiNativeById } from '../../helpers/emoji';
 import {
   quickReactionIds,
@@ -61,6 +62,7 @@ const MessageInteractions: React.FC<MessageInteractionsProps> = ({
   onOpenEmojiPicker,
 }) => {
   const { showToast } = useToast();
+  const t = useT();
   const { present, dismiss, originX, originY } = useInteractionsOverlay();
   const overlayId = useId();
   const theme = useTheme();
@@ -144,15 +146,15 @@ const MessageInteractions: React.FC<MessageInteractionsProps> = ({
       await Clipboard.setStringAsync(text);
       showToast({
         id: Date.now().toString(),
-        title: 'Success',
-        message: 'Copied to clipboard!',
+        title: t('toast.successTitle'),
+        message: t('toast.copied'),
         type: 'success',
       });
     } catch (err) {
       console.log(err);
       showToast({
         id: Date.now().toString(),
-        title: 'Copy failed',
+        title: t('toast.copyFailed'),
         message: (err as Error)?.message || 'Unknown error',
         type: 'error',
       });

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

@@ -379,7 +379,7 @@ const ChatProfileModal: React.FC<ChatProfileModalProps> = ({
       console.warn('[ethora-rn] mute toggle failed', error);
       showToast({
         id: Date.now().toString(),
-        title: 'Error',
+        title: t('toast.error'),
         message: t('toast.muteFailed'),
         type: 'error',
       });

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

@@ -38,11 +38,14 @@ const CATEGORIES = [
 interface ReportChatModalProps {
   visible: boolean;
   onClose: () => void;
+  /** The room to report; the open one when absent. */
+  roomJid?: string;
 }
 
 const ReportChatModal: React.FC<ReportChatModalProps> = ({
   visible,
   onClose,
+  roomJid,
 }) => {
   const t = useT();
   const { showToast } = useToast();
@@ -66,13 +69,13 @@ const ReportChatModal: React.FC<ReportChatModalProps> = ({
     setSending(true);
     try {
       await postReportRoom({
-        chatName: activeRoom?.jid?.split('@')[0] || '',
+        chatName: (roomJid || activeRoom?.jid || '').split('@')[0],
         category,
         text: details.trim() || undefined,
       });
       showToast({
         id: Date.now().toString(),
-        title: 'Success',
+        title: t('toast.successTitle'),
         message: t('modal.report.chatTitle'),
         type: 'success',
       });
@@ -81,7 +84,7 @@ const ReportChatModal: React.FC<ReportChatModalProps> = ({
       console.error('Failed to report chat:', error);
       showToast({
         id: Date.now().toString(),
-        title: 'Error',
+        title: t('toast.error'),
         message: t('modal.report.chatTitle'),
         type: 'error',
       });

package/src/components/Modals/FilePreviewModal/FilePreviewModal.tsx

@@ -30,6 +30,7 @@ import { PlayIcon } from '../../../assets/icons';
 import * as FileSystem from 'expo-file-system/legacy';
 import { getMediaLibrary } from '../../../helpers/mediaLibraryRuntime';
 import { useToast } from '../../../context/ToastContext';
+import { useT } from '../../../i18n/useT';
 import PdfViewer from './PdfView';
 import DocumentViewer from './DocumentViewer';
 import AudioMessage from '../../styled/AudioMessage';
@@ -250,6 +251,7 @@ const FilePreviewModal: React.FC<FilePreviewModalProps> = ({
 }) => {
   const dispatch = useDispatch();
   const { showToast } = useToast();
+  const t = useT();
   const { config } = useChatSettingState();
   const theme = useTheme();
   // Info / audio cards: light keeps its warm tint (not in the palette),
@@ -309,8 +311,8 @@ const FilePreviewModal: React.FC<FilePreviewModalProps> = ({
         await getMediaLibrary()?.saveToLibraryAsync(download.uri);
         showToast({
           id: Date.now().toString(),
-          title: 'Success',
-          message: 'Save successful',
+          title: t('toast.successTitle'),
+          message: t('toast.saveSuccessful'),
           type: 'success',
         });
       } else {
@@ -394,8 +396,8 @@ const FilePreviewModal: React.FC<FilePreviewModalProps> = ({
 
         showToast({
           id: Date.now().toString(),
-          title: 'Success',
-          message: 'Save successful',
+          title: t('toast.successTitle'),
+          message: t('toast.saveSuccessful'),
           type: 'success',
         });
         return;
@@ -576,7 +578,7 @@ const FilePreviewModal: React.FC<FilePreviewModalProps> = ({
     <ModalContainerFullScreen>
       <ModalHeaderComponent
         handleCloseModal={closeModal}
-        headerTitle={'File preview'}
+        headerTitle={t('modal.filePreview.title')}
         titleStyle={chatTextStyle(config?.typography?.profile?.screenTitle)}
         rightMenu={
           <>

package/src/components/Modals/Modal/Modal.tsx

@@ -16,6 +16,17 @@ interface ModalProps {
   setOpenModal: (value?: ModalType) => any;
 }
 
+/** Screens reached from Settings: closing them goes back there. */
+const SETTINGS_SCREENS = new Set<string>([
+  MODAL_TYPES.MANAGE_DATA,
+  MODAL_TYPES.VISIBILITY,
+  MODAL_TYPES.REFERRALS,
+  MODAL_TYPES.DOCUMENT_SHARES,
+  MODAL_TYPES.PROFILE_SHARES,
+  MODAL_TYPES.BLOCKED_USERS,
+  MODAL_TYPES.CHANGE_PASSWORD,
+]);
+
 const Modal: React.FC<ModalProps> = ({ children, modal, setOpenModal }) => {
   const dispatch = useDispatch();
   const handleCloseModal = () => setOpenModal();
@@ -29,15 +40,9 @@ const Modal: React.FC<ModalProps> = ({ children, modal, setOpenModal }) => {
 
     if (!ModalComponent) {return null;}
 
-    const handleClose =
-      modal === MODAL_TYPES.MANAGE_DATA ||
-      modal === MODAL_TYPES.VISIBILITY ||
-      modal === MODAL_TYPES.REFERRALS ||
-      modal === MODAL_TYPES.DOCUMENT_SHARES ||
-      modal === MODAL_TYPES.PROFILE_SHARES ||
-      modal === MODAL_TYPES.BLOCKED_USERS
-        ? handleBackButtonClick
-        : handleCloseModal;
+    const handleClose = SETTINGS_SCREENS.has(modal)
+      ? handleBackButtonClick
+      : handleCloseModal;
 
     return <ModalComponent handleCloseModal={handleClose} />;
   };
@@ -75,15 +80,38 @@ const Modal: React.FC<ModalProps> = ({ children, modal, setOpenModal }) => {
     }
   }
 
+  // Screens under Settings are pages too: they slide in over Settings and
+  // a swipe from the left edge takes them back to it, same as the header's
+  // back button. Settings stays mounted underneath the whole time, so the
+  // slide reveals it - not the chat list - and nothing is rebuilt once the
+  // page has gone. The elements below keep the same shape as the plain
+  // branch, so Settings is the same instance before, during and after.
+  const subScreen = modal && SETTINGS_SCREENS.has(modal) ? modal : undefined;
+  const SubScreenComponent = subScreen ? MODAL_COMPONENTS[subScreen] : undefined;
+  const SettingsComponent = MODAL_COMPONENTS[MODAL_TYPES.SETTINGS];
+  const underneath =
+    SubScreenComponent && SettingsComponent ? (
+      <SettingsComponent handleCloseModal={handleCloseModal} />
+    ) : (
+      renderModalContent()
+    );
+
   return (
     modal && (
-      <ModalBackground
-        id="modal-background"
-        style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 }}
-      >
-        {renderModalContent()}
-        {children}
-      </ModalBackground>
+      <>
+        <ModalBackground
+          id="modal-background"
+          style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 }}
+        >
+          {underneath}
+          {children}
+        </ModalBackground>
+        {SubScreenComponent && (
+          <SwipeBackLayer onClose={handleBackButtonClick}>
+            {(close) => <SubScreenComponent handleCloseModal={close} />}
+          </SwipeBackLayer>
+        )}
+      </>
     )
   );
 };

package/src/components/Modals/NewChatModal/NewChatModal.tsx

@@ -187,16 +187,16 @@ const NewChatModal: React.FC<NewChatModalProps> = ({
 
       showToast({
         id: Date.now().toString(),
-        title: 'Success',
-        message: 'Room created successfully',
+        title: t('toast.successTitle'),
+        message: t('toast.roomCreatedSuccess'),
         type: 'success',
       });
     } catch (error) {
       console.error('Error handling room creation:', error);
       showToast({
         id: Date.now().toString(),
-        title: 'Error',
-        message: 'Failed to create room',
+        title: t('toast.error'),
+        message: t('toast.failedToCreateRoom'),
         type: 'error',
       });
     }
@@ -258,8 +258,8 @@ const NewChatModal: React.FC<NewChatModalProps> = ({
 
           showToast({
             id: Date.now().toString(),
-            title: 'Success',
-            message: 'Room created successfully',
+            title: t('toast.successTitle'),
+            message: t('toast.roomCreatedSuccess'),
             type: 'success',
           });
           handleCloseModal();
@@ -267,8 +267,8 @@ const NewChatModal: React.FC<NewChatModalProps> = ({
           console.error('Failed to create room:', error);
           showToast({
             id: Date.now().toString(),
-            title: 'Error',
-            message: 'Failed to create room',
+            title: t('toast.error'),
+            message: t('toast.failedToCreateRoom'),
             type: 'error',
           });
         }