chore: update filter style (#2617)

Co-authored-by: Himself65 <himself65@outlook.com>

apps/web/src/components/blocksuite/block-suite-page-list/index.tsx

@@ -110,7 +110,7 @@ export const BlockSuitePageList: React.FC<BlockSuitePageListProps> = ({
             return true;
           }
           return filterByFilterList(view.filterList, {
-            Favorite: !!pageMeta.favorite,
+            'Is Favourited': !!pageMeta.favorite,
             Created: pageMeta.createDate,
             Updated: pageMeta.updatedDate ?? pageMeta.createDate,
           });

apps/web/src/components/blocksuite/workspace-header/styles.css.ts

@@ -149,7 +149,24 @@ export const pageListTitleWrapper = style({
   justifyContent: 'center',
   alignItems: 'center',
 });
-
+export const allPageListTitleWrapper = style({
+  fontSize: 'var(--affine-font-base)',
+  color: 'var(--affine-text-primary-color)',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  '::after': {
+    content: '""',
+    display: 'block',
+    width: '100%',
+    height: '1px',
+    background: 'var(--affine-border-color)',
+    position: 'absolute',
+    bottom: 0,
+    left: 0,
+    margin: '0 1px',
+  },
+});
 export const pageListTitleIcon = style({
   fontSize: '20px',
   height: '1em',

apps/web/src/components/filter-container.css.ts

@@ -0,0 +1,18 @@
+import { style } from '@vanilla-extract/css';
+
+export const filterContainerStyle = style({
+  padding: '12px',
+  display: 'flex',
+  position: 'relative',
+  '::after': {
+    content: '""',
+    display: 'block',
+    width: '100%',
+    height: '1px',
+    background: 'var(--affine-border-color)',
+    position: 'absolute',
+    bottom: 0,
+    left: 0,
+    margin: '0 1px',
+  },
+});

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

@@ -1,11 +1,11 @@
 import { RadioButton, RadioButtonGroup } from '@affine/component';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { useSetAtom } from 'jotai';
-import { useAtom } from "jotai";
+import { useAtom } from 'jotai';
 import type { ReactNode } from 'react';
 import type React from 'react';
 
-import { openQuickSearchModalAtom, pageModeSelectAtom } from "../../../atoms";
+import { openQuickSearchModalAtom, pageModeSelectAtom } from '../../../atoms';
 import type { HeaderProps } from '../../blocksuite/workspace-header/header';
 import { Header } from '../../blocksuite/workspace-header/header';
 import * as styles from '../../blocksuite/workspace-header/styles.css';
@@ -49,7 +49,7 @@ export const WorkspaceModeFilterTab = ({ ...props }: WorkspaceTitleProps) => {
   };
   return (
     <Header {...props}>
-      <div className={styles.pageListTitleWrapper}>
+      <div className={styles.allPageListTitleWrapper}>
         <RadioButtonGroup
           defaultValue={value}
           onValueChange={handleValueChange}

apps/web/src/components/workspace-header.tsx

@@ -15,6 +15,7 @@ import type { ReactElement } from 'react';
 import { NIL } from 'uuid';
 
 import { BlockSuiteEditorHeader } from './blocksuite/workspace-header';
+import { filterContainerStyle } from './filter-container.css';
 import { WorkspaceModeFilterTab, WorkspaceTitle } from './pure/workspace-title';
 
 export function WorkspaceHeader({
@@ -25,23 +26,21 @@ export function WorkspaceHeader({
   const t = useAFFiNEI18N();
   if ('subPath' in currentEntry) {
     if (currentEntry.subPath === WorkspaceSubPath.ALL) {
-      const leftSlot = config.enableAllPageFilter && (
-        <ViewList setting={setting}></ViewList>
-      );
-      const filterContainer = config.enableAllPageFilter &&
-        setting.currentView.filterList.length > 0 && (
-          <div style={{ padding: 12, display: 'flex' }}>
-            <div style={{ flex: 1 }}>
-              <FilterList
-                value={setting.currentView.filterList}
-                onChange={filterList => {
-                  setting.setCurrentView(view => ({
-                    ...view,
-                    filterList,
-                  }));
-                }}
-              />
-            </div>
+      const leftSlot = <ViewList setting={setting}></ViewList>;
+      const filterContainer = setting.currentView.filterList.length > 0 && (
+        <div className={filterContainerStyle}>
+          <div style={{ flex: 1 }}>
+            <FilterList
+              value={setting.currentView.filterList}
+              onChange={filterList => {
+                setting.setCurrentView(view => ({
+                  ...view,
+                  filterList,
+                }));
+              }}
+            />
+          </div>
+          {config.enableAllPageFilter && (
             <div>
               {setting.currentView.id !== NIL ||
               (setting.currentView.id === NIL &&
@@ -56,8 +55,9 @@ export function WorkspaceHeader({
                 </Button>
               )}
             </div>
-          </div>
-        );
+          )}
+        </div>
+      );
       return (
         <>
           <WorkspaceModeFilterTab