feat(core): extract DocDisplayMetaService to resolve doc icon/title (#8226)

AF-1315

Author: CatsJuice

packages/frontend/core/src/components/affine/page-properties/info-modal/links-row.css.ts

@@ -32,5 +32,6 @@ globalStyle(`${wrapper} span`, {
   whiteSpace: 'nowrap',
   overflow: 'hidden',
   textOverflow: 'ellipsis',
-  borderBottom: 'none',
+  // don't modify border width to avoid layout shift
+  borderBottomColor: 'transparent',
 });

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

@@ -1,8 +1,6 @@
 import type { Backlink, Link } from '@affine/core/modules/doc-link';
-import { useContext } from 'react';
 
 import { AffinePageReference } from '../../reference-link';
-import { managerContext } from '../common';
 import * as styles from './links-row.css';
 
 export const LinksRow = ({
@@ -16,20 +14,18 @@ export const LinksRow = ({
   className?: string;
   onClick?: () => void;
 }) => {
-  const manager = useContext(managerContext);
   return (
     <div className={className}>
       <div className={styles.title}>
         {label} · {references.length}
       </div>
-      {references.map(link => (
+      {references.map((link, index) => (
         <AffinePageReference
-          key={link.docId}
+          key={index}
           pageId={link.docId}
           wrapper={props => (
             <div className={styles.wrapper} onClick={onClick} {...props} />
           )}
-          docCollection={manager.workspace.docCollection}
         />
       ))}
     </div>

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

@@ -379,8 +379,6 @@ export const PageBacklinksPopup = ({
   backlinks,
   children,
 }: PageBacklinksPopupProps) => {
-  const manager = useContext(managerContext);
-
   return (
     <Menu
       contentOptions={{
@@ -395,7 +393,6 @@ export const PageBacklinksPopup = ({
               key={link.docId + ':' + link.blockId}
               wrapper={MenuItem}
               pageId={link.docId}
-              docCollection={manager.workspace.docCollection}
             />
           ))}
         </div>

packages/frontend/core/src/components/affine/reference-link/index.tsx

@@ -1,5 +1,5 @@
-import { useDocMetaHelper } from '@affine/core/components/hooks/use-block-suite-page-meta';
-import { useJournalHelper } from '@affine/core/components/hooks/use-journal';
+import { useJournalInfoHelper } from '@affine/core/components/hooks/use-journal';
+import { DocDisplayMetaService } from '@affine/core/modules/doc-display-meta';
 import {
   PeekViewService,
   useInsidePeekView,
@@ -8,15 +8,8 @@ import { WorkbenchLink } from '@affine/core/modules/workbench';
 import { useI18n } from '@affine/i18n';
 import { track } from '@affine/track';
 import type { DocMode } from '@blocksuite/blocks';
-import {
-  BlockLinkIcon,
-  DeleteIcon,
-  LinkedEdgelessIcon,
-  LinkedPageIcon,
-  TodayIcon,
-} from '@blocksuite/icons/rc';
 import type { DocCollection } from '@blocksuite/store';
-import { DocsService, useLiveData, useService } from '@toeverything/infra';
+import { useLiveData, useService } from '@toeverything/infra';
 import { nanoid } from 'nanoid';
 import {
   type PropsWithChildren,
@@ -29,77 +22,18 @@ import { Link } from 'react-router-dom';
 
 import * as styles from './styles.css';
 
-export interface PageReferenceRendererOptions {
-  pageId: string;
-  docCollection: DocCollection;
-  pageMetaHelper: ReturnType<typeof useDocMetaHelper>;
-  journalHelper: ReturnType<typeof useJournalHelper>;
-  t: ReturnType<typeof useI18n>;
-  docMode?: DocMode;
-  // Link to block or element
-  linkToNode?: boolean;
-}
-
-// use a function to be rendered in the lit renderer
-export function pageReferenceRenderer({
-  pageId,
-  pageMetaHelper,
-  journalHelper,
-  t,
-  docMode,
-  linkToNode = false,
-}: PageReferenceRendererOptions) {
-  const { isPageJournal, getLocalizedJournalDateString } = journalHelper;
-  const referencedPage = pageMetaHelper.getDocMeta(pageId);
-  let title =
-    referencedPage?.title ?? t['com.affine.editor.reference-not-found']();
-
-  let Icon = DeleteIcon;
-
-  if (referencedPage) {
-    if (docMode === 'edgeless') {
-      Icon = LinkedEdgelessIcon;
-    } else {
-      Icon = LinkedPageIcon;
-    }
-    if (linkToNode) {
-      Icon = BlockLinkIcon;
-    }
-  }
-
-  const isJournal = isPageJournal(pageId);
-  const localizedJournalDate = getLocalizedJournalDateString(pageId);
-  if (isJournal && localizedJournalDate) {
-    title = localizedJournalDate;
-    Icon = TodayIcon;
-  }
-
-  return (
-    <>
-      <Icon className={styles.pageReferenceIcon} />
-      <span className="affine-reference-title">
-        {title ? title : t['Untitled']()}
-      </span>
-    </>
-  );
-}
-
 export function AffinePageReference({
   pageId,
-  docCollection,
   wrapper: Wrapper,
   params,
 }: {
   pageId: string;
-  docCollection: DocCollection;
   wrapper?: React.ComponentType<PropsWithChildren>;
   params?: URLSearchParams;
 }) {
+  const docDisplayMetaService = useService(DocDisplayMetaService);
+  const journalHelper = useJournalInfoHelper();
   const t = useI18n();
-  const pageMetaHelper = useDocMetaHelper();
-  const journalHelper = useJournalHelper(docCollection);
-  const docsService = useService(DocsService);
-  const mode = useLiveData(docsService.list.primaryMode$(pageId));
 
   let linkWithMode: DocMode | null = null;
   let linkToNode = false;
@@ -111,15 +45,23 @@ export function AffinePageReference({
     linkToNode = params.has('blockIds') || params.has('elementIds');
   }
 
-  const el = pageReferenceRenderer({
-    docMode: linkWithMode ?? mode ?? 'page',
-    pageId,
-    pageMetaHelper,
-    journalHelper,
-    docCollection,
-    t,
-    linkToNode,
-  });
+  const Icon = useLiveData(
+    docDisplayMetaService.icon$(pageId, {
+      mode: linkWithMode ?? undefined,
+      reference: true,
+      referenceToNode: linkToNode,
+    })
+  );
+  const title = useLiveData(docDisplayMetaService.title$(pageId));
+
+  const el = (
+    <>
+      <Icon className={styles.pageReferenceIcon} />
+      <span className="affine-reference-title">
+        {typeof title === 'string' ? title : t[title.key]()}
+      </span>
+    </>
+  );
 
   const ref = useRef<HTMLAnchorElement>(null);
 
@@ -186,11 +128,9 @@ export function AffineSharedPageReference({
   wrapper?: React.ComponentType<PropsWithChildren>;
   params?: URLSearchParams;
 }) {
+  const docDisplayMetaService = useService(DocDisplayMetaService);
+  const journalHelper = useJournalInfoHelper();
   const t = useI18n();
-  const pageMetaHelper = useDocMetaHelper();
-  const journalHelper = useJournalHelper(docCollection);
-  const docsService = useService(DocsService);
-  const mode = useLiveData(docsService.list.primaryMode$(pageId));
 
   let linkWithMode: DocMode | null = null;
   let linkToNode = false;
@@ -202,15 +142,22 @@ export function AffineSharedPageReference({
     linkToNode = params.has('blockIds') || params.has('elementIds');
   }
 
-  const el = pageReferenceRenderer({
-    docMode: linkWithMode ?? mode ?? 'page',
-    pageId,
-    pageMetaHelper,
-    journalHelper,
-    docCollection,
-    t,
-    linkToNode,
-  });
+  const Icon = useLiveData(
+    docDisplayMetaService.icon$(pageId, {
+      mode: linkWithMode ?? undefined,
+      reference: true,
+      referenceToNode: linkToNode,
+    })
+  );
+  const title = useLiveData(docDisplayMetaService.title$(pageId));
+  const el = (
+    <>
+      <Icon className={styles.pageReferenceIcon} />
+      <span className="affine-reference-title">
+        {typeof title === 'string' ? title : t[title.key]()}
+      </span>
+    </>
+  );
 
   const ref = useRef<HTMLAnchorElement>(null);
 

packages/frontend/core/src/components/blocksuite/block-suite-editor/bi-directional-link-panel.tsx

@@ -1,20 +1,15 @@
 import { DocLinksService } from '@affine/core/modules/doc-link';
 import { useI18n } from '@affine/i18n';
-import {
-  useLiveData,
-  useServices,
-  WorkspaceService,
-} from '@toeverything/infra';
+import { useLiveData, useServices } from '@toeverything/infra';
 import { useCallback, useState } from 'react';
 
 import { AffinePageReference } from '../../affine/reference-link';
 import * as styles from './bi-directional-link-panel.css';
 
 export const BiDirectionalLinkPanel = () => {
   const [show, setShow] = useState(false);
-  const { docLinksService, workspaceService } = useServices({
+  const { docLinksService } = useServices({
     DocLinksService,
-    WorkspaceService,
   });
   const t = useI18n();
 
@@ -50,11 +45,7 @@ export const BiDirectionalLinkPanel = () => {
             </div>
             {backlinks.map(link => (
               <div key={link.docId} className={styles.link}>
-                <AffinePageReference
-                  key={link.docId}
-                  pageId={link.docId}
-                  docCollection={workspaceService.workspace.docCollection}
-                />
+                <AffinePageReference key={link.docId} pageId={link.docId} />
               </div>
             ))}
           </div>
@@ -68,11 +59,7 @@ export const BiDirectionalLinkPanel = () => {
                 key={`${link.docId}-${link.params?.toString()}-${i}`}
                 className={styles.link}
               >
-                <AffinePageReference
-                  pageId={link.docId}
-                  params={link.params}
-                  docCollection={workspaceService.workspace.docCollection}
-                />
+                <AffinePageReference pageId={link.docId} params={link.params} />
               </div>
             ))}
           </div>

packages/frontend/core/src/components/blocksuite/block-suite-editor/journal-doc-title.tsx

@@ -6,7 +6,7 @@ import * as styles from './styles.css';
 
 export const BlocksuiteEditorJournalDocTitle = ({ page }: { page: Doc }) => {
   const { localizedJournalDate, isTodayJournal, journalDate } =
-    useJournalInfoHelper(page.collection, page.id);
+    useJournalInfoHelper(page.id);
   const t = useI18n();
 
   // TODO(catsjuice): i18n

packages/frontend/core/src/components/blocksuite/block-suite-editor/lit-adaper.tsx

@@ -72,7 +72,7 @@ interface BlocksuiteEditorProps {
   shared?: boolean;
 }
 
-const usePatchSpecs = (page: Doc, shared: boolean, mode: DocMode) => {
+const usePatchSpecs = (shared: boolean, mode: DocMode) => {
   const [reactToLit, portals] = useLitPortalFactory();
   const {
     peekViewService,
@@ -110,15 +110,9 @@ const usePatchSpecs = (page: Doc, shared: boolean, mode: DocMode) => {
         );
       }
 
-      return (
-        <AffinePageReference
-          docCollection={page.collection}
-          pageId={pageId}
-          params={params}
-        />
-      );
+      return <AffinePageReference pageId={pageId} params={params} />;
     };
-  }, [page.collection, workspaceService]);
+  }, [workspaceService]);
 
   const specs = useMemo(() => {
     const enableAI = featureFlagService.flags.enable_ai.value;
@@ -184,7 +178,7 @@ export const BlocksuiteDocEditor = forwardRef<
 ) {
   const titleRef = useRef<DocTitle | null>(null);
   const docRef = useRef<PageEditor | null>(null);
-  const { isJournal } = useJournalInfoHelper(page.collection, page.id);
+  const { isJournal } = useJournalInfoHelper(page.id);
 
   const editorSettingService = useService(EditorSettingService);
 
@@ -216,7 +210,7 @@ export const BlocksuiteDocEditor = forwardRef<
     [externalTitleRef]
   );
 
-  const [specs, portals] = usePatchSpecs(page, !!shared, 'page');
+  const [specs, portals] = usePatchSpecs(!!shared, 'page');
 
   const displayBiDirectionalLink = useLiveData(
     editorSettingService.editorSetting.settings$.selector(
@@ -257,7 +251,7 @@ export const BlocksuiteEdgelessEditor = forwardRef<
   EdgelessEditor,
   BlocksuiteEditorProps
 >(function BlocksuiteEdgelessEditor({ page, shared }, ref) {
-  const [specs, portals] = usePatchSpecs(page, !!shared, 'edgeless');
+  const [specs, portals] = usePatchSpecs(!!shared, 'edgeless');
   const editorRef = useRef<EdgelessEditor | null>(null);
 
   const onDocRef = useCallback(