From a54bc69d46f6cf84e3fa6b7248ee94d415975496 Mon Sep 17 00:00:00 2001
From: JimmFly <yangjinfei001@gmail.com>
Date: Tue, 7 Feb 2023 12:09:09 +0800
Subject: [PATCH 1/5] fix: add public page search ui

---
 .../app/src/components/quick-search/index.tsx | 68 ++++++++++---------
 1 file changed, 36 insertions(+), 32 deletions(-)

diff --git a/packages/app/src/components/quick-search/index.tsx b/packages/app/src/components/quick-search/index.tsx
index 7c24f0b970..88f1b7e125 100644
--- a/packages/app/src/components/quick-search/index.tsx
+++ b/packages/app/src/components/quick-search/index.tsx
@@ -72,7 +72,7 @@ export const QuickSearch = ({ open, onClose }: TransitionsModalProps) => {
         width={620}
         style={{
           maxHeight: '80vh',
-          minHeight: '350px',
+          minHeight: isPublic && query.length === 0 ? '72px' : '350px',
           top: '12vh',
         }}
       >
@@ -100,37 +100,41 @@ export const QuickSearch = ({ open, onClose }: TransitionsModalProps) => {
             />
             <StyledShortcut>{isMac() ? '⌘ + K' : 'Ctrl + K'}</StyledShortcut>
           </StyledModalHeader>
-          <StyledModalDivider />
-          <Command.List>
-            <StyledContent>
-              {!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>
-                </>
-              ) : null
-            ) : null}
-          </Command.List>
+          {isPublic && query.length === 0 ? null : (
+            <>
+              <StyledModalDivider />
+              <Command.List>
+                <StyledContent>
+                  {!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>
+                    </>
+                  ) : null
+                ) : null}
+              </Command.List>
+            </>
+          )}
         </Command>
       </ModalWrapper>
     </Modal>

From fd72f693039499d3b8295855ab7f8448f003e62b Mon Sep 17 00:00:00 2001
From: JimmFly <yangjinfei001@gmail.com>
Date: Tue, 7 Feb 2023 12:31:06 +0800
Subject: [PATCH 2/5] chore: update style

---
 .../app/src/components/quick-search/index.tsx | 80 ++++++++++---------
 .../app/src/components/quick-search/style.ts  |  3 +-
 2 files changed, 46 insertions(+), 37 deletions(-)

