feat: bump socket.io-client & collab tweaks (#7444)

packages/excalidraw/components/Avatar.tsx

@@ -10,6 +10,7 @@ type AvatarProps = {
   name: string;
   src?: string;
   isBeingFollowed?: boolean;
+  isCurrentUser: boolean;
 };
 
 export const Avatar = ({
@@ -18,6 +19,7 @@ export const Avatar = ({
   name,
   src,
   isBeingFollowed,
+  isCurrentUser,
 }: AvatarProps) => {
   const shortName = getNameInitial(name);
   const [error, setError] = useState(false);
@@ -25,7 +27,10 @@ export const Avatar = ({
   const style = loadImg ? undefined : { background: color };
   return (
     <div
-      className={clsx("Avatar", { "Avatar--is-followed": isBeingFollowed })}
+      className={clsx("Avatar", {
+        "Avatar--is-followed": isBeingFollowed,
+        "Avatar--is-current-user": isCurrentUser,
+      })}
       style={style}
       onClick={onClick}
     >

packages/excalidraw/components/LayerUI.tsx

@@ -338,7 +338,9 @@ const LayerUI = ({
               },
             )}
           >
-            <UserList collaborators={appState.collaborators} />
+            {appState.collaborators.size > 0 && (
+              <UserList collaborators={appState.collaborators} />
+            )}
             {renderTopRightUI?.(device.editor.isMobile, appState)}
             {!appState.viewModeEnabled &&
               // hide button when sidebar docked

packages/excalidraw/components/UserList.tsx

@@ -100,7 +100,7 @@ export const UserList = React.memo(
 
     // const uniqueCollaboratorsMap = sampleCollaborators;
     const uniqueCollaboratorsArray = Array.from(uniqueCollaboratorsMap).filter(
-      ([_, collaborator]) => Object.keys(collaborator).length !== 1,
+      ([_, collaborator]) => collaborator.username?.trim(),
     );
 
     const [searchTerm, setSearchTerm] = React.useState("");