@ethora/chat-component-rn 26.8.7 → 26.8.9

package/src/components/Modals/UserSettingsModal/LanguageCard.tsx

@@ -0,0 +1,144 @@
+import React, { useCallback, useMemo } from 'react';
+import { StyleProp, StyleSheet, Text, TouchableOpacity, View, ViewStyle } from 'react-native';
+import { useTheme } from '../../../hooks/useTheme';
+import { useT } from '../../../i18n/useT';
+import { useChatSettingState } from '../../../hooks/useChatSettingState';
+import {
+  appLanguageChoices,
+  chatLanguageChoices,
+  setAppLanguage,
+  setChatLanguage,
+  type LanguageChoice,
+} from '../../../services/languageSettings';
+
+interface LanguageCardProps {
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+}
+
+/**
+ * The user's two languages: the interface, and what messages are translated
+ * into. See services/languageSettings for what each one does and where it
+ * is kept.
+ */
+const LanguageCard: React.FC<LanguageCardProps> = ({ style, testID }) => {
+  const theme = useTheme();
+  const t = useT();
+  const { config, langSource, uiLocale } = useChatSettingState();
+
+  const appChoices = useMemo(() => appLanguageChoices(config), [config]);
+  const chatChoices = useMemo(() => chatLanguageChoices(config), [config]);
+  const appCurrent = uiLocale || config?.i18n?.locale || '';
+  // Unset follows the interface language - the backend's own rule.
+  const chatCurrent = langSource || appCurrent;
+
+  const pick = useCallback(
+    (kind: 'app' | 'chat', id: string) => {
+      void (kind === 'app' ? setAppLanguage(id) : setChatLanguage(id));
+    },
+    []
+  );
+
+  const same = (a: string, b: string) => a.toLowerCase() === b.toLowerCase();
+
+  const group = (
+    kind: 'app' | 'chat',
+    label: string,
+    hint: string,
+    choices: LanguageChoice[],
+    current: string
+  ) => (
+    <View style={styles.group}>
+      <Text style={[styles.label, { color: theme.text }]}>{label}</Text>
+      <Text style={[styles.hint, { color: theme.textSecondary }]}>{hint}</Text>
+      <View style={styles.pills} accessibilityRole="radiogroup">
+        {choices.map((choice) => {
+          const selected = same(choice.id, current);
+          return (
+            <TouchableOpacity
+              key={choice.id}
+              testID={`settings-language-${kind}-${choice.id}`}
+              accessibilityRole="radio"
+              accessibilityState={{ selected }}
+              activeOpacity={0.7}
+              onPress={() => pick(kind, choice.id)}
+              style={[
+                styles.pill,
+                {
+                  borderColor: selected ? theme.primary : theme.border,
+                  backgroundColor: selected ? theme.primary : theme.surfaceSecondary,
+                },
+              ]}
+            >
+              <Text
+                style={[
+                  styles.pillLabel,
+                  { color: selected ? theme.textOnPrimary : theme.text },
+                ]}
+              >
+                {choice.name}
+              </Text>
+            </TouchableOpacity>
+          );
+        })}
+      </View>
+    </View>
+  );
+
+  return (
+    <View style={[style, styles.card]} testID={testID || 'settings-languages'}>
+      {group(
+        'app',
+        t('settings.language.app'),
+        t('settings.language.appHint'),
+        appChoices,
+        appCurrent
+      )}
+      {group(
+        'chat',
+        t('settings.language.chat'),
+        t('settings.language.chatHint'),
+        chatChoices,
+        chatCurrent
+      )}
+    </View>
+  );
+};
+
+export default LanguageCard;
+
+const styles = StyleSheet.create({
+  // Applied over the host's card style: its surface, this layout.
+  card: {
+    flexDirection: 'column',
+    alignItems: 'stretch',
+    gap: 18,
+  },
+  group: {
+    gap: 6,
+  },
+  label: {
+    fontSize: 17,
+    fontWeight: '500',
+  },
+  hint: {
+    fontSize: 13,
+    lineHeight: 18,
+  },
+  pills: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    gap: 8,
+    marginTop: 6,
+  },
+  pill: {
+    paddingHorizontal: 14,
+    paddingVertical: 8,
+    borderRadius: 999,
+    borderWidth: 1,
+  },
+  pillLabel: {
+    fontSize: 14,
+    fontWeight: '600',
+  },
+});

