feat(electron): new tab/split view entries (#7708)

fix AF-1146

packages/frontend/core/src/components/page-list/operation-cell.tsx

@@ -18,7 +18,6 @@ import { useI18n } from '@affine/i18n';
 import {
   DeleteIcon,
   DeletePermanentlyIcon,
-  DualLinkIcon,
   DuplicateIcon,
   EditIcon,
   FavoritedIcon,
@@ -27,6 +26,7 @@ import {
   FilterMinusIcon,
   InformationIcon,
   MoreVerticalIcon,
+  OpenInNewIcon,
   PlusIcon,
   ResetIcon,
   SplitViewIcon,
@@ -39,7 +39,6 @@ import {
   WorkspaceService,
 } from '@toeverything/infra';
 import { useCallback, useState } from 'react';
-import { Link } from 'react-router-dom';
 
 import type { CollectionService } from '../../modules/collection';
 import { InfoModal } from '../affine/page-properties';
@@ -49,7 +48,7 @@ import * as styles from './list.css';
 import { DisablePublicSharing, MoveToTrash } from './operation-menu-items';
 import { CreateOrEditTag } from './tags/create-tag';
 import type { TagMeta } from './types';
-import { ColWrapper, stopPropagationWithoutPrevent } from './utils';
+import { ColWrapper } from './utils';
 import { useEditCollection, useEditCollectionName } from './view';
 
 const tooltipSideTop = { side: 'top' as const };
@@ -100,6 +99,10 @@ export const PageOperationCell = ({
     workbench.openDoc(page.id, { at: 'tail' });
   }, [page.id, workbench]);
 
+  const onOpenInNewTab = useCallback(() => {
+    workbench.openDoc(page.id, { at: 'new-tab' });
+  }, [page.id, workbench]);
+
   const onToggleFavoritePage = useCallback(() => {
     const status = favAdapter.isFavorite(page.id, 'doc');
     favAdapter.toggle(page.id, 'doc');
@@ -173,6 +176,17 @@ export const PageOperationCell = ({
         </MenuItem>
       ) : null}
 
+      <MenuItem
+        onClick={onOpenInNewTab}
+        preFix={
+          <MenuIcon>
+            <OpenInNewIcon />
+          </MenuIcon>
+        }
+      >
+        {t['com.affine.workbench.tab.page-menu-open']()}
+      </MenuItem>
+
       {environment.isDesktop && appSettings.enableMultiView ? (
         <MenuItem
           onClick={onOpenInSplitView}
@@ -186,27 +200,6 @@ export const PageOperationCell = ({
         </MenuItem>
       ) : null}
 
-      {!environment.isDesktop && (
-        <Link
-          className={styles.clearLinkStyle}
-          onClick={stopPropagationWithoutPrevent}
-          to={`/workspace/${currentWorkspace.id}/${page.id}`}
-          target={'_blank'}
-          rel="noopener noreferrer"
-        >
-          <MenuItem
-            style={{ marginBottom: 4 }}
-            preFix={
-              <MenuIcon>
-                <DualLinkIcon />
-              </MenuIcon>
-            }
-          >
-            {t['com.affine.openPageOperation.newTab']()}
-          </MenuItem>
-        </Link>
-      )}
-
       <MenuItem
         preFix={
           <MenuIcon>

packages/frontend/core/src/components/page-list/view/collection-operations.tsx

@@ -12,6 +12,7 @@ import {
   FavoritedIcon,
   FavoriteIcon,
   FilterIcon,
+  OpenInNewIcon,
   PlusIcon,
   SplitViewIcon,
 } from '@blocksuite/icons/rc';
@@ -79,6 +80,10 @@ export const CollectionOperations = ({
     workbench.openCollection(collection.id, { at: 'tail' });
   }, [collection.id, workbench]);
 
+  const openCollectionNewTab = useCallback(() => {
+    workbench.openCollection(collection.id, { at: 'new-tab' });
+  }, [collection.id, workbench]);
+
   const favAdapter = useService(CompatibleFavoriteItemsAdapter);
 
   const onToggleFavoritePage = useCallback(() => {
@@ -153,6 +158,15 @@ export const CollectionOperations = ({
           : t['com.affine.favoritePageOperation.add'](),
         click: onToggleFavoritePage,
       },
+      {
+        icon: (
+          <MenuIcon>
+            <OpenInNewIcon />
+          </MenuIcon>
+        ),
+        name: t['com.affine.workbench.tab.page-menu-open'](),
+        click: openCollectionNewTab,
+      },
       ...(appSettings.enableMultiView
         ? [
             {
@@ -189,6 +203,7 @@ export const CollectionOperations = ({
       onAddDocToCollection,
       favorite,
       onToggleFavoritePage,
+      openCollectionNewTab,
       appSettings.enableMultiView,
       openCollectionSplitView,
       service,

packages/frontend/core/src/modules/explorer/views/nodes/collection/operations.tsx

@@ -17,6 +17,7 @@ import {
   FavoritedIcon,
   FavoriteIcon,
   FilterIcon,
+  OpenInNewIcon,
   PlusIcon,
   SplitViewIcon,
 } from '@blocksuite/icons/rc';
@@ -110,6 +111,15 @@ export const useExplorerCollectionNodeOperations = (
     });
   }, [collectionId, workbenchService.workbench]);
 
+  const handleOpenInNewTab = useCallback(() => {
+    workbenchService.workbench.openCollection(collectionId, { at: 'new-tab' });
+    mixpanel.track('OpenInNewTab', {
+      page: 'sidebar',
+      module: 'collection',
+      control: 'open in new tab button',
+    });
+  }, [collectionId, workbenchService.workbench]);
+
   const handleDeleteCollection = useCallback(() => {
     collectionService.deleteCollection(deleteInfo, collectionId);
     mixpanel.track('CollectionDeleted', {
@@ -187,6 +197,21 @@ export const useExplorerCollectionNodeOperations = (
           </MenuItem>
         ),
       },
+      {
+        index: 99,
+        view: (
+          <MenuItem
+            preFix={
+              <MenuIcon>
+                <OpenInNewIcon />
+              </MenuIcon>
+            }
+            onClick={handleOpenInNewTab}
+          >
+            {t['com.affine.workbench.tab.page-menu-open']()}
+          </MenuItem>
+        ),
+      },
       ...(appSettings.enableMultiView
         ? [
             {
@@ -232,6 +257,7 @@ export const useExplorerCollectionNodeOperations = (
       favorite,
       handleAddDocToCollection,
       handleDeleteCollection,
+      handleOpenInNewTab,
       handleOpenInSplitView,
       handleShowEdit,
       handleToggleFavoriteCollection,

packages/frontend/core/src/modules/explorer/views/nodes/doc/operations.tsx

@@ -17,6 +17,7 @@ import {
   FavoriteIcon,
   InformationIcon,
   LinkedPageIcon,
+  OpenInNewIcon,
   SplitViewIcon,
 } from '@blocksuite/icons/rc';
 import { DocsService, useLiveData, useServices } from '@toeverything/infra';
@@ -75,6 +76,17 @@ export const useExplorerDocNodeOperations = (
     });
   }, [docRecord, openConfirmModal, t]);
 
+  const handleOpenInNewTab = useCallback(() => {
+    workbenchService.workbench.openDoc(docId, {
+      at: 'new-tab',
+    });
+    mixpanel.track('OpenInNewTab', {
+      page: 'sidebar',
+      module: 'doc',
+      control: 'open in new tab button',
+    });
+  }, [docId, workbenchService]);
+
   const handleOpenInSplitView = useCallback(() => {
     workbenchService.workbench.openDoc(docId, {
       at: 'beside',
@@ -151,6 +163,21 @@ export const useExplorerDocNodeOperations = (
           </MenuItem>
         ),
       },
+      {
+        index: 99,
+        view: (
+          <MenuItem
+            preFix={
+              <MenuIcon>
+                <OpenInNewIcon />
+              </MenuIcon>
+            }
+            onClick={handleOpenInNewTab}
+          >
+            {t['com.affine.workbench.tab.page-menu-open']()}
+          </MenuItem>
+        ),
+      },
       ...(appSettings.enableMultiView
         ? [
             {
@@ -219,6 +246,7 @@ export const useExplorerDocNodeOperations = (
       favorite,
       handleAddLinkedPage,
       handleMoveToTrash,
+      handleOpenInNewTab,
       handleOpenInSplitView,
       handleToggleFavoriteDoc,
       options.openInfoModal,

packages/frontend/core/src/modules/explorer/views/nodes/tag/operations.tsx

@@ -15,6 +15,7 @@ import {
   DeleteIcon,
   FavoritedIcon,
   FavoriteIcon,
+  OpenInNewIcon,
   PlusIcon,
   SplitViewIcon,
 } from '@blocksuite/icons/rc';
@@ -97,6 +98,17 @@ export const useExplorerTagNodeOperations = (
     });
   }, [favoriteService, tagId]);
 
+  const handleOpenInNewTab = useCallback(() => {
+    workbenchService.workbench.openTag(tagId, {
+      at: 'new-tab',
+    });
+    mixpanel.track('OpenInNewTab', {
+      page: 'sidebar',
+      module: 'tag',
+      control: 'open in new tab button',
+    });
+  }, [tagId, workbenchService]);
+
   return useMemo(
     () => [
       {
@@ -108,6 +120,21 @@ export const useExplorerTagNodeOperations = (
           </IconButton>
         ),
       },
+      {
+        index: 50,
+        view: (
+          <MenuItem
+            preFix={
+              <MenuIcon>
+                <OpenInNewIcon />
+              </MenuIcon>
+            }
+            onClick={handleOpenInNewTab}
+          >
+            {t['com.affine.workbench.tab.page-menu-open']()}
+          </MenuItem>
+        ),
+      },
       ...(appSettings.enableMultiView
         ? [
             {
@@ -180,6 +207,7 @@ export const useExplorerTagNodeOperations = (
       favorite,
       handleMoveToTrash,
       handleNewDoc,
+      handleOpenInNewTab,
       handleOpenInSplitView,
       handleToggleFavoriteTag,
       t,

packages/frontend/core/src/modules/navigation/utils.ts

@@ -18,30 +18,42 @@ export const resolveRouteLinkMeta = (href: string) => {
       return null;
     }
 
-    const hash = url.hash;
-    const pathname = url.pathname;
-
     // http://---/workspace/{workspaceid}/xxx/yyy
     // http://---/workspace/{workspaceid}/xxx
     const [_, workspaceId, moduleName, subModuleName] =
-      pathname.match(/\/workspace\/([^/]+)\/([^/]+)(?:\/([^/]+))?/) || [];
+      url.pathname.match(/\/workspace\/([^/]+)\/([^/]+)(?:\/([^/]+))?/) || [];
 
-    if (isRouteModulePath(moduleName)) {
-      return {
-        workspaceId,
-        moduleName,
-        subModuleName,
-      };
-    } else if (moduleName) {
-      // for now we assume all other cases are doc links
-      return {
-        workspaceId,
-        moduleName: 'doc' as const,
-        docId: moduleName,
-        blockId: hash.slice(1),
+    if (workspaceId) {
+      const basename = `/workspace/${workspaceId}`;
+      const pathname = url.pathname.replace(basename, '');
+      const search = url.search;
+      const hash = url.hash;
+      const location = {
+        pathname,
+        search,
+        hash,
       };
+      if (isRouteModulePath(moduleName)) {
+        return {
+          location,
+          basename,
+          workspaceId,
+          moduleName,
+          subModuleName,
+        };
+      } else if (moduleName) {
+        // for now we assume all other cases are doc links
+        return {
+          location,
+          basename,
+          workspaceId,
+          moduleName: 'doc' as const,
+          docId: moduleName,
+          blockId: hash.slice(1),
+        };
+      }
     }
-    return;
+    return null;
   } catch {
     return null;
   }

packages/frontend/core/src/modules/workbench/services/desktop-state-synchronizer.ts

@@ -24,12 +24,13 @@ export class DesktopStateSynchronizer extends Service {
         event.type === 'open-in-split-view' &&
         event.payload.tabId === appInfo?.viewId
       ) {
-        const activeView = workbench.activeView$.value;
-        if (activeView) {
-          workbench.open(activeView.location$.value, {
-            at: 'beside',
-          });
-        }
+        const to =
+          event.payload.view?.path ??
+          workbench.activeView$.value?.location$.value;
+
+        workbench.open(to, {
+          at: 'beside',
+        });
       }
 
       if (