feat: optimize the quick search function

packages/app/src/components/quick-search/config.ts

@@ -0,0 +1,18 @@
+import { AllPagesIcon, FavouritesIcon, TrashIcon } from '@blocksuite/icons';
+export const List = [
+  {
+    title: 'All pages',
+    href: '/page-list/all',
+    icon: AllPagesIcon,
+  },
+  {
+    title: 'Favourites',
+    href: '/page-list/favorite',
+    icon: FavouritesIcon,
+  },
+  {
+    title: 'Trash',
+    href: '/page-list/trash',
+    icon: TrashIcon,
+  },
+];

packages/app/src/components/quick-search/footer.tsx

@@ -4,20 +4,27 @@ import { StyledModalFooterContent } from './style';
 import { useEditor } from '@/providers/editor-provider';
 import { useModal } from '@/providers/global-modal-provider';
 
-export const Footer = () => {
+export const Footer = (props: { query: string }) => {
   const { createPage, getPageMeta, openPage } = useEditor();
   const { triggerQuickSearchModal } = useModal();
+  const query = props.query;
+
   return (
     <StyledModalFooterContent
       onClick={async () => {
         const page = createPage();
         const pageMeta = getPageMeta((await page).id);
         pageMeta && openPage(pageMeta.id);
+
         triggerQuickSearchModal();
       }}
     >
       <AddIcon />
-      <span>New page</span>
+      {query ? (
+        <span>New &quot;{query}&quot; page</span>
+      ) : (
+        <span>New page</span>
+      )}
     </StyledModalFooterContent>
   );
 };

packages/app/src/components/quick-search/index.tsx

@@ -21,6 +21,8 @@ const isMac = () => {
 };
 export const QuickSearch = ({ open, onClose }: TransitionsModalProps) => {
   const [query, setQuery] = useState('');
+  const [loading, setLoading] = useState(true);
+  const [showCreatePage, setShowCreatePage] = useState(true);
   const { triggerQuickSearchModal } = useModal();
   // Add  ‘⌘+K’ shortcut keys as switches
   useEffect(() => {
@@ -44,13 +46,13 @@ export const QuickSearch = ({ open, onClose }: TransitionsModalProps) => {
       <ModalWrapper
         width={620}
         style={{
-          maxHeight: '67vh',
+          maxHeight: '80vh',
           minHeight: '350px',
-          top: '138px',
-          transition: 'height .15s',
+          top: '12vh',
         }}
       >
         <Command
+          shouldFilter={false}
           //Handle KeyboardEvent conflicts with blocksuite
           onKeyDown={(e: React.KeyboardEvent) => {
             if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
@@ -59,18 +61,27 @@ export const QuickSearch = ({ open, onClose }: TransitionsModalProps) => {
           }}
         >
           <StyledModalHeader>
-            <Input query={query} setQuery={setQuery} />
+            <Input query={query} setQuery={setQuery} setLoading={setLoading} />
             <StyledShortcut>{isMac() ? '⌘ + K' : 'Ctrl + K'}</StyledShortcut>
           </StyledModalHeader>
           <StyledModalDivider />
           <StyledContent>
-            <Results query={query} />
+            <Results
+              query={query}
+              loading={loading}
+              setLoading={setLoading}
+              setShowCreatePage={setShowCreatePage}
+            />
           </StyledContent>
         </Command>
-        <StyledModalDivider />
-        <StyledModalFooter>
-          <Footer />
-        </StyledModalFooter>
+        {showCreatePage ? (
+          <>
+            <StyledModalDivider />
+            <StyledModalFooter>
+              <Footer query={query} />
+            </StyledModalFooter>
+          </>
+        ) : null}
       </ModalWrapper>
     </Modal>
   );

packages/app/src/components/quick-search/input.tsx

@@ -5,6 +5,7 @@ import { Command } from 'cmdk';
 export const Input = (props: {
   query: string;
   setQuery: Dispatch<SetStateAction<string>>;
+  setLoading: Dispatch<SetStateAction<boolean>>;
 }) => {
   const inputRef = useRef<HTMLInputElement>(null);
   useEffect(() => {
@@ -18,7 +19,10 @@ export const Input = (props: {
       <Command.Input
         ref={inputRef}
         value={props.query}
-        onValueChange={props.setQuery}
+        onValueChange={str => {
+          props.setQuery(str);
+          props.setLoading(true);
+        }}
         placeholder="Quick Search..."
       />
     </StyledInputContent>

packages/app/src/components/quick-search/results.tsx

@@ -1,24 +1,29 @@
 import { Command } from 'cmdk';
-import { StyledListItem } from './style';
+import { StyledListItem, StyledNotFound } from './style';
 import { useModal } from '@/providers/global-modal-provider';
-import {
-  AllPagesIcon,
-  FavouritesIcon,
-  TrashIcon,
-  PaperIcon,
-} from '@blocksuite/icons';
+import { PaperIcon, LogoUnlogIcon } from '@blocksuite/icons';
 import { useEditor } from '@/providers/editor-provider';
-import { useEffect, useState } from 'react';
+import { Dispatch, SetStateAction, useEffect, useState } from 'react';
 import { useRouter } from 'next/router';
+import { List } from './config';
 
-export const Results = (props: { query: string }) => {
+export const Results = (props: {
+  query: string;
+  loading: boolean;
+  setLoading: Dispatch<SetStateAction<boolean>>;
+  setShowCreatePage: Dispatch<SetStateAction<boolean>>;
+}) => {
   const query = props.query;
+  const loading = props.loading;
+  const setLoading = props.setLoading;
+  const setShowCreatePage = props.setShowCreatePage;
   const { triggerQuickSearchModal } = useModal();
   const { search, openPage, pageList } = useEditor();
   const router = useRouter();
   const [results, setResults] = useState(new Map<string, string | undefined>());
   useEffect(() => {
-    return setResults(search(query));
+    setResults(search(query));
+    setLoading(false);
     //Save the Map<BlockId, PageId> obtained from the search as state
   }, [query, search]);
   const pageIds = [...results.values()];
@@ -26,66 +31,62 @@ export const Results = (props: { query: string }) => {
   const resultsPageMeta = pageList.filter(
     page => pageIds.indexOf(page.id) > -1
   );
-  return (
+
+  useEffect(() => {
+    setShowCreatePage(resultsPageMeta.length ? false : true);
+    //Determine whether to display the  ‘+ New page’
+  }, [resultsPageMeta]);
+
+  return loading ? null : (
     <Command.List>
-      <Command.Empty>No results found for &quot;{query}&quot;.</Command.Empty>
-      <Command.Group>
-        {resultsPageMeta.map(result => {
-          return (
-            <Command.Item
-              key={result.id}
-              onSelect={() => {
-                openPage(result.id);
-                triggerQuickSearchModal();
-              }}
-              value={result.title}
-            >
-              <StyledListItem>
-                <PaperIcon />
-                <span>{result.title}</span>
-              </StyledListItem>
-            </Command.Item>
-          );
-        })}
-      </Command.Group>
-      <Command.Group heading="Jump to">
-        <Command.Item
-          value="All pages"
-          onSelect={() => {
-            router.push('/page-list/all');
-            triggerQuickSearchModal();
-          }}
-        >
-          <StyledListItem>
-            <AllPagesIcon />
-            <span>All pages</span>
-          </StyledListItem>
-        </Command.Item>
-        <Command.Item
-          value="Favourites"
-          onSelect={() => {
-            router.push('/page-list/favorite');
-            triggerQuickSearchModal();
-          }}
-        >
-          <StyledListItem>
-            <FavouritesIcon />
-            <span>Favourites</span>
-          </StyledListItem>
-        </Command.Item>
-        <Command.Item
-          value="Trash"
-          onSelect={() => {
-            router.push('/page-list/trash');
-            triggerQuickSearchModal();
-          }}
-        >
-          <StyledListItem>
-            <TrashIcon />
-            <span>Trash</span>
-          </StyledListItem>
-        </Command.Item>
-      </Command.Group>
+      {query ? (
+        resultsPageMeta.length ? (
+          <Command.Group heading={`Find ${resultsPageMeta.length} results`}>
+            {resultsPageMeta.map(result => {
+              return (
+                <Command.Item
+                  key={result.id}
+                  onSelect={() => {
+                    openPage(result.id);
+                    triggerQuickSearchModal();
+                  }}
+                  value={result.title}
+                >
+                  <StyledListItem>
+                    <PaperIcon />
+                    <span>{result.title}</span>
+                  </StyledListItem>
+                </Command.Item>
+              );
+            })}
+          </Command.Group>
+        ) : (
+          <StyledNotFound>
+            <span>Find 0 result</span>
+            <LogoUnlogIcon />
+          </StyledNotFound>
+        )
+      ) : (
+        <Command.Group heading="Jump to">
+          {List.map(link => {
+            return (
+              <Command.Item
+                key={link.title}
+                value={link.title}
+                onSelect={() => {
+                  router.push(link.href);
+                  triggerQuickSearchModal();
+                }}
+              >
+                <StyledListItem>
+                  <link.icon />
+                  <span>{link.title}</span>
+                </StyledListItem>
+              </Command.Item>
+            );
+          })}
+        </Command.Group>
+      )}
     </Command.List>
   );
 };

packages/app/src/components/quick-search/style.ts

@@ -2,16 +2,18 @@ import { displayFlex, styled } from '@/styles';
 
 export const StyledContent = styled('div')(({ theme }) => {
   return {
-    minHeight: '224px',
-    maxHeight: '50vh',
+    minHeight: '220px',
+    maxHeight: '55vh',
     width: '100%',
     overflow: 'auto',
+    marginBottom: '10px',
     ...displayFlex('center', 'flex-start'),
     color: theme.colors.popoverColor,
     letterSpacing: '0.06em',
     '[cmdk-group-heading]': {
       margin: '5px 16px',
       fontSize: theme.font.sm,
+      fontWeight: '500',
     },
     '[aria-selected="true"]': {
       transition: 'background .15s, color .15s',
@@ -33,6 +35,24 @@ export const StyledJumpTo = styled('div')(({ theme }) => {
     },
   };
 });
+export const StyledNotFound = styled('div')(({ theme }) => {
+  return {
+    width: '620px',
+    ...displayFlex('center', 'center'),
+    flexDirection: 'column',
+    padding: '10px 16px',
+    fontSize: theme.font.sm,
+    span: {
+      width: '100%',
+      fontWeight: '500',
+    },
+
+    '>svg': {
+      marginTop: '10px',
+      fontSize: '150px',
+    },
+  };
+});
 export const StyledInputContent = styled('div')(({ theme }) => {
   return {
     margin: '13px 0',