feat: make add new page selectable in quick search

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>
   );
 };

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>
   );

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>
+    </>
   );
 };

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',