fix: add back quick search button to page title (#1495)

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

@@ -0,0 +1,37 @@
+import { IconButton, IconButtonProps } from '@affine/component';
+import { styled } from '@affine/component';
+import { ArrowDownSmallIcon } from '@blocksuite/icons';
+
+const StyledIconButtonWithAnimate = styled(IconButton)(({ theme }) => {
+  return {
+    svg: {
+      transition: 'transform 0.15s ease-in-out',
+    },
+    ':hover': {
+      svg: {
+        transform: 'translateY(3px)',
+      },
+      '::after': {
+        background: theme.colors.pageBackground,
+      },
+    },
+  };
+});
+
+// fixme(himself65): need to refactor
+export const QuickSearchButton = ({
+  onClick,
+  ...props
+}: Omit<IconButtonProps, 'children'>) => {
+  return (
+    <StyledIconButtonWithAnimate
+      data-testid="header-quickSearchButton"
+      {...props}
+      onClick={e => {
+        onClick?.(e);
+      }}
+    >
+      <ArrowDownSmallIcon />
+    </StyledIconButtonWithAnimate>
+  );
+};

apps/web/src/components/pure/workspace-title/index.tsx

@@ -1,7 +1,10 @@
+import { useSetAtom } from 'jotai';
 import React, { ReactNode } from 'react';
 
+import { openQuickSearchModalAtom } from '../../../atoms';
 import Header from '../../blocksuite/header/header';
 import { StyledPageListTittleWrapper } from '../../blocksuite/header/styles';
+import { QuickSearchButton } from '../quick-search-button';
 
 export type WorkspaceTitleProps = React.PropsWithChildren<{
   icon?: ReactNode;
@@ -11,13 +14,17 @@ export const WorkspaceTitle: React.FC<WorkspaceTitleProps> = ({
   icon,
   children,
 }) => {
+  const setOpenQuickSearch = useSetAtom(openQuickSearchModalAtom);
   return (
     <Header>
       <StyledPageListTittleWrapper>
         {icon}
         {children}
-        {/* fixme(himself65): todo *;/}
-        {/*<QuickSearchButton />*/}
+        <QuickSearchButton
+          onClick={() => {
+            setOpenQuickSearch(true);
+          }}
+        />
       </StyledPageListTittleWrapper>
     </Header>
   );