Enhance UI components: add active state to ZoneItem, refactor EditWidgetOption and RealTimeVisualization styles, and implement RenameTooltip for dynamic renaming functionality.

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;

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"

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"