fix(core): improve doc title and icon display (#9755)

Closes: [AF-2132](https://linear.app/affine-design/issue/AF-2132/优化-emoji-title-和-icon-显示)

blocksuite/affine/block-embed/src/embed-linked-doc-block/embed-linked-doc-block.ts

@@ -229,10 +229,9 @@ export class EmbedLinkedDocBlockComponent extends EmbedBlockComponent<EmbedLinke
   title$ = computed(() => {
     const { pageId, params, title } = this.referenceInfo$.value;
     return (
-      title ||
       this.std
         .get(DocDisplayMetaProvider)
-        .title(pageId, { params, title, referenced: true })
+        .title(pageId, { params, title, referenced: true }) || title
     );
   });
 

blocksuite/affine/components/src/rich-text/inline/presets/nodes/reference-node/reference-node.ts

@@ -145,10 +145,9 @@ export class AffineReference extends WithDisposable(ShadowlessElement) {
   get _title() {
     const { pageId, params, title } = this.referenceInfo;
     return (
-      title ||
       this.block?.std
         ?.get(DocDisplayMetaProvider)
-        .title(pageId, { params, title, referenced: true }).value
+        .title(pageId, { params, title, referenced: true }).value || title
     );
   }
 

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

@@ -60,7 +60,7 @@ function AffinePageReferenceInner({
           mode: referenceWithMode ?? undefined,
           reference: true,
           referenceToNode,
-          hasTitleAlias: Boolean(title),
+          title,
         })
       );
     })

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

