feat: Implement collaboration features including user following and avatar management

app/src/functions/collabUserIcon.tsx

@@ -1,31 +0,0 @@
-import React from "react";
-import CustomAvatar from "./users/Avatar";
-
-interface CollabUserIconProps {
-  userName: string;
-  userImage?: string;
-  color: string;
-}
-
-const CollabUserIcon: React.FC<CollabUserIconProps> = ({
-  userImage,
-  userName,
-  color,
-}) => {
-  return (
-    <div className="collab-user-live-container">
-      <div className="user-image-container">
-        {userImage ? (
-          <img className="user-image" src={userImage} alt={userName} />
-        ) : (
-          <CustomAvatar name={userName} color={color} />
-        )}
-      </div>
-      <div className="user-name" style={{ backgroundColor: color }}>
-        {userName}
-      </div>
-    </div>
-  );
-};
-
-export default CollabUserIcon;

app/src/functions/users/Avatar.tsx

@@ -1,59 +0,0 @@
-import React, { useEffect, useState } from "react";
-import { getInitials } from "./functions/getInitials";
-import { getAvatarColor } from "./functions/getAvatarColor";
-
-interface AvatarProps {
-  name: string; // Name can be a full name or initials
-  size?: number;
-  textColor?: string;
-  color?: string; // Optional color prop for future use
-}
-
-const CustomAvatar: React.FC<AvatarProps> = ({
-  name,
-  size = 100,
-  textColor = "#ffffff",
-  color, // Optional color prop for future use
-}) => {
-  const [imageSrc, setImageSrc] = useState<string | null>(null);
-
-  useEffect(() => {
-    const canvas = document.createElement("canvas"); // Create an offscreen canvas
-    canvas.width = size;
-    canvas.height = size;
-    const ctx = canvas.getContext("2d");
-    if (ctx) {
-      const initials = getInitials(name); // Convert name to initials if needed
-
-      // Draw background
-      ctx.fillStyle = color || "#323232"; // Use color prop or generate color based on index
-      ctx.fillRect(0, 0, size, size);
-
-      // Draw initials
-      ctx.fillStyle = textColor;
-      ctx.font = `bold ${size / 2}px Arial`;
-      ctx.textAlign = "center";
-      ctx.textBaseline = "middle";
-      ctx.fillText(initials, size / 2, size / 2);
-
-      // Generate image source
-      const dataURL = canvas.toDataURL("image/png");
-      setImageSrc(dataURL);
-    }
-  }, [name, size, textColor]);
-
-  if (!imageSrc) {
-    return null; // Return null while the image is being generated
-  }
-
-  return (
-    <img
-      className="user-image"
-      src={imageSrc}
-      alt="User Avatar"
-      style={{ width: "100%", height: "100%" }}
-    />
-  );
-};
-
-export default CustomAvatar;

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

@@ -1,56 +0,0 @@
-const avatarColors: string[] = [
-    "#FF5733", // Vivid Orange
-    "#48ac2a", // Leaf Green
-    "#0050eb", // Bright Blue
-    "#FF33A1", // Hot Pink
-    "#FF8C33", // Sunset Orange
-    "#8C33FF", // Violet Purple
-    "#FF3333", // Fiery Red
-    "#43c06d", // Emerald Green
-    "#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, name?: string): string {
-    // Check if the color is already stored in localStorage
-    const localStorageKey = "userAvatarColors";
-    // Check if local storage is available
-    if (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];
-}

app/src/functions/users/functions/getInitials.ts

@@ -1,10 +0,0 @@
-export const getInitials = (fullName: string): string => {
-    // Extract initials from the name
-    const words = fullName.split(" ");
-    const initials = words
-        .map((word) => word[0])
-        .slice(0, 2)
-        .join("")
-        .toUpperCase();
-    return initials;
-};