feat(server): send mention email (#10859)

close CLOUD-170

packages/backend/server/src/mails/common.ts

@@ -1,4 +1,4 @@
-import { UserProps } from './components';
+import { DocProps, UserProps } from './components';
 import { WorkspaceProps } from './components/workspace';
 
 export const TEST_USER: UserProps = {
@@ -9,3 +9,8 @@ export const TEST_WORKSPACE: WorkspaceProps = {
   name: 'Test Workspace',
   avatar: 'https://app.affine.pro/favicon-192.png',
 };
+
+export const TEST_DOC: DocProps = {
+  title: 'Test Doc',
+  url: 'https://app.affine.pro',
+};

packages/backend/server/src/mails/components/doc.tsx

@@ -0,0 +1,16 @@
+import { Link } from '@react-email/components';
+
+import { Bold } from './template';
+
+export interface DocProps {
+  title: string;
+  url: string;
+}
+
+export const Doc = (props: DocProps) => {
+  return (
+    <Link href={props.url}>
+      <Bold>{props.title}</Bold>
+    </Link>
+  );
+};

packages/backend/server/src/mails/components/index.ts

@@ -1,4 +1,5 @@
 export * from './date';
+export * from './doc';
 export * from './template';
 export * from './user';
 export * from './workspace';

packages/backend/server/src/mails/docs/index.ts

@@ -0,0 +1 @@
+export * from './mention';

packages/backend/server/src/mails/docs/mention.tsx

@@ -0,0 +1,37 @@
+import { TEST_DOC, TEST_USER } from '../common';
+import {
+  Button,
+  Content,
+  Doc,
+  type DocProps,
+  P,
+  Template,
+  Title,
+  User,
+  type UserProps,
+} from '../components';
+
+export type MentionProps = {
+  user: UserProps;
+  doc: DocProps;
+};
+
+export function Mention(props: MentionProps) {
+  const { user, doc } = props;
+  return (
+    <Template>
+      <Title>You are mentioned!</Title>
+      <Content>
+        <P>
+          <User {...user} /> mentioned you in <Doc {...doc} />.
+        </P>
+        <Button href={doc.url}>Open Doc</Button>
+      </Content>
+    </Template>
+  );
+}
+
+Mention.PreviewProps = {
+  user: TEST_USER,
+  doc: TEST_DOC,
+};

packages/backend/server/src/mails/index.tsx

@@ -1,5 +1,6 @@
 import { render as rawRender } from '@react-email/components';
 
+import { Mention } from './docs';
 import {
   TeamBecomeAdmin,
   TeamBecomeCollaborator,
@@ -114,6 +115,13 @@ export const Renderers = {
   ),
   //#endregion
 
+  //#region Doc
+  Mention: make(
+    Mention,
+    props => `${props.user.email} mentioned you in ${props.doc.title}`
+  ),
+  //#endregion
+
   //#region Team
   TeamWorkspaceUpgraded: make(TeamWorkspaceUpgraded, props =>
     props.isOwner