feat(core): impl doc display meta extension

packages/common/env/package.json

@@ -3,7 +3,7 @@
   "private": true,
   "type": "module",
   "devDependencies": {
-    "@blocksuite/affine": "0.19.0",
+    "@blocksuite/affine": "0.0.0-canary-20241216011454",
     "vitest": "2.1.8"
   },
   "exports": {

packages/common/infra/package.json

@@ -15,7 +15,7 @@
     "@affine/debug": "workspace:*",
     "@affine/env": "workspace:*",
     "@affine/templates": "workspace:*",
-    "@blocksuite/affine": "0.19.0",
+    "@blocksuite/affine": "0.0.0-canary-20241216011454",
     "@datastructures-js/binary-search-tree": "^5.3.2",
     "eventemitter2": "^6.4.9",
     "foxact": "^0.2.43",

packages/frontend/apps/android/package.json

@@ -13,7 +13,7 @@
     "@affine/component": "workspace:*",
     "@affine/core": "workspace:*",
     "@affine/i18n": "workspace:*",
-    "@blocksuite/affine": "0.19.0",
+    "@blocksuite/affine": "0.0.0-canary-20241216011454",
     "@blocksuite/icons": "2.1.75",
     "@capacitor/android": "^6.2.0",
     "@capacitor/core": "^6.2.0",

packages/frontend/apps/electron/package.json

@@ -30,7 +30,7 @@
     "@affine/i18n": "workspace:*",
     "@affine/native": "workspace:*",
     "@affine/nbstore": "workspace:*",
-    "@blocksuite/affine": "0.19.0",
+    "@blocksuite/affine": "0.0.0-canary-20241216011454",
     "@electron-forge/cli": "^7.6.0",
     "@electron-forge/core": "^7.6.0",
     "@electron-forge/core-utils": "^7.6.0",

packages/frontend/apps/ios/package.json

@@ -15,7 +15,7 @@
     "@affine/component": "workspace:*",
     "@affine/core": "workspace:*",
     "@affine/i18n": "workspace:*",
-    "@blocksuite/affine": "0.19.0",
+    "@blocksuite/affine": "0.0.0-canary-20241216011454",
     "@blocksuite/icons": "2.1.75",
     "@capacitor/app": "^6.0.2",
     "@capacitor/browser": "^6.0.4",

packages/frontend/apps/mobile/package.json

@@ -13,7 +13,7 @@
     "@affine/component": "workspace:*",
     "@affine/core": "workspace:*",
     "@affine/i18n": "workspace:*",
-    "@blocksuite/affine": "0.19.0",
+    "@blocksuite/affine": "0.0.0-canary-20241216011454",
     "@blocksuite/icons": "2.1.75",
     "@sentry/react": "^8.44.0",
     "react": "^19.0.0",

packages/frontend/component/package.json

@@ -66,7 +66,7 @@
     "zod": "^3.24.1"
   },
   "devDependencies": {
-    "@blocksuite/affine": "0.19.0",
+    "@blocksuite/affine": "0.0.0-canary-20241216011454",
     "@blocksuite/icons": "2.1.75",
     "@chromatic-com/storybook": "^3.2.2",
     "@storybook/addon-essentials": "^8.4.7",

packages/frontend/core/package.json

@@ -16,7 +16,7 @@
     "@affine/i18n": "workspace:*",
     "@affine/templates": "workspace:*",
     "@affine/track": "workspace:*",
-    "@blocksuite/affine": "0.19.0",
+    "@blocksuite/affine": "0.0.0-canary-20241216011454",
     "@blocksuite/icons": "2.1.75",
     "@capacitor/app": "^6.0.2",
     "@capacitor/browser": "^6.0.4",

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

@@ -3,7 +3,6 @@ import { JournalService } from '@affine/core/modules/journal';
 import { PeekViewService } from '@affine/core/modules/peek-view/services/peek-view';
 import { useInsidePeekView } from '@affine/core/modules/peek-view/view/modal-container';
 import { WorkbenchLink } from '@affine/core/modules/workbench';
-import { useI18n } from '@affine/i18n';
 import { track } from '@affine/track';
 import type { DocMode } from '@blocksuite/affine/blocks';
 import type { DocCollection } from '@blocksuite/affine/store';
@@ -30,7 +29,7 @@ import * as styles from './styles.css';
 interface AffinePageReferenceProps {
   pageId: string;
   params?: URLSearchParams;
-  title?: string | null; // title alias
+  title?: string; // title alias
   className?: string;
   Icon?: ComponentType;
   onClick?: (e: MouseEvent) => void;
@@ -44,7 +43,6 @@ function AffinePageReferenceInner({
 }: AffinePageReferenceProps) {
   const docDisplayMetaService = useService(DocDisplayMetaService);
   const docsService = useService(DocsService);
-  const i18n = useI18n();
 
   let referenceWithMode: DocMode | null = null;
   let referenceToNode = false;
@@ -74,18 +72,10 @@ function AffinePageReferenceInner({
 
   const notFound = !useLiveData(docsService.list.doc$(pageId));
 
-  const docTitle = useLiveData(
-    docDisplayMetaService.title$(pageId, { reference: true })
+  title = useLiveData(
+    docDisplayMetaService.title$(pageId, { title, reference: true })
   );
 
-  if (notFound) {
-    title = i18n.t('com.affine.notFoundPage.title');
-  }
-
-  if (!title) {
-    title = i18n.t(docTitle);
-  }
-
   return (
     <span className={notFound ? styles.notFound : ''}>
       <Icon className={styles.pageReferenceIcon} />

packages/frontend/core/src/components/blocksuite/block-suite-editor/specs/custom/root-block.ts

@@ -2,6 +2,7 @@ import {
   AIEdgelessRootBlockSpec,
   AIPageRootBlockSpec,
 } from '@affine/core/blocksuite/presets/ai';
+import { DocDisplayMetaService } from '@affine/core/modules/doc-display-meta';
 import { EditorSettingService } from '@affine/core/modules/editor-setting';
 import { AppThemeService } from '@affine/core/modules/theme';
 import { mixpanel } from '@affine/track';
@@ -12,12 +13,15 @@ import {
   StdIdentifier,
 } from '@blocksuite/affine/block-std';
 import type {
+  DocDisplayMetaExtension,
+  DocDisplayMetaParams,
   RootBlockConfig,
   TelemetryEventMap,
   ThemeExtension,
 } from '@blocksuite/affine/blocks';
 import {
   ColorScheme,
+  DocDisplayMetaProvider,
   EdgelessBuiltInManager,
   EdgelessRootBlockSpec,
   EdgelessToolExtension,
@@ -29,16 +33,19 @@ import {
 } from '@blocksuite/affine/blocks';
 import {
   createSignalFromObservable,
+  referenceToNode,
   type Signal,
   SpecProvider,
 } from '@blocksuite/affine-shared/utils';
 import type { Container } from '@blocksuite/global/di';
+import { LinkedPageIcon, PageIcon } from '@blocksuite/icons/lit';
 import {
   DocService,
   DocsService,
   FeatureFlagService,
   type FrameworkProvider,
 } from '@toeverything/infra';
+import type { TemplateResult } from 'lit';
 import type { Observable } from 'rxjs';
 import { combineLatest, map } from 'rxjs';
 
@@ -141,6 +148,85 @@ function getThemeExtension(framework: FrameworkProvider) {
   return AffineThemeExtension;
 }
 
+export function buildDocDisplayMetaExtension(framework: FrameworkProvider) {
+  const docDisplayMetaService = framework.get(DocDisplayMetaService);
+
+  function iconBuilder(icon: typeof PageIcon, size = '1.25em') {
+    return icon({
+      width: size,
+      height: size,
+      style:
+        'user-select:none;flex-shrink:0;vertical-align:middle;font-size:inherit;margin-bottom:0.1em;',
+    });
+  }
+
+  class AffineDocDisplayMetaService
+    extends LifeCycleWatcher
+    implements DocDisplayMetaExtension
+  {
+    static override key = 'doc-display-meta';
+
+    readonly disposables: (() => void)[] = [];
+
+    static override setup(di: Container) {
+      super.setup(di);
+      di.override(DocDisplayMetaProvider, this, [StdIdentifier]);
+    }
+
+    dispose() {
+      while (this.disposables.length > 0) {
+        this.disposables.pop()?.();
+      }
+    }
+
+    icon(
+      docId: string,
+      { params, title, referenced = false }: DocDisplayMetaParams = {}
+    ): Signal<TemplateResult> {
+      const icon$ = docDisplayMetaService
+        .icon$(docId, {
+          type: 'lit',
+          reference: referenced,
+          referenceToNode: referenceToNode({ pageId: docId, params }),
+          hasTitleAlias: Boolean(title),
+        })
+        .map(iconBuilder);
+
+      const { signal: iconSignal, cleanup } = createSignalFromObservable(
+        icon$,
+        iconBuilder(referenced ? LinkedPageIcon : PageIcon)
+      );
+
+      this.disposables.push(cleanup);
+
+      return iconSignal;
+    }
+
+    title(
+      docId: string,
+      { title = '', referenced }: DocDisplayMetaParams = {}
+    ): Signal<string> {
+      const title$ = docDisplayMetaService.title$(docId, {
+        title,
+        reference: referenced,
+      });
+
+      const { signal: titleSignal, cleanup } =
+        createSignalFromObservable<string>(title$, title);
+
+      this.disposables.push(cleanup);
+
+      return titleSignal;
+    }
+
+    override unmounted() {
+      this.dispose();
+    }
+  }
+
+  return AffineDocDisplayMetaService;
+}
+
 function getEditorConfigExtension(
   framework: FrameworkProvider
 ): ExtensionType[] {
@@ -184,6 +270,7 @@ export function createPageRootBlockSpec(
     getFontConfigExtension(),
     getTelemetryExtension(),
     getEditorConfigExtension(framework),
+    buildDocDisplayMetaExtension(framework),
   ].flat();
 }
 
@@ -201,5 +288,6 @@ export function createEdgelessRootBlockSpec(
     getFontConfigExtension(),
     getTelemetryExtension(),
     getEditorConfigExtension(framework),
+    buildDocDisplayMetaExtension(framework),
   ].flat();
 }

packages/frontend/core/src/components/blocksuite/block-suite-editor/specs/custom/spec-patchers.tsx

@@ -312,7 +312,6 @@ export function patchDocModeService(
       return (mode || DEFAULT_MODE) as DocMode;
     };
     onPrimaryModeChange = (handler: (mode: DocMode) => void, id?: string) => {
-      // eslint-disable-next-line rxjs/finnish
       const mode$ = id
         ? docsService.list.primaryMode$(id)
         : docService.doc.primaryMode$;

packages/frontend/core/src/mobile/components/doc-card/index.tsx

@@ -8,7 +8,6 @@ import {
   WorkbenchLink,
   type WorkbenchLinkProps,
 } from '@affine/core/modules/workbench';
-import { useI18n } from '@affine/i18n';
 import type { DocMeta } from '@blocksuite/affine/store';
 import { useLiveData, useService, WorkspaceService } from '@toeverything/infra';
 import clsx from 'clsx';
@@ -40,14 +39,10 @@ export const DocCard = forwardRef<HTMLAnchorElement, DocCardProps>(
     { showTags = true, meta, className, autoHeightById, ...attrs },
     ref
   ) {
-    const t = useI18n();
     const favAdapter = useService(CompatibleFavoriteItemsAdapter);
     const workspace = useService(WorkspaceService).workspace;
     const docDisplayService = useService(DocDisplayMetaService);
-    const titleInfo = useLiveData(docDisplayService.title$(meta.id));
-    const title =
-      typeof titleInfo === 'string' ? titleInfo : t[titleInfo.i18nKey]();
-
+    const title = useLiveData(docDisplayService.title$(meta.id));
     const favorited = useLiveData(favAdapter.isFavorite$(meta.id, 'doc'));
 
     const toggleFavorite = useCatchEventCallback(

packages/frontend/core/src/mobile/dialogs/selectors/doc-selector.tsx

@@ -19,11 +19,9 @@ const DocIcon = ({ docId }: { docId: string }) => {
 };
 
 const DocLabel = ({ docId }: { docId: string }) => {
-  const t = useI18n();
   const docDisplayMetaService = useService(DocDisplayMetaService);
   const label = useLiveData(docDisplayMetaService.title$(docId));
-
-  return typeof label === 'string' ? label : t[label.i18nKey]();
+  return label;
 };
 
 export const DocSelectorDialog = ({

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

@@ -15,7 +15,7 @@ import { EditorService } from '@affine/core/modules/editor';
 import { JournalService } from '@affine/core/modules/journal';
 import { WorkbenchService } from '@affine/core/modules/workbench';
 import { ViewService } from '@affine/core/modules/workbench/services/view';
-import { i18nTime, useI18n } from '@affine/i18n';
+import { i18nTime } from '@affine/i18n';
 import {
   BookmarkBlockService,
   customImageProxyMiddleware,
@@ -240,14 +240,11 @@ const MobileDetailPage = ({
   pageId: string;
   date?: string;
 }) => {
-  const t = useI18n();
   const docDisplayMetaService = useService(DocDisplayMetaService);
   const journalService = useService(JournalService);
   const workbench = useService(WorkbenchService).workbench;
   const [showTitle, setShowTitle] = useState(checkShowTitle);
-  const titleInfo = useLiveData(docDisplayMetaService.title$(pageId));
-  const title =
-    typeof titleInfo === 'string' ? titleInfo : t[titleInfo.i18nKey]();
+  const title = useLiveData(docDisplayMetaService.title$(pageId));
 
   const allJournalDates = useLiveData(journalService.allJournalDates$);
 

packages/frontend/core/src/modules/doc-display-meta/index.ts

@@ -5,6 +5,7 @@ import {
   WorkspaceScope,
 } from '@toeverything/infra';
 
+import { I18nService } from '../i18n';
 import { JournalService } from '../journal';
 import { DocDisplayMetaService } from './services/doc-display-meta';
 
@@ -17,5 +18,6 @@ export function configureDocDisplayMetaModule(framework: Framework) {
       JournalService,
       DocsService,
       FeatureFlagService,
+      I18nService,
     ]);
 }