chore: update hotkey and style

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

@@ -6,19 +6,30 @@ import {
 } 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: '/all-page', query: { name: 'test' } }}>
+      <Link
+        href={{ pathname: '/page-list/all' }}
+        onClick={() => triggerQuickSearchModal()}
+      >
         <MiddleAllPagesIcon width={20} height={20} />
         <span> All pages</span>
       </Link>
-      <Link href={'/'}>
+      <Link
+        href={{ pathname: '/page-list/favorite' }}
+        onClick={() => triggerQuickSearchModal()}
+      >
         <MiddleFavouritesIcon width={20} height={20} />
         <span> Favourites</span>
       </Link>
-      <Link href={'/'}>
+      <Link
+        href={{ pathname: '/page-list/trash' }}
+        onClick={() => triggerQuickSearchModal()}
+      >
         <MiddleTrashIcon width={20} height={20} />
         <span> Trash</span>
       </Link>

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

@@ -2,16 +2,19 @@ import React from 'react';
 import { MiddleAddIcon } 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 = () => {
   const { createPage } = useEditor();
+  const { triggerQuickSearchModal } = useModal();
   return (
     <StyledModalFooterContent>
       <IconButton>
         <MiddleAddIcon
           onClick={() => {
             createPage();
+            triggerQuickSearchModal();
           }}
         />
       </IconButton>

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

@@ -10,8 +10,9 @@ import Input from './Input';
 import Result from './content';
 import QuickSearchFooter from './Footer';
 import { Command } from 'cmdk';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { useEditor } from '@/providers/editor-provider';
+import { useModal } from '@/providers/global-modal-provider';
 type TransitionsModalProps = {
   open: boolean;
   onClose: () => void;
@@ -21,10 +22,29 @@ const isMac = () => {
 };
 export const QuickSearch = ({ open, onClose }: TransitionsModalProps) => {
   const [query, setQuery] = useState('');
-  const [result, setResult] = useState({});
   const { search } = useEditor();
+  const [result, setResult] = useState({});
   const { pageList } = useEditor();
-
+  const { triggerQuickSearchModal } = useModal();
+  useEffect(() => {
+    setResult(search(query, { enrich: true }));
+  }, [query]);
+  useEffect(() => {
+    const down = (e: KeyboardEvent) => {
+      if (e.key === 'k' && e.metaKey) {
+        const selection = window.getSelection();
+        if (selection?.toString()) {
+          triggerQuickSearchModal(false);
+          return;
+        }
+        if (selection?.isCollapsed) {
+          triggerQuickSearchModal(!open);
+        }
+      }
+    };
+    document.addEventListener('keydown', down);
+    return () => document.removeEventListener('keydown', down);
+  }, [open]);
   return (
     <Modal open={open} onClose={onClose} wrapperPosition={['top', 'center']}>
       <ModalWrapper

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

@@ -36,18 +36,21 @@ export const StyledJumpTo = styled('div')(({ theme }) => {
       marginBottom: '10px',
     },
     a: {
-      color: theme.colors.popoverColor,
+      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',
       },
     },