feat: Add Shortcut Keys, activeSubTool state management and improve user avatar handling

app/src/modules/collaboration/users/Avatar.tsx

@@ -5,7 +5,6 @@ import { getAvatarColor } from "./functions/getAvatarColor";
 interface AvatarProps {
   name: string; // Name can be a full name or initials
   size?: number;
-  index?: number;
   textColor?: string;
   color?: string; // Optional color prop for future use
 }
@@ -13,7 +12,6 @@ interface AvatarProps {
 const CustomAvatar: React.FC<AvatarProps> = ({
   name,
   size = 100,
-  index = 0,
   textColor = "#ffffff",
   color, // Optional color prop for future use
 }) => {
@@ -28,7 +26,7 @@ const CustomAvatar: React.FC<AvatarProps> = ({
       const initials = getInitials(name); // Convert name to initials if needed
 
       // Draw background
-      ctx.fillStyle = color || getAvatarColor(index); // Use color prop or generate color based on index
+      ctx.fillStyle = color || "#323232"; // Use color prop or generate color based on index
       ctx.fillRect(0, 0, size, size);
 
       // Draw initials
@@ -42,7 +40,7 @@ const CustomAvatar: React.FC<AvatarProps> = ({
       const dataURL = canvas.toDataURL("image/png");
       setImageSrc(dataURL);
     }
-  }, [name, size, textColor, index]);
+  }, [name, size, textColor]);
 
   if (!imageSrc) {
     return null; // Return null while the image is being generated
@@ -55,18 +53,6 @@ const CustomAvatar: React.FC<AvatarProps> = ({
       alt="User Avatar"
       style={{ width: "100%", height: "100%" }}
     />
-    // <div
-    //   className="user-image"
-    //   style={{
-    //     width: size,
-    //     height: size,
-    //     borderRadius: "50%",
-    //     overflow: "hidden",
-    //     backgroundSize: "cover",
-    //     backgroundPosition: "center",
-    //   }}>
-    //     {name[0]}
-    //   </div>
   );
 };