feat: refator header (#3685)

Co-authored-by: JimmFly <yangjinfei001@gmail.com>
Co-authored-by: Alex Yang <himself65@outlook.com>

packages/component/src/components/page-list/view/collection-list.tsx

@@ -1,3 +1,4 @@
+import { FlexWrapper } from '@affine/component';
 import { EditCollectionModel } from '@affine/component/page-list';
 import type { Collection, Filter } from '@affine/env/filter';
 import type { PropertiesMeta } from '@affine/env/filter';
@@ -6,13 +7,11 @@ import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { FilteredIcon, FolderIcon, ViewLayersIcon } from '@blocksuite/icons';
 import { Button } from '@toeverything/components/button';
 import clsx from 'clsx';
-import { useAtom } from 'jotai';
 import type { MouseEvent } from 'react';
 import { useCallback, useState } from 'react';
 
 import { MenuItem, Tooltip } from '../../..';
 import Menu from '../../../ui/menu/menu';
-import { appSidebarOpenAtom } from '../../app-sidebar';
 import { CreateFilterMenu } from '../filter/vars';
 import type { useCollectionManager } from '../use-collection-manager';
 import * as styles from './collection-list.css';
@@ -106,7 +105,6 @@ export const CollectionList = ({
   propertiesMeta: PropertiesMeta;
 }) => {
   const t = useAFFiNEI18N();
-  const [open] = useAtom(appSidebarOpenAtom);
   const [collection, setCollection] = useState<Collection>();
   const onChange = useCallback(
     (filterList: Filter[]) => {
@@ -133,15 +131,7 @@ export const CollectionList = ({
     [closeUpdateCollectionModal, setting]
   );
   return (
-    <div
-      className={clsx({
-        [styles.filterButtonCollapse]: !open,
-      })}
-      style={{
-        display: 'flex',
-        alignItems: 'center',
-      }}
-    >
+    <FlexWrapper alignItems="center">
       {setting.savedCollections.length > 0 && (
         <Menu
           trigger="click"
@@ -176,8 +166,8 @@ export const CollectionList = ({
           }
         >
           <Button
-            className={clsx(styles.viewButton)}
             data-testid="collection-select"
+            style={{ marginRight: '20px' }}
           >
             <Tooltip
               content={setting.currentCollection.name}
@@ -199,11 +189,7 @@ export const CollectionList = ({
           />
         }
       >
-        <Button
-          icon={<FilteredIcon />}
-          className={clsx(styles.filterButton)}
-          data-testid="create-first-filter"
-        >
+        <Button icon={<FilteredIcon />} data-testid="create-first-filter">
           {t['com.affine.filter']()}
         </Button>
       </Menu>
@@ -215,6 +201,6 @@ export const CollectionList = ({
         onClose={closeUpdateCollectionModal}
         onConfirm={onConfirm}
       ></EditCollectionModel>
-    </div>
+    </FlexWrapper>
   );
 };