diff --git a/packages/app/src/components/quick-search/index.tsx b/packages/app/src/components/quick-search/index.tsx
index 88f1b7e125..39a9ec0366 100644
--- a/packages/app/src/components/quick-search/index.tsx
+++ b/packages/app/src/components/quick-search/index.tsx
@@ -30,7 +30,9 @@ export const QuickSearch = ({ open, onClose }: TransitionsModalProps) => {
   const [publishWorkspaceName, setPublishWorkspaceName] = useState('');
   const [showCreatePage, setShowCreatePage] = useState(true);
   const { triggerQuickSearchModal } = useModal();
-
+  const isPublicAndNoQuery = () => {
+    return isPublic && query.length === 0;
+  };
   // Add  ‘⌘+K’ shortcut keys as switches
   useEffect(() => {
     const down = (e: KeyboardEvent) => {
@@ -72,7 +74,7 @@ export const QuickSearch = ({ open, onClose }: TransitionsModalProps) => {
         width={620}
         style={{
           maxHeight: '80vh',
-          minHeight: isPublic && query.length === 0 ? '72px' : '350px',
+          minHeight: isPublicAndNoQuery() ? '72px' : '350px',
           top: '12vh',
         }}
       >
@@ -100,41 +102,47 @@ export const QuickSearch = ({ open, onClose }: TransitionsModalProps) => {
             />
             <StyledShortcut>{isMac() ? '⌘ + K' : 'Ctrl + K'}</StyledShortcut>
           </StyledModalHeader>
-          {isPublic && query.length === 0 ? null : (
-            <>
-              <StyledModalDivider />
-              <Command.List>
-                <StyledContent>
-                  {!isPublic ? (
-                    <Results
-                      query={query}
-                      loading={loading}
-                      setLoading={setLoading}
-                      setShowCreatePage={setShowCreatePage}
-                    />
-                  ) : (
-                    <PublishedResults
-                      query={query}
-                      loading={loading}
-                      setLoading={setLoading}
-                      onClose={onClose}
-                      setPublishWorkspaceName={setPublishWorkspaceName}
-                    />
-                  )}
-                </StyledContent>
+          <>
+            <StyledModalDivider
+              style={{ display: isPublicAndNoQuery() ? 'none' : '' }}
+            />
+            <Command.List>
+              <StyledContent
+                style={{ display: isPublicAndNoQuery() ? 'none' : '' }}
+              >
                 {!isPublic ? (
-                  showCreatePage ? (
-                    <>
-                      <StyledModalDivider />
-                      <StyledModalFooter>
-                        <Footer query={query} />
-                      </StyledModalFooter>
-                    </>
-                  ) : null
-                ) : null}
-              </Command.List>
-            </>
-          )}
+                  <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>
+                  </>
+                ) : (
+                  <></>
+                )
+              ) : (
+                <></>
+              )}
+            </Command.List>
+          </>
         </Command>
       </ModalWrapper>
     </Modal>
diff --git a/packages/app/src/components/quick-search/style.ts b/packages/app/src/components/quick-search/style.ts
index 492b7988c4..3c949aaaa9 100644
--- a/packages/app/src/components/quick-search/style.ts
+++ b/packages/app/src/components/quick-search/style.ts
@@ -9,6 +9,7 @@ export const StyledContent = styled('div')(({ theme }) => {
     marginBottom: '10px',
     ...displayFlex('center', 'flex-start'),
     color: theme.colors.popoverColor,
+    transition: 'all 0.15s',
     letterSpacing: '0.06em',
     '[cmdk-group-heading]': {
       margin: '5px 16px',
@@ -16,7 +17,6 @@ export const StyledContent = styled('div')(({ theme }) => {
       fontWeight: '500',
     },
     '[aria-selected="true"]': {
-      transition: 'background .15s, color .15s',
       borderRadius: '5px',
       color: theme.colors.primaryColor,
       backgroundColor: theme.colors.hoverBackground,
@@ -103,6 +103,7 @@ export const StyledModalDivider = styled('div')(({ theme }) => {
     margin: '6px 16px 6.5px 16px',
     position: 'relative',
     borderTop: `0.5px solid ${theme.colors.placeHolderColor}`,
+    transition: 'all 0.15s',
   };
 });
 

From e559ae3490c66debe669c3c43bb0c12181ca6df8 Mon Sep 17 00:00:00 2001
From: JimmFly <yangjinfei001@gmail.com>
Date: Tue, 7 Feb 2023 13:14:19 +0800
Subject: [PATCH 3/5] Disable quicksearch on 404 page

---
 packages/app/src/components/quick-search/index.tsx | 14 ++++++--------
 1 file changed, 6 insertions(+), 8 deletions(-)

diff --git a/packages/app/src/components/quick-search/index.tsx b/packages/app/src/components/quick-search/index.tsx
index f1d2c094b9..77be860bb7 100644
--- a/packages/app/src/components/quick-search/index.tsx
+++ b/packages/app/src/components/quick-search/index.tsx
@@ -39,6 +39,10 @@ export const QuickSearch = ({ open, onClose }: TransitionsModalProps) => {
   };
   // Add  ‘⌘+K’ shortcut keys as switches
   useEffect(() => {
+    if (router.pathname.startsWith('/404')) {
+      triggerQuickSearchModal(false);
+      return;
+    }
     const down = (e: KeyboardEvent) => {
       if ((e.key === 'k' && e.metaKey) || (e.key === 'k' && e.ctrlKey)) {
         const selection = window.getSelection();
@@ -47,10 +51,7 @@ export const QuickSearch = ({ open, onClose }: TransitionsModalProps) => {
           triggerQuickSearchModal(false);
           return;
         }
-        if (
-          selection?.isCollapsed &&
-          router.pathname.startsWith('/404') !== true
-        ) {
+        if (selection?.isCollapsed) {
           triggerQuickSearchModal(!open);
         }
       }
@@ -61,15 +62,12 @@ export const QuickSearch = ({ open, onClose }: TransitionsModalProps) => {
   }, [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);
     }
-  }, [handleClose, router]);
+  }, [router]);
 
   return (
     <Modal

From 3b8c4db8fb9ed5a12e6e712ea488ade998c9a451 Mon Sep 17 00:00:00 2001
From: JimmFly <yangjinfei001@gmail.com>
Date: Tue, 7 Feb 2023 13:21:42 +0800
Subject: [PATCH 4/5] test: add test case for 404 search

---
 tests/quick-search.spec.ts | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/tests/quick-search.spec.ts b/tests/quick-search.spec.ts
index 4526a7e447..999057c8b0 100644
--- a/tests/quick-search.spec.ts
+++ b/tests/quick-search.spec.ts
@@ -94,3 +94,15 @@ test.describe('Search and select', () => {
     await assertTitleTexts(page, 'test123456', true);
   });
 });
+test.describe('Disable search on 404 page', () => {
+  test('Navigate to the 404 page and try to open quick search', async ({
+    page,
+  }) => {
+    await page.goto('http://localhost:8080/404');
+    const notFoundTip = page.locator('[data-testid=notFound]');
+    await expect(notFoundTip).toBeVisible();
+    await openQuickSearchByShortcut(page);
+    const quickSearch = page.locator('[data-testid=quickSearch]');
+    await expect(quickSearch).toBeVisible({ visible: false });
+  });
+});

From 8e7e25829bcaae517ed8c4d40620abafa173068b Mon Sep 17 00:00:00 2001
From: JimmFly <yangjinfei001@gmail.com>
Date: Tue, 7 Feb 2023 13:56:58 +0800
Subject: [PATCH 5/5] test: add test case for quick search

---
 packages/app/src/components/quick-search/index.tsx | 1 +
 tests/quick-search.spec.ts                         | 8 ++++++++
 2 files changed, 9 insertions(+)

diff --git a/packages/app/src/components/quick-search/index.tsx b/packages/app/src/components/quick-search/index.tsx
index 77be860bb7..65cfe22c6b 100644
--- a/packages/app/src/components/quick-search/index.tsx
+++ b/packages/app/src/components/quick-search/index.tsx
@@ -130,6 +130,7 @@ export const QuickSearch = ({ open, onClose }: TransitionsModalProps) => {
                   setLoading={setLoading}
                   onClose={handleClose}
                   setPublishWorkspaceName={setPublishWorkspaceName}
+                  data-testid="publishedSearchResults"
                 />
               )}
             </StyledContent>
diff --git a/tests/quick-search.spec.ts b/tests/quick-search.spec.ts
index 999057c8b0..68e05acd41 100644
--- a/tests/quick-search.spec.ts
+++ b/tests/quick-search.spec.ts
@@ -106,3 +106,11 @@ test.describe('Disable search on 404 page', () => {
     await expect(quickSearch).toBeVisible({ visible: false });
   });
 });
+test.describe('Open quick search on the published page', () => {
+  test('Open quick search on local page', async ({ page }) => {
+    await newPage(page);
+    await openQuickSearchByShortcut(page);
+    const publishedSearchResults = page.locator('[publishedSearchResults]');
+    await expect(publishedSearchResults).toBeVisible({ visible: false });
+  });
+});