feat(electron): mouse middle click to close tab (#7759)

fix AF-1200

packages/frontend/core/src/modules/app-tabs-header/views/app-tabs-header.tsx

@@ -14,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 { useCatchEventCallback } from '@affine/core/hooks/use-catch-event-hook';
 import type { AffineDNDData } from '@affine/core/types/dnd';
 import { apis, events } from '@affine/electron-api';
 import { useI18n } from '@affine/i18n';
@@ -92,15 +93,19 @@ const WorkbenchTab = ({
     },
     [tabsHeaderService, workbench.id]
   );
-  const onCloseTab: MouseEventHandler = useAsyncCallback(
+  const handleAuxClick: MouseEventHandler = useCatchEventCallback(
     async e => {
-      e.stopPropagation();
-
-      await tabsHeaderService.closeTab?.(workbench.id);
+      if (e.button === 1) {
+        await tabsHeaderService.closeTab?.(workbench.id);
+      }
     },
     [tabsHeaderService, workbench.id]
   );
 
+  const handleCloseTab = useCatchEventCallback(async () => {
+    await tabsHeaderService.closeTab?.(workbench.id);
+  }, [tabsHeaderService, workbench.id]);
+
   const { dropTargetRef, closestEdge } = useDropTarget<AffineDNDData>(
     () => ({
       closestEdge: {
@@ -154,6 +159,7 @@ const WorkbenchTab = ({
                 onContextMenu={() => {
                   onContextMenu(viewIdx);
                 }}
+                onAuxClick={handleAuxClick}
                 onClick={e => {
                   e.stopPropagation();
                   onActivateView(viewIdx);
@@ -185,7 +191,7 @@ const WorkbenchTab = ({
               <button
                 data-testid="close-tab-button"
                 className={styles.tabCloseButton}
-                onClick={onCloseTab}
+                onClick={handleCloseTab}
               >
                 <CloseIcon />
               </button>

packages/frontend/core/src/modules/workbench/view/workbench-link.tsx

@@ -1,5 +1,5 @@
 import { useAppSettingHelper } from '@affine/core/hooks/affine/use-app-setting-helper';
-import { useAsyncCallback } from '@affine/core/hooks/affine-async-hooks';
+import { useCatchEventCallback } from '@affine/core/hooks/use-catch-event-hook';
 import { useLiveData, useService } from '@toeverything/infra';
 import { type To } from 'history';
 import { forwardRef, type MouseEvent } from 'react';
@@ -21,10 +21,9 @@ export const WorkbenchLink = forwardRef<
   const link =
     basename +
     (typeof to === 'string' ? to : `${to.pathname}${to.search}${to.hash}`);
-  const handleClick = useAsyncCallback(
+  const handleClick = useCatchEventCallback(
     async (event: React.MouseEvent<HTMLAnchorElement>) => {
       event.preventDefault();
-      event.stopPropagation();
       if (onClick?.(event) === false) {
         return;
       }