fix: a series of bugs

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

@@ -5,25 +5,21 @@ import {
   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 { ArrowDownIcon } from '@blocksuite/icons';
-import { useModal } from '@/providers/global-modal-provider';
-
+import QuickSearchButton from './quick-search-button';
 import Header from './header';
 
-export const PageHeader = () => {
+export const EditorHeader = () => {
   const [title, setTitle] = useState('');
   const [isHover, setIsHover] = useState(false);
 
-  const { editor, onPropsUpdated } = useEditor();
-  const { triggerQuickSearchModal } = useModal();
+  const { editor, onPropsUpdated, getPageMeta } = useEditor();
 
   useEffect(() => {
     onPropsUpdated(editor => {
-      setTitle(editor.model.title);
+      setTitle(editor.model.title || 'Untitled');
     });
   }, [onPropsUpdated]);
 
@@ -31,14 +27,20 @@ export const PageHeader = () => {
     setTitle(editor?.model.title || 'Untitled');
   }, [editor]);
 
+  const pageMeta = getPageMeta();
+
   return (
     <Header>
       {title && (
         <StyledTitle
           onMouseEnter={() => {
+            if (pageMeta?.trash) return;
+
             setIsHover(true);
           }}
           onMouseLeave={() => {
+            if (pageMeta?.trash) return;
+
             setIsHover(false);
           }}
         >
@@ -53,13 +55,7 @@ export const PageHeader = () => {
             </StyledSwitchWrapper>
             <Content ellipsis={true}>{title}</Content>
             <StyledSearchArrowWrapper>
-              <IconButton
-                onClick={() => {
-                  triggerQuickSearchModal();
-                }}
-              >
-                <ArrowDownIcon />
-              </IconButton>
+              <QuickSearchButton />
             </StyledSearchArrowWrapper>
           </StyledTitleWrapper>
         </StyledTitle>
@@ -68,4 +64,4 @@ export const PageHeader = () => {
   );
 };
 
-export default PageHeader;
+export default EditorHeader;

packages/app/src/components/header/index.tsx

@@ -1,3 +1,3 @@
 export * from './header';
-export * from './page-header';
-export { StyledTitle as HeaderWrapper } from './styles';
+export * from './editor-header';
+export * from './page-list-header';

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

@@ -0,0 +1,21 @@
+import { PropsWithChildren, ReactNode } from 'react';
+import Header from './header';
+import { StyledPageListTittleWrapper } from './styles';
+import QuickSearchButton from './quick-search-button';
+
+export type PageListHeaderProps = PropsWithChildren<{
+  icon?: ReactNode;
+}>;
+export const PageListHeader = ({ icon, children }: PageListHeaderProps) => {
+  return (
+    <Header>
+      <StyledPageListTittleWrapper>
+        {icon}
+        {children}
+        <QuickSearchButton style={{ marginLeft: '5px' }} />
+      </StyledPageListTittleWrapper>
+    </Header>
+  );
+};
+
+export default PageListHeader;

packages/app/src/components/header/quick-search-button.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { IconButton, IconButtonProps } from '@/ui/button';
+import { ArrowDownIcon } from '@blocksuite/icons';
+import { useModal } from '@/providers/global-modal-provider';
+
+export const QuickSearchButton = ({
+  onClick,
+  ...props
+}: Omit<IconButtonProps, 'children'>) => {
+  const { triggerQuickSearchModal } = useModal();
+
+  return (
+    <IconButton
+      {...props}
+      onClick={e => {
+        onClick?.(e);
+        triggerQuickSearchModal();
+      }}
+    >
+      <ArrowDownIcon />
+    </IconButton>
+  );
+};
+
+export default QuickSearchButton;

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

@@ -110,3 +110,14 @@ export const StyledSearchArrowWrapper = styled.div(() => {
     ...displayFlex('center', 'center'),
   };
 });
+
+export const StyledPageListTittleWrapper = styled(StyledTitle)(({ theme }) => {
+  return {
+    fontSize: theme.font.sm,
+    color: theme.colors.textColor,
+    '>svg': {
+      fontSize: '20px',
+      marginRight: '12px',
+    },
+  };
+});