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/sub.tsx

@@ -1,10 +1,10 @@
 import { ArrowRightSmallPlusIcon } from '@blocksuite/icons/rc';
 import { Slot } from '@radix-ui/react-slot';
-import { type MouseEvent, useCallback, useContext } from 'react';
+import { type MouseEvent, useCallback, useEffect, useId, useMemo } from 'react';
 
 import type { MenuSubProps } from '../menu.types';
 import { useMenuItem } from '../use-menu-item';
-import { MobileMenuContext } from './context';
+import { useMobileSubMenuHelper } from './context';
 
 export const MobileMenuSub = ({
   title,
@@ -42,20 +42,36 @@ export const MobileMenuSubRaw = ({
   onClick,
   children,
   items,
+  subOptions,
   subContentOptions: contentOptions = {},
 }: MenuSubProps & {
   onClick?: (e: MouseEvent<HTMLDivElement>) => void;
   title?: string;
 }) => {
-  const { setSubMenus } = useContext(MobileMenuContext);
+  const id = useId();
+  const { addSubMenu } = useMobileSubMenuHelper();
+
+  const subMenuContent = useMemo(
+    () => ({ items, contentOptions, options: subOptions, title, id }),
+    [items, contentOptions, subOptions, title, id]
+  );
+
+  const doAddSubMenu = useCallback(() => {
+    addSubMenu(subMenuContent);
+  }, [addSubMenu, subMenuContent]);
 
   const onItemClick = useCallback(
     (e: MouseEvent<HTMLDivElement>) => {
       onClick?.(e);
-      setSubMenus(prev => [...prev, { items, contentOptions, title }]);
+      doAddSubMenu();
     },
-    [contentOptions, items, onClick, setSubMenus, title]
+    [doAddSubMenu, onClick]
   );
+  useEffect(() => {
+    if (subOptions?.open) {
+      doAddSubMenu();
+    }
+  }, [doAddSubMenu, subOptions]);
 
   return <Slot onClick={onItemClick}>{children}</Slot>;
 };