Whiteboard: Follow other users

Description

Problem

When one person is presenting on whiteboard, it is hard to follow the presentation since I can't follow presenters cursor.

Solution:

Add Follow User action in Whiteboard

The Follow User feature enables users to visually follow another user’s actions in real-time on the whiteboard. This ensures better collaboration, especially during presentations or team discussions.

Follow flow

Entering Follow Mode
- Click on the user’s avatar in the menu bar to automatically follow them or select user from the list (follow button near the name of the user)
- When a user follows another, their view of the whiteboard synchronizes with the followed user’s actions (e.g., panning, zooming, object interactions)
- If a user has collaborative cursors disabled we do not display the cursor of the followed user
During Follow Mode
- We will display a border around follower canvas with the color of the followed user avatar, name and Stop button on top of the screen
Exiting Follow Mode
- To stop following the user, click Stop at the top of your canvas
- If a user moves the canvas, or just zoom in/out the board we automatically stop following
Multi-User Following
- Allow following of multiple users, with toggles to switch between their views
🦄 Followed User Leaves
- Automatically stop following and notify the follower (“[User] has left the whiteboard”)
🦄🦄 Notification
- Notify the followed user that someone has started following them (show notification toast)
🦄🦄 Permissions
- Option for users to disable being followed (privacy settings)
🦄🦄🦄 "Follow me" or "Spotlight me"
- [tbd]

Avatar and User list components update

We’re adding a colored border (based on user color) around the followed user’s avatar to synchronize it with their cursor and follow notifications (border around the follower canvas)
Clicking on the avatar automatically enables following the user, while a second click disables it. We will add the additional text to the tooltip: "Click to follow/unfollow"
When following a user, we place their avatar in the first position on the left (If a user chooses someone to follow from the user list, we should also place that avatar in the first position on the left in the toolbar)
Adding actions "View profile" "Follow" to the user list

🦄 Users list

Figma mocks

https://www.figma.com/design/wZlrqQ7MNLP4vvWWecXM3I/PA---Whiteboard?node-id=111-27081&t=Su1hSPdTpDNKqQij-1