feat: Enhance collaboration UI and WebSocket resilience

- Add ParticipantAvatars component with overflow handling
- Implement WebSocket automatic reconnection
- Update shape synchronization for newly joined users
- Improve real-time collaboration user experience

Author: coderomm

apps/collabydraw/actions/shape.ts

@@ -5,6 +5,7 @@ import client from "@repo/db/client";
 import { JoinRoomSchema } from "@repo/common/types";
 import { getServerSession } from "next-auth";
 import { authOptions } from "@/utils/auth";
+import { Shape } from "@/types/canvas";
 
 export async function getShapes(data: { roomName: string }) {
   try {
@@ -26,7 +27,7 @@ export async function getShapes(data: { roomName: string }) {
       return { success: true, shapes: [] };
     }
 
-    const shapes = shapesResponse.map((x) => JSON.parse(x.message));
+    const shapes: Shape[] = shapesResponse.map((x) => JSON.parse(x.message));
 
     return { success: true, shapes };
   } catch (error) {

apps/collabydraw/app/(canvas)/canvas/[roomName]/page.tsx

@@ -20,7 +20,7 @@ export default async function CanvasPage({ params }: { params: Promise<{ roomNam
     const user = session?.user;
     if (!user || !user.id) {
         console.error('User from session not found.');
-        redirect(`/`);
+        redirect('/auth/signin?callbackUrl=' + encodeURIComponent(`/canvas/${decodedParam}`));
     }
     console.log('CanvasPage loaded')
 

apps/collabydraw/components/CollaborationStartBtn.tsx

@@ -10,21 +10,24 @@ import { CollaborationAdDialog } from "./CollaborationAdDialog";
 import { cn } from "@/lib/utils";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./ui/tooltip";
 import { RoomParticipants } from "@repo/common/types";
+import { Popover, PopoverContent, PopoverTrigger } from "./ui/popover";
 
 export default function CollaborationStartBtn({ slug, participants, onCloseRoom }: { slug?: string, participants?: RoomParticipants[], onCloseRoom?: () => void; }) {
     const pathname = usePathname();
     const [isOpen, setIsOpen] = useState(false);
     const { data: session } = useSession();
     const roomSlug = slug;
     const decodedPathname = decodeURIComponent(pathname);
+    const displayParticipants = participants?.slice(0, 3);
+    const remainingParticipants = participants?.slice(3);
 
     return (
         <div className="Start_Room_Session transition-transform duration-500 ease-in-out flex items-center justify-end">
             <div className="UserList__wrapper flex w-full justify-end items-center">
                 <div className="UserList p-1 flex flex-wrap justify-end  items-center gap-[.625rem]">
                     <TooltipProvider delayDuration={0}>
                         <div className="flex space-x-2">
-                            {participants?.map((participant) => (
+                            {displayParticipants?.map((participant) => (
                                 <Tooltip key={participant.userId}>
                                     <TooltipTrigger asChild>
                                         <div style={{ backgroundColor: getClientColor(participant) }} className={`w-7 h-7 rounded-full flex items-center justify-center cursor-pointer`}>
@@ -38,6 +41,40 @@ export default function CollaborationStartBtn({ slug, participants, onCloseRoom
                                     </TooltipContent>
                                 </Tooltip>
                             ))}
+
+                            {remainingParticipants && remainingParticipants.length > 0 && (
+                                <Popover>
+                                    <PopoverTrigger asChild>
+                                        <div
+                                            className="w-7 h-7 rounded-full bg-gray-200 flex items-center justify-center 
+                               cursor-pointer hover:bg-gray-400 transition-colors"
+                                        >
+                                            <span className="text-xs font-bold text-gray-900">
+                                                +{remainingParticipants?.length}
+                                            </span>
+                                        </div>
+                                    </PopoverTrigger>
+                                    <PopoverContent className="w-full max-h-[200px] h-full overflow-auto p-4 mt-3 rounded-lg">
+                                        <div className="space-y-2">
+                                            <h4 className="text-sm font-medium font-assistant">Additional Participants</h4>
+                                            {remainingParticipants?.map((participant) => (
+                                                <div
+                                                    key={participant.userId}
+                                                    className="cursor-pointer select-none flex items-center space-x-2 h-8 w-full justify-start gap-2 rounded-md px-3 text-sm font-medium transition-colors text-color-on-surface hover:text-color-on-surface bg-transparent hover:bg-button-hover-bg focus-visible:shadow-brand-color-shadow focus-visible:outline-none focus-visible:ring-0 active:bg-button-hover-bg active:border active:border-brand-active dark:hover:bg-w-button-hover-bg"
+                                                >
+                                                    <div style={{ backgroundColor: getClientColor(participant) }} className={`w-7 h-7 rounded-full flex items-center justify-center cursor-pointer`}>
+                                                        <span className="text-sm font-bold text-gray-900 dark:text-gray-900">
+                                                            {participant.userName.charAt(0).toUpperCase()}
+                                                        </span>
+                                                    </div>
+
+                                                    <span className="text-sm text-color-on-surface">{participant.userName}</span>
+                                                </div>
+                                            ))}
+                                        </div>
+                                    </PopoverContent>
+                                </Popover>
+                            )}
                         </div>
                     </TooltipProvider>
                 </div>

apps/collabydraw/components/RoomSharingDialog.tsx

@@ -40,7 +40,7 @@ export function RoomSharingDialog({ open, onOpenChange, link, onCloseRoom }: { o
 
                 <div className="space-y-6">
                     <div className="text-text-primary-color">
-                        <p className="font-semibold mb-2">Linkkkkkkkkkkkkkkkkkkkkk</p>
+                        <p className="font-semibold mb-2">Link</p>
                         <div className="flex items-center gap-2">
                             <div className="flex-1 bg-collaby-textfield border border-collaby-textfield rounded-md px-3 py-2 text-text-primary-color overflow-hidden text-ellipsis">
                                 {roomLink}

apps/collabydraw/components/canvas/CanvasSheet.tsx

@@ -51,6 +51,7 @@ export default function CanvasSheet({ roomName, roomId, userId, userName, token
     const {
         isConnected,
         messages,
+        existingMsgs,
         sendMessage,
         participants
     } = useWebSocket(paramsRef.current.roomId, paramsRef.current.roomName, paramsRef.current.userId, paramsRef.current.userName, paramsRef.current.token);
@@ -197,9 +198,18 @@ export default function CanvasSheet({ roomName, roomId, userId, userName, token
         console.log('E8')
     }, [messages, canvasState.game, processMessages]);
 
+    useEffect(() => {
+        if (existingMsgs?.message && canvasState.game) {
+            console.log('Updating shapes with existing messages:', existingMsgs.message);
+            canvasState.game.updateShapes(existingMsgs.message);
+        }
+        console.log('E9');
+    }, [existingMsgs, canvasState.game]);
+
+
     const toggleSidebar = useCallback(() => {
         setCanvasState(prev => ({ ...prev, sidebarOpen: !prev.sidebarOpen }));
-        console.log('E9')
+        console.log('E10')
     }, []);
 
     if (isLoading) {

apps/collabydraw/draw/Game.ts

@@ -8,7 +8,6 @@ import {
 import { SelectionManager } from "./SelectionManager";
 import { v4 as uuidv4 } from "uuid";
 import { WS_DATA_TYPE } from "@repo/common/types";
-import { getShapes } from "@/actions/shape";
 
 const CORNER_RADIUS_FACTOR = 20;
 const RECT_CORNER_RADIUS_FACTOR = CORNER_RADIUS_FACTOR;
@@ -34,7 +33,7 @@ export class Game {
   private roomId: string | null;
   private canvasBgColor: string;
   private sendMessage: ((data: string) => void) | null;
-  private existingShape: Shape[];
+  private existingShapes: Shape[];
   private clicked: boolean;
   private roomName: string | null;
   private activeTool: ToolType = "grab";
@@ -70,7 +69,7 @@ export class Game {
     this.roomId = roomId;
     this.sendMessage = sendMessage;
     this.clicked = false;
-    this.existingShape = [];
+    this.existingShapes = [];
     this.canvas.width = document.body.clientWidth;
     this.canvas.height = document.body.clientHeight;
     this.onScaleChangeCallback = onScaleChangeCallback;
@@ -84,7 +83,7 @@ export class Game {
       if (this.isStandalone) {
         localStorage.setItem(
           LOCALSTORAGE_CANVAS_KEY,
-          JSON.stringify(this.existingShape)
+          JSON.stringify(this.existingShapes)
         );
       }
     });
@@ -96,38 +95,11 @@ export class Game {
         const storedShapes = localStorage.getItem(LOCALSTORAGE_CANVAS_KEY);
         if (storedShapes) {
           const parsedShapes = JSON.parse(storedShapes);
-          this.existingShape = [...this.existingShape, ...parsedShapes];
+          this.existingShapes = [...this.existingShapes, ...parsedShapes];
         }
       } catch (e) {
         console.error("Error loading shapes from localStorage:", e);
       }
-    } else if (!this.isStandalone && this.roomName) {
-      try {
-        const getShapesResult = await getShapes({ roomName: this.roomName });
-
-        if (getShapesResult.success && getShapesResult.shapes?.length) {
-          getShapesResult.shapes.forEach((shape: Shape, index: number) => {
-            try {
-              const alreadyExists = this.existingShape.some(
-                (s) => s.id === shape.id
-              );
-
-              if (!alreadyExists) {
-                this.existingShape.push(shape);
-                console.log("init(): Pushing shape from getShapesResult");
-              } else {
-                console.log(`Shape ${shape.id} already exists. Skipping.`);
-              }
-            } catch (e) {
-              console.error(`Error processing shape ${index}:`, e);
-            }
-          });
-        } else if (!getShapesResult.success) {
-          console.error("Error fetching room: " + getShapesResult.error);
-        }
-      } catch (error) {
-        console.error("Error in init:", error);
-      }
     }
     this.clearCanvas();
   }
@@ -166,7 +138,20 @@ export class Game {
   }
 
   updateShapes(shapes: Shape[]) {
-    this.existingShape = shapes;
+    shapes.forEach((newShape) => {
+      const existingIndex = this.existingShapes.findIndex(
+        (s) => s.id === newShape.id
+      );
+      if (existingIndex !== -1) {
+        this.existingShapes[existingIndex] = {
+          ...this.existingShapes[existingIndex],
+          ...newShape,
+        };
+      } else {
+        this.existingShapes.push(newShape);
+      }
+    });
+
     this.clearCanvas();
   }
 
@@ -205,7 +190,7 @@ export class Game {
       this.canvas.height / this.scale
     );
 
-    this.existingShape.map((shape: Shape) => {
+    this.existingShapes.map((shape: Shape) => {
       if (shape.type === "rectangle") {
         this.drawRect(
           shape.x,
@@ -299,15 +284,15 @@ export class Game {
         ) {
           const selectedShape = this.selectionManager.getSelectedShape();
           if (selectedShape) {
-            const index = this.existingShape.findIndex(
+            const index = this.existingShapes.findIndex(
               (shape) => shape.id === selectedShape.id
             );
-            this.existingShape[index] = selectedShape;
+            this.existingShapes[index] = selectedShape;
             if (index !== -1) {
               if (this.isStandalone) {
                 localStorage.setItem(
                   LOCALSTORAGE_CANVAS_KEY,
-                  JSON.stringify(this.existingShape)
+                  JSON.stringify(this.existingShapes)
                 );
               } else if (this.sendMessage && this.roomId) {
                 this.sendMessage(
@@ -332,7 +317,7 @@ export class Game {
     if (this.selectedShape) {
       localStorage.setItem(
         LOCALSTORAGE_CANVAS_KEY,
-        JSON.stringify(this.existingShape)
+        JSON.stringify(this.existingShapes)
       );
     }
 
@@ -420,7 +405,8 @@ export class Game {
         break;
 
       case "pen":
-        const currentShape = this.existingShape[this.existingShape.length - 1];
+        const currentShape =
+          this.existingShapes[this.existingShapes.length - 1];
         if (currentShape?.type === "pen") {
           shape = {
             id: uuidv4(),
@@ -442,13 +428,13 @@ export class Game {
       return;
     }
 
-    this.existingShape.push(shape);
+    this.existingShapes.push(shape);
 
     if (this.isStandalone) {
       try {
         localStorage.setItem(
           LOCALSTORAGE_CANVAS_KEY,
-          JSON.stringify(this.existingShape)
+          JSON.stringify(this.existingShapes)
         );
       } catch (e) {
         console.error("Error saving shapes to localStorage:", e);
@@ -511,8 +497,8 @@ export class Game {
           return;
         }
       }
-      for (let i = this.existingShape.length - 1; i >= 0; i--) {
-        const shape = this.existingShape[i];
+      for (let i = this.existingShapes.length - 1; i >= 0; i--) {
+        const shape = this.existingShapes[i];
 
         if (this.selectionManager.isPointInShape(x, y, shape)) {
           this.selectedShape = shape;
@@ -533,7 +519,7 @@ export class Game {
     this.startY = y;
 
     if (this.activeTool === "pen") {
-      this.existingShape.push({
+      this.existingShapes.push({
         id: uuidv4(),
         type: "pen",
         points: [{ x, y }],
@@ -652,7 +638,7 @@ export class Game {
 
         case "pen":
           const currentShape =
-            this.existingShape[this.existingShape.length - 1];
+            this.existingShapes[this.existingShapes.length - 1];
           if (currentShape?.type === "pen") {
             currentShape.points.push({ x, y });
             this.drawPencil(
@@ -1045,20 +1031,20 @@ export class Game {
   }
 
   eraser(x: number, y: number) {
-    const shapeIndex = this.existingShape.findIndex((shape) =>
+    const shapeIndex = this.existingShapes.findIndex((shape) =>
       this.isPointInShape(x, y, shape)
     );
 
     if (shapeIndex !== -1) {
-      const erasedShape = this.existingShape[shapeIndex];
-      this.existingShape.splice(shapeIndex, 1);
+      const erasedShape = this.existingShapes[shapeIndex];
+      this.existingShapes.splice(shapeIndex, 1);
       this.clearCanvas();
 
       if (this.isStandalone) {
         try {
           localStorage.setItem(
             LOCALSTORAGE_CANVAS_KEY,
-            JSON.stringify(this.existingShape)
+            JSON.stringify(this.existingShapes)
           );
         } catch (e) {
           console.error("Error saving shapes to localStorage:", e);
@@ -1103,7 +1089,7 @@ export class Game {
   }
 
   clearAllShapes() {
-    this.existingShape = [];
+    this.existingShapes = [];
     this.clearCanvas();
     if (this.isStandalone) {
       localStorage.removeItem(LOCALSTORAGE_CANVAS_KEY);