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>
   );
 };
 

app/src/modules/collaboration/users/functions/getAvatarColor.ts

@@ -1,26 +1,67 @@
 const avatarColors: string[] = [
-    "#FF5733", // Red Orange
+    "#FF5733", // Vivid Orange
     "#48ac2a", // Leaf Green
-    "#0050eb", // Royal Blue
+    "#0050eb", // Bright Blue
     "#FF33A1", // Hot Pink
-    "#FF8C33", // Deep Orange
-    "#8C33FF", // Violet
-    "#FF3333", // Bright Red
+    "#FF8C33", // Sunset Orange
+    "#8C33FF", // Violet Purple
+    "#FF3333", // Fiery Red
     "#43c06d", // Emerald Green
-    "#A133FF", // Amethyst Purple
-    "#C70039", // Crimson
-    "#900C3F", // Maroon
-    "#581845", // Plum
-    "#3498DB", // Sky Blue
-    "#2ECC71", // Green Mint
-    "#E74C3C", // Tomato Red
-    "#00adff", // Azure
-    "#DBAD05", // Amber Yellow
-    "#FF5733", // Red Orange
-    "#FF33A1", // Hot Pink
-    "#900C3F", // Maroon
+    "#A133FF", // Royal Purple
+    "#C70039", // Crimson Red
+    "#900C3F", // Deep Burgundy
+    "#581845", // Plum Purple
+    "#3859AD", // Steel Blue
+    "#08873E", // Forest Green
+    "#E74C3C", // Cherry Red
+    "#00adff", // Sky Blue
+    "#DBAD05", // Golden Yellow
+    "#A13E31", // Brick Red
+    "#94C40E", // Lime Green
+    "#060C47", // Midnight Blue
+    "#2FAFAF", // Teal
 ];
 
-export function getAvatarColor(index: number): string {
+export function getAvatarColor(index: number, name?: string): string {
+    // Check if the color is already stored in localStorage
+    const localStorageKey = "userAvatarColors";
+    // Helper function to check if local storage is available
+    function isLocalStorageAvailable(): boolean {
+        try {
+            const testKey = "__test__";
+            localStorage.setItem(testKey, "test");
+            localStorage.removeItem(testKey);
+            return true;
+        } catch (e) {
+            return false;
+        }
+    }
+    // Check if local storage is available
+    if (isLocalStorageAvailable() && name) {
+        let userColors = JSON.parse(localStorage.getItem(localStorageKey) || "{}");
+
+        // Check if the user already has an assigned color
+        if (userColors[name]) {
+            return userColors[name];
+        }
+
+        // Find a new color not already assigned
+        const usedColors = Object.values(userColors);
+        const availableColors = avatarColors.filter(color => !usedColors.includes(color));
+
+        // Assign a new color
+        const assignedColor = availableColors.length > 0
+            ? availableColors[0]
+            : avatarColors[index % avatarColors.length];
+
+        userColors[name] = assignedColor;
+
+        // Save back to local storage
+        localStorage.setItem(localStorageKey, JSON.stringify(userColors));
+
+        return assignedColor;
+    }
+
+    // Fallback: Assign a color using the index if no name or local storage is unavailable
     return avatarColors[index % avatarColors.length];
 }