ungrayscale if connected

packages/api/routes/line.ts

@@ -74,7 +74,7 @@ async function createLine(req: Request, res: Response) {
 
     const newLine = new Line(
       new ObjectId(userInfo.userId),
-      reqObj.lineName,
+      reqObj.lineName ?? undefined,
       new Date(),
       new Date(),
       new ObjectId()

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

@@ -1,6 +1,12 @@
 import { Avatar } from "antd";
 
-export default function LineIcon({ sourceImages }: { sourceImages: string[] }) {
+export default function LineIcon({
+  sourceImages,
+  grayscale = true,
+}: {
+  sourceImages: string[];
+  grayscale: boolean;
+}) {
   return (
     <Avatar.Group
       maxCount={2}
@@ -20,7 +26,7 @@ export default function LineIcon({ sourceImages }: { sourceImages: string[] }) {
           src={avatarSrc}
           shape="square"
           size={"default"}
-          className={"grayscale"}
+          className={`${grayscale && "grayscale"}`}
         />
       ))}
     </Avatar.Group>

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

@@ -142,7 +142,9 @@ export default function LineRow({
       {renderActivityIcon}
 
       <span className="flex flex-row gap-2 items-center justify-start text-slate-800">
-        {profilePictures && <LineIcon sourceImages={profilePictures} />}
+        {profilePictures && (
+          <LineIcon grayscale={!isUserTunedIn} sourceImages={profilePictures} />
+        )}
 
         <h2
           className={`text-inherit text-md truncate ${
@@ -151,7 +153,8 @@ export default function LineRow({
               : ""
           }`}
         >
-          {masterLineData.lineDetails.name}
+          {masterLineData.lineDetails.name ||
+            masterLineData.otherUserObjects[0].givenName}
         </h2>
       </span>