Merge branch 'master' into fix/update-search-ui

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

@@ -1,26 +1,23 @@
 import React from 'react';
 import { AddIcon } from '@blocksuite/icons';
 import { StyledModalFooterContent } from './style';
-import { useModal } from '@/providers/GlobalModalProvider';
 import { Command } from 'cmdk';
 import { usePageHelper } from '@/hooks/use-page-helper';
 import { useTranslation } from '@affine/i18n';
-export const Footer = (props: { query: string }) => {
-  const { triggerQuickSearchModal } = useModal();
+export const Footer = (props: { query: string; onClose: () => void }) => {
   const { openPage, createPage } = usePageHelper();
   const { t } = useTranslation();
-  const query = props.query;
+  const { query, onClose } = props;
 
   return (
     <Command.Item
       data-testid="quickSearch-addNewPage"
       onSelect={async () => {
+        onClose();
         const pageId = await createPage({ title: query });
         if (pageId) {
           openPage(pageId);
         }
-
-        triggerQuickSearchModal();
       }}
     >
       <StyledModalFooterContent>

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

@@ -28,12 +28,9 @@ export const Input = (props: {
       },
       true
     );
+    setInputValue(props.query);
     return inputRef.current?.focus();
-  }, [inputRef]);
-  useEffect(() => {
-    return setInputValue(props.query);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  }, [inputRef, props.query]);
   return (
     <StyledInputContent>
       <StyledLabel htmlFor=":r5:">

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

@@ -1,6 +1,5 @@
 import { Command } from 'cmdk';
 import { StyledListItem, StyledNotFound } from './style';
-import { useModal } from '@/providers/GlobalModalProvider';
 import { PaperIcon, EdgelessIcon } from '@blocksuite/icons';
 import { Dispatch, SetStateAction, useEffect, useState } from 'react';
 import { useAppState } from '@/providers/app-state-provider';
@@ -12,14 +11,11 @@ import usePageHelper from '@/hooks/use-page-helper';
 export const Results = (props: {
   query: string;
   loading: boolean;
+  onClose: () => void;
   setLoading: Dispatch<SetStateAction<boolean>>;
   setShowCreatePage: Dispatch<SetStateAction<boolean>>;
 }) => {
-  const query = props.query;
-  const loading = props.loading;
-  const setLoading = props.setLoading;
-  const setShowCreatePage = props.setShowCreatePage;
-  const { triggerQuickSearchModal } = useModal();
+  const { query, loading, setLoading, setShowCreatePage, onClose } = props;
   const { openPage } = usePageHelper();
   const router = useRouter();
   const { currentWorkspace, pageList } = useAppState();
@@ -55,8 +51,8 @@ export const Results = (props: {
                 <Command.Item
                   key={result.id}
                   onSelect={() => {
+                    onClose();
                     openPage(result.id);
-                    triggerQuickSearchModal();
                   }}
                   value={result.id}
                 >
@@ -86,8 +82,8 @@ export const Results = (props: {
                 key={link.title}
                 value={link.title}
                 onSelect={() => {
+                  onClose();
                   router.push(link.href);
-                  triggerQuickSearchModal();
                 }}
               >
                 <StyledListItem>

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

@@ -33,40 +33,48 @@ export const QuickSearch = ({ open, onClose }: TransitionsModalProps) => {
   const isPublicAndNoQuery = () => {
     return isPublic && query.length === 0;
   };
+  const handleClose = () => {
+    setQuery('');
+    onClose();
+  };
   // Add  ‘⌘+K’ shortcut keys as switches
   useEffect(() => {
     const down = (e: KeyboardEvent) => {
       if ((e.key === 'k' && e.metaKey) || (e.key === 'k' && e.ctrlKey)) {
         const selection = window.getSelection();
+        setQuery('');
         if (selection?.toString()) {
           triggerQuickSearchModal(false);
           return;
         }
-        if (selection?.isCollapsed) {
+        if (
+          selection?.isCollapsed &&
+          router.pathname.startsWith('/404') !== true
+        ) {
           triggerQuickSearchModal(!open);
         }
       }
     };
-    if (!open) {
-      setQuery('');
-    }
     document.addEventListener('keydown', down, { capture: true });
     return () =>
       document.removeEventListener('keydown', down, { capture: true });
-  }, [open, triggerQuickSearchModal]);
+  }, [open, router.pathname, triggerQuickSearchModal]);
 
   useEffect(() => {
+    if (router.pathname.startsWith('/404')) {
+      return handleClose();
+    }
     if (router.pathname.startsWith('/public-workspace')) {
       return setIsPublic(true);
     } else {
       return setIsPublic(false);
     }
-  }, [router]);
+  }, [handleClose, router]);
 
   return (
     <Modal
       open={open}
-      onClose={onClose}
+      onClose={handleClose}
       wrapperPosition={['top', 'center']}
       data-testid="quickSearch"
     >
@@ -102,47 +110,42 @@ export const QuickSearch = ({ open, onClose }: TransitionsModalProps) => {
             />
             <StyledShortcut>{isMac() ? '⌘ + K' : 'Ctrl + K'}</StyledShortcut>
           </StyledModalHeader>
-          <>
-            <StyledModalDivider
+          <StyledModalDivider
+            style={{ display: isPublicAndNoQuery() ? 'none' : '' }}
+          />
+          <Command.List>
+            <StyledContent
               style={{ display: isPublicAndNoQuery() ? 'none' : '' }}
-            />
-            <Command.List>
-              <StyledContent
-                style={{ display: isPublicAndNoQuery() ? 'none' : '' }}
-              >
-                {!isPublic ? (
-                  <Results
-                    query={query}
-                    loading={loading}
-                    setLoading={setLoading}
-                    setShowCreatePage={setShowCreatePage}
-                  />
-                ) : (
-                  <PublishedResults
-                    query={query}
-                    loading={loading}
-                    setLoading={setLoading}
-                    onClose={onClose}
-                    setPublishWorkspaceName={setPublishWorkspaceName}
-                  />
-                )}
-              </StyledContent>
+            >
               {!isPublic ? (
-                showCreatePage ? (
-                  <>
-                    <StyledModalDivider />
-                    <StyledModalFooter>
-                      <Footer query={query} />
-                    </StyledModalFooter>
-                  </>
-                ) : (
-                  <></>
-                )
+                <Results
+                  query={query}
+                  loading={loading}
+                  setLoading={setLoading}
+                  onClose={handleClose}
+                  setShowCreatePage={setShowCreatePage}
+                />
               ) : (
-                <></>
+                <PublishedResults
+                  query={query}
+                  loading={loading}
+                  setLoading={setLoading}
+                  onClose={handleClose}
+                  setPublishWorkspaceName={setPublishWorkspaceName}
+                />
               )}
-            </Command.List>
-          </>
+            </StyledContent>
+            {!isPublic ? (
+              showCreatePage ? (
+                <>
+                  <StyledModalDivider />
+                  <StyledModalFooter>
+                    <Footer query={query} onClose={handleClose} />
+                  </StyledModalFooter>
+                </>
+              ) : null
+            ) : null}
+          </Command.List>
         </Command>
       </ModalWrapper>
     </Modal>