feat(core): add more notification types (#11156)

packages/frontend/component/src/ui/notification/desktop/notification-card.tsx

@@ -1,3 +1,4 @@
+import { useI18n } from '@affine/i18n';
 import { CloseIcon, InformationFillDuotoneIcon } from '@blocksuite/icons/rc';
 import clsx from 'clsx';
 import { useCallback } from 'react';
@@ -10,6 +11,7 @@ import * as styles from './styles.css';
 export const DesktopNotificationCard = ({
   notification,
 }: NotificationCardProps) => {
+  const t = useI18n();
   const {
     theme = 'info',
     style = 'normal',
@@ -17,6 +19,7 @@ export const DesktopNotificationCard = ({
     iconColor,
     thumb,
     action,
+    error,
     title,
     footer,
     alignMessage = 'title',
@@ -24,6 +27,12 @@ export const DesktopNotificationCard = ({
     rootAttrs,
   } = notification;
 
+  const errorI18nKey = error ? (`error.${error.name}` as const) : undefined;
+  const errorTitle =
+    errorI18nKey && errorI18nKey in t
+      ? t[errorI18nKey](error?.data)
+      : undefined;
+
   const onActionClicked = useCallback(() => {
     action?.onClick()?.catch(console.error);
     if (action?.autoClose !== false) {
@@ -46,7 +55,7 @@ export const DesktopNotificationCard = ({
               {icon}
             </div>
           ) : null}
-          <div className={styles.title}>{title}</div>
+          <div className={styles.title}>{title ?? errorTitle}</div>
 
           {action ? (
             <div className={clsx(styles.headAlignWrapper, styles.action)}>

packages/frontend/component/src/ui/notification/notify.tsx

@@ -1,3 +1,4 @@
+import { UserFriendlyError } from '@affine/error';
 import {
   InformationFillDuotoneIcon,
   SingleSelectCheckSolidIcon,
@@ -35,7 +36,16 @@ export function notify(notification: Notification, options?: ExternalToast) {
   }, options);
 }
 
-notify.error = (notification: Notification, options?: ExternalToast) => {
+notify.error = (
+  notification: Notification | UserFriendlyError,
+  options?: ExternalToast
+) => {
+  if (notification instanceof UserFriendlyError) {
+    notification = {
+      error: notification,
+    };
+  }
+
   return notify(
     {
       icon: <InformationFillDuotoneIcon />,

packages/frontend/component/src/ui/notification/types.ts

@@ -1,3 +1,4 @@
+import type { UserFriendlyError } from '@affine/error';
 import type { HTMLAttributes, ReactNode } from 'react';
 
 import type { ButtonProps } from '../button';
@@ -29,6 +30,7 @@ export interface Notification {
   thumb?: ReactNode;
   title?: ReactNode;
   message?: ReactNode;
+  error?: UserFriendlyError;
   icon?: ReactNode;
   iconColor?: string;
   footer?: ReactNode;