refactor: update z-index values, enhance UserAuth checkbox, and improve sidebar styles; add ZoneProperties and Vector3Input components

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

@@ -14,8 +14,8 @@ import EyeDropInput from "../../../ui/inputs/EyeDropInput";
 import { useSelectedActionSphere } from "../../../../store/store";
 
 const MachineMechanics: React.FC = () => {
-  const { selectedActionSphere, setSelectedActionSphere } = useSelectedActionSphere();
-  console.log('selectedActionSphere: ', selectedActionSphere);
+  const { selectedActionSphere } = useSelectedActionSphere();
+  console.log("selectedActionSphere: ", selectedActionSphere);
   const [actionList, setActionList] = useState<string[]>([]);
   const [triggerList, setTriggerList] = useState<string[]>([]);
   const [selectedItem, setSelectedItem] = useState<{
@@ -71,7 +71,9 @@ const MachineMechanics: React.FC = () => {
 
   return (
     <div className="machine-mechanics-container">
-      <div className="machine-mechanics-header">{selectedActionSphere.path.modelName}</div>
+      <div className="machine-mechanics-header">
+        {selectedActionSphere?.path?.modelName || "path name not found"}
+      </div>
       {/* <div className="process-list-container">
         <div className="label">Process:</div>
         <RegularDropDown
@@ -100,11 +102,12 @@ 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"
@@ -146,11 +149,12 @@ 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"
@@ -188,7 +192,7 @@ const MachineMechanics: React.FC = () => {
                 label="Speed"
                 value=""
                 activeOption=".mm"
-                onChange={() => { }}
+                onChange={() => {}}
               />
               <EyeDropInput />
             </>