feat: add page mode filter (#2601)

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

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

@@ -1,8 +1,11 @@
+import { RadioButton, RadioButtonGroup } from '@affine/component';
+import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { useSetAtom } from 'jotai';
+import { useAtom } from "jotai";
 import type { ReactNode } from 'react';
 import type React from 'react';
 
-import { openQuickSearchModalAtom } 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';
@@ -34,3 +37,30 @@ export const WorkspaceTitle: React.FC<WorkspaceTitleProps> = ({
     </Header>
   );
 };
+
+export const WorkspaceModeFilterTab = ({ ...props }: WorkspaceTitleProps) => {
+  const t = useAFFiNEI18N();
+  const [value, setMode] = useAtom(pageModeSelectAtom);
+  const handleValueChange = (value: string) => {
+    if (value !== 'all' && value !== 'page' && value !== 'edgeless') {
+      throw new Error('Invalid value for page mode option');
+    }
+    setMode(value);
+  };
+  return (
+    <Header {...props}>
+      <div className={styles.pageListTitleWrapper}>
+        <RadioButtonGroup
+          defaultValue={value}
+          onValueChange={handleValueChange}
+        >
+          <RadioButton value="all" style={{ textTransform: 'capitalize' }}>
+            {t['all']()}
+          </RadioButton>
+          <RadioButton value="page">{t['Page']()}</RadioButton>
+          <RadioButton value="edgeless">{t['Edgeless']()}</RadioButton>
+        </RadioButtonGroup>
+      </div>
+    </Header>
+  );
+};