adding some overlay stuff but still need better ux

packages/desktop/src/components/header/index.tsx

@@ -84,7 +84,7 @@ export default function NirvanaHeader() {
       >
         <Logo type="small" />
 
-        <div className="mx-auto flex flex-row items-center space-x-2">
+        <div className="mx-auto flex flex-row items-center space-x-2 ml-2">
           <FaSearch className="text-xs text-gray-300" />
           <input
             placeholder="Type / to search"

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

@@ -0,0 +1,22 @@
+import { Avatar } from "antd";
+
+export default function LineIcon({ sourceImages }: { sourceImages: string[] }) {
+  return (
+    <Avatar.Group
+      maxCount={2}
+      maxPopoverTrigger="click"
+      size="default"
+      maxStyle={{
+        color: "#f56a00",
+        backgroundColor: "#fde3cf",
+        cursor: "pointer",
+        borderRadius: "0",
+      }}
+      className="shadow-lg"
+    >
+      {sourceImages?.map((avatarSrc) => (
+        <Avatar src={avatarSrc} shape="square" size={"default"} />
+      ))}
+    </Avatar.Group>
+  );
+}

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

@@ -3,6 +3,7 @@ import { useCallback, useMemo } from "react";
 import { Avatar } from "antd";
 import { FiSun } from "react-icons/fi";
 import { ILineDetails } from "../../../pages/router/index";
+import LineIcon from "../lineIcon";
 
 export default function LineRow({
   lineDetails,
@@ -87,22 +88,9 @@ export default function LineRow({
       {renderActivityIcon}
 
       <span className="flex flex-row gap-2 items-center justify-start text-slate-800">
-        <Avatar.Group
-          maxCount={2}
-          maxPopoverTrigger="click"
-          size="default"
-          maxStyle={{
-            color: "#f56a00",
-            backgroundColor: "#fde3cf",
-            cursor: "pointer",
-            borderRadius: "0",
-          }}
-          className="shadow-lg"
-        >
-          {lineDetails.profilePictures.map((avatarSrc) => (
-            <Avatar src={avatarSrc} shape="square" size={"default"} />
-          ))}
-        </Avatar.Group>
+        {lineDetails.profilePictures && (
+          <LineIcon sourceImages={lineDetails.profilePictures} />
+        )}
 
         <h2
           className={`text-inherit text-md truncate ${