feat: modify header

packages/app/src/components/header/page-header.tsx

@@ -1,7 +1,15 @@
 import React, { useEffect, useState } from 'react';
-import { StyledTitle, StyledTitleWrapper } from './styles';
+import {
+  StyledSearchArrowWrapper,
+  StyledSwitchWrapper,
+  StyledTitle,
+  StyledTitleWrapper,
+} from './styles';
+import { IconButton } from '@/ui/button';
+import { Content } from '@/ui/layout';
 import { useEditor } from '@/providers/editor-provider';
 import EditorModeSwitch from '@/components/editor-mode-switch';
+import { MiddleIconArrowDownSmallIcon } from '@blocksuite/icons';
 
 import Header from './header';
 
@@ -30,13 +38,22 @@ export const PageHeader = () => {
           setIsHover(false);
         }}
       >
-        <EditorModeSwitch
-          isHover={isHover}
-          style={{
-            marginRight: '12px',
-          }}
-        />
-        <StyledTitleWrapper>{title}</StyledTitleWrapper>
+        <StyledTitleWrapper>
+          <StyledSwitchWrapper>
+            <EditorModeSwitch
+              isHover={isHover}
+              style={{
+                marginRight: '12px',
+              }}
+            />
+          </StyledSwitchWrapper>
+          <Content ellipsis={true}>{title}</Content>
+          <StyledSearchArrowWrapper>
+            <IconButton>
+              <MiddleIconArrowDownSmallIcon />
+            </IconButton>
+          </StyledSearchArrowWrapper>
+        </StyledTitleWrapper>
       </StyledTitle>
     </Header>
   );

packages/app/src/components/header/styles.ts

@@ -40,10 +40,9 @@ export const StyledTitle = styled('div')(({ theme }) => ({
 
 export const StyledTitleWrapper = styled('div')({
   maxWidth: '720px',
-  overflow: 'hidden',
-  textOverflow: 'ellipsis',
-  whiteSpace: 'nowrap',
+  height: '100%',
   position: 'relative',
+  ...displayFlex('center', 'center'),
 });
 
 export const StyledHeaderRightSide = styled('div')({
@@ -89,3 +88,25 @@ export const StyledCloseButton = styled.div(({ theme }) => {
     },
   };
 });
+
+export const StyledSwitchWrapper = styled.div(() => {
+  return {
+    position: 'absolute',
+    right: '100%',
+    top: 0,
+    bottom: 0,
+    margin: 'auto',
+    ...displayFlex('center', 'center'),
+  };
+});
+
+export const StyledSearchArrowWrapper = styled.div(() => {
+  return {
+    position: 'absolute',
+    left: 'calc(100% + 4px)',
+    top: 0,
+    bottom: 0,
+    margin: 'auto',
+    ...displayFlex('center', 'center'),
+  };
+});