feat: add message center (#1486)

apps/web/src/components/pure/message-center/index.tsx

@@ -0,0 +1,30 @@
+import { toast } from '@affine/component';
+import { MessageCode } from '@affine/datacenter';
+import { messages } from '@affine/datacenter';
+import React, { useEffect } from 'react';
+
+declare global {
+  interface DocumentEventMap {
+    'affine-error': CustomEvent<{
+      code: MessageCode;
+    }>;
+  }
+}
+
+export const MessageCenter: React.FC = () => {
+  useEffect(() => {
+    const listener = (
+      event: CustomEvent<{
+        code: MessageCode;
+      }>
+    ) => {
+      toast(messages[event.detail.code].message);
+    };
+
+    document.addEventListener('affine-error', listener);
+    return () => {
+      document.removeEventListener('affine-error', listener);
+    };
+  }, []);
+  return null;
+};

apps/web/src/pages/_app.tsx

@@ -15,6 +15,7 @@ import { jotaiStore } from '../atoms';
 import { AffineErrorBoundary } from '../components/affine/affine-error-eoundary';
 import { ProviderComposer } from '../components/provider-composer';
 import { PageLoading } from '../components/pure/loading';
+import { MessageCenter } from '../components/pure/message-center';
 import { AffineSWRConfigProvider } from '../providers/AffineSWRConfigProvider';
 import { ThemeProvider } from '../providers/ThemeProvider';
 import { NextPageWithLayout } from '../shared';
@@ -57,6 +58,7 @@ const App = function App({
     <CacheProvider value={emotionCache}>
       <I18nextProvider i18n={i18n}>
         <DebugAtoms />
+        <MessageCenter />
         <AffineErrorBoundary router={useRouter()}>
           <Suspense fallback={<PageLoading key="RootPageLoading" />}>
             <ProviderComposer