From 79fe687b1a52d00ef51a66ec49000344ea57ab5b Mon Sep 17 00:00:00 2001
From: L-Sun <zover.v@gmail.com>
Date: Thu, 23 Jan 2025 12:51:55 +0000
Subject: [PATCH] fix(editor): render title in page block header using
 DocDisplayMetaService (#9878)

https://github.com/user-attachments/assets/24490a58-ef66-404a-b9cd-1e94d84c6f58
---
 .../specs/custom/widgets/edgeless-note-header.css.ts  |  3 +++
 .../specs/custom/widgets/edgeless-note-header.tsx     | 11 ++++++++++-
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/packages/frontend/core/src/components/blocksuite/block-suite-editor/specs/custom/widgets/edgeless-note-header.css.ts b/packages/frontend/core/src/components/blocksuite/block-suite-editor/specs/custom/widgets/edgeless-note-header.css.ts
index c245fef011..56148f15ac 100644
--- a/packages/frontend/core/src/components/blocksuite/block-suite-editor/specs/custom/widgets/edgeless-note-header.css.ts
+++ b/packages/frontend/core/src/components/blocksuite/block-suite-editor/specs/custom/widgets/edgeless-note-header.css.ts
@@ -13,6 +13,9 @@ export const header = style({
 });
 
 export const title = style({
+  display: 'flex',
+  alignItems: 'center',
+  gap: 4,
   flex: 1,
   color: cssVarV2('text/primary'),
   fontFamily: 'Inter',
diff --git a/packages/frontend/core/src/components/blocksuite/block-suite-editor/specs/custom/widgets/edgeless-note-header.tsx b/packages/frontend/core/src/components/blocksuite/block-suite-editor/specs/custom/widgets/edgeless-note-header.tsx
index 18a6efda1f..2168439c88 100644
--- a/packages/frontend/core/src/components/blocksuite/block-suite-editor/specs/custom/widgets/edgeless-note-header.tsx
+++ b/packages/frontend/core/src/components/blocksuite/block-suite-editor/specs/custom/widgets/edgeless-note-header.tsx
@@ -1,6 +1,7 @@
 import { IconButton } from '@affine/component';
 import { useSharingUrl } from '@affine/core/components/hooks/affine/use-share-url';
 import { WorkspaceDialogService } from '@affine/core/modules/dialogs';
+import { DocDisplayMetaService } from '@affine/core/modules/doc-display-meta';
 import { EditorService } from '@affine/core/modules/editor';
 import { FeatureFlagService } from '@affine/core/modules/feature-flag';
 import { useInsidePeekView } from '@affine/core/modules/peek-view/view/modal-container';
@@ -32,6 +33,10 @@ const EdgelessNoteToggleButton = ({ note }: { note: NoteBlockModel }) => {
   const editor = useService(EditorService).editor;
   const editorContainer = useLiveData(editor.editorContainer$);
   const gfx = editorContainer?.std.get(GfxControllerIdentifier);
+  const docDisplayMetaService = useService(DocDisplayMetaService);
+
+  const Icon = useLiveData(docDisplayMetaService.icon$(note.doc.id));
+  const title = useLiveData(docDisplayMetaService.title$(note.doc.id));
 
   useEffect(() => {
     setCollapsed(note.edgeless.collapse);
@@ -80,7 +85,11 @@ const EdgelessNoteToggleButton = ({ note }: { note: NoteBlockModel }) => {
         {collapsed ? <ToggleRightIcon /> : <ToggleDownIcon />}
       </IconButton>
       <div className={styles.title} data-testid="edgeless-note-title">
-        {collapsed && (note.doc.meta?.title ?? 'Untitled')}
+        {collapsed && (
+          <>
+            <Icon /> {title}
+          </>
+        )}
       </div>
     </>
   );