fix(core): search feature not working (#3902)

apps/core/src/components/pure/quick-search-modal/footer.tsx

@@ -1,6 +1,5 @@
 import { initEmptyPage } from '@affine/env/blocksuite';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
-import type { PageBlockModel } from '@blocksuite/blocks';
 import { assertEquals } from '@blocksuite/global/utils';
 import { PlusIcon } from '@blocksuite/icons';
 import { nanoid } from '@blocksuite/store';
@@ -39,15 +38,7 @@ export const Footer = ({
         const id = nanoid();
         const page = createPage(id);
         assertEquals(page.id, id);
-        await initEmptyPage(page);
-        const block = page.getBlockByFlavour(
-          'affine:page'
-        )[0] as PageBlockModel;
-        if (block) {
-          block.title.insert(query, 0);
-        } else {
-          console.warn('No page block found');
-        }
+        await initEmptyPage(page, query);
         blockSuiteWorkspace.setPageMeta(page.id, {
           title: query,
         });

apps/core/src/components/pure/quick-search-modal/index.tsx

@@ -1,7 +1,7 @@
 import { Modal, ModalWrapper } from '@affine/component';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { Command } from 'cmdk';
-import { startTransition } from 'react';
+import { startTransition, Suspense } from 'react';
 import { useCallback, useEffect, useRef, useState } from 'react';
 
 import type { AllWorkspace } from '../../../shared';
@@ -13,6 +13,7 @@ import {
   StyledModalDivider,
   StyledModalFooter,
   StyledModalHeader,
+  StyledNotFound,
   StyledShortcut,
 } from './style';
 
@@ -41,7 +42,7 @@ export const QuickSearchModal = ({
     setOpen(false);
   }, [setOpen]);
 
-  // Add  ‘⌘+K’ shortcut keys as switches
+  // Add ‘⌘+K’ shortcut keys as switches
   useEffect(() => {
     const keydown = (e: KeyboardEvent) => {
       if ((e.key === 'k' && e.metaKey) || (e.key === 'k' && e.ctrlKey)) {
@@ -131,12 +132,20 @@ export const QuickSearchModal = ({
           <StyledModalDivider />
           <Command.List>
             <StyledContent>
-              <Results
-                query={query}
-                onClose={handleClose}
-                workspace={workspace}
-                setShowCreatePage={setShowCreatePage}
-              />
+              <Suspense
+                fallback={
+                  <StyledNotFound>
+                    <span>{t['com.affine.loading']()}</span>
+                  </StyledNotFound>
+                }
+              >
+                <Results
+                  query={query}
+                  onClose={handleClose}
+                  workspace={workspace}
+                  setShowCreatePage={setShowCreatePage}
+                />
+              </Suspense>
             </StyledContent>
             {showCreatePage ? (
               <>

apps/core/src/components/pure/quick-search-modal/results.tsx

@@ -2,11 +2,13 @@ import { UNTITLED_WORKSPACE_NAME } from '@affine/env/constant';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { assertExists } from '@blocksuite/global/utils';
 import { EdgelessIcon, PageIcon } from '@blocksuite/icons';
+import type { Workspace } from '@blocksuite/store';
 import { useBlockSuitePageMeta } from '@toeverything/hooks/use-block-suite-page-meta';
 import { useBlockSuiteWorkspaceHelper } from '@toeverything/hooks/use-block-suite-workspace-helper';
 import { Command } from 'cmdk';
-import { useAtomValue } from 'jotai';
+import { type Atom, atom, useAtomValue } from 'jotai';
 import type { Dispatch, SetStateAction } from 'react';
+import { startTransition, useEffect } from 'react';
 
 import { recentPageSettingsAtom } from '../../../atoms';
 import { useNavigateHelper } from '../../../hooks/use-navigate-helper';
@@ -20,6 +22,29 @@ export interface ResultsProps {
   onClose: () => void;
   setShowCreatePage: Dispatch<SetStateAction<boolean>>;
 }
+
+const loadAllPageWeakMap = new WeakMap<Workspace, Atom<Promise<void>>>();
+
+function getLoadAllPage(workspace: Workspace) {
+  if (loadAllPageWeakMap.has(workspace)) {
+    return loadAllPageWeakMap.get(workspace) as Atom<Promise<void>>;
+  } else {
+    const aAtom = atom(async () => {
+      // fixme: we have to load all pages here and re-index them
+      //  there might have performance issue
+      await Promise.all(
+        [...workspace.pages.values()].map(page =>
+          page.waitForLoaded().then(() => {
+            workspace.indexer.search.refreshPageIndex(page.id, page.spaceDoc);
+          })
+        )
+      );
+    });
+    loadAllPageWeakMap.set(workspace, aAtom);
+    return aAtom;
+  }
+}
+
 export const Results = ({
   query,
   workspace,
@@ -31,14 +56,20 @@ export const Results = ({
   const pageList = useBlockSuitePageMeta(blockSuiteWorkspace);
   assertExists(blockSuiteWorkspace.id);
   const list = useSwitchToConfig(workspace.id);
+  useAtomValue(getLoadAllPage(blockSuiteWorkspace));
 
   const recentPageSetting = useAtomValue(recentPageSettingsAtom);
   const t = useAFFiNEI18N();
   const { jumpToPage, jumpToSubPath } = useNavigateHelper();
-  const results = blockSuiteWorkspace.search({ query });
-
-  // remove `space:` prefix
-  const pageIds = [...results.values()].map(id => id.slice(6));
+  const pageIds = [...blockSuiteWorkspace.search({ query }).values()].map(
+    id => {
+      if (id.startsWith('space:')) {
+        return id.slice(6);
+      } else {
+        return id;
+      }
+    }
+  );
 
   const resultsPageMeta = pageList.filter(
     page => pageIds.indexOf(page.id) > -1 && !page.trash
@@ -53,7 +84,11 @@ export const Results = ({
     }
   });
 
-  setShowCreatePage(resultsPageMeta.length === 0);
+  useEffect(() => {
+    startTransition(() => {
+      setShowCreatePage(resultsPageMeta.length === 0);
+    });
+  }, [resultsPageMeta.length, setShowCreatePage]);
 
   if (!query) {
     return (
@@ -117,7 +152,12 @@ export const Results = ({
     return (
       <StyledNotFound>
         <span>{t['Find 0 result']()}</span>
-        <image href="/imgs/no-result.svg" width={200} height={200} />
+        <img
+          alt="no result"
+          src="/imgs/no-result.svg"
+          width={200}
+          height={200}
+        />
       </StyledNotFound>
     );
   }