From 1bfa004dc66e925c51af3c008486b91de95f9e2c Mon Sep 17 00:00:00 2001
From: Vishnu <vishnu@hexrfactory.com>
Date: Sat, 3 May 2025 10:41:34 +0530
Subject: [PATCH] Enhance UI components: add active state to ZoneItem, refactor
 EditWidgetOption and RealTimeVisualization styles, and implement
 RenameTooltip for dynamic renaming functionality.

---
 .../components/ui/features/RenameTooltip.tsx  | 52 +++++++++++++++++++
 app/src/components/ui/list/List.tsx           |  3 +-
 .../components/ui/menu/EditWidgetOption.tsx   | 10 ++--
 .../instances/ikInstance/ikInstance.tsx       |  5 +-
 .../visualization/RealTimeVisulization.tsx    |  2 +-
 app/src/styles/components/lists.scss          | 12 +----
 app/src/styles/pages/realTimeViz.scss         |  5 +-
 app/src/styles/pages/userAuth.scss            | 10 ++--
 8 files changed, 70 insertions(+), 29 deletions(-)
 create mode 100644 app/src/components/ui/features/RenameTooltip.tsx

diff --git a/app/src/components/ui/features/RenameTooltip.tsx b/app/src/components/ui/features/RenameTooltip.tsx
new file mode 100644
index 0000000..ae64bf0
--- /dev/null
+++ b/app/src/components/ui/features/RenameTooltip.tsx
@@ -0,0 +1,52 @@
+import React, { useState } from "react";
+import { RenameIcon } from "../../icons/ContextMenuIcons";
+import {
+  useLeftData,
+  useTopData,
+} from "../../../store/visualization/useZone3DWidgetStore";
+
+type RenameTooltipProps = {
+  name: string;
+  onSubmit: (newName: string) => void;
+};
+
+const RenameTooltip: React.FC<RenameTooltipProps> = ({ name, onSubmit }) => {
+  const [value, setValue] = useState(name);
+
+  const { top } = useTopData();
+  const { left } = useLeftData();
+
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    onSubmit(value.trim());
+  };
+
+  return (
+    <div
+      className="rename-tool-tip"
+      style={{
+        position: "absolute",
+        top: `${top}px`,
+        left: `${left}px`,
+        zIndex: 100,
+      }}
+    >
+      <div className="header">
+        <div className="icon">
+          <RenameIcon />
+        </div>
+        <div className="name">Name</div>
+      </div>
+      <form className="input" onSubmit={handleSubmit}>
+        <input
+          type="text"
+          value={value}
+          onChange={(e) => setValue(e.target.value)}
+          autoFocus
+        />
+      </form>
+    </div>
+  );
+};
+
+export default RenameTooltip;
diff --git a/app/src/components/ui/list/List.tsx b/app/src/components/ui/list/List.tsx
index eebcaa7..b5403e1 100644
--- a/app/src/components/ui/list/List.tsx
+++ b/app/src/components/ui/list/List.tsx
@@ -27,6 +27,7 @@ interface ZoneItem {
   id: string;
   name: string;
   assets?: Asset[];
+  active?: boolean;
 }
 
 interface ListProps {
@@ -157,7 +158,7 @@ const List: React.FC<ListProps> = ({ items = [], remove }) => {
           {items?.map((item) => (
             <React.Fragment key={`zone-${item.id}`}>
               <li className="list-container">
-                <div className="list-item">
+                <div className={`list-item ${item.active ? "active" : ""}`}>
                   <div className="zone-header">
                     <button
                       className="value"
diff --git a/app/src/components/ui/menu/EditWidgetOption.tsx b/app/src/components/ui/menu/EditWidgetOption.tsx
index eb937c8..035b26b 100644
--- a/app/src/components/ui/menu/EditWidgetOption.tsx
+++ b/app/src/components/ui/menu/EditWidgetOption.tsx
@@ -16,21 +16,17 @@ const EditWidgetOption: React.FC<EditWidgetOptionProps> = ({
   const { top } = useTopData();
   const { left } = useLeftData();
 
-  useEffect(() => {
-
-  }, [top, left]);
-
   return (
     <div
-      className="editWidgetOptions-wrapper"
+      className="context-menu-options-wrapper"
       style={{
         position: "absolute",
         top: `${top}px`,
         left: `${left}px`,
-        zIndex: 10000,
+        zIndex: 100,
       }}
     >
-      <div className="editWidgetOptions">
+      <div className="context-menu-options">
         {options.map((option, index) => (
           <div
             className="option"
diff --git a/app/src/modules/simulation/roboticArm/instances/ikInstance/ikInstance.tsx b/app/src/modules/simulation/roboticArm/instances/ikInstance/ikInstance.tsx
index e692ca5..9e262f2 100644
--- a/app/src/modules/simulation/roboticArm/instances/ikInstance/ikInstance.tsx
+++ b/app/src/modules/simulation/roboticArm/instances/ikInstance/ikInstance.tsx
@@ -67,13 +67,12 @@ function IKInstance({ modelUrl, setIkSolver, ikSolver, armBot, groupRef }: IKIns
         setIkSolver(solver);
 
         const helper = new CCDIKHelper(OOI.Skinned_Mesh, iks, 0.05)
-        // groupRef.current.add(helper);
 
         setSelectedArm(OOI.Target_Bone);
 
-        scene.add(helper)
+        // scene.add(helper)
 
-    }, [gltf]);
+    }, [cloned, gltf, setIkSolver]);
 
     return (
         <>
diff --git a/app/src/modules/visualization/RealTimeVisulization.tsx b/app/src/modules/visualization/RealTimeVisulization.tsx
index a8f44b4..2e1e536 100644
--- a/app/src/modules/visualization/RealTimeVisulization.tsx
+++ b/app/src/modules/visualization/RealTimeVisulization.tsx
@@ -249,7 +249,7 @@ const RealTimeVisulization: React.FC = () => {
   useEffect(() => {
     const handleClickOutside = (event: MouseEvent) => {
       const editWidgetOptions = document.querySelector(
-        ".editWidgetOptions-wrapper"
+        ".context-menu-options-wrapper"
       );
       if (
         editWidgetOptions &&
diff --git a/app/src/styles/components/lists.scss b/app/src/styles/components/lists.scss
index 894eac1..27ccda8 100644
--- a/app/src/styles/components/lists.scss
+++ b/app/src/styles/components/lists.scss
@@ -2,8 +2,6 @@
 @use "../abstracts/mixins" as *;
 
 .dropdown-list-container {
-  border-bottom: 1px solid var(--border-color);
-
   .lists-container {
     margin-bottom: 6px;
   }
@@ -44,7 +42,7 @@
       text-align: center;
       padding: 4px 8px;
       border-radius: #{$border-radius-large};
-      .zone-header{
+      .zone-header {
         @include flex-center;
         .value {
           width: 100%;
@@ -62,16 +60,10 @@
           cursor: pointer;
         }
       }
-      &:first-child{
-        background: var(--highlight-accent-color);
-        .input-value{
-          color: var(--highlight-text-color);
-        }
-      }
     }
     .active {
       background: var(--highlight-accent-color);
-      .input-value{
+      .input-value {
         color: var(--highlight-text-color);
       }
     }
diff --git a/app/src/styles/pages/realTimeViz.scss b/app/src/styles/pages/realTimeViz.scss
index abc626a..3b1a26e 100644
--- a/app/src/styles/pages/realTimeViz.scss
+++ b/app/src/styles/pages/realTimeViz.scss
@@ -738,10 +738,10 @@
   outline-color: #ffe3e0;
 }
 
-.editWidgetOptions {
+.context-menu-options {
   position: absolute;
   background: var(--background-color);
-  backdrop-filter: blur(10px);
+  backdrop-filter: blur(20px);
   z-index: 3;
   display: flex;
   flex-direction: column;
@@ -749,6 +749,7 @@
   overflow: hidden;
   padding: 4px;
   min-width: 150px;
+  outline: 1px solid var(--border-color);
 
   .option {
     padding: 4px 10px;
diff --git a/app/src/styles/pages/userAuth.scss b/app/src/styles/pages/userAuth.scss
index 9d07dcf..c27b66f 100644
--- a/app/src/styles/pages/userAuth.scss
+++ b/app/src/styles/pages/userAuth.scss
@@ -48,16 +48,16 @@
     max-width: 350px;
     padding: 10px;
     margin-bottom: 20px;
-    border: 1px solid var(--accent-color);
+    border: 1px solid var(--highlight-text-color);
     border-radius: #{$border-radius-extra-large};
     background: transparent;
-    color: var(--accent-color);
+    color: var(--highlight-text-color);
     font-size: 14px;
     outline: none;
     cursor: pointer;
 
     .google-icon {
-      color: var(--accent-color);
+      color: var(--highlight-text-color);
       font-weight: bold;
       font-size: 16px;
       margin-right: 10px;
@@ -120,7 +120,7 @@
     .continue-button {
       width: 100%;
       padding: 10px;
-      background: var(--accent-gradient-color);
+      background: var(--background-color-button);
       color: var(--background-color);
       font-size: 14px;
       border: none;
@@ -158,7 +158,7 @@
     text-align: center;
 
     .link {
-      color: var(--accent-color);
+      color: var(--highlight-text-color);
       text-decoration: none;
       &:hover {
         text-decoration: underline;