fix(core): journal display on cmdk (#5723)

![image.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/T2klNLEk0wxLh4NRDzhk/01d2c2ec-cfdd-4c90-9616-606e4a473cc0.png)

packages/frontend/core/src/components/pure/cmdk/data-hooks.tsx

@@ -4,6 +4,7 @@ import {
   useBlockSuitePageMeta,
   usePageMetaHelper,
 } from '@affine/core/hooks/use-block-suite-page-meta';
+import { useGetBlockSuiteWorkspacePageTitle } from '@affine/core/hooks/use-block-suite-workspace-page-title';
 import { useJournalHelper } from '@affine/core/hooks/use-journal';
 import { CollectionService } from '@affine/core/modules/collection';
 import { WorkspaceSubPath } from '@affine/core/shared';
@@ -97,25 +98,33 @@ export const pageToCommand = (
   page: PageMeta,
   store: ReturnType<typeof getCurrentStore>,
   navigationHelper: ReturnType<typeof useNavigateHelper>,
+  getPageTitle: ReturnType<typeof useGetBlockSuiteWorkspacePageTitle>,
+  isPageJournal: (pageId: string) => boolean,
   t: ReturnType<typeof useAFFiNEI18N>,
   workspace: Workspace,
-  label?: {
+  subTitle?: string,
-    title: string;
-    subTitle?: string;
-  },
   blockId?: string
 ): CMDKCommand => {
   const pageMode = store.get(pageSettingsAtom)?.[page.id]?.mode;
 
-  const title = page.title || t['Untitled']();
+  const title = getPageTitle(page.id) || t['Untitled']();
-  const commandLabel = label || {
+  const commandLabel = {
     title: title,
+    subTitle: subTitle,
   };
 
   // hack: when comparing, the part between >>> and <<< will be ignored
   // adding this patch so that CMDK will not complain about duplicated commands
   const id = category + '.' + page.id;
 
+  const icon = isPageJournal(page.id) ? (
+    <TodayIcon />
+  ) : pageMode === 'edgeless' ? (
+    <EdgelessIcon />
+  ) : (
+    <PageIcon />
+  );
+
   return {
     id,
     label: commandLabel,
@@ -130,7 +139,7 @@ export const pageToCommand = (
       }
       return navigationHelper.jumpToPage(workspace.id, page.id);
     },
-    icon: pageMode === 'edgeless' ? <EdgelessIcon /> : <PageIcon />,
+    icon: icon,
     timestamp: page.updatedDate,
   };
 };
@@ -146,6 +155,10 @@ export const usePageCommands = () => {
   const navigationHelper = useNavigateHelper();
   const journalHelper = useJournalHelper(workspace.blockSuiteWorkspace);
   const t = useAFFiNEI18N();
+  const getPageTitle = useGetBlockSuiteWorkspacePageTitle(
+    workspace.blockSuiteWorkspace
+  );
+  const { isPageJournal } = useJournalHelper(workspace.blockSuiteWorkspace);
 
   const [searchTime, setSearchTime] = useState<number>(0);
 
@@ -174,6 +187,8 @@ export const usePageCommands = () => {
           page,
           store,
           navigationHelper,
+          getPageTitle,
+          isPageJournal,
           t,
           workspace
         );
@@ -198,10 +213,6 @@ export const usePageCommands = () => {
 
         const subTitle = resultValues.find(result => result.space === page.id)
           ?.content;
-        const label = {
-          title: page.title || t['Untitled'](), // Used to ensure that a title exists
-          subTitle: subTitle || '',
-        };
 
         const blockId = reverseMapping.get(page.id);
 
@@ -210,9 +221,11 @@ export const usePageCommands = () => {
           page,
           store,
           navigationHelper,
+          getPageTitle,
+          isPageJournal,
           t,
           workspace,
-          label,
+          subTitle,
           blockId
         );
         return command;
@@ -276,6 +289,8 @@ export const usePageCommands = () => {
     recentPages,
     store,
     navigationHelper,
+    getPageTitle,
+    isPageJournal,
     t,
     workspace,
     pages,

packages/frontend/core/src/hooks/use-block-suite-workspace-page-title.ts

@@ -2,8 +2,9 @@ import { assertExists } from '@blocksuite/global/utils';
 import type { Workspace } from '@blocksuite/store';
 import type { Atom } from 'jotai';
 import { atom, useAtomValue } from 'jotai';
+import { useCallback } from 'react';
 
-import { useJournalInfoHelper } from './use-journal';
+import { useJournalHelper, useJournalInfoHelper } from './use-journal';
 
 const weakMap = new WeakMap<Workspace, Map<string, Atom<string>>>();
 
@@ -44,3 +45,20 @@ export function useBlockSuiteWorkspacePageTitle(
   );
   return localizedJournalDate || title;
 }
+
+// This hook is NOT reactive to the page title change
+export function useGetBlockSuiteWorkspacePageTitle(
+  blockSuiteWorkspace: Workspace
+) {
+  const { getLocalizedJournalDateString } =
+    useJournalHelper(blockSuiteWorkspace);
+  return useCallback(
+    (pageId: string) => {
+      return (
+        getLocalizedJournalDateString(pageId) ||
+        blockSuiteWorkspace.getPage(pageId)?.meta.title
+      );
+    },
+    [blockSuiteWorkspace, getLocalizedJournalDateString]
+  );
+}