@droppii-org/chat-mobile 0.2.94 → 0.2.96

package/src/screens/chat-detail/ChatListLegend.tsx

@@ -10,7 +10,6 @@ import {
 import {
   ActivityIndicator,
   DeviceEventEmitter,
-  Platform,
   StyleSheet,
   useWindowDimensions,
   type View,
@@ -23,7 +22,10 @@ import Animated, {
   type SharedValue,
 } from 'react-native-reanimated';
 import { KeyboardAwareLegendList } from '@legendapp/list/keyboard';
-import { KeyboardEvents } from 'react-native-keyboard-controller';
+import {
+  KeyboardEvents,
+  useGenericKeyboardHandler,
+} from 'react-native-keyboard-controller';
 import {
   type LegendListRef,
   type MaintainVisibleContentPositionConfig,
@@ -78,10 +80,36 @@ const ROW_MARGIN_IN_CLUSTER = KSpacingValue['0.25rem'];
 
 const BUTTON_FADE_CONFIG = { duration: 200, easing: Easing.out(Easing.ease) };
 
-// Long enough to swallow Android's willShow→willHide→willShow flapping
-// (~1.3s period, measured), short enough that a real keyboard close still
-// settles within one animation.
-const KEYBOARD_HIDE_DEBOUNCE_MS = 300;
+const CONTENT_PADDING_VERTICAL = KSpacingValue['0.75rem'];
+
+// How long past the duration the keyboard event reported the following loop
+// keeps waiting for the live height to actually reach its target before giving
+// up and snapping to it. Only a fallback: normally the loop ends the frame the
+// keyboard does.
+const FOLLOW_FALLBACK_MS = 120;
+
+// How long the keyboard-following loop keeps claiming the list after its last
+// frame. That frame's `setState` renders, lays out and emits its scroll event
+// after the loop has returned, and that trailing event carries the same
+// half-applied geometry the rest of the transition does.
+const FOLLOW_SETTLE_MS = 200;
+
+// Frames the keyboard-following loop keeps pinning after the reserved room has
+// reached its target. The pin in the frame that sets the final padding runs
+// before React has rendered it and before the native layout has applied, so it
+// finds no room to scroll into. On iOS that goes unnoticed — the loop has many
+// frames and a later one does the work — but Android's first loop frame
+// already reports the finished height, so without a tail nothing ever scrolls
+// and the last message stays behind the keyboard.
+const FOLLOW_TAIL_FRAMES = 3;
+
+// Passed as the list's `keyboardOffset` to switch KeyboardChatScrollView's own
+// native `contentInset` off while leaving the rest of the component in place.
+// Its `getEffectiveHeight` interpolates the live keyboard height into
+// `[0, max(keyboardHeight - offset, 0)]`, so an offset no keyboard can exceed
+// pins the inset at 0 for every frame of the transition. The keyboard's room is
+// reserved as real content padding instead — see the keyboard effect below.
+const DISABLE_NATIVE_KEYBOARD_INSET = 1_000_000;
 
 const getRowMarginBottom = (position: GroupPosition): number =>
   position === 'last' || position === 'solo'
@@ -149,10 +177,37 @@ export const ChatListLegend = memo(
     const buttonOpacity = useSharedValue(0);
     const isAtBottomRef = useRef(true);
     const scrollDebounceRef = useRef<NodeJS.Timeout | undefined>(undefined);
-    // Current keyboard height, and the trigger for the re-anchor effect
-    // below — see the keyboard listener for how each platform uses it.
+    // The state drives the content's bottom padding; the ref is the last
+    // value acted on, read synchronously inside the keyboard listener to
+    // drop Android's repeat events before they reach React.
+    const keyboardInsetRef = useRef(0);
     const [keyboardInset, setKeyboardInset] = useState(0);
-    const hasSeenFirstKeyboardInsetRef = useRef(false);
+    // The keyboard's live height, written on the UI thread and sampled from
+    // the JS thread by the tween below, so the content tracks the keyboard's
+    // real position instead of a guessed easing curve.
+    //
+    // `useGenericKeyboardHandler` rather than `useKeyboardHandler` /
+    // `useReanimatedKeyboardAnimation`: those call `useResizeMode()`, which
+    // reaches in and sets Android's soft input mode — `KeyboardProvider`
+    // already owns that here. The worklet only writes a SharedValue; calling
+    // `runOnJS` (or anything that reaches JS) from a keyboard worklet
+    // reliably crashes Reanimated with a reentrant-lock assertion.
+    // True while the keyboard-following loop below is driving the list.
+    const isFollowingKeyboardRef = useRef(false);
+    const liveKeyboardHeight = useSharedValue(0);
+    useGenericKeyboardHandler(
+      {
+        onMove: (e) => {
+          'worklet';
+          liveKeyboardHeight.value = e.height;
+        },
+        onEnd: (e) => {
+          'worklet';
+          liveKeyboardHeight.value = e.height;
+        },
+      },
+      []
+    );
     const rowRefsMap = useRef<Map<string, View | null>>(new Map());
     // Set on a real touch-drag (`onScrollBeginDrag`), before onStartReached/
     // onEndReached's threshold could fire. `onMomentumScrollBegin` was tried
@@ -491,6 +546,15 @@ export const ChatListLegend = memo(
 
     const handleScroll = useCallback(
       (e: any) => {
+        // The keyboard-following loop re-pins to the end on every frame, so
+        // the list is at the bottom for the whole transition by construction.
+        // The intermediate events it produces are not: content size and
+        // offset move a frame apart, and a reading taken between them says
+        // "not at bottom" and latches the scroll-to-bottom button on. The
+        // loop only runs when the list was already at the bottom, so there is
+        // nothing here to detect while it does.
+        if (isFollowingKeyboardRef.current) return;
+
         const { contentOffset, contentSize, layoutMeasurement } = e.nativeEvent;
         const isAtBottom =
           contentOffset.y + layoutMeasurement.height >=
@@ -533,6 +597,17 @@ export const ChatListLegend = memo(
       setShowBadge(false);
     }, [hasMoreNew, onLoadMoreOld, scrollMessageToEnd, buttonOpacity]);
 
+    // `paddingBottom` here replaces the one `styles.content` sets via
+    // `paddingVertical`, so the base spacing has to be added back or the last
+    // message ends up flush against the composer.
+    const contentContainerStyle = useMemo(
+      () => [
+        styles.content,
+        { paddingBottom: CONTENT_PADDING_VERTICAL + keyboardInset },
+      ],
+      [keyboardInset]
+    );
+
     const animatedButtonStyle = useAnimatedStyle(() => ({
       opacity: buttonOpacity.value,
       pointerEvents: buttonOpacity.value === 0 ? 'none' : 'auto',
@@ -547,72 +622,167 @@ export const ChatListLegend = memo(
       };
     }, []);
 
-    // Tracks the keyboard's height as the trigger for the re-anchor below.
-    // The `willHide` side is debounced because Android's event stream flaps
-    // willShow→willHide→willShow roughly every 1.3s for as long as the
-    // keyboard stays open (measured on device) — without this, every flap
-    // would fire another scroll. A real close still lands, just one tick
-    // later. Setting the same height twice is a no-op for the effect below,
-    // so a stable open only ever re-anchors once.
+    // Reserves the keyboard's room on the content and keeps the list pinned
+    // to the end for the length of each keyboard transition.
     //
-    // JS-thread only (no worklet), so none of the reentrant-lock crash risk
-    // that reaching into `useKeyboardHandler`'s worklets carries.
+    // JS thread only: no worklet, so none of the reentrant-lock crash risk
+    // that reaching into `useKeyboardHandler`'s worklets carries. The one
+    // worklet involved only writes `liveKeyboardHeight`, which this reads.
     useEffect(() => {
-      let pendingHide: ReturnType<typeof setTimeout> | undefined;
-      const clearPendingHide = () => {
-        if (pendingHide) {
-          clearTimeout(pendingHide);
-          pendingHide = undefined;
+      let pendingSettle: ReturnType<typeof setTimeout> | undefined;
+      let pendingFrame: number | undefined;
+      const clearPending = () => {
+        if (pendingSettle) {
+          clearTimeout(pendingSettle);
+          pendingSettle = undefined;
+        }
+        if (pendingFrame !== undefined) {
+          cancelAnimationFrame(pendingFrame);
+          pendingFrame = undefined;
         }
+        isFollowingKeyboardRef.current = false;
       };
-      const applyInset = (nextInset: number) => {
-        // Android only: the bottom inset the library applies there is a
-        // synthetic prop that `onScroll` does not report (its own
-        // `ScrollViewWithBottomPadding` says as much), so LegendList never
-        // learns about it, `alignItemsAtEndPadding` never shrinks, and the
-        // re-anchor below has no room to scroll into. Reporting it closes
-        // that gap. iOS needs none of this — there the inset is real and
-        // arrives through `onScroll` on its own, and overriding it here
-        // would double-count.
-        if (Platform.OS === 'android') {
-          listRef.current?.reportContentInset(
-            nextInset > 0 ? { bottom: nextInset } : null
+
+      // Follows the keyboard frame by frame instead of setting the reserved
+      // room in one step.
+      //
+      // Set in one step the layout lift lands in a single frame — measured,
+      // 72 of the 302px the content had to travel arrived as an instant jump
+      // while only the remaining 230 were animated, and `scrollToEnd`'s own
+      // ~324ms curve then finished about 100ms after the keyboard had already
+      // stopped. Sampling `liveKeyboardHeight` each frame instead means the
+      // padding, and with it the content, is wherever the keyboard actually
+      // is — no easing curve to guess at, and the two cannot drift apart.
+      //
+      // `duration` is only a bound, for a transition whose reported height
+      // never quite reaches the event's target.
+      const followKeyboard = (to: number, duration: number) => {
+        const startedAt = Date.now();
+        const startedFrom = Math.max(
+          Math.abs(liveKeyboardHeight.value) - keyboardOffset,
+          0
+        );
+        let tailFrames = 0;
+        isFollowingKeyboardRef.current = true;
+        const step = () => {
+          const live = Math.max(
+            Math.abs(liveKeyboardHeight.value) - keyboardOffset,
+            0
           );
+          // Tracks the keyboard rather than a timer, so the content never
+          // keeps travelling after the keyboard has stopped. The elapsed
+          // check is only a fallback for a transition whose reported height
+          // never quite reaches the target.
+          const reached = Math.abs(live - to) <= 1;
+          const timedOut =
+            !reached && Date.now() - startedAt >= duration + FOLLOW_FALLBACK_MS;
+          // Whether the keyboard moved at all decides what a timeout means. A
+          // `keyboardWillHide` the keyboard does not act on leaves the live
+          // height exactly where it was, and forcing the target there would
+          // collapse the room out from under a keyboard that is still up —
+          // which is what the old hide debounce was guarding against, at the
+          // cost of the list dropping a beat after the keyboard had gone. A
+          // real transition that merely stops a few px short of the height
+          // the event reported (iOS, measured ~4px) still has to land exactly
+          // on the target.
+          const moved = Math.abs(live - startedFrom) > 1;
+          if (reached) {
+            tailFrames += 1;
+          }
+          const done = timedOut || tailFrames >= FOLLOW_TAIL_FRAMES;
+          const settleTo = reached || (timedOut && moved) ? to : live;
+
+          setKeyboardInset(settleTo);
+          if (settleTo !== to) {
+            // Record what the room actually ended up as, or the dedupe in
+            // `applyInset` would swallow the next real transition to `to`.
+            keyboardInsetRef.current = settleTo;
+          }
+          // Re-pin every frame. Growing the padding only moves the content on
+          // its own while there is `alignItemsAtEndPadding` left to absorb
+          // it; once that is gone — any conversation taller than the viewport
+          // — the padding just extends the range and nothing moves until
+          // something scrolls, and `maintainScrollAtEnd` does not follow a
+          // content size change frame by frame (measured: one scroll event,
+          // at the very end). Unanimated on purpose: the keyboard is the
+          // animation, and an animated scroll here would start a second curve
+          // on top of it every frame.
+          listRef.current?.scrollToEnd({ animated: false });
+
+          if (done) {
+            pendingFrame = undefined;
+            // The loop only runs from a list that was at the bottom and it
+            // has just pinned it there again, so record that rather than
+            // waiting to re-derive it from a scroll event.
+            isAtBottomRef.current = true;
+            buttonOpacity.value = withTiming(0, BUTTON_FADE_CONFIG);
+            setShowBadge(false);
+            pendingSettle = setTimeout(() => {
+              pendingSettle = undefined;
+              isFollowingKeyboardRef.current = false;
+            }, FOLLOW_SETTLE_MS);
+            return;
+          }
+          pendingFrame = requestAnimationFrame(step);
+        };
+        pendingFrame = requestAnimationFrame(step);
+      };
+
+      const applyInset = (nextInset: number, duration: number) => {
+        // Android's event stream flaps willShow -> willHide -> willShow every
+        // ~1.3s for as long as the keyboard stays open (measured), so a
+        // repeated height must not restart the follow loop.
+        if (keyboardInsetRef.current === nextInset) return;
+        keyboardInsetRef.current = nextInset;
+
+        // Reserve the keyboard's room as real bottom padding on the content
+        // and let LegendList own it end to end. The native `contentInset` is
+        // switched off (see `keyboardOffset` on the list below), so this is
+        // the only thing compensating for the keyboard.
+        //
+        // The point is an invariant, not an offset: the scroll view's
+        // maximum content offset has to BE the visually correct position.
+        // Otherwise there is a band of legal resting offsets that all look
+        // wrong, and a drag settles somewhere inside it — which is the blank
+        // gap above the composer.
+        //
+        // A native inset cannot hold that invariant here. It widens the
+        // scroll range by the full keyboard height, but LegendList
+        // independently shrinks `alignItemsAtEndPadding` by the same amount
+        // and lifts the content through layout as well. Measured on a short
+        // conversation: the layout lift covered 258 of the 302 needed, so
+        // only 44 of scrolling was left to do while the range still ran to
+        // 302 — 258px of pure slack. As content padding the same 302 goes
+        // into `contentSize`, so `alignItemsAtEndPadding` falls out to zero,
+        // the range is exactly the lift required, and `scrollToEnd` (which
+        // reads LegendList's own metrics, and already offsets itself by
+        // `stylePaddingBottom`) lands on it.
+        //
+        // Skipped when the user has scrolled away from the bottom — opening
+        // the keyboard shouldn't yank them back down — but the padding still
+        // has to change, or the range would be wrong for them too.
+        if (!isAtBottomRef.current) {
+          setKeyboardInset(nextInset);
+          return;
         }
-        setKeyboardInset(nextInset);
+        followKeyboard(nextInset, duration);
       };
 
       const willShow = KeyboardEvents.addListener('keyboardWillShow', (e) => {
-        clearPendingHide();
-        applyInset(Math.max(e.height - keyboardOffset, 0));
+        clearPending();
+        applyInset(Math.max(e.height - keyboardOffset, 0), e.duration);
       });
-      const willHide = KeyboardEvents.addListener('keyboardWillHide', () => {
-        clearPendingHide();
-        pendingHide = setTimeout(
-          () => applyInset(0),
-          KEYBOARD_HIDE_DEBOUNCE_MS
-        );
+      const willHide = KeyboardEvents.addListener('keyboardWillHide', (e) => {
+        clearPending();
+        applyInset(0, e.duration);
       });
+
       return () => {
-        clearPendingHide();
+        clearPending();
         willShow.remove();
         willHide.remove();
       };
-    }, [keyboardOffset, listRef]);
-
-    // Re-anchors to the end once the keyboard's inset has landed, which puts
-    // the last message at exactly the spacing the closed-keyboard layout has
-    // (verified on device against both a 7-message and a long conversation).
-    // Skipped when the user has scrolled away from the bottom — opening the
-    // keyboard shouldn't yank them back down.
-    useEffect(() => {
-      if (!hasSeenFirstKeyboardInsetRef.current) {
-        hasSeenFirstKeyboardInsetRef.current = true;
-        return;
-      }
-      if (!isAtBottomRef.current) return;
-      scrollMessageToEnd({ animated: true, closeKeyboard: false });
-    }, [keyboardInset, scrollMessageToEnd]);
+    }, [buttonOpacity, keyboardOffset, listRef, liveKeyboardHeight]);
 
     // This component can stay mounted across a conversationId change (e.g.
     // navigation.replace reusing the same screen instance), so this ref must
@@ -749,21 +919,26 @@ export const ChatListLegend = memo(
           // fetch instead of the default 250px window losing it.
           drawDistance={800}
           freeze={freeze}
-          keyboardOffset={keyboardOffset}
-          // The list's own keyboard compensation is off on both platforms —
-          // measured, it overshoots badly either way. On iOS it scrolls on
-          // top of React Native's `automaticallyAdjustContentInsets` (which
-          // already insets the scroll view by the full keyboard height), and
-          // that double lift is the blank gap. On Android it overshot by
-          // ~690px against a 128px target. What both platforms do keep from
-          // the library is the bottom inset it sets, which is the room the
-          // re-anchor above scrolls into.
+          keyboardOffset={DISABLE_NATIVE_KEYBOARD_INSET}
+          // iOS only. Left on, React Native recomputes and applies its own
+          // `contentInset` every time the keyboard moves — measured here as
+          // {top: 59, bottom: keyboardHeight}, both wrong. The bottom value
+          // over-insets by the safe area, and the phantom top one is worse:
+          // iOS rests a scroll view at `-contentInset.top`.
+          // That resting offset is what put the content 59pt low and hid the
+          // last message behind the composer the moment a touch let UIKit
+          // re-clamp. legend-list's own KeyboardAvoidingLegendList disables
+          // this for the same reason.
+          automaticallyAdjustContentInsets={false}
+          // No scroll shift from the library either — the content padding
+          // above is the single compensator. Measured with it on: a 302px
+          // keyboard produced a 604px lift, exactly double.
           keyboardLiftBehavior="never"
           scrollEventThrottle={16}
           onScroll={handleScroll}
           onScrollBeginDrag={handleScrollBeginDrag}
           onLoad={handleListLoad}
-          contentContainerStyle={styles.content}
+          contentContainerStyle={contentContainerStyle}
           scrollIndicatorInsets={{ right: 1 }}
           ListHeaderComponent={
             <LegendChatLoadEarlier isLoading={moreOldLoading} />
@@ -811,7 +986,7 @@ const styles = StyleSheet.create({
     position: 'relative',
   },
   content: {
-    paddingVertical: KSpacingValue['0.75rem'],
+    paddingVertical: CONTENT_PADDING_VERTICAL,
     flexGrow: 1,
   },
   scrollToBottomButton: {

package/src/screens/inbox/Inbox.tsx

@@ -9,17 +9,22 @@ import {
   KRadiusValue,
   KSpacingValue,
 } from '@droppii/libs';
+import {
+  GroupJoinSource,
+  type ConversationItem,
+} from '@droppii/openim-rn-client-sdk';
 import { MessagesTab } from './MessagesTab';
-import type { ConversationItem } from '@droppii/openim-rn-client-sdk';
 import { trans } from '../../translation';
 import { CommunityTab } from './CommunityTab';
+import { useJoinGroupByInviteLink } from '../../hooks/groups/useJoinGroupByInviteLink';
 
 interface InboxProps {
   onPressThread?: (item?: ConversationItem) => void;
   onPressSearch?: () => void;
   onPressEdit?: () => void;
   onPressContact?: () => void;
-  onPressGroup?: (groupId: string) => void;
+  onPressGroup?: (groupId: string, groupJoinSource?: GroupJoinSource) => void;
+  groupInviteLinkCode?: string;
 }
 
 type TabRoute = { key: string; title: string };
@@ -36,8 +41,22 @@ const Inbox = memo(
     onPressEdit,
     onPressContact,
     onPressGroup,
+    groupInviteLinkCode,
   }: InboxProps) => {
     const [index, setIndex] = useState(0);
+
+    const handleGroupInviteLinkAllowed = useCallback(
+      (target: { groupId: string; conversationId: string }) => {
+        onPressGroup?.(target.groupId, GroupJoinSource.QrCode);
+      },
+      [onPressGroup]
+    );
+
+    useJoinGroupByInviteLink({
+      code: groupInviteLinkCode,
+      onAllowed: handleGroupInviteLinkAllowed,
+    });
+
     const [routes] = useState<TabRoute[]>(TabRoutes);
 
     const renderScene = useCallback(

package/src/services/endpoints.ts

@@ -40,6 +40,8 @@ export const ENDPOINTS = {
     stickerHistory: () => getApiEndpoint('stickerHistory'),
     searchMessages: () => `${getApiEndpoint('messages')}/search`,
     searchContacts: () => `${getApiEndpoint('contacts')}/search`,
+    groupJoinLink: (code: string) =>
+      `${getApiEndpoint('groupJoinLink')}/${code}`,
   },
   uploaderService: {
     get uploadImage() {

package/src/services/groupInvite.ts

@@ -0,0 +1,15 @@
+import { apiInstance, unwrapEnvelope } from './apis';
+import { getApiEndpoint } from '../config/api-endpoints';
+import type { BaseResponse } from '../types/auth';
+import type { GroupInviteLinkInfo } from '../types/chat';
+
+export namespace GroupInviteService {
+  export const fetchGroupInviteLinkInfo = async (
+    code: string
+  ): Promise<GroupInviteLinkInfo | null> => {
+    const res = await apiInstance?.get<BaseResponse<GroupInviteLinkInfo>>(
+      `${getApiEndpoint('groupJoinLink')}/${code}`
+    );
+    return unwrapEnvelope<GroupInviteLinkInfo>(res);
+  };
+}

package/src/translation/resources/i18n.ts

@@ -104,6 +104,7 @@ const i18nKey: Record<string, string> = {
   'chat:group_message_unpinned_by': '{{sender}} đã bỏ ghim một tin nhắn',
   'msg_type_member_enter': 'Đã tham gia nhóm',
   'chat:member_enter_by': '{{sender}} đã tham gia nhóm',
+  'chat:member_enter_via_link': '{{sender}} đã tham gia nhóm qua link',
   'msg_type_group_dismissed': 'Nhóm đã bị giải tán',
   'chat:group_dismissed_by': '{{sender}} đã giải tán nhóm',
   'msg_type_group_member_muted': 'Đã tắt tiếng thành viên',
@@ -227,6 +228,11 @@ const i18nKey: Record<string, string> = {
   'group:access_blocked_desc':
     'Bạn hiện không có quyền truy cập vào cuộc trò chuyện hoặc tin nhắn này.',
   'group:access_blocked_button': 'Đã hiểu',
+  'group:join_group_confirm_title': 'Tham gia nhóm',
+  'group:join_group_confirm_button': 'Tham gia nhóm',
+  'group:invite_link_unavailable_title': 'Liên kết không còn khả dụng',
+  'group:invite_link_unavailable_desc':
+    'Liên kết đã bị thu hồi, thay thế hoặc nhóm không còn tồn tại. Vui lòng liên hệ người gửi để nhận liên kết mới.',
 };
 
 export default {

package/src/types/chat.ts

@@ -2,6 +2,7 @@ import {
   MessageType,
   type ConversationItem,
   type GroupItem,
+  type GroupVisibility,
   type MessageItem,
   type SelfUserInfo,
 } from '@droppii/openim-rn-client-sdk';
@@ -37,14 +38,7 @@ export interface ChatUIAdapter {
 }
 
 export type GenerateChatDetailLinkFn = (
-  params: Pick<
-    ChatDetailProps,
-    | 'targetConversationId'
-    | 'targetUserId'
-    | 'targetGroupId'
-    | 'targetBotId'
-    | 'targetMessageId'
-  >
+  params: Pick<ChatDetailProps, 'targetConversationId' | 'targetMessageId'>
 ) => string;
 
 export interface ChatContextType {
@@ -407,3 +401,15 @@ export interface IContactSearchItem {
   memberCount?: number;
   description?: string;
 }
+
+/** Response shape of `GET /chat-service/v1/app/conversations/join-link/{code}`. */
+export interface GroupInviteLinkInfo {
+  conversationId: string;
+  groupId: string;
+  groupName: string;
+  groupDescription: string;
+  groupVisibility: GroupVisibility;
+  groupAvatar: string;
+  isMember: boolean;
+  groupTotalMember: number;
+}

package/src/utils/messageUtils.ts

@@ -3,6 +3,7 @@
  */
 
 import {
+  GroupJoinSource,
   MessageType,
   PeerType,
   type ConversationItem,
@@ -196,6 +197,14 @@ export const resolveNotificationText = (
       }
       break;
     }
+    case MessageType.MemberEnter: {
+      const joinSource = detail?.entrantUser?.joinSource;
+      if (joinSource === GroupJoinSource.QrCode) {
+        previewKey = 'chat:member_enter_via_link';
+        bySenderKey = 'chat:member_enter_via_link';
+      }
+      break;
+    }
     default:
       break;
   }
@@ -433,10 +442,16 @@ export const getNotificationOpUserNickname = (
     const parsed = JSON.parse(message.notificationElem.detail) as {
       opUser?: { nickname?: string };
       quitUser?: { nickname?: string };
+      entrantUser?: { nickname?: string };
     };
-    // MemberQuit puts the leaver in `quitUser`, not `opUser` — every other
-    // group-notification content type uses `opUser` for the actor.
-    return parsed?.opUser?.nickname ?? parsed?.quitUser?.nickname;
+    // MemberQuit puts the leaver in `quitUser`
+    // MemberEnter puts the joiner in `entrantUser`
+    // every other group-notification content type uses `opUser` for the actor.
+    return (
+      parsed?.opUser?.nickname ??
+      parsed?.quitUser?.nickname ??
+      parsed?.entrantUser?.nickname
+    );
   } catch {
     return undefined;
   }