fix(core): ctrl/cmd + click on add page button opens in new tab (#7701)

fix PD-1521

packages/frontend/core/src/components/app-sidebar/add-page-button/index.tsx

@@ -3,11 +3,12 @@ import { useI18n } from '@affine/i18n';
 import { PlusIcon } from '@blocksuite/icons/rc';
 import clsx from 'clsx';
 import type React from 'react';
+import type { MouseEventHandler } from 'react';
 
 import * as styles from './index.css';
 
 interface AddPageButtonProps {
-  onClick?: () => void;
+  onClick?: MouseEventHandler;
   className?: string;
   style?: React.CSSProperties;
 }

packages/frontend/core/src/components/blocksuite/block-suite-header/menu/index.tsx

@@ -19,6 +19,7 @@ import { useExportPage } from '@affine/core/hooks/affine/use-export-page';
 import { useTrashModalHelper } from '@affine/core/hooks/affine/use-trash-modal-helper';
 import { useAsyncCallback } from '@affine/core/hooks/affine-async-hooks';
 import { mixpanel } from '@affine/core/mixpanel';
+import { WorkbenchService } from '@affine/core/modules/workbench';
 import { useDetailPageHeaderResponsive } from '@affine/core/pages/workspace/detail-page/use-header-responsive';
 import { WorkspaceFlavour } from '@affine/env/workspace';
 import { useI18n } from '@affine/i18n';
@@ -31,8 +32,10 @@ import {
   HistoryIcon,
   ImportIcon,
   InformationIcon,
+  OpenInNewIcon,
   PageIcon,
   ShareIcon,
+  SplitViewIcon,
 } from '@blocksuite/icons/rc';
 import type { Doc } from '@blocksuite/store';
 import {
@@ -73,6 +76,8 @@ export const PageHeaderMenuButton = ({
   const isInTrash = useLiveData(doc.meta$.map(m => m.trash));
   const currentMode = useLiveData(doc.mode$);
 
+  const workbench = useService(WorkbenchService).workbench;
+
   const { favorite, toggleFavorite } = useFavorite(pageId);
 
   const { duplicate } = useBlockSuiteMetaHelper(docCollection);
@@ -94,6 +99,18 @@ export const PageHeaderMenuButton = ({
     setOpenInfoModal(true);
   };
 
+  const handleOpenInNewTab = useCallback(() => {
+    workbench.openDoc(pageId, {
+      at: 'new-tab',
+    });
+  }, [pageId, workbench]);
+
+  const handleOpenInSplitView = useCallback(() => {
+    workbench.openDoc(pageId, {
+      at: 'tail',
+    });
+  }, [pageId, workbench]);
+
   const handleOpenTrashModal = useCallback(() => {
     setTrashModal({
       open: true,
@@ -237,16 +254,35 @@ export const PageHeaderMenuButton = ({
           ? t['com.affine.favoritePageOperation.remove']()
           : t['com.affine.favoritePageOperation.add']()}
       </MenuItem>
-      {/* {TODO(@Peng): add tag function support} */}
-      {/* <MenuItem
-        icon={<TagsIcon />}
-        data-testid="editor-option-menu-add-tag"
-        onClick={() => {}}
+      <MenuSeparator />
+      <MenuItem
+        preFix={
+          <MenuIcon>
+            <OpenInNewIcon />
+          </MenuIcon>
+        }
+        data-testid="editor-option-menu-open-in-new-tab"
+        onSelect={handleOpenInNewTab}
         style={menuItemStyle}
       >
-        {t['com.affine.header.option.add-tag']()}
-      </MenuItem> */}
+        {t['com.affine.workbench.tab.page-menu-open']()}
+      </MenuItem>
+
+      <MenuItem
+        preFix={
+          <MenuIcon>
+            <SplitViewIcon />
+          </MenuIcon>
+        }
+        data-testid="editor-option-menu-open-in-split-new"
+        onSelect={handleOpenInSplitView}
+        style={menuItemStyle}
+      >
+        {t['com.affine.workbench.split-view.page-menu-open']()}
+      </MenuItem>
+
       <MenuSeparator />
+
       {runtimeConfig.enableInfoModal && (
         <MenuItem
           preFix={

packages/frontend/core/src/components/root-app-sidebar/index.tsx

@@ -1,6 +1,5 @@
 import { openSettingModalAtom } from '@affine/core/atoms';
 import { useAsyncCallback } from '@affine/core/hooks/affine-async-hooks';
-import { useNavigateHelper } from '@affine/core/hooks/use-navigate-helper';
 import { mixpanel } from '@affine/core/mixpanel';
 import {
   ExplorerCollections,
@@ -19,7 +18,7 @@ import type { Doc } from '@blocksuite/store';
 import type { Workspace } from '@toeverything/infra';
 import { useLiveData, useService, WorkspaceService } from '@toeverything/infra';
 import { useAtomValue, useSetAtom } from 'jotai';
-import type { ReactElement } from 'react';
+import type { MouseEvent, ReactElement } from 'react';
 import { useCallback, useEffect } from 'react';
 
 import { useAppSettingHelper } from '../../hooks/affine/use-app-setting-helper';
@@ -72,14 +71,12 @@ export type RootAppSidebarProps = {
 export const RootAppSidebar = (): ReactElement => {
   const currentWorkspace = useService(WorkspaceService).workspace;
   const currentWorkspaceId = currentWorkspace.id;
-  const { openPage } = useNavigateHelper();
   const { appSettings } = useAppSettingHelper();
   const docCollection = currentWorkspace.docCollection;
   const t = useI18n();
+  const workbench = useService(WorkbenchService).workbench;
   const currentPath = useLiveData(
-    useService(WorkbenchService).workbench.location$.map(
-      location => location.pathname
-    )
+    workbench.location$.map(location => location.pathname)
   );
   const cmdkQuickSearchService = useService(CMDKQuickSearchService);
   const onOpenQuickSearchModal = useCallback(() => {
@@ -93,27 +90,29 @@ export const RootAppSidebar = (): ReactElement => {
   const allPageActive = currentPath === '/all';
 
   const pageHelper = usePageHelper(currentWorkspace.docCollection);
-  const createPage = useCallback(() => {
-    return pageHelper.createPage();
-  }, [pageHelper]);
 
-  const onClickNewPage = useAsyncCallback(async () => {
-    const page = createPage();
-    page.load();
-    openPage(currentWorkspaceId, page.id);
-    mixpanel.track('DocCreated', {
-      segment: 'navigation panel',
-      module: 'bottom button',
-      control: 'new doc button',
-      category: 'page',
-      type: 'doc',
-    });
-  }, [createPage, currentWorkspaceId, openPage]);
+  const onClickNewPage = useAsyncCallback(
+    async (e?: MouseEvent) => {
+      const page = pageHelper.createPage('page', false);
+      page.load();
+      mixpanel.track('DocCreated', {
+        segment: 'navigation panel',
+        module: 'bottom button',
+        control: 'new doc button',
+        category: 'page',
+        type: 'doc',
+      });
+      workbench.openDoc(page.id, {
+        at: e?.ctrlKey || e?.metaKey ? 'new-tab' : 'active',
+      });
+    },
+    [pageHelper, workbench]
+  );
 
   // Listen to the "New Page" action from the menu
   useEffect(() => {
     if (environment.isDesktop) {
-      return events?.applicationMenu.onNewPageAction(onClickNewPage);
+      return events?.applicationMenu.onNewPageAction(() => onClickNewPage());
     }
     return;
   }, [onClickNewPage]);