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

fix AF-1200

packages/frontend/core/src/components/affine/auth/user-plan-button.tsx

@@ -1,9 +1,10 @@
 import { Tooltip } from '@affine/component/ui/tooltip';
+import { useCatchEventCallback } from '@affine/core/hooks/use-catch-event-hook';
 import { SubscriptionPlan } from '@affine/graphql';
 import { useI18n } from '@affine/i18n';
 import { useLiveData, useServices } from '@toeverything/infra';
 import { useSetAtom } from 'jotai';
-import { useCallback, useEffect } from 'react';
+import { useEffect } from 'react';
 
 import { openSettingModalAtom } from '../../../atoms';
 import {
@@ -35,17 +36,13 @@ export const UserPlanButton = () => {
   }, [subscriptionService]);
 
   const setSettingModalAtom = useSetAtom(openSettingModalAtom);
-  const handleClick = useCallback(
-    (e: React.MouseEvent<HTMLDivElement>) => {
-      e.stopPropagation();
-      setSettingModalAtom({
-        open: true,
-        activeTab: 'plans',
-        scrollAnchor: 'cloudPricingPlan',
-      });
-    },
-    [setSettingModalAtom]
-  );
+  const handleClick = useCatchEventCallback(() => {
+    setSettingModalAtom({
+      open: true,
+      activeTab: 'plans',
+      scrollAnchor: 'cloudPricingPlan',
+    });
+  }, [setSettingModalAtom]);
 
   const t = useI18n();
 

packages/frontend/core/src/components/affine/setting-modal/account-setting/index.tsx

