feat: add novice guide for quick search arrow button (#1493)

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

@@ -1,9 +1,12 @@
-import { Content } from '@affine/component';
+import { Content, QuickSearchTips } from '@affine/component';
+import { getEnvironment } from '@affine/env';
+import { ArrowDownSmallIcon } from '@blocksuite/icons';
 import { assertExists } from '@blocksuite/store';
 import { useSetAtom } from 'jotai';
 import React from 'react';
 
 import { openQuickSearchModalAtom } from '../../../atoms';
+import { useOpenTips } from '../../../hooks/affine/use-is-first-load';
 import { usePageMeta } from '../../../hooks/use-page-meta';
 import { BlockSuiteWorkspace } from '../../../shared';
 import { PageNotFoundError } from '../../affine/affine-error-eoundary';
@@ -11,6 +14,8 @@ import { EditorModeSwitch } from './editor-mode-switch';
 import Header from './header';
 import { QuickSearchButton } from './quick-search-button';
 import {
+  StyledQuickSearchTipButton,
+  StyledQuickSearchTipContent,
   StyledSearchArrowWrapper,
   StyledSwitchWrapper,
   StyledTitle,
@@ -43,6 +48,39 @@ export const BlockSuiteEditorHeader: React.FC<BlockSuiteEditorHeaderProps> = ({
   assertExists(pageMeta);
   const title = pageMeta.title;
   const { trash: isTrash } = pageMeta;
+  const [openTips, setOpenTips] = useOpenTips();
+  const isMac = () => {
+    const env = getEnvironment();
+    return env.isBrowser && env.isMacOs;
+  };
+  const tipsContent = () => {
+    return (
+      <StyledQuickSearchTipContent>
+        <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>
+        <StyledQuickSearchTipButton
+          data-testid="quick-search-got-it"
+          onClick={() => setOpenTips(false)}
+        >
+          Got it
+        </StyledQuickSearchTipButton>
+      </StyledQuickSearchTipContent>
+    );
+  };
   return (
     <Header
       rightItems={
@@ -68,13 +106,21 @@ export const BlockSuiteEditorHeader: React.FC<BlockSuiteEditorHeaderProps> = ({
               />
             </StyledSwitchWrapper>
             <Content ellipsis={true}>{title || 'Untitled'}</Content>
-            <StyledSearchArrowWrapper>
-              <QuickSearchButton
-                onClick={() => {
-                  setOpenQuickSearch(true);
-                }}
-              />
-            </StyledSearchArrowWrapper>
+            <QuickSearchTips
+              data-testid="quick-search-tips"
+              content={tipsContent()}
+              placement="bottom"
+              open={openTips}
+              offset={[0, -5]}
+            >
+              <StyledSearchArrowWrapper>
+                <QuickSearchButton
+                  onClick={() => {
+                    setOpenQuickSearch(true);
+                  }}
+                />
+              </StyledSearchArrowWrapper>
+            </QuickSearchTips>
           </StyledTitleWrapper>
         </StyledTitle>
       )}

apps/web/src/components/blocksuite/header/quick-search-button/index.tsx

@@ -1,7 +1,6 @@
 import { IconButton, IconButtonProps } from '@affine/component';
 import { styled } from '@affine/component';
 import { ArrowDownSmallIcon } from '@blocksuite/icons';
-import React from 'react';
 
 const StyledIconButtonWithAnimate = styled(IconButton)(({ theme }) => {
   return {

apps/web/src/components/blocksuite/header/styles.ts

@@ -113,3 +113,24 @@ export const StyledPageListTittleWrapper = styled(StyledTitle)(({ theme }) => {
     },
   };
 });
+export const StyledQuickSearchTipButton = styled('div')(({ theme }) => {
+  return {
+    ...displayFlex('center', 'center'),
+    marginTop: '12px',
+    color: '#FFFFFF',
+    width: '60px',
+    height: ' 26px',
+    fontSize: theme.font.sm,
+    lineHeight: '22px',
+    background: theme.colors.primaryColor,
+    borderRadius: '8px',
+    textAlign: 'center',
+    cursor: 'pointer',
+  };
+});
+export const StyledQuickSearchTipContent = styled('div')(({ theme }) => {
+  return {
+    ...displayFlex('center', 'flex-end'),
+    flexDirection: 'column',
+  };
+});