fix(core): remove openInfoModalAtom to avoid multiple modal opened in split-view (#8329)

close AF-1403

packages/frontend/core/src/components/affine/page-properties/info-modal/info-modal.tsx

@@ -4,9 +4,15 @@ import {
   Modal,
   Scrollable,
 } from '@affine/component';
+import { DocInfoService } from '@affine/core/modules/doc-info';
 import { DocsSearchService } from '@affine/core/modules/docs-search';
 import { useI18n } from '@affine/i18n';
-import { LiveData, useLiveData, useServices } from '@toeverything/infra';
+import {
+  LiveData,
+  useLiveData,
+  useService,
+  useServices,
+} from '@toeverything/infra';
 import { Suspense, useCallback, useContext, useMemo, useRef } from 'react';
 
 import { BlocksuiteHeaderTitle } from '../../../blocksuite/block-suite-header/title';
@@ -22,20 +28,23 @@ import { LinksRow } from './links-row';
 import { TagsRow } from './tags-row';
 import { TimeRow } from './time-row';
 
-export const InfoModal = ({
-  open,
-  onOpenChange,
-  docId,
-}: {
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-  docId: string;
-}) => {
+export const InfoModal = () => {
+  const modal = useService(DocInfoService).modal;
+  const docId = useLiveData(modal.docId$);
+
+  if (!docId) return null;
+
+  return <InfoModalOpened docId={docId} />;
+};
+
+const InfoModalOpened = ({ docId }: { docId: string }) => {
+  const modal = useService(DocInfoService).modal;
+
   const titleInputHandleRef = useRef<InlineEditHandle>(null);
-  const manager = usePagePropertiesManager(docId);
+  const manager = usePagePropertiesManager(docId ?? '');
   const handleClose = useCallback(() => {
-    onOpenChange(false);
-  }, [onOpenChange]);
+    modal.close();
+  }, [modal]);
 
   if (!manager.page || manager.readonly) {
     return null;
@@ -46,8 +55,8 @@ export const InfoModal = ({
       contentOptions={{
         className: styles.container,
       }}
-      open={open}
-      onOpenChange={onOpenChange}
+      open
+      onOpenChange={v => modal.onOpenChange(v)}
       withoutCloseButton
     >
       <Scrollable.Root>

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

@@ -12,7 +12,6 @@ export const openQuotaModalAtom = atom(false);
 export const openStarAFFiNEModalAtom = atom(false);
 export const openIssueFeedbackModalAtom = atom(false);
 export const openHistoryTipsModalAtom = atom(false);
-export const openInfoModalAtom = atom(false);
 
 export const rightSidebarWidthAtom = atom(320);
 

packages/frontend/core/src/components/blocksuite/block-suite-header/info/index.tsx

@@ -1,19 +1,19 @@
 import { IconButton } from '@affine/component';
-import { openInfoModalAtom } from '@affine/core/components/atoms';
+import { DocInfoService } from '@affine/core/modules/doc-info';
 import { useI18n } from '@affine/i18n';
 import { track } from '@affine/track';
 import { InformationIcon } from '@blocksuite/icons/rc';
-import { useSetAtom } from 'jotai';
+import { useService } from '@toeverything/infra';
 import { useCallback } from 'react';
 
-export const InfoButton = () => {
-  const setOpenInfoModal = useSetAtom(openInfoModalAtom);
+export const InfoButton = ({ docId }: { docId: string }) => {
+  const modal = useService(DocInfoService).modal;
   const t = useI18n();
 
   const onOpenInfoModal = useCallback(() => {
     track.$.header.actions.openDocInfo();
-    setOpenInfoModal(true);
-  }, [setOpenInfoModal]);
+    modal.open(docId);
+  }, [docId, modal]);
 
   return (
     <IconButton

packages/frontend/core/src/components/blocksuite/block-suite-header/menu/index.tsx

@@ -7,10 +7,7 @@ import {
 } from '@affine/component/ui/menu';
 import { PageHistoryModal } from '@affine/core/components/affine/page-history-modal';
 import { ShareMenuContent } from '@affine/core/components/affine/share-page-modal/share-menu';
-import {
-  openHistoryTipsModalAtom,
-  openInfoModalAtom,
-} from '@affine/core/components/atoms';
+import { openHistoryTipsModalAtom } from '@affine/core/components/atoms';
 import { useBlockSuiteMetaHelper } from '@affine/core/components/hooks/affine/use-block-suite-meta-helper';
 import { useEnableCloud } from '@affine/core/components/hooks/affine/use-enable-cloud';
 import { useExportPage } from '@affine/core/components/hooks/affine/use-export-page';
@@ -20,6 +17,7 @@ import { useDocMetaHelper } from '@affine/core/components/hooks/use-block-suite-
 import { Export, MoveToTrash } from '@affine/core/components/page-list';
 import { IsFavoriteIcon } from '@affine/core/components/pure/icons';
 import { useDetailPageHeaderResponsive } from '@affine/core/desktop/pages/workspace/detail-page/use-header-responsive';
+import { DocInfoService } from '@affine/core/modules/doc-info';
 import { EditorService } from '@affine/core/modules/editor';
 import { WorkbenchService } from '@affine/core/modules/workbench';
 import { ViewService } from '@affine/core/modules/workbench/services/view';
@@ -117,11 +115,11 @@ export const PageHeaderMenuButton = ({
     return setOpenHistoryTipsModal(true);
   }, [setOpenHistoryTipsModal, workspace.flavour]);
 
-  const setOpenInfoModal = useSetAtom(openInfoModalAtom);
+  const docInfoModal = useService(DocInfoService).modal;
   const openInfoModal = useCallback(() => {
     track.$.header.pageInfo.open();
-    setOpenInfoModal(true);
-  }, [setOpenInfoModal]);
+    docInfoModal.open(pageId);
+  }, [docInfoModal, pageId]);
 
   const handleOpenInNewTab = useCallback(() => {
     workbench.openDoc(pageId, {

packages/frontend/core/src/components/hooks/affine/use-register-blocksuite-editor-commands.tsx

@@ -3,7 +3,7 @@ import {
   PreconditionStrategy,
   registerAffineCommand,
 } from '@affine/core/commands';
-import { openInfoModalAtom } from '@affine/core/components/atoms';
+import { DocInfoService } from '@affine/core/modules/doc-info';
 import type { Editor } from '@affine/core/modules/editor';
 import { CompatibleFavoriteItemsAdapter } from '@affine/core/modules/properties';
 import { WorkspaceFlavour } from '@affine/env/workspace';
@@ -36,7 +36,7 @@ export function useRegisterBlocksuiteEditorCommands(editor: Editor) {
   const trash = useLiveData(doc.trash$);
 
   const setPageHistoryModalState = useSetAtom(pageHistoryModalAtom);
-  const setInfoModalState = useSetAtom(openInfoModalAtom);
+  const docInfoModal = useService(DocInfoService).modal;
 
   const openHistoryModal = useCallback(() => {
     setPageHistoryModalState(() => ({
@@ -46,8 +46,8 @@ export function useRegisterBlocksuiteEditorCommands(editor: Editor) {
   }, [docId, setPageHistoryModalState]);
 
   const openInfoModal = useCallback(() => {
-    setInfoModalState(true);
-  }, [setInfoModalState]);
+    docInfoModal.open(docId);
+  }, [docId, docInfoModal]);
 
   const { duplicate } = useBlockSuiteMetaHelper();
   const exportHandler = useExportPage();

packages/frontend/core/src/components/page-list/operation-cell.tsx

@@ -8,6 +8,7 @@ import {
 import { useBlockSuiteMetaHelper } from '@affine/core/components/hooks/affine/use-block-suite-meta-helper';
 import { useTrashModalHelper } from '@affine/core/components/hooks/affine/use-trash-modal-helper';
 import { useCatchEventCallback } from '@affine/core/components/hooks/use-catch-event-hook';
+import { DocInfoService } from '@affine/core/modules/doc-info';
 import { FavoriteService } from '@affine/core/modules/favorite';
 import { CompatibleFavoriteItemsAdapter } from '@affine/core/modules/properties';
 import { WorkbenchService } from '@affine/core/modules/workbench';
@@ -32,6 +33,7 @@ import {
 import {
   FeatureFlagService,
   useLiveData,
+  useService,
   useServices,
   WorkspaceService,
 } from '@toeverything/infra';
@@ -39,7 +41,6 @@ import type { MouseEvent } from 'react';
 import { useCallback, useState } from 'react';
 
 import type { CollectionService } from '../../modules/collection';
-import { InfoModal } from '../affine/page-properties';
 import { usePageHelper } from '../blocksuite/block-suite-page-list/utils';
 import { IsFavoriteIcon } from '../pure/icons';
 import { FavoriteTag } from './components/favorite-tag';
@@ -86,11 +87,11 @@ export const PageOperationCell = ({
   const { duplicate } = useBlockSuiteMetaHelper();
   const blocksuiteDoc = currentWorkspace.docCollection.getDoc(page.id);
 
-  const [openInfoModal, setOpenInfoModal] = useState(false);
+  const docInfoModal = useService(DocInfoService).modal;
   const onOpenInfoModal = useCallback(() => {
     track.$.docInfoPanel.$.open();
-    setOpenInfoModal(true);
-  }, []);
+    docInfoModal.open(blocksuiteDoc?.id);
+  }, [blocksuiteDoc?.id, docInfoModal]);
 
   const onDisablePublicSharing = useCallback(() => {
     // TODO(@EYHN): implement disable public sharing
@@ -214,13 +215,6 @@ export const PageOperationCell = ({
           </IconButton>
         </Menu>
       </ColWrapper>
-      {blocksuiteDoc ? (
-        <InfoModal
-          open={openInfoModal}
-          onOpenChange={setOpenInfoModal}
-          docId={blocksuiteDoc.id}
-        />
-      ) : null}
     </>
   );
 };

packages/frontend/core/src/components/providers/modal-provider.tsx

@@ -21,6 +21,7 @@ import { AuthModal } from '../affine/auth';
 import { AiLoginRequiredModal } from '../affine/auth/ai-login-required';
 import { HistoryTipsModal } from '../affine/history-tips-modal';
 import { IssueFeedbackModal } from '../affine/issue-feedback-modal';
+import { InfoModal } from '../affine/page-properties/info-modal/info-modal';
 import {
   CloudQuotaModal,
   LocalQuotaModal,
@@ -126,6 +127,7 @@ export function CurrentWorkspaceModals() {
         onOpenChange={onTrashConfirmOpenChange}
         titles={deletePageTitles}
       />
+      <InfoModal />
     </>
   );
 }

packages/frontend/core/src/desktop/pages/workspace/detail-page/detail-page-header.tsx

@@ -3,8 +3,6 @@ import {
   type InlineEditHandle,
   observeResize,
 } from '@affine/component';
-import { InfoModal } from '@affine/core/components/affine/page-properties';
-import { openInfoModalAtom } from '@affine/core/components/atoms';
 import { FavoriteButton } from '@affine/core/components/blocksuite/block-suite-header/favorite';
 import { InfoButton } from '@affine/core/components/blocksuite/block-suite-header/info';
 import { JournalWeekDatePicker } from '@affine/core/components/blocksuite/block-suite-header/journal/date-picker';
@@ -19,7 +17,7 @@ import { EditorService } from '@affine/core/modules/editor';
 import { ViewIcon, ViewTitle } from '@affine/core/modules/workbench';
 import type { Doc } from '@blocksuite/affine/store';
 import { useLiveData, useService, type Workspace } from '@toeverything/infra';
-import { useAtom, useAtomValue } from 'jotai';
+import { useAtomValue } from 'jotai';
 import { forwardRef, useCallback, useEffect, useRef, useState } from 'react';
 
 import { SharePageButton } from '../../../../components/affine/share-page-modal';
@@ -139,7 +137,7 @@ export function NormalPageHeader({ page, workspace }: PageHeaderProps) {
         {hideCollect ? null : (
           <>
             <FavoriteButton pageId={page?.id} />
-            <InfoButton />
+            <InfoButton docId={page.id} />
           </>
         )}
         <PageHeaderMenuButton
@@ -168,25 +166,15 @@ export function DetailPageHeader(props: PageHeaderProps) {
   const { page, workspace } = props;
   const { isJournal } = useJournalInfoHelper(page.id);
   const isInTrash = page.meta?.trash;
-  const [openInfoModal, setOpenInfoModal] = useAtom(openInfoModalAtom);
 
   useRegisterCopyLinkCommands({
     workspaceMeta: workspace.meta,
     docId: page.id,
   });
 
-  return (
-    <>
-      {isJournal && !isInTrash ? (
-        <JournalPageHeader {...props} />
-      ) : (
-        <NormalPageHeader {...props} />
-      )}
-      <InfoModal
-        open={openInfoModal}
-        onOpenChange={setOpenInfoModal}
-        docId={page.id}
-      />
-    </>
+  return isJournal && !isInTrash ? (
+    <JournalPageHeader {...props} />
+  ) : (
+    <NormalPageHeader {...props} />
   );
 }

packages/frontend/core/src/mobile/provider/model-provider.tsx

@@ -2,6 +2,7 @@ import { NotificationCenter } from '@affine/component';
 import { AiLoginRequiredModal } from '@affine/core/components/affine/auth/ai-login-required';
 import { HistoryTipsModal } from '@affine/core/components/affine/history-tips-modal';
 import { IssueFeedbackModal } from '@affine/core/components/affine/issue-feedback-modal';
+import { InfoModal } from '@affine/core/components/affine/page-properties/info-modal/info-modal';
 import {
   CloudQuotaModal,
   LocalQuotaModal,
@@ -57,6 +58,7 @@ export function MobileCurrentWorkspaceModals() {
         onOpenChange={onTrashConfirmOpenChange}
         titles={deletePageTitles}
       />
+      <InfoModal />
     </>
   );
 }

packages/frontend/core/src/modules/doc-info/entities/modal.ts

@@ -0,0 +1,22 @@
+import { Entity, LiveData } from '@toeverything/infra';
+
+export class DocInfoModal extends Entity {
+  public readonly docId$ = new LiveData<string | null>(null);
+  public readonly open$ = LiveData.computed(get => !!get(this.docId$));
+
+  public open(docId?: string) {
+    if (docId) {
+      this.docId$.next(docId);
+    } else {
+      this.docId$.next(null);
+    }
+  }
+
+  public close() {
+    this.docId$.next(null);
+  }
+
+  public onOpenChange(open: boolean) {
+    if (!open) this.docId$.next(null);
+  }
+}

packages/frontend/core/src/modules/doc-info/index.ts

@@ -0,0 +1,10 @@
+import { type Framework, WorkspaceScope } from '@toeverything/infra';
+
+import { DocInfoModal } from './entities/modal';
+import { DocInfoService } from './services/doc-info';
+
+export { DocInfoService };
+
+export function configureDocInfoModule(framework: Framework) {
+  framework.scope(WorkspaceScope).service(DocInfoService).entity(DocInfoModal);
+}

packages/frontend/core/src/modules/doc-info/services/doc-info.ts

@@ -0,0 +1,7 @@
+import { Service } from '@toeverything/infra';
+
+import { DocInfoModal } from '../entities/modal';
+
+export class DocInfoService extends Service {
+  public readonly modal = this.framework.createEntity(DocInfoModal);
+}

packages/frontend/core/src/modules/explorer/views/nodes/doc/index.tsx

@@ -5,9 +5,9 @@ import {
   toast,
   Tooltip,
 } from '@affine/component';
-import { InfoModal } from '@affine/core/components/affine/page-properties';
 import { useAsyncCallback } from '@affine/core/components/hooks/affine-async-hooks';
 import { DocDisplayMetaService } from '@affine/core/modules/doc-display-meta';
+import { DocInfoService } from '@affine/core/modules/doc-info';
 import { DocsSearchService } from '@affine/core/modules/docs-search';
 import type { AffineDNDData } from '@affine/core/types/dnd';
 import { useI18n } from '@affine/i18n';
@@ -17,6 +17,7 @@ import {
   GlobalContextService,
   LiveData,
   useLiveData,
+  useService,
   useServices,
 } from '@toeverything/infra';
 import { useCallback, useLayoutEffect, useMemo, useState } from 'react';
@@ -175,15 +176,15 @@ export const ExplorerDocNode = ({
     [canDrop]
   );
 
-  const [enableInfoModal, setEnableInfoModal] = useState(false);
+  const docInfoModal = useService(DocInfoService).modal;
   const operations = useExplorerDocNodeOperations(
     docId,
     useMemo(
       () => ({
-        openInfoModal: () => setEnableInfoModal(true),
+        openInfoModal: () => docInfoModal.open(docId),
         openNodeCollapsed: () => setCollapsed(false),
       }),
-      []
+      [docId, docInfoModal]
     )
   );
 
@@ -199,57 +200,48 @@ export const ExplorerDocNode = ({
   }
 
   return (
-    <>
-      <ExplorerTreeNode
-        icon={Icon}
-        name={typeof docTitle === 'string' ? docTitle : t[docTitle.key]()}
-        dndData={dndData}
-        onDrop={handleDropOnDoc}
-        renameable
-        collapsed={collapsed}
-        setCollapsed={setCollapsed}
-        canDrop={handleCanDrop}
-        to={`/${docId}`}
-        active={active}
-        postfix={
-          referencesLoading &&
-          !collapsed && (
-            <Tooltip
-              content={t['com.affine.rootAppSidebar.docs.references-loading']()}
-            >
-              <div className={styles.loadingIcon}>
-                <Loading />
-              </div>
-            </Tooltip>
-          )
-        }
-        reorderable={reorderable}
-        onRename={handleRename}
-        childrenPlaceholder={<Empty onDrop={handleDropOnPlaceholder} />}
-        operations={finalOperations}
-        dropEffect={handleDropEffectOnDoc}
-        data-testid={`explorer-doc-${docId}`}
-      >
-        {children?.map(child => (
-          <ExplorerDocNode
-            key={child.docId}
-            docId={child.docId}
-            reorderable={false}
-            location={{
-              at: 'explorer:doc:linked-docs',
-              docId,
-            }}
-            isLinked
-          />
-        ))}
-      </ExplorerTreeNode>
-      {enableInfoModal && (
-        <InfoModal
-          open={enableInfoModal}
-          onOpenChange={setEnableInfoModal}
-          docId={docId}
+    <ExplorerTreeNode
+      icon={Icon}
+      name={typeof docTitle === 'string' ? docTitle : t[docTitle.key]()}
+      dndData={dndData}
+      onDrop={handleDropOnDoc}
+      renameable
+      collapsed={collapsed}
+      setCollapsed={setCollapsed}
+      canDrop={handleCanDrop}
+      to={`/${docId}`}
+      active={active}
+      postfix={
+        referencesLoading &&
+        !collapsed && (
+          <Tooltip
+            content={t['com.affine.rootAppSidebar.docs.references-loading']()}
+          >
+            <div className={styles.loadingIcon}>
+              <Loading />
+            </div>
+          </Tooltip>
+        )
+      }
+      reorderable={reorderable}
+      onRename={handleRename}
+      childrenPlaceholder={<Empty onDrop={handleDropOnPlaceholder} />}
+      operations={finalOperations}
+      dropEffect={handleDropEffectOnDoc}
+      data-testid={`explorer-doc-${docId}`}
+    >
+      {children?.map(child => (
+        <ExplorerDocNode
+          key={child.docId}
+          docId={child.docId}
+          reorderable={false}
+          location={{
+            at: 'explorer:doc:linked-docs',
+            docId,
+          }}
+          isLinked
         />
-      )}
-    </>
+      ))}
+    </ExplorerTreeNode>
   );
 };

packages/frontend/core/src/modules/index.ts

@@ -5,6 +5,7 @@ import { configureCloudModule } from './cloud';
 import { configureCollectionModule } from './collection';
 import { configureCreateWorkspaceModule } from './create-workspace';
 import { configureDocDisplayMetaModule } from './doc-display-meta';
+import { configureDocInfoModule } from './doc-info';
 import { configureDocLinksModule } from './doc-link';
 import { configureDocsSearchModule } from './docs-search';
 import { configureEditorModule } from './editor';
@@ -55,4 +56,5 @@ export function configureCommonModules(framework: Framework) {
   configureImportTemplateModule(framework);
   configureCreateWorkspaceModule(framework);
   configureUserspaceModule(framework);
+  configureDocInfoModule(framework);
 }