feat(mobile): mobile toc menu (#9582)

Close [BS-1787](https://linear.app/affine-design/issue/BS-1787/toc-移动端适配)

packages/frontend/core/src/mobile/components/toc-menu/index.tsx

@@ -0,0 +1,34 @@
+import {
+  type AffineEditorContainer,
+  MobileOutlineMenu,
+} from '@blocksuite/affine/presets';
+import { useCallback, useRef } from 'react';
+
+export const MobileTocMenu = ({
+  editor,
+}: {
+  editor: AffineEditorContainer | null;
+}) => {
+  const outlineMenuRef = useRef<MobileOutlineMenu | null>(null);
+  const onRefChange = useCallback((container: HTMLDivElement | null) => {
+    if (container) {
+      if (outlineMenuRef.current === null) {
+        console.error('mobile outline menu should be initialized');
+        return;
+      }
+
+      container.append(outlineMenuRef.current);
+    }
+  }, []);
+
+  if (!editor) return;
+
+  if (!outlineMenuRef.current) {
+    outlineMenuRef.current = new MobileOutlineMenu();
+  }
+  if (outlineMenuRef.current.editor !== editor) {
+    outlineMenuRef.current.editor = editor;
+  }
+
+  return <div ref={onRefChange} />;
+};

packages/frontend/core/src/mobile/pages/workspace/detail/page-header-more-button.tsx

@@ -7,8 +7,8 @@ import {
 } from '@affine/component/ui/menu';
 import { useFavorite } from '@affine/core/components/blocksuite/block-suite-header/favorite';
 import { IsFavoriteIcon } from '@affine/core/components/pure/icons';
-import { EditorOutlinePanel } from '@affine/core/desktop/pages/workspace/detail-page/tabs/outline';
 import { DocInfoSheet } from '@affine/core/mobile/components';
+import { MobileTocMenu } from '@affine/core/mobile/components/toc-menu';
 import { DocService } from '@affine/core/modules/doc';
 import { EditorService } from '@affine/core/modules/editor';
 import { ViewService } from '@affine/core/modules/workbench/services/view';
@@ -120,9 +120,10 @@ export const PageHeaderMenuButton = () => {
         <span>{t['com.affine.page-properties.page-info.view']()}</span>
       </MenuSub>
       <MobileMenu
+        title={t['com.affine.header.menu.toc']()}
         items={
           <div className={styles.outlinePanel}>
-            <EditorOutlinePanel editor={editorContainer} />
+            <MobileTocMenu editor={editorContainer} />
           </div>
         }
       >