feat(mobile): open doc info in explorer (#9040)

packages/frontend/core/src/components/mobile/config-modal/index.tsx

@@ -1,5 +1,5 @@
 import { Button, Modal } from '@affine/component';
-import { PageHeader } from '@affine/core/mobile/components';
+import { PageHeader } from '@affine/core/mobile/components/page-header';
 import { useI18n } from '@affine/i18n';
 import clsx from 'clsx';
 import {

packages/frontend/core/src/mobile/components/doc-info/doc-scope.tsx

@@ -0,0 +1,25 @@
+import type { Doc } from '@toeverything/infra';
+import { DocsService, FrameworkScope, useService } from '@toeverything/infra';
+import { type PropsWithChildren, useEffect, useState } from 'react';
+
+export const DocFrameScope = ({
+  children,
+  docId,
+}: PropsWithChildren<{ docId: string }>) => {
+  const docsService = useService(DocsService);
+
+  const [doc, setDoc] = useState<Doc | null>(null);
+  useEffect(() => {
+    if (!docId) return;
+    const docRef = docsService.open(docId);
+    setDoc(docRef.doc);
+    return () => {
+      docRef.release();
+      setDoc(null);
+    };
+  }, [docId, docsService]);
+
+  if (!doc || !docId) return null;
+
+  return <FrameworkScope scope={doc.scope}>{children}</FrameworkScope>;
+};

packages/frontend/core/src/mobile/components/doc-info/index.ts

@@ -0,0 +1,2 @@
+export * from './doc-info';
+export * from './doc-scope';

packages/frontend/core/src/mobile/components/explorer/nodes/doc/operations.tsx

@@ -2,6 +2,7 @@ import {
   IconButton,
   MenuItem,
   MenuSeparator,
+  MenuSub,
   toast,
   useConfirmModal,
 } from '@affine/component';
@@ -12,6 +13,7 @@ import { IsFavoriteIcon } from '@affine/core/components/pure/icons';
 import type { NodeOperation } from '@affine/core/modules/explorer';
 import { CompatibleFavoriteItemsAdapter } from '@affine/core/modules/favorite';
 import { WorkbenchService } from '@affine/core/modules/workbench';
+import { preventDefault } from '@affine/core/utils';
 import { useI18n } from '@affine/i18n';
 import { track } from '@affine/track';
 import {
@@ -33,12 +35,12 @@ import {
 } from '@toeverything/infra';
 import { useCallback, useMemo } from 'react';
 
+import { DocFrameScope, DocInfoSheet } from '../../../doc-info';
 import { DocRenameSubMenu } from './dialog';
 
 export const useExplorerDocNodeOperations = (
   docId: string,
   options: {
-    openInfoModal: () => void;
     openNodeCollapsed: () => void;
   }
 ) => {
@@ -74,10 +76,6 @@ export const useExplorerDocNodeOperations = (
     duplicate(docId, true);
     track.$.navigationPanel.docs.createDoc();
   }, [docId, duplicate]);
-  const handleOpenInfoModal = useCallback(() => {
-    track.$.docInfoPanel.$.open();
-    options.openInfoModal();
-  }, [options]);
 
   const handleMoveToTrash = useCallback(() => {
     if (!docRecord) {
@@ -154,7 +152,6 @@ export const useExplorerDocNodeOperations = (
       handleOpenInSplitView,
       handleOpenInNewTab,
       handleMoveToTrash,
-      handleOpenInfoModal,
       handleRename,
     }),
     [
@@ -164,7 +161,6 @@ export const useExplorerDocNodeOperations = (
       handleMoveToTrash,
       handleOpenInNewTab,
       handleOpenInSplitView,
-      handleOpenInfoModal,
       handleRename,
       handleToggleFavoriteDoc,
     ]
@@ -188,7 +184,6 @@ export const useExplorerDocNodeOperationsMenu = (
     handleOpenInSplitView,
     handleOpenInNewTab,
     handleMoveToTrash,
-    handleOpenInfoModal,
     handleRename,
   } = useExplorerDocNodeOperations(docId, options);
 
@@ -224,12 +219,20 @@ export const useExplorerDocNodeOperationsMenu = (
       {
         index: 50,
         view: (
-          <MenuItem
-            prefixIcon={<InformationIcon />}
-            onClick={handleOpenInfoModal}
+          <MenuSub
+            triggerOptions={{
+              prefixIcon: <InformationIcon />,
+              onClick: preventDefault,
+            }}
+            title={title ?? t['unnamed']()}
+            items={
+              <DocFrameScope docId={docId}>
+                <DocInfoSheet docId={docId} />
+              </DocFrameScope>
+            }
           >
-            {t['com.affine.page-properties.page-info.view']()}
-          </MenuItem>
+            <span>{t['com.affine.page-properties.page-info.view']()}</span>
+          </MenuSub>
         ),
       },
       {
@@ -305,6 +308,7 @@ export const useExplorerDocNodeOperationsMenu = (
       },
     ],
     [
+      docId,
       enableMultiView,
       favorite,
       handleAddLinkedPage,
@@ -312,7 +316,6 @@ export const useExplorerDocNodeOperationsMenu = (
       handleMoveToTrash,
       handleOpenInNewTab,
       handleOpenInSplitView,
-      handleOpenInfoModal,
       handleRename,
       handleToggleFavoriteDoc,
       t,

packages/frontend/core/src/mobile/components/index.ts

@@ -1,5 +1,6 @@
 export * from './app-tabs';
 export * from './doc-card';
+export * from './doc-info';
 export * from './navigation-back';
 export * from './page-header';
 export * from './rename';

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

@@ -8,6 +8,7 @@ import {
 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 { EditorService } from '@affine/core/modules/editor';
 import { ViewService } from '@affine/core/modules/workbench/services/view';
 import { preventDefault } from '@affine/core/utils';
@@ -27,7 +28,6 @@ import { JournalConflictsMenuItem } from './menu/journal-conflicts';
 import { JournalTodayActivityMenuItem } from './menu/journal-today-activity';
 import { EditorModeSwitch } from './menu/mode-switch';
 import * as styles from './page-header-more-button.css';
-import { DocInfoSheet } from './sheets/doc-info';
 
 export const PageHeaderMenuButton = () => {
   const t = useI18n();