Add user list component + snap to user functionality (#1749)

src/actions/actionNavigate.tsx

@@ -0,0 +1,52 @@
+import React from "react";
+import { Avatar } from "../components/Avatar";
+import { register } from "./register";
+import { getClientColors, getClientInitials } from "../clients";
+import { Collaborator } from "../types";
+import { normalizeScroll } from "../scene";
+
+export const actionGoToCollaborator = register({
+  name: "goToCollaborator",
+  perform: (_elements, appState, value) => {
+    const point = value as Collaborator["pointer"];
+    if (!point) {
+      return { appState, commitToHistory: false };
+    }
+
+    return {
+      appState: {
+        ...appState,
+        scrollX: normalizeScroll(window.innerWidth / 2 - point.x),
+        scrollY: normalizeScroll(window.innerHeight / 2 - point.y),
+        // Close mobile menu
+        openMenu: appState.openMenu === "canvas" ? null : appState.openMenu,
+      },
+      commitToHistory: false,
+    };
+  },
+  PanelComponent: ({ appState, updateData, id }) => {
+    const clientId = id;
+
+    if (!clientId) {
+      return null;
+    }
+
+    const collaborator = appState.collaborators.get(clientId);
+
+    if (!collaborator) {
+      return null;
+    }
+
+    const { background } = getClientColors(clientId);
+    const shortName = getClientInitials(collaborator.username);
+
+    return (
+      <Avatar
+        color={background}
+        onClick={() => updateData(collaborator.pointer)}
+      >
+        {shortName}
+      </Avatar>
+    );
+  },
+});