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

fix AF-1146

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 (