fix(core): multi sub menu layer handling (#8916)

fix AF-1800, AF-1801

<div class='graphite__hidden'>
          <div>🎥 Video uploaded on Graphite:</div>
            <a href="https://app.graphite.dev/media/video/T2klNLEk0wxLh4NRDzhk/7523df2b-2326-4878-b37a-d16e4275858d.mp4">
              <img src="https://app.graphite.dev/api/v1/graphite/video/thumbnail/T2klNLEk0wxLh4NRDzhk/7523df2b-2326-4878-b37a-d16e4275858d.mp4">
            </a>
          </div>
<video src="https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/T2klNLEk0wxLh4NRDzhk/7523df2b-2326-4878-b37a-d16e4275858d.mp4">20241126-0806-30.0904958.mp4</video>

packages/frontend/component/src/ui/menu/mobile/context.ts

@@ -3,6 +3,8 @@ import {
   type Dispatch,
   type ReactNode,
   type SetStateAction,
+  useCallback,
+  useContext,
 } from 'react';
 
 import type { MenuSubProps } from '../menu.types';
@@ -14,14 +16,61 @@ export type SubMenuContent = {
    */
   title?: string;
   items: ReactNode;
+  options?: MenuSubProps['subOptions'];
   contentOptions?: MenuSubProps['subContentOptions'];
+  id: string;
 };
 
-export const MobileMenuContext = createContext<{
+export type MobileMenuContextValue = {
   subMenus: Array<SubMenuContent>;
   setSubMenus: Dispatch<SetStateAction<Array<SubMenuContent>>>;
   setOpen?: (v: boolean) => void;
-}>({
+};
+
+export const MobileMenuContext = createContext<MobileMenuContextValue>({
   subMenus: [],
   setSubMenus: () => {},
 });
+
+export const useMobileSubMenuHelper = (
+  contextValue?: MobileMenuContextValue
+) => {
+  const _context = useContext(MobileMenuContext);
+  const { subMenus, setSubMenus } = contextValue ?? _context;
+
+  const addSubMenu = useCallback(
+    (subMenu: SubMenuContent) => {
+      const id = subMenu.id;
+      // if the submenu already exists, do nothing
+      if (subMenus.some(sub => sub.id === id)) {
+        return;
+      }
+      subMenu.options?.onOpenChange?.(true);
+      setSubMenus(prev => {
+        return [...prev, subMenu];
+      });
+    },
+    [setSubMenus, subMenus]
+  );
+
+  const removeSubMenu = useCallback(
+    (id: string) => {
+      setSubMenus(prev => {
+        const index = prev.findIndex(sub => sub.id === id);
+        prev[index]?.options?.onOpenChange?.(false);
+        return prev.filter(sub => sub.id !== id);
+      });
+    },
+    [setSubMenus]
+  );
+
+  const removeAllSubMenus = useCallback(() => {
+    setSubMenus([]);
+  }, [setSubMenus]);
+
+  return {
+    addSubMenu,
+    removeSubMenu,
+    removeAllSubMenus,
+  };
+};