adds online people number indicator

src/components/3D/ChangeColor.jsx

@@ -5,11 +5,13 @@
 import React, { useDeferredValue, useEffect, useRef } from "react";
 import { useStore } from "../../store";
 
-export const ChangeColor = ({ color, setBricks }) => {
+export const ChangeColor = ({ color }) => {
   const selected = useStore((state) => state.selectedBricks).map(
     (sel) => sel.userData.uID
   );
 
+  const setBricks = useStore((state) => state.setBricks);
+
   const prevColor = useRef(color);
 
   const deferredColor = useDeferredValue(color);
@@ -17,8 +19,10 @@ export const ChangeColor = ({ color, setBricks }) => {
   useEffect(() => {
     if (selected.length < 1 || prevColor.current === deferredColor) return;
 
-    setBricks((bricks) =>
-      bricks.map((brick) => {
+    setBricks((bricks) => {
+      const updatedBricks = [];
+
+      bricks.forEach((brick) => {
         const selectedClone = [...selected];
         const uID = brick.uID;
         for (let i = 0; i < selectedClone.length; i++) {
@@ -28,14 +32,16 @@ export const ChangeColor = ({ color, setBricks }) => {
             selectedClone.splice(i, 1);
           }
         }
-        return brick;
-      })
-    );
+        updatedBricks.push(brick);
+      });
+
+      return updatedBricks;
+    });
 
     return () => {
       prevColor.current = deferredColor;
     };
-  }, [deferredColor, selected]);
+  }, [deferredColor, selected, setBricks]);
 
-  return <></>;
+  return null;
 };

src/components/UI/PeopleList/index.jsx

@@ -1,3 +1,4 @@
+/* eslint-disable no-unused-vars */
 /* eslint-disable react/prop-types */
 import "./style.css";
 import * as Popover from "@radix-ui/react-popover";
@@ -20,31 +21,14 @@ const s = {
   alignItems: "center",
 };
 
-const PeopleList = () => {
-  const others = useStore((state) => state.liveblocks.others);
-
-  const NoOfPeoples = others.length;
-
+const PeopleList = ({ NoOfPeoples, children }) => {
   return (
     <ScrollArea.Root className="PeopleList ScrollAreaRoot">
       <ScrollArea.Viewport
         className="ScrollAreaViewport"
         style={NoOfPeoples < 1 ? s : {}}
       >
-        {NoOfPeoples < 1 && (
-          <h3 style={{ textAlign: "center", padding: "6px", fontSize: "14px" }}>
-            No one else in room
-          </h3>
-        )}
-        {others.map((user) => {
-          return user.presence?.self ? (
-            <Person
-              key={user.presence.self.id}
-              color={user.presence.self.color}
-              name={user.presence.self.name}
-            />
-          ) : null;
-        })}
+        {children}
       </ScrollArea.Viewport>
       <ScrollArea.Scrollbar
         className="ScrollAreaScrollbar"
@@ -63,21 +47,51 @@ const PeopleList = () => {
   );
 };
 
-export const PopoverPeopleList = () => (
+export const PopoverPeopleList = () => {
+  const others = useStore((state) => state.liveblocks.others);
+
+  const NoOfPeoples = others.length;
+
+  return (
     <Popover.Root>
       <Popover.Trigger asChild>
-      <button className="Button violet" aria-label="Connected People List">
+        <button
+          style={{ position: "relative" }}
+          className="Button violet"
+          aria-label="Connected People List"
+        >
           <PersonIcon className="Icon" color="black" />
+          <div className="NoOfOthers">
+            <p>{NoOfPeoples}</p>
+          </div>
         </button>
       </Popover.Trigger>
       <Popover.Portal>
         <Popover.Content className="PopoverContent" sideOffset={5}>
-        <PeopleList />
-        {/* <Popover.Close className="PopoverClose" aria-label="Close">
-          <Cross2Icon />
-        </Popover.Close> */}
-        {/* <Popover.Arrow className="PopoverArrow" /> */}
+          <PeopleList NoOfPeoples={NoOfPeoples}>
+            {NoOfPeoples < 1 && (
+              <h3
+                style={{
+                  textAlign: "center",
+                  padding: "6px",
+                  fontSize: "14px",
+                }}
+              >
+                No one else in room
+              </h3>
+            )}
+            {others.map((user) => {
+              return user.presence?.self ? (
+                <Person
+                  key={user.presence.self.id}
+                  color={user.presence.self.color}
+                  name={user.presence.self.name}
+                />
+              ) : null;
+            })}
+          </PeopleList>
         </Popover.Content>
       </Popover.Portal>
     </Popover.Root>
-);
+  );
+};

src/components/UI/PeopleList/style.css

@@ -102,3 +102,20 @@
   background-color: white;
   border-radius: 4px;
 }
+
+.NoOfOthers {
+  position: absolute;
+  color: black;
+  background-color: var(--violet-5);
+  width: 15px;
+  height: 15px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 50%;
+  right: 15px;
+  bottom: 4px;
+  border: 1px solid black;
+  font-size: 10px;
+  /* padding: 4px; */
+}