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

close AF-1403

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