feat: 私信会话增加组合式头像显示

packages/design/components/Avatar/combined.tsx

@@ -6,7 +6,7 @@ import './combined.css';
 interface CombinedAvatarProps {
   shape?: 'circle' | 'square';
   size?: number;
-  items: AvatarProps[];
+  items: Pick<AvatarProps, 'name' | 'src'>[];
 }
 
 /**
@@ -14,7 +14,7 @@ interface CombinedAvatarProps {
  */
 export const CombinedAvatar: React.FC<CombinedAvatarProps> = React.memo(
   (props) => {
-    const { size = 16, shape = 'circle' } = props;
+    const { size = 32, shape = 'circle' } = props;
     const items = _take(props.items, 4);
 
     const length = items.length;

packages/design/components/index.ts

@@ -1,4 +1,5 @@
 export { Avatar } from './Avatar';
+export { CombinedAvatar } from './Avatar/combined';
 export { DelayTip } from './DelayTip';
 export { Highlight } from './Highlight';
 export { Icon } from './Icon';

shared/index.tsx

@@ -158,6 +158,7 @@ export {
   useUserId,
   useUserInfoList,
 } from './redux/hooks/useUserInfo';
+export { useUnread } from './redux/hooks/useUnread';
 export {
   userActions,
   groupActions,

web/src/routes/Main/Content/Personal/SidebarDMItem.tsx

@@ -1,7 +1,15 @@
-import { ChatConverseState, useDMConverseName } from 'tailchat-shared';
+import {
+  ChatConverseState,
+  getCachedUserInfo,
+  useAsync,
+  useDMConverseName,
+  useUnread,
+  useUserId,
+} from 'tailchat-shared';
 import React from 'react';
 import { SidebarItem } from '../SidebarItem';
-import { useUnread } from 'tailchat-shared/redux/hooks/useUnread';
+import { CombinedAvatar } from 'tailchat-design';
+import _without from 'lodash/without';
 
 interface SidebarDMItemProps {
   converse: ChatConverseState;
@@ -10,14 +18,36 @@ export const SidebarDMItem: React.FC<SidebarDMItemProps> = React.memo(
   (props) => {
     const converse = props.converse;
     const name = useDMConverseName(converse);
+    const userId = useUserId();
     const [hasUnread] = useUnread([converse._id]);
 
+    const { value: icon } = useAsync(async () => {
+      if (!userId) {
+        return;
+      }
+
+      const userInfos = await Promise.all(
+        _without<string>(converse.members, userId).map((memberUserId) =>
+          getCachedUserInfo(memberUserId)
+        )
+      );
+
+      return (
+        <CombinedAvatar
+          items={userInfos.map((user) => ({
+            name: user.nickname,
+            src: user.avatar,
+          }))}
+        />
+      );
+    }, [converse.members, userId]);
+
     return (
       <SidebarItem
         key={converse._id}
         name={name}
-        // TODO
-        // action={<Icon icon="mdi:close" />}
+        // action={<Icon icon="mdi:close" />} // TODO
+        icon={icon}
         to={`/main/personal/converse/${converse._id}`}
         badge={hasUnread}
       />