feat: Enhance cursor handling and mouse action notes in the footer and builder components

app/src/components/footer/Footer.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import { HelpIcon } from "../icons/DashboardIcon";
 import { useLogger } from "../ui/log/LoggerContext";
 import { GetLogIcon } from "./getLogIcons";
@@ -8,10 +8,13 @@ import {
   CurserRightIcon,
 } from "../icons/LogIcons";
 import ShortcutHelper from "./shortcutHelper";
-import useVersionHistoryVisibleStore, { useShortcutStore } from "../../store/builder/store";
+import useVersionHistoryVisibleStore, {
+  useShortcutStore,
+} from "../../store/builder/store";
 import { usePlayButtonStore } from "../../store/usePlayButtonStore";
 import useModuleStore, { useSubModuleStore } from "../../store/useModuleStore";
 import { useVersionContext } from "../../modules/builder/version/versionContext";
+import { mouseActionHelper } from "../../utils/mouseUtils/mouseHelper";
 
 const Footer: React.FC = () => {
   const { logs, setIsLogListVisible } = useLogger();
@@ -25,28 +28,45 @@ const Footer: React.FC = () => {
   const { selectedVersionStore } = useVersionContext();
   const { selectedVersion } = selectedVersionStore();
 
+  const [notes, setNotes] = useState({
+    Leftnote: "",
+    Middlenote: "",
+    Rightnote: "",
+  });
+
+  useEffect(() => {
+    const cleanup = mouseActionHelper(setNotes);
+    return () => cleanup();
+  }, []);
+
+  const mouseButtons = [
+    {
+      icon: <CurserLeftIcon />,
+      label: notes.Leftnote !== "" ? notes.Leftnote : "Pan",
+      mouse: "left",
+    },
+    {
+      icon: <CurserMiddleIcon />,
+      label: notes.Middlenote !== "" ? notes.Middlenote : "Scroll Zoom",
+      mouse: "middle",
+    },
+    {
+      icon: <CurserRightIcon />,
+      label: notes.Rightnote !== "" ? notes.Rightnote : "Orbit / Cancel action",
+      mouse: "right",
+    },
+  ];
+
   return (
     <div className="footer-container">
       <div className="footer-wrapper">
         <div className="selection-wrapper">
-          <div className="selector-wrapper">
-            <div className="icon">
-              <CurserLeftIcon />
+          {mouseButtons.map(({ icon, label, mouse }) => (
+            <div className="selector-wrapper" key={mouse}>
+              <div className="icon">{icon}</div>
+              <div className="selector">{label}</div>
             </div>
-            <div className="selector">Selection</div>
-          </div>
-          <div className="selector-wrapper">
-            <div className="icon">
-              <CurserMiddleIcon />
-            </div>
-            <div className="selector">Rotate/Zoom</div>
-          </div>
-          <div className="selector-wrapper">
-            <div className="icon">
-              <CurserRightIcon />
-            </div>
-            <div className="selector">Pan/Context Menu</div>
-          </div>
+          ))}
         </div>
 
         <div className="logs-wrapper">
@@ -68,12 +88,15 @@ const Footer: React.FC = () => {
               )}
             </button>
           </div>
-          <div className="version" onClick={() => {
-            setVersionHistoryVisible(true);
-            setSubModule("properties");
-            setActiveModule('builder');
-          }}>
-            {(selectedVersion?.version) ?? 'v 0.0.0'}
+          <div
+            className="version"
+            onClick={() => {
+              setVersionHistoryVisible(true);
+              setSubModule("properties");
+              setActiveModule("builder");
+            }}
+          >
+            {selectedVersion?.version ?? "v 0.0.0"}
             <div className="icon">
               <HelpIcon />
             </div>
@@ -83,8 +106,9 @@ const Footer: React.FC = () => {
 
       {!isPlaying && (
         <div
-          className={`shortcut-helper-overlay ${showShortcuts ? "visible" : ""
-            }`}
+          className={`shortcut-helper-overlay ${
+            showShortcuts ? "visible" : ""
+          }`}
         >
           <ShortcutHelper setShowShortcuts={setShowShortcuts} />
         </div>