feat(electron): new tab/split view entries

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

@@ -28,6 +28,7 @@ import {
   FilterMinusIcon,
   InformationIcon,
   MoreVerticalIcon,
+  OpenInNewIcon,
   PlusIcon,
   ResetIcon,
   SplitViewIcon,
@@ -98,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');
@@ -171,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}

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', {
@@ -191,6 +201,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
         ? [
             {
@@ -236,6 +261,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
         ? [
             {

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 (

packages/frontend/electron/src/main/ui/handlers.ts

@@ -22,10 +22,10 @@ import {
   pingAppLayoutReady,
   showDevTools,
   showTab,
-  showTabContextMenu,
   updateWorkbenchMeta,
   updateWorkbenchViewMeta,
 } from '../windows-manager';
+import { showTabContextMenu } from '../windows-manager/context-menu';
 import { getChallengeResponse } from './challenge';
 import { uiSubjects } from './subject';