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

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

packages/frontend/component/src/ui/menu/menu.types.ts

@@ -11,6 +11,7 @@ import type { ReactNode } from 'react';
 export interface MenuProps {
   children: ReactNode;
   items: ReactNode;
+  title?: string;
   portalOptions?: Omit<DropdownMenuPortalProps, 'children'>;
   rootOptions?: Omit<DropdownMenuProps, 'children'>;
   contentOptions?: Omit<DropdownMenuContentProps, 'children'>;

packages/frontend/component/src/ui/menu/mobile/root.tsx

@@ -20,6 +20,7 @@ import { MobileMenuSubRaw } from './sub';
 export const MobileMenu = ({
   children,
   items,
+  title,
   contentOptions: {
     className,
     onPointerDownOutside,
@@ -108,7 +109,7 @@ export const MobileMenu = ({
    */
   if (pSetOpen) {
     return (
-      <MobileMenuSubRaw items={items} subOptions={rootOptions}>
+      <MobileMenuSubRaw title={title} items={items} subOptions={rootOptions}>
         {children}
       </MobileMenuSubRaw>
     );

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>
         }
       >

packages/frontend/i18n/src/i18n.gen.ts

@@ -2079,6 +2079,10 @@ export function useAFFiNEI18N(): {
       * `View table of contents`
       */
     ["com.affine.header.option.view-toc"](): string;
+    /**
+      * `Table of contents`
+      */
+    ["com.affine.header.menu.toc"](): string;
     /**
       * `Contact us`
       */

packages/frontend/i18n/src/resources/en.json

@@ -519,6 +519,7 @@
   "com.affine.header.option.open-in-desktop": "Open in desktop app",
   "com.affine.header.option.view-frame": "View all frames",
   "com.affine.header.option.view-toc": "View table of contents",
+  "com.affine.header.menu.toc": "Table of contents",
   "com.affine.helpIsland.contactUs": "Contact us",
   "com.affine.helpIsland.gettingStarted": "Getting started",
   "com.affine.helpIsland.helpAndFeedback": "Help and feedback",