feat: Extend simulation state types to include ArmBot events and update related components

- Updated RotateControls and SelectionControls to handle ArmBot events in simulation states.
- Enhanced PathConnector to manage connections involving ArmBot and StaticMachine types.
- Added ArmBotMechanics and StaticMachineMechanics components for managing properties of ArmBot and StaticMachine.
- Modified types in worldTypes to include rotation for ArmBot and StaticMachine events.
- Updated store to accommodate new ArmBot event types in simulation states.

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

@@ -22,6 +22,8 @@ import GlobalProperties from "./properties/GlobalProperties";
 import AsstePropertiies from "./properties/AssetProperties";
 import ZoneProperties from "./properties/ZoneProperties";
 import VehicleMechanics from "./mechanics/VehicleMechanics";
+import StaticMachineMechanics from "./mechanics/StaticMachineMechanics";
+import ArmBotMechanics from "./mechanics/ArmBotMechanics";
 
 const SideBarRight: React.FC = () => {
   const { activeModule } = useModuleStore();
@@ -42,9 +44,8 @@ const SideBarRight: React.FC = () => {
         <div className="sidebar-actions-container">
           {/* {activeModule === "builder" && ( */}
           <div
-            className={`sidebar-action-list ${
-              subModule === "properties" ? "active" : ""
-            }`}
+            className={`sidebar-action-list ${subModule === "properties" ? "active" : ""
+              }`}
             onClick={() => setSubModule("properties")}
           >
             <PropertiesIcon isActive={subModule === "properties"} />
@@ -53,25 +54,22 @@ const SideBarRight: React.FC = () => {
           {activeModule === "simulation" && (
             <>
               <div
-                className={`sidebar-action-list ${
-                  subModule === "mechanics" ? "active" : ""
-                }`}
+                className={`sidebar-action-list ${subModule === "mechanics" ? "active" : ""
+                  }`}
                 onClick={() => setSubModule("mechanics")}
               >
                 <MechanicsIcon isActive={subModule === "mechanics"} />
               </div>
               <div
-                className={`sidebar-action-list ${
-                  subModule === "simulations" ? "active" : ""
-                }`}
+                className={`sidebar-action-list ${subModule === "simulations" ? "active" : ""
+                  }`}
                 onClick={() => setSubModule("simulations")}
               >
                 <SimulationIcon isActive={subModule === "simulations"} />
               </div>
               <div
-                className={`sidebar-action-list ${
-                  subModule === "analysis" ? "active" : ""
-                }`}
+                className={`sidebar-action-list ${subModule === "analysis" ? "active" : ""
+                  }`}
                 onClick={() => setSubModule("analysis")}
               >
                 <AnalysisIcon isActive={subModule === "analysis"} />
@@ -132,10 +130,28 @@ const SideBarRight: React.FC = () => {
                 </div>
               </div>
             )}
+          {subModule === "mechanics" &&
+            selectedActionSphere &&
+            selectedActionSphere.path.type === "StaticMachine" && (
+              <div className="sidebar-right-container">
+                <div className="sidebar-right-content-container">
+                  <StaticMachineMechanics /> 
+                </div>
+              </div>
+            )}
+          {subModule === "mechanics" &&
+            selectedActionSphere &&
+            selectedActionSphere.path.type === "ArmBot" && (
+              <div className="sidebar-right-container">
+                <div className="sidebar-right-content-container">
+                  <ArmBotMechanics /> 
+                </div>
+              </div>
+            )}
           {subModule === "mechanics" && !selectedActionSphere && (
             <div className="sidebar-right-container">
               <div className="sidebar-right-content-container">
-                <ConveyorMechanics />
+                <ConveyorMechanics /> {/*  default */}
               </div>
             </div>
           )}