build: decouple package deps and introduce yarn workspaces (#7415)

* feat: decouple package deps and introduce yarn workspaces * update root directory * fix * fix scripts * fix lint * update path in scripts * remove yarn.lock files from packages * ignore workspace * dummy * dummy * remove comment check * revert workflow changes * ignore ws when installing gh actions * remove log * update path * fix * fix typo
2023-12-12 11:32:51 +05:30
parent b7d7ccc929
commit d6cd8b78f1
567 changed files with 5066 additions and 8648 deletions
@@ -0,0 +1,52 @@
+import "./UserList.scss";
+
+import React from "react";
+import clsx from "clsx";
+import { AppState, Collaborator } from "../types";
+import { Tooltip } from "./Tooltip";
+import { useExcalidrawActionManager } from "./App";
+
+export const UserList: React.FC<{
+  className?: string;
+  mobile?: boolean;
+  collaborators: AppState["collaborators"];
+}> = ({ className, mobile, collaborators }) => {
+  const actionManager = useExcalidrawActionManager();
+
+  const uniqueCollaborators = new Map<string, Collaborator>();
+  collaborators.forEach((collaborator, socketId) => {
+    uniqueCollaborators.set(
+      // filter on user id, else fall back on unique socketId
+      collaborator.id || socketId,
+      collaborator,
+    );
+  });
+
+  const avatars =
+    uniqueCollaborators.size > 0 &&
+    Array.from(uniqueCollaborators)
+      .filter(([_, client]) => Object.keys(client).length !== 0)
+      .map(([clientId, collaborator]) => {
+        const avatarJSX = actionManager.renderAction("goToCollaborator", [
+          clientId,
+          collaborator,
+        ]);
+
+        return mobile ? (
+          <Tooltip
+            label={collaborator.username || "Unknown user"}
+            key={clientId}
+          >
+            {avatarJSX}
+          </Tooltip>
+        ) : (
+          <React.Fragment key={clientId}>{avatarJSX}</React.Fragment>
+        );
+      });
+
+  return (
+    <div className={clsx("UserList", className, { UserList_mobile: mobile })}>
+      {avatars}
+    </div>
+  );
+};