@ethora/chat-component-rn 26.7.4 → 26.7.5

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

@@ -1,16 +1,18 @@
-/** @format */
-
 import React, { useCallback, useMemo } from 'react';
-import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
-import { useDispatch } from 'react-redux';
-import { ModalContainerFullScreen } from '../styledModalComponents';
+
+import {
+  ModalContainerFullScreen,
+  Viewider,
+  Label,
+  LabelData,
+  BorderedContainer,
+  CenterContainer,
+} from '../styledModalComponents';
 import ModalHeaderComponent from '../ModalHeaderComponent';
-import { ArowDownIcon } from '../../../assets/icons';
+import Button from '../../styled/Button';
+import { useDispatch } from 'react-redux';
 import { setActiveModal } from '../../../roomStore/chatSettingsSlice';
 import { MODAL_TYPES } from '../../../helpers/constants/MODAL_TYPES';
-import { useChatSettingState } from '../../../hooks/useChatSettingState';
-import { chatTextStyle } from '../../../helpers/typography';
-import { useT } from '../../../i18n/useT';
 
 interface UserSettingsModalProps {
   handleCloseModal: any;
@@ -19,84 +21,65 @@ interface UserSettingsModalProps {
 const UserSettingsModal: React.FC<UserSettingsModalProps> = ({
   handleCloseModal,
 }) => {
-  const t = useT();
-  const dispatch = useDispatch();
-  const { config } = useChatSettingState();
-
   const options = useMemo(
     () => [
-      { label: t('settings.manageData.title'), key: MODAL_TYPES.MANAGE_DATA },
-      { label: t('settings.visibility.title'), key: MODAL_TYPES.VISIBILITY },
+      { value: 'Manage Data', key: MODAL_TYPES.MANAGE_DATA },
+      { value: 'Visiblility', key: MODAL_TYPES.VISIBILITY },
+      // { value: 'Profile Shares', key: MODAL_TYPES.PROFILE_SHARES },
+      // { value: 'Document Shares', key: MODAL_TYPES.DOCUMENT_SHARES },
+      // { value: 'Blocked Users', key: MODAL_TYPES.BLOCKED_USERS },
+      // { value: 'Referrals', key: MODAL_TYPES.REFERRALS },
     ],
-    [t]
+    []
   );
 
-  const handleClick = useCallback(
-    (key: string) => {
-      dispatch(setActiveModal(key as any));
-    },
-    [dispatch]
-  );
+  const dispatch = useDispatch();
+
+  const handleClick = useCallback((key: string) => {
+    dispatch(setActiveModal(key as any));
+  }, []);
 
   return (
-    <ModalContainerFullScreen style={styles.screen}>
+    <ModalContainerFullScreen>
       <ModalHeaderComponent
         handleCloseModal={handleCloseModal}
-        headerTitle={t('settings.menu.title')}
-        titleStyle={chatTextStyle(config?.typography?.profile?.screenTitle)}
+        headerTitle={'Settings'}
       />
-      {/* One card per entry, rather than a single bordered block with
-        * hairline dividers — the rows are separate destinations, and the
-        * design gives each its own surface. */}
-      <View style={styles.body}>
-        {options.map((option) => (
-          <TouchableOpacity
-            key={option.key}
-            testID={`settings-row-${option.key}`}
-            activeOpacity={0.7}
-            style={styles.card}
-            onPress={() => handleClick(option.key)}
-          >
-            <Text style={styles.label}>{option.label}</Text>
-            <ArowDownIcon color="#8C8C8C" width={20} height={20} style={styles.chevron} />
-          </TouchableOpacity>
-        ))}
-      </View>
+      <CenterContainer>
+        <BorderedContainer
+          style={{
+            padding: 16,
+            display: 'flex',
+            flexDirection: 'column',
+            gap: 8,
+          }}
+        >
+          {options.map((option: { value: string; key: string }, index) => (
+            <>
+              <Button
+                variant="default"
+                style={{
+                  minHeight: 40,
+                  display: 'flex',
+                  flexDirection: 'column',
+                  gap: 2,
+                  width: '100%',
+                  justifyContent: 'center',
+                  borderRadius: 0,
+                  alignItems: 'flex-start',
+                }}
+                onPress={() => handleClick(option.key)}
+              >
+                <Label style={{ textAlign: 'center' }}>{option.value}</Label>
+                {[2, 3, 4].includes(index) && <LabelData>0</LabelData>}
+              </Button>
+              {index < 5 && <Viewider />}
+            </>
+          ))}
+        </BorderedContainer>
+      </CenterContainer>
     </ModalContainerFullScreen>
   );
 };
 
-const styles = StyleSheet.create({
-  screen: {
-    backgroundColor: '#E8EDF2',
-  },
-  body: {
-    width: '100%',
-    padding: 12,
-    gap: 12,
-  },
-  card: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    backgroundColor: '#FFFFFF',
-    borderRadius: 20,
-    paddingHorizontal: 20,
-    paddingVertical: 22,
-    shadowColor: '#101828',
-    shadowOffset: { width: 0, height: 4 },
-    shadowOpacity: 0.06,
-    shadowRadius: 12,
-    elevation: 3,
-  },
-  label: {
-    fontSize: 17,
-    fontWeight: '500',
-    color: '#141414',
-  },
-  chevron: {
-    transform: [{ rotate: '-90deg' }],
-  },
-});
-
 export default UserSettingsModal;

package/src/components/Modals/styledModalComponents.tsx

@@ -86,15 +86,8 @@ export const HeaderContainer = styled.View`
    * button and 8px below — properly sized and properly centered. */
   padding: 8px 16px;
   background-color: #fff;
-  /* Same card treatment as the room-list header: rounded bottom corners
-   * and a soft drop shadow instead of a hairline rule. */
-  border-bottom-left-radius: 20px;
-  border-bottom-right-radius: 20px;
-  shadow-color: #101828;
-  shadow-offset: 0px 4px;
-  shadow-opacity: 0.06;
-  shadow-radius: 12px;
-  elevation: 4;
+  border-bottom-width: 1px;
+  border-bottom-color: #f0f0f0;
   z-index: 1;
   flex-direction: row;
   justify-content: space-between;

package/src/components/RoomComponents/ChatRoomItem.tsx

@@ -90,13 +90,11 @@ const ChatRoomItem: React.FC<ChatRoomItemProps> = ({
 
   return (
     <ChatItem key={index}>
-      <View pointerEvents="none">
-        <ProfileImagePlaceholder
-          name={displayName}
-          icon={appendFileToken(chat?.icon, fileToken)}
-          active={false}
-        />
-      </View>
+      <ProfileImagePlaceholder
+        name={displayName}
+        icon={appendFileToken(chat?.icon, fileToken)}
+        active={false}
+      />
       <View
         style={{
           flexDirection: 'column',
@@ -106,9 +104,7 @@ const ChatRoomItem: React.FC<ChatRoomItemProps> = ({
           paddingVertical: 8,
           paddingRight: 8,
           borderBottomWidth: 1,
-          // Reads against the list's #E8EDF2 ground; #F0F0F0 was lighter
-          // than the ground itself, so the row separators vanished.
-          borderBottomColor: '#C6CFDA',
+          borderBottomColor: '#F0F0F0',
         }}
       >
         <View
@@ -219,11 +215,8 @@ const ChatRoomItem: React.FC<ChatRoomItemProps> = ({
           ) : null}
         </View>
         {isDriver && (
-          // Darker than the list's own ground (#E8EDF2), otherwise the
-          // separator disappears into it — white and the old #0052CD0D
-          // hairline both did.
           <View
-            style={{ height: 1, backgroundColor: '#C6CFDA', marginTop: 8 }}
+            style={{ height: 1, backgroundColor: '#0052CD0D', marginTop: 8 }}
           />
         )}
       </View>

package/src/components/styled/SendInput.tsx

@@ -10,16 +10,14 @@ import { IConfig, MediaFile } from '../../types/types';
 import Button from './Button';
 import { SendIcon, AttachIcon, RecordIcon } from '../../assets/icons';
 import { KeyboardAvoidingView, Platform, View, Text, TouchableOpacity, Alert, Linking } from 'react-native';
-import AttachSheet, { PickedMedia } from '../Modals/AttachSheet/AttachSheet';
+import AttachSheet from '../Modals/AttachSheet/AttachSheet';
 import { MediaFilePreview } from './MediaFilePreview';
 import { getIconColor } from '../../helpers/getIconColor';
 import { getElementFont } from '../../helpers/getElementFont';
 import { useT } from '../../i18n/useT';
-import { getMediaLibrary } from '../../helpers/mediaLibraryRuntime';
 import * as ImagePicker from 'expo-image-picker';
 import * as DocumentPicker from 'expo-document-picker';
 import * as ImageManipulator from 'expo-image-manipulator';
-import * as FileSystem from 'expo-file-system/legacy';
 // expo-audio replaces the discontinued expo-av: `useAudioRecorder` owns a
 // single reusable recorder for this input's lifetime (prepare → record →
 // stop → prepare again), and the module-level helpers cover permissions
@@ -261,59 +259,22 @@ const SendInput: React.FC<SendInputProps> = ({
     }
   };
 
-  // A tap on a thumbnail in the attach sheet's recents strip. The sheet
-  // already resolved the asset to a real on-disk uri (iOS `ph://` ids are
-  // not uploadable); here we apply the same treatment the full-blown
-  // pickers get — HEIC→JPEG for images, and a size probe so the 50 MB cap
-  // is enforced before anything hits the network.
-  const handleRecentMediaSelection = async (media: PickedMedia) => {
-    try {
-      let size: number | undefined;
-      try {
-        const info = await FileSystem.getInfoAsync(media.uri);
-        if (info.exists && typeof (info as any).size === 'number') {
-          size = (info as any).size;
-        }
-      } catch {
-        // Size is a nice-to-have; the backend still rejects oversized bodies.
-      }
-
-      if (media.isVideo) {
-        handleFileSelect([
-          {
-            uri: media.uri,
-            type: media.mimeType || 'video/mp4',
-            name: media.name,
-            size,
-          },
-        ]);
-        return;
-      }
-
-      const normalized = await normalizeImageAsset({
-        uri: media.uri,
-        mimeType: media.mimeType,
-        fileName: media.name,
-      } as ImagePicker.ImagePickerAsset);
-      handleFileSelect([
-        {
-          uri: normalized.uri,
-          type: normalized.mime,
-          name: normalized.name,
-          size,
-        },
-      ]);
-    } catch (error) {
-      console.error('Recent media error:', error);
-    }
-  };
-
   const handleFileSelection = async () => {
     // Drop overlapping invocations — a second getDocumentAsync while the
     // first is still presented throws PickingInProgressException on iOS.
     if (pickingDocRef.current) {return;}
     pickingDocRef.current = true;
     try {
+      // Let the attach-sheet's modal finish its NATIVE dismissal before we
+      // present the picker. The sheet fires this handler right after its
+      // slide-out animation, but the underlying RN Modal view-controller
+      // dismissal is async — presenting the document picker over a still-
+      // dismissing modal makes iOS tear it down without a cancel callback,
+      // which strands expo-document-picker's pickingContext and makes every
+      // subsequent open throw "Different document picking in progress".
+      if (Platform.OS === 'ios') {
+        await new Promise((resolve) => setTimeout(resolve, 350));
+      }
       const result = await DocumentPicker.getDocumentAsync({
         type: '*/*',
         multiple: false,
@@ -336,39 +297,8 @@ const SendInput: React.FC<SendInputProps> = ({
     }
   };
 
-  // Photo-library access is requested HERE, not inside the sheet: iOS
-  // cannot present the permission alert while an RN <Modal> owns the
-  // screen (the same UIKit limitation that used to swallow the pickers),
-  // so asking from inside resolved to a silent "denied" and the recents
-  // strip stayed empty forever. Asking on the paperclip tap puts the
-  // system alert over the plain chat screen, where it can actually show.
-  // Only the first tap ever waits on it — afterwards the status is
-  // already determined and `getPermissionsAsync` returns immediately.
-  const ensureLibraryPermission = async () => {
-    const MediaLibrary = getMediaLibrary();
-    if (!MediaLibrary?.getPermissionsAsync) {return;}
-    try {
-      const perm = await MediaLibrary.getPermissionsAsync();
-      if (perm?.granted || perm?.canAskAgain === false) {return;}
-      await MediaLibrary.requestPermissionsAsync();
-    } catch (err) {
-      // Optional peer / unsupported platform: the sheet just shows the
-      // camera tile and the full-library route.
-      console.warn('Media library permission check failed:', err);
-    }
-  };
-
-  // Only the very first tap of a session goes through the permission
-  // check; afterwards the sheet opens with zero added latency.
-  const libraryPermissionCheckedRef = useRef(false);
-
   const handleAttachPress = () => {
-    if (libraryPermissionCheckedRef.current) {
-      setShowMediaMenu(true);
-      return;
-    }
-    libraryPermissionCheckedRef.current = true;
-    ensureLibraryPermission().finally(() => setShowMediaMenu(true));
+    setShowMediaMenu(true);
   };
 
   // ─── Voice recording ──────────────────────────────────────────────
@@ -772,7 +702,6 @@ const SendInput: React.FC<SendInputProps> = ({
           onCamera={handleCameraSelection}
           onGallery={handleGallerySelection}
           onDocument={handleFileSelection}
-          onPickMedia={handleRecentMediaSelection}
           primaryColor={getIconColor(config)}
         />
       </InputContainer>

package/src/components/styled/StyledComponents.ts

@@ -28,15 +28,9 @@ export const ChatContainerHeader = styled.View`
   background-color: #ffffff;
   align-items: center;
   justify-content: space-between;
-  /* Rounded bottom corners + a soft drop shadow instead of the hairline
-   * rule, so the header reads as a card over the conversation. */
-  border-bottom-left-radius: 20px;
-  border-bottom-right-radius: 20px;
-  shadow-color: #101828;
-  shadow-offset: 0px 4px;
-  shadow-opacity: 0.06;
-  shadow-radius: 12px;
-  elevation: 4;
+  border-bottom-width: 1px;
+  border-bottom-color: #e5e7eb;
+  border-style: solid;
   z-index: 1000;
 `;
 

package/src/components/styled/StyledInputComponents/StyledInputComponents.tsx

@@ -13,21 +13,14 @@ const colors = {
 
 export const InputContainer = styled.View<{ isText?: boolean }>`
   flex-direction: column;
-  padding: 12px 16px 8px 16px;
-  /* Transparent, so the dock's white surface — and its rounded top
-   * corners — are what shows. An opaque child painted straight over those
-   * corners (a parent's border radius does not clip children without
-   * overflow:hidden, and that would clip the dock's shadow too). */
-  background-color: transparent;
+  padding: 8px 16px 4px 16px;
+  background-color: ${colors.white};
   z-index: 100;
   width: 100%;
   bottom: 0;
   left: 0;
-  /* No radius or shadow here: the dock this sits in (ChatRoom's
-   * InputDockTag) is the composer's outer surface and carries both. Having
-   * them on this inner view too drew its shadow onto the dock's white
-   * background — the faint seam that made the strip below look like a
-   * different colour. */
+  border-top-width: 1px;
+  border-top-color: #e5e7eb;
 `;
 
 export const MediaContainer = styled.View`

package/src/context/xmppProvider.tsx

@@ -557,7 +557,9 @@ export const XmppProvider: React.FC<XmppProviderProps> = ({ children, config, is
         devPushLog('rn', `watchdog: client ${client.status} → forceReconnect`);
         client.forceReconnect();
       } else {
-        client.ensureStreamAlive?.();
+        // The periodic health check is the probe's primary owner, so it
+        // bypasses the throttle that keeps send-path probes rare.
+        client.ensureStreamAlive?.({ force: true, reason: 'watchdog' });
       }
     }, 30000);
     return () => clearInterval(id);
@@ -622,9 +624,19 @@ export const XmppProvider: React.FC<XmppProviderProps> = ({ children, config, is
       // the provider so consumers using the component as a package get
       // correct unread without reaching into the chat store themselves.
       visibleBeforeBackground = visibleRoomJID;
+      // Prefer the read boundary the user actually reached. Stamping
+      // `Date.now()` while they are scrolled up marks unseen messages as
+      // read, and because we flush to the server private store below the
+      // loss survives an app restart. Customer-reported #33.
+      const bgBoundaryTs = visibleRoomJID
+        ? rooms?.[visibleRoomJID]?.readBoundaryTs ?? null
+        : null;
       if (visibleRoomJID) {
         store.dispatch(
-          setLastViewedTimestamp({ chatJID: visibleRoomJID, timestamp: Date.now() })
+          setLastViewedTimestamp({
+            chatJID: visibleRoomJID,
+            timestamp: bgBoundaryTs ?? Date.now(),
+          })
         );
         // Drop the "New messages" divider for the room we're leaving so it
         // doesn't linger when the user comes back (mirrors ChatRoom's
@@ -636,9 +648,10 @@ export const XmppProvider: React.FC<XmppProviderProps> = ({ children, config, is
       }
       // Fire-and-forget — we're going to the background and don't
       // care about the resolution path.
-      c.flushLastViewedToPrivateStoreStanza(rooms, { visibleRoomJID }).catch(
-        () => {}
-      );
+      c.flushLastViewedToPrivateStoreStanza(rooms, {
+        visibleRoomJID,
+        visibleRoomTs: bgBoundaryTs,
+      }).catch(() => {});
     });
     return () => sub.remove();
   }, [client]);
@@ -669,9 +682,16 @@ export const XmppProvider: React.FC<XmppProviderProps> = ({ children, config, is
         store.dispatch(setVisibleRoom({ roomJID: activeRoomJID }));
       }
     } else {
+      // Same read-boundary rule as the AppState path above (#33).
+      const hideBoundaryTs = activeRoomJID
+        ? rooms?.[activeRoomJID]?.readBoundaryTs ?? null
+        : null;
       if (wasVisible && activeRoomJID) {
         store.dispatch(
-          setLastViewedTimestamp({ chatJID: activeRoomJID, timestamp: Date.now() })
+          setLastViewedTimestamp({
+            chatJID: activeRoomJID,
+            timestamp: hideBoundaryTs ?? Date.now(),
+          })
         );
         // Drop the "New messages" divider so it's gone when the user
         // returns to the chat (mirrors ChatRoom's unmount cleanup).
@@ -683,7 +703,10 @@ export const XmppProvider: React.FC<XmppProviderProps> = ({ children, config, is
       store.dispatch(clearVisibleRoom());
       if (wasVisible && client?.flushLastViewedToPrivateStoreStanza) {
         client
-          .flushLastViewedToPrivateStoreStanza(rooms, { visibleRoomJID: activeRoomJID })
+          .flushLastViewedToPrivateStoreStanza(rooms, {
+            visibleRoomJID: activeRoomJID,
+            visibleRoomTs: hideBoundaryTs,
+          })
           .catch(() => {});
       }
     }
@@ -704,6 +727,15 @@ export const XmppProvider: React.FC<XmppProviderProps> = ({ children, config, is
       if (room.messages === lastMessagesRef) {return;}
       lastMessagesRef = room.messages;
 
+      // "Chat is on screen" does NOT mean "user is looking at the newest
+      // message". While they are scrolled up, MessageList publishes a read
+      // boundary; advancing the marker to `now` here would clear the very
+      // unread messages the scroll-up state exists to preserve — and the
+      // 2s flush below would push that loss to the server, making it
+      // survive an app restart. Leave the marker alone until they come
+      // back to the bottom (boundary back to null). Customer-reported #33.
+      if (room.readBoundaryTs != null) {return;}
+
       let newest = 0;
       const list = room.messages || [];
       for (const m of list) {
@@ -762,7 +794,8 @@ export const XmppProvider: React.FC<XmppProviderProps> = ({ children, config, is
         devPushLog('rn', `NetInfo: reachable & client ${client.status} → forceReconnect`);
         client.forceReconnect();
       } else if (client.status === 'online') {
-        client.ensureStreamAlive?.();
+        // Connectivity just came back — worth an immediate check.
+        client.ensureStreamAlive?.({ force: true, reason: 'netinfo' });
       }
     });
     return () => unsub();

package/src/helpers/updateMessagesTillLast.tsx

@@ -1,6 +1,6 @@
 import XmppClient from '../networking/xmppClient';
 import { store } from '../roomStore';
-import { setRoomMessages } from '../roomStore/roomsSlice';
+import { applyRoomsPreloadBatch } from '../roomStore/roomsSlice';
 import { IMessage, IRoom } from '../types/types';
 import { checkUniqueUsers } from './checkUniqueUsers';
 
@@ -76,22 +76,47 @@ export const updateMessagesTillLast = async (
                   Number(message.id) === Number(lastCachedMessagesTimeStamp)
               );
 
-              if (!isMessageFound && !(counter <= maxFetchAttempts - 1)) {
-                // Fire-and-forget — checkUniqueUsers resolves to an
-                // updated RoomMember list, but there's no slice
-                // action wired to receive it on RN yet (the web SDK
-                // has one; the port left a TODO). Keep the call so
-                // the API request goes out (it warms the cache for
-                // later renders) but stop short of dispatching.
-                await checkUniqueUsers(currentJidNewMessages);
-
-                store.dispatch(
-                  setRoomMessages({
-                    roomJID: jid,
-                    messages: currentJidNewMessages,
-                  })
-                );
-              }
+            }
+
+            // Publish whatever the catch-up actually retrieved.
+            //
+            // This used to sit INSIDE the loop behind
+            // `!isMessageFound && !(counter <= maxFetchAttempts - 1)`,
+            // i.e. it only ran when the walk-back gave up. In the common
+            // case — the gap is small and the anchor is found on the first
+            // fetch — `isMessageFound` flips true immediately and NOTHING
+            // was ever dispatched, so the reconnect catch-up silently
+            // dropped its own result. The messages still appeared, but only
+            // as a side effect of the always-on `onMessageHistory` stanza
+            // handler, which parses the same stanza a different way
+            // (positional form, no explicit `user` object) and inserts via
+            // addRoomMessage. That copy could carry a wrong sender identity
+            // and, being treated as an own-message, was excluded from the
+            // unread count — the "wrong sender + no unread after reconnect,
+            // both correct after restart" symptom, because only a fresh
+            // start re-runs the preload scheduler that overwrites it.
+            //
+            // Dispatching through `applyRoomsPreloadBatch` (rather than the
+            // previous `setRoomMessages` array-replace) reuses
+            // mergeHistoryIntoCache: it dedupes by id with "fetched wins",
+            // preserves locally-pending sends and older cached history, and
+            // is already a trigger for the unread middleware — exactly what
+            // the startup path does, so reconnect and cold start now agree.
+            // Customer-reported #32.
+            if (currentJidNewMessages.length > 0) {
+              // Fire-and-forget — checkUniqueUsers resolves to an
+              // updated RoomMember list, but there's no slice
+              // action wired to receive it on RN yet (the web SDK
+              // has one; the port left a TODO). Keep the call so
+              // the API request goes out (it warms the cache for
+              // later renders) but stop short of dispatching.
+              await checkUniqueUsers(currentJidNewMessages);
+
+              store.dispatch(
+                applyRoomsPreloadBatch({
+                  rooms: [{ jid, messages: currentJidNewMessages }],
+                })
+              );
             }
           } catch (error) {
             console.error(`Error processing room ${jid}:`, error);

package/src/hooks/useChatRoomFocus.ts

@@ -59,12 +59,20 @@ export const useChatRoomFocus = ({
   });
 
   const leaveRoom = (jid: string) => {
-    const timestamp = Date.now();
+    const rooms = store.getState().rooms?.rooms;
+    // Only mark read as far as the user actually scrolled. Blindly
+    // stamping `Date.now()` here clears messages they never reached, and
+    // the server flush below makes that permanent across a restart.
+    // Customer-reported #33.
+    const boundaryTs = rooms?.[jid]?.readBoundaryTs ?? null;
+    const timestamp = boundaryTs ?? Date.now();
     dispatch(setLastViewedTimestamp({ chatJID: jid, timestamp }));
     dispatch(clearVisibleRoom());
-    const rooms = store.getState().rooms?.rooms;
     (store.getState().chatSettingStore as any)?.client
-      ?.flushLastViewedToPrivateStoreStanza(rooms, { visibleRoomJID: jid })
+      ?.flushLastViewedToPrivateStoreStanza(rooms, {
+        visibleRoomJID: jid,
+        visibleRoomTs: boundaryTs,
+      })
       .catch(() => {});
   };
 

package/src/hooks/useLogout.tsx

@@ -63,6 +63,13 @@ const logoutService = {
         await Promise.race([
           client.flushLastViewedToPrivateStoreStanza(rooms, {
             visibleRoomJID,
+            // `onlyIfNoUnread` deliberately exempts the visible room, so
+            // without this the open-but-scrolled-up room would still be
+            // stamped "read up to now" on logout and come back read on
+            // the next login. Customer-reported #33.
+            visibleRoomTs: visibleRoomJID
+              ? rooms?.[visibleRoomJID]?.readBoundaryTs ?? null
+              : null,
             onlyIfNoUnread: true,
           }),
           new Promise((res) => setTimeout(res, 2000)),