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

packages/excalidraw/actions/actionNavigate.tsx

@@ -8,7 +8,10 @@ export const actionGoToCollaborator = register({
   viewMode: true,
   trackEvent: { category: "collab" },
   perform: (_elements, appState, collaborator: Collaborator) => {
-    if (appState.userToFollow?.socketId === collaborator.socketId) {
+    if (
+      appState.userToFollow?.socketId === collaborator.socketId ||
+      collaborator.isCurrentUser
+    ) {
       return {
         appState: {
           ...appState,
@@ -51,6 +54,7 @@ export const actionGoToCollaborator = register({
           name={collaborator.username || ""}
           src={collaborator.avatarUrl}
           isBeingFollowed={appState.userToFollow?.socketId === clientId}
+          isCurrentUser={collaborator.isCurrentUser === true}
         />
         {collaborator.username}
       </div>
@@ -63,6 +67,7 @@ export const actionGoToCollaborator = register({
         name={collaborator.username || ""}
         src={collaborator.avatarUrl}
         isBeingFollowed={appState.userToFollow?.socketId === clientId}
+        isCurrentUser={collaborator.isCurrentUser === true}
       />
     );
   },

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("");

packages/excalidraw/css/variables.module.scss

@@ -150,6 +150,9 @@
   &--is-followed::before {
     border-color: var(--color-primary-hover);
   }
+  &--is-current-user {
+    cursor: auto;
+  }
 }
 
 @mixin filledButtonOnCanvas {

packages/excalidraw/types.ts

@@ -59,6 +59,7 @@ export type Collaborator = Readonly<{
   // user id. If supplied, we'll filter out duplicates when rendering user avatars.
   id?: string;
   socketId?: SocketId;
+  isCurrentUser?: boolean;
 }>;
 
 export type CollaboratorPointer = {