add new features and optimizations to simulation and builder modules

app/src/components/layout/sidebarRight/mechanics/MachineMechanics.tsx

@@ -11,8 +11,11 @@ import LabledDropdown from "../../../ui/inputs/LabledDropdown";
 import RegularDropDown from "../../../ui/inputs/RegularDropDown";
 import { handleResize } from "../../../../functions/handleResizePannel";
 import EyeDropInput from "../../../ui/inputs/EyeDropInput";
+import { useSelectedActionSphere } from "../../../../store/store";
 
 const MachineMechanics: React.FC = () => {
+  const { selectedActionSphere, setSelectedActionSphere } = useSelectedActionSphere();
+  console.log('selectedActionSphere: ', selectedActionSphere);
   const [actionList, setActionList] = useState<string[]>([]);
   const [triggerList, setTriggerList] = useState<string[]>([]);
   const [selectedItem, setSelectedItem] = useState<{
@@ -68,8 +71,8 @@ const MachineMechanics: React.FC = () => {
 
   return (
     <div className="machine-mechanics-container">
-      <div className="machine-mechanics-header">Selected Object</div>
-      <div className="process-list-container">
+      <div className="machine-mechanics-header">{selectedActionSphere.path.modelName}</div>
+      {/* <div className="process-list-container">
         <div className="label">Process:</div>
         <RegularDropDown
           header={activeProcess || "add process ->"}
@@ -79,7 +82,7 @@ const MachineMechanics: React.FC = () => {
         <div className="add-new-process" onClick={handleAddProcess}>
           <AddIcon />
         </div>
-      </div>
+      </div> */}
       <div className="machine-mechanics-content-container">
         <div className="actions">
           <div className="header">
@@ -97,12 +100,11 @@ const MachineMechanics: React.FC = () => {
               {actionList.map((action, index) => (
                 <div
                   key={index}
-                  className={`list-item ${
-                    selectedItem?.type === "action" &&
+                  className={`list-item ${selectedItem?.type === "action" &&
                     selectedItem.name === action
-                      ? "active"
-                      : ""
-                  }`}
+                    ? "active"
+                    : ""
+                    }`}
                 >
                   <div
                     className="value"
@@ -144,12 +146,11 @@ const MachineMechanics: React.FC = () => {
               {triggerList.map((trigger, index) => (
                 <div
                   key={index}
-                  className={`list-item ${
-                    selectedItem?.type === "trigger" &&
+                  className={`list-item ${selectedItem?.type === "trigger" &&
                     selectedItem.name === trigger
-                      ? "active"
-                      : ""
-                  }`}
+                    ? "active"
+                    : ""
+                    }`}
                 >
                   <div
                     className="value"
@@ -187,7 +188,7 @@ const MachineMechanics: React.FC = () => {
                 label="Speed"
                 value=""
                 activeOption=".mm"
-                onChange={() => {}}
+                onChange={() => { }}
               />
               <EyeDropInput />
             </>