feat: Refactor icon components and update button elements for improved accessibility and consistency

app/src/modules/scene/scene.tsx

@@ -9,28 +9,35 @@ import Simulation from "../simulation/simulation";
 import Collaboration from "../collaboration/collaboration";
 
 export default function Scene() {
-    const map = useMemo(() => [
-        { name: "forward", keys: ["ArrowUp", "w", "W"] },
-        { name: "backward", keys: ["ArrowDown", "s", "S"] },
-        { name: "left", keys: ["ArrowLeft", "a", "A"] },
-        { name: "right", keys: ["ArrowRight", "d", "D"] },],
-        []);
+  const map = useMemo(
+    () => [
+      { name: "forward", keys: ["ArrowUp", "w", "W"] },
+      { name: "backward", keys: ["ArrowDown", "s", "S"] },
+      { name: "left", keys: ["ArrowLeft", "a", "A"] },
+      { name: "right", keys: ["ArrowRight", "d", "D"] },
+    ],
+    []
+  );
 
-    return (
-        <KeyboardControls map={map}>
-            <Canvas eventPrefix="client" gl={{ powerPreference: "high-performance", antialias: true }} onContextMenu={(e) => { e.preventDefault(); }}>
+  return (
+      <KeyboardControls map={map}>
+        <Canvas
+          eventPrefix="client"
+          gl={{ powerPreference: "high-performance", antialias: true }}
+          onContextMenu={(e) => {
+            e.preventDefault();
+          }}
+        >
+          <Setup />
 
-                <Setup />
+          <Collaboration />
 
-                <Collaboration />
+          <Builder />
 
-                <Builder />
+          <Simulation />
 
-                <Simulation />
-
-                <Visualization />
-
-            </Canvas>
-        </KeyboardControls>
-    );
+          <Visualization />
+        </Canvas>
+      </KeyboardControls>
+  );
 }

app/src/modules/visualization/RealTimeVisulization.tsx

@@ -12,15 +12,12 @@ import {
   useFloatingWidget,
 } from "../../store/visualization/useDroppedObjectsStore";
 import {
-  useAsset3dWidget,
   useSocketStore,
   useWidgetSubOption,
-  useZones,
 } from "../../store/store";
 import { getZone2dData } from "../../services/visulization/zone/getZoneData";
 import { generateUniqueId } from "../../functions/generateUniqueId";
 import { determinePosition } from "./functions/determinePosition";
-import { addingFloatingWidgets } from "../../services/visulization/zone/addFloatingWidgets";
 import SocketRealTimeViz from "./socket/realTimeVizSocket.dev";
 import RenderOverlay from "../../components/templates/Overlay";
 import ConfirmationPopup from "../../components/layout/confirmationPopup/ConfirmationPopup";
@@ -68,20 +65,15 @@ const RealTimeVisulization: React.FC = () => {
   const containerRef = useRef<HTMLDivElement>(null);
   const { isPlaying } = usePlayButtonStore();
   const { activeModule } = useModuleStore();
-  const [droppedObjects, setDroppedObjects] = useState<any[]>([]);
   const [zonesData, setZonesData] = useState<FormattedZoneData>({});
   const { selectedZone, setSelectedZone } = useSelectedZoneStore();
 
-  const { rightSelect, setRightSelect } = useRightSelected();
-  const { editWidgetOptions, setEditWidgetOptions } =
-    useEditWidgetOptionsStore();
+  const { setRightSelect } = useRightSelected();
+  const { editWidgetOptions } = useEditWidgetOptionsStore();
   const { rightClickSelected, setRightClickSelected } = useRightClickSelected();
   const [openConfirmationPopup, setOpenConfirmationPopup] = useState(false);
-
-  // const [floatingWidgets, setFloatingWidgets] = useState<Record<string, { zoneName: string; zoneId: string; objects: any[] }>>({});
-  const { floatingWidget, setFloatingWidget } = useFloatingWidget();
-  const { widgetSelect, setWidgetSelect } = useAsset3dWidget();
-  const { widgetSubOption, setWidgetSubOption } = useWidgetSubOption();
+  const { setFloatingWidget } = useFloatingWidget();
+  const { widgetSubOption } = useWidgetSubOption();
   const { visualizationSocket } = useSocketStore();
   const { setSelectedChartId } = useWidgetStore();
 
@@ -99,11 +91,10 @@ const RealTimeVisulization: React.FC = () => {
 
   useEffect(() => {
     async function GetZoneData() {
-      const email = localStorage.getItem("email") || "";
+      const email = localStorage.getItem("email") ?? "";
       const organization = email?.split("@")[1]?.split(".")[0];
       try {
         const response = await getZone2dData(organization);
-        // console.log('response: ', response);
 
         if (!Array.isArray(response)) {
           return;
@@ -125,7 +116,9 @@ const RealTimeVisulization: React.FC = () => {
           {}
         );
         setZonesData(formattedData);
-      } catch (error) {}
+      } catch (error) {
+        console.log(error);
+      }
     }
 
     GetZoneData();
@@ -151,12 +144,10 @@ const RealTimeVisulization: React.FC = () => {
     });
   }, [selectedZone]);
 
-  // useEffect(() => {}, [floatingWidgets]);
-
   const handleDrop = async (event: React.DragEvent<HTMLDivElement>) => {
     event.preventDefault();
     try {
-      const email = localStorage.getItem("email") || "";
+      const email = localStorage.getItem("email") ?? "";
       const organization = email?.split("@")[1]?.split(".")[0];
 
       const data = event.dataTransfer.getData("text/plain");
@@ -172,8 +163,8 @@ const RealTimeVisulization: React.FC = () => {
       const relativeY = event.clientY - rect.top;
 
       // Widget dimensions
-      const widgetWidth = droppedData.width || 125;
-      const widgetHeight = droppedData.height || 100;
+      const widgetWidth = droppedData.width ?? 125;
+      const widgetHeight = droppedData.height ?? 100;
 
       // Center the widget at cursor
       const centerOffsetX = widgetWidth / 2;
@@ -275,7 +266,7 @@ const RealTimeVisulization: React.FC = () => {
     return () => {
       document.removeEventListener("mousedown", handleClickOutside);
     };
-  }, [setRightClickSelected]);
+  }, [setRightClickSelected, setRightSelect]);
 
   const [canvasDimensions, setCanvasDimensions] = useState({
     width: 0,
@@ -340,6 +331,7 @@ const RealTimeVisulization: React.FC = () => {
               borderRadius:
                 isPlaying || activeModule !== "visualization" ? "" : "6px",
             }}
+            role="application"
             onDrop={(event) => handleDrop(event)}
             onDragOver={(event) => event.preventDefault()}
           >

app/src/modules/visualization/visualization.tsx

@@ -3,9 +3,8 @@ import Dropped3dWidgets from './widgets/3d/Dropped3dWidget'
 import ZoneCentreTarget from './zone/zoneCameraTarget'
 import ZoneAssets from './zone/zoneAssets'
 import MqttEvents from '../../services/factoryBuilder/mqtt/mqttEvents'
-import DrieHtmlTemp from './mqttTemp/drieHtmlTemp'
 
-const Visualization = () => {
+const Visualization:React.FC = () => {
     return (
         <>