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
2026-02-13 21:05:19 +00:00 · 2024-07-09 07:05:20 +00:00
parent aab9925aa1
commit e6818b4f14
27 changed files with 954 additions and 61 deletions
--- a/packages/frontend/core/src/atoms/index.ts
+++ b/packages/frontend/core/src/atoms/index.ts
@@ -13,6 +13,7 @@ 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);

--- a/packages/frontend/core/src/components/affine/page-properties/index.ts
+++ b/packages/frontend/core/src/components/affine/page-properties/index.ts
@@ -1,3 +1,4 @@
 export * from './icons-mapping';
+export * from './info-modal/info-modal';
 export * from './page-properties-manager';
 export * from './table';
--- a/packages/frontend/core/src/components/affine/page-properties/info-modal/back-links-row.css.ts
+++ b/packages/frontend/core/src/components/affine/page-properties/info-modal/back-links-row.css.ts
@@ -0,0 +1,36 @@
+import { cssVar } from '@toeverything/theme';
+import { globalStyle, style } from '@vanilla-extract/css';
+
+export const title = style({
+  fontSize: cssVar('fontSm'),
+  fontWeight: '500',
+  color: cssVar('textSecondaryColor'),
+  padding: '6px',
+});
+
+export const wrapper = style({
+  width: '100%',
+  borderRadius: 4,
+  color: cssVar('textPrimaryColor'),
+  display: 'flex',
+  flexDirection: 'row',
+  alignItems: 'center',
+  gap: 2,
+  padding: '6px',
+  ':hover': {
+    backgroundColor: cssVar('hoverColor'),
+  },
+});
+
+globalStyle(`${wrapper} svg`, {
+  color: cssVar('iconSecondary'),
+  fontSize: 16,
+  transform: 'none',
+});
+globalStyle(`${wrapper} span`, {
+  fontSize: cssVar('fontSm'),
+  whiteSpace: 'nowrap',
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  borderBottom: 'none',
+});
--- a/packages/frontend/core/src/components/affine/page-properties/info-modal/back-links-row.tsx
+++ b/packages/frontend/core/src/components/affine/page-properties/info-modal/back-links-row.tsx
@@ -0,0 +1,33 @@
+import { useI18n } from '@affine/i18n';
+import { useContext } from 'react';
+
+import { AffinePageReference } from '../../reference-link';
+import { managerContext } from '../common';
+import * as styles from './back-links-row.css';
+export const BackLinksRow = ({
+  references,
+  onClick,
+}: {
+  references: { docId: string; title: string }[];
+  onClick?: () => void;
+}) => {
+  const manager = useContext(managerContext);
+  const t = useI18n();
+  return (
+    <div>
+      <div className={styles.title}>
+        {t['com.affine.page-properties.backlinks']()} · {references.length}
+      </div>
+      {references.map(link => (
+        <AffinePageReference
+          key={link.docId}
+          pageId={link.docId}
+          wrapper={props => (
+            <div className={styles.wrapper} onClick={onClick} {...props} />
+          )}
+          docCollection={manager.workspace.docCollection}
+        />
+      ))}
+    </div>
+  );
+};
--- a/packages/frontend/core/src/components/affine/page-properties/info-modal/info-modal.css.ts
+++ b/packages/frontend/core/src/components/affine/page-properties/info-modal/info-modal.css.ts
@@ -0,0 +1,39 @@
+import { cssVar } from '@toeverything/theme';
+import { style } from '@vanilla-extract/css';
+
+export const container = style({
+  maxWidth: 480,
+  minWidth: 360,
+  padding: '20px 0',
+  alignSelf: 'start',
+  marginTop: '120px',
+});
+
+export const titleContainer = style({
+  display: 'flex',
+  width: '100%',
+  flexDirection: 'column',
+});
+
+export const titleStyle = style({
+  fontSize: cssVar('fontH6'),
+  fontWeight: '600',
+});
+
+export const rowNameContainer = style({
+  display: 'flex',
+  flexDirection: 'row',
+  gap: 6,
+  padding: 6,
+  width: '160px',
+});
+
+export const viewport = style({
+  maxHeight: 'calc(100vh - 220px)',
+  padding: '0 24px',
+});
+
+export const scrollBar = style({
+  width: 6,
+  transform: 'translateX(-4px)',
+});
--- a/packages/frontend/core/src/components/affine/page-properties/info-modal/info-modal.tsx
+++ b/packages/frontend/core/src/components/affine/page-properties/info-modal/info-modal.tsx
@@ -0,0 +1,156 @@
+import {
+  Divider,
+  type InlineEditHandle,
+  Modal,
+  Scrollable,
+} from '@affine/component';
+import { DocsSearchService } from '@affine/core/modules/docs-search';
+import type { Doc } from '@blocksuite/store';
+import {
+  LiveData,
+  useLiveData,
+  useService,
+  type Workspace,
+} from '@toeverything/infra';
+import { Suspense, useCallback, useContext, useMemo, useRef } from 'react';
+
+import { BlocksuiteHeaderTitle } from '../../../blocksuite/block-suite-header/title';
+import { managerContext } from '../common';
+import {
+  PagePropertiesAddProperty,
+  PagePropertyRow,
+  SortableProperties,
+  usePagePropertiesManager,
+} from '../table';
+import { BackLinksRow } from './back-links-row';
+import * as styles from './info-modal.css';
+import { TagsRow } from './tags-row';
+import { TimeRow } from './time-row';
+
+export const InfoModal = ({
+  open,
+  onOpenChange,
+  page,
+  workspace,
+}: {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  page: Doc;
+  workspace: Workspace;
+}) => {
+  const titleInputHandleRef = useRef<InlineEditHandle>(null);
+  const manager = usePagePropertiesManager(page);
+  const handleClose = useCallback(() => {
+    onOpenChange(false);
+  }, [onOpenChange]);
+
+  const docsSearchService = useService(DocsSearchService);
+  const references = useLiveData(
+    useMemo(
+      () => LiveData.from(docsSearchService.watchRefsFrom(page.id), null),
+      [docsSearchService, page.id]
+    )
+  );
+
+  if (!manager.page || manager.readonly) {
+    return null;
+  }
+
+  return (
+    <Modal
+      contentOptions={{
+        className: styles.container,
+        'aria-describedby': undefined,
+      }}
+      open={open}
+      onOpenChange={onOpenChange}
+      withoutCloseButton
+    >
+      <Scrollable.Root>
+        <Scrollable.Viewport
+          className={styles.viewport}
+          data-testid="info-modal"
+        >
+          <div className={styles.titleContainer} data-testid="info-modal-title">
+            <BlocksuiteHeaderTitle
+              className={styles.titleStyle}
+              inputHandleRef={titleInputHandleRef}
+              pageId={page.id}
+              docCollection={workspace.docCollection}
+            />
+          </div>
+          <managerContext.Provider value={manager}>
+            <Suspense>
+              <InfoTable
+                docId={page.id}
+                onClose={handleClose}
+                references={references}
+                readonly={manager.readonly}
+              />
+            </Suspense>
+          </managerContext.Provider>
+        </Scrollable.Viewport>
+        <Scrollable.Scrollbar className={styles.scrollBar} />
+      </Scrollable.Root>
+    </Modal>
+  );
+};
+
+const InfoTable = ({
+  onClose,
+  references,
+  docId,
+  readonly,
+}: {
+  docId: string;
+  onClose: () => void;
+  readonly: boolean;
+  references:
+    | {
+        docId: string;
+        title: string;
+      }[]
+    | null;
+}) => {
+  const manager = useContext(managerContext);
+
+  return (
+    <div>
+      <TimeRow docId={docId} />
+      <Divider size="thinner" />
+      {references && references.length > 0 ? (
+        <>
+          <BackLinksRow references={references} onClick={onClose} />
+          <Divider size="thinner" />
+        </>
+      ) : null}
+      <TagsRow docId={docId} readonly={readonly} />
+      <SortableProperties>
+        {properties =>
+          properties.length ? (
+            <div>
+              {properties
+                .filter(
+                  property =>
+                    manager.isPropertyRequired(property.id) ||
+                    (property.visibility !== 'hide' &&
+                      !(
+                        property.visibility === 'hide-if-empty' &&
+                        !property.value
+                      ))
+                )
+                .map(property => (
+                  <PagePropertyRow
+                    key={property.id}
+                    property={property}
+                    rowNameClassName={styles.rowNameContainer}
+                  />
+                ))}
+            </div>
+          ) : null
+        }
+      </SortableProperties>
+      {manager.readonly ? null : <PagePropertiesAddProperty />}
+    </div>
+  );
+};
--- a/packages/frontend/core/src/components/affine/page-properties/info-modal/tags-row.css.ts
+++ b/packages/frontend/core/src/components/affine/page-properties/info-modal/tags-row.css.ts
@@ -0,0 +1,102 @@
+import { cssVar } from '@toeverything/theme';
+import { style } from '@vanilla-extract/css';
+
+export const icon = style({
+  fontSize: 16,
+  color: cssVar('iconSecondary'),
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+});
+
+export const rowNameContainer = style({
+  display: 'flex',
+  flexDirection: 'row',
+  alignItems: 'center',
+  gap: 6,
+  padding: 6,
+  width: '160px',
+});
+
+export const rowName = style({
+  flexGrow: 1,
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap',
+  fontSize: cssVar('fontSm'),
+  color: cssVar('textSecondaryColor'),
+});
+
+export const time = style({
+  display: 'flex',
+  alignItems: 'center',
+  padding: '6px 8px',
+  flexGrow: 1,
+  fontSize: cssVar('fontSm'),
+});
+
+export const rowCell = style({
+  display: 'flex',
+  flexDirection: 'row',
+  alignItems: 'start',
+  gap: 4,
+});
+
+export const container = style({
+  display: 'flex',
+  flexDirection: 'column',
+  marginTop: 20,
+  marginBottom: 4,
+});
+
+export const rowValueCell = style({
+  display: 'flex',
+  flexDirection: 'row',
+  alignItems: 'flex-start',
+  position: 'relative',
+  borderRadius: 4,
+  fontSize: cssVar('fontSm'),
+  lineHeight: '22px',
+  userSelect: 'none',
+  ':focus-visible': {
+    outline: 'none',
+  },
+  cursor: 'pointer',
+  ':hover': {
+    backgroundColor: cssVar('hoverColor'),
+  },
+  padding: '6px 8px',
+  border: `1px solid transparent`,
+  color: cssVar('textPrimaryColor'),
+  ':focus': {
+    backgroundColor: cssVar('hoverColor'),
+  },
+  '::placeholder': {
+    color: cssVar('placeholderColor'),
+  },
+  selectors: {
+    '&[data-empty="true"]': {
+      color: cssVar('placeholderColor'),
+    },
+    '&[data-readonly=true]': {
+      pointerEvents: 'none',
+    },
+  },
+  flex: 1,
+});
+
+export const tagsMenu = style({
+  padding: 0,
+  transform:
+    'translate(-3.5px, calc(-3.5px + var(--radix-popper-anchor-height) * -1))',
+  width: 'calc(var(--radix-popper-anchor-width) + 16px)',
+  overflow: 'hidden',
+});
+
+export const tagsInlineEditor = style({
+  selectors: {
+    '&[data-empty=true]': {
+      color: cssVar('placeholderColor'),
+    },
+  },
+});
--- a/packages/frontend/core/src/components/affine/page-properties/info-modal/tags-row.tsx
+++ b/packages/frontend/core/src/components/affine/page-properties/info-modal/tags-row.tsx
@@ -0,0 +1,58 @@
+import { Menu } from '@affine/component';
+import { TagService } from '@affine/core/modules/tag';
+import { useI18n } from '@affine/i18n';
+import { TagsIcon } from '@blocksuite/icons/rc';
+import { useLiveData, useService } from '@toeverything/infra';
+import clsx from 'clsx';
+
+import { InlineTagsList, TagsEditor } from '../tags-inline-editor';
+import * as styles from './tags-row.css';
+
+export const TagsRow = ({
+  docId,
+  readonly,
+}: {
+  docId: string;
+  readonly: boolean;
+}) => {
+  const t = useI18n();
+  const tagList = useService(TagService).tagList;
+  const tagIds = useLiveData(tagList.tagIdsByPageId$(docId));
+  const empty = !tagIds || tagIds.length === 0;
+  return (
+    <div className={styles.rowCell} data-testid="info-modal-tags-row">
+      <div className={styles.rowNameContainer}>
+        <div className={styles.icon}>
+          <TagsIcon />
+        </div>
+        <div className={styles.rowName}>{t['Tags']()}</div>
+      </div>
+      <Menu
+        contentOptions={{
+          side: 'bottom',
+          align: 'start',
+          sideOffset: 0,
+          avoidCollisions: false,
+          className: styles.tagsMenu,
+          onClick(e) {
+            e.stopPropagation();
+          },
+        }}
+        items={<TagsEditor pageId={docId} readonly={readonly} />}
+      >
+        <div
+          className={clsx(styles.tagsInlineEditor, styles.rowValueCell)}
+          data-empty={empty}
+          data-readonly={readonly}
+          data-testid="info-modal-tags-value"
+        >
+          {empty ? (
+            t['com.affine.page-properties.property-value-placeholder']()
+          ) : (
+            <InlineTagsList pageId={docId} readonly />
+          )}
+        </div>
+      </Menu>
+    </div>
+  );
+};
--- a/packages/frontend/core/src/components/affine/page-properties/info-modal/time-row.css.ts
+++ b/packages/frontend/core/src/components/affine/page-properties/info-modal/time-row.css.ts
@@ -0,0 +1,51 @@
+import { cssVar } from '@toeverything/theme';
+import { style } from '@vanilla-extract/css';
+
+export const icon = style({
+  fontSize: 16,
+  color: cssVar('iconSecondary'),
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+});
+
+export const rowNameContainer = style({
+  display: 'flex',
+  flexDirection: 'row',
+  alignItems: 'center',
+
+  gap: 6,
+  padding: 6,
+  width: '160px',
+});
+
+export const rowName = style({
+  flexGrow: 1,
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap',
+  fontSize: cssVar('fontSm'),
+  color: cssVar('textSecondaryColor'),
+});
+
+export const time = style({
+  display: 'flex',
+  alignItems: 'center',
+  padding: '6px 8px',
+  flexGrow: 1,
+  fontSize: cssVar('fontSm'),
+});
+
+export const rowCell = style({
+  display: 'flex',
+  flexDirection: 'row',
+  alignItems: 'center',
+  gap: 4,
+});
+
+export const container = style({
+  display: 'flex',
+  flexDirection: 'column',
+  marginTop: 20,
+  marginBottom: 4,
+});
--- a/packages/frontend/core/src/components/affine/page-properties/info-modal/time-row.tsx
+++ b/packages/frontend/core/src/components/affine/page-properties/info-modal/time-row.tsx
@@ -0,0 +1,92 @@
+import { i18nTime, useI18n } from '@affine/i18n';
+import { DateTimeIcon, HistoryIcon } from '@blocksuite/icons/rc';
+import { useLiveData, useService, WorkspaceService } from '@toeverything/infra';
+import type { ConfigType } from 'dayjs';
+import { useDebouncedValue } from 'foxact/use-debounced-value';
+import { type ReactNode, useContext, useMemo } from 'react';
+
+import { managerContext } from '../common';
+import * as styles from './time-row.css';
+
+const RowComponent = ({
+  name,
+  icon,
+  time,
+}: {
+  name: string;
+  icon: ReactNode;
+  time?: string | null;
+}) => {
+  return (
+    <div className={styles.rowCell}>
+      <div className={styles.rowNameContainer}>
+        <div className={styles.icon}>{icon}</div>
+        <span className={styles.rowName}>{name}</span>
+      </div>
+      <div className={styles.time}>{time ? time : 'unknown'}</div>
+    </div>
+  );
+};
+
+export const TimeRow = ({ docId }: { docId: string }) => {
+  const t = useI18n();
+  const manager = useContext(managerContext);
+  const workspaceService = useService(WorkspaceService);
+  const { syncing, retrying, serverClock } = useLiveData(
+    workspaceService.workspace.engine.doc.docState$(docId)
+  );
+
+  const timestampElement = useMemo(() => {
+    const formatI18nTime = (time: ConfigType) =>
+      i18nTime(time, {
+        relative: {
+          max: [1, 'day'],
+          accuracy: 'minute',
+        },
+        absolute: {
+          accuracy: 'day',
+        },
+      });
+    const localizedCreateTime = manager.createDate
+      ? formatI18nTime(manager.createDate)
+      : null;
+
+    return (
+      <>
+        <RowComponent
+          icon={<DateTimeIcon />}
+          name={t['Created']()}
+          time={
+            manager.createDate
+              ? formatI18nTime(manager.createDate)
+              : localizedCreateTime
+          }
+        />
+        {serverClock ? (
+          <RowComponent
+            icon={<HistoryIcon />}
+            name={t[!syncing && !retrying ? 'Updated' : 'com.affine.syncing']()}
+            time={!syncing && !retrying ? formatI18nTime(serverClock) : null}
+          />
+        ) : manager.updatedDate ? (
+          <RowComponent
+            icon={<HistoryIcon />}
+            name={t['Updated']()}
+            time={formatI18nTime(manager.updatedDate)}
+          />
+        ) : null}
+      </>
+    );
+  }, [
+    manager.createDate,
+    manager.updatedDate,
+    retrying,
+    serverClock,
+    syncing,
+    t,
+  ]);
+
+  const dTimestampElement = useDebouncedValue(timestampElement, 500);
+
+  return <div className={styles.container}>{dTimestampElement}</div>;
+};
--- a/packages/frontend/core/src/components/affine/page-properties/styles.css.ts
+++ b/packages/frontend/core/src/components/affine/page-properties/styles.css.ts
@@ -129,6 +129,16 @@ export const addPropertyButton = style({
    color: cssVar('textPrimaryColor'),
    backgroundColor: cssVar('hoverColor'),
  },
+  gap: 2,
+  fontWeight: 400,
+});
+
+globalStyle(`${addPropertyButton} svg`, {
+  fontSize: 16,
+  color: cssVar('iconSecondary'),
+});
+globalStyle(`${addPropertyButton}:hover svg`, {
+  color: cssVar('iconColor'),
 });

 export const collapsedIcon = style({
@@ -262,7 +272,7 @@ export const propertyRowIconContainer = style({
  justifyContent: 'center',
  borderRadius: '2px',
  fontSize: 16,
-  color: 'inherit',
+  color: cssVar('iconSecondary'),
 });

 export const propertyRowNameContainer = style({
--- a/packages/frontend/core/src/components/affine/page-properties/table.tsx
+++ b/packages/frontend/core/src/components/affine/page-properties/table.tsx
@@ -105,7 +105,7 @@ interface SortablePropertiesProps {
  children: (properties: PageInfoCustomProperty[]) => React.ReactNode;
 }

-const SortableProperties = ({ children }: SortablePropertiesProps) => {
+export const SortableProperties = ({ children }: SortablePropertiesProps) => {
  const manager = useContext(managerContext);
  const properties = useMemo(() => manager.sorter.getOrderedItems(), [manager]);
  const editingItem = useAtomValue(editingPropertyAtom);
@@ -735,9 +735,13 @@ export const PagePropertiesTableHeader = ({
 interface PagePropertyRowProps {
  property: PageInfoCustomProperty;
  style?: React.CSSProperties;
+  rowNameClassName?: string;
 }

-const PagePropertyRow = ({ property }: PagePropertyRowProps) => {
+export const PagePropertyRow = ({
+  property,
+  rowNameClassName,
+}: PagePropertyRowProps) => {
  const manager = useContext(managerContext);
  const meta = manager.getCustomPropertyMeta(property.id);

@@ -772,7 +776,10 @@ const PagePropertyRow = ({ property }: PagePropertyRowProps) => {
              {...attributes}
              {...listeners}
              data-testid="page-property-row-name"
-              className={styles.sortablePropertyRowNameCell}
+              className={clsx(
+                styles.sortablePropertyRowNameCell,
+                rowNameClassName
+              )}
              onClick={handleEditMeta}
            >
              <div className={styles.propertyRowNameContainer}>
@@ -790,7 +797,11 @@ const PagePropertyRow = ({ property }: PagePropertyRowProps) => {
  );
 };

-const PageTagsRow = () => {
+export const PageTagsRow = ({
+  rowNameClassName,
+}: {
+  rowNameClassName?: string;
+}) => {
  const t = useI18n();
  return (
    <div
@@ -799,7 +810,7 @@ const PageTagsRow = () => {
      data-property="tags"
    >
      <div
-        className={styles.propertyRowNameCell}
+        className={clsx(styles.propertyRowNameCell, rowNameClassName)}
        data-testid="page-property-row-name"
      >
        <div className={styles.propertyRowNameContainer}>
@@ -1074,7 +1085,7 @@ const PagePropertiesTableInner = () => {
  );
 };

-const usePagePropertiesManager = (page: Doc) => {
+export const usePagePropertiesManager = (page: Doc) => {
  // the workspace properties adapter adapter is reactive,
  // which means it's reference will change when any of the properties change
  // also it will trigger a re-render of the component
--- a/packages/frontend/core/src/components/affine/page-properties/tags-inline-editor.tsx
+++ b/packages/frontend/core/src/components/affine/page-properties/tags-inline-editor.tsx
@@ -30,7 +30,7 @@ interface InlineTagsListProps
  onRemove?: () => void;
 }

-const InlineTagsList = ({
+export const InlineTagsList = ({
  pageId,
  readonly,
  children,
--- a/packages/frontend/core/src/components/blocksuite/block-suite-header/info/index.tsx
+++ b/packages/frontend/core/src/components/blocksuite/block-suite-header/info/index.tsx
@@ -0,0 +1,22 @@
+import { IconButton, Tooltip } from '@affine/component';
+import { openInfoModalAtom } from '@affine/core/atoms';
+import { useI18n } from '@affine/i18n';
+import { InformationIcon } from '@blocksuite/icons/rc';
+import { useSetAtom } from 'jotai';
+
+export const InfoButton = () => {
+  const setOpenInfoModal = useSetAtom(openInfoModalAtom);
+  const t = useI18n();
+  const onOpenInfoModal = () => {
+    setOpenInfoModal(true);
+  };
+  return (
+    <Tooltip content={t['com.affine.page-properties.page-info.view']()}>
+      <IconButton
+        data-testid="header-info-button"
+        onClick={onOpenInfoModal}
+        icon={<InformationIcon />}
+      />
+    </Tooltip>
+  );
+};
--- a/packages/frontend/core/src/components/blocksuite/block-suite-header/menu/index.tsx
+++ b/packages/frontend/core/src/components/blocksuite/block-suite-header/menu/index.tsx
@@ -6,7 +6,10 @@ import {
  MenuSeparator,
  MenuSub,
 } from '@affine/component/ui/menu';
-import { openHistoryTipsModalAtom } from '@affine/core/atoms';
+import {
+  openHistoryTipsModalAtom,
+  openInfoModalAtom,
+} from '@affine/core/atoms';
 import { PageHistoryModal } from '@affine/core/components/affine/page-history-modal';
 import { ShareMenuContent } from '@affine/core/components/affine/share-page-modal/share-menu';
 import { Export, MoveToTrash } from '@affine/core/components/page-list';
@@ -27,6 +30,7 @@ import {
  FavoriteIcon,
  HistoryIcon,
  ImportIcon,
+  InformationIcon,
  PageIcon,
  ShareIcon,
 } from '@blocksuite/icons/rc';
@@ -83,6 +87,11 @@ export const PageHeaderMenuButton = ({
    return setOpenHistoryTipsModal(true);
  }, [setOpenHistoryTipsModal, workspace.flavour]);

+  const setOpenInfoModal = useSetAtom(openInfoModalAtom);
+  const openInfoModal = () => {
+    setOpenInfoModal(true);
+  };
+
  const handleOpenTrashModal = useCallback(() => {
    setTrashModal({
      open: true,
@@ -236,6 +245,35 @@ export const PageHeaderMenuButton = ({
        {t['com.affine.header.option.add-tag']()}
      </MenuItem> */}
      <MenuSeparator />
+      {runtimeConfig.enableInfoModal ? (
+        <MenuItem
+          preFix={
+            <MenuIcon>
+              <InformationIcon />
+            </MenuIcon>
+          }
+          data-testid="editor-option-menu-info"
+          onSelect={openInfoModal}
+          style={menuItemStyle}
+        >
+          {t['com.affine.page-properties.page-info.view']()}
+        </MenuItem>
+      ) : null}
+      {runtimeConfig.enablePageHistory ? (
+        <MenuItem
+          preFix={
+            <MenuIcon>
+              <HistoryIcon />
+            </MenuIcon>
+          }
+          data-testid="editor-option-menu-history"
+          onSelect={openHistoryModal}
+          style={menuItemStyle}
+        >
+          {t['com.affine.history.view-history-version']()}
+        </MenuItem>
+      ) : null}
+      <MenuSeparator />
      {!isJournal && (
        <MenuItem
          preFix={
@@ -264,21 +302,6 @@ export const PageHeaderMenuButton = ({
      </MenuItem>
      <Export exportHandler={exportHandler} pageMode={currentMode} />

-      {runtimeConfig.enablePageHistory ? (
-        <MenuItem
-          preFix={
-            <MenuIcon>
-              <HistoryIcon />
-            </MenuIcon>
-          }
-          data-testid="editor-option-menu-history"
-          onSelect={openHistoryModal}
-          style={menuItemStyle}
-        >
-          {t['com.affine.history.view-history-version']()}
-        </MenuItem>
-      ) : null}
-
      <MenuSeparator />
      <MoveToTrash
        data-testid="editor-option-menu-delete"
--- a/packages/frontend/core/src/components/blocksuite/block-suite-header/title/index.tsx
+++ b/packages/frontend/core/src/components/blocksuite/block-suite-header/title/index.tsx
@@ -5,6 +5,7 @@ import {
  useDocMetaHelper,
 } from '@affine/core/hooks/use-block-suite-page-meta';
 import type { DocCollection } from '@affine/core/shared';
+import clsx from 'clsx';
 import type { HTMLAttributes } from 'react';
 import { useCallback } from 'react';

@@ -16,6 +17,7 @@ export interface BlockSuiteHeaderTitleProps {
  /** if set, title cannot be edited */
  isPublic?: boolean;
  inputHandleRef?: InlineEditProps['handleRef'];
+  className?: string;
 }

 const inputAttrs = {
@@ -39,7 +41,7 @@ export const BlocksuiteHeaderTitle = (props: BlockSuiteHeaderTitleProps) => {

  return (
    <InlineEdit
-      className={styles.title}
+      className={clsx(styles.title, props.className)}
      autoSelect
      value={title}
      onChange={onChange}
--- a/packages/frontend/core/src/components/page-list/operation-cell.tsx
+++ b/packages/frontend/core/src/components/page-list/operation-cell.tsx
@@ -25,6 +25,7 @@ import {
  FavoriteIcon,
  FilterIcon,
  FilterMinusIcon,
+  InformationIcon,
  MoreVerticalIcon,
  PlusIcon,
  ResetIcon,
@@ -36,6 +37,7 @@ import { useCallback, useState } from 'react';
 import { Link } from 'react-router-dom';

 import type { CollectionService } from '../../modules/collection';
+import { InfoModal } from '../affine/page-properties';
 import { usePageHelper } from '../blocksuite/block-suite-page-list/utils';
 import { FavoriteTag } from './components/favorite-tag';
 import * as styles from './list.css';
@@ -65,6 +67,12 @@ export const PageOperationCell = ({
  const favourite = useLiveData(favAdapter.isFavorite$(page.id, 'doc'));
  const workbench = useService(WorkbenchService).workbench;
  const { duplicate } = useBlockSuiteMetaHelper(currentWorkspace.docCollection);
+  const blocksuiteDoc = currentWorkspace.docCollection.getDoc(page.id);
+
+  const [openInfoModal, setOpenInfoModal] = useState(false);
+  const onOpenInfoModal = () => {
+    setOpenInfoModal(true);
+  };

  const onDisablePublicSharing = useCallback(() => {
    toast('Successfully disabled', {
@@ -144,6 +152,18 @@ export const PageOperationCell = ({
          ? t['com.affine.favoritePageOperation.remove']()
          : t['com.affine.favoritePageOperation.add']()}
      </MenuItem>
+      {runtimeConfig.enableInfoModal ? (
+        <MenuItem
+          onClick={onOpenInfoModal}
+          preFix={
+            <MenuIcon>
+              <InformationIcon />
+            </MenuIcon>
+          }
+        >
+          {t['com.affine.page-properties.page-info.view']()}
+        </MenuItem>
+      ) : null}

      {environment.isDesktop && appSettings.enableMultiView ? (
        <MenuItem
@@ -215,6 +235,14 @@ export const PageOperationCell = ({
          </IconButton>
        </Menu>
      </ColWrapper>
+      {blocksuiteDoc ? (
+        <InfoModal
+          open={openInfoModal}
+          onOpenChange={setOpenInfoModal}
+          page={blocksuiteDoc}
+          workspace={currentWorkspace}
+        />
+      ) : null}
      <DisablePublicSharing.DisablePublicSharingModal
        onConfirm={onDisablePublicSharing}
        open={openDisableShared}
--- a/packages/frontend/core/src/components/pure/workspace-slider-bar/components/operation-item.tsx
+++ b/packages/frontend/core/src/components/pure/workspace-slider-bar/components/operation-item.tsx
@@ -7,6 +7,7 @@ import {
  EditIcon,
  FavoriteIcon,
  FilterMinusIcon,
+  InformationIcon,
  LinkedPageIcon,
  SplitViewIcon,
 } from '@blocksuite/icons/rc';
@@ -24,6 +25,7 @@ type OperationItemsProps = {
  onRemoveFromFavourites?: () => void;
  onDelete: () => void;
  onOpenInSplitView: () => void;
+  onOpenInfoModal: () => void;
 };

 export const OperationItems = ({
@@ -36,6 +38,7 @@ export const OperationItems = ({
  onRemoveFromFavourites,
  onDelete,
  onOpenInSplitView,
+  onOpenInfoModal,
 }: OperationItemsProps) => {
  const { appSettings } = useAppSettingHelper();
  const t = useI18n();
@@ -63,6 +66,19 @@ export const OperationItems = ({
        name: t['Rename'](),
        click: onRename,
      },
+      ...(runtimeConfig.enableInfoModal
+        ? [
+            {
+              icon: (
+                <MenuIcon>
+                  <InformationIcon />
+                </MenuIcon>
+              ),
+              name: t['com.affine.page-properties.page-info.view'](),
+              click: onOpenInfoModal,
+            },
+          ]
+        : []),
      {
        icon: (
          <MenuIcon>
@@ -123,7 +139,7 @@ export const OperationItems = ({
            <DeleteIcon />
          </MenuIcon>
        ),
-        name: t['com.affine.trashOperation.delete'](),
+        name: t['com.affine.moveToTrash.title'](),
        click: onDelete,
        type: 'danger',
      },
@@ -139,6 +155,7 @@ export const OperationItems = ({
      onRemoveFromAllowList,
      appSettings.enableMultiView,
      onOpenInSplitView,
+      onOpenInfoModal,
      onDelete,
    ]
  );
--- a/packages/frontend/core/src/components/pure/workspace-slider-bar/components/operation-menu-button.tsx
+++ b/packages/frontend/core/src/components/pure/workspace-slider-bar/components/operation-menu-button.tsx
@@ -1,12 +1,13 @@
 import { toast } from '@affine/component';
 import { IconButton } from '@affine/component/ui/button';
 import { Menu } from '@affine/component/ui/menu';
+import { InfoModal } from '@affine/core/components/affine/page-properties';
 import { FavoriteItemsAdapter } from '@affine/core/modules/properties';
 import { WorkbenchService } from '@affine/core/modules/workbench';
 import { useI18n } from '@affine/i18n';
 import { MoreHorizontalIcon } from '@blocksuite/icons/rc';
 import { useService, useServices, WorkspaceService } from '@toeverything/infra';
-import { useCallback } from 'react';
+import { useCallback, useState } from 'react';

 import { useTrashModalHelper } from '../../../../hooks/affine/use-trash-modal-helper';
 import { usePageHelper } from '../../../blocksuite/block-suite-page-list/utils';
@@ -33,9 +34,12 @@ export const OperationMenuButton = ({ ...props }: OperationMenuButtonProps) => {
    isReferencePage,
  } = props;
  const t = useI18n();
+  const [openInfoModal, setOpenInfoModal] = useState(false);
+
  const { workspaceService } = useServices({
    WorkspaceService,
  });
+  const page = workspaceService.workspace.docCollection.getDoc(pageId);
  const { createLinkedPage } = usePageHelper(
    workspaceService.workspace.docCollection
  );
@@ -76,30 +80,45 @@ export const OperationMenuButton = ({ ...props }: OperationMenuButtonProps) => {
    workbench.openDoc(pageId, { at: 'tail' });
  }, [pageId, workbench]);

+  const handleOpenInfoModal = useCallback(() => {
+    setOpenInfoModal(true);
+  }, [setOpenInfoModal]);
+
  return (
-    <Menu
-      items={
-        <OperationItems
-          onAddLinkedPage={handleAddLinkedPage}
-          onDelete={handleDelete}
-          onRemoveFromAllowList={handleRemoveFromAllowList}
-          onRemoveFromFavourites={handleRemoveFromFavourites}
-          onRename={handleRename}
-          onOpenInSplitView={handleOpenInSplitView}
-          inAllowList={inAllowList}
-          inFavorites={inFavorites}
-          isReferencePage={isReferencePage}
-        />
-      }
-    >
-      <IconButton
-        size="small"
-        type="plain"
-        data-testid="left-sidebar-page-operation-button"
-        style={{ marginLeft: 4 }}
+    <>
+      <Menu
+        items={
+          <OperationItems
+            onAddLinkedPage={handleAddLinkedPage}
+            onDelete={handleDelete}
+            onRemoveFromAllowList={handleRemoveFromAllowList}
+            onRemoveFromFavourites={handleRemoveFromFavourites}
+            onRename={handleRename}
+            onOpenInSplitView={handleOpenInSplitView}
+            onOpenInfoModal={handleOpenInfoModal}
+            inAllowList={inAllowList}
+            inFavorites={inFavorites}
+            isReferencePage={isReferencePage}
+          />
+        }
      >
-        <MoreHorizontalIcon />
-      </IconButton>
-    </Menu>
+        <IconButton
+          size="small"
+          type="plain"
+          data-testid="left-sidebar-page-operation-button"
+          style={{ marginLeft: 4 }}
+        >
+          <MoreHorizontalIcon />
+        </IconButton>
+      </Menu>
+      {page ? (
+        <InfoModal
+          open={openInfoModal}
+          onOpenChange={setOpenInfoModal}
+          page={page}
+          workspace={workspaceService.workspace}
+        />
+      ) : null}
+    </>
  );
 };
--- a/packages/frontend/core/src/hooks/affine/use-register-blocksuite-editor-commands.tsx
+++ b/packages/frontend/core/src/hooks/affine/use-register-blocksuite-editor-commands.tsx
@@ -1,4 +1,5 @@
 import { toast } from '@affine/component';
+import { openInfoModalAtom } from '@affine/core/atoms';
 import {
  PreconditionStrategy,
  registerAffineCommand,
@@ -36,6 +37,7 @@ export function useRegisterBlocksuiteEditorCommands() {
  const trash = useLiveData(doc.trash$);

  const setPageHistoryModalState = useSetAtom(pageHistoryModalAtom);
+  const setInfoModalState = useSetAtom(openInfoModalAtom);

  const openHistoryModal = useCallback(() => {
    setPageHistoryModalState(() => ({
@@ -44,8 +46,11 @@ export function useRegisterBlocksuiteEditorCommands() {
    }));
  }, [docId, setPageHistoryModalState]);

-  const { restoreFromTrash, duplicate } =
-    useBlockSuiteMetaHelper(docCollection);
+  const openInfoModal = useCallback(() => {
+    setInfoModalState(true);
+  }, [setInfoModalState]);
+
+  const { duplicate } = useBlockSuiteMetaHelper(docCollection);
  const exportHandler = useExportPage(doc.blockSuiteDoc);
  const { setTrashModal } = useTrashModalHelper(docCollection);
  const onClickDelete = useCallback(
@@ -89,6 +94,22 @@ export function useRegisterBlocksuiteEditorCommands() {
    //   })
    // );

+    unsubs.push(
+      registerAffineCommand({
+        id: `editor:${mode}-view-info`,
+        preconditionStrategy: () =>
+          PreconditionStrategy.InPaperOrEdgeless &&
+          !trash &&
+          runtimeConfig.enableInfoModal,
+        category: `editor:${mode}`,
+        icon: mode === 'page' ? <PageIcon /> : <EdgelessIcon />,
+        label: t['com.affine.page-properties.page-info.view'](),
+        run() {
+          openInfoModal();
+        },
+      })
+    );
+
    unsubs.push(
      registerAffineCommand({
        id: `editor:${mode}-${favorite ? 'remove-from' : 'add-to'}-favourites`,
@@ -270,7 +291,6 @@ export function useRegisterBlocksuiteEditorCommands() {
    mode,
    onClickDelete,
    exportHandler,
-    restoreFromTrash,
    t,
    trash,
    isCloudWorkspace,
@@ -280,5 +300,6 @@ export function useRegisterBlocksuiteEditorCommands() {
    docId,
    doc,
    telemetry,
+    openInfoModal,
  ]);
 }
--- a/packages/frontend/core/src/pages/workspace/detail-page/detail-page-header.css.ts
+++ b/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,
+});
--- a/packages/frontend/core/src/pages/workspace/detail-page/detail-page-header.tsx
+++ b/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}
+      />
+    </>
  );
 }