From 5a8b314923a814fab9de28d08ae6ec2feb70360a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jesus=20Manuel=20Pi=C3=B1eiro=20Cid?= <jesusmpc@inditex.com>
Date: Tue, 11 Mar 2025 17:10:37 +0100
Subject: [PATCH 1/2] chore: initial commit


From f89d032e18ceb5f913143354262aefb1bc3993eb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jesus=20Manuel=20Pi=C3=B1eiro=20Cid?= <jesusmpc@inditex.com>
Date: Tue, 11 Mar 2025 18:14:53 +0100
Subject: [PATCH 2/2] chore: fix lint issues

---
 .../room-components/connected-users.tsx       | 130 ++++++++++++++++--
 .../overlay/multiuse-overlay.tsx              |   2 +-
 .../overlay/room-information-overlay.tsx      |   3 +
 .../overlay/room-status-overlay.tsx           |  13 +-
 .../toolbar/toolbar-button.tsx                |  24 +++-
 code/package-lock.json                        |   6 +
 code/package.json                             |   1 +
 7 files changed, 155 insertions(+), 24 deletions(-)

diff --git a/code/components/room-components/connected-users.tsx b/code/components/room-components/connected-users.tsx
index ca0e660..6c76cf2 100644
--- a/code/components/room-components/connected-users.tsx
+++ b/code/components/room-components/connected-users.tsx
@@ -1,29 +1,135 @@
 "use client";
 
 import React from "react";
-import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
+import Avatar from "boring-avatars";
+import { Avatar as AvatarUI, AvatarFallback } from "@/components/ui/avatar";
 import { WeaveConnectedUsersChanged } from "@inditextech/weavejs-sdk";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { useCollaborationRoom } from "@/store/store";
+import { Users } from "lucide-react";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
 
 type ConnectionStatusProps = {
   connectedUsers: WeaveConnectedUsersChanged;
 };
 
