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

app/src/utils/mouseUtils/mouseHelper.ts

@@ -0,0 +1,46 @@
+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
+) {
+  const activeKeys = new Set<string>();
+
+  function updateNotesFromKeys() {
+    const sortedKeys = Array.from(activeKeys).sort();
+    const leftKey = ['left', ...sortedKeys].join('+');
+    const middleKey = ['middle', ...sortedKeys].join('+');
+    const rightKey = ['right', ...sortedKeys].join('+');
+
+    onUpdate({
+      Leftnote: actionNotes[leftKey] || '',
+      Middlenote: actionNotes[middleKey] || '',
+      Rightnote: actionNotes[rightKey] || '',
+    });
+  }
+
+  function handleKeyDown(event: KeyboardEvent) {
+    activeKeys.add(event.key.toUpperCase());
+    updateNotesFromKeys();
+  }
+
+  function handleKeyUp(event: KeyboardEvent) {
+    activeKeys.delete(event.key.toUpperCase());
+    updateNotesFromKeys();
+  }
+
+  window.addEventListener('keydown', handleKeyDown);
+  window.addEventListener('keyup', handleKeyUp);
+
+  return () => {
+    window.removeEventListener('keydown', handleKeyDown);
+    window.removeEventListener('keyup', handleKeyUp);
+  };
+}