From 646028f39f97355cde4e266d09e979f9be51487f Mon Sep 17 00:00:00 2001
From: Vishnu <vishnu@hexrfactory.com>
Date: Fri, 11 Jul 2025 13:06:17 +0530
Subject: [PATCH] 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    | 25 ++++++++++-------------
 app/src/store/useUIToggleStore.ts       | 27 +++++++++++++++++++++++++
 app/src/utils/mouseUtils/mouseHelper.ts | 15 +++++++-------
 3 files changed, 45 insertions(+), 22 deletions(-)

diff --git a/app/src/components/footer/Footer.tsx b/app/src/components/footer/Footer.tsx
index fc16956..94ee0b9 100644
--- a/app/src/components/footer/Footer.tsx
+++ b/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">
diff --git a/app/src/store/useUIToggleStore.ts b/app/src/store/useUIToggleStore.ts
index 1afef0e..cbee72f 100644
--- a/app/src/store/useUIToggleStore.ts
+++ b/app/src/store/useUIToggleStore.ts
@@ -24,3 +24,30 @@ export const usePlayerStore = create<PlayerState>((set) => ({
   hidePlayer: false, // initial state
   setHidePlayer: (hide) => set({ hidePlayer: hide }), // state updater
 }));
+
+interface MouseNoteState {
+  Leftnote: string;
+  Middlenote: string;
+  Rightnote: string;
+  setNotes: (notes: {
+    Leftnote: string;
+    Middlenote: string;
+    Rightnote: string;
+  }) => void;
+  setLeftnote: (note: string) => void;
+  setMiddlenote: (note: string) => void;
+  setRightnote: (note: string) => void;
+  resetNotes: () => void;
+}
+
+export const useMouseNoteStore = create<MouseNoteState>((set) => ({
+  Leftnote: '',
+  Middlenote: '',
+  Rightnote: '',
+  setNotes: (notes) => set(notes),
+  setLeftnote: (note) => set({ Leftnote: note }),
+  setMiddlenote: (note) => set({ Middlenote: note }),
+  setRightnote: (note) => set({ Rightnote: note }),
+  resetNotes: () =>
+    set({ Leftnote: '', Middlenote: '', Rightnote: '' }),
+}));
diff --git a/app/src/utils/mouseUtils/mouseHelper.ts b/app/src/utils/mouseUtils/mouseHelper.ts
index 94be50e..fa309cc 100644
--- a/app/src/utils/mouseUtils/mouseHelper.ts
+++ b/app/src/utils/mouseUtils/mouseHelper.ts
@@ -1,16 +1,15 @@
+import { useMouseNoteStore } from "../../store/useUIToggleStore";
+
 const actionNotes: Record<string, string> = {
   'left+CONTROL': 'Box Select',
   'left+SHIFT': 'Multi Select',
   'middle+CONTROL': 'Zoom In',
 };
 
-export function mouseActionHelper(
-  onUpdate: (notes: {
-    Leftnote: string;
-    Middlenote: string;
-    Rightnote: string;
-  }) => void
-) {
+
+export function mouseActionHelper() {
+  const setNotes = useMouseNoteStore.getState().setNotes;
+
   const activeKeys = new Set<string>();
 
   function updateNotesFromKeys() {
@@ -19,7 +18,7 @@ export function mouseActionHelper(
     const middleKey = ['middle', ...sortedKeys].join('+');
     const rightKey = ['right', ...sortedKeys].join('+');
 
-    onUpdate({
+    setNotes({
       Leftnote: actionNotes[leftKey] || '',
       Middlenote: actionNotes[middleKey] || '',
       Rightnote: actionNotes[rightKey] || '',