feat: add autoFocus

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

@@ -22,6 +22,7 @@ const isMac = () => {
 export const QuickSearch = ({ open, onClose }: TransitionsModalProps) => {
   const [query, setQuery] = useState('');
   const { triggerQuickSearchModal } = useModal();
+  // Add  ‘⌘+K’ shortcut keys as switches
   useEffect(() => {
     const down = (e: KeyboardEvent) => {
       if (e.key === 'k' && e.metaKey) {
@@ -44,22 +45,22 @@ export const QuickSearch = ({ open, onClose }: TransitionsModalProps) => {
         width={620}
         height={'auto'}
         style={{
-          maxHeight: '720px',
+          maxHeight: '67vh',
           minHeight: '350px',
-          borderRadius: '20px',
           top: '138px',
         }}
       >
         <Command>
           <StyledModalHeader>
             <Input query={query} setQuery={setQuery} />
-            <StyledShortcut>{isMac() ? '⌘+K' : 'Ctrl+K'}</StyledShortcut>
+            <StyledShortcut>{isMac() ? '⌘ + K' : 'Ctrl + K'}</StyledShortcut>
           </StyledModalHeader>
           <StyledModalDivider />
           <StyledContent>
             <Results query={query} />
           </StyledContent>
         </Command>
+        <StyledModalDivider />
         <StyledModalFooter>
           <Footer />
         </StyledModalFooter>
@@ -67,3 +68,5 @@ export const QuickSearch = ({ open, onClose }: TransitionsModalProps) => {
     </Modal>
   );
 };
+
+export default QuickSearch;

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

@@ -1,4 +1,4 @@
-import React, { Dispatch, SetStateAction } from 'react';
+import React, { Dispatch, SetStateAction, useEffect, useRef } from 'react';
 import { SearchIcon } from '@blocksuite/icons';
 import { StyledInputContent, StyledLabel } from './style';
 import { Command } from 'cmdk';
@@ -6,12 +6,17 @@ export const Input = (props: {
   query: string;
   setQuery: Dispatch<SetStateAction<string>>;
 }) => {
+  const inputRef = useRef<HTMLInputElement>(null);
+  useEffect(() => {
+    return inputRef.current?.focus();
+  }, [inputRef]);
   return (
     <StyledInputContent>
       <StyledLabel htmlFor=":r5:">
         <SearchIcon />
       </StyledLabel>
       <Command.Input
+        ref={inputRef}
         value={props.query}
         onValueChange={props.setQuery}
         placeholder="Quick Search..."

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

@@ -7,9 +7,8 @@ import { useEditor } from '@/providers/editor-provider';
 import { useEffect, useState } from 'react';
 
 export const Results = (props: { query: string }) => {
-  const { triggerQuickSearchModal } = useModal();
-
   const query = props.query;
+  const { triggerQuickSearchModal } = useModal();
   const { search, openPage, pageList } = useEditor();
   const [results, setResults] = useState(new Map<string, string | undefined>());
   useEffect(() => {
@@ -24,7 +23,7 @@ export const Results = (props: { query: string }) => {
   return (
     <Command.List>
       <Command.Empty>No results found for &quot;{query}&quot;.</Command.Empty>
-      <Command.Group heading="Page">
+      <Command.Group>
         {resultsPageMeta.map(result => {
           return (
             <Command.Item

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

@@ -1,28 +1,17 @@
 import { displayFlex, styled } from '@/styles';
 
-export const StyledModalWrapper = styled('div')(({ theme }) => {
-  return {
-    width: '620px',
-    height: 'auto',
-    maxHeight: '720px',
-    minHeight: '350px',
-    backgroundColor: theme.colors.popoverBackground,
-    borderRadius: '20px',
-    position: 'absolute',
-    top: '138px',
-    margin: 'auto',
-  };
-});
-
 export const StyledContent = styled('div')(({ theme }) => {
   return {
-    minHeight: '215px',
-    maxHeight: '585px',
+    minHeight: '224px',
+    maxHeight: '50vh',
     width: '100%',
-    padding: '0 24px',
     overflow: 'auto',
+    ...displayFlex('center', 'flex-start'),
     color: theme.colors.popoverColor,
     letterSpacing: '0.06em',
+    '[cmdk-group-heading]': {
+      margin: '5px 16px',
+    },
   };
 });
 export const StyledJumpTo = styled('div')(({ theme }) => {
@@ -35,24 +24,6 @@ export const StyledJumpTo = styled('div')(({ theme }) => {
       fontWeight: '500',
       marginBottom: '10px',
     },
-    a: {
-      color: 'inherit',
-      padding: '5px 5px 5px 0',
-      ...displayFlex('center', 'center'),
-      ':visited': {
-        color: theme.colors.popoverColor,
-      },
-      transition: 'background .15s, color .15s',
-      svg: {
-        color: 'inherit',
-        marginBottom: '2px',
-      },
-      span: {
-        color: 'inherit',
-        marginLeft: '12px',
-        lineHeight: '22px',
-      },
-    },
   };
 });
 export const StyledInputContent = styled('div')(({ theme }) => {
@@ -63,7 +34,7 @@ export const StyledInputContent = styled('div')(({ theme }) => {
       width: '492px',
       height: '22px',
       padding: '0 12px',
-      fontSize: theme.font.sm,
+      fontSize: theme.font.base,
       ...displayFlex('space-between', 'center'),
       letterSpacing: '0.06em',
       color: theme.colors.popoverColor,
@@ -74,11 +45,9 @@ export const StyledInputContent = styled('div')(({ theme }) => {
   };
 });
 export const StyledShortcut = styled('div')(({ theme }) => {
-  return { color: theme.colors.placeHolderColor, fontSize: theme.font.xs };
-});
-export const StyledInput = styled('input')(({ theme }) => {
-  return {};
+  return { color: theme.colors.placeHolderColor, fontSize: theme.font.sm };
 });
+
 export const StyledLabel = styled('label')(({ theme }) => {
   return {
     width: '24px',
@@ -99,7 +68,7 @@ export const StyledModalDivider = styled('div')(({ theme }) => {
   return {
     width: 'auto',
     height: '0',
-    margin: '6px 12px 6.5px 12px',
+    margin: '6px 16px 6.5px 16px',
     position: 'relative',
     borderTop: `0.5px solid ${theme.colors.placeHolderColor}`,
   };
@@ -108,19 +77,19 @@ export const StyledModalDivider = styled('div')(({ theme }) => {
 export const StyledModalFooter = styled('div')(({ theme }) => {
   return {
     fontSize: theme.font.sm,
-    lineHeight: '20px',
+    lineHeight: '22px',
+    marginBottom: '8px',
     textAlign: 'center',
     ...displayFlex('center', 'center'),
     color: theme.colors.popoverColor,
-    margin: '16px 0',
   };
 });
 export const StyledModalFooterContent = styled.button(({ theme }) => {
   return {
-    width: '572px',
+    width: '612px',
     height: '32px',
     fontSize: theme.font.sm,
-    lineHeight: '20px',
+    lineHeight: '22px',
     textAlign: 'center',
     ...displayFlex('center', 'center'),
     color: theme.colors.popoverColor,
@@ -138,9 +107,8 @@ export const StyledModalFooterContent = styled.button(({ theme }) => {
 });
 export const StyledListItem = styled.button(({ theme }) => {
   return {
-    width: '572px',
+    width: '612px',
     height: '32px',
-    marginTop: '12px',
     fontSize: theme.font.sm,
     color: theme.colors.popoverColor,
     paddingLeft: '12px',
@@ -155,5 +123,27 @@ export const StyledListItem = styled.button(({ theme }) => {
       color: theme.colors.primaryColor,
       backgroundColor: theme.colors.hoverBackground,
     },
+    a: {
+      width: '100%',
+      color: 'inherit',
+      ...displayFlex('flex-start', 'center'),
+      ':visited': {
+        color: theme.colors.popoverColor,
+      },
+      transition: 'background .15s, color .15s',
+      svg: {
+        fontSize: '20px',
+        color: 'inherit',
+        marginBottom: '2px',
+      },
+      span: {
+        color: 'inherit',
+        margin: '0 12px',
+        lineHeight: '22px',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        whiteSpace: 'nowrap',
+      },
+    },
   };
 });