From 9de323b752191593448ad1cf04edcb6f6a462e43 Mon Sep 17 00:00:00 2001
From: ilya-bkv <i.yablokov@ccmp.me>
Date: Tue, 29 Nov 2022 08:36:32 +0300
Subject: [PATCH] Grouped avatar

---
 src/components/Inbox/DialogAvatar.module.scss |  4 ++
 src/components/Inbox/DialogAvatar.tsx         |  5 +-
 src/components/Inbox/DialogCard.tsx           |  8 +++-
 .../Inbox/GroupDialogAvatar.module.scss       | 46 +++++++++++++++++++
 src/components/Inbox/GroupDialogAvatar.tsx    | 38 +++++++++++++++
 5 files changed, 98 insertions(+), 3 deletions(-)
 create mode 100644 src/components/Inbox/GroupDialogAvatar.module.scss
 create mode 100644 src/components/Inbox/GroupDialogAvatar.tsx

diff --git a/src/components/Inbox/DialogAvatar.module.scss b/src/components/Inbox/DialogAvatar.module.scss
index 626aa88a..e9bfbb58 100644
--- a/src/components/Inbox/DialogAvatar.module.scss
+++ b/src/components/Inbox/DialogAvatar.module.scss
@@ -47,4 +47,8 @@
       font-size: 14px;
     }
   }
+
+  &.bordered {
+    border: 2px solid #fff;
+  }
 }
diff --git a/src/components/Inbox/DialogAvatar.tsx b/src/components/Inbox/DialogAvatar.tsx
index fd0ebdc0..88217b90 100644
--- a/src/components/Inbox/DialogAvatar.tsx
+++ b/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()}` }}
diff --git a/src/components/Inbox/DialogCard.tsx b/src/components/Inbox/DialogCard.tsx
index 3988966f..c36ac98b 100644
--- a/src/components/Inbox/DialogCard.tsx
+++ b/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}>
diff --git a/src/components/Inbox/GroupDialogAvatar.module.scss b/src/components/Inbox/GroupDialogAvatar.module.scss
new file mode 100644
index 00000000..e053442d
--- /dev/null
+++ b/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;
+    }
+  }
+}
diff --git a/src/components/Inbox/GroupDialogAvatar.tsx b/src/components/Inbox/GroupDialogAvatar.tsx
new file mode 100644
index 00000000..ec81df57
--- /dev/null
+++ b/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