feat(electron): app tabs dnd (#7684)

<div class='graphite__hidden'> <div>🎥 Video uploaded on Graphite:</div> <a href="https://app.graphite.dev/media/video/T2klNLEk0wxLh4NRDzhk/cd84e155-9f2e-4d12-a933-8673eb6bc6cb.mp4"> <img src="https://app.graphite.dev/api/v1/graphite/video/thumbnail/T2klNLEk0wxLh4NRDzhk/cd84e155-9f2e-4d12-a933-8673eb6bc6cb.mp4"> </a> </div> <video src="https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/T2klNLEk0wxLh4NRDzhk/cd84e155-9f2e-4d12-a933-8673eb6bc6cb.mp4">Kapture 2024-07-31 at 19.39.30.mp4</video> fix AF-1149 fix PD-1513 fix PD-1515
2026-02-12 04:18:54 +00:00 · 2024-08-02 02:02:03 +00:00
parent 4719ffadc6
commit bfff10e25e
13 changed files with 567 additions and 188 deletions
--- a/packages/frontend/component/src/theme/global.css
+++ b/packages/frontend/component/src/theme/global.css
@@ -275,32 +275,6 @@ affine-block-hub {
  }
 }

-button,
-input,
-select,
-textarea
-/* [role='button']  */ {
-  -webkit-app-region: no-drag;
-}
-
-#webpack-dev-server-client-overlay {
-  -webkit-app-region: no-drag;
-}
-
-html[data-active='false'] {
-  opacity: 0;
-  transition: opacity 0.2s 0.1s;
-}
-
-html[data-active='true']:has([data-blur-background='true']) {
-  opacity: 1;
-  transition: opacity 0.2s;
-}
-
-html[data-active='false'] * {
-  -webkit-app-region: no-drag !important;
-}
-
 html,
 body {
  height: 100%;
--- a/packages/frontend/core/src/modules/app-tabs-header/services/app-tabs-header-service.ts
+++ b/packages/frontend/core/src/modules/app-tabs-header/services/app-tabs-header-service.ts
@@ -31,23 +31,63 @@ export class AppTabsHeaderService extends Service {
    []
  );

-  showContextMenu = async (workbenchId: string, viewIdx: number) => {
-    await apis?.ui.showTabContextMenu(workbenchId, viewIdx);
+  showContextMenu = apis?.ui.showTabContextMenu;
+
+  activateView = apis?.ui.activateView;
+
+  closeTab = apis?.ui.closeTab;
+
+  onAddTab = apis?.ui.addTab;
+
+  onAddDocTab = async (
+    docId: string,
+    targetTabId?: string,
+    edge?: 'left' | 'right'
+  ) => {
+    await apis?.ui.addTab({
+      view: {
+        path: {
+          pathname: '/' + docId,
+        },
+      },
+      target: targetTabId,
+      edge,
+    });
  };

-  activateView = async (workbenchId: string, viewIdx: number) => {
-    await apis?.ui.activateView(workbenchId, viewIdx);
+  onAddTagTab = async (
+    tagId: string,
+    targetTabId?: string,
+    edge?: 'left' | 'right'
+  ) => {
+    await apis?.ui.addTab({
+      view: {
+        path: {
+          pathname: '/tag/' + tagId,
+        },
+      },
+      target: targetTabId,
+      edge,
+    });
  };

-  closeTab = async (workbenchId: string) => {
-    await apis?.ui.closeTab(workbenchId);
+  onAddCollectionTab = async (
+    collectionId: string,
+    targetTabId?: string,
+    edge?: 'left' | 'right'
+  ) => {
+    await apis?.ui.addTab({
+      view: {
+        path: {
+          pathname: '/collection/' + collectionId,
+        },
+      },
+      target: targetTabId,
+      edge,
+    });
  };

-  onAddTab = async () => {
-    await apis?.ui.addTab();
-  };
+  onToggleRightSidebar = apis?.ui.toggleRightSidebar;

-  onToggleRightSidebar = async () => {
-    await apis?.ui.toggleRightSidebar();
-  };
+  moveTab = apis?.ui.moveTab;
 }
--- a/packages/frontend/core/src/modules/app-tabs-header/views/app-tabs-header.tsx
+++ b/packages/frontend/core/src/modules/app-tabs-header/views/app-tabs-header.tsx
@@ -1,4 +1,11 @@
-import { IconButton, Loading } from '@affine/component';
+import {
+  type DropTargetDropEvent,
+  type DropTargetOptions,
+  IconButton,
+  Loading,
+  useDraggable,
+  useDropTarget,
+} from '@affine/component';
 import {
  appSidebarFloatingAtom,
  appSidebarOpenAtom,
@@ -7,6 +14,7 @@ import {
 import { appSidebarWidthAtom } from '@affine/core/components/app-sidebar/index.jotai';
 import { WindowsAppControls } from '@affine/core/components/pure/header/windows-app-controls';
 import { useAsyncCallback } from '@affine/core/hooks/affine-async-hooks';
+import type { AffineDNDData } from '@affine/core/types/dnd';
 import { apis, events } from '@affine/electron-api';
 import { CloseIcon, PlusIcon, RightSidebarIcon } from '@blocksuite/icons/rc';
 import {
@@ -33,27 +41,53 @@ import {
 } from '../services/app-tabs-header-service';
 import * as styles from './styles.css';

+const TabSupportType = ['collection', 'tag', 'doc'];
+
+const tabCanDrop =
+  (tab?: TabStatus): NonNullable<DropTargetOptions<AffineDNDData>['canDrop']> =>
+  ctx => {
+    if (
+      ctx.source.data.from?.at === 'app-header:tabs' &&
+      ctx.source.data.from.tabId !== tab?.id
+    ) {
+      return true;
+    }
+
+    if (
+      ctx.source.data.entity?.type &&
+      TabSupportType.includes(ctx.source.data.entity?.type)
+    ) {
+      return true;
+    }
+
+    return false;
+  };
+
 const WorkbenchTab = ({
  workbench,
  active: tabActive,
  tabsLength,
+  dnd,
+  onDrop,
 }: {
  workbench: TabStatus;
  active: boolean;
  tabsLength: number;
+  dnd?: boolean;
+  onDrop?: (data: DropTargetDropEvent<AffineDNDData>) => void;
 }) => {
  useServiceOptional(DesktopStateSynchronizer);
  const tabsHeaderService = useService(AppTabsHeaderService);
  const activeViewIndex = workbench.activeViewIndex ?? 0;
  const onContextMenu = useAsyncCallback(
    async (viewIdx: number) => {
-      await tabsHeaderService.showContextMenu(workbench.id, viewIdx);
+      await tabsHeaderService.showContextMenu?.(workbench.id, viewIdx);
    },
    [tabsHeaderService, workbench.id]
  );
  const onActivateView = useAsyncCallback(
    async (viewIdx: number) => {
-      await tabsHeaderService.activateView(workbench.id, viewIdx);
+      await tabsHeaderService.activateView?.(workbench.id, viewIdx);
    },
    [tabsHeaderService, workbench.id]
  );
@@ -61,66 +95,104 @@ const WorkbenchTab = ({
    async e => {
      e.stopPropagation();

-      await tabsHeaderService.closeTab(workbench.id);
+      await tabsHeaderService.closeTab?.(workbench.id);
    },
    [tabsHeaderService, workbench.id]
  );

+  const { dropTargetRef, closestEdge } = useDropTarget<AffineDNDData>(
+    () => ({
+      closestEdge: {
+        allowedEdges: ['left', 'right'],
+      },
+      onDrop,
+      dropEffect: 'move',
+      canDrop: tabCanDrop(workbench),
+      isSticky: true,
+    }),
+    [onDrop, workbench]
+  );
+
+  const { dragRef } = useDraggable<AffineDNDData>(
+    () => ({
+      canDrag: dnd,
+      data: {
+        from: {
+          at: 'app-header:tabs',
+          tabId: workbench.id,
+        },
+      },
+      dragPreviewPosition: 'pointer-outside',
+    }),
+    [dnd, workbench.id]
+  );
+
  return (
    <div
-      key={workbench.id}
-      data-testid="workbench-tab"
-      data-active={tabActive}
-      data-pinned={workbench.pinned}
-      className={styles.tab}
+      className={styles.tabWrapper}
+      ref={node => {
+        dropTargetRef.current = node;
+        dragRef.current = node;
+      }}
    >
-      {workbench.views.map((view, viewIdx) => {
-        return (
-          <Fragment key={view.id}>
-            <button
-              key={view.id}
-              data-testid="split-view-label"
-              className={styles.splitViewLabel}
-              data-active={activeViewIndex === viewIdx && tabActive}
-              onContextMenu={() => {
-                onContextMenu(viewIdx);
-              }}
-              onClick={e => {
-                e.stopPropagation();
-                onActivateView(viewIdx);
-              }}
-            >
-              <div className={styles.labelIcon}>
-                {workbench.ready || !workbench.loaded ? (
-                  iconNameToIcon[view.iconName ?? 'allDocs']
-                ) : (
-                  <Loading />
-                )}
-              </div>
-              {workbench.pinned || !view.title ? null : (
-                <div title={view.title} className={styles.splitViewLabelText}>
-                  {view.title}
+      <div
+        key={workbench.id}
+        data-testid="workbench-tab"
+        data-active={tabActive}
+        data-pinned={workbench.pinned}
+        className={styles.tab}
+      >
+        {workbench.views.map((view, viewIdx) => {
+          return (
+            <Fragment key={view.id}>
+              <button
+                key={view.id}
+                data-testid="split-view-label"
+                className={styles.splitViewLabel}
+                data-active={activeViewIndex === viewIdx && tabActive}
+                onContextMenu={() => {
+                  onContextMenu(viewIdx);
+                }}
+                onClick={e => {
+                  e.stopPropagation();
+                  onActivateView(viewIdx);
+                }}
+              >
+                <div className={styles.labelIcon}>
+                  {workbench.ready || !workbench.loaded ? (
+                    iconNameToIcon[view.iconName ?? 'allDocs']
+                  ) : (
+                    <Loading />
+                  )}
                </div>
-              )}
-            </button>
+                {workbench.pinned || !view.title ? null : (
+                  <div title={view.title} className={styles.splitViewLabelText}>
+                    {view.title}
+                  </div>
+                )}
+              </button>

-            {viewIdx !== workbench.views.length - 1 ? (
-              <div className={styles.splitViewSeparator} />
+              {viewIdx !== workbench.views.length - 1 ? (
+                <div className={styles.splitViewSeparator} />
+              ) : null}
+            </Fragment>
+          );
+        })}
+        {!workbench.pinned ? (
+          <div className={styles.tabCloseButtonWrapper}>
+            {tabsLength > 1 ? (
+              <button
+                data-testid="close-tab-button"
+                className={styles.tabCloseButton}
+                onClick={onCloseTab}
+              >
+                <CloseIcon />
+              </button>
            ) : null}
-          </Fragment>
-        );
-      })}
-      <div className={styles.tabCloseButtonWrapper}>
-        {!workbench.pinned && tabsLength > 1 ? (
-          <button
-            data-testid="close-tab-button"
-            className={styles.tabCloseButton}
-            onClick={onCloseTab}
-          >
-            <CloseIcon />
-          </button>
+          </div>
        ) : null}
      </div>
+      <div className={styles.dropIndicator} data-edge={closestEdge} />
    </div>
  );
 };
@@ -164,11 +236,11 @@ export const AppTabsHeader = ({
  const [pinned, unpinned] = partition(tabs, tab => tab.pinned);

  const onAddTab = useAsyncCallback(async () => {
-    await tabsHeaderService.onAddTab();
+    await tabsHeaderService.onAddTab?.();
  }, [tabsHeaderService]);

  const onToggleRightSidebar = useAsyncCallback(async () => {
-    await tabsHeaderService.onToggleRightSidebar();
+    await tabsHeaderService.onToggleRightSidebar?.();
  }, [tabsHeaderService]);

  useEffect(() => {
@@ -177,6 +249,63 @@ export const AppTabsHeader = ({
    }
  }, [mode]);

+  const onDrop = useAsyncCallback(
+    async (data: DropTargetDropEvent<AffineDNDData>, targetId?: string) => {
+      const edge = data.closestEdge ?? 'right';
+      targetId = targetId ?? tabs.at(-1)?.id;
+
+      if (!targetId || edge === 'top' || edge === 'bottom') {
+        return;
+      }
+
+      if (data.source.data.from?.at === 'app-header:tabs') {
+        if (targetId === data.source.data.from.tabId) {
+          return;
+        }
+        return await tabsHeaderService.moveTab?.(
+          data.source.data.from.tabId,
+          targetId,
+          edge
+        );
+      }
+
+      if (data.source.data.entity?.type === 'doc') {
+        return await tabsHeaderService.onAddDocTab?.(
+          data.source.data.entity.id,
+          targetId,
+          edge
+        );
+      }
+
+      if (data.source.data.entity?.type === 'tag') {
+        return await tabsHeaderService.onAddTagTab?.(
+          data.source.data.entity.id,
+          targetId,
+          edge
+        );
+      }
+
+      if (data.source.data.entity?.type === 'collection') {
+        return await tabsHeaderService.onAddCollectionTab?.(
+          data.source.data.entity.id,
+          targetId,
+          edge
+        );
+      }
+    },
+    [tabs, tabsHeaderService]
+  );
+
+  const { dropTargetRef: spacerDropTargetRef, draggedOver } =
+    useDropTarget<AffineDNDData>(
+      () => ({
+        onDrop,
+        dropEffect: 'move',
+        canDrop: tabCanDrop(),
+      }),
+      [onDrop]
+    );
+
  return (
    <div
      className={clsx(styles.root, className)}
@@ -203,9 +332,11 @@ export const AppTabsHeader = ({
        {pinned.map(tab => {
          return (
            <WorkbenchTab
+              dnd={mode === 'app'}
              tabsLength={pinned.length}
              key={tab.id}
              workbench={tab}
+              onDrop={data => onDrop(data, tab.id)}
              active={tab.active}
            />
          );
@@ -213,21 +344,28 @@ export const AppTabsHeader = ({
        {pinned.length > 0 && unpinned.length > 0 && (
          <div className={styles.pinSeparator} />
        )}
-        {unpinned.map(workbench => {
+        {unpinned.map(tab => {
          return (
            <WorkbenchTab
+              dnd={mode === 'app'}
              tabsLength={tabs.length}
-              key={workbench.id}
-              workbench={workbench}
-              active={workbench.active}
+              key={tab.id}
+              workbench={tab}
+              onDrop={data => onDrop(data, tab.id)}
+              active={tab.active}
            />
          );
        })}
+      </div>
+      <div
+        className={styles.spacer}
+        ref={spacerDropTargetRef}
+        data-dragged-over={draggedOver}
+      >
        <IconButton onClick={onAddTab} data-testid="add-tab-view-button">
          <PlusIcon />
        </IconButton>
      </div>
-      <div className={styles.spacer} />
      <IconButton size="large" onClick={onToggleRightSidebar}>
        <RightSidebarIcon />
      </IconButton>
--- a/packages/frontend/core/src/modules/app-tabs-header/views/styles.css.ts
+++ b/packages/frontend/core/src/modules/app-tabs-header/views/styles.css.ts
@@ -37,7 +37,6 @@ export const tabs = style({
  flexDirection: 'row',
  alignItems: 'center',
  padding: '0 8px',
-  gap: '8px',
  overflow: 'clip',
  height: '100%',
  selectors: {
@@ -52,6 +51,7 @@ export const pinSeparator = style({
  width: 1,
  height: 16,
  flexShrink: 0,
+  marginRight: 8,
 });

 export const splitViewSeparator = style({
@@ -61,6 +61,16 @@ export const splitViewSeparator = style({
  flexShrink: 0,
 });

+export const tabWrapper = style({
+  display: 'flex',
+  alignItems: 'center',
+  height: '100%',
+  overflow: 'clip',
+  position: 'relative',
+  padding: '0 6px',
+  margin: '0 -6px',
+});
+
 export const tab = style({
  height: 32,
  minWidth: 32,
@@ -75,6 +85,9 @@ export const tab = style({
  position: 'relative',
  ['WebkitAppRegion' as string]: 'no-drag',
  selectors: {
+    [`${tabWrapper} &`]: {
+      marginRight: 8,
+    },
    '&[data-active="true"]': {
      background: cssVar('backgroundPrimaryColor'),
      boxShadow: cssVar('shadow1'),
@@ -85,6 +98,9 @@ export const tab = style({
    '&[data-pinned="true"]': {
      flexShrink: 0,
    },
+    [`${tabWrapper}[data-dragging="true"] &`]: {
+      boxShadow: `0 0 0 1px ${cssVar('primaryColor')}`,
+    },
  },
 });

@@ -192,4 +208,43 @@ export const tabCloseButton = style([

 export const spacer = style({
  flexGrow: 1,
+  height: '100%',
+  display: 'flex',
+  alignItems: 'center',
+  marginLeft: -8,
+  position: 'relative',
+  selectors: {
+    '&[data-dragged-over=true]:after': {
+      content: '""',
+      position: 'absolute',
+      top: 10,
+      height: 32,
+      left: -13,
+      right: 0,
+      width: 2,
+      borderRadius: 2,
+      background: cssVar('primaryColor'),
+    },
+  },
+});
+
+export const dropIndicator = style({
+  position: 'absolute',
+  height: 32,
+  top: 10,
+  width: 2,
+  borderRadius: 2,
+  opacity: 0,
+  background: cssVar('primaryColor'),
+  selectors: {
+    '&[data-edge="left"]': {
+      opacity: 1,
+      transform: 'translateX(-5px)',
+    },
+    '&[data-edge="right"]': {
+      right: 0,
+      opacity: 1,
+      transform: 'translateX(-9px)',
+    },
+  },
 });
--- a/packages/frontend/core/src/modules/workbench/view/workbench-link.tsx
+++ b/packages/frontend/core/src/modules/workbench/view/workbench-link.tsx
@@ -40,6 +40,7 @@ export const WorkbenchLink = forwardRef<
            await apis?.ui.addTab({
              basename,
              view: { path },
+              show: false,
            });
          }
        } else if (!environment.isDesktop) {
--- a/packages/frontend/core/src/types/dnd.ts
+++ b/packages/frontend/core/src/types/dnd.ts
@@ -58,6 +58,10 @@ export interface AffineDNDData extends DNDData {
        }
      | {
          at: 'explorer:tags:docs';
+        }
+      | {
+          at: 'app-header:tabs';
+          tabId: string;
        };
  };
  dropTarget:
@@ -85,5 +89,8 @@ export interface AffineDNDData extends DNDData {
    | {
        at: 'explorer:tag';
      }
+    | {
+        at: 'app-header:tabs';
+      }
    | Record<string, unknown>;
 }
--- a/packages/frontend/electron/renderer/global.css
+++ b/packages/frontend/electron/renderer/global.css
@@ -0,0 +1,25 @@
+button,
+input,
+select,
+textarea
+/* [role='button']  */ {
+  -webkit-app-region: no-drag;
+}
+
+#webpack-dev-server-client-overlay {
+  -webkit-app-region: no-drag;
+}
+
+html:is([data-active='false'], [data-dragging='true']) * {
+  -webkit-app-region: no-drag !important;
+}
+
+html[data-active='false'] {
+  opacity: 0;
+  transition: opacity 0.2s 0.1s;
+}
+
+html[data-active='true']:has([data-blur-background='true']) {
+  opacity: 1;
+  transition: opacity 0.2s;
+}
--- a/packages/frontend/electron/renderer/index.tsx
+++ b/packages/frontend/electron/renderer/index.tsx
@@ -1,5 +1,6 @@
 import './polyfill/dispose';
 import '@affine/core/bootstrap/preload';
+import './global.css';

 import { appConfigProxy } from '@affine/core/hooks/use-app-config-storage';
 import { performanceLogger } from '@affine/core/shared';
@@ -96,6 +97,12 @@ function main() {
    }, 50);
    window.addEventListener('resize', handleResize);
    performanceMainLogger.info('setup done');
+    window.addEventListener('dragstart', () => {
+      document.documentElement.dataset.dragging = 'true';
+    });
+    window.addEventListener('dragend', () => {
+      document.documentElement.dataset.dragging = 'false';
+    });
  }

  mountApp();
--- a/packages/frontend/electron/renderer/shell/index.tsx
+++ b/packages/frontend/electron/renderer/shell/index.tsx
@@ -2,6 +2,7 @@ import 'setimmediate';
 import '@affine/component/theme/global.css';
 import '@affine/component/theme/theme.css';
 import '@affine/core/bootstrap/preload';
+import '../global.css';

 import { ThemeProvider } from '@affine/component/theme-provider';
 import { configureAppTabsHeaderModule } from '@affine/core/modules/app-tabs-header';
--- a/packages/frontend/electron/src/main/ui/handlers.ts
+++ b/packages/frontend/electron/src/main/ui/handlers.ts
@@ -18,6 +18,7 @@ import {
  initAndShowMainWindow,
  isActiveTab,
  launchStage,
+  moveTab,
  pingAppLayoutReady,
  showDevTools,
  showTab,
@@ -193,6 +194,9 @@ export const uiHandlers = {
  activateView: async (_, ...args: Parameters<typeof activateView>) => {
    await activateView(...args);
  },
+  moveTab: async (_, ...args: Parameters<typeof moveTab>) => {
+    moveTab(...args);
+  },
  toggleRightSidebar: async (_, tabId?: string) => {
    tabId ??= getTabViewsMeta().activeWorkbenchId;
    if (tabId) {
--- a/packages/frontend/electron/src/main/windows-manager/tab-views.ts
+++ b/packages/frontend/electron/src/main/windows-manager/tab-views.ts
@@ -115,8 +115,14 @@ type TabAction =
  | OpenInSplitViewAction;

 type AddTabOption = {
-  basename: string;
+  basename?: string;
  view?: Omit<WorkbenchViewMeta, 'id'> | Array<Omit<WorkbenchViewMeta, 'id'>>;
+  target?: string;
+  edge?: 'left' | 'right';
+  /**
+   * Whether to show the tab after adding.
+   */
+  show?: boolean;
 };

 export class WebContentViewsManager {
@@ -405,27 +411,32 @@ export class WebContentViewsManager {
        id: nanoid(),
      };
    });
+
+    const targetItem =
+      workbenches.find(w => w.id === option.target) ?? workbenches.at(-1);
+
+    const newIndex =
+      (targetItem ? workbenches.indexOf(targetItem) : workbenches.length) +
+      (option.edge === 'left' ? 0 : 1);
+
    const workbench: WorkbenchMeta = {
-      basename: option.basename,
+      basename: option.basename ?? this.activeWorkbenchMeta?.basename ?? '/',
      activeViewIndex: 0,
      views: views,
      id: newKey,
-      pinned: false,
+      pinned: targetItem?.pinned ?? false,
    };

    this.patchTabViewsMeta({
-      activeWorkbenchId: newKey,
-      workbenches: [...workbenches, workbench],
+      workbenches: workbenches.toSpliced(newIndex, 0, workbench),
+      activeWorkbenchId: this.activeWorkbenchId ?? newKey,
    });
-    await this.showTab(newKey);
+    await (option.show !== false ? this.showTab(newKey) : this.loadTab(newKey));
    this.tabAction$.next({
      type: 'add-tab',
      payload: workbench,
    });
-    return {
-      ...option,
-      key: newKey,
-    };
+    return workbench;
  };

  loadTab = async (id: string): Promise<WebContentsView | undefined> => {
@@ -521,6 +532,42 @@ export class WebContentViewsManager {
    await this.showTab(tabId);
  };

+  moveTab = (from: string, to: string, edge?: 'left' | 'right') => {
+    const workbenches = this.tabViewsMeta.workbenches;
+    let fromItem = workbenches.find(w => w.id === from);
+    const toItem = workbenches.find(w => w.id === to);
+    if (!fromItem || !toItem) {
+      return;
+    }
+
+    const fromIndex = workbenches.indexOf(fromItem);
+
+    fromItem = {
+      ...fromItem,
+      pinned: toItem.pinned,
+    };
+
+    let workbenchesAfterMove = workbenches.toSpliced(fromIndex, 1);
+    const toIndex = workbenchesAfterMove.indexOf(toItem);
+    if (edge === 'left') {
+      workbenchesAfterMove = workbenchesAfterMove.toSpliced(
+        toIndex,
+        0,
+        fromItem
+      );
+    } else {
+      workbenchesAfterMove = workbenchesAfterMove.toSpliced(
+        toIndex + 1,
+        0,
+        fromItem
+      );
+    }
+
+    this.patchTabViewsMeta({
+      workbenches: workbenchesAfterMove,
+    });
+  };
+
  separateView = (tabId: string, viewIndex: number) => {
    const tabMeta = this.tabViewsMeta.workbenches.find(w => w.id === tabId);
    if (!tabMeta) {
@@ -906,6 +953,7 @@ export const showTab = WebContentViewsManager.instance.showTab;
 export const closeTab = WebContentViewsManager.instance.closeTab;
 export const undoCloseTab = WebContentViewsManager.instance.undoCloseTab;
 export const activateView = WebContentViewsManager.instance.activateView;
+export const moveTab = WebContentViewsManager.instance.moveTab;

 export const reloadView = async () => {
  const id = WebContentViewsManager.instance.activeWorkbenchId;