diff --git a/apps/web/src/components/blocksuite/workspace-header/index.tsx b/apps/web/src/components/blocksuite/workspace-header/index.tsx index 7d773c4f02..a8e5d44361 100644 --- a/apps/web/src/components/blocksuite/workspace-header/index.tsx +++ b/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 & HTMLAttributes > = (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 = ( -
-
- Click button - { - - - - } - or use - {isMac() ? ' ⌘ + K' : ' Ctrl + K'} to activate Quick Search. Then you - can search keywords or quickly open recently viewed pages. -
-
setShowQuickSearchTips(false)} - > - Got it -
-
- ); - return (
{children} @@ -107,22 +47,14 @@ export const WorkspaceHeader: FC< />
{title || 'Untitled'}
- -
- { - setOpenQuickSearch(true); - }} - /> -
- + +
+ { + setOpenQuickSearch(true); + }} + /> +
)} diff --git a/packages/component/src/ui/tooltip/index.tsx b/packages/component/src/ui/tooltip/index.tsx index 8f957abc2d..ed8326d5e7 100644 --- a/packages/component/src/ui/tooltip/index.tsx +++ b/packages/component/src/ui/tooltip/index.tsx @@ -1,2 +1 @@ -export * from './quick-search-tips'; export * from './tooltip'; diff --git a/packages/component/src/ui/tooltip/quick-search-tips.tsx b/packages/component/src/ui/tooltip/quick-search-tips.tsx deleted file mode 100644 index dd6c54872f..0000000000 --- a/packages/component/src/ui/tooltip/quick-search-tips.tsx +++ /dev/null @@ -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 -) => { - const { content, placement = 'top', children } = props; - return ( - - - {content} - - } - > - {children} - - ); -}; diff --git a/tests/parallels/quick-search.spec.ts b/tests/parallels/quick-search.spec.ts index 797d5c2b77..af6e17ba62 100644 --- a/tests/parallels/quick-search.spec.ts +++ b/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');