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

app/src/components/layout/sidebarRight/Header.tsx

@@ -45,7 +45,7 @@ const Header: React.FC = () => {
               <div
                 key={index}
                 className="user-profile"
-                style={{ background: getAvatarColor(index) }}
+                style={{ background: getAvatarColor(index, user.userName) }}
               >
                 {user.userName[0]}
               </div>

app/src/components/ui/ModuleToggle.tsx

@@ -7,13 +7,11 @@ import {
   VisualizationIcon,
 } from "../icons/ExportModuleIcons";
 import useToggleStore from "../../store/useUIToggleStore";
-import { useSelectedZoneStore } from "../../store/useZoneStore";
 
 const ModuleToggle: React.FC = () => {
   const { activeModule, setActiveModule } = useModuleStore();
   const { setToggleUI } = useToggleStore();
 
-
   return (
     <div className="module-toggle-container">
       <div

app/src/components/ui/Tools.tsx

@@ -31,6 +31,7 @@ import {
   useToggleView,
   useToolMode,
   useTransformMode,
+  useActiveSubTool,
 } from "../../store/store";
 import useToggleStore from "../../store/useUIToggleStore";
 import {
@@ -41,7 +42,7 @@ import {
 
 const Tools: React.FC = () => {
   const { templates } = useTemplateStore();
-  const [activeSubTool, setActiveSubTool] = useState("cursor");
+  const { activeSubTool, setActiveSubTool } = useActiveSubTool();
   const { toggleThreeD, setToggleThreeD } = useThreeDStore();
   const { setToggleUI } = useToggleStore();
 
@@ -56,8 +57,7 @@ const Tools: React.FC = () => {
 
   const { widgets3D } = use3DWidget();
 
-    const zones = useDroppedObjectsStore((state) => state.zones);
-  
+  const zones = useDroppedObjectsStore((state) => state.zones);
 
   // wall options
   const { toggleView, setToggleView } = useToggleView();