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/SideBarRight.tsx

@@ -14,7 +14,10 @@ import Visualization from "./visualization/Visualization";
 import Analysis from "./analysis/Analysis";
 import Simulations from "./simulation/Simulations";
 import { useSelectedFloorItem } from "../../../store/store";
-import { useSelectedEventData, useSelectedEventSphere } from "../../../store/simulation/useSimulationStore";
+import {
+  useSelectedEventData,
+  useSelectedEventSphere,
+} from "../../../store/simulation/useSimulationStore";
 import GlobalProperties from "./properties/GlobalProperties";
 import AsstePropertiies from "./properties/AssetProperties";
 import ZoneProperties from "./properties/ZoneProperties";
@@ -32,53 +35,63 @@ const SideBarRight: React.FC = () => {
   useEffect(() => {
     if (activeModule !== "simulation") setSubModule("properties");
     if (activeModule === "simulation") setSubModule("simulations");
-    }, [activeModule]);
+  }, [activeModule, setSubModule]);
 
   useEffect(() => {
-        if (activeModule !== "mechanics" && selectedEventData && selectedEventSphere) {
+    if (
+      activeModule !== "mechanics" &&
+      selectedEventData &&
+      selectedEventSphere
+    ) {
       setSubModule("mechanics");
     } else if (!selectedEventData && !selectedEventSphere) {
-            if (activeModule === 'simulation') {
+      if (activeModule === "simulation") {
         setSubModule("simulations");
       }
-        };
+    }
-    }, [activeModule, selectedEventData, selectedEventSphere])
+  }, [activeModule, selectedEventData, selectedEventSphere, setSubModule]);
 
   return (
     <div className="sidebar-right-wrapper">
       <Header />
       {toggleUI && (
         <div className="sidebar-actions-container">
-                    <div
+          {activeModule !== "simulation" && (
-                        className={`sidebar-action-list ${subModule === "properties" ? "active" : ""
+            <button
+              className={`sidebar-action-list ${
+                subModule === "properties" ? "active" : ""
               }`}
               onClick={() => setSubModule("properties")}
             >
               <PropertiesIcon isActive={subModule === "properties"} />
-                    </div>
+            </button>
+          )}
           {activeModule === "simulation" && (
             <>
-                            <div
+              <button
-                                className={`sidebar-action-list ${subModule === "mechanics" ? "active" : ""
+                className={`sidebar-action-list ${
-                                    }`}
+                  subModule === "simulations" ? "active" : ""
-                                onClick={() => setSubModule("mechanics")}
-                            >
-                                <MechanicsIcon isActive={subModule === "mechanics"} />
-                            </div>
-                            <div
-                                className={`sidebar-action-list ${subModule === "simulations" ? "active" : ""
                 }`}
                 onClick={() => setSubModule("simulations")}
               >
                 <SimulationIcon isActive={subModule === "simulations"} />
-                            </div>
+              </button>
-                            <div
+              <button
-                                className={`sidebar-action-list ${subModule === "analysis" ? "active" : ""
+                className={`sidebar-action-list ${
+                  subModule === "mechanics" ? "active" : ""
+                }`}
+                onClick={() => setSubModule("mechanics")}
+              >
+                <MechanicsIcon isActive={subModule === "mechanics"} />
+              </button>
+              <button
+                className={`sidebar-action-list ${
+                  subModule === "analysis" ? "active" : ""
                 }`}
                 onClick={() => setSubModule("analysis")}
               >
                 <AnalysisIcon isActive={subModule === "analysis"} />
-                            </div>
+              </button>
             </>
           )}
         </div>

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

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

@@ -0,0 +1,197 @@
+import React, { useRef } from "react";
+import {
+  AddIcon,
+  RemoveIcon,
+  ResizeHeightIcon,
+} from "../../../../../icons/ExportCommonIcons";
+import RenameInput from "../../../../../ui/inputs/RenameInput";
+import { handleResize } from "../../../../../../functions/handleResizePannel";
+import {
+  useSelectedAction,
+  useSelectedEventData,
+  useSelectedProduct,
+} from "../../../../../../store/simulation/useSimulationStore";
+import { MathUtils } from "three";
+import { useProductStore } from "../../../../../../store/simulation/useProductStore";
+
+interface ActionsListProps {
+  setSelectedPointData: (data: any) => void; // You can replace `any` with a more specific type if you have one
+  selectedPointData: any; // You can replace `any` with a more specific type if you have one
+  // ui control props
+  multipleAction?: boolean;
+}
+
+const ActionsList: React.FC<ActionsListProps> = ({
+  setSelectedPointData,
+  selectedPointData,
+  multipleAction = false,
+}) => {
+  const actionsContainerRef = useRef<HTMLDivElement>(null);
+
+  // store
+  const { selectedEventData } = useSelectedEventData();
+  const { updateAction, addAction, removeAction } = useProductStore();
+  const { selectedProduct } = useSelectedProduct();
+  const { selectedAction, setSelectedAction, clearSelectedAction } =
+    useSelectedAction();
+
+  const handleAddAction = () => {
+    if (!selectedEventData || !selectedPointData) return;
+
+    const newAction = {
+      actionUuid: MathUtils.generateUUID(),
+      actionName: `Action ${selectedPointData.actions.length + 1}`,
+      actionType: "pickAndPlace" as const,
+      process: {
+        startPoint: null,
+        endPoint: null,
+      },
+      triggers: [] as TriggerSchema[],
+    };
+
+    addAction(
+      selectedProduct.productId,
+      selectedEventData.data.modelUuid,
+      selectedEventData.selectedPoint,
+      newAction
+    );
+
+    const updatedPoint = {
+      ...selectedPointData,
+      actions: [...selectedPointData.actions, newAction],
+    };
+    setSelectedPointData(updatedPoint);
+    setSelectedAction(newAction.actionUuid, newAction.actionName);
+  };
+
+  const handleDeleteAction = (actionUuid: string) => {
+    if (!selectedPointData) return;
+
+    removeAction(actionUuid);
+    const newActions = selectedPointData.actions.filter(
+      (a: any) => a.actionUuid !== actionUuid
+    );
+
+    const updatedPoint = {
+      ...selectedPointData,
+      actions: newActions,
+    };
+    setSelectedPointData(updatedPoint);
+
+    if (selectedAction.actionId === actionUuid) {
+      if (newActions.length > 0) {
+        setSelectedAction(newActions[0].actionUuid, newActions[0].actionName);
+      } else {
+        clearSelectedAction();
+      }
+    }
+  };
+
+  const handleRenameAction = (newName: string) => {
+    if (!selectedAction.actionId) return;
+    updateAction(selectedAction.actionId, { actionName: newName });
+
+    if (selectedPointData?.actions) {
+      const updatedActions = selectedPointData.actions.map((action: any) =>
+        action.actionUuid === selectedAction.actionId
+          ? { ...action, actionName: newName }
+          : action
+      );
+      setSelectedPointData({
+        ...selectedPointData,
+        actions: updatedActions,
+      });
+    } else {
+      // write logic for single action
+      return;
+    }
+  };
+
+  const handleActionSelect = (actionUuid: string, actionName: string) => {
+    setSelectedAction(actionUuid, actionName);
+  };
+
+  return (
+    <div className="actions-list-container">
+      <div className="actions">
+        <div className="header">
+          <div className="header-value">Actions</div>
+          {multipleAction && (
+            <button className="add-button" onClick={() => handleAddAction()}>
+              <AddIcon /> Add
+            </button>
+          )}
+        </div>
+        <div
+          className="lists-main-container"
+          ref={actionsContainerRef}
+          style={{ height: "120px" }}
+        >
+          <div className="list-container">
+            {multipleAction &&
+              selectedPointData.actions.map((action: any) => (
+                <div
+                  key={action.actionUuid}
+                  className={`list-item ${
+                    selectedAction.actionId === action.actionUuid
+                      ? "active"
+                      : ""
+                  }`}
+                >
+                  <button
+                    className="value"
+                    onClick={() =>
+                      handleActionSelect(action.actionUuid, action.actionName)
+                    }
+                  >
+                    <RenameInput
+                      value={action.actionName}
+                      onRename={handleRenameAction}
+                    />
+                  </button>
+                  {selectedPointData.actions.length > 1 && (
+                    <button
+                      className="remove-button"
+                      onClick={() => handleDeleteAction(action.actionUuid)}
+                    >
+                      <RemoveIcon />
+                    </button>
+                  )}
+                </div>
+              ))}
+            {!multipleAction && selectedPointData && (
+              <div
+                key={selectedPointData.action.actionUuid}
+                className={`list-item active`}
+              >
+                <button
+                  className="value"
+                  onClick={() =>
+                    handleActionSelect(
+                      selectedPointData.action.actionUuid,
+                      selectedPointData.action.actionName
+                    )
+                  }
+                >
+                  <RenameInput
+                    value={selectedPointData.action.actionName}
+                    onRename={handleRenameAction}
+                  />
+                </button>
+              </div>
+            )}
+          </div>
+          <button
+            className="resize-icon"
+            id="action-resize"
+            onMouseDown={(e: any) => handleResize(e, actionsContainerRef)}
+          >
+            <ResizeHeightIcon />
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ActionsList;

app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/conveyorMechanics.tsx

@@ -1,19 +1,27 @@
-import { useEffect, useState } from 'react'
+import { useEffect, useState } from "react";
-import InputWithDropDown from '../../../../../ui/inputs/InputWithDropDown'
+import InputWithDropDown from "../../../../../ui/inputs/InputWithDropDown";
-import DelayAction from '../actions/DelayAction'
+import DelayAction from "../actions/DelayAction";
-import RenameInput from '../../../../../ui/inputs/RenameInput'
+import RenameInput from "../../../../../ui/inputs/RenameInput";
-import LabledDropdown from '../../../../../ui/inputs/LabledDropdown'
+import LabledDropdown from "../../../../../ui/inputs/LabledDropdown";
-import DespawnAction from '../actions/DespawnAction'
+import DespawnAction from "../actions/DespawnAction";
-import SwapAction from '../actions/SwapAction'
+import SwapAction from "../actions/SwapAction";
-import SpawnAction from '../actions/SpawnAction'
+import SpawnAction from "../actions/SpawnAction";
-import DefaultAction from '../actions/DefaultAction'
+import DefaultAction from "../actions/DefaultAction";
-import Trigger from '../trigger/Trigger'
+import Trigger from "../trigger/Trigger";
-import { useSelectedEventData, useSelectedProduct } from "../../../../../../store/simulation/useSimulationStore";
+import {
+  useSelectedEventData,
+  useSelectedProduct,
+} from "../../../../../../store/simulation/useSimulationStore";
 import { useProductStore } from "../../../../../../store/simulation/useProductStore";
+import ActionsList from "../components/ActionsList";
 
 function ConveyorMechanics() {
-    const [activeOption, setActiveOption] = useState<"default" | "spawn" | "swap" | "delay" | "despawn">("default");
+  const [activeOption, setActiveOption] = useState<
-    const [selectedPointData, setSelectedPointData] = useState<ConveyorPointSchema | undefined>();
+    "default" | "spawn" | "swap" | "delay" | "despawn"
+  >("default");
+  const [selectedPointData, setSelectedPointData] = useState<
+    ConveyorPointSchema | undefined
+  >();
   const { selectedEventData } = useSelectedEventData();
   const { getPointByUuid, updateEvent, updateAction } = useProductStore();
   const { selectedProduct } = useSelectedProduct();
@@ -25,71 +33,71 @@ function ConveyorMechanics() {
         selectedEventData?.data.modelUuid,
         selectedEventData?.selectedPoint
       ) as ConveyorPointSchema | undefined;
-            if (point && 'action' in point) {
+      if (point && "action" in point) {
         setSelectedPointData(point);
-                setActiveOption(point.action.actionType as "default" | "spawn" | "swap" | "delay" | "despawn");
+        setActiveOption(
+          point.action.actionType as
+            | "default"
+            | "spawn"
+            | "swap"
+            | "delay"
+            | "despawn"
+        );
       }
     }
-    }, [selectedProduct, selectedEventData])
+  }, [selectedProduct, selectedEventData, getPointByUuid]);
 
   const handleSpeedChange = (value: string) => {
     if (!selectedEventData) return;
-        updateEvent(
+    updateEvent(selectedProduct.productId, selectedEventData.data.modelUuid, {
-            selectedProduct.productId,
+      speed: parseFloat(value),
-            selectedEventData.data.modelUuid,
+    });
-            { speed: parseFloat(value) }
-        );
   };
 
   const handleActionTypeChange = (option: string) => {
     if (!selectedEventData || !selectedPointData) return;
-        const validOption = option as "default" | "spawn" | "swap" | "delay" | "despawn";
+    const validOption = option as
+      | "default"
+      | "spawn"
+      | "swap"
+      | "delay"
+      | "despawn";
     setActiveOption(validOption);
 
-        updateAction(
+    updateAction(selectedPointData.action.actionUuid, {
-            selectedPointData.action.actionUuid,
+      actionType: validOption,
-            { actionType: validOption }
+    });
-        );
   };
 
   const handleRenameAction = (newName: string) => {
     if (!selectedPointData) return;
-        updateAction(
+    updateAction(selectedPointData.action.actionUuid, { actionName: newName });
-            selectedPointData.action.actionUuid,
-            { actionName: newName }
-        );
   };
 
   const handleSpawnCountChange = (value: string) => {
     if (!selectedPointData) return;
-        updateAction(
+    updateAction(selectedPointData.action.actionUuid, {
-            selectedPointData.action.actionUuid,
+      spawnCount: value === "inherit" ? "inherit" : parseFloat(value),
-            { spawnCount: value === "inherit" ? "inherit" : parseFloat(value) }
+    });
-        );
   };
 
   const handleSpawnIntervalChange = (value: string) => {
     if (!selectedPointData) return;
-        updateAction(
+    updateAction(selectedPointData.action.actionUuid, {
-            selectedPointData.action.actionUuid,
+      spawnInterval: value === "inherit" ? "inherit" : parseFloat(value),
-            { spawnInterval: value === "inherit" ? "inherit" : parseFloat(value) }
+    });
-        );
   };
 
   const handleMaterialSelect = (material: string) => {
     if (!selectedPointData) return;
-        updateAction(
+    updateAction(selectedPointData.action.actionUuid, { material });
-            selectedPointData.action.actionUuid,
-            { material }
-        );
   };
 
   const handleDelayChange = (value: string) => {
     if (!selectedPointData) return;
-        updateAction(
+    updateAction(selectedPointData.action.actionUuid, {
-            selectedPointData.action.actionUuid,
+      delay: value === "inherit" ? "inherit" : parseFloat(value),
-            { delay: value === "inherit" ? "inherit" : parseFloat(value) }
+    });
-        );
   };
 
   const availableActions = {
@@ -98,7 +106,8 @@ function ConveyorMechanics() {
   };
 
   // Get current values from store
-    const currentSpeed = selectedEventData?.data.type === "transfer"
+  const currentSpeed =
+    selectedEventData?.data.type === "transfer"
       ? selectedEventData.data.speed.toString()
       : "0.5";
 
@@ -124,7 +133,7 @@ function ConveyorMechanics() {
 
   return (
     <>
-            {selectedEventData &&
+      {selectedEventData && (
         <>
           <div key={selectedPointData?.uuid} className="global-props">
             <div className="property-list-container">
@@ -137,13 +146,18 @@ function ConveyorMechanics() {
                   defaultValue={"0.5"}
                   max={10}
                   activeOption="m/s"
-                                    onClick={() => { }}
+                  onClick={() => {}}
                   onChange={handleSpeedChange}
                 />
               </div>
             </div>
           </div>
 
+          <ActionsList
+            setSelectedPointData={setSelectedPointData}
+            selectedPointData={selectedPointData}
+          />
+
           <div className="selected-actions-details">
             <div className="selected-actions-header">
               <RenameInput
@@ -153,16 +167,16 @@ function ConveyorMechanics() {
             </div>
             <div className="selected-actions-list">
               <LabledDropdown
-                                defaultOption={selectedPointData
+                defaultOption={
+                  selectedPointData
                     ? selectedPointData.action.actionType
-                                    : "default"}
+                    : "default"
+                }
                 options={availableActions.options}
                 onSelect={handleActionTypeChange}
               />
-                            {activeOption === "default" &&
+              {activeOption === "default" && <DefaultAction />}
-                                <DefaultAction />
+              {activeOption === "spawn" && (
-                            }
-                            {activeOption === "spawn" &&
                 <SpawnAction
                   onChangeCount={handleSpawnCountChange}
                   options={["Default material", "Material 1", "Material 2"]}
@@ -178,18 +192,16 @@ function ConveyorMechanics() {
                   countMax={100}
                   countDefaultValue="1"
                 />
-                            }
+              )}
-                            {activeOption === "swap" &&
+              {activeOption === "swap" && (
                 <SwapAction
                   options={["Default material", "Material 1", "Material 2"]}
                   defaultOption={currentMaterial}
                   onSelect={handleMaterialSelect}
                 />
-                            }
+              )}
-                            {activeOption === "despawn" &&
+              {activeOption === "despawn" && <DespawnAction />}
-                                <DespawnAction />
+              {activeOption === "delay" && (
-                            }
-                            {activeOption === "delay" &&
                 <DelayAction
                   value={currentDelay}
                   defaultValue="0"
@@ -197,16 +209,16 @@ function ConveyorMechanics() {
                   max={60}
                   onChange={handleDelayChange}
                 />
-                            }
+              )}
             </div>
           </div>
           <div className="tirgger">
             <Trigger />
           </div>
         </>
-            }
+      )}
     </>
-    )
+  );
 }
 
-export default ConveyorMechanics
+export default ConveyorMechanics;

app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/machineMechanics.tsx

@@ -1,14 +1,22 @@
-import { useEffect, useState } from 'react'
+import { useEffect, useState } from "react";
-import RenameInput from '../../../../../ui/inputs/RenameInput'
+import RenameInput from "../../../../../ui/inputs/RenameInput";
-import LabledDropdown from '../../../../../ui/inputs/LabledDropdown'
+import LabledDropdown from "../../../../../ui/inputs/LabledDropdown";
-import Trigger from '../trigger/Trigger'
+import Trigger from "../trigger/Trigger";
-import { useSelectedEventData, useSelectedProduct } from "../../../../../../store/simulation/useSimulationStore";
+import {
+  useSelectedEventData,
+  useSelectedProduct,
+} from "../../../../../../store/simulation/useSimulationStore";
 import { useProductStore } from "../../../../../../store/simulation/useProductStore";
-import ProcessAction from '../actions/ProcessAction'
+import ProcessAction from "../actions/ProcessAction";
+import ActionsList from "../components/ActionsList";
 
 function MachineMechanics() {
-    const [activeOption, setActiveOption] = useState<"default" | "process">("default");
+  const [activeOption, setActiveOption] = useState<"default" | "process">(
-    const [selectedPointData, setSelectedPointData] = useState<MachinePointSchema | undefined>();
+    "default"
+  );
+  const [selectedPointData, setSelectedPointData] = useState<
+    MachinePointSchema | undefined
+  >();
   const { selectedEventData } = useSelectedEventData();
   const { getPointByUuid, updateAction } = useProductStore();
   const { selectedProduct } = useSelectedProduct();
@@ -20,46 +28,40 @@ function MachineMechanics() {
         selectedEventData?.data.modelUuid,
         selectedEventData?.selectedPoint
       ) as MachinePointSchema | undefined;
-            if (point && 'action' in point) {
+      if (point && "action" in point) {
         setSelectedPointData(point);
         setActiveOption(point.action.actionType as "process");
       }
     }
-    }, [selectedProduct, selectedEventData])
+  }, [selectedProduct, selectedEventData, getPointByUuid]);
 
   const handleActionTypeChange = (option: string) => {
     if (!selectedEventData || !selectedPointData) return;
     const validOption = option as "process";
     setActiveOption(validOption);
 
-        updateAction(
+    updateAction(selectedPointData.action.actionUuid, {
-            selectedPointData.action.actionUuid,
+      actionType: validOption,
-            { actionType: validOption }
+    });
-        );
   };
 
   const handleRenameAction = (newName: string) => {
     if (!selectedPointData) return;
-        updateAction(
+    updateAction(selectedPointData.action.actionUuid, { actionName: newName });
-            selectedPointData.action.actionUuid,
-            { actionName: newName }
-        );
   };
 
   const handleProcessTimeChange = (value: string) => {
     if (!selectedPointData) return;
-        updateAction(
+    updateAction(selectedPointData.action.actionUuid, {
-            selectedPointData.action.actionUuid,
+      processTime: parseFloat(value),
-            { processTime: parseFloat(value) }
+    });
-        );
   };
 
   const handleMaterialSelect = (material: string) => {
     if (!selectedPointData) return;
-        updateAction(
+    updateAction(selectedPointData.action.actionUuid, {
-            selectedPointData.action.actionUuid,
+      swapMaterial: material,
-            { swapMaterial: material }
+    });
-        );
   };
 
   // Get current values from store
@@ -82,7 +84,7 @@ function MachineMechanics() {
 
   return (
     <>
-            {selectedEventData &&
+      {selectedEventData && (
         <>
           <div className="selected-actions-details">
             <div className="selected-actions-header">
@@ -91,13 +93,17 @@ function MachineMechanics() {
                 onRename={handleRenameAction}
               />
             </div>
+            <ActionsList
+              setSelectedPointData={setSelectedPointData}
+              selectedPointData={selectedPointData}
+            />
             <div className="selected-actions-list">
               <LabledDropdown
                 defaultOption="process"
                 options={availableActions.options}
                 onSelect={handleActionTypeChange}
               />
-                            {activeOption === "process" &&
+              {activeOption === "process" && (
                 <ProcessAction
                   value={currentProcessTime}
                   min={0.1}
@@ -108,16 +114,16 @@ function MachineMechanics() {
                   swapDefaultOption={currentMaterial}
                   onSwapSelect={handleMaterialSelect}
                 />
-                            }
+              )}
             </div>
           </div>
           <div className="tirgger">
             <Trigger />
           </div>
         </>
-            }
+      )}
     </>
-    )
+  );
 }
 
-export default MachineMechanics
+export default MachineMechanics;

app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/roboticArmMechanics.tsx

@@ -1,23 +1,29 @@
-import { useEffect, useRef, useState } from 'react'
+import { useEffect, useState } from "react";
-import * as THREE from 'three';
+import InputWithDropDown from "../../../../../ui/inputs/InputWithDropDown";
-import InputWithDropDown from '../../../../../ui/inputs/InputWithDropDown'
+import RenameInput from "../../../../../ui/inputs/RenameInput";
-import RenameInput from '../../../../../ui/inputs/RenameInput'
+import LabledDropdown from "../../../../../ui/inputs/LabledDropdown";
-import LabledDropdown from '../../../../../ui/inputs/LabledDropdown'
+import Trigger from "../trigger/Trigger";
-import Trigger from '../trigger/Trigger'
+import {
-import { useSelectedEventData, useSelectedProduct, useSelectedAction } from "../../../../../../store/simulation/useSimulationStore";
+  useSelectedEventData,
+  useSelectedProduct,
+  useSelectedAction,
+} from "../../../../../../store/simulation/useSimulationStore";
 import { useProductStore } from "../../../../../../store/simulation/useProductStore";
-import { AddIcon, RemoveIcon, ResizeHeightIcon } from '../../../../../icons/ExportCommonIcons'
+import PickAndPlaceAction from "../actions/PickAndPlaceAction";
-import { handleResize } from '../../../../../../functions/handleResizePannel'
+import ActionsList from "../components/ActionsList";
-import PickAndPlaceAction from '../actions/PickAndPlaceAction'
 
 function RoboticArmMechanics() {
-    const actionsContainerRef = useRef<HTMLDivElement>(null);
+  const [activeOption, setActiveOption] = useState<"default" | "pickAndPlace">(
-    const [activeOption, setActiveOption] = useState<"default" | "pickAndPlace">("default");
+    "default"
-    const [selectedPointData, setSelectedPointData] = useState<RoboticArmPointSchema | undefined>();
+  );
+  const [selectedPointData, setSelectedPointData] = useState<
+    RoboticArmPointSchema | undefined
+  >();
   const { selectedEventData } = useSelectedEventData();
-    const { getPointByUuid, updateEvent, updateAction, addAction, removeAction } = useProductStore();
+  const { getPointByUuid, updateEvent, updateAction } = useProductStore();
   const { selectedProduct } = useSelectedProduct();
-    const { selectedAction, setSelectedAction, clearSelectedAction } = useSelectedAction();
+  const { selectedAction, setSelectedAction, clearSelectedAction } =
+    useSelectedAction();
 
   useEffect(() => {
     if (selectedEventData) {
@@ -28,127 +34,80 @@ function RoboticArmMechanics() {
       ) as RoboticArmPointSchema | undefined;
       if (point) {
         setSelectedPointData(point);
-                setActiveOption(point.actions[0].actionType as "default" | "pickAndPlace");
+        setActiveOption(
-                if (point.actions.length > 0 && !selectedAction.actionId) {
+          point.actions[0].actionType as "default" | "pickAndPlace"
-                    setSelectedAction(point.actions[0].actionUuid, point.actions[0].actionName);
-                }
-            }
-        } else {
-            clearSelectedAction();
-        }
-    }, [selectedEventData, selectedProduct]);
-
-    const handleActionSelect = (actionUuid: string, actionName: string) => {
-        setSelectedAction(actionUuid, actionName);
-    };
-
-    const handleAddAction = () => {
-        if (!selectedEventData || !selectedPointData) return;
-
-        const newAction = {
-            actionUuid: THREE.MathUtils.generateUUID(),
-            actionName: `Action ${selectedPointData.actions.length + 1}`,
-            actionType: "pickAndPlace" as "pickAndPlace",
-            process: {
-                startPoint: null,
-                endPoint: null
-            },
-            triggers: [] as TriggerSchema[]
-        };
-
-        addAction(
-            selectedProduct.productId,
-            selectedEventData.data.modelUuid,
-            selectedEventData.selectedPoint,
-            newAction
         );
-
+        if (point.actions.length > 0 && !selectedAction.actionId) {
-        const updatedPoint = {
+          setSelectedAction(
-            ...selectedPointData,
+            point.actions[0].actionUuid,
-            actions: [...selectedPointData.actions, newAction]
+            point.actions[0].actionName
-        };
+          );
-        setSelectedPointData(updatedPoint);
+        }
-        setSelectedAction(newAction.actionUuid, newAction.actionName);
+      }
-    };
-
-    const handleDeleteAction = (actionUuid: string) => {
-        if (!selectedPointData) return;
-
-        removeAction(actionUuid);
-        const newActions = selectedPointData.actions.filter(a => a.actionUuid !== actionUuid);
-
-        const updatedPoint = {
-            ...selectedPointData,
-            actions: newActions
-        };
-        setSelectedPointData(updatedPoint);
-
-        if (selectedAction.actionId === actionUuid) {
-            if (newActions.length > 0) {
-                setSelectedAction(newActions[0].actionUuid, newActions[0].actionName);
     } else {
       clearSelectedAction();
     }
-        }
+  }, [
-    };
+    clearSelectedAction,
+    getPointByUuid,
+    selectedAction.actionId,
+    selectedEventData,
+    selectedProduct,
+    setSelectedAction,
+  ]);
 
   const handleRenameAction = (newName: string) => {
     if (!selectedAction.actionId) return;
-        updateAction(
+    updateAction(selectedAction.actionId, { actionName: newName });
-            selectedAction.actionId,
-            { actionName: newName }
-        );
 
     if (selectedPointData) {
-            const updatedActions = selectedPointData.actions.map(action =>
+      const updatedActions = selectedPointData.actions.map((action) =>
         action.actionUuid === selectedAction.actionId
           ? { ...action, actionName: newName }
           : action
       );
       setSelectedPointData({
         ...selectedPointData,
-                actions: updatedActions
+        actions: updatedActions,
       });
     }
   };
 
   const handleSpeedChange = (value: string) => {
     if (!selectedEventData) return;
-        updateEvent(
+    updateEvent(selectedProduct.productId, selectedEventData.data.modelUuid, {
-            selectedProduct.productId,
+      speed: parseFloat(value),
-            selectedEventData.data.modelUuid,
+    });
-            { speed: parseFloat(value) }
-        );
   };
 
   const handlePickPointChange = (value: string) => {
     if (!selectedAction.actionId || !selectedPointData) return;
-        const [x, y, z] = value.split(',').map(Number);
+    const [x, y, z] = value.split(",").map(Number);
 
-        updateAction(
+    updateAction(selectedAction.actionId, {
-            selectedAction.actionId,
-            {
       process: {
         startPoint: [x, y, z] as [number, number, number],
-                    endPoint: selectedPointData.actions.find(a => a.actionUuid === selectedAction.actionId)?.process.endPoint || null
+        endPoint:
-                }
+          selectedPointData.actions.find(
-            }
+            (a) => a.actionUuid === selectedAction.actionId
-        );
+          )?.process.endPoint || null,
+      },
+    });
   };
 
   const handlePlacePointChange = (value: string) => {
     if (!selectedAction.actionId || !selectedPointData) return;
-        const [x, y, z] = value.split(',').map(Number);
+    const [x, y, z] = value.split(",").map(Number);
 
-        updateAction(
+    updateAction(selectedAction.actionId, {
-            selectedAction.actionId,
-            {
       process: {
-                    startPoint: selectedPointData.actions.find(a => a.actionUuid === selectedAction.actionId)?.process.startPoint || null,
+        startPoint:
-                    endPoint: [x, y, z] as [number, number, number]
+          selectedPointData.actions.find(
-                }
+            (a) => a.actionUuid === selectedAction.actionId
-            }
+          )?.process.startPoint || null,
-        );
+        endPoint: [x, y, z] as [number, number, number],
+      },
+    });
   };
 
   const availableActions = {
@@ -156,11 +115,14 @@ function RoboticArmMechanics() {
     options: ["pickAndPlace"],
   };
 
-    const currentSpeed = selectedEventData?.data.type === "roboticArm"
+  const currentSpeed =
+    selectedEventData?.data.type === "roboticArm"
       ? selectedEventData.data.speed.toString()
       : "0.5";
 
-    const currentAction = selectedPointData?.actions.find(a => a.actionUuid === selectedAction.actionId);
+  const currentAction = selectedPointData?.actions.find(
+    (a) => a.actionUuid === selectedAction.actionId
+  );
   const currentPickPoint = currentAction?.process.startPoint
     ? `${currentAction.process.startPoint[0]},${currentAction.process.startPoint[1]},${currentAction.process.startPoint[2]}`
     : "";
@@ -183,62 +145,18 @@ function RoboticArmMechanics() {
                   defaultValue={"0.5"}
                   max={10}
                   activeOption="m/s"
-                                    onClick={() => { }}
+                  onClick={() => {}}
                   onChange={handleSpeedChange}
                 />
               </div>
             </div>
           </div>
 
-                    <div className="actions-list-container">
+          <ActionsList
-                        <div className="actions">
+            setSelectedPointData={setSelectedPointData}
-                            <div className="header">
+            selectedPointData={selectedPointData}
-                                <div className="header-value">Actions</div>
+            multipleAction
-                                <div className="add-button" onClick={handleAddAction}>
-                                    <AddIcon /> Add
-                                </div>
-                            </div>
-                            <div
-                                className="lists-main-container"
-                                ref={actionsContainerRef}
-                                style={{ height: "120px" }}
-                            >
-                                <div className="list-container">
-                                    {selectedPointData.actions.map((action) => (
-                                        <div
-                                            key={action.actionUuid}
-                                            className={`list-item ${selectedAction.actionId === action.actionUuid ? "active" : ""}`}
-                                        >
-                                            <div
-                                                className="value"
-                                                onClick={() => handleActionSelect(action.actionUuid, action.actionName)}
-                                            >
-                                                <RenameInput
-                                                    value={action.actionName}
-                                                    onRename={handleRenameAction}
           />
-                                            </div>
-                                            {selectedPointData.actions.length > 1 && (
-                                                <div
-                                                    className="remove-button"
-                                                    onClick={() => handleDeleteAction(action.actionUuid)}
-                                                >
-                                                    <RemoveIcon />
-                                                </div>
-                                            )}
-                                        </div>
-                                    ))}
-                                </div>
-                                <div
-                                    className="resize-icon"
-                                    id="action-resize"
-                                    onMouseDown={(e) => handleResize(e, actionsContainerRef)}
-                                >
-                                    <ResizeHeightIcon />
-                                </div>
-                            </div>
-                        </div>
-                    </div>
 
           {selectedAction.actionId && currentAction && (
             <div className="selected-actions-details">
@@ -252,7 +170,7 @@ function RoboticArmMechanics() {
                 <LabledDropdown
                   defaultOption={activeOption}
                   options={availableActions.options}
-                                    onSelect={() => { }}
+                  onSelect={() => {}}
                   disabled={true}
                 />
                 <PickAndPlaceAction
@@ -270,7 +188,7 @@ function RoboticArmMechanics() {
         </>
       )}
     </>
-    )
+  );
 }
 
-export default RoboticArmMechanics
+export default RoboticArmMechanics;

app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/storageMechanics.tsx

@@ -1,14 +1,22 @@
-import { useEffect, useState } from 'react'
+import { useEffect, useState } from "react";
-import RenameInput from '../../../../../ui/inputs/RenameInput'
+import RenameInput from "../../../../../ui/inputs/RenameInput";
-import LabledDropdown from '../../../../../ui/inputs/LabledDropdown'
+import LabledDropdown from "../../../../../ui/inputs/LabledDropdown";
-import Trigger from '../trigger/Trigger'
+import Trigger from "../trigger/Trigger";
-import { useSelectedEventData, useSelectedProduct } from "../../../../../../store/simulation/useSimulationStore";
+import {
+  useSelectedEventData,
+  useSelectedProduct,
+} from "../../../../../../store/simulation/useSimulationStore";
 import { useProductStore } from "../../../../../../store/simulation/useProductStore";
-import StorageAction from '../actions/StorageAction';
+import StorageAction from "../actions/StorageAction";
+import ActionsList from "../components/ActionsList";
 
 function StorageMechanics() {
-    const [activeOption, setActiveOption] = useState<"default" | "store" | "spawn">("default");
+  const [activeOption, setActiveOption] = useState<
-    const [selectedPointData, setSelectedPointData] = useState<StoragePointSchema | undefined>();
+    "default" | "store" | "spawn"
+  >("default");
+  const [selectedPointData, setSelectedPointData] = useState<
+    StoragePointSchema | undefined
+  >();
   const { selectedEventData } = useSelectedEventData();
   const { getPointByUuid, updateAction } = useProductStore();
   const { selectedProduct } = useSelectedProduct();
@@ -20,38 +28,33 @@ function StorageMechanics() {
         selectedEventData?.data.modelUuid,
         selectedEventData?.selectedPoint
       ) as StoragePointSchema | undefined;
-            if (point && 'action' in point) {
+      if (point && "action" in point) {
         setSelectedPointData(point);
         setActiveOption(point.action.actionType as "store" | "spawn");
       }
     }
-    }, [selectedProduct, selectedEventData])
+  }, [selectedProduct, selectedEventData, getPointByUuid]);
 
   const handleActionTypeChange = (option: string) => {
     if (!selectedEventData || !selectedPointData) return;
     const validOption = option as "store" | "spawn";
     setActiveOption(validOption);
 
-        updateAction(
+    updateAction(selectedPointData.action.actionUuid, {
-            selectedPointData.action.actionUuid,
+      actionType: validOption,
-            { actionType: validOption }
+    });
-        );
   };
 
   const handleRenameAction = (newName: string) => {
     if (!selectedPointData) return;
-        updateAction(
+    updateAction(selectedPointData.action.actionUuid, { actionName: newName });
-            selectedPointData.action.actionUuid,
-            { actionName: newName }
-        );
   };
 
   const handleCapacityChange = (value: string) => {
     if (!selectedPointData) return;
-        updateAction(
+    updateAction(selectedPointData.action.actionUuid, {
-            selectedPointData.action.actionUuid,
+      storageCapacity: parseInt(value),
-            { storageCapacity: parseInt(value) }
+    });
-        );
   };
 
   // Get current values from store
@@ -70,8 +73,12 @@ function StorageMechanics() {
 
   return (
     <>
-            {selectedEventData &&
+      {selectedEventData && (
         <>
+          <ActionsList
+            setSelectedPointData={setSelectedPointData}
+            selectedPointData={selectedPointData}
+          />
           <div className="selected-actions-details">
             <div className="selected-actions-header">
               <RenameInput
@@ -85,7 +92,7 @@ function StorageMechanics() {
                 options={availableActions.options}
                 onSelect={handleActionTypeChange}
               />
-                            {activeOption === "store" &&
+              {activeOption === "store" && (
                 <StorageAction
                   value={currentCapacity}
                   defaultValue="0"
@@ -93,7 +100,7 @@ function StorageMechanics() {
                   max={20}
                   onChange={handleCapacityChange}
                 />
-                            }
+              )}
               {activeOption === "spawn" && (
                 <div className="spawn-options">
                   <p>Spawn configuration options would go here</p>
@@ -105,9 +112,9 @@ function StorageMechanics() {
             <Trigger />
           </div>
         </>
-            }
+      )}
     </>
-    )
+  );
 }
 
-export default StorageMechanics
+export default StorageMechanics;

app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/vehicleMechanics.tsx

@@ -1,15 +1,23 @@
-import { useEffect, useState } from 'react'
+import { useEffect, useState } from "react";
-import InputWithDropDown from '../../../../../ui/inputs/InputWithDropDown'
+import InputWithDropDown from "../../../../../ui/inputs/InputWithDropDown";
-import RenameInput from '../../../../../ui/inputs/RenameInput'
+import RenameInput from "../../../../../ui/inputs/RenameInput";
-import LabledDropdown from '../../../../../ui/inputs/LabledDropdown'
+import LabledDropdown from "../../../../../ui/inputs/LabledDropdown";
-import Trigger from '../trigger/Trigger'
+import Trigger from "../trigger/Trigger";
-import { useSelectedEventData, useSelectedProduct } from "../../../../../../store/simulation/useSimulationStore";
+import {
+  useSelectedEventData,
+  useSelectedProduct,
+} from "../../../../../../store/simulation/useSimulationStore";
 import { useProductStore } from "../../../../../../store/simulation/useProductStore";
-import TravelAction from '../actions/TravelAction'
+import TravelAction from "../actions/TravelAction";
+import ActionsList from "../components/ActionsList";
 
 function VehicleMechanics() {
-    const [activeOption, setActiveOption] = useState<"default" | "travel">("default");
+  const [activeOption, setActiveOption] = useState<"default" | "travel">(
-    const [selectedPointData, setSelectedPointData] = useState<VehiclePointSchema | undefined>();
+    "default"
+  );
+  const [selectedPointData, setSelectedPointData] = useState<
+    VehiclePointSchema | undefined
+  >();
   const { selectedEventData } = useSelectedEventData();
   const { getPointByUuid, updateEvent, updateAction } = useProductStore();
   const { selectedProduct } = useSelectedProduct();
@@ -27,15 +35,13 @@ function VehicleMechanics() {
         setActiveOption(point.action.actionType as "travel");
       }
     }
-    }, [selectedProduct, selectedEventData])
+  }, [selectedProduct, selectedEventData, getPointByUuid]);
 
   const handleSpeedChange = (value: string) => {
     if (!selectedEventData) return;
-        updateEvent(
+    updateEvent(selectedProduct.productId, selectedEventData.data.modelUuid, {
-            selectedProduct.productId,
+      speed: parseFloat(value),
-            selectedEventData.data.modelUuid,
+    });
-            { speed: parseFloat(value) }
-        );
   };
 
   const handleActionTypeChange = (option: string) => {
@@ -43,56 +49,49 @@ function VehicleMechanics() {
     const validOption = option as "travel";
     setActiveOption(validOption);
 
-        updateAction(
+    updateAction(selectedPointData.action.actionUuid, {
-            selectedPointData.action.actionUuid,
+      actionType: validOption,
-            { actionType: validOption }
+    });
-        );
   };
 
   const handleRenameAction = (newName: string) => {
     if (!selectedPointData) return;
-        updateAction(
+    updateAction(selectedPointData.action.actionUuid, { actionName: newName });
-            selectedPointData.action.actionUuid,
-            { actionName: newName }
-        );
   };
 
   const handleLoadCapacityChange = (value: string) => {
     if (!selectedPointData) return;
-        updateAction(
+    updateAction(selectedPointData.action.actionUuid, {
-            selectedPointData.action.actionUuid,
+      loadCapacity: parseFloat(value),
-            { loadCapacity: parseFloat(value) }
+    });
-        );
   };
 
   const handleUnloadDurationChange = (value: string) => {
     if (!selectedPointData) return;
-        updateAction(
+    updateAction(selectedPointData.action.actionUuid, {
-            selectedPointData.action.actionUuid,
+      unLoadDuration: parseFloat(value),
-            { unLoadDuration: parseFloat(value) }
+    });
-        );
   };
 
   const handlePickPointChange = (value: string) => {
     if (!selectedPointData) return;
-        const [x, y, z] = value.split(',').map(Number);
+    const [x, y, z] = value.split(",").map(Number);
-        updateAction(
+    updateAction(selectedPointData.action.actionUuid, {
-            selectedPointData.action.actionUuid,
+      pickUpPoint: { x, y, z },
-            { pickUpPoint: { x, y, z } }
+    });
-        );
   };
 
   const handleUnloadPointChange = (value: string) => {
     if (!selectedPointData) return;
-        const [x, y, z] = value.split(',').map(Number);
+    const [x, y, z] = value.split(",").map(Number);
-        updateAction(
+    updateAction(selectedPointData.action.actionUuid, {
-            selectedPointData.action.actionUuid,
+      unLoadPoint: { x, y, z },
-            { unLoadPoint: { x, y, z } }
+    });
-        );
   };
 
   // Get current values from store
-    const currentSpeed = selectedEventData?.data.type === "vehicle"
+  const currentSpeed =
+    selectedEventData?.data.type === "vehicle"
       ? selectedEventData.data.speed.toString()
       : "0.5";
 
@@ -123,7 +122,7 @@ function VehicleMechanics() {
 
   return (
     <>
-            {selectedEventData &&
+      {selectedEventData && (
         <>
           <div className="global-props">
             <div className="property-list-container">
@@ -136,13 +135,16 @@ function VehicleMechanics() {
                   defaultValue={"0.5"}
                   max={10}
                   activeOption="m/s"
-                                    onClick={() => { }}
+                  onClick={() => {}}
                   onChange={handleSpeedChange}
                 />
               </div>
             </div>
           </div>
-
+          <ActionsList
+            setSelectedPointData={setSelectedPointData}
+            selectedPointData={selectedPointData}
+          />
           <div className="selected-actions-details">
             <div className="selected-actions-header">
               <RenameInput
@@ -157,7 +159,7 @@ function VehicleMechanics() {
                 onSelect={handleActionTypeChange}
               />
 
-                            {activeOption === 'travel' &&
+              {activeOption === "travel" && (
                 <TravelAction
                   loadCapacity={{
                     value: currentLoadCapacity,
@@ -182,16 +184,16 @@ function VehicleMechanics() {
                   //     onChange: handleUnloadPointChange,
                   // }}
                 />
-                            }
+              )}
             </div>
           </div>
           <div className="tirgger">
             <Trigger />
           </div>
         </>
-            }
+      )}
     </>
-    )
+  );
 }
 
-export default VehicleMechanics
+export default VehicleMechanics;

app/src/styles/layout/sidebar.scss

@@ -366,15 +366,66 @@
     min-height: 50vh;
     padding-bottom: 12px;
     position: relative;
-    display: flex;
+    overflow: auto;
-    flex-direction: column;
 
     .sidebar-right-content-container {
       border-bottom: 1px solid var(--border-color);
-      // flex: 1;
       height: calc(100% - 36px);
       position: relative;
-      overflow: auto;
+      width: 320px;
+      .no-event-selected {
+        color: #666;
+        padding: 1.8rem 1rem;
+        grid-column: 1 / -1;
+        .products-list {
+          padding-top: 1rem;
+          .products-list-title{
+            text-align: start;
+            color: var(--accent-color);
+            font-size: var(--font-size-regular);
+          }
+          ul {
+            li {
+              text-align: start;
+              margin: 8px 0;
+              padding: 2px 0;
+              text-decoration: none;
+              &::marker {
+                content: "";
+              }
+              button {
+                width: fit-content;
+                position: relative;
+                transition: all 0.2s ease;
+                @include flex-center;
+                gap: 4px;
+                &:before {
+                  content: "";
+                  position: absolute;
+                  left: 0;
+                  bottom: -4px;
+                  background: var(--accent-color);
+                  height: 1px;
+                  width: 0%;
+                  transition: all 0.3s ease;
+                }
+              }
+              &:hover {
+                button {
+                  path {
+                    stroke: var(--accent-color);
+                    stroke-width: 1.5px;
+                  }
+                  color: var(--accent-color);
+                  &:before {
+                    width: 100%;
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
     }
   }
 
@@ -707,7 +758,7 @@
       }
       .selected-actions-list {
         margin-bottom: 8px;
-        .eye-dropper-input-container{
+        .eye-dropper-input-container {
           padding: 6px 12px;
           .regularDropdown-container {
             padding: 5px 8px;
@@ -798,6 +849,7 @@
         @include flex-center;
         padding: 4px;
         cursor: grab;
+        width: 100%;
 
         &:active {
           cursor: grabbing;

app/src/styles/pages/realTimeViz.scss

@@ -776,13 +776,13 @@
   border-radius: 6px;
   overflow: hidden;
   padding: 4px;
-
   min-width: 150px;
 
   .option {
     padding: 4px 10px;
     border-radius: #{$border-radius-small};
     color: var(--text-color);
+    text-wrap: nowrap;
     cursor: pointer;
 
     &:hover {
@@ -794,8 +794,8 @@
       color: #f65648;
 
       &:hover {
-        background-color: #f65648;
+        background-color: #f657484d;
-        color: white;
+        color: #f65648;
       }
     }
   }