Add tooltips to various components and improve styling for better user experience

app/src/modules/builder/groups/zoneGroup.tsx

@@ -14,8 +14,6 @@ import {
   useZones,
   useZonePoints,
 } from "../../../store/store";
-// import { setZonesApi } from "../../../services/factoryBuilder/zones/setZonesApi";
-// import { deleteZonesApi } from "../../../services/factoryBuilder/zones/deleteZoneApi";
 import { getZonesApi } from "../../../services/factoryBuilder/zones/getZonesApi";
 
 import * as CONSTANTS from "../../../types/world/worldConstants";
@@ -37,10 +35,10 @@ const ZoneGroup: React.FC = () => {
   const { toggleView } = useToggleView();
   const { deletePointOrLine, setDeletePointOrLine } = useDeletePointOrLine();
   const { removedLayer, setRemovedLayer } = useRemovedLayer();
-  const { toolMode, setToolMode } = useToolMode();
+  const { toolMode } = useToolMode();
   const { movePoint, setMovePoint } = useMovePoint();
-  const { deleteTool, setDeleteTool } = useDeleteTool();
-  const { activeLayer, setActiveLayer } = useActiveLayer();
+  const { setDeleteTool } = useDeleteTool();
+  const { activeLayer } = useActiveLayer();
   const { socket } = useSocketStore();
 
   const groupsRef = useRef<any>();
@@ -204,6 +202,7 @@ const ZoneGroup: React.FC = () => {
     socket.emit("v2:zone:set", input);
   };
 
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   const updateZoneToBackend = async (zone: {
     zoneId: string;
     zoneName: string;
@@ -271,6 +270,7 @@ const ZoneGroup: React.FC = () => {
     socket.emit("v2:zone:delete", input);
   };
 
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   const handleDeleteZone = (zoneId: string) => {
     const updatedZones = zones.filter((zone: any) => zone.zoneId !== zoneId);
     setZones(updatedZones);
@@ -290,7 +290,6 @@ const ZoneGroup: React.FC = () => {
       );
       setZonePoints(updatedzonePoints);
     }
-
     deleteZoneFromBackend(zoneId);
   };
 
@@ -526,11 +525,12 @@ const ZoneGroup: React.FC = () => {
       setEndPoint(point);
     }
   });
+
   return (
     <group ref={groupsRef} name="zoneGroup">
       <group name="zones" visible={!toggleView}>
         {zones.map((zone: any) => (
-          <group key={zone.zoneId} name={zone.zoneName}>
+          <group key={zone.zoneId} name={zone.zoneName} visible={false}>
             {zone.points
               .slice(0, -1)
               .map((point: [number, number, number], index: number) => {
@@ -563,7 +563,6 @@ const ZoneGroup: React.FC = () => {
                     key={index}
                     position={midpoint}
                     rotation={[0, -angle, 0]}
-                    visible={false}
                   >
                     <planeGeometry args={[planeWidth, planeHeight]} />
                     <primitive