Grouped avatar

src/components/Inbox/DialogAvatar.module.scss

@@ -47,4 +47,8 @@
       font-size: 14px;
     }
   }
+
+  &.bordered {
+    border: 2px solid #fff;
+  }
 }

src/components/Inbox/DialogAvatar.tsx

@@ -8,6 +8,8 @@ type Props = {
   url?: string
   online?: boolean
   size?: 'small'
+  bordered?: boolean
+  className: string
 }
 
 const colors = [
@@ -36,8 +38,9 @@ const DialogAvatar = (props: Props) => {
 
   return (
     <div
-      class={clsx(styles.DialogAvatar, {
+      class={clsx(styles.DialogAvatar, props.className, {
         [styles.online]: props.online,
+        [styles.bordered]: props.bordered,
         [styles.small]: props.size === 'small'
       })}
       style={{ 'background-color': `${randomBg()}` }}

src/components/Inbox/DialogCard.tsx

@@ -4,6 +4,7 @@ import type { Author, Chat, ChatMember, User } from '../../graphql/types.gen'
 import { apiClient } from '../../utils/apiClient'
 import { t } from '../../utils/intl'
 import { useInbox } from '../../context/inbox'
+import GroupDialogAvatar from './GroupDialogAvatar'
 
 type DialogProps = {
   online?: boolean
@@ -16,11 +17,14 @@ type DialogProps = {
 
 const DialogCard = (props: DialogProps) => {
   const companions = props.members.filter((member) => member.slug !== props.ownSlug)
-  console.log('!!! companions:', companions)
   return (
     <div class={styles.DialogCard}>
       <div class={styles.avatar}>
-        <DialogAvatar name={props.members[0].name} url={props.members[0].userpic} />
+        {companions.length > 1 ? (
+          <GroupDialogAvatar users={companions} />
+        ) : (
+          <DialogAvatar name={props.members[0].name} url={props.members[0].userpic} />
+        )}
       </div>
 
       <div class={styles.row}>

src/components/Inbox/GroupDialogAvatar.module.scss

@@ -0,0 +1,46 @@
+.GroupDialogAvatar {
+  position: relative;
+  height: 40px;
+  width: 40px;
+  .grouped {
+    position: absolute;
+
+    &:nth-child(1) {
+      top: 0;
+      left: 50%;
+      transform: translateX(-50%);
+    }
+
+    &:nth-child(2) {
+      bottom: 0;
+      left: 0;
+    }
+
+    &:nth-child(3) {
+      bottom: 0;
+      right: 0;
+    }
+  }
+
+  .counter {
+    width: 23px;
+    height: 23px;
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    text-align: center;
+    line-height: 21px;
+    background: #fff;
+    border: 2px solid #fff;
+    box-shadow: inset 0 0 0 2px #000;
+    border-radius: 50%;
+    box-sizing: border-box;
+    font-size: 12px;
+    font-weight: 600;
+
+    &.hundred {
+      font-size: 7px;
+      line-height: 20px;
+    }
+  }
+}

src/components/Inbox/GroupDialogAvatar.tsx

@@ -0,0 +1,38 @@
+import './DialogCard.module.scss'
+import styles from './GroupDialogAvatar.module.scss'
+import { clsx } from 'clsx'
+import type { ChatMember } from '../../graphql/types.gen'
+import DialogAvatar from './DialogAvatar'
+
+type Props = {
+  users: ChatMember[]
+}
+
+const GroupDialogAvatar = (props: Props) => {
+  const slicedUsers = () => {
+    if (props.users.length > 3) {
+      return props.users.slice(0, 2)
+    }
+    return props.users.slice(0, 3)
+  }
+  return (
+    <div class={styles.GroupDialogAvatar}>
+      {slicedUsers().map((user) => (
+        <DialogAvatar
+          className={styles.grouped}
+          bordered={true}
+          size="small"
+          name={user.name}
+          url={user.userpic}
+        />
+      ))}
+      {props.users.length > 3 && (
+        <div class={clsx(styles.counter, { [styles.hundred]: props.users.length >= 100 })}>
+          {++props.users.length}
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default GroupDialogAvatar