feat: Implement collaboration features including user following and avatar management

app/src/components/layout/sidebarRight/Header.tsx

@@ -2,9 +2,9 @@ import React, { useEffect, useState } from "react";
 import { AppDockIcon } from "../../icons/HeaderIcons";
 import orgImg from "../../../assets/orgTemp.png";
 import { useActiveUsers } from "../../../store/store";
-import { getAvatarColor } from "../../../functions/users/functions/getAvatarColor";
 import { ActiveUser } from "../../../types/users";
 import CollaborationPopup from "../../templates/CollaborationPopup";
+import { getAvatarColor } from "../../../modules/collaboration/functions/getAvatarColor";
 
 const Header: React.FC = () => {
   const { activeUsers } = useActiveUsers();

app/src/components/layout/sidebarRight/SideBarRight.tsx

@@ -49,6 +49,9 @@ const SideBarRight: React.FC = () => {
         setSubModule("simulations");
       }
     }
+    if (activeModule !== "simulation") {
+      setSubModule("properties");
+    }
   }, [activeModule, selectedEventData, selectedEventSphere, setSubModule]);
 
   return (

app/src/components/layout/sidebarRight/properties/GlobalProperties.tsx

@@ -282,8 +282,7 @@ const GlobalProperties: React.FC = () => {
         key={"6"}
       />
 
-      <div className="split"></div>
-
+      {/* <div className="split"></div>
       <InputToggle
         inputKey="6"
         label="Display Grid"
@@ -301,7 +300,7 @@ const GlobalProperties: React.FC = () => {
         max={5}
         onChange={(value: number) => updateGridDistance(value)}
         onPointerUp={updatedGrid}
-      />
+      /> */}
     </div>
   );
 };

app/src/components/templates/FollowPerson.tsx

@@ -0,0 +1,29 @@
+import React from "react";
+import RenderOverlay from "./Overlay";
+import { useSelectedUserStore } from "../../store/useCollabStore";
+import { useCamMode } from "../../store/store";
+
+const FollowPerson: React.FC = () => {
+  // Get the selected user from the store
+  const { selectedUser, clearSelectedUser } = useSelectedUserStore();
+  const { setCamMode } = useCamMode();
+  return (
+    <RenderOverlay>
+      {selectedUser && (
+        // eslint-disable-next-line
+        <div
+          className="follow-person-container"
+          onClick={() => {
+            clearSelectedUser();
+            setCamMode("FirstPerson");
+          }}
+          style={{ "--user-color": selectedUser.color } as React.CSSProperties}
+        >
+          <div className="follower-name">{selectedUser.name}</div>
+        </div>
+      )}
+    </RenderOverlay>
+  );
+};
+
+export default FollowPerson;