fix(core): fix error message missing (#11166)

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

@@ -55,7 +55,7 @@ export const DesktopNotificationCard = ({
               {icon}
             </div>
           ) : null}
-          <div className={styles.title}>{title ?? errorTitle}</div>
+          <div className={styles.title}>{title || errorTitle}</div>
 
           {action ? (
             <div className={clsx(styles.headAlignWrapper, styles.action)}>

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

@@ -1,3 +1,4 @@
+import { useI18n } from '@affine/i18n';
 import { CloseIcon, InformationFillDuotoneIcon } from '@blocksuite/icons/rc';
 import { useCallback, useState } from 'react';
 
@@ -16,7 +17,14 @@ export function MobileNotificationCard({
     icon = <InformationFillDuotoneIcon />,
     iconColor,
     onDismiss,
+    error,
   } = notification;
+  const t = useI18n();
+  const errorI18nKey = error ? (`error.${error.name}` as const) : undefined;
+  const errorTitle =
+    errorI18nKey && errorI18nKey in t
+      ? t[errorI18nKey](error?.data)
+      : undefined;
 
   const [animated, setAnimated] = useState(false);
   const [showDetail, setShowDetail] = useState(false);
@@ -43,7 +51,9 @@ export function MobileNotificationCard({
       style={getCardVars(style, theme, iconColor)}
     >
       <span className={styles.toastIcon}>{icon}</span>
-      <span className={styles.toastLabel}>{notification.title}</span>
+      <span className={styles.toastLabel}>
+        {notification.title || errorTitle}
+      </span>
     </div>
   );
 }
@@ -62,7 +72,14 @@ const MobileNotifyDetail = ({
     message,
     footer,
     action,
+    error,
   } = notification;
+  const t = useI18n();
+  const errorI18nKey = error ? (`error.${error.name}` as const) : undefined;
+  const errorTitle =
+    errorI18nKey && errorI18nKey in t
+      ? t[errorI18nKey](error?.data)
+      : undefined;
 
   const handleOpenChange = useCallback(
     (open: boolean) => {
@@ -91,7 +108,7 @@ const MobileNotifyDetail = ({
       <div className={styles.detailCard} onClick={e => e.stopPropagation()}>
         <header className={styles.detailHeader}>
           <span className={styles.detailIcon}>{icon}</span>
-          <span className={styles.detailLabel}>{title}</span>
+          <span className={styles.detailLabel}>{title || errorTitle}</span>
           <IconButton onClick={onClose} icon={<CloseIcon />} />
         </header>
         <main className={styles.detailContent}>{message}</main>