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