From ac91c0eac01a2af82a79e2a11f11b8882be0649a Mon Sep 17 00:00:00 2001
From: JimmFly <yangjinfei001@gmail.com>
Date: Mon, 12 Dec 2022 14:08:09 +0800
Subject: [PATCH] chore: update hotkey and style

---
 .../quick-search/content/jumpTo.tsx           | 17 +++++++++---
 .../src/components/quick-search/footer.tsx    |  3 +++
 .../app/src/components/quick-search/index.tsx | 26 +++++++++++++++---
 .../app/src/components/quick-search/style.ts  |  7 +++--
 .../src/providers/global-modal-provider.tsx   | 27 ++++---------------
 5 files changed, 50 insertions(+), 30 deletions(-)

diff --git a/packages/app/src/components/quick-search/content/jumpTo.tsx b/packages/app/src/components/quick-search/content/jumpTo.tsx
index 8b11f685a0..48d098d930 100644
--- a/packages/app/src/components/quick-search/content/jumpTo.tsx
+++ b/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>
diff --git a/packages/app/src/components/quick-search/footer.tsx b/packages/app/src/components/quick-search/footer.tsx
index 982d465900..68e83bf448 100644
--- a/packages/app/src/components/quick-search/footer.tsx
+++ b/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>
diff --git a/packages/app/src/components/quick-search/index.tsx b/packages/app/src/components/quick-search/index.tsx
index 05853b9ad2..4355c9ecf8 100644
--- a/packages/app/src/components/quick-search/index.tsx
+++ b/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
diff --git a/packages/app/src/components/quick-search/style.ts b/packages/app/src/components/quick-search/style.ts
index d93cba9f80..d85f1222a6 100644
--- a/packages/app/src/components/quick-search/style.ts
+++ b/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',
       },
     },
diff --git a/packages/app/src/providers/global-modal-provider.tsx b/packages/app/src/providers/global-modal-provider.tsx
index 2459470484..7c998a94a6 100644
--- a/packages/app/src/providers/global-modal-provider.tsx
+++ b/packages/app/src/providers/global-modal-provider.tsx
@@ -1,4 +1,4 @@
-import { createContext, useContext, useEffect, useState } from 'react';
+import { createContext, useContext, useState } from 'react';
 import type { PropsWithChildren } from 'react';
 import ShortcutsModal from '@/components/shortcuts-modal';
 import ContactModal from '@/components/contact-modal';
@@ -8,7 +8,7 @@ import { ImportModal } from '@/components/import';
 type ModalContextValue = {
   triggerShortcutsModal: () => void;
   triggerContactModal: () => void;
-  triggerQuickSearchModal: () => void;
+  triggerQuickSearchModal: (visible?: boolean) => void;
   triggerImportModal: () => void;
 };
 type ModalContextProps = PropsWithChildren<{}>;
@@ -22,7 +22,7 @@ type ModalMap = {
 export const ModalContext = createContext<ModalContextValue>({
   triggerShortcutsModal: () => {},
   triggerContactModal: () => {},
-  triggerQuickSearchModal: () => {},
+  triggerQuickSearchModal: (visible?) => {},
   triggerImportModal: () => {},
 });
 
@@ -45,23 +45,6 @@ export const ModalProvider = ({
     });
   };
 
-  useEffect(() => {
-    const down = (e: KeyboardEvent) => {
-      if (e.key === 'k' && e.metaKey) {
-        const selection = window.getSelection();
-        if (selection?.toString()) {
-          triggerHandler('quickSearch', false);
-          return;
-        }
-        if (selection?.isCollapsed) {
-          triggerHandler('quickSearch');
-        }
-      }
-    };
-    document.addEventListener('keydown', down);
-    return () => document.removeEventListener('keydown', down);
-  }, []);
-
   return (
     <ModalContext.Provider
       value={{
@@ -71,8 +54,8 @@ export const ModalProvider = ({
         triggerContactModal: () => {
           triggerHandler('contact');
         },
-        triggerQuickSearchModal: () => {
-          triggerHandler('quickSearch');
+        triggerQuickSearchModal: (visible?) => {
+          triggerHandler('quickSearch', visible);
         },
         triggerImportModal: () => {
           triggerHandler('import');