Refactor mechanics components to use ActionsList for action management

- Consolidated action handling logic into a new ActionsList component for better code organization and reusability.
- Updated RoboticArmMechanics, StorageMechanics, and VehicleMechanics to utilize the new ActionsList component.
- Improved state management and action updates within the mechanics components.
- Enhanced UI responsiveness and styling in sidebar and real-time visualization pages.

app/src/components/layout/sidebarRight/properties/eventProperties/EventProperties.tsx

@@ -1,6 +1,7 @@
 import React, { useEffect, useState } from "react";
 import {
   useSelectedEventData,
+  useSelectedEventSphere,
   useSelectedProduct,
 } from "../../../../../store/simulation/useSimulationStore";
 import { useProductStore } from "../../../../../store/simulation/useProductStore";
@@ -9,6 +10,7 @@ import VehicleMechanics from "./mechanics/vehicleMechanics";
 import RoboticArmMechanics from "./mechanics/roboticArmMechanics";
 import MachineMechanics from "./mechanics/machineMechanics";
 import StorageMechanics from "./mechanics/storageMechanics";
+import { AddIcon } from "../../../../icons/ExportCommonIcons";
 
 const EventProperties: React.FC = () => {
   const { selectedEventData } = useSelectedEventData();
@@ -18,13 +20,15 @@ const EventProperties: React.FC = () => {
     null
   );
   const [assetType, setAssetType] = useState<string | null>(null);
-
+  const { products } = useProductStore();
+  const { selectedEventSphere } = useSelectedEventSphere();
   useEffect(() => {
     const event = getCurrentEventData();
     setCurrentEventData(event);
 
     const type = determineAssetType(event);
     setAssetType(type);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [selectedEventData, selectedProduct]);
 
   const getCurrentEventData = () => {
@@ -72,6 +76,39 @@ const EventProperties: React.FC = () => {
           {assetType === "storageUnit" && <StorageMechanics />}
         </>
       )}
+      {!currentEventData && selectedEventSphere && (
+        <div className="no-event-selected">
+          <p>
+            <strong>Oops!</strong> It looks like this object doesn't have an
+            event assigned yet. To continue, please link it to one of the
+            products below.
+          </p>
+
+          <div className="products-list">
+            <p>
+              <strong>Here are some products you can add it to:</strong>
+            </p>
+            <ul>
+              {products.map((product) => (
+                <li key={product.productId}>
+                  <button>
+                    <AddIcon />
+                    {product.productName}
+                  </button>
+                </li>
+              ))}
+            </ul>
+          </div>
+        </div>
+      )}
+      {!selectedEventSphere && (
+        <div className="no-event-selected">
+          <p>
+            <strong>Oops!</strong> It looks like you haven't selected an event
+            point yet. Please select an event to view its properties.
+          </p>
+        </div>
+      )}
     </div>
   );
 };