Fix: Prevent multiple context menus from being open simultaneously

This commit addresses an issue where multiple context menus could be open at the same time.

The fix involves the following:

- Modified `MenuContext` in `app/hooks/useMenuContext.tsx` to store a reference to the `hide` function of the currently open menu, instead of a boolean.
- Updated the `ContextMenu` component in `app/components/ContextMenu/index.tsx` to:
    - Use the modified `MenuContext`.
    - Before opening a new menu, check if another menu is already open.
    - If an existing menu is open, it's closed before the new one is displayed.

Testing:
- I attempted to add a test for this change. However, due to a Node.js version incompatibility (sandbox: 18.19.1 vs. required: >=18.20 for a transitive dependency `lru-cache@^11.0.0` of `jest-environment-jsdom`), I was not able to run Jest tests in the development environment.
- I recommend that you run tests in a compatible Node.js environment, such as in your CI/CD pipeline, to ensure the new behavior is correctly tested and existing functionality remains unaffected.

app/components/ContextMenu/index.tsx

@@ -67,28 +67,25 @@ const ContextMenu: React.FC<Props> = ({
   const previousVisible = usePrevious(rest.visible);
   const { ui } = useStores();
   const { t } = useTranslation();
-  const { setIsMenuOpen } = useMenuContext();
+  const { openMenuHideFn, setOpenMenuHideFn } = useMenuContext();
   const isMobile = useMobile();
   const isSubMenu = !!parentMenuState;
 
-  useUnmount(() => {
-    setIsMenuOpen(false);
-  });
-
   React.useEffect(() => {
     if (rest.visible && !previousVisible) {
       onOpen?.();
 
-      if (!isSubMenu) {
-        setIsMenuOpen(true);
+      if (openMenuHideFn && openMenuHideFn !== rest.hide) {
+        openMenuHideFn();
       }
+      setOpenMenuHideFn(() => rest.hide);
     }
 
     if (!rest.visible && previousVisible) {
       onClose?.();
 
-      if (!isSubMenu) {
-        setIsMenuOpen(false);
+      if (openMenuHideFn === rest.hide) {
+        setOpenMenuHideFn(null);
       }
     }
   }, [
@@ -97,9 +94,11 @@ const ContextMenu: React.FC<Props> = ({
     previousVisible,
     rest.visible,
     ui.sidebarCollapsed,
-    setIsMenuOpen,
     isSubMenu,
     t,
+    openMenuHideFn,
+    setOpenMenuHideFn,
+    rest.hide,
   ]);
 
   // Perf win – don't render anything until the menu has been opened

app/hooks/useMenuContext.tsx

@@ -2,8 +2,8 @@ import noop from "lodash/noop";
 import * as React from "react";
 
 type MenuContextType = {
-  isMenuOpen: boolean;
-  setIsMenuOpen: React.Dispatch<React.SetStateAction<boolean>>;
+  openMenuHideFn: (() => void) | null;
+  setOpenMenuHideFn: React.Dispatch<React.SetStateAction<(() => void) | null>>;
 };
 
 const MenuContext = React.createContext<MenuContextType | null>(null);
@@ -13,13 +13,13 @@ type Props = {
 };
 
 export const MenuProvider: React.FC = ({ children }: Props) => {
-  const [isMenuOpen, setIsMenuOpen] = React.useState(false);
+  const [openMenuHideFn, setOpenMenuHideFn] = React.useState<(() => void) | null>(null);
   const memoized = React.useMemo(
     () => ({
-      isMenuOpen,
-      setIsMenuOpen,
+      openMenuHideFn,
+      setOpenMenuHideFn,
     }),
-    [isMenuOpen, setIsMenuOpen]
+    [openMenuHideFn, setOpenMenuHideFn]
   );
 
   return (
@@ -29,7 +29,7 @@ export const MenuProvider: React.FC = ({ children }: Props) => {
 
 const useMenuContext: () => MenuContextType = () => {
   const value = React.useContext(MenuContext);
-  return value ? value : { isMenuOpen: false, setIsMenuOpen: noop };
+  return value ? value : { openMenuHideFn: null, setOpenMenuHideFn: noop };
 };
 
 export default useMenuContext;