-export const ConnectedUsers = ({ connectedUsers }: Readonly<ConnectionStatusProps>) => {
+export const ConnectedUsers = ({
+  connectedUsers,
+}: Readonly<ConnectionStatusProps>) => {
+  const user = useCollaborationRoom((state) => state.user);
+
+  const connectedUserKey = React.useMemo(() => {
+    const filterOwnUser = Object.keys(connectedUsers).filter(
+      (actUser) => actUser === user?.name
+    );
+    return filterOwnUser?.[0];
+  }, [user, connectedUsers]);
+
+  const { showUsers, restUsers } = React.useMemo(() => {
+    const filterOwnUser = Object.keys(connectedUsers).filter(
+      (actUser) => actUser !== user?.name
+    );
+    return {
+      showUsers: filterOwnUser.slice(0, 6),
+      restUsers: filterOwnUser.slice(6),
+    };
+  }, [user, connectedUsers]);
+
   if (Object.keys(connectedUsers).length === 0) {
     return null;
   }
 
   return (
-    <div className="pointer-events-none flex gap-5 justify-start items-center">
-      {Object.keys(connectedUsers).map((user) => {
-        const userInfo = connectedUsers[user];
-        return (
-          <Avatar key={user} className="w-[32px] h-[32px]">
-            <AvatarImage src="https://github.com/shadcn.png" />
-            <AvatarFallback>{userInfo.name.slice(0, 2)}</AvatarFallback>
-          </Avatar>
-        );
-      })}
+    <div className="w-full min-h-[40px] flex gap-1 justify-start items-center">
+      <TooltipProvider delayDuration={300}>
+        {connectedUserKey && (
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <button className="cursor-pointer">
+                <AvatarUI className="w-[32px] h-[32px]">
+                  <AvatarFallback>
+                    <Avatar name={user?.name} variant="beam" />
+                  </AvatarFallback>
+                </AvatarUI>
+              </button>
+            </TooltipTrigger>
+            <TooltipContent side="bottom">
+              <p className="font-noto-sans-mono text-sm">{user?.name}</p>
+            </TooltipContent>
+          </Tooltip>
+        )}
+        {/* <div className="w-[1px] h-[20px] bg-zinc-200"></div> */}
+        {showUsers.map((user) => {
+          const userInfo = connectedUsers[user];
+          return (
+            <Tooltip key={user}>
+              <TooltipTrigger asChild>
+                <button className="cursor-pointer">
+                  <AvatarUI className="w-[32px] h-[32px]">
+                    <AvatarFallback>
+                      <Avatar name={userInfo?.name} variant="beam" />
+                    </AvatarFallback>
+                  </AvatarUI>
+                </button>
+              </TooltipTrigger>
+              <TooltipContent side="bottom">
+                <p className="font-noto-sans-mono text-sm">{userInfo.name}</p>
+              </TooltipContent>
+            </Tooltip>
+          );
+        })}
+        {restUsers.length > 0 && (
+          <>
+            <div className="w-[1px] mx-1 h-[20px] bg-zinc-200"></div>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <DropdownMenu>
+                  <DropdownMenuTrigger className="rounded-none cursor-pointer p-2 hover:bg-zinc-200 focus:outline-none">
+                    <Users className="rounded-none" />
+                  </DropdownMenuTrigger>
+                  <DropdownMenuContent
+                    align="end"
+                    side="bottom"
+                    alignOffset={-6}
+                    sideOffset={8}
+                    className="font-noto-sans-mono rounded-none"
+                  >
+                    {restUsers.map((user) => {
+                      const userInfo = connectedUsers[user];
+                      return (
+                        <DropdownMenuItem
+                          key={user}
+                          className="text-foreground focus:bg-white hover:rounded-none"
+                        >
+                          <AvatarUI className="w-[32px] h-[32px]">
+                            <AvatarFallback>
+                              <Avatar name={userInfo?.name} variant="beam" />
+                            </AvatarFallback>
+                          </AvatarUI>
+                          {userInfo?.name}
+                        </DropdownMenuItem>
+                      );
+                    })}
+                  </DropdownMenuContent>
+                </DropdownMenu>
+              </TooltipTrigger>
+              <TooltipContent side="bottom">
+                <p className="font-noto-sans-mono text-sm">More users</p>
+              </TooltipContent>
+            </Tooltip>
+          </>
+        )}
+      </TooltipProvider>
     </div>
   );
 };
diff --git a/code/components/room-components/overlay/multiuse-overlay.tsx b/code/components/room-components/overlay/multiuse-overlay.tsx
index d92dc7d..f613e0b 100644
--- a/code/components/room-components/overlay/multiuse-overlay.tsx
+++ b/code/components/room-components/overlay/multiuse-overlay.tsx
@@ -65,7 +65,7 @@ export function MultiuseOverlay() {
   return (
     <div
       className={
-        "pointer-events-none absolute top-[calc(50px+8px+4px)] right-2 bottom-[calc(50px+8px+4px)] flex flex-col gap-5 justify-center items-center"
+        "pointer-events-none absolute top-[calc(99px+12px)] right-2 bottom-[calc(50px+8px+4px)] flex flex-col gap-5 justify-center items-center"
       }
     >
       <div className="w-[320px] p-0 h-full bg-white border border-light-border-3 shadow-xs flex justify-start items-center gap-3 overflow-hidden">
diff --git a/code/components/room-components/overlay/room-information-overlay.tsx b/code/components/room-components/overlay/room-information-overlay.tsx
index d8e124f..27fecf1 100644
--- a/code/components/room-components/overlay/room-information-overlay.tsx
+++ b/code/components/room-components/overlay/room-information-overlay.tsx
@@ -15,11 +15,13 @@ import {
 import { Logo } from "@/components/utils/logo";
 import { Image as ImageIcon, FileText, Ellipsis, LogOut } from "lucide-react";
 import { WeaveExportStageActionParams } from "@inditextech/weavejs-sdk";
+import { ConnectionStatus } from "../connection-status";
 
 export function RoomInformationOverlay() {
   const router = useRouter();
 
   const instance = useWeave((state) => state.instance);
+  const weaveConnectionStatus = useWeave((state) => state.connection.status);
 
   const room = useCollaborationRoom((state) => state.room);
 
@@ -54,6 +56,7 @@ export function RoomInformationOverlay() {
       <div className="p-1 pl-3 bg-white border border-zinc-200 shadow-xs flex justify-start items-center gap-2">
         <Logo kind="small" />
         <div className="w-[1px] h-4 mx-2 bg-zinc-200"></div>
+        <ConnectionStatus weaveConnectionStatus={weaveConnectionStatus} />
         <div className="flex justify-start items-center font-noto-sans-mono text-foreground !normal-case min-h-[32px] pr-2">
           {room}
         </div>
diff --git a/code/components/room-components/overlay/room-status-overlay.tsx b/code/components/room-components/overlay/room-status-overlay.tsx
index e303942..9588be3 100644
--- a/code/components/room-components/overlay/room-status-overlay.tsx
+++ b/code/components/room-components/overlay/room-status-overlay.tsx
@@ -2,19 +2,22 @@
 
 import React from "react";
 import { ConnectedUsers } from "./../connected-users";
-import { ConnectionStatus } from "./../connection-status";
 import { useWeave } from "@inditextech/weavejs-react";
 
 export function RoomStatusOverlay() {
-  const weaveConnectionStatus = useWeave((state) => state.connection.status);
   const connectedUsers = useWeave((state) => state.users);
 
   return (
     <div className="absolute top-2 right-2 flex flex-col gap-1 justify-center items-center">
-      <div className="w-[320px] p-2 bg-white border border-zinc-200 shadow-xs flex flex-col justify-start items-center">
-        <div className="w-full flex justify-between items-center gap-4">
+      <div className="w-[320px] min-h-[50px] p-2 bg-white border border-zinc-200 shadow-xs flex flex-col justify-start items-center">
+        <div className="w-full min-h-[40px] h-full flex flex-col justify-between items-center gap-2">
           <ConnectedUsers connectedUsers={connectedUsers} />
-          <ConnectionStatus weaveConnectionStatus={weaveConnectionStatus} />
+          <div className="w-full flex justify-center gap-2 items-center text-center font-noto-sans-mono text-xs border-t border-zinc-200 pt-1">
+            <div className="px-2 mt-1 py-1 bg-accent">
+              {Object.keys(connectedUsers).length}
+            </div>
+            <div>user(s) connected</div>
+          </div>
         </div>
       </div>
     </div>
diff --git a/code/components/room-components/toolbar/toolbar-button.tsx b/code/components/room-components/toolbar/toolbar-button.tsx
index 9f00cad..14bf63f 100644
--- a/code/components/room-components/toolbar/toolbar-button.tsx
+++ b/code/components/room-components/toolbar/toolbar-button.tsx
@@ -2,7 +2,12 @@
 
 import React from "react";
 import { cn } from "@/lib/utils";
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../../ui/tooltip";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
 
 type ToolbarButtonProps = {
   icon: React.ReactNode;
@@ -13,18 +18,25 @@ type ToolbarButtonProps = {
   tooltipSide?: "top" | "bottom" | "left" | "right";
 };
 
-export function ToolbarButton({ icon, label = "tool", onClick, disabled = false, active = false, tooltipSide = "right" }: Readonly<ToolbarButtonProps>) {
+export function ToolbarButton({
+  icon,
+  label = "tool",
+  onClick,
+  disabled = false,
+  active = false,
+  tooltipSide = "right",
+}: Readonly<ToolbarButtonProps>) {
   return (
     <TooltipProvider delayDuration={300}>
       <Tooltip>
         <TooltipTrigger asChild>
-        <button
+          <button
             className={cn(
               "pointer-events-auto cursor-pointer hover:bg-zinc-200 px-2 py-2 flex justify-center items-center",
               {
                 ["bg-zinc-200"]: active,
                 ["pointer-events-none cursor-default opacity-50"]: disabled,
-              },
+              }
             )}
             disabled={disabled}
             onClick={onClick}
@@ -37,5 +49,5 @@ export function ToolbarButton({ icon, label = "tool", onClick, disabled = false,
         </TooltipContent>
       </Tooltip>
     </TooltipProvider>
-  )
-};
\ No newline at end of file
+  );
+}
diff --git a/code/package-lock.json b/code/package-lock.json
index ffece2a..6466ea1 100644
--- a/code/package-lock.json
+++ b/code/package-lock.json
@@ -24,6 +24,7 @@
         "@radix-ui/react-slot": "^1.1.2",
         "@radix-ui/react-tooltip": "^1.1.8",
         "@tanstack/react-query": "^5.67.1",
+        "boring-avatars": "^1.11.2",
         "canvas": "^3.1.0",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
@@ -4202,6 +4203,11 @@
         "readable-stream": "^3.4.0"
       }
     },
+    "node_modules/boring-avatars": {
+      "version": "1.11.2",
+      "resolved": "https://registry.npmjs.org/boring-avatars/-/boring-avatars-1.11.2.tgz",
+      "integrity": "sha512-3+wkwPeObwS4R37FGXMYViqc4iTrIRj5yzfX9Qy4mnpZ26sX41dGMhsAgmKks1r/uufY1pl4vpgzMWHYfJRb2A=="
+    },
     "node_modules/brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
diff --git a/code/package.json b/code/package.json
index b5155c6..42a9189 100644
--- a/code/package.json
+++ b/code/package.json
@@ -41,6 +41,7 @@
     "@radix-ui/react-slot": "^1.1.2",
     "@radix-ui/react-tooltip": "^1.1.8",
     "@tanstack/react-query": "^5.67.1",
+    "boring-avatars": "^1.11.2",
     "canvas": "^3.1.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",