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/styles/layout/sidebar.scss

@@ -366,15 +366,66 @@
     min-height: 50vh;
     padding-bottom: 12px;
     position: relative;
-    display: flex;
-    flex-direction: column;
+    overflow: auto;
 
     .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;
-        color: white;
+        background-color: #f657484d;
+        color: #f65648;
       }
     }
   }