feat: optimize code structure

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

@@ -1,16 +0,0 @@
-import React from 'react';
-import JumpTo from './jumpTo';
-import { Command } from 'cmdk';
-import SearchResult from './searchResult';
-
-const Result = (props: { query: string }) => {
-  const query = props.query;
-
-  return (
-    <Command.List>
-      {query ? <SearchResult query={query} /> : <JumpTo />}
-    </Command.List>
-  );
-};
-
-export default Result;

packages/app/src/components/quick-search/content/jumpTo.tsx

@@ -1,36 +0,0 @@
-import React from 'react';
-import { FavouritesIcon, TrashIcon, AllPagesIcon } from '@blocksuite/icons';
-import Link from 'next/link';
-import { StyledJumpTo } from '../style';
-import { useModal } from '@/providers/global-modal-provider';
-const JumpTo = () => {
-  const { triggerQuickSearchModal } = useModal();
-  return (
-    <StyledJumpTo>
-      <strong>Jump to</strong>
-      <Link
-        href={{ pathname: '/page-list/all' }}
-        onClick={() => triggerQuickSearchModal()}
-      >
-        <AllPagesIcon width={20} height={20} />
-        <span> All pages</span>
-      </Link>
-      <Link
-        href={{ pathname: '/page-list/favorite' }}
-        onClick={() => triggerQuickSearchModal()}
-      >
-        <FavouritesIcon width={20} height={20} />
-        <span> Favourites</span>
-      </Link>
-      <Link
-        href={{ pathname: '/page-list/trash' }}
-        onClick={() => triggerQuickSearchModal()}
-      >
-        <TrashIcon width={20} height={20} />
-        <span> Trash</span>
-      </Link>
-    </StyledJumpTo>
-  );
-};
-
-export default JumpTo;

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

@@ -1,30 +0,0 @@
-import { useEffect, useState } from 'react';
-import NotFound from './not-found';
-import { Command } from 'cmdk';
-import { useEditor } from '@/providers/editor-provider';
-
-const SearchResult = (props: { query: string }) => {
-  const { search, openPage, pageList } = useEditor();
-  const [results, setResults] = useState(new Map<string, string | undefined>());
-  const query = props.query;
-  useEffect(() => {
-    return setResults(search(query));
-    //Save the Map<BlockId, PageId> obtained from the search as state
-  }, [query, search]);
-  const pageIds = [...results.values()];
-
-  const resultsPageMeta = pageList.filter(
-    page => pageIds.indexOf(page.id) > -1
-  );
-
-  return (
-    <>
-      <NotFound />
-      {resultsPageMeta.map(result => {
-        return <Command.Item key={result.id}>{result.title}</Command.Item>;
-      })}
-    </>
-  );
-};
-
-export default SearchResult;

packages/app/src/components/quick-search/content/searchResult/not-found.tsx

@@ -1,10 +0,0 @@
-import React from 'react';
-import { Command, useCommandState } from 'cmdk';
-
-const NotFound = () => {
-  const search = useCommandState(state => state.search);
-  // eslint-disable-next-line react/no-unescaped-entities
-  return <Command.Empty>No results found for "{search}".</Command.Empty>;
-};
-
-export default NotFound;

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

@@ -3,26 +3,21 @@ import { AddIcon } from '@blocksuite/icons';
 import { StyledModalFooterContent } from './style';
 import { useEditor } from '@/providers/editor-provider';
 import { useModal } from '@/providers/global-modal-provider';
-import { IconButton } from '@/ui/button';
 
-const QuickSearchFooter = () => {
+export const Footer = () => {
   const { createPage, getPageMeta, openPage } = useEditor();
   const { triggerQuickSearchModal } = useModal();
   return (
-    <StyledModalFooterContent>
-      <IconButton
-        onClick={async () => {
-          const page = createPage();
-          const pageMeta = getPageMeta((await page).id);
-          pageMeta && openPage(pageMeta.id);
-          triggerQuickSearchModal();
-        }}
-      >
-        <AddIcon />
-      </IconButton>
+    <StyledModalFooterContent
+      onClick={async () => {
+        const page = createPage();
+        const pageMeta = getPageMeta((await page).id);
+        pageMeta && openPage(pageMeta.id);
+        triggerQuickSearchModal();
+      }}
+    >
+      <AddIcon />
       <span>New page</span>
     </StyledModalFooterContent>
   );
 };
-
-export default QuickSearchFooter;

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

@@ -6,9 +6,9 @@ import {
   StyledModalDivider,
   StyledShortcut,
 } from './style';
-import Input from './input';
-import Result from './content';
-import QuickSearchFooter from './footer';
+import { Input } from './input';
+import { Results } from './results';
+import { Footer } from './footer';
 import { Command } from 'cmdk';
 import { useEffect, useState } from 'react';
 import { useModal } from '@/providers/global-modal-provider';
@@ -57,16 +57,13 @@ export const QuickSearch = ({ open, onClose }: TransitionsModalProps) => {
           </StyledModalHeader>
           <StyledModalDivider />
           <StyledContent>
-            <Result query={query} />
+            <Results query={query} />
           </StyledContent>
-
-          <StyledModalFooter>
-            <QuickSearchFooter />
-          </StyledModalFooter>
         </Command>
+        <StyledModalFooter>
+          <Footer />
+        </StyledModalFooter>
       </ModalWrapper>
     </Modal>
   );
 };