@@ -6,6 +6,7 @@ import {
 import { Avatar } from '@affine/component/ui/avatar';
 import { Button } from '@affine/component/ui/button';
 import { useAsyncCallback } from '@affine/core/hooks/affine-async-hooks';
+import { useCatchEventCallback } from '@affine/core/hooks/use-catch-event-hook';
 import { track } from '@affine/core/mixpanel';
 import { SubscriptionPlan } from '@affine/graphql';
 import { useI18n } from '@affine/i18n';
@@ -17,7 +18,7 @@ import {
   useServices,
 } from '@toeverything/infra';
 import { useSetAtom } from 'jotai';
-import type { FC, MouseEvent } from 'react';
+import type { FC } from 'react';
 import { useCallback, useEffect, useState } from 'react';
 
 import {
@@ -53,14 +54,10 @@ export const UserAvatar = () => {
     [session]
   );
 
-  const handleRemoveUserAvatar = useAsyncCallback(
-    async (e: MouseEvent<HTMLButtonElement>) => {
-      track.$.settingsPanel.accountSettings.removeAvatar();
-      e.stopPropagation();
-      await session.removeAvatar();
-    },
-    [session]
-  );
+  const handleRemoveUserAvatar = useCatchEventCallback(async () => {
+    track.$.settingsPanel.accountSettings.removeAvatar();
+    await session.removeAvatar();
+  }, [session]);
 
   return (
     <Upload

packages/frontend/core/src/components/affine/setting-modal/workspace-setting/new-workspace-setting-detail/profile.tsx

@@ -2,14 +2,14 @@ import { FlexWrapper, Input, notify, Wrapper } from '@affine/component';
 import { Button } from '@affine/component/ui/button';
 import { WorkspaceAvatar } from '@affine/component/workspace-avatar';
 import { Upload } from '@affine/core/components/pure/file-upload';
-import { useAsyncCallback } from '@affine/core/hooks/affine-async-hooks';
+import { useCatchEventCallback } from '@affine/core/hooks/use-catch-event-hook';
 import { WorkspacePermissionService } from '@affine/core/modules/permissions';
 import { validateAndReduceImage } from '@affine/core/utils/reduce-image';
 import { UNTITLED_WORKSPACE_NAME } from '@affine/env/constant';
 import { useI18n } from '@affine/i18n';
 import { CameraIcon } from '@blocksuite/icons/rc';
 import { useLiveData, useService, WorkspaceService } from '@toeverything/infra';
-import type { KeyboardEvent, MouseEvent } from 'react';
+import type { KeyboardEvent } from 'react';
 import { useCallback, useEffect, useState } from 'react';
 
 import * as style from './style.css';
@@ -106,13 +106,9 @@ export const ProfilePanel = () => {
     handleUpdateWorkspaceName(input);
   }, [handleUpdateWorkspaceName, input]);
 
-  const handleRemoveUserAvatar = useAsyncCallback(
-    async (e: MouseEvent<HTMLButtonElement>) => {
-      e.stopPropagation();
-      await setWorkspaceAvatar(null);
-    },
-    [setWorkspaceAvatar]
-  );
+  const handleRemoveUserAvatar = useCatchEventCallback(async () => {
+    await setWorkspaceAvatar(null);
+  }, [setWorkspaceAvatar]);
 
   const handleUploadAvatar = useCallback(
     (file: File) => {

packages/frontend/core/src/components/app-sidebar/app-download-button/index.tsx

@@ -1,3 +1,4 @@
+import { useCatchEventCallback } from '@affine/core/hooks/use-catch-event-hook';
 import { track } from '@affine/core/mixpanel';
 import { CloseIcon, DownloadIcon } from '@blocksuite/icons/rc';
 import clsx from 'clsx';
@@ -15,7 +16,7 @@ export function AppDownloadButton({
 }) {
   const [show, setShow] = useState(true);
 
-  const handleClose = useCallback(() => {
+  const handleClose = useCatchEventCallback(() => {
     setShow(false);
   }, []);
 
@@ -39,13 +40,7 @@ export function AppDownloadButton({
         <DownloadIcon className={styles.icon} />
         <span className={styles.ellipsisTextOverflow}>Download App</span>
       </div>
-      <div
-        className={styles.closeIcon}
-        onClick={e => {
-          e.stopPropagation();
-          handleClose();
-        }}
-      >
+      <div className={styles.closeIcon} onClick={handleClose}>
         <CloseIcon />
       </div>
       <div className={styles.particles} aria-hidden="true"></div>

packages/frontend/core/src/components/app-sidebar/app-updater-button/index.tsx

@@ -1,4 +1,5 @@
 import { Tooltip } from '@affine/component';
+import { useCatchEventCallback } from '@affine/core/hooks/use-catch-event-hook';
 import { popupWindow } from '@affine/core/utils';
 import { Unreachable } from '@affine/env/constant';
 import { useI18n } from '@affine/i18n';
@@ -118,13 +119,9 @@ function OpenDownloadPage({ updateAvailable }: ButtonContentProps) {
 
 function WhatsNew({ onDismissChangelog }: ButtonContentProps) {
   const t = useI18n();
-  const onClickClose: React.MouseEventHandler = useCallback(
-    e => {
-      onDismissChangelog();
-      e.stopPropagation();
-    },
-    [onDismissChangelog]
-  );
+  const onClickClose = useCatchEventCallback(() => {
+    onDismissChangelog();
+  }, [onDismissChangelog]);
   return (
     <>
       <div className={clsx([styles.whatsNewLabel])}>

packages/frontend/core/src/components/page-list/docs/page-tags.tsx

@@ -1,11 +1,11 @@
 import { Menu } from '@affine/component';
+import { useCatchEventCallback } from '@affine/core/hooks/use-catch-event-hook';
 import type { Tag } from '@affine/core/modules/tag';
 import { CloseIcon, MoreHorizontalIcon } from '@blocksuite/icons/rc';
 import { LiveData, useLiveData } from '@toeverything/infra';
 import { assignInlineVars } from '@vanilla-extract/dynamic';
 import clsx from 'clsx';
-import type { MouseEventHandler } from 'react';
-import { useCallback, useMemo } from 'react';
+import { useMemo } from 'react';
 
 import { stopPropagation } from '../utils';
 import * as styles from './page-tags.css';
@@ -62,13 +62,9 @@ export const TagItem = ({
 }: TagItemProps) => {
   const value = useLiveData(tag?.value$);
   const color = useLiveData(tag?.color$);
-  const handleRemove: MouseEventHandler = useCallback(
-    e => {
-      e.stopPropagation();
-      onRemoved?.();
-    },
-    [onRemoved]
-  );
+  const handleRemove = useCatchEventCallback(() => {
+    onRemoved?.();
+  }, [onRemoved]);
   return (
     <div
       data-testid="page-tag"

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

@@ -1,4 +1,5 @@
 import { Button, Input, Modal } from '@affine/component';
+import { useCatchEventCallback } from '@affine/core/hooks/use-catch-event-hook';
 import { useI18n } from '@affine/i18n';
 import type { KeyboardEvent } from 'react';
 import { useCallback, useMemo, useState } from 'react';
@@ -74,7 +75,7 @@ export const CreateCollection = ({
     }
     onConfirm(value);
   }, [onConfirm, value, isNameEmpty]);
-  const onKeyDown = useCallback(
+  const onKeyDown = useCatchEventCallback(
     (e: KeyboardEvent<HTMLInputElement>) => {
       if (e.key === 'Escape') {
         if (isNameEmpty) {
@@ -83,7 +84,6 @@ export const CreateCollection = ({
           e.currentTarget.blur();
         }
       }
-      e.stopPropagation();
     },
     [isNameEmpty]
   );