feat: Added ability to click another user to observe them (sync scroll position) (#2858)

* feat: Added ability to click another user to observe them, mainly for fun

* language, lower debounce, prevent tooltip from hiding when toggling observation

* fix: Don't allow observing self, added banner at top of screen

* Dont edit tooltip as it's confusing between our actions and theirs

* snapshots

app/components/Collaborators.tsx

@@ -11,6 +11,7 @@ import DocumentViews from "~/components/DocumentViews";
 import Facepile from "~/components/Facepile";
 import NudeButton from "~/components/NudeButton";
 import Popover from "~/components/Popover";
+import useCurrentTeam from "~/hooks/useCurrentTeam";
 import useCurrentUser from "~/hooks/useCurrentUser";
 import useStores from "~/hooks/useStores";
 
@@ -21,9 +22,10 @@ type Props = {
 function Collaborators(props: Props) {
   const { t } = useTranslation();
   const user = useCurrentUser();
+  const team = useCurrentTeam();
   const currentUserId = user?.id;
   const [requestedUserIds, setRequestedUserIds] = React.useState<string[]>([]);
-  const { users, presence } = useStores();
+  const { users, presence, ui } = useStores();
   const { document } = props;
   const documentPresence = presence.get(document.id);
   const documentPresenceArray = documentPresence
@@ -78,17 +80,35 @@ function Collaborators(props: Props) {
           <NudeButton width={collaborators.length * 32} height={32} {...props}>
             <FacepileHiddenOnMobile
               users={collaborators}
-              renderAvatar={(user) => {
-                const isPresent = presentIds.includes(user.id);
-                const isEditing = editingIds.includes(user.id);
+              renderAvatar={(collaborator) => {
+                const isPresent = presentIds.includes(collaborator.id);
+                const isEditing = editingIds.includes(collaborator.id);
+                const isObserving = ui.observingUserId === collaborator.id;
+                const isObservable =
+                  team.collaborativeEditing && collaborator.id !== user.id;
+
                 return (
                   <AvatarWithPresence
-                    key={user.id}
-                    user={user}
+                    key={collaborator.id}
+                    user={collaborator}
                     isPresent={isPresent}
                     isEditing={isEditing}
-                    isCurrentUser={currentUserId === user.id}
+                    isObserving={isObserving}
+                    isCurrentUser={currentUserId === collaborator.id}
                     profileOnClick={false}
+                    onClick={
+                      isObservable
+                        ? (ev) => {
+                            if (isPresent) {
+                              ev.preventDefault();
+                              ev.stopPropagation();
+                              ui.setObservingUser(
+                                isObserving ? undefined : collaborator.id
+                              );
+                            }
+                          }
+                        : undefined
+                    }
                   />
                 );
               }}