tlkdr placing

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>
 

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>