feat(core): add new doc button in new all docs header (#12390)

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
+      <Button className={className} style={style}>
-        className={className}
-        style={style}
-        suffix={<ArrowDownSmallIcon />}
-      >
         {t['com.affine.explorer.display-menu.button']()}
       </Button>
     </Menu>

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

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