sort of decent alignment going with multiple avatars and so everything in a row

packages/desktop/src/components/lines/lineIcon/index.tsx

@@ -1,34 +1,68 @@
 import { Avatar } from "antd";
+import React from "react";
+import { useMemo } from "react";
 
-export default function LineIcon({
+function LineIcon({
   sourceImages,
   grayscale = true,
 }: {
   sourceImages: string[];
   grayscale: boolean;
 }) {
+  const isMultiple = useMemo(() => {
+    if (sourceImages?.length > 1) return true;
+
+    return false;
+  }, [sourceImages]);
+
   return (
-    <Avatar.Group
+    <>
-      maxCount={2}
+      {isMultiple ? (
-      maxPopoverTrigger="click"
+        <div
-      size="default"
+          className={`relative ${
-      maxStyle={{
+            grayscale ? "grayscale" : ""
-        color: "#f56a00",
+          } h-[32px] w-[32px]`}
-        backgroundColor: "#fde3cf",
+        >
-        cursor: "pointer",
+          {sourceImages.map((avatarSrc, index) => {
-        borderRadius: "0",
+            if (index === 0) {
-      }}
+              return (
-      className="shadow-lg"
+                <Avatar
-    >
+                  key={`lineIcon-${avatarSrc}-${index}`}
-      {sourceImages?.map((avatarSrc, index) => (
+                  src={avatarSrc}
-        <Avatar
+                  shape="square"
-          key={`lineIcon-${avatarSrc}-${index}`}
+                  size={"small"}
-          src={avatarSrc}
+                  className={`absolute bottom-0 left-0`}
-          shape="square"
+                />
-          size={"default"}
+              );
-          className={`${grayscale && "grayscale"}`}
+            } else if (index === 1) {
-        />
+              return (
-      ))}
+                <Avatar
-    </Avatar.Group>
+                  key={`lineIcon-${avatarSrc}-${index}`}
+                  src={avatarSrc}
+                  shape="square"
+                  size={"small"}
+                  className={`absolute top-0 right-0`}
+                />
+              );
+            }
+
+            // TODO: add third in the frame if we want later
+            return <></>;
+          })}
+        </div>
+      ) : (
+        sourceImages?.map((avatarSrc, index) => (
+          <Avatar
+            key={`lineIcon-${avatarSrc}-${index}`}
+            src={avatarSrc}
+            shape="square"
+            size={"default"}
+            className={`${grayscale && "grayscale"}`}
+          />
+        ))
+      )}
+    </>
   );
 }
+
+export default React.memo(LineIcon);

packages/desktop/src/components/lines/lineRow.tsx/index.tsx

@@ -147,25 +147,20 @@ export default function LineRow({
         {/* status dot */}
         <div className="flex-shrink-0 h-4 w-4">{renderActivityIcon}</div>
 
-        <span className="flex flex-row gap-2 items-center justify-start text-slate-800">
+        {profilePictures && (
-          {profilePictures && (
+          <LineIcon grayscale={!isUserTunedIn} sourceImages={profilePictures} />
-            <LineIcon
+        )}
-              grayscale={!isUserTunedIn}
-              sourceImages={profilePictures}
-            />
-          )}
 
-          <h2
+        <h2
-            className={`text-inherit text-md max-w-[220px] truncate ${
+          className={`text-inherit text-md max-w-[220px] truncate text-slate-800 ${
-              masterLineData.currentUserMember.lastVisitDate
+            masterLineData.currentUserMember.lastVisitDate
-                ? "font-semibold"
+              ? "font-semibold"
-                : ""
+              : ""
-            }`}
+          }`}
-          >
+        >
-            {masterLineData.lineDetails.name ||
+          {masterLineData.lineDetails.name ||
-              masterLineData.otherUserObjects[0].givenName}
+            masterLineData.otherUserObjects[0].givenName}
-          </h2>
+        </h2>
-        </span>
 
         <div className="ml-auto flex-shrink-0">{renderRightActivity}</div>
       </div>