refactor(core): replace all notification relies on jotai (#6417)

- remove all notification that implemented with jotai and replaced with new `notify`
- Add some notify presets:
  - `notify.error`
  - `notify.success`
  - `notify.warning`

packages/frontend/component/src/components/auth-components/change-password-page.tsx

@@ -1,11 +1,10 @@
 import type { PasswordLimitsFragment } from '@affine/graphql';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
-import { useSetAtom } from 'jotai';
 import type { FC } from 'react';
 import { useCallback, useState } from 'react';
 
 import { Button } from '../../ui/button';
-import { pushNotificationAtom } from '../notification-center';
+import { notify } from '../../ui/notification';
 import { AuthPageContainer } from './auth-page-container';
 import { SetPassword } from './set-password';
 import type { User } from './type';
@@ -23,22 +22,19 @@ export const ChangePasswordPage: FC<{
 }) => {
   const t = useAFFiNEI18N();
   const [hasSetUp, setHasSetUp] = useState(false);
-  const pushNotification = useSetAtom(pushNotificationAtom);
 
   const onSetPassword = useCallback(
     (passWord: string) => {
       propsOnSetPassword(passWord)
         .then(() => setHasSetUp(true))
         .catch(e =>
-          pushNotification({
+          notify.error({
             title: t['com.affine.auth.password.set-failed'](),
             message: String(e),
-            key: Date.now().toString(),
-            type: 'error',
           })
         );
     },
-    [propsOnSetPassword, t, pushNotification]
+    [propsOnSetPassword, t]
   );
 
   return (

packages/frontend/component/src/components/auth-components/set-password-page.tsx

@@ -1,11 +1,10 @@
 import type { PasswordLimitsFragment } from '@affine/graphql';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
-import { useSetAtom } from 'jotai';
 import type { FC } from 'react';
 import { useCallback, useState } from 'react';
 
 import { Button } from '../../ui/button';
-import { pushNotificationAtom } from '../notification-center';
+import { notify } from '../../ui/notification';
 import { AuthPageContainer } from './auth-page-container';
 import { SetPassword } from './set-password';
 import type { User } from './type';
@@ -23,22 +22,19 @@ export const SetPasswordPage: FC<{
 }) => {
   const t = useAFFiNEI18N();
   const [hasSetUp, setHasSetUp] = useState(false);
-  const pushNotification = useSetAtom(pushNotificationAtom);
 
   const onSetPassword = useCallback(
     (passWord: string) => {
       propsOnSetPassword(passWord)
         .then(() => setHasSetUp(true))
         .catch(e =>
-          pushNotification({
+          notify.error({
             title: t['com.affine.auth.password.set-failed'](),
             message: String(e),
-            key: Date.now().toString(),
-            type: 'error',
           })
         );
     },
-    [propsOnSetPassword, pushNotification, t]
+    [propsOnSetPassword, t]
   );
 
   return (

packages/frontend/component/src/components/auth-components/sign-up-page.tsx

@@ -1,11 +1,10 @@
 import type { PasswordLimitsFragment } from '@affine/graphql';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
-import { useSetAtom } from 'jotai';
 import type { FC } from 'react';
 import { useCallback, useState } from 'react';
 
 import { Button } from '../../ui/button';
-import { pushNotificationAtom } from '../notification-center';
+import { notify } from '../../ui/notification';
 import { AuthPageContainer } from './auth-page-container';
 import { SetPassword } from './set-password';
 import type { User } from './type';
@@ -25,22 +24,19 @@ export const SignUpPage: FC<{
 }) => {
   const t = useAFFiNEI18N();
   const [hasSetUp, setHasSetUp] = useState(false);
-  const pushNotification = useSetAtom(pushNotificationAtom);
 
   const onSetPassword = useCallback(
     (passWord: string) => {
       propsOnSetPassword(passWord)
         .then(() => setHasSetUp(true))
         .catch(e =>
-          pushNotification({
+          notify.error({
             title: t['com.affine.auth.password.set-failed'](),
             message: String(e),
-            key: Date.now().toString(),
-            type: 'error',
           })
         );
     },
-    [propsOnSetPassword, pushNotification, t]
+    [propsOnSetPassword, t]
   );
   const onLater = useCallback(() => {
     setHasSetUp(true);

packages/frontend/component/src/components/notification-center/index.jotai.ts

@@ -1,6 +1,9 @@
 import { atom } from 'jotai';
 import { nanoid } from 'nanoid';
 
+/**
+ * @deprecated use `import type { Notification } from '@affine/component'` instead
+ */
 export type Notification = {
   key?: string;
   title: string;
@@ -19,6 +22,9 @@ const notificationsBaseAtom = atom<Notification[]>([]);
 
 const expandNotificationCenterBaseAtom = atom(false);
 const cleanupQueueAtom = atom<(() => unknown)[]>([]);
+/**
+ * @deprecated use `import { notify } from '@affine/component'` instead
+ */
 export const expandNotificationCenterAtom = atom<boolean, [boolean], void>(
   get => get(expandNotificationCenterBaseAtom),
   (get, set, value) => {
@@ -29,17 +35,24 @@ export const expandNotificationCenterAtom = atom<boolean, [boolean], void>(
     set(expandNotificationCenterBaseAtom, value);
   }
 );
-
+/**
+ * @deprecated use `import { notify } from '@affine/component'` instead
+ */
 export const notificationsAtom = atom<Notification[]>(get =>
   get(notificationsBaseAtom)
 );
-
+/**
+ * @deprecated use `import { notify } from '@affine/component'` instead
+ */
 export const removeNotificationAtom = atom(null, (_, set, key: string) => {
   set(notificationsBaseAtom, notifications =>
     notifications.filter(notification => notification.key !== key)
   );
 });
 
+/**
+ * @deprecated use `import { notify } from '@affine/component'` instead
+ */
 export const pushNotificationAtom = atom<null, [Notification], void>(
   null,
   (_, set, newNotification) => {

packages/frontend/component/src/components/notification-center/index.tsx

@@ -375,6 +375,9 @@ function NotificationCard(props: NotificationCardProps): ReactNode {
   );
 }
 
+/**
+ * @deprecated use `import { NotificationCenter } from '@affine/component'` instead
+ */
 export function NotificationCenter(): ReactNode {
   const notifications = useAtomValue(notificationsAtom);
   const [expand, setExpand] = useAtom(expandNotificationCenterAtom);

packages/frontend/component/src/ui/notification/notification-center.tsx

@@ -1,3 +1,4 @@
+import { SingleSelectSelectSolidIcon } from '@blocksuite/icons';
 import { assignInlineVars } from '@vanilla-extract/dynamic';
 import { type CSSProperties, type FC, useMemo } from 'react';
 import { type ExternalToast, toast, Toaster } from 'sonner';
@@ -54,6 +55,29 @@ export function notify(notification: Notification, options?: ExternalToast) {
   }, options);
 }
 
+notify.error = (notification: Notification, options?: ExternalToast) => {
+  return notify({ style: 'alert', theme: 'error', ...notification }, options);
+};
+
+notify.success = (notification: Notification, options?: ExternalToast) => {
+  return notify(
+    {
+      icon: <SingleSelectSelectSolidIcon />,
+      style: 'alert',
+      theme: 'success',
+      ...notification,
+    },
+    options
+  );
+};
+
+notify.warning = (notification: Notification, options?: ExternalToast) => {
+  return notify(
+    { style: 'information', theme: 'warning', ...notification },
+    options
+  );
+};
+
 notify.custom = (
   Component: FC<NotificationCustomRendererProps>,
   options?: ExternalToast

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

@@ -1,11 +1,10 @@
-import { Wrapper } from '@affine/component';
+import { notify, Wrapper } from '@affine/component';
 import {
   AuthContent,
   AuthInput,
   BackButton,
   ModalHeader,
 } from '@affine/component/auth-components';
-import { pushNotificationAtom } from '@affine/component/notification-center';
 import { Button } from '@affine/component/ui/button';
 import { useCredentialsRequirement } from '@affine/core/hooks/affine/use-server-config';
 import { useAsyncCallback } from '@affine/core/hooks/affine-async-hooks';
@@ -17,7 +16,6 @@ import {
   sendVerifyEmailMutation,
 } from '@affine/graphql';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
-import { useSetAtom } from 'jotai/react';
 import { useCallback, useState } from 'react';
 
 import { useMutation } from '../../../hooks/use-mutation';
@@ -165,7 +163,6 @@ export const SendEmail = ({
   const t = useAFFiNEI18N();
   const { password: passwordLimits } = useCredentialsRequirement();
   const [hasSentEmail, setHasSentEmail] = useState(false);
-  const pushNotification = useSetAtom(pushNotificationAtom);
 
   const title = useEmailTitle(emailType);
   const hint = useNotificationHint(emailType);
@@ -177,14 +174,9 @@ export const SendEmail = ({
     // TODO: add error handler
     await sendEmail(email);
 
-    pushNotification({
+    notify.success({ title: hint });
-      title: hint,
-      message: '',
-      key: Date.now().toString(),
-      type: 'success',
-    });
     setHasSentEmail(true);
-  }, [email, hint, pushNotification, sendEmail]);
+  }, [email, hint, sendEmail]);
 
   return (
     <>

packages/frontend/core/src/components/affine/auth/use-auth.ts

@@ -1,5 +1,4 @@
-import { pushNotificationAtom } from '@affine/component/notification-center';
+import { notify } from '@affine/component';
-import type { Notification } from '@affine/component/notification-center/index.jotai';
 import type { OAuthProviderType } from '@affine/graphql';
 import { atom, useAtom, useSetAtom } from 'jotai';
 import { useCallback } from 'react';
@@ -10,19 +9,6 @@ import { useSubscriptionSearch } from './use-subscription';
 const COUNT_DOWN_TIME = 60;
 export const INTERNAL_BETA_URL = `https://community.affine.pro/c/insider-general/`;
 
-function handleSendEmailError(
-  res: Response | undefined | void,
-  pushNotification: (notification: Notification) => void
-) {
-  if (!res?.ok) {
-    pushNotification({
-      title: 'Send email error',
-      message: 'Please back to home and try again',
-      type: 'error',
-    });
-  }
-}
-
 type AuthStoreAtom = {
   allowSendEmail: boolean;
   resendCountDown: number;
@@ -60,7 +46,6 @@ const countDownAtom = atom(
 
 export const useAuth = () => {
   const subscriptionData = useSubscriptionSearch();
-  const pushNotification = useSetAtom(pushNotificationAtom);
   const [authStore, setAuthStore] = useAtom(authStoreAtom);
   const startResendCountDown = useSetAtom(countDownAtom);
 
@@ -96,7 +81,13 @@ export const useAuth = () => {
         }
       ).catch(console.error);
 
-      handleSendEmailError(res, pushNotification);
+      if (!res?.ok) {
+        // TODO: i18n
+        notify.error({
+          title: 'Send email error',
+          message: 'Please back to home and try again',
+        });
+      }
 
       setAuthStore({
         isMutating: false,
@@ -104,11 +95,12 @@ export const useAuth = () => {
         resendCountDown: COUNT_DOWN_TIME,
       });
 
+      // TODO: when errored, should reset the count down
       startResendCountDown();
 
       return res;
     },
-    [pushNotification, setAuthStore, startResendCountDown, subscriptionData]
+    [setAuthStore, startResendCountDown, subscriptionData]
   );
 
   const signUp = useCallback(

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

@@ -1,5 +1,4 @@
-import { FlexWrapper, Input } from '@affine/component';
+import { FlexWrapper, Input, notify } from '@affine/component';
-import { pushNotificationAtom } from '@affine/component/notification-center';
 import {
   SettingHeader,
   SettingRow,
@@ -35,7 +34,6 @@ import * as styles from './style.css';
 export const UserAvatar = () => {
   const t = useAFFiNEI18N();
   const user = useCurrentUser();
-  const pushNotification = useSetAtom(pushNotificationAtom);
 
   const { trigger: avatarTrigger } = useMutation({
     mutation: uploadAvatarMutation,
@@ -55,19 +53,17 @@ export const UserAvatar = () => {
           avatar: reducedFile, // Pass the reducedFile directly to the avatarTrigger
         });
         user.update({ avatarUrl: data.uploadAvatar.avatarUrl });
-        pushNotification({
+        // TODO: i18n
-          title: 'Update user avatar success',
+        notify.success({ title: 'Update user avatar success' });
-          type: 'success',
-        });
       } catch (e) {
-        pushNotification({
+        // TODO: i18n
+        notify.error({
           title: 'Update user avatar failed',
           message: String(e),
-          type: 'error',
         });
       }
     },
-    [avatarTrigger, pushNotification, user]
+    [avatarTrigger, user]
   );
 
   const handleRemoveUserAvatar = useCallback(
@@ -109,7 +105,6 @@ export const AvatarAndName = () => {
   const t = useAFFiNEI18N();
   const user = useCurrentUser();
   const [input, setInput] = useState<string>(user.name);
-  const pushNotification = useSetAtom(pushNotificationAtom);
 
   const { trigger: updateProfile } = useMutation({
     mutation: updateUserProfileMutation,
@@ -129,13 +124,12 @@ export const AvatarAndName = () => {
       });
       user.update({ name: data.updateProfile.name });
     } catch (e) {
-      pushNotification({
+      notify.error({
         title: 'Failed to update user name.',
         message: String(e),
-        type: 'error',
       });
     }
-  }, [allowUpdate, input, user, updateProfile, pushNotification]);
+  }, [allowUpdate, input, user, updateProfile]);
 
   return (
     <SettingRow

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

@@ -1,5 +1,4 @@
-import { RadioButton, RadioButtonGroup } from '@affine/component';
+import { notify, RadioButton, RadioButtonGroup } from '@affine/component';
-import { pushNotificationAtom } from '@affine/component/notification-center';
 import {
   pricesQuery,
   SubscriptionPlan,
@@ -7,7 +6,8 @@ import {
 } from '@affine/graphql';
 import { Trans } from '@affine/i18n';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
-import { useSetAtom } from 'jotai';
+import { SingleSelectSelectSolidIcon } from '@blocksuite/icons';
+import { cssVar } from '@toeverything/theme';
 import { Suspense, useEffect, useRef, useState } from 'react';
 import type { FallbackProps } from 'react-error-boundary';
 
@@ -36,7 +36,6 @@ const getRecurringLabel = ({
 const Settings = () => {
   const t = useAFFiNEI18N();
   const [subscription, mutateSubscription] = useUserSubscription();
-  const pushNotification = useSetAtom(pushNotificationAtom);
 
   const loggedIn = useCurrentLoginStatus() === 'authenticated';
   const planDetail = getPlanDetail(t);
@@ -165,9 +164,11 @@ const Settings = () => {
             key={detail.plan}
             onSubscriptionUpdate={mutateSubscription}
             onNotify={({ detail, recurring }) => {
-              pushNotification({
+              notify({
-                type: 'success',
+                style: 'normal',
-                theme: 'default',
+                icon: (
+                  <SingleSelectSelectSolidIcon color={cssVar('primaryColor')} />
+                ),
                 title: t['com.affine.payment.updated-notify-title'](),
                 message:
                   detail.plan === SubscriptionPlan.Free

packages/frontend/core/src/components/affine/setting-modal/workspace-setting/new-workspace-setting-detail/delete-leave-workspace/index.tsx

@@ -1,4 +1,4 @@
-import { pushNotificationAtom } from '@affine/component/notification-center';
+import { notify } from '@affine/component';
 import { SettingRow } from '@affine/component/setting-components';
 import { ConfirmModal } from '@affine/component/ui/modal';
 import { useAsyncCallback } from '@affine/core/hooks/affine-async-hooks';
@@ -39,7 +39,6 @@ export const DeleteLeaveWorkspace = ({
   const workspaceManager = useService(WorkspaceManager);
   const workspaceList = useLiveData(workspaceManager.list.workspaceList$);
   const currentWorkspace = useService(Workspace);
-  const pushNotification = useSetAtom(pushNotificationAtom);
 
   const onLeaveOrDelete = useCallback(() => {
     if (isOwner) {
@@ -69,15 +68,11 @@ export const DeleteLeaveWorkspace = ({
     }
 
     await workspaceManager.deleteWorkspace(workspaceMetadata);
-    pushNotification({
+    notify.success({ title: t['Successfully deleted']() });
-      title: t['Successfully deleted'](),
-      type: 'success',
-    });
   }, [
     currentWorkspace?.id,
     jumpToIndex,
     jumpToSubPath,
-    pushNotification,
     setSettingModal,
     t,
     workspaceList,

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

@@ -1,4 +1,4 @@
-import { pushNotificationAtom } from '@affine/component/notification-center';
+import { notify } from '@affine/component';
 import { SettingRow } from '@affine/component/setting-components';
 import { Button } from '@affine/component/ui/button';
 import { useAsyncCallback } from '@affine/core/hooks/affine-async-hooks';
@@ -6,7 +6,6 @@ import { useSystemOnline } from '@affine/core/hooks/use-system-online';
 import { apis } from '@affine/electron-api';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import type { Workspace, WorkspaceMetadata } from '@toeverything/infra';
-import { useSetAtom } from 'jotai';
 import { useState } from 'react';
 
 interface ExportPanelProps {
@@ -23,7 +22,6 @@ export const ExportPanel = ({
   const [saving, setSaving] = useState(false);
   const isOnline = useSystemOnline();
 
-  const pushNotification = useSetAtom(pushNotificationAtom);
   const onExport = useAsyncCallback(async () => {
     if (saving || !workspace) {
       return;
@@ -39,21 +37,14 @@ export const ExportPanel = ({
       if (result?.error) {
         throw new Error(result.error);
       } else if (!result?.canceled) {
-        pushNotification({
+        notify.success({ title: t['Export success']() });
-          type: 'success',
-          title: t['Export success'](),
-        });
       }
     } catch (e: any) {
-      pushNotification({
+      notify.error({ title: t['Export failed'](), message: e.message });
-        type: 'error',
-        title: t['Export failed'](),
-        message: e.message,
-      });
     } finally {
       setSaving(false);
     }
-  }, [isOnline, pushNotification, saving, t, workspace, workspaceId]);
+  }, [isOnline, saving, t, workspace, workspaceId]);
 
   return (
     <SettingRow name={t['Export']()} desc={t['Export Description']()}>

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

@@ -1,3 +1,4 @@
+import { notify } from '@affine/component';
 import type {
   InviteModalProps,
   PaginationProps,
@@ -7,7 +8,6 @@ import {
   MemberLimitModal,
   Pagination,
 } from '@affine/component/member-components';
-import { pushNotificationAtom } from '@affine/component/notification-center';
 import { SettingRow } from '@affine/component/setting-components';
 import { Avatar } from '@affine/component/ui/avatar';
 import { Button, IconButton } from '@affine/component/ui/button';
@@ -90,8 +90,6 @@ export const CloudWorkspaceMembersPanel = ({
   const [open, setOpen] = useState(false);
   const [memberSkip, setMemberSkip] = useState(0);
 
-  const pushNotification = useSetAtom(pushNotificationAtom);
-
   const openModal = useCallback(() => {
     setOpen(true);
   }, []);
@@ -109,15 +107,14 @@ export const CloudWorkspaceMembersPanel = ({
         true
       );
       if (success) {
-        pushNotification({
+        notify.success({
           title: t['Invitation sent'](),
           message: t['Invitation sent hint'](),
-          type: 'success',
         });
         setOpen(false);
       }
     },
-    [invite, pushNotification, t]
+    [invite, t]
   );
 
   const setSettingModalAtom = useSetAtom(openSettingModalAtom);
@@ -146,13 +143,10 @@ export const CloudWorkspaceMembersPanel = ({
     async memberId => {
       const res = await revokeMemberPermission(memberId);
       if (res?.revoke) {
-        pushNotification({
+        notify.success({ title: t['Removed successfully']() });
-          title: t['Removed successfully'](),
-          type: 'success',
-        });
       }
     },
-    [pushNotification, revokeMemberPermission, t]
+    [revokeMemberPermission, t]
   );
 
   const desc = useMemo(() => {

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

@@ -1,5 +1,4 @@
-import { FlexWrapper, Input, Wrapper } from '@affine/component';
+import { FlexWrapper, Input, notify, Wrapper } from '@affine/component';
-import { pushNotificationAtom } from '@affine/component/notification-center';
 import { Avatar } from '@affine/component/ui/avatar';
 import { Button } from '@affine/component/ui/button';
 import { Upload } from '@affine/core/components/pure/file-upload';
@@ -11,7 +10,6 @@ import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { CameraIcon } from '@blocksuite/icons';
 import type { Workspace } from '@toeverything/infra';
 import { useLiveData } from '@toeverything/infra';
-import { useSetAtom } from 'jotai';
 import type { KeyboardEvent, MouseEvent } from 'react';
 import { useCallback, useEffect, useState } from 'react';
 
@@ -24,7 +22,6 @@ export interface ProfilePanelProps extends WorkspaceSettingDetailProps {
 
 export const ProfilePanel = ({ isOwner, workspace }: ProfilePanelProps) => {
   const t = useAFFiNEI18N();
-  const pushNotification = useSetAtom(pushNotificationAtom);
 
   const workspaceIsReady = useLiveData(workspace?.engine.rootDocState$)?.ready;
 
@@ -93,12 +90,9 @@ export const ProfilePanel = ({ isOwner, workspace }: ProfilePanelProps) => {
   const handleUpdateWorkspaceName = useCallback(
     (name: string) => {
       setWorkspaceName(name);
-      pushNotification({
+      notify.success({ title: t['Update workspace name success']() });
-        title: t['Update workspace name success'](),
-        type: 'success',
-      });
     },
-    [pushNotification, setWorkspaceName, t]
+    [setWorkspaceName, t]
   );
 
   const handleSetInput = useCallback((value: string) => {
@@ -130,20 +124,16 @@ export const ProfilePanel = ({ isOwner, workspace }: ProfilePanelProps) => {
     (file: File) => {
       setWorkspaceAvatar(file)
         .then(() => {
-          pushNotification({
+          notify.success({ title: 'Update workspace avatar success' });
-            title: 'Update workspace avatar success',
-            type: 'success',
-          });
         })
         .catch(error => {
-          pushNotification({
+          notify.error({
             title: 'Update workspace avatar failed',
             message: error,
-            type: 'error',
           });
         });
     },
-    [pushNotification, setWorkspaceAvatar]
+    [setWorkspaceAvatar]
   );
 
   const canAdjustAvatar = workspaceIsReady && avatarUrl && isOwner;

packages/frontend/core/src/components/pure/workspace-slider-bar/workspace-card/index.tsx

@@ -1,5 +1,4 @@
-import { Tooltip } from '@affine/component';
+import { notify, Tooltip } from '@affine/component';
-import { pushNotificationAtom } from '@affine/component/notification-center';
 import { Avatar, type AvatarProps } from '@affine/component/ui/avatar';
 import { Loading } from '@affine/component/ui/loading';
 import { openSettingModalAtom } from '@affine/core/atoms';
@@ -81,7 +80,6 @@ const OfflineStatus = () => {
 const useSyncEngineSyncProgress = () => {
   const t = useAFFiNEI18N();
   const isOnline = useSystemOnline();
-  const pushNotification = useSetAtom(pushNotificationAtom);
   const { syncing, progress, retrying, errorMessage } = useDocEngineStatus();
   const [isOverCapacity, setIsOverCapacity] = useState(false);
 
@@ -89,7 +87,7 @@ const useSyncEngineSyncProgress = () => {
   const isOwner = useIsWorkspaceOwner(currentWorkspace.meta);
 
   const setSettingModalAtom = useSetAtom(openSettingModalAtom);
-  const jumpToPricePlan = useCallback(async () => {
+  const jumpToPricePlan = useCallback(() => {
     setSettingModalAtom({
       open: true,
       activeTab: 'plans',
@@ -108,17 +106,17 @@ const useSyncEngineSyncProgress = () => {
           }
           setIsOverCapacity(true);
           if (isOwner) {
-            pushNotification({
+            notify.warning({
-              type: 'warning',
               title: t['com.affine.payment.storage-limit.title'](),
               message:
                 t['com.affine.payment.storage-limit.description.owner'](),
-              actionLabel: t['com.affine.payment.storage-limit.view'](),
+              action: {
-              action: jumpToPricePlan,
+                label: t['com.affine.payment.storage-limit.view'](),
+                onClick: jumpToPricePlan,
+              },
             });
           } else {
-            pushNotification({
+            notify.warning({
-              type: 'warning',
               title: t['com.affine.payment.storage-limit.title'](),
               message:
                 t['com.affine.payment.storage-limit.description.member'](),
@@ -129,7 +127,7 @@ const useSyncEngineSyncProgress = () => {
     return () => {
       disposableOverCapacity?.dispose();
     };
-  }, [currentWorkspace, isOwner, jumpToPricePlan, pushNotification, t]);
+  }, [currentWorkspace, isOwner, jumpToPricePlan, t]);
 
   const content = useMemo(() => {
     // TODO: add i18n

packages/frontend/core/src/hooks/affine/use-export-page.ts

@@ -1,8 +1,8 @@
+import { notify } from '@affine/component';
 import {
   pushGlobalLoadingEventAtom,
   resolveGlobalLoadingEventAtom,
 } from '@affine/component/global-loading';
-import { pushNotificationAtom } from '@affine/component/notification-center';
 import { apis } from '@affine/electron-api';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import type { PageRootService, RootBlockModel } from '@blocksuite/blocks';
@@ -51,7 +51,6 @@ async function exportHandler({ page, type }: ExportHandlerOptions) {
 }
 
 export const useExportPage = (page: Doc) => {
-  const pushNotification = useSetAtom(pushNotificationAtom);
   const pushGlobalLoadingEvent = useSetAtom(pushGlobalLoadingEventAtom);
   const resolveGlobalLoadingEvent = useSetAtom(resolveGlobalLoadingEventAtom);
   const t = useAFFiNEI18N();
@@ -67,29 +66,21 @@ export const useExportPage = (page: Doc) => {
           page,
           type,
         });
-        pushNotification({
+        notify.success({
           title: t['com.affine.export.success.title'](),
           message: t['com.affine.export.success.message'](),
-          type: 'success',
         });
       } catch (err) {
         console.error(err);
-        pushNotification({
+        notify.error({
           title: t['com.affine.export.error.title'](),
           message: t['com.affine.export.error.message'](),
-          type: 'error',
         });
       } finally {
         resolveGlobalLoadingEvent(globalLoadingID);
       }
     },
-    [
+    [page, pushGlobalLoadingEvent, resolveGlobalLoadingEvent, t]
-      page,
-      pushGlobalLoadingEvent,
-      pushNotification,
-      resolveGlobalLoadingEvent,
-      t,
-    ]
   );
 
   return onClickHandler;

packages/frontend/core/src/hooks/affine/use-is-shared-page.tsx

@@ -1,4 +1,4 @@
-import { pushNotificationAtom } from '@affine/component/notification-center';
+import { notify } from '@affine/component';
 import { WorkspaceFlavour } from '@affine/env/workspace';
 import {
   getWorkspacePublicPagesQuery,
@@ -7,8 +7,9 @@ import {
   revokePublicPageMutation,
 } from '@affine/graphql';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { SingleSelectSelectSolidIcon } from '@blocksuite/icons';
 import type { PageMode, Workspace } from '@toeverything/infra';
-import { useSetAtom } from 'jotai';
+import { cssVar } from '@toeverything/theme';
 import { useCallback, useMemo } from 'react';
 
 import { useMutation } from '../use-mutation';
@@ -69,7 +70,6 @@ export function useIsSharedPage(
   enableShare: (mode: PageMode) => void;
 } {
   const t = useAFFiNEI18N();
-  const pushNotification = useSetAtom(pushNotificationAtom);
   const { data, mutate } = useQuery({
     query: getWorkspacePublicPagesQuery,
     variables: {
@@ -103,24 +103,25 @@ export function useIsSharedPage(
 
       enableSharePage({ workspaceId, pageId, mode: publishMode })
         .then(() => {
-          pushNotification({
+          notify.success({
             title: t[notificationToI18nKey['enableSuccessTitle']](),
             message: t[notificationToI18nKey['enableSuccessMessage']](),
-            type: 'success',
+            style: 'normal',
-            theme: 'default',
+            icon: (
+              <SingleSelectSelectSolidIcon color={cssVar('primaryColor')} />
+            ),
           });
           return mutate();
         })
         .catch(e => {
-          pushNotification({
+          notify.error({
             title: t[notificationToI18nKey['enableErrorTitle']](),
             message: t[notificationToI18nKey['enableErrorMessage']](),
-            type: 'error',
           });
           console.error(e);
         });
     },
-    [enableSharePage, mutate, pageId, pushNotification, t, workspaceId]
+    [enableSharePage, mutate, pageId, t, workspaceId]
   );
 
   const changeShare = useCallback(
@@ -130,7 +131,7 @@ export function useIsSharedPage(
 
       enableSharePage({ workspaceId, pageId, mode: publishMode })
         .then(() => {
-          pushNotification({
+          notify.success({
             title: t[notificationToI18nKey['changeSuccessTitle']](),
             message: t[
               'com.affine.share-menu.confirm-modify-mode.notification.success.message'
@@ -144,43 +145,43 @@ export function useIsSharedPage(
                   ? t['Edgeless']()
                   : t['Page'](),
             }),
-            type: 'success',
+            style: 'normal',
-            theme: 'default',
+            icon: (
+              <SingleSelectSelectSolidIcon color={cssVar('primaryColor')} />
+            ),
           });
           return mutate();
         })
         .catch(e => {
-          pushNotification({
+          notify.error({
             title: t[notificationToI18nKey['changeErrorTitle']](),
             message: t[notificationToI18nKey['changeErrorMessage']](),
-            type: 'error',
           });
           console.error(e);
         });
     },
-    [enableSharePage, mutate, pageId, pushNotification, t, workspaceId]
+    [enableSharePage, mutate, pageId, t, workspaceId]
   );
 
   const disableShare = useCallback(() => {
     disableSharePage({ workspaceId, pageId })
       .then(() => {
-        pushNotification({
+        notify.success({
           title: t[notificationToI18nKey['disableSuccessTitle']](),
           message: t[notificationToI18nKey['disableSuccessMessage']](),
-          type: 'success',
+          style: 'normal',
-          theme: 'default',
+          icon: <SingleSelectSelectSolidIcon color={cssVar('primaryColor')} />,
         });
         return mutate();
       })
       .catch(e => {
-        pushNotification({
+        notify.error({
           title: t[notificationToI18nKey['disableErrorTitle']](),
           message: t[notificationToI18nKey['disableErrorMessage']](),
-          type: 'error',
         });
         console.error(e);
       });
-  }, [disableSharePage, mutate, pageId, pushNotification, t, workspaceId]);
+  }, [disableSharePage, mutate, pageId, t, workspaceId]);
 
   return useMemo(
     () => ({

packages/frontend/core/src/pages/auth.tsx

@@ -1,3 +1,4 @@
+import { notify } from '@affine/component';
 import {
   ChangeEmailPage,
   ChangePasswordPage,
@@ -7,7 +8,6 @@ import {
   SignInSuccessPage,
   SignUpPage,
 } from '@affine/component/auth-components';
-import { pushNotificationAtom } from '@affine/component/notification-center';
 import { useCredentialsRequirement } from '@affine/core/hooks/affine/use-server-config';
 import {
   changeEmailMutation,
@@ -17,7 +17,6 @@ import {
   verifyEmailMutation,
 } from '@affine/graphql';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
-import { useSetAtom } from 'jotai/react';
 import type { ReactElement } from 'react';
 import { useCallback } from 'react';
 import type { LoaderFunction } from 'react-router-dom';
@@ -50,7 +49,6 @@ export const AuthPage = (): ReactElement | null => {
 
   const { authType } = useParams();
   const [searchParams] = useSearchParams();
-  const pushNotification = useSetAtom(pushNotificationAtom);
 
   const { trigger: changePassword } = useMutation({
     mutation: changePasswordMutation,
@@ -72,20 +70,18 @@ export const AuthPage = (): ReactElement | null => {
 
       // FIXME: There is not notification
       if (res?.sendVerifyChangeEmail) {
-        pushNotification({
+        notify.success({
           title: t['com.affine.auth.sent.verify.email.hint'](),
-          type: 'success',
         });
       } else {
-        pushNotification({
+        notify.error({
           title: t['com.affine.auth.sent.change.email.fail'](),
-          type: 'error',
         });
       }
 
       return !!res?.sendVerifyChangeEmail;
     },
-    [pushNotification, searchParams, sendVerifyChangeEmail, t]
+    [searchParams, sendVerifyChangeEmail, t]
   );
 
   const onSetPassword = useCallback(

packages/frontend/core/src/pages/workspace/collection/index.tsx

@@ -1,4 +1,4 @@
-import { pushNotificationAtom } from '@affine/component/notification-center';
+import { notify } from '@affine/component';
 import {
   AffineShapeIcon,
   useEditCollection,
@@ -17,7 +17,6 @@ import {
   ViewLayersIcon,
 } from '@blocksuite/icons';
 import { useLiveData, useService, Workspace } from '@toeverything/infra';
-import { useSetAtom } from 'jotai';
 import { useCallback, useEffect, useState } from 'react';
 import { useParams } from 'react-router-dom';
 
@@ -70,7 +69,6 @@ export const Component = function CollectionPage() {
   const params = useParams();
   const workspace = useService(Workspace);
   const collection = collections.find(v => v.id === params.collectionId);
-  const pushNotification = useSetAtom(pushNotificationAtom);
   useEffect(() => {
     if (!collection) {
       navigate.jumpToSubPath(workspace.id, WorkspaceSubPath.ALL);
@@ -85,17 +83,13 @@ export const Component = function CollectionPage() {
           text = `${collection.collection.name} has been deleted`;
         }
       }
-      pushNotification({
+      notify.error({ title: text });
-        type: 'error',
-        title: text,
-      });
     }
   }, [
     collection,
     collectionService.collectionsTrash$.value,
     navigate,
     params.collectionId,
-    pushNotification,
     workspace.docCollection,
     workspace.id,
   ]);

packages/frontend/core/src/providers/session-provider.tsx

@@ -1,10 +1,9 @@
-import { pushNotificationAtom } from '@affine/component/notification-center';
+import { notify } from '@affine/component';
 import { useSession } from '@affine/core/hooks/affine/use-current-user';
 import { useAsyncCallback } from '@affine/core/hooks/affine-async-hooks';
 import { affine } from '@affine/electron-api';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { CLOUD_WORKSPACE_CHANGED_BROADCAST_CHANNEL_KEY } from '@affine/workspace-impl';
-import { useSetAtom } from 'jotai';
 import type { PropsWithChildren } from 'react';
 import { startTransition, useEffect, useRef } from 'react';
 
@@ -14,7 +13,6 @@ import { mixpanel } from '../utils';
 export const CloudSessionProvider = (props: PropsWithChildren) => {
   const session = useSession();
   const prevSession = useRef<ReturnType<typeof useSession>>();
-  const pushNotification = useSetAtom(pushNotificationAtom);
   const onceSignedInEvents = useOnceSignedInEvents();
   const t = useAFFiNEI18N();
 
@@ -39,10 +37,9 @@ export const CloudSessionProvider = (props: PropsWithChildren) => {
         session.status === 'authenticated'
       ) {
         startTransition(() => refreshAfterSignedInEvents());
-        pushNotification({
+        notify.success({
           title: t['com.affine.auth.has.signed'](),
           message: t['com.affine.auth.has.signed.message'](),
-          type: 'success',
         });
 
         if (environment.isDesktop) {
@@ -51,7 +48,7 @@ export const CloudSessionProvider = (props: PropsWithChildren) => {
       }
       prevSession.current = session;
     }
-  }, [session, prevSession, pushNotification, refreshAfterSignedInEvents, t]);
+  }, [session, prevSession, refreshAfterSignedInEvents, t]);
 
   return props.children;
 };

packages/frontend/core/src/providers/swr-config-provider.tsx

@@ -1,7 +1,6 @@
-import { pushNotificationAtom } from '@affine/component/notification-center';
+import { notify } from '@affine/component';
 import { assertExists } from '@blocksuite/global/utils';
 import { GraphQLError } from 'graphql';
-import { useSetAtom } from 'jotai';
 import type { PropsWithChildren, ReactNode } from 'react';
 import { useCallback } from 'react';
 import type { SWRConfiguration } from 'swr';
@@ -11,7 +10,6 @@ const swrConfig: SWRConfiguration = {
   suspense: true,
   use: [
     useSWRNext => (key, fetcher, config) => {
-      const pushNotification = useSetAtom(pushNotificationAtom);
       const fetcherWrapper = useCallback(
         async (...args: any[]) => {
           assertExists(fetcher);
@@ -23,18 +21,14 @@ const swrConfig: SWRConfiguration = {
                 (Array.isArray(e) && e[0] instanceof GraphQLError)
               ) {
                 const graphQLError = e instanceof GraphQLError ? e : e[0];
-                pushNotification({
+                notify.error({
                   title: 'GraphQL Error',
                   message: graphQLError.toString(),
-                  key: Date.now().toString(),
-                  type: 'error',
                 });
               } else {
-                pushNotification({
+                notify.error({
                   title: 'Error',
                   message: e.toString(),
-                  key: Date.now().toString(),
-                  type: 'error',
                 });
               }
               throw e;
@@ -42,7 +36,7 @@ const swrConfig: SWRConfiguration = {
           }
           return d;
         },
-        [fetcher, pushNotification]
+        [fetcher]
       );
       return useSWRNext(key, fetcher ? fetcherWrapper : fetcher, config);
     },

packages/frontend/electron/renderer/app.tsx

@@ -1,9 +1,9 @@
 import '@affine/component/theme/global.css';
 import '@affine/component/theme/theme.css';
 
+import { NotificationCenter } from '@affine/component';
 import { AffineContext } from '@affine/component/context';
 import { GlobalLoading } from '@affine/component/global-loading';
-import { NotificationCenter } from '@affine/component/notification-center';
 import { WorkspaceFallback } from '@affine/core/components/workspace';
 import { GlobalScopeProvider } from '@affine/core/modules/infra-web/global-scope';
 import { CloudSessionProvider } from '@affine/core/providers/session-provider';

packages/frontend/web/src/app.tsx

@@ -1,9 +1,9 @@
 import '@affine/component/theme/global.css';
 import '@affine/component/theme/theme.css';
 
+import { NotificationCenter } from '@affine/component';
 import { AffineContext } from '@affine/component/context';
 import { GlobalLoading } from '@affine/component/global-loading';
-import { NotificationCenter } from '@affine/component/notification-center';
 import { WorkspaceFallback } from '@affine/core/components/workspace';
 import { GlobalScopeProvider } from '@affine/core/modules/infra-web/global-scope';
 import { CloudSessionProvider } from '@affine/core/providers/session-provider';

tests/affine-local/e2e/local-first-delete-workspace.spec.ts

@@ -27,7 +27,7 @@ test('Create new workspace, then delete it', async ({ page, workspace }) => {
   await openWorkspaceSettingPanel(page, 'Test Workspace');
   await page.getByTestId('delete-workspace-button').click();
   await expect(
-    page.getByTestId('affine-notification').first()
+    page.locator('.affine-notification-center').first()
   ).not.toBeVisible();
   const workspaceNameDom = page.getByTestId('workspace-name');
   const currentWorkspaceName = (await workspaceNameDom.evaluate(
@@ -38,7 +38,8 @@ test('Create new workspace, then delete it', async ({ page, workspace }) => {
     .getByTestId('delete-workspace-input')
     .pressSequentially(currentWorkspaceName);
   const promise = page
-    .getByTestId('affine-notification')
+    .locator('.affine-notification-center')
+    .first()
     .waitFor({ state: 'attached' });
   await page.getByTestId('delete-workspace-confirm-button').click();
   await promise;