From 79c417d3c0535b689da7abcd9859e8f0141f964a Mon Sep 17 00:00:00 2001
From: JimmFly <yangjinfei001@gmail.com>
Date: Mon, 19 Dec 2022 11:16:43 +0800
Subject: [PATCH] feat: make add new page selectable in quick search

---
 .../src/components/quick-search/footer.tsx    | 21 +++++++-----
 .../app/src/components/quick-search/index.tsx | 34 ++++++++++---------
 .../src/components/quick-search/results.tsx   |  4 +--
 .../app/src/components/quick-search/style.ts  | 13 ++++---
 4 files changed, 40 insertions(+), 32 deletions(-)

diff --git a/packages/app/src/components/quick-search/footer.tsx b/packages/app/src/components/quick-search/footer.tsx
index 9666f7f1b7..eea6dee2c4 100644
--- a/packages/app/src/components/quick-search/footer.tsx
+++ b/packages/app/src/components/quick-search/footer.tsx
@@ -3,6 +3,7 @@ import { AddIcon } from '@blocksuite/icons';
 import { StyledModalFooterContent } from './style';
 import { useEditor } from '@/providers/editor-provider';
 import { useModal } from '@/providers/global-modal-provider';
+import { Command } from 'cmdk';
 
 export const Footer = (props: { query: string }) => {
   const { createPage, openPage } = useEditor();
@@ -10,20 +11,22 @@ export const Footer = (props: { query: string }) => {
   const query = props.query;
 
   return (
-    <StyledModalFooterContent
-      onClick={async () => {
+    <Command.Item
+      onSelect={async () => {
         const page = await createPage({ title: query });
         openPage(page.id);
 
         triggerQuickSearchModal();
       }}
     >
-      <AddIcon />
-      {query ? (
-        <span>New &quot;{query}&quot; page</span>
-      ) : (
-        <span>New page</span>
-      )}
-    </StyledModalFooterContent>
+      <StyledModalFooterContent>
+        <AddIcon />
+        {query ? (
+          <span>New &quot;{query}&quot; page</span>
+        ) : (
+          <span>New page</span>
+        )}
+      </StyledModalFooterContent>
+    </Command.Item>
   );
 };
diff --git a/packages/app/src/components/quick-search/index.tsx b/packages/app/src/components/quick-search/index.tsx
index 2d9f011d6e..f99b029e39 100644
--- a/packages/app/src/components/quick-search/index.tsx
+++ b/packages/app/src/components/quick-search/index.tsx
@@ -76,23 +76,25 @@ export const QuickSearch = ({ open, onClose }: TransitionsModalProps) => {
             <StyledShortcut>{isMac() ? '⌘ + K' : 'Ctrl + K'}</StyledShortcut>
           </StyledModalHeader>
           <StyledModalDivider />
-          <StyledContent>
-            <Results
-              query={query}
-              loading={loading}
-              setLoading={setLoading}
-              setShowCreatePage={setShowCreatePage}
-            />
-          </StyledContent>
+          <Command.List>
+            <StyledContent>
+              <Results
+                query={query}
+                loading={loading}
+                setLoading={setLoading}
+                setShowCreatePage={setShowCreatePage}
+              />
+            </StyledContent>
+            {showCreatePage ? (
+              <>
+                <StyledModalDivider />
+                <StyledModalFooter>
+                  <Footer query={query} />
+                </StyledModalFooter>
+              </>
+            ) : null}
+          </Command.List>
         </Command>
-        {showCreatePage ? (
-          <>
-            <StyledModalDivider />
-            <StyledModalFooter>
-              <Footer query={query} />
-            </StyledModalFooter>
-          </>
-        ) : null}
       </ModalWrapper>
     </Modal>
   );
diff --git a/packages/app/src/components/quick-search/results.tsx b/packages/app/src/components/quick-search/results.tsx
index d3dc1ab0d0..d011b6c8ed 100644
--- a/packages/app/src/components/quick-search/results.tsx
+++ b/packages/app/src/components/quick-search/results.tsx
@@ -37,7 +37,7 @@ export const Results = (props: {
     //Determine whether to display the  ‘+ New page’
   }, [resultsPageMeta, setShowCreatePage]);
   return loading ? null : (
-    <Command.List>
+    <>
       {query ? (
         resultsPageMeta.length ? (
           <Command.Group heading={`Find ${resultsPageMeta.length} results`}>
@@ -90,6 +90,6 @@ export const Results = (props: {
           })}
         </Command.Group>
       )}
-    </Command.List>
+    </>
   );
 };
diff --git a/packages/app/src/components/quick-search/style.ts b/packages/app/src/components/quick-search/style.ts
index 30171e5a36..ed931cad50 100644
--- a/packages/app/src/components/quick-search/style.ts
+++ b/packages/app/src/components/quick-search/style.ts
@@ -109,6 +109,12 @@ export const StyledModalFooter = styled('div')(({ theme }) => {
     textAlign: 'center',
     ...displayFlex('center', 'center'),
     color: theme.colors.popoverColor,
+    '[aria-selected="true"]': {
+      transition: 'background .15s, color .15s',
+      borderRadius: '5px',
+      color: theme.colors.primaryColor,
+      backgroundColor: theme.colors.hoverBackground,
+    },
   };
 });
 export const StyledModalFooterContent = styled.button(({ theme }) => {
@@ -119,17 +125,13 @@ export const StyledModalFooterContent = styled.button(({ theme }) => {
     lineHeight: '22px',
     textAlign: 'center',
     ...displayFlex('center', 'center'),
-    color: theme.colors.popoverColor,
+    color: 'inherit',
     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 }) => {
@@ -140,6 +142,7 @@ export const StyledListItem = styled.button(({ theme }) => {
     color: 'inherit',
     paddingLeft: '12px',
     borderRadius: '5px',
+    transition: 'background .15s, color .15s',
     ...displayFlex('flex-start', 'center'),
     '>svg': {
       fontSize: '20px',