package/src/components/Modals/UserSettingsModal/UserSettingsModal.tsx

@@ -1,7 +1,7 @@
 /** @format */
 
-import EncryptionCard from '../../MainComponents/EncryptionCard';
 import React, { useCallback, useMemo } from 'react';
+import LanguageCard from './LanguageCard';
 import {
   StyleSheet,
   Switch,
@@ -64,12 +64,17 @@ const UserSettingsModal: React.FC<UserSettingsModalProps> = ({
     [t]
   );
 
+  const showPassword = config?.settings?.changePassword === true;
   const options = useMemo(
     () => [
       { label: t('settings.manageData.title'), key: MODAL_TYPES.MANAGE_DATA },
       { label: t('settings.visibility.title'), key: MODAL_TYPES.VISIBILITY },
+      // Off unless the host turned it on: not every backend has the endpoint.
+      ...(showPassword
+        ? [{ label: t('settings.password.title'), key: MODAL_TYPES.CHANGE_PASSWORD }]
+        : []),
     ],
-    [t]
+    [t, showPassword]
   );
 
   const handleClick = useCallback(
@@ -160,8 +165,10 @@ const UserSettingsModal: React.FC<UserSettingsModalProps> = ({
           </View>
         ) : null}
 
-        {config?.e2ee?.enabled === true ? (
-          <EncryptionCard style={styles.card} testID="settings-e2ee" />
+        {/* The interface language and the translation language; off
+            unless the host turned it on, as it writes to the profile. */}
+        {config?.settings?.languages?.enabled === true ? (
+          <LanguageCard style={styles.card} />
         ) : null}
 
         {options.map((option) => (

package/src/components/RoomComponents/SwipeableRoomRow.tsx

@@ -0,0 +1,133 @@
+import React, { useCallback, useMemo, useRef } from 'react';
+import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+import ReanimatedSwipeable, {
+  type SwipeableMethods,
+} from 'react-native-gesture-handler/ReanimatedSwipeable';
+import { LeaveIcon, ReportIcon } from '../../assets/icons';
+import { useTheme } from '../../hooks/useTheme';
+import { useT } from '../../i18n/useT';
+import type { ChatTheme } from '../../theme/theme';
+
+/** Width of one action button behind the row. */
+export const ROOM_ACTION_WIDTH = 84;
+
+/**
+ * Only one row shows its actions at a time, as in the messengers: opening
+ * another one, or the list being scrolled, folds the open one back.
+ */
+let openRow: SwipeableMethods | null = null;
+
+export const closeOpenRoomRow = (): void => {
+  openRow?.close();
+  openRow = null;
+};
+
+interface SwipeableRoomRowProps {
+  /** Identifies the row to the host's callbacks. */
+  roomJid: string;
+  onReport: (roomJid: string) => void;
+  onLeave: (roomJid: string) => void;
+  children: React.ReactNode;
+}
+
+/**
+ * A room-list row that slides left to show Report and Leave behind it,
+ * the way chats do in the big messengers. A tap on an action folds the
+ * row back first, so the list is tidy under whatever the action opens.
+ */
+const SwipeableRoomRow: React.FC<SwipeableRoomRowProps> = ({
+  roomJid,
+  onReport,
+  onLeave,
+  children,
+}) => {
+  const theme = useTheme();
+  const t = useT();
+  const styles = useMemo(() => createStyles(theme), [theme]);
+  const ref = useRef<SwipeableMethods>(null);
+
+  const onWillOpen = useCallback(() => {
+    if (openRow && openRow !== ref.current) {openRow.close();}
+    openRow = ref.current;
+  }, []);
+  const onClose = useCallback(() => {
+    if (openRow === ref.current) {openRow = null;}
+  }, []);
+
+  const act = useCallback(
+    (what: (jid: string) => void) => {
+      ref.current?.close();
+      what(roomJid);
+    },
+    [roomJid]
+  );
+
+  const renderRightActions = useCallback(
+    () => (
+      <View style={styles.actions}>
+        <TouchableOpacity
+          testID={`room-action-report-${roomJid.split('@')[0]}`}
+          accessibilityRole="button"
+          accessibilityLabel={t('action.report')}
+          activeOpacity={0.8}
+          style={[styles.action, { backgroundColor: theme.textSecondary }]}
+          onPress={() => act(onReport)}
+        >
+          <ReportIcon color={theme.textOnPrimary} width={22} height={22} />
+          <Text style={styles.label}>{t('action.report')}</Text>
+        </TouchableOpacity>
+        <TouchableOpacity
+          testID={`room-action-leave-${roomJid.split('@')[0]}`}
+          accessibilityRole="button"
+          accessibilityLabel={t('action.leave')}
+          activeOpacity={0.8}
+          style={[styles.action, { backgroundColor: theme.danger }]}
+          onPress={() => act(onLeave)}
+        >
+          <LeaveIcon color={theme.textOnPrimary} width={22} height={22} />
+          <Text style={styles.label}>{t('action.leave')}</Text>
+        </TouchableOpacity>
+      </View>
+    ),
+    [act, onLeave, onReport, roomJid, styles, t, theme]
+  );
+
+  return (
+    <ReanimatedSwipeable
+      ref={ref}
+      testID={`room-swipe-${roomJid.split('@')[0]}`}
+      friction={2}
+      rightThreshold={ROOM_ACTION_WIDTH / 2}
+      overshootRight={false}
+      enableTrackpadTwoFingerGesture
+      renderRightActions={renderRightActions}
+      onSwipeableWillOpen={onWillOpen}
+      onSwipeableClose={onClose}
+      // The row must cover the actions until it moves.
+      childrenContainerStyle={{ backgroundColor: theme.listBackground }}
+    >
+      {children}
+    </ReanimatedSwipeable>
+  );
+};
+
+export default SwipeableRoomRow;
+
+const createStyles = (theme: ChatTheme) =>
+  StyleSheet.create({
+    actions: {
+      flexDirection: 'row',
+      width: ROOM_ACTION_WIDTH * 2,
+    },
+    action: {
+      width: ROOM_ACTION_WIDTH,
+      alignItems: 'center',
+      justifyContent: 'center',
+      gap: 4,
+    },
+    label: {
+      color: theme.textOnPrimary,
+      fontSize: 12,
+      fontWeight: '600',
+    },
+  });

package/src/components/Thread/ThreadWrapper.tsx

@@ -29,6 +29,7 @@ import { useSendMessage } from '../../hooks/useSendMessage';
 import { createMainMessageForThread } from '../../helpers/createMainMessageForThread';
 import { useChatSettingState } from '../../hooks/useChatSettingState';
 import { useTheme } from '../../hooks/useTheme';
+import { useT } from '../../i18n/useT';
 import CustomTypingIndicator from '../styled/StyledInputComponents/CustomTypingIndicator';
 import { KeyboardInputDock } from '../MainComponents/KeyboardInputDock';
 import {
@@ -69,6 +70,7 @@ const ThreadWrapper: FC<ThreadWrapperProps> = ({
   const reduxStore = useStore<RootState>();
   const { config } = useChatSettingState();
   const theme = useTheme();
+  const t = useT();
   const insets = useSafeAreaInsets();
   const { width: windowWidth } = useWindowDimensions();
   const roomJid = activeMessage.roomJid;
@@ -217,7 +219,7 @@ const ThreadWrapper: FC<ThreadWrapperProps> = ({
           style={[styles.fill, { backgroundColor: theme.surface }]}
         >
           <View style={[styles.fill, { backgroundColor: theme.chatBackground }]}>
-            <ModalHeaderComponent headerTitle="Thread" handleCloseModal={close} />
+            <ModalHeaderComponent headerTitle={t('thread.title')} handleCloseModal={close} />
             <MessageList
               loadMoreMessages={loadMoreMessages}
               CustomMessage={CustomMessageComponent}
@@ -267,7 +269,7 @@ const ThreadWrapper: FC<ThreadWrapperProps> = ({
                 numberOfLines={1}
                 style={[styles.alsoText, { color: theme.textSecondary }]}
               >
-                Also send to{' '}
+                {t('thread.alsoSendTo')}{' '}
                 <Text style={{ color: theme.primary, fontWeight: '600' }}>
                   {roomDisplayName}
                 </Text>

package/src/context/xmppProvider.tsx

@@ -39,7 +39,12 @@ import { getRooms as prefetchRoomsViaRest } from '../networking/api-requests/roo
 import { allRoomPresences } from '../networking/xmpp/allRoomPresences.xmpp';
 import { pushSubscriptionService } from '../services/pushSubscriptionService';
 import { store } from '../roomStore';
-import { logout, setStoreClient, setConfig } from '../roomStore/chatSettingsSlice';
+import {
+  logout,
+  setStoreClient,
+  setConfig,
+  setConnectionState,
+} from '../roomStore/chatSettingsSlice';
 import { logoutService } from '../hooks/useLogout';
 import {
   setLogoutState,
@@ -260,7 +265,12 @@ export const XmppProvider: React.FC<XmppProviderProps> = ({ children, config, is
       created.setOnOnline(() => {
         const underlying = (created as any).client;
         if (!underlying) {return;}
-        allRoomPresences(underlying)
+        // The headers say "Updating…" until the rooms are joined again and
+        // the archive caught up - a stream that is up is not yet a chat
+        // that is. Same tick as the client's own 'online', so the title
+        // never shows the plain state in between.
+        store.dispatch(setConnectionState('syncing'));
+        const rejoin = allRoomPresences(underlying)
           .catch((e) =>
             devPushLog('warn', 'reconnect: allRoomPresences re-join failed', e)
           )
@@ -268,7 +278,7 @@ export const XmppProvider: React.FC<XmppProviderProps> = ({ children, config, is
         // Also refresh the private store so unread / lastViewed markers
         // are accurate after a long reconnect — the MUC re-join above only
         // restores delivery, not unread state. Idempotent on first connect.
-        created
+        const markers = created
           .getChatsPrivateStoreRequestStanza()
           .catch((e: unknown) =>
             devPushLog('warn', 'reconnect: privateStore refresh failed', e)
@@ -283,9 +293,16 @@ export const XmppProvider: React.FC<XmppProviderProps> = ({ children, config, is
         // point, so this is a no-op until the bootstrap's own history load
         // populates it. Customer-reported #32.
         const rooms = store.getState().rooms?.rooms || {};
-        updateMessagesTillLast(rooms, created).catch((e: unknown) =>
+        const catchUp = updateMessagesTillLast(rooms, created).catch((e: unknown) =>
           devPushLog('warn', 'reconnect: offline catch-up sync failed', e)
         );
+        Promise.allSettled([rejoin, markers, catchUp]).then(() => {
+          // Only if this stream is still the live one: a drop meanwhile
+          // has already put the headers back to "Connecting…".
+          if (created.status === 'online') {
+            store.dispatch(setConnectionState('online'));
+          }
+        });
       });
 
       setClient(created);

package/src/e2ee/stanza.ts

@@ -48,7 +48,7 @@ function placeholder(error: E2eeError): Element {
   return new Element('body', {}).t(
     translateKey(
       placeholderKey(error),
-      settings?.config?.i18n?.locale || settings?.langSource,
+      settings?.uiLocale || settings?.config?.i18n?.locale || settings?.langSource,
       settings?.config?.i18n?.strings
     )
   );

package/src/helpers/constants/MODAL_COMPONENTS.tsx

@@ -14,6 +14,7 @@ import ManageDataModal from '../../components/Modals/SettingsModals/ManageDataMo
 import ProfileSharesModal from '../../components/Modals/SettingsModals/ProfileShares/ProfileShares';
 import ReferralsModal from '../../components/Modals/SettingsModals/Referrals/Referrals';
 import VisibilityModal from '../../components/Modals/SettingsModals/Visibility/VisibilityModal';
+import ChangePasswordModal from '../../components/Modals/SettingsModals/ChangePassword/ChangePasswordModal';
 import UserProfileModal from '../../components/Modals/UserProfileModal/UserProfileModal';
 import UserSettingsModal from '../../components/Modals/UserSettingsModal/UserSettingsModal';
 
@@ -27,6 +28,7 @@ export const MODAL_COMPONENTS: Record<
   [MODAL_TYPES.CHAT_PROFILE]: ChatProfileModal,
   [MODAL_TYPES.MANAGE_DATA]: ManageDataModal,
   [MODAL_TYPES.VISIBILITY]: VisibilityModal,
+  [MODAL_TYPES.CHANGE_PASSWORD]: ChangePasswordModal,
   [MODAL_TYPES.REFERRALS]: ReferralsModal,
   [MODAL_TYPES.DOCUMENT_SHARES]: DocumentSharesModal,
   [MODAL_TYPES.PROFILE_SHARES]: ProfileSharesModal,

package/src/helpers/constants/MODAL_TYPES.ts

@@ -15,6 +15,7 @@ export const MODAL_TYPES = {
   CHAT_PROFILE: 'chatprofile',
   MANAGE_DATA: 'managedata',
   VISIBILITY: 'visibility',
+  CHANGE_PASSWORD: 'change_password',
 
   PROFILE_SHARES: 'profile_shares',
   DOCUMENT_SHARES: 'document_shares',

package/src/helpers/preferencesStorage.ts

@@ -9,6 +9,10 @@ const KEY = '@ethora/preferences';
 export interface StoredPreferences {
   theme?: ThemePreference;
   pushEnabled?: boolean;
+  /** Interface language picked in Settings (BCP-47). */
+  uiLocale?: string;
+  /** Language messages are translated into, picked in Settings (BCP-47). */
+  chatLanguage?: string;
 }
 
 export const loadPreferences = async (): Promise<StoredPreferences> => {

package/src/hooks/useChatSettingState.tsx

@@ -9,6 +9,12 @@ export const useChatSettingState = () => {
   const activeModal = useSelector(
     (state: RootState) => state.chatSettingStore.activeModal
   );
+  const uiLocale = useSelector(
+    (state: RootState) => state.chatSettingStore.uiLocale
+  );
+  const connection = useSelector(
+    (state: RootState) => state.chatSettingStore.connection
+  );
   const config = useSelector(
     (state: RootState) => state.chatSettingStore.config
   );
@@ -29,6 +35,8 @@ export const useChatSettingState = () => {
   );
 
   return {
+    uiLocale,
+    connection,
     user,
     activeFile,
     activeModal,

package/src/hooks/useChatWrapperInit.ts

@@ -12,6 +12,7 @@ import { initRoomsPresence } from '../helpers/initRoomsPresence';
 import { updateMessagesTillLast } from '../helpers/updateMessagesTillLast';
 import { refreshAuthTokensQuietly } from '../networking/authRefresh';
 import { setLangSource, setConfig } from '../roomStore/chatSettingsSlice';
+import { applyProfileLanguages } from '../services/languageSettings';
 import { setIsLoading } from '../roomStore/roomsSlice';
 import { useRoomState } from './useRoomState';
 import { useChatSettingState } from './useChatSettingState';
@@ -120,6 +121,9 @@ const useChatWrapperInit = ({
       }
 
       dispatch(setConfig(config));
+      // The profile's languages are the account's truth, over what the
+      // device remembered.
+      applyProfileLanguages(user as any, config);
       try {
         if (!user.xmppUsername) {
           setShowModal(true);

package/src/hooks/useConnectionLabel.ts

@@ -0,0 +1,16 @@
+import { useChatSettingState } from './useChatSettingState';
+import { useT } from '../i18n/useT';
+
+/**
+ * What the headers say in place of their usual title while the session is
+ * not usable yet: "Connecting…" until the stream is up (first connect and
+ * every reconnect), "Updating…" while rooms are re-joined and the archive
+ * caught up. Nothing once the chat is live.
+ */
+export const useConnectionLabel = (): string | undefined => {
+  const { connection } = useChatSettingState();
+  const t = useT();
+  if (connection === 'connecting') {return t('connection.connecting');}
+  if (connection === 'syncing') {return t('connection.updating');}
+  return undefined;
+};