uid generater

app/src/components/layout/sidebarRight/SideBarRight.tsx

@@ -54,12 +54,30 @@ const SideBarRight: React.FC = () => {
           )}
         </div>
       )}
+<<<<<<< Updated upstream
       {toggleUI && (
         <div className="sidebar-right-container">
           <div className="sidebar-right-content-container">
             <MachineMechanics />
           </div>
         </div>
+=======
+      {/* mechanics */}
+      {toggleUI && (
+        <>
+          {/* {activeModule === "simulation" && activeList === "mechanics" && ( */}
+          {activeModule === "simulation" && (
+            <div className="sidebar-right-container">
+              <div className="sidebar-right-content-container">
+                <MachineMechanics />
+              </div>
+            </div>
+          )}
+
+          {/* realtime visualization */}
+          {activeModule === "visualization" && <Visualization />}
+        </>
+>>>>>>> Stashed changes
       )}
     </div>
   );

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

@@ -1,10 +1,15 @@
-import React, { useState } from "react";
+import React, { useRef, useState } from "react";
 import {
   AddIcon,
   InfoIcon,
   RemoveIcon,
   ResizeHeightIcon,
 } from "../../../icons/ExportCommonIcons";
+import RenameInput from "../../../ui/inputs/RenameInput";
+import InputWithDropDown from "../../../ui/inputs/InputWithDropDown";
+import LabledDropdown from "../../../ui/inputs/LabledDropdown";
+import RegularDropDown from "../../../ui/inputs/RegularDropDown";
+import { handleResize } from "../../../../functions/handleResizePannel";
 
 const MachineMechanics: React.FC = () => {
   const [actionList, setActionList] = useState<string[]>([]);
@@ -13,7 +18,9 @@ const MachineMechanics: React.FC = () => {
     type: "action" | "trigger";
     name: string;
   } | null>(null);
-  const [editedName, setEditedName] = useState<string>("");
+
+  const actionsContainerRef = useRef<HTMLDivElement>(null);
+  const triggersContainerRef = useRef<HTMLDivElement>(null);
 
   const handleAddAction = () => {
     setActionList([...actionList, `Action ${actionList.length + 1}`]);
@@ -30,7 +37,6 @@ const MachineMechanics: React.FC = () => {
       selectedItem.name === actionList[index]
     ) {
       setSelectedItem(null);
-      setEditedName("");
     }
   };
 
@@ -41,133 +47,135 @@ const MachineMechanics: React.FC = () => {
       selectedItem.name === triggerList[index]
     ) {
       setSelectedItem(null);
-      setEditedName("");
     }
   };
 
   const handleSelectItem = (type: "action" | "trigger", name: string) => {
     setSelectedItem({ type, name });
-    setEditedName(name);
-  };
-
-  const handleSave = () => {
-    if (!selectedItem) return;
-
-    if (selectedItem.type === "action") {
-      setActionList(
-        actionList.map((action) =>
-          action === selectedItem.name ? editedName : action
-        )
-      );
-    } else if (selectedItem.type === "trigger") {
-      setTriggerList(
-        triggerList.map((trigger) =>
-          trigger === selectedItem.name ? editedName : trigger
-        )
-      );
-    }
-
-    setSelectedItem({ ...selectedItem, name: editedName });
   };
 
   return (
     <div className="machine-mechanics-container">
-      <div className="actions">
+      <div className="machine-mechanics-header">Selected Object</div>
-        <div className="header">
+      <div className="process-list-container">
-          <div className="header-value">Actions</div>
+        <div className="label">Process:</div>
-          <div className="add-button" onClick={handleAddAction}>
+        <RegularDropDown
-            <AddIcon /> Add
+          header={"activeOption"}
-          </div>
+          options={["options"]}
-        </div>
+          onSelect={() => {}}
-        <div className="lists-main-container">
+        />
-          <div className="list-container">
-            {actionList.map((action, index) => (
-              <div
-                key={index}
-                className={`list-item ${
-                  selectedItem?.type === "action" && selectedItem.name === action
-                    ? "active"
-                    : ""
-                }`}
-              >
-                <div className="value" onClick={() => handleSelectItem("action", action)}>
-                  {action}
-                </div>
-                <div
-                  className="remove-button"
-                  onClick={() => handleRemoveAction(index)}
-                >
-                  <RemoveIcon />
-                </div>
-              </div>
-            ))}
-          </div>
-          <div className="resize-icon">
-            <ResizeHeightIcon />
-          </div>
-        </div>
       </div>
-      <div className="triggers">
+      <div className="machine-mechanics-content-container">
-        <div className="header">
+        <div className="actions">
-          <div className="header-value">Triggers</div>
+          <div className="header">
-          <div className="add-button" onClick={handleAddTrigger}>
+            <div className="header-value">Actions</div>
-            <AddIcon /> Add
+            <div className="add-button" onClick={handleAddAction}>
-          </div>
+              <AddIcon /> Add
-        </div>
-        <div className="lists-main-container">
-          <div className="list-container">
-            {triggerList.map((trigger, index) => (
-              <div
-                key={index}
-                className={`list-item ${
-                  selectedItem?.type === "trigger" &&
-                  selectedItem.name === trigger
-                    ? "active"
-                    : ""
-                }`}
-              >
-                <div className="value" onClick={() => handleSelectItem("trigger", trigger)}>
-                  {trigger}
-                </div>
-                <div
-                  className="remove-button"
-                  onClick={() => handleRemoveTrigger(index)}
-                >
-                  <RemoveIcon />
-                </div>
-              </div>
-            ))}
-          </div>
-          <div className="resize-icon">
-            <ResizeHeightIcon />
-          </div>
-        </div>
-      </div>
-      <div className="selected-properties-container">
-        {selectedItem && (
-          <>
-            <div>
-              <label>Edit Name:</label>
-              <input
-                type="text"
-                value={editedName}
-                onChange={(e) => setEditedName(e.target.value)}
-              />
             </div>
-            {/* Add other Properties Like:
+          </div>
-             * Object Selection Dropdown
+          <div
-             * Buffer Time
+            className="lists-main-container"
-             * Get Value From Object
+            ref={actionsContainerRef}
-             * Action
+            style={{ height: "120px" }}
-             * etc.
+          >
-             */}
+            <div className="list-container">
-            <div onClick={handleSave}>Update</div> {/* remove this */}
+              {actionList.map((action, index) => (
-          </>
+                <div
-        )}
+                  key={index}
-      </div>
+                  className={`list-item ${
-      <div className="footer">
+                    selectedItem?.type === "action" &&
-        <InfoIcon />
+                    selectedItem.name === action
-        By Selecting Path, you can create Object Triggers.
+                      ? "active"
+                      : ""
+                  }`}
+                >
+                  <div
+                    className="value"
+                    onClick={() => handleSelectItem("action", action)}
+                  >
+                    <RenameInput value={action} />
+                  </div>
+                  <div
+                    className="remove-button"
+                    onClick={() => handleRemoveAction(index)}
+                  >
+                    <RemoveIcon />
+                  </div>
+                </div>
+              ))}
+            </div>
+            <div
+              className="resize-icon"
+              id="action-resize"
+              onMouseDown={(e) => handleResize(e, actionsContainerRef)}
+            >
+              <ResizeHeightIcon />
+            </div>
+          </div>
+        </div>
+        <div className="triggers">
+          <div className="header">
+            <div className="header-value">Triggers</div>
+            <div className="add-button" onClick={handleAddTrigger}>
+              <AddIcon /> Add
+            </div>
+          </div>
+          <div
+            className="lists-main-container"
+            ref={triggersContainerRef}
+            style={{ height: "120px" }}
+          >
+            <div className="list-container">
+              {triggerList.map((trigger, index) => (
+                <div
+                  key={index}
+                  className={`list-item ${
+                    selectedItem?.type === "trigger" &&
+                    selectedItem.name === trigger
+                      ? "active"
+                      : ""
+                  }`}
+                >
+                  <div
+                    className="value"
+                    onClick={() => handleSelectItem("trigger", trigger)}
+                  >
+                    <RenameInput value={trigger} />
+                  </div>
+                  <div
+                    className="remove-button"
+                    onClick={() => handleRemoveTrigger(index)}
+                  >
+                    <RemoveIcon />
+                  </div>
+                </div>
+              ))}
+            </div>
+            <div
+              className="resize-icon"
+              id="trigger-resize"
+              onMouseDown={(e) => handleResize(e, triggersContainerRef)}
+            >
+              <ResizeHeightIcon />
+            </div>
+          </div>
+        </div>
+        <div className="selected-properties-container">
+          {selectedItem && (
+            <>
+              <div className="properties-header">{selectedItem.name}</div>
+              <LabledDropdown
+                defaultOption="On-hit"
+                options={["On-hit", "Buffer"]}
+              />
+              <InputWithDropDown label="Speed" value="" activeOption=".mm" />
+            </>
+          )}
+        </div>
+        <div className="footer">
+          <InfoIcon />
+          By Selecting Path, you can create Object Triggers.
+        </div>
       </div>
     </div>
   );

app/src/components/ui/list/DropDownList.tsx

@@ -81,12 +81,7 @@ const DropDownList: React.FC<DropDownListProps> = ({
                 showAddIcon={false}
                 items={[]}
               />
-              <DropDownList
+              {/* change this */}
-                value="Paths"
-                showKebabMenu={false}
-                showAddIcon={false}
-                items={[]}
-              />
             </>
           )}
         </div>

app/src/functions/generateUId.ts

@@ -0,0 +1,2 @@
+export const generateUniqueId = (): string =>
+    `${Date.now()}-${Math.random().toString(36).slice(2, 11)}`;

app/src/store/useModuleStore.ts

@@ -7,7 +7,7 @@ interface ModuleStore {
 }
 
 const useModuleStore = create<ModuleStore>((set) => ({
-  activeModule: 'builder', // Initial state
+  activeModule: "simulation", // Initial state
   setActiveModule: (module) => set({ activeModule: module }), // Update state
 }));
 

app/src/styles/abstracts/variables.scss

@@ -35,7 +35,9 @@ $highlight-accent-color-dark: #403e6a; // Highlighted accent for dark mode
 $background-color: #fcfdfd; // Main background color
 $background-color-dark: #19191d; // Main background color for dark mode
 $background-color-secondary: #e1e0ff80; // Secondary background color
+$background-color-gray: #F3F3F3; // Secondary background color
 $background-color-secondary-dark: #1f1f2399; // Secondary background color for dark mode
+$background-color-gray-dark: #232323; // Secondary background color
 
 // Border colors
 $border-color: #e0dfff; // Default border color

app/src/styles/base/base.scss

@@ -15,6 +15,7 @@
   // Background colors
   --background-color: #{$background-color}; // Main background color
   --background-color-secondary: #{$background-color-secondary}; // Secondary background color
+  --background-color-gray: #{$background-color-gray}; // Secondary background color
 
   // Border colors
   --border-color: #{$border-color}; // Border color for light theme
@@ -47,6 +48,7 @@
   // Background colors
   --background-color: #{$background-color-dark}; // Main background color
   --background-color-secondary: #{$background-color-secondary-dark}; // Secondary background color
+  --background-color-gray: #{$background-color-gray-dark}; // Secondary background color
 
   // Border colors
   --border-color: #{$border-color-dark}; // Border color for dark theme
@@ -109,7 +111,7 @@ body {
 ::-webkit-scrollbar-thumb {
   background: var(--accent-color); /* Scrollbar handle color */
   border-radius: 4px; /* Rounded corners */
-  border: 2px solid #f4f4f4; /* Padding around the scrollbar handle */
+  border: 2px solid var(--background-color); /* Padding around the scrollbar handle */
 }
 
 ::-webkit-scrollbar-thumb:hover {

app/src/styles/components/input.scss

@@ -18,11 +18,11 @@
   color: var(--input-text-color);
   font-size: var(--font-size-regular);
   font-weight: var(--font-weight-regular);
+  background-color: var(--background-color);
   border: 1px solid var(--accent-color);
   outline: none;
   border-radius: #{$border-radius-small};
-  line-height: 26px;
+  padding: 2px 8px;
-  padding: 0 8px;
 }
 
 .toggle-header-container {
@@ -144,8 +144,82 @@
 .project-dropdowm-container {
   position: relative;
   height: 32px;
-  .project-name{
+  .project-name {
     line-height: 32px;
     height: 100%;
   }
 }
+.input.default {
+  text-align: center;
+  display: flex;
+  overflow: hidden;
+  position: relative;
+  input {
+    border: 1px solid var(--border-color);
+    border-radius: #{$border-radius-medium};
+    padding: 3px 8px;
+    outline: none;
+    width: 100%;
+    background-color: var(--background-color);
+    &:focus,
+    &:active {
+      border: 1px solid var(--accent-color);
+    }
+  }
+  .dropdown {
+    position: absolute;
+    right: 4px;
+    padding: 2px 4px;
+    background-color: var(--highlight-accent-color);
+    font-size: var(--font-size-small);
+    border-radius: #{$border-radius-medium};
+    top: 3px;
+    .active-option {
+      font-size: inherit;
+      position: relative;
+    }
+  }
+}
+
+.regularDropdown-container {
+  width: 100%;
+  border: 1px solid var(--border-color); // Ensure $border-color is defined
+  border-radius: #{$border-radius-medium};
+  position: relative;
+  cursor: pointer;
+  padding: 2px 6px;
+
+  .dropdown-header {
+    height: 100%;
+    @include flex-space-between;
+    cursor: pointer;
+    border: 1px solid var(--primary-color);
+    border-radius: #{$border-radius-small};
+    background-color: var(--background-color);
+  }
+
+  .dropdown-options {
+    position: absolute;
+    width: 100%;
+    background-color: var(--primary-color);
+    border: 1px solid var(--border-color);
+    border-radius: 4px;
+    z-index: 10;
+    left: 0;
+    top: 104%;
+    padding: 4px;
+    .option {
+      padding: 2px;
+      cursor: pointer;
+      border-radius: #{$border-radius-small};
+      &:hover {
+        color: var(--accent-color);
+        background-color: var(--highlight-accent-color);
+      }
+    }
+  }
+
+  .icon {
+    height: auto;
+  }
+}

app/src/styles/components/lists.scss

@@ -9,6 +9,10 @@
   .head {
     @include flex-space-between;
     padding: 6px 12px;
+    .value {
+      color: var(--text-color);
+      font-weight: #{$medium-weight};
+    }
     .options {
       @include flex-center;
       gap: 6px;
@@ -37,6 +41,10 @@
         width: 100%;
         text-align: start;
         max-width: 180px;
+        font-size: var(--font-size-regular);
+        .input-value {
+          font-size: inherit;
+        }
       }
       .options-container {
         @include flex-center;

app/src/styles/components/tools.scss

@@ -0,0 +1,150 @@
+<<<<<<< Updated upstream
+=======
+@use "../abstracts/variables" as *;
+@use "../abstracts/mixins" as *;
+
+.tools-container {
+  @include flex-center;
+  position: fixed;
+  bottom: 32px;
+  left: 50%;
+  transform: translate(-50%, 0);
+  padding: 8px;
+  gap: 10px;
+  box-shadow: #{$box-shadow-medium};
+  border-radius: #{$border-radius-large};
+  width: fit-content;
+  transition: width 0.2s;
+  background-color: var(--background-color);
+  .split {
+    height: 20px;
+    width: 2px;
+    border-radius: 2px;
+    background: var(--highlight-accent-color);
+  }
+  .draw-tools,
+  .general-options,
+  .activeDropicon {
+    @include flex-center;
+    gap: 8px;
+    interpolate-size: allow-keywords;
+    width: 0;
+    opacity: 0;
+    animation: expandWidth 0.2s ease-in-out forwards;
+    .tool-button {
+      @include flex-center;
+      height: 28px;
+      width: 28px;
+      cursor: pointer;
+      border-radius: #{$border-radius-small};
+      &:hover {
+        background: color-mix(
+          in srgb,
+          var(--highlight-accent-color) 60%,
+          transparent
+        );
+      }
+    }
+    .active {
+      background-color: var(--accent-color);
+      &:hover {
+        background-color: var(--accent-color);
+      }
+    }
+  }
+  .activeDropicon {
+    gap: 2px;
+    .drop-down-option-button {
+      @include flex-center;
+      height: 28px;
+      cursor: pointer;
+      border-radius: #{$border-radius-small};
+      position: relative;
+      &:hover {
+        background: color-mix(
+          in srgb,
+          var(--highlight-accent-color) 60%,
+          transparent
+        );
+      }
+      .drop-down-container {
+        position: absolute;
+        bottom: 40px;
+        left: 0;
+        box-shadow: #{$box-shadow-medium};
+        padding: 8px;
+        border-radius: #{$border-radius-large};
+        background-color: var(--background-color);
+        .option-list {
+          margin: 4px 0;
+          display: flex;
+          align-items: center;
+          white-space: nowrap;
+          border-radius: #{$border-radius-medium};
+          gap: 6px;
+          padding: 4px;
+          &:hover {
+            background-color: var(--highlight-accent-color);
+            color: var(--accent-color);
+            path {
+              stroke: var(--accent-color);
+            }
+          }
+          .active-option {
+            height: 12px;
+            width: 12px;
+            @include flex-center;
+          }
+          .option {
+            color: inherit;
+          }
+        }
+      }
+    }
+  }
+  .toggle-threed-button {
+    @include flex-center;
+    padding: 3px;
+    border-radius: #{$border-radius-small};
+    background-color: var(--highlight-accent-color);
+    gap: 2px;
+    position: relative;
+    .toggle-option {
+      font-size: var(--font-size-small);
+      padding: 2px;
+      z-index: 1;
+      transition: all 0.2s;
+    }
+    &::after {
+      content: "";
+      position: absolute;
+      background-color: var(--accent-color);
+      left: 3px;
+      top: 3px;
+      height: 18px;
+      width: 18px;
+      border-radius: #{$border-radius-small};
+      transition: all 0.2s;
+    }
+    .active {
+      color: var(--highlight-accent-color);
+    }
+  }
+  .toggled {
+    &::after {
+      left: 24px;
+    }
+  }
+}
+
+@keyframes expandWidth {
+  from {
+    width: 0;
+    opacity: 0;
+  }
+  to {
+    width: fit-content;
+    opacity: 1;
+  }
+}
+>>>>>>> Stashed changes

app/src/styles/layout/sidebar.scss

@@ -53,7 +53,7 @@
     display: flex;
     flex-direction: column;
     .sidebar-left-content-container {
-      border-bottom: 1px solid var(--border-color);
+      // border-bottom: 1px solid var(--border-color);
       // flex: 1;
       height: calc(100% - 36px);
       position: relative;
@@ -181,9 +181,11 @@
 }
 
 .machine-mechanics-container {
-  .header {
+  .process-list-container {
-    @include flex-space-between;
+    display: flex;
+    align-items: center;
     padding: 6px 12px;
+<<<<<<< Updated upstream
     .add-button {
       @include flex-center;
       padding: 2px 4px;
@@ -214,19 +216,103 @@
       .active {
         background: var(--accent-color);
         .value {
+=======
+    gap: 12px;
+  }
+  .machine-mechanics-header {
+    padding: 8px 12px;
+    border: 1px solid var(--highlight-accent-color);
+    border-right: none;
+    border-left: none;
+    color: var(--accent-color);
+    font-weight: var(--font-weight-bold);
+  }
+  .machine-mechanics-content-container {
+    height: 100%;
+    overflow: auto;
+    max-height: calc(60vh - (35px + 38px));
+    .actions,
+    .triggers {
+      .header {
+        @include flex-space-between;
+        padding: 6px 12px;
+
+        .add-button {
+          @include flex-center;
+          padding: 2px 4px;
+          background: var(--accent-color);
+>>>>>>> Stashed changes
           color: var(--primary-color);
+          border-radius: #{$border-radius-small};
+          cursor: pointer;
+
+          path {
+            stroke: var(--primary-color);
+          }
         }
+      }
+    }
+
+    .lists-main-container {
+      margin: 2px 8px;
+      width: calc(100% - 16px);
+      background: var(--background-color-gray);
+      border-radius: #{$border-radius-small};
+      min-height: 120px;
+      height: 120px;
+
+      .list-container {
+        padding: 4px;
+        height: calc(100% - 16px);
+
+        .list-item {
+          @include flex-space-between;
+          padding: 4px 12px;
+          width: 100%;
+          margin: 2px 0;
+          border-radius: #{$border-radius-small};
+        }
+<<<<<<< Updated upstream
         path {
           stroke: var(--primary-color);
         }
       }
       .remove-button {
+=======
+
+        .active {
+          background: var(--highlight-accent-color);
+
+          .value,
+          .input-value {
+            color: var(--accent-color);
+          }
+
+          path {
+            stroke: var(--accent-color);
+          }
+        }
+
+        .remove-button {
+          @include flex-center;
+          height: 12px;
+          width: 12px;
+          cursor: pointer;
+        }
+      }
+
+      .resize-icon {
+>>>>>>> Stashed changes
         @include flex-center;
-        height: 12px;
+        padding: 4px;
-        width: 12px;
+        cursor: grab;
-        cursor: pointer;
+
+        &:active {
+          cursor: grabbing;
+        }
       }
     }
+<<<<<<< Updated upstream
     .resize-icon {
       @include flex-center;
       padding: 4px;
@@ -246,4 +332,49 @@
     padding: 12px;
     font-size: var(--font-size-tiny);
   }
+=======
+
+    .selected-properties-container {
+      padding: 12px;
+      width: 100%;
+      // overflow: hidden;
+      .properties-header {
+        text-transform: capitalize;
+        padding: 8px 6px;
+        color: var(--accent-color);
+        font-weight: var(--font-weight-bold);
+        border-bottom: 1px solid var(--border-color);
+        span {
+          color: inherit;
+          text-transform: none;
+        }
+      }
+      .value-field-container {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        width: 100%;
+        padding: 8px 0;
+        .label {
+          width: 40%;
+          height: 100%;
+        }
+        .input {
+          width: 60%;
+        }
+      }
+      .regularDropdown-container {
+        width: 60%;
+      }
+    }
+
+    .footer {
+      @include flex-center;
+      justify-content: flex-start;
+      gap: 4px;
+      padding: 12px;
+      font-size: var(--font-size-tiny);
+    }
+  }
+>>>>>>> Stashed changes
 }