ci(core): eslint errors for core (#4662)

packages/frontend/core/src/components/affine/auth/after-sign-in-send-email.tsx

@@ -7,6 +7,7 @@ import {
 import { Trans } from '@affine/i18n';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { Button } from '@toeverything/components/button';
+import { useAsyncCallback } from '@toeverything/hooks/affine-async-hooks';
 import React, { useCallback } from 'react';
 
 import { useCurrentLoginStatus } from '../../../hooks/affine/use-current-login-status';
@@ -31,7 +32,7 @@ export const AfterSignInSendEmail = ({
     onSignedIn?.();
   }
 
-  const onResendClick = useCallback(async () => {
+  const onResendClick = useAsyncCallback(async () => {
     if (verifyToken) {
       await signIn(email, verifyToken, challenge);
     }

packages/frontend/core/src/components/affine/auth/after-sign-up-send-email.tsx

@@ -6,6 +6,7 @@ import {
 } from '@affine/component/auth-components';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { Button } from '@toeverything/components/button';
+import { useAsyncCallback } from '@toeverything/hooks/affine-async-hooks';
 import { type FC, useCallback } from 'react';
 
 import { useCurrentLoginStatus } from '../../../hooks/affine/use-current-login-status';
@@ -29,7 +30,7 @@ export const AfterSignUpSendEmail: FC<AuthPanelProps> = ({
     onSignedIn?.();
   }
 
-  const onResendClick = useCallback(async () => {
+  const onResendClick = useAsyncCallback(async () => {
     if (verifyToken) {
       await signUp(email, verifyToken, challenge);
     }

packages/frontend/core/src/components/affine/auth/send-email.tsx

@@ -14,6 +14,7 @@ import {
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { useMutation } from '@affine/workspace/affine/gql';
 import { Button } from '@toeverything/components/button';
+import { useAsyncCallback } from '@toeverything/hooks/affine-async-hooks';
 import { useSetAtom } from 'jotai/react';
 import { useCallback, useState } from 'react';
 
@@ -146,7 +147,7 @@ export const SendEmail = ({
   const buttonContent = useButtonContent(emailType);
   const { loading, sendEmail } = useSendEmail(emailType);
 
-  const onSendEmail = useCallback(async () => {
+  const onSendEmail = useAsyncCallback(async () => {
     // TODO: add error handler
     await sendEmail(email);
 

packages/frontend/core/src/components/affine/auth/sign-in-with-password.tsx

@@ -6,6 +6,7 @@ import {
 } from '@affine/component/auth-components';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { Button } from '@toeverything/components/button';
+import { useAsyncCallback } from '@toeverything/hooks/affine-async-hooks';
 // eslint-disable-next-line @typescript-eslint/no-restricted-imports
 import { useSession } from 'next-auth/react';
 import type { FC } from 'react';
@@ -26,7 +27,7 @@ export const SignInWithPassword: FC<AuthPanelProps> = ({
   const [password, setPassword] = useState('');
   const [passwordError, setPasswordError] = useState(false);
 
-  const onSignIn = useCallback(async () => {
+  const onSignIn = useAsyncCallback(async () => {
     const res = await signInCloud('credentials', {
       redirect: false,
       email,

packages/frontend/core/src/components/affine/auth/sign-in.tsx

@@ -9,6 +9,7 @@ import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { useMutation } from '@affine/workspace/affine/gql';
 import { ArrowDownBigIcon, GoogleDuotoneIcon } from '@blocksuite/icons';
 import { Button } from '@toeverything/components/button';
+import { useAsyncCallback } from '@toeverything/hooks/affine-async-hooks';
 import { GraphQLError } from 'graphql';
 import { type FC, useState } from 'react';
 import { useCallback } from 'react';
@@ -52,7 +53,7 @@ export const SignIn: FC<AuthPanelProps> = ({
     onSignedIn?.();
   }
 
-  const onContinue = useCallback(async () => {
+  const onContinue = useAsyncCallback(async () => {
     if (!validateEmail(email)) {
       setIsValidEmail(false);
       return;

packages/frontend/core/src/components/affine/auth/subscription-redirect.tsx

@@ -10,6 +10,7 @@ import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { useMutation, useQuery } from '@affine/workspace/affine/gql';
 import { Button } from '@toeverything/components/button';
 import { Loading } from '@toeverything/components/loading';
+import { useAsyncCallback } from '@toeverything/hooks/affine-async-hooks';
 import { nanoid } from 'nanoid';
 import { Suspense, useCallback, useEffect, useMemo } from 'react';
 
@@ -33,12 +34,12 @@ const usePaymentRedirect = () => {
     mutation: checkoutMutation,
   });
 
-  return useCallback(() => {
-    checkoutSubscription({ recurring, idempotencyKey })
-      .then(({ checkout }) => {
-        window.open(checkout, '_self', 'norefferer');
-      })
-      .catch(e => console.error(e));
+  return useAsyncCallback(async () => {
+    const { checkout } = await checkoutSubscription({
+      recurring,
+      idempotencyKey,
+    });
+    window.open(checkout, '_self', 'norefferer');
   }, [recurring, idempotencyKey, checkoutSubscription]);
 };
 

packages/frontend/core/src/components/affine/create-workspace-modal/index.tsx

@@ -9,6 +9,7 @@ import {
   Modal,
 } from '@toeverything/components/modal';
 import { Tooltip } from '@toeverything/components/tooltip';
+import { useAsyncCallback } from '@toeverything/hooks/affine-async-hooks';
 import type {
   LoadDBFileResult,
   SelectDBFileLocationResult,
@@ -330,14 +331,13 @@ export const CreateWorkspaceModal = ({
     ]
   );
 
-  const onConfirmName = useCallback(
-    (name: string) => {
+  const onConfirmName = useAsyncCallback(
+    async (name: string) => {
       setWorkspaceName(name);
       // this will be the last step for web for now
       // fix me later
-      createLocalWorkspace(name).then(id => {
-        onCreate(id);
-      });
+      const id = await createLocalWorkspace(name);
+      onCreate(id);
     },
     [createLocalWorkspace, onCreate]
   );

packages/frontend/core/src/components/affine/enable-affine-cloud-modal/index.tsx

@@ -19,7 +19,7 @@ export const EnableAffineCloudModal = ({
   const setAuthAtom = useSetAtom(authAtom);
   const setOnceSignedInEvent = useSetAtom(setOnceSignedInEventAtom);
 
-  const confirm = useCallback(async () => {
+  const confirm = useCallback(() => {
     return propsOnConfirm?.();
   }, [propsOnConfirm]);
 

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

@@ -1,17 +1,17 @@
 import { pushNotificationAtom } from '@affine/component/notification-center';
 import { SettingRow } from '@affine/component/setting-components';
-import { isDesktop } from '@affine/env/constant';
 import type { AffineOfficialWorkspace } from '@affine/env/workspace';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { Button } from '@toeverything/components/button';
+import { useAsyncCallback } from '@toeverything/hooks/affine-async-hooks';
 import type { SaveDBFileResult } from '@toeverything/infra/type';
 import { useSetAtom } from 'jotai';
-import { useCallback, useState } from 'react';
+import { useState } from 'react';
 import type { Doc } from 'yjs';
 import { encodeStateAsUpdate } from 'yjs';
 
 async function syncBlobsToSqliteDb(workspace: AffineOfficialWorkspace) {
-  if (window.apis && isDesktop) {
+  if (window.apis && environment.isDesktop) {
     const bs = workspace.blockSuiteWorkspace.blob;
     const blobsInDb = await window.apis.db.getBlobKeys(workspace.id);
     const blobsInStorage = await bs.list();
@@ -32,7 +32,7 @@ async function syncBlobsToSqliteDb(workspace: AffineOfficialWorkspace) {
 }
 
 async function syncDocsToSqliteDb(workspace: AffineOfficialWorkspace) {
-  if (window.apis && isDesktop) {
+  if (window.apis && environment.isDesktop) {
     const workspaceId = workspace.blockSuiteWorkspace.doc.guid;
     const syncDoc = async (doc: Doc) => {
       await window.apis.db.applyDocUpdate(
@@ -56,7 +56,7 @@ export const ExportPanel = ({ workspace }: ExportPanelProps) => {
   const t = useAFFiNEI18N();
   const [syncing, setSyncing] = useState(false);
   const pushNotification = useSetAtom(pushNotificationAtom);
-  const onExport = useCallback(async () => {
+  const onExport = useAsyncCallback(async () => {
     if (syncing) {
       return;
     }

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

@@ -77,8 +77,8 @@ export const ProfilePanel = ({ workspace, isOwner }: ProfilePanelProps) => {
   );
 
   const handleUploadAvatar = useCallback(
-    async (file: File) => {
-      await update(file)
+    (file: File) => {
+      update(file)
         .then(() => {
           pushNotification({
             title: 'Update workspace avatar success',

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

@@ -11,9 +11,10 @@ import { WorkspaceFlavour } from '@affine/env/workspace';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { Button } from '@toeverything/components/button';
 import { Tooltip } from '@toeverything/components/tooltip';
+import { useAsyncCallback } from '@toeverything/hooks/affine-async-hooks';
 import { useBlockSuiteWorkspaceName } from '@toeverything/hooks/use-block-suite-workspace-name';
 import { noop } from 'foxact/noop';
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 
 import { toast } from '../../../utils';
 import { EnableAffineCloudModal } from '../enable-affine-cloud-modal';
@@ -52,7 +53,7 @@ const PublishPanelAffine = (props: PublishPanelAffineProps) => {
     );
   }, []);
 
-  const copyUrl = useCallback(async () => {
+  const copyUrl = useAsyncCallback(async () => {
     await navigator.clipboard.writeText(shareUrl);
     toast(t['Copied link to clipboard']());
   }, [shareUrl, t]);

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

@@ -16,6 +16,7 @@ import { useMutation, useQuery } from '@affine/workspace/affine/gql';
 import { ArrowRightSmallIcon, CameraIcon } from '@blocksuite/icons';
 import { Avatar } from '@toeverything/components/avatar';
 import { Button } from '@toeverything/components/button';
+import { useAsyncCallback } from '@toeverything/hooks/affine-async-hooks';
 import { validateAndReduceImage } from '@toeverything/hooks/use-block-suite-workspace-avatar-url';
 import bytes from 'bytes';
 import { useSetAtom } from 'jotai';
@@ -50,7 +51,7 @@ export const UserAvatar = () => {
     mutation: removeAvatarMutation,
   });
 
-  const handleUpdateUserAvatar = useCallback(
+  const handleUpdateUserAvatar = useAsyncCallback(
     async (file: File) => {
       try {
         const reducedFile = await validateAndReduceImage(file);

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

@@ -22,6 +22,7 @@ import { ArrowRightSmallIcon } from '@blocksuite/icons';
 import { Skeleton } from '@mui/material';
 import { Button, IconButton } from '@toeverything/components/button';
 import { Loading } from '@toeverything/components/loading';
+import { useAsyncCallback } from '@toeverything/hooks/affine-async-hooks';
 import { useSetAtom } from 'jotai';
 import { Suspense, useCallback, useMemo, useState } from 'react';
 
@@ -255,8 +256,8 @@ const PaymentMethodUpdater = () => {
   });
   const t = useAFFiNEI18N();
 
-  const update = useCallback(() => {
-    trigger(null, {
+  const update = useAsyncCallback(async () => {
+    await trigger(null, {
       onSuccess: data => {
         window.open(data.createCustomerPortal, '_blank', 'noopener noreferrer');
       },

packages/frontend/core/src/components/affine/setting-modal/general-setting/plans/actions.tsx

@@ -4,9 +4,10 @@ import {
   resumeSubscriptionMutation,
 } from '@affine/graphql';
 import { useMutation } from '@affine/workspace/affine/gql';
+import { useAsyncCallback } from '@toeverything/hooks/affine-async-hooks';
 import { nanoid } from 'nanoid';
 import type { PropsWithChildren } from 'react';
-import { useCallback, useState } from 'react';
+import { useState } from 'react';
 
 import { ConfirmLoadingModal, DowngradeModal } from './modals';
 
@@ -30,8 +31,8 @@ export const CancelAction = ({
     mutation: cancelSubscriptionMutation,
   });
 
-  const downgrade = useCallback(() => {
-    trigger(
+  const downgrade = useAsyncCallback(async () => {
+    await trigger(
       { idempotencyKey },
       {
         onSuccess: data => {
@@ -78,8 +79,8 @@ export const ResumeAction = ({
     mutation: resumeSubscriptionMutation,
   });
 
-  const resume = useCallback(() => {
-    trigger(
+  const resume = useAsyncCallback(async () => {
+    await trigger(
       { idempotencyKey },
       {
         onSuccess: data => {

packages/frontend/core/src/components/affine/setting-modal/general-setting/plans/plan-card.tsx

@@ -15,6 +15,7 @@ import { useMutation } from '@affine/workspace/affine/gql';
 import { DoneIcon } from '@blocksuite/icons';
 import { Button } from '@toeverything/components/button';
 import { Tooltip } from '@toeverything/components/tooltip';
+import { useAsyncCallback } from '@toeverything/hooks/affine-async-hooks';
 import { useSetAtom } from 'jotai';
 import { useAtom } from 'jotai';
 import { nanoid } from 'nanoid';
@@ -364,7 +365,7 @@ const Upgrade = ({
   }, [onSubscriptionUpdate]);
 
   const [, openPaymentDisableModal] = useAtom(openPaymentDisableAtom);
-  const upgrade = useCallback(() => {
+  const upgrade = useAsyncCallback(async () => {
     if (!runtimeConfig.enablePayment) {
       openPaymentDisableModal(true);
       return;
@@ -373,7 +374,7 @@ const Upgrade = ({
     if (newTabRef.current) {
       newTabRef.current.focus();
     } else {
-      trigger(
+      await trigger(
         { recurring, idempotencyKey },
         {
           onSuccess: data => {
@@ -439,8 +440,8 @@ const ChangeRecurring = ({
     mutation: updateSubscriptionMutation,
   });
 
-  const change = useCallback(() => {
-    trigger(
+  const change = useAsyncCallback(async () => {
+    await trigger(
       { recurring: to, idempotencyKey },
       {
         onSuccess: data => {
@@ -492,7 +493,7 @@ const ChangeRecurring = ({
 const SignUpAction = ({ children }: PropsWithChildren) => {
   const setOpen = useSetAtom(authAtom);
 
-  const onClickSignIn = useCallback(async () => {
+  const onClickSignIn = useCallback(() => {
     setOpen(state => ({
       ...state,
       openModal: true,

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

@@ -2,6 +2,7 @@ import { pushNotificationAtom } from '@affine/component/notification-center';
 import { WorkspaceSubPath } from '@affine/env/workspace';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { rootWorkspacesMetadataAtom } from '@affine/workspace/atom';
+import { useAsyncCallback } from '@toeverything/hooks/affine-async-hooks';
 import { useBlockSuiteWorkspaceName } from '@toeverything/hooks/use-block-suite-workspace-name';
 import { useSetAtom } from 'jotai';
 import { useAtomValue } from 'jotai';
@@ -65,7 +66,7 @@ export const WorkspaceSetting = ({ workspaceId }: { workspaceId: string }) => {
     workspaces,
   ]);
 
-  const handleDeleteWorkspace = useCallback(async () => {
+  const handleDeleteWorkspace = useAsyncCallback(async () => {
     closeAndJumpOut();
     await deleteWorkspace(workspaceId);
 
@@ -75,7 +76,7 @@ export const WorkspaceSetting = ({ workspaceId }: { workspaceId: string }) => {
     });
   }, [closeAndJumpOut, deleteWorkspace, pushNotification, t, workspaceId]);
 
-  const handleLeaveWorkspace = useCallback(async () => {
+  const handleLeaveWorkspace = useAsyncCallback(async () => {
     closeAndJumpOut();
     await leaveWorkspace(workspaceId, workspaceName);
 

packages/frontend/core/src/components/blocksuite/block-suite-header-title/operation-menu.tsx

@@ -18,6 +18,7 @@ import {
   MenuItem,
   MenuSeparator,
 } from '@toeverything/components/menu';
+import { useAsyncCallback } from '@toeverything/hooks/affine-async-hooks';
 import {
   useBlockSuitePageMeta,
   usePageMetaHelper,
@@ -99,7 +100,7 @@ export const PageMenu = ({ rename, pageId }: PageMenuProps) => {
   const exportHandler = useExportPage(currentPage);
   const setPageMode = useSetAtom(setPageModeAtom);
 
-  const duplicate = useCallback(async () => {
+  const duplicate = useAsyncCallback(async () => {
     const currentPageMeta = currentPage.meta;
     const newPage = createPage();
     await newPage.waitForLoaded();

packages/frontend/core/src/components/blocksuite/block-suite-page-list/utils.tsx

@@ -1,5 +1,6 @@
 import { toast } from '@affine/component';
 import { WorkspaceSubPath } from '@affine/env/workspace';
+import { useAsyncCallback } from '@toeverything/hooks/affine-async-hooks';
 import { useBlockSuiteWorkspaceHelper } from '@toeverything/hooks/use-block-suite-workspace-helper';
 import { initEmptyPage } from '@toeverything/infra/blocksuite';
 import { useAtomValue, useSetAtom } from 'jotai';
@@ -33,7 +34,7 @@ export const usePageHelper = (blockSuiteWorkspace: BlockSuiteWorkspace) => {
   const createEdgelessAndOpen = useCallback(() => {
     return createPageAndOpen('edgeless');
   }, [createPageAndOpen]);
-  const importFileAndOpen = useCallback(async () => {
+  const importFileAndOpen = useAsyncCallback(async () => {
     const { showImportModal } = await import('@blocksuite/blocks');
     const onSuccess = (pageIds: string[], isWorkspaceFile: boolean) => {
       toast(

packages/frontend/core/src/components/cloud/login-card.tsx

@@ -1,6 +1,7 @@
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { CloudWorkspaceIcon } from '@blocksuite/icons';
 import { Avatar } from '@toeverything/components/avatar';
+import { useAsyncCallback } from '@toeverything/hooks/affine-async-hooks';
 
 import { useCurrentLoginStatus } from '../../hooks/affine/use-current-login-status';
 import { useCurrentUser } from '../../hooks/affine/use-current-user';
@@ -10,16 +11,16 @@ import { StyledSignInButton } from '../pure/footer/styles';
 export const LoginCard = () => {
   const t = useAFFiNEI18N();
   const loginStatus = useCurrentLoginStatus();
+
+  const onSignInClick = useAsyncCallback(async () => {
+    await signInCloud();
+  }, []);
+
   if (loginStatus === 'authenticated') {
     return <UserCard />;
   }
   return (
-    <StyledSignInButton
-      data-testid="sign-in-button"
-      onClick={async () => {
-        signInCloud().catch(console.error);
-      }}
-    >
+    <StyledSignInButton data-testid="sign-in-button" onClick={onSignInClick}>
       <div className="circle">
         <CloudWorkspaceIcon />
       </div>{' '}

packages/frontend/core/src/components/pure/cmdk/data.tsx

@@ -24,7 +24,7 @@ import {
   PreconditionStrategy,
 } from '@toeverything/infra/command';
 import { atom, useAtomValue } from 'jotai';
-import groupBy from 'lodash/groupBy';
+import { groupBy } from 'lodash-es';
 import { useCallback, useMemo } from 'react';
 
 import {

packages/frontend/core/src/components/pure/cmdk/main.tsx

@@ -2,6 +2,7 @@ import { Command } from '@affine/cmdk';
 import { formatDate } from '@affine/component/page-list';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import type { PageMeta } from '@blocksuite/store';
+import { useAsyncCallback } from '@toeverything/hooks/affine-async-hooks';
 import type { CommandCategory } from '@toeverything/infra/command';
 import clsx from 'clsx';
 import { useAtom } from 'jotai';
@@ -55,6 +56,19 @@ const QuickSearchGroup = ({
   const t = useAFFiNEI18N();
   const i18nkey = categoryToI18nKey[category];
   const [query, setQuery] = useAtom(cmdkQueryAtom);
+
+  const onCommendSelect = useAsyncCallback(
+    async (command: CMDKCommand) => {
+      try {
+        await command.run();
+      } finally {
+        setQuery('');
+        onOpenChange?.(false);
+      }
+    },
+    [setQuery, onOpenChange]
+  );
+
   return (
     <Command.Group key={category} heading={t[i18nkey]()}>
       {commands.map(command => {
@@ -67,11 +81,7 @@ const QuickSearchGroup = ({
         return (
           <Command.Item
             key={command.id}
-            onSelect={() => {
-              command.run();
-              setQuery('');
-              onOpenChange?.(false);
-            }}
+            onSelect={() => onCommendSelect(command)}
             value={command.value}
             data-is-danger={
               command.id === 'editor:page-move-to-trash' ||

packages/frontend/core/src/components/pure/workspace-slider-bar/collections/collections-list.tsx

@@ -18,8 +18,9 @@ import type { DragEndEvent } from '@dnd-kit/core';
 import { useDroppable } from '@dnd-kit/core';
 import * as Collapsible from '@radix-ui/react-collapsible';
 import { IconButton } from '@toeverything/components/button';
+import { useAsyncCallback } from '@toeverything/hooks/affine-async-hooks';
 import { useBlockSuitePageMeta } from '@toeverything/hooks/use-block-suite-page-meta';
-import { useCallback, useMemo, useState } from 'react';
+import { useMemo, useState } from 'react';
 import { useLocation } from 'react-router-dom';
 
 import { collectionsCRUDAtom } from '../../../../atoms/collections';
@@ -80,9 +81,9 @@ const CollectionRenderer = ({
     () => new Set(collection.allowList),
     [collection.allowList]
   );
-  const removeFromAllowList = useCallback(
-    (id: string) => {
-      return setting.updateCollection({
+  const removeFromAllowList = useAsyncCallback(
+    async (id: string) => {
+      await setting.updateCollection({
         ...collection,
         allowList: collection.allowList?.filter(v => v != id),
       });

packages/frontend/core/src/components/pure/workspace-slider-bar/favorite/add-favourite-button.tsx

@@ -1,8 +1,8 @@
 import { PlusIcon } from '@blocksuite/icons';
 import type { Workspace } from '@blocksuite/store';
 import { IconButton } from '@toeverything/components/button';
+import { useAsyncCallback } from '@toeverything/hooks/affine-async-hooks';
 import { usePageMetaHelper } from '@toeverything/hooks/use-block-suite-page-meta';
-import { useCallback } from 'react';
 
 import { usePageHelper } from '../../../blocksuite/block-suite-page-list/utils';
 
@@ -13,7 +13,7 @@ type AddFavouriteButtonProps = {
 export const AddFavouriteButton = ({ workspace }: AddFavouriteButtonProps) => {
   const { createPage } = usePageHelper(workspace);
   const { setPageMeta } = usePageMetaHelper(workspace);
-  const handleAddFavorite = useCallback(async () => {
+  const handleAddFavorite = useAsyncCallback(async () => {
     const page = createPage();
     await page.waitForLoaded();
     setPageMeta(page.id, { favorite: true });

packages/frontend/core/src/components/pure/workspace-slider-bar/user-with-workspace-list/index.tsx

@@ -25,7 +25,7 @@ const SignInItem = () => {
 
   const t = useAFFiNEI18N();
 
-  const onClickSignIn = useCallback(async () => {
+  const onClickSignIn = useCallback(() => {
     if (!runtimeConfig.enableCloud) {
       setDisableCloudOpen(true);
     } else {
@@ -76,7 +76,7 @@ export const UserWithWorkspaceList = ({
     onEventEnd?.();
   }, [onEventEnd, setOpenCreateWorkspaceModal]);
 
-  const onAddWorkspace = useCallback(async () => {
+  const onAddWorkspace = useCallback(() => {
     setOpenCreateWorkspaceModal('add');
     onEventEnd?.();
   }, [onEventEnd, setOpenCreateWorkspaceModal]);

packages/frontend/core/src/components/pure/workspace-slider-bar/user-with-workspace-list/workspace-list/index.tsx

@@ -193,7 +193,7 @@ export const AFFiNEWorkspaceList = ({
     onEventEnd?.();
   }, [onEventEnd, setOpenCreateWorkspaceModal]);
 
-  const onAddWorkspace = useCallback(async () => {
+  const onAddWorkspace = useCallback(() => {
     setOpenCreateWorkspaceModal('add');
     onEventEnd?.();
   }, [onEventEnd, setOpenCreateWorkspaceModal]);

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

@@ -18,6 +18,7 @@ import { FolderIcon, SettingsIcon } from '@blocksuite/icons';
 import type { Page } from '@blocksuite/store';
 import { useDroppable } from '@dnd-kit/core';
 import { Menu } from '@toeverything/components/menu';
+import { useAsyncCallback } from '@toeverything/hooks/affine-async-hooks';
 import { useAtom, useAtomValue } from 'jotai';
 import type { HTMLAttributes, ReactElement } from 'react';
 import { forwardRef, useCallback, useEffect, useMemo } from 'react';
@@ -107,7 +108,7 @@ export const RootAppSidebar = ({
   );
   const generalShortcutsInfo = useGeneralShortcuts();
 
-  const onClickNewPage = useCallback(async () => {
+  const onClickNewPage = useAsyncCallback(async () => {
     const page = createPage();
     await page.waitForLoaded();
     openPage(page.id);

packages/frontend/core/src/components/workspace-header.tsx

@@ -5,7 +5,7 @@ import {
   useCollectionManager,
 } from '@affine/component/page-list';
 import { Unreachable } from '@affine/env/constant';
-import type { Collection } from '@affine/env/filter';
+import type { Collection, Filter } from '@affine/env/filter';
 import type {
   WorkspaceFlavour,
   WorkspaceHeaderProps,
@@ -13,6 +13,7 @@ import type {
 import { WorkspaceSubPath } from '@affine/env/workspace';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { DeleteIcon } from '@blocksuite/icons';
+import { useAsyncCallback } from '@toeverything/hooks/affine-async-hooks';
 import { useSetAtom } from 'jotai/react';
 import { useCallback } from 'react';
 
@@ -44,6 +45,17 @@ const FilterContainer = ({ workspaceId }: { workspaceId: string }) => {
     },
     [setting, navigateHelper, workspaceId]
   );
+
+  const onFilterChange = useAsyncCallback(
+    async (filterList: Filter[]) => {
+      await setting.updateCollection({
+        ...setting.currentCollection,
+        filterList,
+      });
+    },
+    [setting]
+  );
+
   if (!setting.isDefault || !setting.currentCollection.filterList.length) {
     return null;
   }
@@ -54,12 +66,7 @@ const FilterContainer = ({ workspaceId }: { workspaceId: string }) => {
         <FilterList
           propertiesMeta={currentWorkspace.blockSuiteWorkspace.meta.properties}
           value={setting.currentCollection.filterList}
-          onChange={filterList => {
-            return setting.updateCollection({
-              ...setting.currentCollection,
-              filterList,
-            });
-          }}
+          onChange={onFilterChange}
         />
       </div>
       <div>