added ui and integerated ui for the vehicle mechanics

app/src/components/ui/Tools.tsx

@@ -23,6 +23,7 @@ import {
   useDeleteModels,
   useDeletePointOrLine,
   useMovePoint,
+  useRefTextUpdate,
   useSelectedWallItem,
   useToggleView,
   useToolMode,
@@ -53,6 +54,7 @@ const Tools: React.FC = () => {
   const { movePoint, setMovePoint } = useMovePoint();
   const { toolMode, setToolMode } = useToolMode();
   const { activeTool, setActiveTool } = useActiveTool();
+  const { refTextupdate, setRefTextUpdate } = useRefTextUpdate();
 
   // Reset activeTool whenever activeModule changes
   useEffect(() => {
@@ -103,6 +105,7 @@ const Tools: React.FC = () => {
     setTransformMode(null);
     setMovePoint(false);
     setDeletePointOrLine(false);
+    setRefTextUpdate((prevUpdate) => prevUpdate - 1);
 
     switch (activeTool) {
       case "Move":

app/src/components/ui/inputs/EyeDropInput.tsx

@@ -1,18 +1,30 @@
 import React from "react";
-import RegularDropDown from "./RegularDropDown";
 import { EyeDroperIcon } from "../../icons/ExportCommonIcons";
 
-const EyeDropInput: React.FC = () => {
+interface EyeDropInputProps {
+  label: string;
+  value: string;
+  onChange: (value: string) => void;
+  options?: string[];
+}
+
+const EyeDropInput: React.FC<EyeDropInputProps> = ({
+  label = "Object",
+  onChange,
+}) => {
+  const handleEyeDropClick = () => {
+    // Here you would typically implement the eye dropper functionality
+    // For now, we'll just simulate selecting a value
+    const simulatedValue = "picked_value"; // Replace with actual eye dropper logic
+    onChange(simulatedValue);
+  };
+
   return (
     <div className="eye-dropper-input-container">
-      <div className="label">Object</div>
+      <div className="label">{label}</div>
       <div className="input-container">
-        <RegularDropDown
-          header="select object"
-          options={[]}
-          onSelect={() => {}}
-        />
-        <div className="eye-picker-button">
+      <input disabled type="text" />
+        <div className="eye-picker-button" onClick={handleEyeDropClick}>
           <EyeDroperIcon isActive={false} />
         </div>
       </div>
@@ -20,4 +32,4 @@ const EyeDropInput: React.FC = () => {
   );
 };
 
-export default EyeDropInput;
+export default EyeDropInput;