-
-export default QuickSearch;

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

@@ -2,7 +2,7 @@ import React, { Dispatch, SetStateAction } from 'react';
 import { SearchIcon } from '@blocksuite/icons';
 import { StyledInputContent, StyledLabel } from './style';
 import { Command } from 'cmdk';
-const Input = (props: {
+export const Input = (props: {
   query: string;
   setQuery: Dispatch<SetStateAction<string>>;
 }) => {
@@ -19,5 +19,3 @@ const Input = (props: {
     </StyledInputContent>
   );
 };
-
-export default Input;

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

@@ -0,0 +1,80 @@
+import { Command } from 'cmdk';
+import { StyledListItem } from './style';
+import Link from 'next/link';
+import { useModal } from '@/providers/global-modal-provider';
+import { AllPagesIcon, FavouritesIcon, TrashIcon } from '@blocksuite/icons';
+import { useEditor } from '@/providers/editor-provider';
+import { useEffect, useState } from 'react';
+
+export const Results = (props: { query: string }) => {
+  const { triggerQuickSearchModal } = useModal();
+
+  const query = props.query;
+  const { search, openPage, pageList } = useEditor();
+  const [results, setResults] = useState(new Map<string, string | undefined>());
+  useEffect(() => {
+    return setResults(search(query));
+    //Save the Map<BlockId, PageId> obtained from the search as state
+  }, [query, search]);
+  const pageIds = [...results.values()];
+
+  const resultsPageMeta = pageList.filter(
+    page => pageIds.indexOf(page.id) > -1
+  );
+  return (
+    <Command.List>
+      <Command.Empty>No results found for &quot;{query}&quot;.</Command.Empty>
+      <Command.Group heading="Page">
+        {resultsPageMeta.map(result => {
+          return (
+            <Command.Item
+              key={result.id}
+              onSelect={() => {
+                openPage(result.id);
+                triggerQuickSearchModal();
+              }}
+              value={result.title}
+            >
+              <StyledListItem>{result.title}</StyledListItem>
+            </Command.Item>
+          );
+        })}
+      </Command.Group>
+      <Command.Group heading="Jump to">
+        <Command.Item>
+          <StyledListItem>
+            <Link
+              href={{ pathname: '/page-list/all' }}
+              onClick={() => triggerQuickSearchModal()}
+            >
+              <AllPagesIcon />
+              <span> All pages</span>
+            </Link>
+          </StyledListItem>
+        </Command.Item>
+        <Command.Item>
+          <StyledListItem>
+            <Link
+              href={{ pathname: '/page-list/favorite' }}
+              onClick={() => triggerQuickSearchModal()}
+            >
+              <FavouritesIcon />
+              <span> Favourites</span>
+            </Link>
+          </StyledListItem>
+        </Command.Item>
+        <Command.Item>
+          <StyledListItem>
+            <Link
+              href={{ pathname: '/page-list/trash' }}
+              onClick={() => triggerQuickSearchModal()}
+            >
+              <TrashIcon />
+              <span> Trash</span>
+            </Link>
+          </StyledListItem>
+        </Command.Item>
+      </Command.Group>
+    </Command.List>
+  );
+};

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

@@ -42,14 +42,13 @@ export const StyledJumpTo = styled('div')(({ theme }) => {
       ':visited': {
         color: theme.colors.popoverColor,
       },
-      ':hover': {
-        color: theme.colors.primaryColor,
-      },
-      transition: `color .15s`,
+      transition: 'background .15s, color .15s',
       svg: {
+        color: 'inherit',
         marginBottom: '2px',
       },
       span: {
+        color: 'inherit',
         marginLeft: '12px',
         lineHeight: '22px',
       },
@@ -111,20 +110,50 @@ export const StyledModalFooter = styled('div')(({ theme }) => {
     fontSize: theme.font.sm,
     lineHeight: '20px',
     textAlign: 'center',
+    ...displayFlex('center', 'center'),
     color: theme.colors.popoverColor,
     margin: '16px 0',
   };
 });
-export const StyledModalFooterContent = styled('div')(({ theme }) => {
+export const StyledModalFooterContent = styled.button(({ theme }) => {
   return {
+    width: '572px',
+    height: '32px',
     fontSize: theme.font.sm,
     lineHeight: '20px',
     textAlign: 'center',
     ...displayFlex('center', 'center'),
     color: theme.colors.popoverColor,
-    margin: '16px 0',
-    span: {
-      marginLeft: '12px',
+    borderRadius: '5px',
+    transition: 'background .15s, color .15s',
+    '>svg': {
+      fontSize: '20px',
+      marginRight: '12px',
+    },
+    ':hover': {
+      color: theme.colors.primaryColor,
+      backgroundColor: theme.colors.hoverBackground,
+    },
+  };
+});
+export const StyledListItem = styled.button(({ theme }) => {
+  return {
+    width: '572px',
+    height: '32px',
+    marginTop: '12px',
+    fontSize: theme.font.sm,
+    color: theme.colors.popoverColor,
+    paddingLeft: '12px',
+    borderRadius: '5px',
+    ...displayFlex('flex-start', 'center'),
+    '>svg': {
+      fontSize: '20px',
+      marginRight: '12px',
+    },
+    transition: 'background .15s, color .15s',
+    ':hover': {
+      color: theme.colors.primaryColor,
+      backgroundColor: theme.colors.hoverBackground,
     },
   };
 });