@@ -186,8 +186,8 @@ export function buildDocDisplayMetaExtension(framework: FrameworkProvider) {
       const icon$ = docDisplayMetaService
         .icon$(docId, {
           type: 'lit',
+          title,
           reference: referenced,
-          hasTitleAlias: Boolean(title),
           referenceToNode: referenceToNode({ pageId: docId, params }),
         })
         .map(iconBuilder);
@@ -204,7 +204,7 @@ export function buildDocDisplayMetaExtension(framework: FrameworkProvider) {
 
     title(
       docId: string,
-      { title = '', referenced }: DocDisplayMetaParams = {}
+      { title, referenced }: DocDisplayMetaParams = {}
     ): Signal<string> {
       const title$ = docDisplayMetaService.title$(docId, {
         title,
@@ -212,7 +212,7 @@ export function buildDocDisplayMetaExtension(framework: FrameworkProvider) {
       });
 
       const { signal: titleSignal, cleanup } =
-        createSignalFromObservable<string>(title$, title);
+        createSignalFromObservable<string>(title$, title ?? '');
 
       this.disposables.push(cleanup);
 

packages/frontend/core/src/desktop/pages/workspace/detail-page/tabs/journal/index.tsx

@@ -59,8 +59,7 @@ const PageItem = ({
   const Icon = useLiveData(
     docDisplayMetaService.icon$(docId, { compareDate: new Date() })
   );
-  const titleMeta = useLiveData(docDisplayMetaService.title$(docId));
+  const title = useLiveData(docDisplayMetaService.title$(docId));
-  const title = i18n.t(titleMeta);
 
   return (
     <WorkbenchLink

packages/frontend/core/src/mobile/pages/workspace/detail/journal-conflict-block.tsx

@@ -55,8 +55,7 @@ const ConflictItem = ({ docRecord }: { docRecord: DocRecord }) => {
   const docId = docRecord.id;
   const i18n = useI18n();
   const docDisplayMetaService = useService(DocDisplayMetaService);
-  const titleMeta = useLiveData(docDisplayMetaService.title$(docId));
+  const title = useLiveData(docDisplayMetaService.title$(docId));
-  const title = i18n.t(titleMeta);
 
   return (
     <WorkbenchLink className={styles.docItem} to={`/${docId}`}>

packages/frontend/core/src/mobile/pages/workspace/detail/menu/journal-conflicts.tsx

@@ -84,8 +84,7 @@ const DocItem = ({ docRecord }: { docRecord: DocRecord }) => {
   const Icon = useLiveData(
     docDisplayMetaService.icon$(docId, { compareDate: new Date() })
   );
-  const titleMeta = useLiveData(docDisplayMetaService.title$(docId));
+  const title = useLiveData(docDisplayMetaService.title$(docId));
-  const title = i18n.t(titleMeta);
   return (
     <WorkbenchLink aria-label={title} to={`/${docId}`}>
       <MobileMenuItem

packages/frontend/core/src/mobile/pages/workspace/detail/menu/journal-today-activity.tsx

@@ -23,13 +23,11 @@ interface JournalTodayActivityMenuItemProps {
 type Category = 'created' | 'updated';
 
 const DocItem = ({ docId }: { docId: string }) => {
-  const i18n = useI18n();
   const docDisplayMetaService = useService(DocDisplayMetaService);
   const Icon = useLiveData(
     docDisplayMetaService.icon$(docId, { compareDate: new Date() })
   );
-  const titleMeta = useLiveData(docDisplayMetaService.title$(docId));
+  const title = useLiveData(docDisplayMetaService.title$(docId));
-  const title = i18n.t(titleMeta);
   return (
     <WorkbenchLink aria-label={title} to={`/${docId}`}>
       <MenuItem prefixIcon={<Icon />}>{title}</MenuItem>

packages/frontend/core/src/modules/at-menu-config/services/index.ts

@@ -91,14 +91,10 @@ export class AtMenuConfigService extends Service {
         return null;
       }
 
-      let title = docDisplayMetaService.title$(meta.id, {
+      const title = docDisplayMetaService.title$(meta.id, {
         reference: true,
       }).value;
 
-      if (typeof title === 'object' && 'i18nKey' in title) {
-        title = I18n.t(title);
-      }
-
       if (!fuzzyMatch(title, query)) {
         return null;
       }

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

@@ -40,16 +40,15 @@ interface DocDisplayIconOptions<T extends IconType> {
    * by default, it will use the `primaryMode$` of the doc.
    */
   mode?: 'edgeless' | 'page';
+  title?: string; // title alias
   reference?: boolean;
   referenceToNode?: boolean;
-  hasTitleAlias?: boolean;
   /**
    * @default true
    */
   enableEmojiIcon?: boolean;
 }
 interface DocDisplayTitleOptions {
-  originalTitle?: string;
   title?: string; // title alias
   reference?: boolean;
   /**
@@ -130,24 +129,31 @@ export class DocDisplayMetaService extends Service {
     const iconSet = icons[options?.type ?? 'rc'];
 
     return LiveData.computed(get => {
+      const enableEmojiIcon =
+        get(this.featureFlagService.flags.enable_emoji_doc_icon.$) &&
+        options?.enableEmojiIcon !== false;
       const doc = get(this.docsService.list.doc$(docId));
-      const title = doc ? get(doc.title$) : '';
+      const referenced = !!options?.reference;
+      const titleAlias = referenced ? options?.title : undefined;
+      const originalTitle = doc ? get(doc.title$) : '';
+      const title = titleAlias ?? originalTitle;
       const mode = doc ? get(doc.primaryMode$) : undefined;
       const finalMode = options?.mode ?? mode ?? 'page';
-      const referenceToNode = !!(options?.reference && options.referenceToNode);
+      const referenceToNode = !!(referenced && options.referenceToNode);
-      const hasTitleAlias = !!(options?.reference && options?.hasTitleAlias);
 
-      // increases block link priority with title alias
+      // emoji title
-      if (hasTitleAlias) {
+      if (enableEmojiIcon && title) {
-        return iconSet.AliasIcon;
+        const { emoji } = extractEmojiIcon(title);
+        if (emoji) return () => emoji;
       }
 
-      // increases block link priority
+      // title alias
-      if (referenceToNode) {
+      if (titleAlias) return iconSet.AliasIcon;
-        return iconSet.BlockLinkIcon;
-      }
 
-      // journal icon
+      // link to specified block
+      if (referenceToNode) return iconSet.BlockLinkIcon;
+
+      // link to journal doc
       const journalDate = this._toDayjs(
         get(this.journalService.journalDate$(docId))
       );
@@ -155,22 +161,13 @@ export class DocDisplayMetaService extends Service {
         return this.getJournalIcon(journalDate, options);
       }
 
-      // reference icon
+      // link to regular doc (reference)
       if (options?.reference) {
         return finalMode === 'edgeless'
           ? iconSet.LinkedEdgelessIcon
           : iconSet.LinkedPageIcon;
       }
 
-      // emoji icon
-      const enableEmojiIcon =
-        get(this.featureFlagService.flags.enable_emoji_doc_icon.$) &&
-        options?.enableEmojiIcon !== false;
-      if (enableEmojiIcon) {
-        const { emoji } = extractEmojiIcon(title);
-        if (emoji) return () => emoji;
-      }
-
       // default icon
       return finalMode === 'edgeless' ? iconSet.EdgelessIcon : iconSet.PageIcon;
     });
@@ -183,14 +180,28 @@ export class DocDisplayMetaService extends Service {
         options?.enableEmojiIcon !== false;
       const lng = get(this.i18nService.i18n.currentLanguageKey$);
       const doc = get(this.docsService.list.doc$(docId));
+      const referenced = !!options?.reference;
+      const titleAlias = referenced ? options?.title : undefined;
+      const originalTitle = doc ? get(doc.title$) : '';
+      const title = titleAlias ?? originalTitle;
 
-      // title alias
+      // emoji title
-      if (options?.title) {
+      if (enableEmojiIcon && title) {
-        return enableEmojiIcon
+        const { rest } = extractEmojiIcon(title);
-          ? extractEmojiIcon(options.title).rest
+        if (rest) return rest;
-          : options.title;
+
+        // When the title has only one emoji character,
+        // if it's a journal document, the date should be displayed.
+        const journalDateString = get(this.journalService.journalDate$(docId));
+        if (journalDateString) {
+          return i18nTime(journalDateString, { absolute: { accuracy: 'day' } });
+        }
       }
 
+      // title alias
+      if (titleAlias) return titleAlias;
+
+      // doc not found
       if (!doc) {
         return this.i18nService.i18n.i18next.t(
           'com.affine.notFoundPage.title',
@@ -205,31 +216,16 @@ export class DocDisplayMetaService extends Service {
       }
 
       // original title
-      if (options?.originalTitle) return options.originalTitle;
+      if (originalTitle) return originalTitle;
-
-      const docTitle = get(doc.title$);
 
       // empty title
-      if (!docTitle) {
       return this.i18nService.i18n.i18next.t('Untitled', { lng });
-      }
-
-      // reference
-      if (options?.reference) return docTitle;
-
-      // emoji icon
-      if (enableEmojiIcon) {
-        return extractEmojiIcon(docTitle).rest;
-      }
-
-      // default
-      return docTitle;
     });
   }
 
-  getDocDisplayMeta(docRecord: DocRecord, originalTitle?: string) {
+  getDocDisplayMeta(docRecord: DocRecord) {
     return {
-      title: this.title$(docRecord.id, { originalTitle }).value,
+      title: this.title$(docRecord.id).value,
       icon: this.icon$(docRecord.id).value,
       updatedDate: docRecord.meta$.value.updatedDate,
     };

packages/frontend/core/src/modules/quicksearch/impls/docs.ts

@@ -66,10 +66,7 @@ export class DocsQuickSearchSession
               )
               .map(([doc, docRecord]) => {
                 const { title, icon, updatedDate } =
-                  this.docDisplayMetaService.getDocDisplayMeta(
+                  this.docDisplayMetaService.getDocDisplayMeta(docRecord);
-                    docRecord,
-                    'title' in doc ? doc.title : undefined
-                  );
                 return {
                   id: 'doc:' + docRecord.id,
                   source: 'docs',

tests/affine-local/e2e/links.spec.ts

@@ -8,10 +8,17 @@ import { coreUrl, openHomePage } from '@affine-test/kit/utils/load-page';
 import {
   clickNewPageButton,
   createLinkedPage,
+  createTodayPage,
   getBlockSuiteEditorTitle,
+  waitForEditorLoad,
   waitForEmptyEditor,
 } from '@affine-test/kit/utils/page-logic';
-import { expect, type Locator } from '@playwright/test';
+import {
+  confirmExperimentalPrompt,
+  openEditorSetting,
+  openExperimentalFeaturesPanel,
+} from '@affine-test/kit/utils/setting';
+import { expect, type Locator, type Page } from '@playwright/test';
 
 test.beforeEach(async ({ page }) => {
   await openHomePage(page);
@@ -19,6 +26,26 @@ test.beforeEach(async ({ page }) => {
   await waitForEmptyEditor(page);
 });
 
+async function enableEmojiDocIcon(page: Page) {
+  // Opens settings panel
+  await openEditorSetting(page);
+  await openExperimentalFeaturesPanel(page);
+  await confirmExperimentalPrompt(page);
+
+  const settingModal = page.locator('[data-testid=setting-modal-content]');
+  const item = settingModal.locator('div').getByText('Emoji Doc Icon');
+  await item.waitFor({ state: 'attached' });
+  await expect(item).toBeVisible();
+  const button = item.locator('label');
+  const isChecked = await button.locator('input').isChecked();
+  if (!isChecked) {
+    await button.click();
+  }
+
+  // Closes settings panel
+  await page.keyboard.press('Escape');
+}
+
 async function notClickable(locator: Locator) {
   await expect(locator).toHaveAttribute('disabled', '');
 }
@@ -908,4 +935,65 @@ test.describe('Customize linked doc title and description', () => {
       embedToolbar.getByRole('button', { name: 'Doc title' })
     ).toBeHidden();
   });
+
+  test('should show emoji doc icon in normal document', async ({ page }) => {
+    await waitForEditorLoad(page);
+    await enableEmojiDocIcon(page);
+
+    await clickNewPageButton(page);
+    const title = getBlockSuiteEditorTitle(page);
+    await title.click();
+
+    await page.keyboard.press('Enter');
+    await createLinkedPage(page, 'Test Page');
+
+    const inlineLink = page.locator('affine-reference');
+    const inlineToolbar = page.locator('reference-popup');
+
+    await inlineLink.hover();
+
+    // Edits title
+    await inlineToolbar.getByRole('button', { name: 'Edit' }).click();
+
+    // Title alias
+    await page.keyboard.type('🦀hello');
+    await page.keyboard.press('Enter');
+
+    const a = inlineLink.locator('a');
+
+    await expect(a).toHaveText('🦀hello');
+    await expect(a.locator('svg')).toBeHidden();
+    await expect(a.locator('.affine-reference-title')).toHaveText('hello');
+  });
+
+  test('should show emoji doc icon in journal document', async ({ page }) => {
+    await waitForEditorLoad(page);
+    await enableEmojiDocIcon(page);
+
+    await clickNewPageButton(page);
+    const title = getBlockSuiteEditorTitle(page);
+    await title.click();
+
+    await page.keyboard.press('Enter');
+    await createTodayPage(page);
+
+    const inlineLink = page.locator('affine-reference');
+    const inlineToolbar = page.locator('reference-popup');
+
+    await inlineLink.hover();
+
+    // Edits title
+    await inlineToolbar.getByRole('button', { name: 'Edit' }).click();
+
+    // Title alias
+    await page.keyboard.type('🦀');
+    await page.keyboard.press('Enter');
+
+    const a = inlineLink.locator('a');
+
+    const year = String(new Date().getFullYear());
+    await expect(a).toContainText('🦀');
+    await expect(a.locator('svg')).toBeHidden();
+    await expect(a.locator('.affine-reference-title')).toContainText(year);
+  });
 });

tests/kit/src/utils/page-logic.ts

@@ -76,6 +76,21 @@ export const createLinkedPage = async (page: Page, pageName?: string) => {
     .click();
 };
 
+export const createTodayPage = async (page: Page) => {
+  // fixme: workaround for @ popover not showing up when editor is not ready
+  await page.waitForTimeout(500);
+  await page.keyboard.type('@', { delay: 50 });
+  const linkedPagePopover = page.locator('.linked-doc-popover');
+  await expect(linkedPagePopover).toBeVisible();
+  await type(page, 'Today');
+
+  await linkedPagePopover
+    .locator(`icon-button`)
+    .filter({ hasText: 'Today' })
+    .nth(0)
+    .click();
+};
+
 export async function clickPageMoreActions(page: Page) {
   return page
     .getByTestId('header')