feat: update quick search ui

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

@@ -1,14 +1,11 @@
 import React from 'react';
-import { useEditor } from '@/providers/editor-provider';
-import JumpTo from './jumpTo';
-
-const Result = () => {
-  const { editor, mode, setMode } = useEditor();
+import JumpTo from './JumpTo';
+import { Command } from 'cmdk';
+import SearchResult from './searchResult';
 
+const Result = (props: { search: string }) => {
   return (
-    <div>
-      <JumpTo />
-    </div>
+    <Command.List>{props.search ? <SearchResult /> : <JumpTo />}</Command.List>
   );
 };
 

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

@@ -4,23 +4,25 @@ import {
   MiddleTrashIcon,
   MiddleAllPagesIcon,
 } from '@blocksuite/icons';
+import Link from 'next/link';
+import { StyledJumpTo } from '../style';
 const JumpTo = () => {
   return (
-    <div>
-      <div>Jump to</div>
-      <div>
-        <MiddleAllPagesIcon />
+    <StyledJumpTo>
+      <strong>Jump to</strong>
+      <Link href={{ pathname: '/all-page', query: { name: 'test' } }}>
+        <MiddleAllPagesIcon width={20} height={20} />
         <span> All pages</span>
-      </div>
-      <div>
-        <MiddleFavouritesIcon />
+      </Link>
+      <Link href={'/'}>
+        <MiddleFavouritesIcon width={20} height={20} />
         <span> Favourites</span>
-      </div>
-      <div>
-        <MiddleTrashIcon />
+      </Link>
+      <Link href={'/'}>
+        <MiddleTrashIcon width={20} height={20} />
         <span> Trash</span>
-      </div>
-    </div>
+      </Link>
+    </StyledJumpTo>
   );
 };
 

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

@@ -1,7 +0,0 @@
-import React from 'react';
-
-const SearchResult = () => {
-  return <div>searchResult</div>;
-};
-
-export default SearchResult;

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

@@ -0,0 +1,9 @@
+import React from 'react';
+import { Command, useCommandState } from 'cmdk';
+
+const noResult = () => {
+  const search = useCommandState(state => state.search);
+  return <Command.Empty>No results found for "{search}".</Command.Empty>;
+};
+
+export default noResult;

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

@@ -0,0 +1,21 @@
+import React from 'react';
+import NoResult from './NotFound';
+import { Command } from 'cmdk';
+import Store from '@blocksuite/store';
+
+const SearchResult = () => {
+  return (
+    <>
+      <NoResult />
+      <Command.Group heading="Letters">
+        <Command.Item>a</Command.Item>
+        <Command.Item>b</Command.Item>
+        <Command.Separator />
+        <Command.Item>c</Command.Item>
+      </Command.Group>
+      <Command.Item>Apple</Command.Item>
+    </>
+  );
+};
+
+export default SearchResult;

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

@@ -1,16 +1,16 @@
 import { Modal, ModalWrapper } from '@/ui/modal';
-
 import {
-  StyledModalWrapper,
   StyledContent,
   StyledModalHeader,
   StyledModalFooter,
   StyledModalDivider,
   StyledShortcut,
 } from './style';
-import Input from './input';
+import Input from './Input';
 import Result from './content';
-import QuickSearchFooter from './footer';
+import QuickSearchFooter from './Footer';
+import { Command } from 'cmdk';
+import { useState } from 'react';
 type TransitionsModalProps = {
   open: boolean;
   onClose: () => void;
@@ -19,8 +19,9 @@ const isMac = () => {
   return /macintosh|mac os x/i.test(navigator.userAgent);
 };
 export const QuickSearch = ({ open, onClose }: TransitionsModalProps) => {
+  const [search, setSearch] = useState('');
   return (
-    <Modal open={open} onClose={onClose}>
+    <Modal open={open} onClose={onClose} wrapperPosition={['top', 'center']}>
       <ModalWrapper
         width={620}
         height={'auto'}
@@ -28,20 +29,23 @@ export const QuickSearch = ({ open, onClose }: TransitionsModalProps) => {
           maxHeight: '720px',
           minHeight: '350px',
           borderRadius: '20px',
+          top: '138px',
         }}
       >
-        <StyledModalHeader>
-          <Input />
-          <StyledShortcut>{isMac() ? '⌘+K' : 'Ctrl+K'}</StyledShortcut>
-        </StyledModalHeader>
-        <StyledModalDivider />
-        <StyledContent>
-          <Result />
-        </StyledContent>
+        <Command>
+          <StyledModalHeader>
+            <Input search={search} setSearch={setSearch} />
+            <StyledShortcut>{isMac() ? '⌘+K' : 'Ctrl+K'}</StyledShortcut>
+          </StyledModalHeader>
+          <StyledModalDivider />
+          <StyledContent>
+            <Result search={search} />
+          </StyledContent>
 
-        <StyledModalFooter>
-          <QuickSearchFooter />
-        </StyledModalFooter>
+          <StyledModalFooter>
+            <QuickSearchFooter />
+          </StyledModalFooter>
+        </Command>
       </ModalWrapper>
     </Modal>
   );

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

@@ -1,17 +1,20 @@
-import React from 'react';
+import React, { Dispatch, SetStateAction } from 'react';
 import { MiddleSearchIcon } from '@blocksuite/icons';
-import { StyledInput, StyledInputContent, StyledLabel } from './style';
-
-const Input = () => {
+import { StyledInputContent, StyledLabel } from './style';
+import { Command } from 'cmdk';
+const Input = (props: {
+  search: string;
+  setSearch: Dispatch<SetStateAction<string>>;
+}) => {
   return (
     <StyledInputContent>
-      <StyledLabel htmlFor="quickSearchInput">
+      <StyledLabel htmlFor=":r5:">
         <MiddleSearchIcon />
       </StyledLabel>
-      <StyledInput
-        id="quickSearchInput"
-        type="text"
-        placeholder="Quick search..."
+      <Command.Input
+        value={props.search}
+        onValueChange={props.setSearch}
+        placeholder="Quick Search..."
       />
     </StyledInputContent>
   );

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

@@ -1,5 +1,4 @@
 import { displayFlex, styled } from '@/styles';
-import { relative } from 'path';
 
 export const StyledModalWrapper = styled('div')(({ theme }) => {
   return {
@@ -20,33 +19,63 @@ export const StyledContent = styled('div')(({ theme }) => {
     minHeight: '215px',
     maxHeight: '585px',
     width: '100%',
-    padding: '5px 24px',
+    padding: '0 24px',
     overflow: 'auto',
     color: theme.colors.popoverColor,
-    marginTop: '16px',
     letterSpacing: '0.06em',
   };
 });
-export const StyledInputContent = styled('div')({
-  margin: '13px 0',
-  ...displayFlex('space-between', 'center'),
+export const StyledJumpTo = styled('div')(({ theme }) => {
+  return {
+    ...displayFlex('center', 'start'),
+    flexDirection: 'column',
+    padding: '10px 10px 10px 0',
+    fontSize: theme.font.sm,
+    strong: {
+      fontWeight: '500',
+      marginBottom: '10px',
+    },
+    a: {
+      color: theme.colors.popoverColor,
+      padding: '5px 5px 5px 0',
+      ...displayFlex('center', 'center'),
+      ':visited': {
+        color: theme.colors.popoverColor,
+      },
+      svg: {
+        marginBottom: '2px',
+      },
+      span: {
+        marginLeft: '12px',
+
+        lineHeight: '22px',
+      },
+    },
+  };
+});
+export const StyledInputContent = styled('div')(({ theme }) => {
+  return {
+    margin: '13px 0',
+    ...displayFlex('space-between', 'center'),
+    input: {
+      width: '492px',
+      height: '22px',
+      padding: '0 12px',
+      fontSize: theme.font.sm,
+      ...displayFlex('space-between', 'center'),
+      letterSpacing: '0.06em',
+      color: theme.colors.popoverColor,
+      '::placeholder': {
+        color: theme.colors.placeHolderColor,
+      },
+    },
+  };
 });
 export const StyledShortcut = styled('div')(({ theme }) => {
   return { color: theme.colors.placeHolderColor, fontSize: theme.font.xs };
 });
 export const StyledInput = styled('input')(({ theme }) => {
-  return {
-    width: '492px',
-    height: '22px',
-    padding: '0 12px',
-    fontSize: theme.font.sm,
-    ...displayFlex('space-between', 'center'),
-    letterSpacing: '0.06em',
-    color: theme.colors.popoverColor,
-    '::placeholder': {
-      color: theme.colors.placeHolderColor,
-    },
-  };
+  return {};
 });
 export const StyledLabel = styled('label')(({ theme }) => {
   return {