Wired up follow styling with business logic.

src/actions/actionNavigate.tsx

@@ -16,7 +16,7 @@ export const actionGoToCollaborator = register({
       return { appState, commitToHistory: false };
     }
 
-    if (appState.userToFollow === _value.clientId) {
+    if (appState.userToFollow?.clientId === _value.clientId) {
       return {
         appState: {
           ...appState,
@@ -29,9 +29,10 @@ export const actionGoToCollaborator = register({
     return {
       appState: {
         ...appState,
-        // TODO follow-participant
-        // maybe store more data other than just the clientId
-        userToFollow: _value.clientId,
+        userToFollow: {
+          clientId: _value.clientId,
+          username: _value.username || "",
+        },
         ...centerScrollOn({
           scenePoint: point,
           viewportDimensions: {
@@ -57,7 +58,7 @@ export const actionGoToCollaborator = register({
         onClick={() => updateData({ ...collaborator, clientId })}
         name={collaborator.username || ""}
         src={collaborator.avatarUrl}
-        isBeingFollowed={appState.userToFollow === clientId}
+        isBeingFollowed={appState.userToFollow?.clientId === clientId}
       />
     );
   },

src/components/App.tsx

@@ -548,9 +548,19 @@ class App extends React.Component<AppProps, AppState> {
     } = this.state;
     const canvasWidth = canvasDOMWidth * canvasScale;
     const canvasHeight = canvasDOMHeight * canvasScale;
+
+    const userToFollow = this.state.userToFollow;
+
     if (viewModeEnabled) {
       return (
-        <FollowMode width={canvasDOMWidth} height={canvasDOMHeight}>
+        <FollowMode
+          width={canvasDOMWidth}
+          height={canvasDOMHeight}
+          userToFollow={userToFollow}
+          onDisconnect={() => {
+            this.setState({ userToFollow: null });
+          }}
+        >
           <canvas
             className="excalidraw__canvas"
             style={{
@@ -576,7 +586,14 @@ class App extends React.Component<AppProps, AppState> {
       );
     }
     return (
-      <FollowMode width={canvasDOMWidth} height={canvasDOMHeight}>
+      <FollowMode
+        width={canvasDOMWidth}
+        height={canvasDOMHeight}
+        userToFollow={userToFollow}
+        onDisconnect={() => {
+          this.setState({ userToFollow: null });
+        }}
+      >
         <canvas
           className="excalidraw__canvas"
           style={{

src/components/FollowMode/FollowMode.scss

@@ -20,6 +20,19 @@
       display: flex;
       gap: 0.5rem;
       align-items: center;
+
+      &__label {
+        display: flex;
+        white-space: pre-wrap;
+      }
+
+      &__username {
+        display: block;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        max-width: 100px;
+      }
     }
 
     &__disconnect-btn {

src/components/FollowMode/FollowMode.tsx

@@ -1,3 +1,4 @@
+import { UserToFollow } from "../../types";
 import { CloseIcon } from "../icons";
 import "./FollowMode.scss";
 
@@ -5,15 +6,40 @@ interface FollowModeProps {
   width: number;
   height: number;
   children: React.ReactNode;
+  userToFollow?: UserToFollow | null;
+  onDisconnect: () => void;
 }
 
-const FollowMode = ({ children, height, width }: FollowModeProps) => {
+const FollowMode = ({
+  children,
+  height,
+  width,
+  userToFollow,
+  onDisconnect,
+}: FollowModeProps) => {
+  if (!userToFollow) {
+    return <>{children}</>;
+  }
+
   return (
     <div style={{ position: "relative" }}>
       <div className="follow-mode" style={{ width, height }}>
         <div className="follow-mode__badge">
-          <span>Following Handsome Swan</span>
-          <button className="follow-mode__disconnect-btn">{CloseIcon}</button>
+          <div className="follow-mode__badge__label">
+            Following{" "}
+            <span
+              className="follow-mode__badge__username"
+              title={userToFollow.username}
+            >
+              {userToFollow.username}
+            </span>
+          </div>
+          <button
+            onClick={onDisconnect}
+            className="follow-mode__disconnect-btn"
+          >
+            {CloseIcon}
+          </button>
         </div>
       </div>
       {children}

src/excalidraw-app/collab/Collab.tsx

@@ -543,7 +543,7 @@ class Collab extends PureComponent<Props, CollabState> {
               decryptedData.payload.socketId;
 
             const _appState = this.excalidrawAPI.getAppState();
-            if (_appState.userToFollow === socketId) {
+            if (_appState.userToFollow?.clientId === socketId) {
               const { appState } = zoomToFitBounds({
                 appState: _appState,
                 bounds,

src/types.ts

@@ -98,6 +98,8 @@ export type LastActiveTool =
 export type SidebarName = string;
 export type SidebarTabName = string;
 
+export type UserToFollow = { clientId: string; username: string };
+
 export type AppState = {
   contextMenu: {
     items: ContextMenuItems;
@@ -224,7 +226,7 @@ export type AppState = {
   showHyperlinkPopup: false | "info" | "editor";
   selectedLinearElement: LinearElementEditor | null;
   /** the user's clientId who is being followed on the canvas */
-  userToFollow: string | null;
+  userToFollow: UserToFollow | null;
   /** whether follow mode should be disconnected when the non-remote user interacts with the canvas */
   shouldDisconnectFollowModeOnCanvasInteraction: boolean;
 };