@droppii-org/chat-mobile 0.2.78 → 0.2.80

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

@@ -35,9 +35,10 @@ import {
   type MessageItem,
 } from '@droppii/openim-rn-client-sdk';
 import { useMessages } from '../../hooks/message/useMessages';
-import { ChatEvent, type GroupRemovedPayload } from '../../types/events';
+import { ChatEvent } from '../../types/events';
 import { useSetIsShowFLashMessage } from '../../context/global';
 import { useJoinGroup } from '../../hooks/groups/useJoinGroup';
+import { useGroupAccessGuard } from '../../hooks/groups/useGroupAccessGuard';
 
 const ChatDetail = memo(
   ({
@@ -119,16 +120,14 @@ const ChatDetail = memo(
       };
     }, [conversationId, targetUserId, targetGroupId, setShowFLashMessage]);
 
-    useEffect(() => {
-      const sub = DeviceEventEmitter.addListener(
-        ChatEvent.GroupRemoved,
-        (payload: GroupRemovedPayload) => {
-          if (payload.groupID !== targetGroupId) return;
-          (onBack ?? handleBackDefault)();
-        }
-      );
-      return () => sub.remove();
-    }, [targetGroupId, onBack, handleBackDefault]);
+    const handleAccessBlocked = useCallback(() => {
+      (onBack ?? handleBackDefault)();
+    }, [onBack, handleBackDefault]);
+
+    const { isCheckingAccess } = useGroupAccessGuard({
+      groupID: conversation?.groupID || targetGroupId,
+      onBlocked: handleAccessBlocked,
+    });
 
     const resolvedShowAddMember =
       showAddMember ?? shouldShowAddMember(conversation);
@@ -197,7 +196,6 @@ const ChatDetail = memo(
           onPressAddMember={onPressAddMember}
           onPressMenu={handlePressMenu}
           onPressAvatar={handlePressMenu}
-          targetGroupId={targetGroupId}
         />
 
         <PinnedMessageBar
@@ -210,7 +208,7 @@ const ChatDetail = memo(
           messages={messages}
           conversationId={conversationId}
           customMessageItemFactory={customMessageItemFactory}
-          isLoading={initLoading || isLoadingConversation}
+          isLoading={initLoading || isLoadingConversation || isCheckingAccess}
           onLoadMoreOld={getMoreOldMessages}
           hasMoreOld={hasMoreOld}
           moreOldLoading={moreOldLoading}

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

@@ -11,8 +11,8 @@ import { NamePrefixIcon } from '../../components/ThreadCard/NamePrefixIcon';
 import type { ChatDetailHeaderProps } from './types';
 import { getConversationSubtitle } from './conversationHeader.utils';
 import { useGetUsersInfo } from '../../hooks/users/useGetUsersInfo';
-import { useGetConversationDetail } from '../../hooks/conversation/useGetConversationDetail';
 import { useChatDetailContext } from '../../context';
+import { useConversation } from '../../store';
 
 const ChatDetailHeader = memo(
   ({
@@ -24,12 +24,8 @@ const ChatDetailHeader = memo(
     onPressAddMember,
     onPressMenu,
     onPressAvatar,
-    targetGroupId,
   }: ChatDetailHeaderProps) => {
-    const { conversationData: conversation } = useGetConversationDetail({
-      targetGroupId,
-      targetUserId: targetUserId,
-    });
+    const conversation = useConversation(conversationId);
     const { data: usersInfo } = useGetUsersInfo(
       targetUserId ? [targetUserId] : []
     );

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

@@ -32,7 +32,11 @@ import {
   KRadiusValue,
   KImage,
 } from '@droppii/libs';
-import { precomputeLegendListData } from '../../utils/legendListMessage';
+import {
+  precomputeLegendListData,
+  type GroupPosition,
+} from '../../utils/legendListMessage';
+import { getMessageRenderId } from '../../utils/message';
 import type { ChatListProps } from './types';
 import { LegendChatMessage } from './legend/LegendChatMessage';
 import { LegendChatDay } from './legend/LegendChatDay';
@@ -50,7 +54,7 @@ import { ChatEvent, type ScrollToMessagePayload } from '../../types/events';
 import { useMessageStore } from '../../store/message';
 import { useChatContext } from '../../context';
 import { messageStyles } from './legend/messageTypes';
-import { MessageType } from '@droppii/openim-rn-client-sdk';
+import { MessageType, PeerType } from '@droppii/openim-rn-client-sdk';
 import type { MessageItem } from '@droppii/openim-rn-client-sdk';
 import { useUserStore } from '../../store';
 import { ChatMessageAPI } from '../../services';
@@ -60,10 +64,19 @@ import ChatImageDimens, {
   CHAT_IMAGE_VIEW_SOURCE,
 } from '../../utils/chatImageDimens';
 
-// Row wrapper (`messageRowLeft`/`messageRowRight` in `components/messages/styles.ts`)
-// adds only a bottom margin — no vertical padding — so a fixed-size item's true
-// rendered height is `content height + this margin`.
-const ROW_MARGIN_BOTTOM = KSpacingValue['0.25rem'];
+// Cluster spacing: a wide gap after the message that closes a cluster, a tight
+// one between messages inside it. These override the flat margin on the row
+// wrapper (`messageRowLeft`/`messageRowRight` in `components/messages/styles.ts`),
+// which adds only a bottom margin and no vertical padding — so a fixed-size
+// item's true rendered height stays `content height + this margin`, and
+// getFixedItemSize can keep folding it in.
+const ROW_MARGIN_CLUSTER_END = KSpacingValue['0.5rem'];
+const ROW_MARGIN_IN_CLUSTER = KSpacingValue['0.25rem'];
+
+const getRowMarginBottom = (position: GroupPosition): number =>
+  position === 'last' || position === 'solo'
+    ? ROW_MARGIN_CLUSTER_END
+    : ROW_MARGIN_IN_CLUSTER;
 
 // KeyboardAwareLegendList auto scroll when modal opened
 // TODO: Convert toolbox to absolute view
@@ -103,12 +116,23 @@ export const ChatListLegend = memo(
     const currentUserId = useUserStore((s) => s.user?.userID);
     const windowWidth = useWindowDimensions().width;
     // Precompute all message data in single pass (O(n))
+    const { isBotConversation, conversationFlow, conversation } =
+      useChatDetailContext();
+
+    // Avatar and sender name only appear in real group chats — a bot thread is
+    // a Group session too, but reads as a single counterpart.
+    const isGroupConversation =
+      conversation?.peerType === PeerType.Group && !isBotConversation;
+
     const messageDataMap = useMemo(
-      () => precomputeLegendListData(messages),
-      [messages]
+      () =>
+        precomputeLegendListData(messages, {
+          isBotConversation,
+          currentUserId,
+        }),
+      [messages, isBotConversation, currentUserId]
     );
 
-    const { isBotConversation, conversationFlow } = useChatDetailContext();
     const { retryMessage } = useSendMessage();
 
     const lastMessageId = useMemo(() => {
@@ -163,17 +187,22 @@ export const ChatListLegend = memo(
           const isLastMessage =
             (message.clientMsgID || message.serverMsgID) === lastMessageId;
           const isLastIncoming = !isOutgoing && isLastMessage;
-          const messageId =
-            message.clientMsgID ||
-            message.serverMsgID ||
-            `temp-${message.sendTime || message.createTime}-${index}`;
+          const messageId = getMessageRenderId(message, index);
 
           const messageData = messageDataMap.get(messageId);
           if (!messageData) {
             return null;
           }
 
-          const { dayStart, createdAt } = messageData;
+          const { dayStart, timeBreak, createdAt, groupPosition } = messageData;
+
+          const showSenderGutter = isGroupConversation && !isOutgoing;
+          const showName =
+            showSenderGutter &&
+            (groupPosition === 'first' || groupPosition === 'solo');
+          const showAvatar =
+            showSenderGutter &&
+            (groupPosition === 'last' || groupPosition === 'solo');
 
           let flowInputButtonsNodes: GroupChild<'input-buttons'>[] = [];
           if (
@@ -188,17 +217,20 @@ export const ChatListLegend = memo(
 
           return (
             <>
-              {dayStart && <LegendChatDay createdAt={createdAt} />}
+              {(dayStart || timeBreak) && (
+                <LegendChatDay createdAt={createdAt} timeOnly={!dayStart} />
+              )}
               <KContainer.View
                 ref={(node: View | null) => {
                   if (node) rowRefsMap.current.set(messageId, node);
                   else rowRefsMap.current.delete(messageId);
                 }}
-                style={
+                style={[
                   isOutgoing
                     ? messageStyles.messageRowRight
-                    : messageStyles.messageRowLeft
-                }
+                    : messageStyles.messageRowLeft,
+                  { marginBottom: getRowMarginBottom(groupPosition) },
+                ]}
                 collapsable={false}
               >
                 <LegendChatMessage
@@ -215,6 +247,10 @@ export const ChatListLegend = memo(
                   }
                   customMessageItemFactory={customMessageItemFactory}
                   isHighlighted={highlightedId === messageId}
+                  showName={showName}
+                  showAvatar={showAvatar}
+                  showSenderGutter={showSenderGutter}
+                  groupPosition={groupPosition}
                 />
               </KContainer.View>
               {flowInputButtonsNodes && flowInputButtonsNodes.length > 0 && (
@@ -242,6 +278,7 @@ export const ChatListLegend = memo(
         currentUserId,
         lastMessageId,
         messageDataMap,
+        isGroupConversation,
         isBotConversation,
         onMediaPress,
         onPressUrl,
@@ -303,12 +340,22 @@ export const ChatListLegend = memo(
     const getFixedItemSize = useCallback(
       (item: MessageItem, index: number): number | undefined => {
         const message = item;
-        const messageId =
-          message.clientMsgID ||
-          message.serverMsgID ||
-          `temp-${message.sendTime || message.createTime}-${index}`;
+        const messageId = getMessageRenderId(message, index);
 
-        if (messageDataMap.get(messageId)?.dayStart) return undefined;
+        const messageData = messageDataMap.get(messageId);
+        // Both separators add chrome above the row that this function does not
+        // account for, and a resolved size is never re-measured.
+        if (messageData?.dayStart || messageData?.timeBreak) return undefined;
+
+        // Incoming rows in a group chat carry an avatar column and a sender
+        // name whose height this function cannot predict — measure them.
+        if (isGroupConversation && message.sendID !== currentUserId) {
+          return undefined;
+        }
+
+        const rowMargin = getRowMarginBottom(
+          messageData?.groupPosition ?? 'solo'
+        );
 
         // Resolve the content-type candidate FIRST — for every type other
         // than these three the result is `undefined` regardless of anything
@@ -319,17 +366,16 @@ export const ChatListLegend = memo(
         switch (message.contentType) {
           case MessageType.PictureMessage:
             candidateSize =
-              resolveImageDisplayDims(message, windowWidth).height +
-              ROW_MARGIN_BOTTOM;
+              resolveImageDisplayDims(message, windowWidth).height + rowMargin;
             break;
           case MessageType.VideoMessage:
             candidateSize =
               ChatImageDimens.getDimensions(
                 CHAT_IMAGE_VIEW_SOURCE.MessageListThumbnail
-              ).height + ROW_MARGIN_BOTTOM;
+              ).height + rowMargin;
             break;
           case MessageType.StickerMessage:
-            candidateSize = STICKER_SIZE + ROW_MARGIN_BOTTOM;
+            candidateSize = STICKER_SIZE + rowMargin;
             break;
           default:
             return undefined;
@@ -361,6 +407,7 @@ export const ChatListLegend = memo(
         messageDataMap,
         customMessageItemFactory,
         currentUserId,
+        isGroupConversation,
         lastMessageId,
         isBotConversation,
         conversationFlow?.flowCurrentStep,
@@ -368,6 +415,28 @@ export const ChatListLegend = memo(
       ]
     );
 
+    // LegendList memoises each rendered item on [itemKey, item, extraData], so
+    // an item whose own object is unchanged will not re-render. Cluster
+    // position depends on a message's NEIGHBOURS, which can change while the
+    // message itself does not — prepending older history is enough to turn a
+    // 'first' into a 'middle'. messageDataMap is memoised on exactly the inputs
+    // that can move those boundaries, so including it here is what keeps a
+    // stale tail from being left behind.
+    const listExtraData = useMemo(
+      () => ({
+        messageDataMap,
+        flowStepId: conversationFlow?.flowCurrentStep?.id ?? '',
+        lastMessageId,
+        highlightedId,
+      }),
+      [
+        messageDataMap,
+        conversationFlow?.flowCurrentStep?.id,
+        lastMessageId,
+        highlightedId,
+      ]
+    );
+
     const handleStartReached = useCallback(() => {
       if (__DEV__) {
         console.log('[LegendList] onStartReached triggered', {
@@ -525,7 +594,7 @@ export const ChatListLegend = memo(
           getFixedItemSize={getFixedItemSize}
           keyExtractor={(item) => String(item.clientMsgID || item.serverMsgID)}
           recycleItems={false}
-          extraData={`${conversationFlow?.flowCurrentStep?.id ?? ''}-${lastMessageId ?? ''}-${highlightedId ?? ''}`}
+          extraData={listExtraData}
           alignItemsAtEnd
           maintainVisibleContentPosition={maintainVisiblePositionConfig}
           freeze={freeze}

package/src/screens/chat-detail/legend/LegendChatDay.tsx

@@ -46,25 +46,35 @@ const formatDayLabel = (createdAt: number): string | null => {
 
 interface LegendChatDayProps {
   createdAt: number;
+  /**
+   * Render just the clock time, without the day. Used where a cluster broke on
+   * elapsed time inside a single day — the date is already on screen above.
+   */
+  timeOnly?: boolean;
 }
 
-export const LegendChatDay = memo(({ createdAt }: LegendChatDayProps) => {
-  const dateStr = useMemo(
-    () => (createdAt == null ? null : formatDayLabel(createdAt)),
-    [createdAt]
-  );
+export const LegendChatDay = memo(
+  ({ createdAt, timeOnly = false }: LegendChatDayProps) => {
+    const dateStr = useMemo(() => {
+      if (createdAt == null) return null;
+      if (!timeOnly) return formatDayLabel(createdAt);
 
-  if (!dateStr) return null;
+      const date = new Date(createdAt);
+      return Number.isNaN(date.getTime()) ? null : formatTime(date);
+    }, [createdAt, timeOnly]);
 
-  return (
-    <KContainer.View center marginV="0.5rem">
-      <KContainer.View>
-        <KLabel.Text typo="TextXsNormal" color={CHAT_BUBBLE_COLORS.dayLabel}>
-          {dateStr}
-        </KLabel.Text>
+    if (!dateStr) return null;
+
+    return (
+      <KContainer.View center marginV="0.5rem">
+        <KContainer.View>
+          <KLabel.Text typo="TextXsNormal" color={CHAT_BUBBLE_COLORS.dayLabel}>
+            {dateStr}
+          </KLabel.Text>
+        </KContainer.View>
       </KContainer.View>
-    </KContainer.View>
-  );
-});
+    );
+  }
+);
 
 LegendChatDay.displayName = 'LegendChatDay';

package/src/screens/chat-detail/legend/LegendChatMessage.tsx

@@ -1,4 +1,10 @@
-import { KContainer, KImage, KColors, KSpacingValue } from '@droppii/libs';
+import {
+  KContainer,
+  KImage,
+  KColors,
+  KLabel,
+  KSpacingValue,
+} from '@droppii/libs';
 import { StyleSheet } from 'react-native';
 import { memo, useCallback, useMemo } from 'react';
 import type { ComponentType, PropsWithChildren, ReactNode } from 'react';
@@ -20,7 +26,10 @@ import type { BaseLegendMessageProps } from '../../../components/messages/types'
 import { messageStyles } from './messageTypes';
 import QuotedMessage from '../../../components/messages/quotedMessage';
 import { StickerMessage } from '../../../components/messages/stickerMessage';
-import { GROUP_NOTIFICATION_TEXT } from '../../../utils/messageUtils';
+import { GROUP_NOTIFICATION_TYPES } from '../../../utils/messageUtils';
+import type { GroupPosition } from '../../../utils/legendListMessage';
+import { Avatar } from '../../../components/Avatar';
+import { TAIL_WIDTH } from '../../../components/messages/BubbleTail';
 
 type MessageProps = BaseLegendMessageProps & {
   onPressUrl?: (url: string) => void;
@@ -38,18 +47,20 @@ interface LegendChatMessageProps {
   onLongPress?: () => void;
   customMessageItemFactory?: (m: MessageItem) => ReactNode;
   isHighlighted?: boolean;
+  /** Sender name above the bubble — first message of an incoming cluster. */
+  showName?: boolean;
+  /** Sender avatar beside the bubble — last message of an incoming cluster. */
+  showAvatar?: boolean;
+  /**
+   * Reserve the avatar column. True for every incoming message in a group
+   * conversation, not just the one carrying the avatar, so that the middle of
+   * a cluster stays aligned with its last message.
+   */
+  showSenderGutter?: boolean;
+  /** Position within its same-sender cluster — drives the bubble tail. */
+  groupPosition?: GroupPosition;
 }
 
-// Notification-style messages (group created/renamed/member changes/etc.)
-// are system banners, not user-authored text — they render centered,
-// full-width, without a bubble, avatar/status chrome, or left/right
-// alignment (see SYSTEM_MESSAGE_TYPES below). Driven by the same lookup
-// messageUtils uses to build their preview/thread text, so adding a new
-// notification content type there is enough to cover both places.
-const GROUP_NOTIFICATION_TYPES = Object.keys(GROUP_NOTIFICATION_TEXT).map(
-  Number
-) as MessageType[];
-
 const messageComponentMap: Partial<
   Record<MessageType, ComponentType<MessageProps>>
 > = {
@@ -88,6 +99,10 @@ export const LegendChatMessage = memo(
     onLongPress,
     customMessageItemFactory,
     isHighlighted,
+    showName = false,
+    showAvatar = false,
+    showSenderGutter = false,
+    groupPosition,
   }: LegendChatMessageProps) => {
     const handlePress = useCallback(() => {
       onPress?.(message);
@@ -127,12 +142,34 @@ export const LegendChatMessage = memo(
 
     return (
       <KContainer.View style={messageStyles.wrapper} row alignItems>
+        {showSenderGutter && (
+          <KContainer.View style={styles.avatarGutter}>
+            {showAvatar && (
+              <Avatar
+                size="sm"
+                source={message.senderFaceUrl}
+                fullName={message.senderNickname}
+              />
+            )}
+          </KContainer.View>
+        )}
         <MessageStatusIndicator
           message={message}
           isOutgoing={isOutgoing}
           onRetry={onRetry}
         />
         <KContainer.View style={styles.content}>
+          {showName && !!message.senderNickname && (
+            <KLabel.Text
+              typo="TextXsNormal"
+              color={KColors.gray.normal}
+              numberOfLines={1}
+              marginB={2}
+              style={styles.senderName}
+            >
+              {message.senderNickname}
+            </KLabel.Text>
+          )}
           <LongPressWrapper onPress={handlePress} onLongPress={handleLongPress}>
             <MessageComponent
               message={message}
@@ -141,6 +178,7 @@ export const LegendChatMessage = memo(
               onMediaPress={hasMediaPress ? onMediaPress : undefined}
               onPressUrl={hasUrlPress ? onPressUrl : undefined}
               isHighlighted={isHighlighted}
+              groupPosition={groupPosition}
             />
           </LongPressWrapper>
 
@@ -161,10 +199,22 @@ export const LegendChatMessage = memo(
 
 LegendChatMessage.displayName = 'LegendChatMessage';
 
+const AVATAR_SIZE = 24;
+
 const styles = StyleSheet.create({
   content: {
     position: 'relative',
   },
+  // Bubbles sit behind a TAIL_WIDTH gutter (see BubbleTailRow); the name has to
+  // clear the same gutter or it hangs to the left of the bubble it labels.
+  senderName: {
+    marginLeft: TAIL_WIDTH,
+  },
+  avatarGutter: {
+    width: AVATAR_SIZE,
+    marginRight: KSpacingValue['0.25rem'],
+    alignSelf: 'flex-end',
+  },
   systemMessageWrapper: {
     width: '100%',
     marginVertical: KSpacingValue['0.25rem'],

package/src/screens/chat-detail/types.ts

@@ -49,7 +49,6 @@ export interface ChatDetailHeaderProps {
   onPressAvatar?: () => void;
   conversationId: string;
   targetUserId?: string;
-  targetGroupId?: string;
 }
 
 export interface ChatQuickActionsRenderParams {

package/src/screens/inbox/CommunityTab.tsx

@@ -1,4 +1,4 @@
-import { KContainer, KSpacingValue } from '@droppii/libs';
+import { KColors, KContainer, KSpacingValue } from '@droppii/libs';
 import { memo, useCallback } from 'react';
 import { ActivityIndicator, StyleSheet } from 'react-native';
 import type { SearchPublicGroupInfo } from '@droppii/openim-rn-client-sdk';
@@ -41,7 +41,7 @@ export const CommunityTab = memo(({ onPressGroup }: CommunityTabProps) => {
     <KContainer.Page flex>
       {isFetching && !isFetchingNextPage && !isRefetching ? (
         <KContainer.View flex center>
-          <ActivityIndicator />
+          <ActivityIndicator color={KColors.primary.normal} size="small" />
         </KContainer.View>
       ) : (
         <KContainer.FlatList

package/src/screens/inbox/MessagesTab.tsx

@@ -39,7 +39,7 @@ export const MessagesTab = memo(({ onPressThread }: MessagesTabProps) => {
 
   const LoadingComponent = (
     <KContainer.View center flex paddingV="3rem">
-      <ActivityIndicator size="large" color={KColors.palette.primary.w400} />
+      <ActivityIndicator color={KColors.primary.normal} size="small" />
     </KContainer.View>
   );
 

package/src/store/conversation.ts

@@ -52,23 +52,14 @@ export const useConversationStore = create<ConversationStore>()((set, get) => ({
     const existing = get().map[id];
     if (!existing) return;
 
-    const merged = { ...existing, ...data };
     const nextMap = { ...get().map };
-    if (merged.isNotInGroup) {
-      delete nextMap[id];
-    } else {
-      nextMap[id] = merged;
-    }
+    nextMap[id] = { ...existing, ...data };
     set(sortConversation(nextMap));
   },
   updateConversations(conversations) {
     const nextMap = conversations.reduce(
       (pre, curr) => {
-        if (curr.isNotInGroup) {
-          delete pre[curr.conversationID];
-        } else {
-          pre[curr.conversationID] = curr;
-        }
+        pre[curr.conversationID] = curr;
         return pre;
       },
       { ...get().map }
@@ -86,14 +77,19 @@ export const useConversationStore = create<ConversationStore>()((set, get) => ({
   },
   removeGroupConversation(groupID) {
     const conversationID = getConversationID(SessionType.Group, groupID);
+    const existing = get().map[conversationID];
+    if (!existing) return;
 
-    const newMap = { ...get().map };
-    delete newMap[conversationID];
-
-    set({
-      map: newMap,
-      list: get().list.filter((item) => item !== conversationID),
-    });
+    // Mark rather than delete: the conversation leaves the inbox and loses its
+    // pin, but stays addressable so a public group is still readable. Access
+    // itself is decided by useGroupAccessGuard, not by the store.
+    const nextMap = { ...get().map };
+    nextMap[conversationID] = {
+      ...existing,
+      isNotInGroup: true,
+      isPinned: false,
+    };
+    set(sortConversation(nextMap));
   },
   reset() {
     set({

package/src/translation/resources/i18n.ts

@@ -209,6 +209,10 @@ const i18nKey: Record<string, string> = {
   'group:dismiss_confirm_primary': 'Giải tán',
   'group:dismiss_confirm_secondary': 'Quay lại',
   'group:dismiss_toast_success': 'Đã giải tán nhóm',
+  'group:access_blocked_title': 'Không thể xem cuộc trò chuyện này',
+  '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',
 };
 
 export default {

package/src/utils/conversation.ts

@@ -38,9 +38,12 @@ export const getConversationID = (
 };
 
 export const sortConversation = (map: Record<string, ConversationItem>) => {
-  const list = Object.keys(map).sort((a, b) =>
-    conversationCompare(map[a]!, map[b]!)
-  );
+  // `map` holds every conversation that can still be opened; `list` is the
+  // inbox. A group the user is no longer in stays addressable — a public group
+  // remains readable via deeplink or search — but must not show in the inbox.
+  const list = Object.keys(map)
+    .filter((id) => !map[id]?.isNotInGroup)
+    .sort((a, b) => conversationCompare(map[a]!, map[b]!));
   return { map, list };
 };