chore: remove quick search tips (#2375)

apps/web/src/components/blocksuite/workspace-header/index.tsx

@@ -1,20 +1,15 @@
-import type { PopperProps } from '@affine/component';
-import { QuickSearchTips } from '@affine/component';
-import { getEnvironment } from '@affine/env';
-import { ArrowDownSmallIcon } from '@blocksuite/icons';
 import { assertExists } from '@blocksuite/store';
 import { useBlockSuitePageMeta } from '@toeverything/hooks/use-block-suite-page-meta';
-import { useAtom, useSetAtom } from 'jotai';
+import { useSetAtom } from 'jotai';
 import type {
   FC,
   HTMLAttributes,
   PropsWithChildren,
   ReactElement,
 } from 'react';
-import { useEffect, useRef } from 'react';
+import { useRef } from 'react';
 
 import { openQuickSearchModalAtom } from '../../../atoms';
-import { guideQuickSearchTipsAtom } from '../../../atoms/guide';
 import { QuickSearchButton } from '../../pure/quick-search-button';
 import { EditorModeSwitch } from './editor-mode-switch';
 import type { BaseHeaderProps } from './header';
@@ -23,11 +18,6 @@ import * as styles from './styles.css';
 
 export type WorkspaceHeaderProps = BaseHeaderProps;
 
-const isMac = () => {
-  const env = getEnvironment();
-  return env.isBrowser && env.isMacOs;
-};
-
 export const WorkspaceHeader: FC<
   PropsWithChildren<WorkspaceHeaderProps> & HTMLAttributes<HTMLDivElement>
 > = (props): ReactElement => {
@@ -41,56 +31,6 @@ export const WorkspaceHeader: FC<
   assertExists(pageMeta);
   const title = pageMeta.title;
 
-  const popperRef: PopperProps['popperRef'] = useRef(null);
-
-  const [showQuickSearchTips, setShowQuickSearchTips] = useAtom(
-    guideQuickSearchTipsAtom
-  );
-
-  useEffect(() => {
-    if (!headerRef.current) {
-      return;
-    }
-    const resizeObserver = new ResizeObserver(() => {
-      if (showQuickSearchTips || !popperRef.current) {
-        return;
-      }
-      popperRef.current.update();
-    });
-    resizeObserver.observe(headerRef.current);
-    return () => {
-      resizeObserver.disconnect();
-    };
-  }, [showQuickSearchTips]);
-
-  const TipsContent = (
-    <div className={styles.quickSearchTipContent}>
-      <div>
-        Click button
-        {
-          <span
-            style={{
-              fontSize: '24px',
-              verticalAlign: 'middle',
-            }}
-          >
-            <ArrowDownSmallIcon />
-          </span>
-        }
-        or use
-        {isMac() ? ' ⌘ + K' : ' Ctrl + K'} to activate Quick Search. Then you
-        can search keywords or quickly open recently viewed pages.
-      </div>
-      <div
-        className={styles.quickSearchTipButton}
-        data-testid="quick-search-got-it"
-        onClick={() => setShowQuickSearchTips(false)}
-      >
-        Got it
-      </div>
-    </div>
-  );
-
   return (
     <Header ref={headerRef} {...props}>
       {children}
@@ -107,22 +47,14 @@ export const WorkspaceHeader: FC<
               />
             </div>
             <div className={styles.title}>{title || 'Untitled'}</div>
-            <QuickSearchTips
+
-              data-testid="quick-search-tips"
+            <div className={styles.searchArrowWrapper}>
-              content={TipsContent}
+              <QuickSearchButton
-              placement="bottom"
+                onClick={() => {
-              popperRef={popperRef}
+                  setOpenQuickSearch(true);
-              open={showQuickSearchTips}
+                }}
-              offset={[0, -5]}
+              />
-            >
+            </div>
-              <div className={styles.searchArrowWrapper}>
-                <QuickSearchButton
-                  onClick={() => {
-                    setOpenQuickSearch(true);
-                  }}
-                />
-              </div>
-            </QuickSearchTips>
           </div>
         </div>
       )}

packages/component/src/ui/tooltip/index.tsx

@@ -1,2 +1 @@
-export * from './quick-search-tips';
 export * from './tooltip';

packages/component/src/ui/tooltip/quick-search-tips.tsx

@@ -1,74 +0,0 @@
-import type { TooltipProps } from '@mui/material';
-
-import { css, displayFlex, styled } from '../../styles';
-import { Popper, type PopperProps } from '../popper';
-import StyledPopperContainer from '../shared/container';
-const StyledTooltip = styled(StyledPopperContainer)(() => {
-  return {
-    width: '390px',
-    minHeight: '92px',
-    padding: '12px',
-    backgroundColor: 'var(--affine-tertiary-color)',
-    transform: 'all 0.15s',
-    color: 'var(--affine-text-emphasis-color)',
-    ...displayFlex('center', 'center'),
-    border: `1px solid var(--affine-text-emphasis-color)`,
-    fontSize: 'var(--affine-font-sm)',
-    lineHeight: '22px',
-    fontWeight: 500,
-  };
-});
-
-const StyledCircleContainer = styled('div')(() => {
-  return css`
-    position: relative;
-    content: '';
-    top: 50%;
-    left: 50%;
-    transform: translate(0%, 0%);
-    width: 0;
-    height: 40px;
-    border-right: 1px solid var(--affine-text-emphasis-color);
-    &::after {
-      content: '';
-      position: absolute;
-      top: 0;
-      left: 50%;
-      transform: translate(-50%, -100%);
-      width: 12px;
-      height: 12px;
-      border-radius: 50%;
-      border: 1px solid var(--affine-text-emphasis-color);
-    }
-    &::before {
-      content: '';
-      position: absolute;
-      top: 0;
-      left: 50%;
-      transform: translate(-50%, -150%);
-      width: 6px;
-      height: 6px;
-      border-radius: 50%;
-      background-color: var(--affine-text-emphasis-color);
-      border: 1px solid var(--affine-text-emphasis-color);
-  `;
-});
-
-export const QuickSearchTips = (
-  props: PopperProps & Omit<TooltipProps, 'title' | 'content'>
-) => {
-  const { content, placement = 'top', children } = props;
-  return (
-    <Popper
-      {...props}
-      content={
-        <div>
-          <StyledCircleContainer />
-          <StyledTooltip placement={placement}>{content}</StyledTooltip>
-        </div>
-      }
-    >
-      {children}
-    </Popper>
-  );
-};

tests/parallels/quick-search.spec.ts

@@ -171,41 +171,6 @@ test('Focus title after creating a new page', async ({ page }) => {
   await titleIsFocused(page);
 });
 
-test('When opening the website for the first time, the first folding sidebar will appear novice guide', async ({
-  page,
-}) => {
-  await openHomePage(page);
-  await waitMarkdownImported(page);
-  const quickSearchTips = page.locator('[data-testid=quick-search-tips]');
-  await expect(quickSearchTips).not.toBeVisible();
-  await page.getByTestId('app-sidebar-arrow-button-collapse').click();
-  const sliderBarArea = page.getByTestId('sliderBar-inner');
-  await expect(sliderBarArea).not.toBeInViewport();
-  await expect(quickSearchTips).toBeVisible();
-  await page.locator('[data-testid=quick-search-got-it]').click();
-  await expect(quickSearchTips).not.toBeVisible();
-});
-
-test('After appearing once, it will not appear a second time', async ({
-  page,
-}) => {
-  await openHomePage(page);
-  await waitMarkdownImported(page);
-  const quickSearchTips = page.locator('[data-testid=quick-search-tips]');
-  await expect(quickSearchTips).not.toBeVisible();
-  await page.getByTestId('app-sidebar-arrow-button-collapse').click();
-  const sliderBarArea = page.getByTestId('sliderBar');
-  await expect(sliderBarArea).not.toBeVisible();
-  await expect(quickSearchTips).toBeVisible();
-  await page.locator('[data-testid=quick-search-got-it]').click();
-  await expect(quickSearchTips).not.toBeVisible();
-  await page.reload();
-  await page.waitForSelector('v-line');
-  await page.getByTestId('sliderBar-arrowButton-expand').click();
-  await page.getByTestId('app-sidebar-arrow-button-collapse').click();
-  await expect(quickSearchTips).not.toBeVisible();
-});
-
 test.skip('Show navigation path if page is a subpage', async ({ page }) => {
   const rootPinboardMeta = await initHomePageWithPinboard(page);
   await createPinboardPage(page, rootPinboardMeta?.id ?? '', 'test1');