feat: add page mode filter (#2601)

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

apps/web/src/atoms/index.ts

@@ -139,3 +139,6 @@ export const workspaceRecentViresWriteAtom = atom<null, [string, View], View[]>(
     return record[id];
   }
 );
+
+export type PageModeOption = 'all' | 'page' | 'edgeless';
+export const pageModeSelectAtom = atom<PageModeOption>('all');

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

@@ -13,9 +13,11 @@ import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { EdgelessIcon, PageIcon } from '@blocksuite/icons';
 import type { PageMeta } from '@blocksuite/store';
 import { useBlockSuitePageMeta } from '@toeverything/hooks/use-block-suite-page-meta';
+import { useAtom } from 'jotai';
 import type React from 'react';
 import { useMemo } from 'react';
 
+import { pageModeSelectAtom } from '../../../atoms';
 import { useBlockSuiteMetaHelper } from '../../../hooks/affine/use-block-suite-meta-helper';
 import type { BlockSuiteWorkspace } from '../../../shared';
 import { toast } from '../../../utils';
@@ -80,25 +82,40 @@ export const BlockSuitePageList: React.FC<BlockSuitePageListProps> = ({
     permanentlyDeletePage,
     cancelPublicPage,
   } = useBlockSuiteMetaHelper(blockSuiteWorkspace);
+  const [filterMode] = useAtom(pageModeSelectAtom);
   const { createPage, createEdgeless, importFile, isPreferredEdgeless } =
     usePageHelper(blockSuiteWorkspace);
   const t = useAFFiNEI18N();
   const list = useMemo(
     () =>
-      pageMetas.filter(pageMeta => {
+      pageMetas
-        if (!filter[listType](pageMeta, pageMetas)) {
+        .filter(pageMeta => {
-          return false;
+          if (filterMode === 'all') {
-        }
+            return true;
-        if (!view) {
+          }
+          if (filterMode === 'edgeless') {
+            return isPreferredEdgeless(pageMeta.id);
+          }
+          if (filterMode === 'page') {
+            return !isPreferredEdgeless(pageMeta.id);
+          }
+          console.error('unknown filter mode', pageMeta, filterMode);
           return true;
-        }
+        })
-        return filterByFilterList(view.filterList, {
+        .filter(pageMeta => {
-          Favorite: !!pageMeta.favorite,
+          if (!filter[listType](pageMeta, pageMetas)) {
-          Created: pageMeta.createDate,
+            return false;
-          Updated: pageMeta.updatedDate ?? pageMeta.createDate,
+          }
-        });
+          if (!view) {
-      }),
+            return true;
-    [pageMetas, listType, view]
+          }
+          return filterByFilterList(view.filterList, {
+            Favorite: !!pageMeta.favorite,
+            Created: pageMeta.createDate,
+            Updated: pageMeta.updatedDate ?? pageMeta.createDate,
+          });
+        }),
+    [pageMetas, filterMode, isPreferredEdgeless, listType, view]
   );
   if (list.length === 0) {
     return <PageListEmpty listType={listType} />;

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>
+  );
+};

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

@@ -9,19 +9,13 @@ import { config } from '@affine/env';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import type { WorkspaceHeaderProps } from '@affine/workspace/type';
 import { WorkspaceFlavour, WorkspaceSubPath } from '@affine/workspace/type';
-import {
+import { SettingsIcon } from '@blocksuite/icons';
-  DeleteTemporarilyIcon,
-  FolderIcon,
-  SettingsIcon,
-  ShareIcon,
-} from '@blocksuite/icons';
 import { RESET } from 'jotai/utils';
 import type { ReactElement } from 'react';
-import React from 'react';
 import { NIL } from 'uuid';
 
 import { BlockSuiteEditorHeader } from './blocksuite/workspace-header';
-import { WorkspaceTitle } from './pure/workspace-title';
+import { WorkspaceModeFilterTab, WorkspaceTitle } from './pure/workspace-title';
 
 export function WorkspaceHeader({
   currentWorkspace,
@@ -64,18 +58,14 @@ export function WorkspaceHeader({
             </div>
           </div>
         );
-
       return (
         <>
-          <WorkspaceTitle
+          <WorkspaceModeFilterTab
             workspace={currentWorkspace}
             currentPage={null}
             isPublic={false}
-            icon={<FolderIcon />}
             leftSlot={leftSlot}
-          >
+          />
-            {t['All pages']()}
-          </WorkspaceTitle>
           {filterContainer}
         </>
       );
@@ -92,25 +82,19 @@ export function WorkspaceHeader({
       );
     } else if (currentEntry.subPath === WorkspaceSubPath.SHARED) {
       return (
-        <WorkspaceTitle
+        <WorkspaceModeFilterTab
           workspace={currentWorkspace}
           currentPage={null}
           isPublic={false}
-          icon={<ShareIcon />}
+        />
-        >
-          {t['Shared Pages']()}
-        </WorkspaceTitle>
       );
     } else if (currentEntry.subPath === WorkspaceSubPath.TRASH) {
       return (
-        <WorkspaceTitle
+        <WorkspaceModeFilterTab
           workspace={currentWorkspace}
           currentPage={null}
           isPublic={false}
-          icon={<DeleteTemporarilyIcon />}
+        />
-        >
-          {t['Trash']()}
-        </WorkspaceTitle>
       );
     }
   } else if ('pageId' in currentEntry) {

packages/component/src/ui/button/index.ts

@@ -1,3 +1,4 @@
 export * from './button';
 export * from './icon-button';
+export * from './radio';
 export * from './text-button';

packages/component/src/ui/button/styles.css.ts

@@ -91,4 +91,6 @@ export const radioButtonGroup = style({
   background: 'var(--affine-hover-color)',
   borderRadius: '10px',
   padding: '2px',
+  // @ts-expect-error - fix electron drag
+  WebkitAppRegion: 'no-drag',
 });