From bb5a14fff98dec807788ef5cadce85fe32b7a950 Mon Sep 17 00:00:00 2001
From: Arjun Patel <patel.arjun50@gmail.com>
Date: Sat, 5 Feb 2022 21:05:27 -0800
Subject: [PATCH] tlkdr placing

---
 .../components/MainTabsOrPages/ViewConvo.tsx  | 21 ++++++++++++++++---
 .../UserDetails/MasterAvatarGroup.tsx         |  9 +++++---
 2 files changed, 24 insertions(+), 6 deletions(-)

diff --git a/packages/web/components/MainTabsOrPages/ViewConvo.tsx b/packages/web/components/MainTabsOrPages/ViewConvo.tsx
index dbbac30..0169ef0 100644
--- a/packages/web/components/MainTabsOrPages/ViewConvo.tsx
+++ b/packages/web/components/MainTabsOrPages/ViewConvo.tsx
@@ -23,6 +23,7 @@ import { useRouter } from "next/router";
 import Conversation from "@nirvana/common/models/conversation";
 import { useAuth } from "../../contexts/authContext";
 import { QueryRoutes, Routes } from "@nirvana/common/helpers/routes";
+import { MasterAvatarGroupWithUserFetch } from "../UserDetails/MasterAvatarGroup";
 
 const testDrawerItems: {
   linkType: LinkType;
@@ -149,7 +150,7 @@ export default function ViewConvo(props: { conversationId: string }) {
             <span className="flex flex-col">
               <span className="flex flex-row items-center group">
                 <span
-                  className="text-md tracking-widest font-semibold 
+                  className="text-lg tracking-widest font-semibold 
           text-slate-500 uppercase"
                 >
                   {convo?.name}
@@ -159,8 +160,22 @@ export default function ViewConvo(props: { conversationId: string }) {
                 </span>
               </span>
 
-              <span className="text-xs text-slate-300 hover:decoration-slate-400 hover:underline hover:cursor-pointer">
-                {convo?.activeMembers.length} members
+              {convo?.tldr && (
+                <span className="max-w-md text-lg text-teal-800 mb-2">
+                  tldr: {convo?.tldr}
+                </span>
+              )}
+
+              <span className="flex flex-row items-center space-x-2 hover:cursor-pointer group">
+                <MasterAvatarGroupWithUserFetch
+                  listOfUserIds={convo?.activeMembers}
+                  showCurrUser={true}
+                  maxUserCount={10}
+                  size={UserAvatarSizes.small}
+                />
+                <span className="text-xs text-slate-300 hover:decoration-slate-400 group-hover:underline ">
+                  {convo?.activeMembers.length} members
+                </span>
               </span>
             </span>
 
diff --git a/packages/web/components/UserDetails/MasterAvatarGroup.tsx b/packages/web/components/UserDetails/MasterAvatarGroup.tsx
index 8eef53f..a3a13e7 100644
--- a/packages/web/components/UserDetails/MasterAvatarGroup.tsx
+++ b/packages/web/components/UserDetails/MasterAvatarGroup.tsx
@@ -4,12 +4,15 @@ import { useRecoilValue, useRecoilState } from "recoil";
 import { allRelevantContactsAtom } from "../../recoil/main";
 import { userService } from "@nirvana/common/services";
 import { Avatar } from "antd";
+import { UserAvatarSizes } from "./UserAvatar";
 
 const AVATAR_SHAPE = "circle";
 
 export default function MasterAvatarGroup(props: {
   listOfUsers: User[];
   showCurrUser?: boolean;
+  size?: UserAvatarSizes;
+  maxUserCount?: number;
 }) {
   const { currUser } = useAuth();
 
@@ -66,8 +69,8 @@ export default function MasterAvatarGroup(props: {
 
   return (
     <Avatar.Group
-      maxCount={2}
-      size="default"
+      maxCount={props.maxUserCount || 2}
+      size={props.size || "default"}
       maxStyle={{
         color: "rgb(148 163 184)",
         fontSize: "10px",
@@ -79,7 +82,7 @@ export default function MasterAvatarGroup(props: {
           key={oUser.id}
           src={oUser.avatarUrl}
           shape={AVATAR_SHAPE}
-          size={"default"}
+          size={props.size || "default"}
         />
       ))}
     </Avatar.Group>