feat: add keyboard-based mouse action helper with Zustand integration

- Implemented `mouseActionHelper.ts` to track modifier keys (e.g. CONTROL, SHIFT)
- Dynamically constructs mouse+modifier combos (e.g. left+CONTROL)
- Updates Zustand store (`useMouseNoteStore`) with appropriate notes
- Supports multi-key combinations and cleans up listeners on unmount

app/src/components/footer/Footer.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect } from "react";
 import { HelpIcon } from "../icons/DashboardIcon";
 import { useLogger } from "../ui/log/LoggerContext";
 import { GetLogIcon } from "./getLogIcons";
@@ -15,6 +15,7 @@ import { usePlayButtonStore } from "../../store/usePlayButtonStore";
 import useModuleStore, { useSubModuleStore } from "../../store/useModuleStore";
 import { useVersionContext } from "../../modules/builder/version/versionContext";
 import { mouseActionHelper } from "../../utils/mouseUtils/mouseHelper";
+import { useMouseNoteStore } from "../../store/useUIToggleStore";
 
 const Footer: React.FC = () => {
   const { logs, setIsLogListVisible } = useLogger();
@@ -28,35 +29,31 @@ 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 { Leftnote, Middlenote, Rightnote } = useMouseNoteStore();
 
   const mouseButtons = [
     {
       icon: <CurserLeftIcon />,
-      label: notes.Leftnote !== "" ? notes.Leftnote : "Pan",
+      label: Leftnote !== "" ? Leftnote : "Pan",
       mouse: "left",
     },
     {
       icon: <CurserMiddleIcon />,
-      label: notes.Middlenote !== "" ? notes.Middlenote : "Scroll Zoom",
+      label: Middlenote !== "" ? Middlenote : "Scroll Zoom",
       mouse: "middle",
     },
     {
       icon: <CurserRightIcon />,
-      label: notes.Rightnote !== "" ? notes.Rightnote : "Orbit / Cancel action",
+      label: Rightnote !== "" ? Rightnote : "Orbit / Cancel action",
       mouse: "right",
     },
   ];
 
+  useEffect(() => {
+    const cleanup = mouseActionHelper();
+    return () => cleanup();
+  }, []);
+
   return (
     <div className="footer-container">
       <div className="footer-wrapper">