Merge pull request #555 from toeverything/feat/quick-search

feat: quick search support

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/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,42 +0,0 @@
-import { useEffect, useState } from 'react';
-import NoResult from './not-found';
-import { Command } from 'cmdk';
-import { PageMeta, useEditor } from '@/providers/editor-provider';
-
-function renderPages(resultsPageMeta: PageMeta[]) {
-  return resultsPageMeta.map(resultPageMeta => {
-    return (
-      <Command.Item key={resultPageMeta.id}>
-        {resultPageMeta.title}
-      </Command.Item>
-    );
-  });
-}
-
-const SearchResult = (props: { query: string }) => {
-  const { search, getPageMeta, openPage } = 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 resultsPageMeta: PageMeta[] = [];
-
-  results.forEach(pageId => {
-    if (!pageId) {
-      return;
-    }
-    const pageMeta = getPageMeta(pageId);
-    if (pageMeta) {
-      //Get pageMeta just like { title , id , text...}
-      resultsPageMeta.push(pageMeta);
-    }
-  });
-  return (
-    <>{resultsPageMeta.length ? renderPages(resultsPageMeta) : <NoResult />}</>
-  );
-};
-
-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 NoResult = () => {
-  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 NoResult;

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

@@ -3,26 +3,28 @@ 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 = (props: { query: string }) => {
   const { createPage, getPageMeta, openPage } = useEditor();
   const { triggerQuickSearchModal } = useModal();
+  const query = props.query;
+
   return (
-    <StyledModalFooterContent>
-      <IconButton
-        onClick={async () => {
-          const page = createPage();
-          const pageMeta = getPageMeta((await page).id);
-          pageMeta && openPage(pageMeta.id);
-          triggerQuickSearchModal();
-        }}
-      >
-        <AddIcon />
-      </IconButton>
-      <span>New page</span>
+    <StyledModalFooterContent
+      onClick={async () => {
+        const page = createPage();
+        const pageMeta = getPageMeta((await page).id);
+        pageMeta && openPage(pageMeta.id);
+
+        triggerQuickSearchModal();
+      }}
+    >
+      <AddIcon />
+      {query ? (
+        <span>New &quot;{query}&quot; page</span>
+      ) : (
+        <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';
@@ -21,7 +21,10 @@ 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(() => {
     const down = (e: KeyboardEvent) => {
       if (e.key === 'k' && e.metaKey) {
@@ -42,28 +45,43 @@ export const QuickSearch = ({ open, onClose }: TransitionsModalProps) => {
     <Modal open={open} onClose={onClose} wrapperPosition={['top', 'center']}>
       <ModalWrapper
         width={620}
-        height={'auto'}
         style={{
-          maxHeight: '720px',
+          maxHeight: '80vh',
           minHeight: '350px',
-          borderRadius: '20px',
-          top: '138px',
+          top: '12vh',
         }}
       >
-        <Command>
+        <Command
+          shouldFilter={false}
+          //Handle KeyboardEvent conflicts with blocksuite
+          onKeyDown={(e: React.KeyboardEvent) => {
+            if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
+              e.stopPropagation();
+            }
+          }}
+        >
           <StyledModalHeader>
-            <Input query={query} setQuery={setQuery} />
-            <StyledShortcut>{isMac() ? '⌘+K' : 'Ctrl+K'}</StyledShortcut>
+            <Input query={query} setQuery={setQuery} setLoading={setLoading} />
+            <StyledShortcut>{isMac() ? '⌘ + K' : 'Ctrl + K'}</StyledShortcut>
           </StyledModalHeader>
           <StyledModalDivider />
           <StyledContent>
-            <Result query={query} />
+            <Results
+              query={query}
+              loading={loading}
+              setLoading={setLoading}
+              setShowCreatePage={setShowCreatePage}
+            />
           </StyledContent>
-
-          <StyledModalFooter>
-            <QuickSearchFooter />
-          </StyledModalFooter>
         </Command>
+        {showCreatePage ? (
+          <>
+            <StyledModalDivider />
+            <StyledModalFooter>
+              <Footer query={query} />
+            </StyledModalFooter>
+          </>
+        ) : null}
       </ModalWrapper>
     </Modal>
   );

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

@@ -1,23 +1,30 @@
-import React, { Dispatch, SetStateAction } from 'react';
+import React, { Dispatch, SetStateAction, useEffect, useRef } 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>>;
+  setLoading: Dispatch<SetStateAction<boolean>>;
 }) => {
+  const inputRef = useRef<HTMLInputElement>(null);
+  useEffect(() => {
+    return inputRef.current?.focus();
+  }, [inputRef]);
   return (
     <StyledInputContent>
       <StyledLabel htmlFor=":r5:">
         <SearchIcon />
       </StyledLabel>
       <Command.Input
+        ref={inputRef}
         value={props.query}
-        onValueChange={props.setQuery}
+        onValueChange={str => {
+          props.setQuery(str);
+          props.setLoading(true);
+        }}
         placeholder="Quick Search..."
       />
     </StyledInputContent>
   );
 };
-
-export default Input;

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

@@ -0,0 +1,92 @@
+import { Command } from 'cmdk';
+import { StyledListItem, StyledNotFound } from './style';
+import { useModal } from '@/providers/global-modal-provider';
+import { PaperIcon, LogoUnlogIcon } from '@blocksuite/icons';
+import { useEditor } from '@/providers/editor-provider';
+import { Dispatch, SetStateAction, useEffect, useState } from 'react';
+import { useRouter } from 'next/router';
+import { List } from './config';
+
+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(() => {
+    setResults(search(query));
+    setLoading(false);
+    //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 && page.trash !== true
+  );
+
+  useEffect(() => {
+    setShowCreatePage(resultsPageMeta.length ? false : true);
+    //Determine whether to display the  ‘+ New page’
+  }, [resultsPageMeta]);
+
+  return loading ? null : (
+    <Command.List>
+      {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

@@ -1,28 +1,26 @@
 import { displayFlex, styled } from '@/styles';
 
-export const StyledModalWrapper = styled('div')(({ theme }) => {
-  return {
-    width: '620px',
-    height: 'auto',
-    maxHeight: '720px',
-    minHeight: '350px',
-    backgroundColor: theme.colors.popoverBackground,
-    borderRadius: '20px',
-    position: 'absolute',
-    top: '138px',
-    margin: 'auto',
-  };
-});
-
 export const StyledContent = styled('div')(({ theme }) => {
   return {
-    minHeight: '215px',
-    maxHeight: '585px',
+    minHeight: '220px',
+    maxHeight: '55vh',
     width: '100%',
-    padding: '0 24px',
     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',
+      borderRadius: '5px',
+      color: theme.colors.primaryColor,
+      backgroundColor: theme.colors.hoverBackground,
+    },
   };
 });
 export const StyledJumpTo = styled('div')(({ theme }) => {
@@ -35,24 +33,23 @@ export const StyledJumpTo = styled('div')(({ theme }) => {
       fontWeight: '500',
       marginBottom: '10px',
     },
-    a: {
-      color: 'inherit',
-      padding: '5px 5px 5px 0',
-      ...displayFlex('center', 'center'),
-      ':visited': {
-        color: theme.colors.popoverColor,
-      },
-      ':hover': {
-        color: theme.colors.primaryColor,
-      },
-      transition: `color .15s`,
-      svg: {
-        marginBottom: '2px',
-      },
-      span: {
-        marginLeft: '12px',
-        lineHeight: '22px',
-      },
+  };
+});
+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',
     },
   };
 });
@@ -64,7 +61,7 @@ export const StyledInputContent = styled('div')(({ theme }) => {
       width: '492px',
       height: '22px',
       padding: '0 12px',
-      fontSize: theme.font.sm,
+      fontSize: theme.font.base,
       ...displayFlex('space-between', 'center'),
       letterSpacing: '0.06em',
       color: theme.colors.popoverColor,
@@ -75,11 +72,9 @@ export const StyledInputContent = styled('div')(({ theme }) => {
   };
 });
 export const StyledShortcut = styled('div')(({ theme }) => {
-  return { color: theme.colors.placeHolderColor, fontSize: theme.font.xs };
-});
-export const StyledInput = styled('input')(({ theme }) => {
-  return {};
+  return { color: theme.colors.placeHolderColor, fontSize: theme.font.sm };
 });
+
 export const StyledLabel = styled('label')(({ theme }) => {
   return {
     width: '24px',
@@ -100,7 +95,7 @@ export const StyledModalDivider = styled('div')(({ theme }) => {
   return {
     width: 'auto',
     height: '0',
-    margin: '6px 12px 6.5px 12px',
+    margin: '6px 16px 6.5px 16px',
     position: 'relative',
     borderTop: `0.5px solid ${theme.colors.placeHolderColor}`,
   };
@@ -109,22 +104,46 @@ export const StyledModalDivider = styled('div')(({ theme }) => {
 export const StyledModalFooter = styled('div')(({ theme }) => {
   return {
     fontSize: theme.font.sm,
-    lineHeight: '20px',
-    textAlign: 'center',
-    color: theme.colors.popoverColor,
-    margin: '16px 0',
-  };
-});
-export const StyledModalFooterContent = styled('div')(({ theme }) => {
-  return {
-    fontSize: theme.font.sm,
-    lineHeight: '20px',
+    lineHeight: '22px',
+    marginBottom: '8px',
     textAlign: 'center',
     ...displayFlex('center', 'center'),
     color: theme.colors.popoverColor,
-    margin: '16px 0',
-    span: {
-      marginLeft: '12px',
+  };
+});
+export const StyledModalFooterContent = styled.button(({ theme }) => {
+  return {
+    width: '612px',
+    height: '32px',
+    fontSize: theme.font.sm,
+    lineHeight: '22px',
+    textAlign: 'center',
+    ...displayFlex('center', 'center'),
+    color: theme.colors.popoverColor,
+    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: '612px',
+    height: '32px',
+    fontSize: theme.font.sm,
+    color: 'inherit',
+    paddingLeft: '12px',
+    borderRadius: '5px',
+    ...displayFlex('flex-start', 'center'),
+    '>svg': {
+      fontSize: '20px',
+      marginRight: '12px',
     },
   };
 });