From 20665575d0f68fd3cfd173a18c011d7dce818704 Mon Sep 17 00:00:00 2001
From: EYHN <cneyhn@gmail.com>
Date: Tue, 20 May 2025 17:10:20 +0900
Subject: [PATCH] feat(core): add new doc button in new all docs header
 (#12390)

---
 .../explorer/display-menu/index.tsx           |  7 +--
 .../workspace/all-page/all-page-header.css.ts |  6 ++
 .../workspace/all-page/all-page-header.tsx    | 61 +++++++++++++++++++
 3 files changed, 68 insertions(+), 6 deletions(-)

diff --git a/packages/frontend/core/src/components/explorer/display-menu/index.tsx b/packages/frontend/core/src/components/explorer/display-menu/index.tsx
index 86df968004..3f896a7e1f 100644
--- a/packages/frontend/core/src/components/explorer/display-menu/index.tsx
+++ b/packages/frontend/core/src/components/explorer/display-menu/index.tsx
@@ -10,7 +10,6 @@ import type {
   OrderByParams,
 } from '@affine/core/modules/collection-rules/types';
 import { useI18n } from '@affine/i18n';
-import { ArrowDownSmallIcon } from '@blocksuite/icons/rc';
 import type React from 'react';
 import { useCallback } from 'react';
 
@@ -122,11 +121,7 @@ export const ExplorerDisplayMenuButton = ({
       }
       {...menuProps}
     >
-      <Button
-        className={className}
-        style={style}
-        suffix={<ArrowDownSmallIcon />}
-      >
+      <Button className={className} style={style}>
         {t['com.affine.explorer.display-menu.button']()}
       </Button>
     </Menu>
diff --git a/packages/frontend/core/src/desktop/pages/workspace/all-page/all-page-header.css.ts b/packages/frontend/core/src/desktop/pages/workspace/all-page/all-page-header.css.ts
index 8a946fb511..481a1ad9f7 100644
--- a/packages/frontend/core/src/desktop/pages/workspace/all-page/all-page-header.css.ts
+++ b/packages/frontend/core/src/desktop/pages/workspace/all-page/all-page-header.css.ts
@@ -29,3 +29,9 @@ export const viewToggleItem = style({
     },
   },
 });
+
+export const newPageButtonLabel = style({
+  fontSize: '12px',
+  color: cssVarV2.text.primary,
+  fontWeight: 500,
+});
diff --git a/packages/frontend/core/src/desktop/pages/workspace/all-page/all-page-header.tsx b/packages/frontend/core/src/desktop/pages/workspace/all-page/all-page-header.tsx
index 94bc2095a0..01a423fac5 100644
--- a/packages/frontend/core/src/desktop/pages/workspace/all-page/all-page-header.tsx
+++ b/packages/frontend/core/src/desktop/pages/workspace/all-page/all-page-header.tsx
@@ -1,9 +1,18 @@
 import { type MenuProps } from '@affine/component';
+import { usePageHelper } from '@affine/core/blocksuite/block-suite-page-list/utils';
 import { ExplorerDisplayMenuButton } from '@affine/core/components/explorer/display-menu';
 import { ViewToggle } from '@affine/core/components/explorer/display-menu/view-toggle';
 import type { DocListItemView } from '@affine/core/components/explorer/docs-view/doc-list-item';
 import { ExplorerNavigation } from '@affine/core/components/explorer/header/navigation';
 import type { ExplorerDisplayPreference } from '@affine/core/components/explorer/types';
+import { PageListNewPageButton } from '@affine/core/components/page-list/docs/page-list-new-page-button';
+import { WorkspaceDialogService } from '@affine/core/modules/dialogs';
+import { WorkbenchService } from '@affine/core/modules/workbench';
+import { WorkspaceService } from '@affine/core/modules/workspace';
+import { inferOpenMode } from '@affine/core/utils';
+import { useI18n } from '@affine/i18n';
+import track from '@affine/track';
+import { useService } from '@toeverything/infra';
 import { useCallback } from 'react';
 
 import * as styles from './all-page-header.css';
@@ -25,6 +34,49 @@ export const AllDocsHeader = ({
     displayPreference: ExplorerDisplayPreference
   ) => void;
 }) => {
+  const t = useI18n();
+  const workspaceService = useService(WorkspaceService);
+  const workspaceDialogService = useService(WorkspaceDialogService);
+  const workbenchService = useService(WorkbenchService);
+  const workbench = workbenchService.workbench;
+  const { createEdgeless, createPage } = usePageHelper(
+    workspaceService.workspace.docCollection
+  );
+
+  const handleOpenDocs = useCallback(
+    (result: {
+      docIds: string[];
+      entryId?: string;
+      isWorkspaceFile?: boolean;
+    }) => {
+      const { docIds, entryId, isWorkspaceFile } = result;
+      // If the imported file is a workspace file, open the entry page.
+      if (isWorkspaceFile && entryId) {
+        workbench.openDoc(entryId);
+      } else if (!docIds.length) {
+        return;
+      }
+      // Open all the docs when there are multiple docs imported.
+      if (docIds.length > 1) {
+        workbench.openAll();
+      } else {
+        // Otherwise, open the only doc.
+        workbench.openDoc(docIds[0]);
+      }
+    },
+    [workbench]
+  );
+
+  const onImportFile = useCallback(() => {
+    track.$.header.importModal.open();
+    workspaceDialogService.open('import', undefined, payload => {
+      if (!payload) {
+        return;
+      }
+      handleOpenDocs(payload);
+    });
+  }, [workspaceDialogService, handleOpenDocs]);
+
   const handleViewChange = useCallback(
     (view: DocListItemView) => {
       onDisplayPreferenceChange({ ...displayPreference, view });
@@ -46,6 +98,15 @@ export const AllDocsHeader = ({
           displayPreference={displayPreference}
           onDisplayPreferenceChange={onDisplayPreferenceChange}
         />
+        <PageListNewPageButton
+          size="small"
+          onCreateEdgeless={e => createEdgeless({ at: inferOpenMode(e) })}
+          onCreatePage={e => createPage('page', { at: inferOpenMode(e) })}
+          onCreateDoc={e => createPage(undefined, { at: inferOpenMode(e) })}
+          onImportFile={onImportFile}
+        >
+          <span className={styles.newPageButtonLabel}>{t['New Page']()}</span>
+        </PageListNewPageButton>
       </div>
     </div>
   );