feat(core): add doc info modal (#7409)

close AF-1038
close AF-1039
close AF-1040
close AF-1046

A popup window has been added to facilitate viewing of this doc's info in edgeless mode and other modes.

https://github.com/toeverything/AFFiNE/assets/102217452/d7f94cb6-7e32-4ce7-8ff4-8aba1309b331

packages/frontend/core/src/pages/workspace/detail-page/detail-page-header.css.ts

@@ -18,3 +18,9 @@ export const journalWeekPicker = style({
   alignItems: 'center',
   justifyContent: 'center',
 });
+
+export const iconButtonContainer = style({
+  display: 'flex',
+  alignItems: 'center',
+  gap: 10,
+});

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

@@ -1,5 +1,8 @@
 import { Divider, type InlineEditHandle } from '@affine/component';
+import { openInfoModalAtom } from '@affine/core/atoms';
+import { InfoModal } from '@affine/core/components/affine/page-properties';
 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';
 import { JournalTodayButton } from '@affine/core/components/blocksuite/block-suite-header/journal/today-button';
 import { PageHeaderMenuButton } from '@affine/core/components/blocksuite/block-suite-header/menu';
@@ -9,7 +12,7 @@ import { useRegisterCopyLinkCommands } from '@affine/core/hooks/affine/use-regis
 import { useJournalInfoHelper } from '@affine/core/hooks/use-journal';
 import type { Doc } from '@blocksuite/store';
 import { type Workspace } from '@toeverything/infra';
-import { useAtomValue } from 'jotai';
+import { useAtom, useAtomValue } from 'jotai';
 import { useCallback, useRef } from 'react';
 
 import { SharePageButton } from '../../../components/affine/share-page-modal';
@@ -90,8 +93,16 @@ export function NormalPageHeader({ page, workspace }: PageHeaderProps) {
         pageId={page?.id}
         docCollection={workspace.docCollection}
       />
-      {hideCollect ? null : <FavoriteButton pageId={page?.id} />}
-      <PageHeaderMenuButton rename={onRename} page={page} />
+      <div className={styles.iconButtonContainer}>
+        {hideCollect ? null : (
+          <>
+            <FavoriteButton pageId={page?.id} />
+            {runtimeConfig.enableInfoModal ? <InfoButton /> : null}
+          </>
+        )}
+        <PageHeaderMenuButton rename={onRename} page={page} />
+      </div>
+
       <div className={styles.spacer} />
 
       {!hidePresent ? <DetailPageHeaderPresentButton /> : null}
@@ -111,15 +122,26 @@ export function DetailPageHeader(props: PageHeaderProps) {
   const { page, workspace } = props;
   const { isJournal } = useJournalInfoHelper(page.collection, 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} />
+  return (
+    <>
+      {isJournal && !isInTrash ? (
+        <JournalPageHeader {...props} />
+      ) : (
+        <NormalPageHeader {...props} />
+      )}
+      <InfoModal
+        open={openInfoModal}
+        onOpenChange={setOpenInfoModal}
+        page={page}
+        workspace={workspace}
+      />
+    </>
   );
 }