feat: introduce vue-email for templating with tailwind (#4358)

* feat: start on vue-email set up * feat: email rendering and base template * refactor: body slot only * feat: templates * fix: lint * fix: build process * fix: default import issue * feat: continue making emails * feat: update address * feat: new templates * feat: email temp page viewer * fix: lint * fix: reset password heading * fix: lint * fix: qa issues
2025-09-16 16:57:34 +01:00
parent 902d749293
commit 8149618187
29 changed files with 1729 additions and 1 deletions
--- a/apps/frontend/src/emails/index.ts
+++ b/apps/frontend/src/emails/index.ts
@@ -0,0 +1,34 @@
+import type { Component } from 'vue'
+
+export default {
+	// Account
+	'auth-method-added': () => import('./templates/account/AuthenticationMethodAdded.vue'),
+	'auth-method-removed': () => import('./templates/account/AuthenticationMethodRemoved.vue'),
+	'email-changed': () => import('./templates/account/EmailChanged.vue'),
+	'password-changed': () => import('./templates/account/PasswordChanged.vue'),
+	'password-removed': () => import('./templates/account/PasswordRemoved.vue'),
+	'payment-failed': () => import('./templates/account/PaymentFailed.vue'),
+	'reset-password': () => import('./templates/account/ResetPassword.vue'),
+	'two-factor-added': () => import('./templates/account/TwoFactorAdded.vue'),
+	'two-factor-removed': () => import('./templates/account/TwoFactorRemoved.vue'),
+	'verify-email': () => import('./templates/account/VerifyEmail.vue'),
+	'login-new-device': () => import('./templates/account/LoginNewDevice.vue'),
+	'payout-available': () => import('./templates/account/PayoutAvailable.vue'),
+	'personal-access-token-created': () => import('./templates/account/PATCreated.vue'),
+
+	// Moderation
+	'report-submitted': () => import('./templates/moderation/ReportSubmitted.vue'),
+	'report-status-updated': () => import('./templates/moderation/ReportStatusUpdated.vue'),
+	'moderation-thread-message-received': () =>
+		import('./templates/moderation/ModerationThreadMessageReceived.vue'),
+
+	// Project
+	'project-status-updated-neutral': () =>
+		import('./templates/project/ProjectStatusUpdatedNeutral.vue'),
+	'project-status-approved': () => import('./templates/project/ProjectStatusApproved.vue'),
+	'project-invited': () => import('./templates/project/ProjectInvited.vue'),
+	'project-transferred': () => import('./templates/project/ProjectTransferred.vue'),
+
+	// Organization
+	'organization-invited': () => import('./templates/organization/OrganizationInvited.vue'),
+} as Record<string, () => Promise<{ default: Component }>>
--- a/apps/frontend/src/emails/shared/StyledEmail.vue
+++ b/apps/frontend/src/emails/shared/StyledEmail.vue
@@ -0,0 +1,239 @@
+<script setup lang="ts">
+import {
+	Body,
+	Column,
+	Container,
+	Head,
+	Html,
+	Img,
+	Link as VLink,
+	Row,
+	Section,
+	Style,
+	Tailwind,
+	Text,
+} from '@vue-email/components'
+
+defineProps<{
+	title?: string
+	manualLinks?: { link: string; label?: string }[]
+}>()
+
+interface SocialLink {
+	href: string
+	alt: string
+	src: string
+}
+
+const socialLinks = Object.freeze<readonly SocialLink[]>([
+	{
+		href: 'https://discord.modrinth.com',
+		alt: 'Discord',
+		src: 'https://cdn-raw.modrinth.com/email/discord.png',
+	},
+	{
+		href: 'https://bsky.app/profile/modrinth.com',
+		alt: 'Bluesky',
+		src: 'https://cdn-raw.modrinth.com/email/bluesky.png',
+	},
+	{
+		href: 'https://floss.social/@modrinth',
+		alt: 'Mastodon',
+		src: 'https://cdn-raw.modrinth.com/email/mastodon.png',
+	},
+	{
+		href: 'https://x.com/modrinth',
+		alt: 'X (Twitter)',
+		src: 'https://cdn-raw.modrinth.com/email/x.png',
+	},
+	{
+		href: 'https://www.instagram.com/modrinth/',
+		alt: 'Instagram',
+		src: 'https://cdn-raw.modrinth.com/email/instagram.png',
+	},
+	{
+		href: 'https://www.youtube.com/@modrinth',
+		alt: 'YouTube',
+		src: 'https://cdn-raw.modrinth.com/email/youtube.png',
+	},
+	{
+		href: 'https://github.com/modrinth',
+		alt: 'GitHub',
+		src: 'https://cdn-raw.modrinth.com/email/github.png',
+	},
+])
+</script>
+
+<template>
+	<Html lang="en">
+		<Head>
+			<title>{{ title }}</title>
+			<meta http-equiv="X-UA-Compatible" content="IE=edge" />
+			<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+			<meta name="viewport" content="width=device-width, initial-scale=1" />
+			<link
+				href="https://fonts.googleapis.com/css?family=Inter:700,400"
+				rel="stylesheet"
+				type="text/css"
+			/>
+			<Style>
+				/* Outlook.com centering + line-height fixes */ .ExternalClass { width:100%; }
+				.ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td {
+				line-height:100%; } table { border-collapse:separate; } a, a:link, a:visited {
+				text-decoration:none; color:#1f68c0; } a:hover { text-decoration:underline; }
+				h1,h2,h3,h4,h5,h6 { color:#000 !important; margin:0; mso-line-height-rule:exactly; }
+			</Style>
+		</Head>
+
+		<Body>
+			<Tailwind
+				:config="{
+					theme: {
+						extend: {
+							colors: {
+								bg: { DEFAULT: '#ebebeb', raised: '#ffffff', super: '#e9e9e9' },
+								divider: { DEFAULT: '#babfc5', dark: '#c8cdd3' },
+								base: '#2c2e31',
+								secondary: '#484d54',
+								contrast: '#1a202c',
+								accentContrast: '#ffffff',
+								red: '#cb2245',
+								orange: '#e08325',
+								green: '#00af5c',
+								blue: '#1f68c0',
+								purple: '#8e32f3',
+								gray: '#595b61',
+								brand: {
+									DEFAULT: '#00af5c',
+									highlight: 'rgba(0, 175, 92, 0.25)',
+									shadow: 'rgba(0, 175, 92, 0.7)',
+								},
+								highlight: {
+									red: 'rgba(203, 34, 69, 0.25)',
+									orange: 'rgba(224, 131, 37, 0.25)',
+									green: 'rgba(0, 175, 92, 0.25)',
+									blue: 'rgba(31, 104, 192, 0.25)',
+									purple: 'rgba(142, 50, 243, 0.25)',
+									gray: 'rgba(89, 91, 97, 0.25)',
+								},
+								tint: {
+									red: 'rgba(203, 34, 69, 0.1)',
+									orange: 'rgba(224, 131, 37, 0.1)',
+									green: 'rgba(0, 175, 92, 0.1)',
+									blue: 'rgba(31, 104, 192, 0.1)',
+									purple: 'rgba(142, 50, 243, 0.1)',
+								},
+								link: { DEFAULT: '#1f68c0', hover: '#1f68c0', active: '#1f68c0' },
+								muted: '#777777',
+								footerText: '#4d4d4d',
+							},
+							fontSize: {
+								base: ['16px', { lineHeight: '24px' }],
+								'2xl': ['28px', { lineHeight: '32px' }],
+								xs: ['13px', { lineHeight: '16px' }],
+								'2xs': ['11px', { lineHeight: '16px' }],
+							},
+							fontFamily: {
+								sans: ['Inter', 'Arial', 'sans-serif'],
+							},
+						},
+					},
+				}"
+			>
+				<Section class="m-0 pb-0 pl-0 pr-0 pt-0 font-sans">
+					<Section class="bg-bg pb-4 pl-4 pr-4 pt-4">
+						<Container class="max-w-[600px]">
+							<Row>
+								<Column>
+									<Img
+										src="https://cdn.modrinth.com/email/f740e2decee8764a4629bff677a284f9.png"
+										width="29"
+										alt=""
+										class="block h-auto"
+									/>
+								</Column>
+							</Row>
+						</Container>
+					</Section>
+
+					<Section class="bg-white pb-8 pl-8 pr-8 pt-8">
+						<Container class="max-w-[600px]">
+							<slot />
+						</Container>
+					</Section>
+
+					<Section class="mb-4 bg-bg pb-4 pl-4 pr-4 pt-4">
+						<Container class="max-w-[600px]">
+							<Row>
+								<Column class="align-middle">
+									<VLink href="https://modrinth.com" aria-label="Modrinth">
+										<Img
+											src="https://cdn.modrinth.com/email/bd3357dfae4b1d266250372db3a0988f.png"
+											width="175"
+											alt="modrinth logo"
+											class="block h-auto"
+										/>
+									</VLink>
+
+									<Row class="text-right align-middle">
+										<Section class="m-0 inline-block pb-0 pl-0 pr-0 pt-0">
+											<template v-for="(item, index) in socialLinks" :key="item.href">
+												<VLink
+													:href="item.href"
+													:class="['inline-block', index !== socialLinks.length - 1 ? 'mr-4' : '']"
+												>
+													<Img width="20" height="20" :alt="item.alt" :src="item.src" />
+												</VLink>
+											</template>
+										</Section>
+									</Row>
+
+									<Text class="mb-0 mt-2 text-xs" :style="{ color: '#4d4d4d' }"> Rinth, Inc. </Text>
+									<Section class="m-0 pb-0 pl-0 pr-0 pt-0">
+										<Text class="m-0 text-xs text-secondary">800 N King St</Text>
+										<Text class="m-0 text-xs text-secondary">Suite 304 #3133</Text>
+										<Text class="m-0 text-xs text-secondary">Wilmington, DE 19801</Text>
+									</Section>
+								</Column>
+							</Row>
+						</Container>
+					</Section>
+
+					<!-- <Text
+						class="text-footerText text-2xs mb-4 mt-0 pb-0 pl-4 pr-4 pt-0 text-center font-sans"
+					>
+						This email was sent to you as a registered user of Modrinth. You can customize the
+						emails you recieve in your
+						<VLink href="https://modrinth.com/settings/notifications" class="text-green underline"
+							>notification settings</VLink
+						>. Some emails are required to keep your account secure and cannot be disabled.
+					</Text> -->
+
+					<hr />
+
+					<Section
+						v-if="manualLinks && manualLinks.length"
+						class="text-footerText text-2xs mb-4 mt-4 pb-0 pl-4 pr-4 pt-0 font-sans"
+					>
+						<small class="text-muted text-2xs"
+							>If you're having trouble with the links above, copy and paste these URLs into your
+							web browser:</small
+						>
+						<Text class="text-2xs text-muted mt-0">
+							<span v-for="(item, index) in manualLinks" :key="index" class="block break-words">
+								<span v-if="item.label">
+									<b>{{ item.label }}:</b><br />
+								</span>
+								{{ item.link }}
+							</span>
+							<!-- <span class="block break-words">
+								<span> <b>Notification settings:</b><br /> </span>
+								https://modrinth.com/settings/notifications
+							</span> -->
+						</Text>
+					</Section>
+				</Section>
+			</Tailwind>
+		</Body>
+	</Html>
+</template>
--- a/apps/frontend/src/emails/templates/account/AuthenticationMethodAdded.vue
+++ b/apps/frontend/src/emails/templates/account/AuthenticationMethodAdded.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { Heading, Link as VLink, Text } from '@vue-email/components'
+
+import StyledEmail from '@/emails/shared/StyledEmail.vue'
+</script>
+
+<template>
+	<StyledEmail
+		title="New sign-in method added"
+		:manual-links="[{ link: 'https://support.modrinth.com', label: 'Support Portal' }]"
+	>
+		<Heading as="h1" class="mb-2 text-2xl font-bold"> New sign-in method added </Heading>
+
+		<Text class="text-muted text-base">Hi {user.name},</Text>
+		<Text class="text-muted text-base">
+			Your {authprovider.name} account has been connected and you can now use it to sign in to your
+			Modrinth account.
+		</Text>
+		<Text class="text-muted text-base">
+			If you did not make this change, please contact us immediately by replying to this email or
+			<VLink href="https://support.modrinth.com" class="text-green underline"
+				>through our Support Portal</VLink
+			>.
+		</Text>
+	</StyledEmail>
+</template>
--- a/apps/frontend/src/emails/templates/account/AuthenticationMethodRemoved.vue
+++ b/apps/frontend/src/emails/templates/account/AuthenticationMethodRemoved.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { Heading, Link as VLink, Text } from '@vue-email/components'
+
+import StyledEmail from '@/emails/shared/StyledEmail.vue'
+</script>
+
+<template>
+	<StyledEmail
+		title="Sign-in method removed"
+		:manual-links="[{ link: 'https://support.modrinth.com', label: 'Support Portal' }]"
+	>
+		<Heading as="h1" class="mb-2 text-2xl font-bold"> Sign-in method removed</Heading>
+
+		<Text class="text-muted text-base">Hi {user.name},</Text>
+		<Text class="text-muted text-base">
+			Your <b>{authprovider.name}</b> account has been disconnected and you can no longer use it to
+			sign in to your Modrinth account.
+		</Text>
+		<Text class="text-muted text-base">
+			If you did not make this change, please contact us immediately by replying to this email or
+			<VLink href="https://support.modrinth.com" class="text-green underline"
+				>through our Support Portal</VLink
+			>.
+		</Text>
+	</StyledEmail>
+</template>
--- a/apps/frontend/src/emails/templates/account/EmailChanged.vue
+++ b/apps/frontend/src/emails/templates/account/EmailChanged.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { Heading, Link as VLink, Text } from '@vue-email/components'
+
+import StyledEmail from '@/emails/shared/StyledEmail.vue'
+</script>
+
+<template>
+	<StyledEmail
+		title="Your email has been changed"
+		:manual-links="[{ link: 'https://support.modrinth.com', label: 'Support Portal' }]"
+	>
+		<Heading as="h1" class="mb-2 text-2xl font-bold"> Your email has been changed </Heading>
+
+		<Text class="text-muted text-base">Hi {user.name},</Text>
+		<Text class="text-muted text-base">
+			At your request, we've successfully updated your Modrinth account's email to
+			{emailchanged.new_email}.
+		</Text>
+		<Text class="text-muted text-base">
+			If you did not make this change, please contact us immediately by replying to this email or
+			<VLink href="https://support.modrinth.com" class="text-green underline"
+				>through our Support Portal</VLink
+			>.
+		</Text>
+	</StyledEmail>
+</template>
--- a/apps/frontend/src/emails/templates/account/LoginNewDevice.vue
+++ b/apps/frontend/src/emails/templates/account/LoginNewDevice.vue
@@ -0,0 +1,79 @@
+<script setup lang="ts">
+import { Column, Heading, Img, Link as VLink, Row, Section, Text } from '@vue-email/components'
+
+import StyledEmail from '@/emails/shared/StyledEmail.vue'
+</script>
+
+<template>
+	<StyledEmail
+		title="Sign in from new device"
+		:manual-links="[{ link: 'https://support.modrinth.com', label: 'Support Portal' }]"
+	>
+		<Heading as="h1" class="mb-2 text-2xl font-bold"> Sign in from new device </Heading>
+
+		<Text class="text-muted text-base">Hi {user.name},</Text>
+		<Text class="text-muted text-base">
+			We noticed that your account was just signed into from a new device or location. If this was
+			you, you can safely ignore this email.
+		</Text>
+
+		<Section class="bg-bg-super rounded-lg border border-divider pb-4 pl-4 pr-4 pt-4">
+			<Row>
+				<Column class="w-full">
+					<Row class="mb-2 mt-0">
+						<Column class="w-8">
+							<Img
+								width="20"
+								height="20"
+								alt="Time icon"
+								src="https://cdn-raw.modrinth.com/email/earth.png"
+							/>
+						</Column>
+						<Column>
+							<Text class="m-0 text-sm font-semibold text-secondary">Approximate location</Text>
+							<Text class="m-0 text-base">{newdevice.location}</Text>
+						</Column>
+					</Row>
+
+					<Row class="mb-2">
+						<Column class="w-8">
+							<Img
+								width="20"
+								height="20"
+								alt="Time icon"
+								src="https://cdn-raw.modrinth.com/email/monitor-smartphone.png"
+							/>
+						</Column>
+						<Column>
+							<Text class="m-0 text-sm font-semibold text-secondary">IP Address</Text>
+							<Text class="m-0 font-mono text-base">{newdevice.ip}</Text>
+						</Column>
+					</Row>
+
+					<Row>
+						<Column class="w-8">
+							<Img
+								width="20"
+								height="20"
+								alt="Time icon"
+								src="https://cdn-raw.modrinth.com/email/clock.png"
+							/>
+						</Column>
+						<Column>
+							<Text class="m-0 text-sm font-semibold text-secondary">Time</Text>
+							<Text class="m-0 text-base">{time.now}</Text>
+						</Column>
+					</Row>
+				</Column>
+			</Row>
+		</Section>
+
+		<Text class="text-muted text-base">
+			If this wasn't you, please update your password and review your account security settings. If
+			you cannot do this, contact us immediately by replying to this email or
+			<VLink href="https://support.modrinth.com" class="text-green underline"
+				>through our Support Portal</VLink
+			>.
+		</Text>
+	</StyledEmail>
+</template>
--- a/apps/frontend/src/emails/templates/account/PATCreated.vue
+++ b/apps/frontend/src/emails/templates/account/PATCreated.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { Heading, Link as VLink, Text } from '@vue-email/components'
+
+import StyledEmail from '@/emails/shared/StyledEmail.vue'
+</script>
+
+<template>
+	<StyledEmail
+		title="A new personal access token has been created"
+		:manual-links="[{ link: 'https://support.modrinth.com', label: 'Support Portal' }]"
+	>
+		<Heading as="h1" class="mb-2 text-2xl font-bold">
+			A new personal access token has been created
+		</Heading>
+
+		<Text class="text-muted text-base">Hi {user.name},</Text>
+		<Text class="text-muted text-base">
+			A new personal access token, <b>{newpat.token_name}</b>, has been added to your account.
+		</Text>
+		<Text class="text-muted text-base">
+			If you did not create this token, please contact us immediately by replying to this email or
+			<VLink href="https://support.modrinth.com" class="text-green underline"
+				>through our Support Portal</VLink
+			>.
+		</Text>
+	</StyledEmail>
+</template>
--- a/apps/frontend/src/emails/templates/account/PasswordChanged.vue
+++ b/apps/frontend/src/emails/templates/account/PasswordChanged.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { Heading, Link as VLink, Text } from '@vue-email/components'
+
+import StyledEmail from '@/emails/shared/StyledEmail.vue'
+</script>
+
+<template>
+	<StyledEmail
+		title="Your password has been changed"
+		:manual-links="[{ link: 'https://support.modrinth.com', label: 'Support Portal' }]"
+	>
+		<Heading as="h1" class="mb-2 text-2xl font-bold"> Your password has been changed </Heading>
+
+		<Text class="text-muted text-base">Hi {user.name},</Text>
+		<Text class="text-muted text-base"> Your password has been changed on your account. </Text>
+		<Text class="text-muted text-base">
+			If you did not make this change, please contact us immediately by replying to this email or
+			<VLink href="https://support.modrinth.com" class="text-green underline"
+				>through our Support Portal</VLink
+			>.
+		</Text>
+	</StyledEmail>
+</template>
--- a/apps/frontend/src/emails/templates/account/PasswordRemoved.vue
+++ b/apps/frontend/src/emails/templates/account/PasswordRemoved.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { Heading, Link as VLink, Text } from '@vue-email/components'
+
+import StyledEmail from '@/emails/shared/StyledEmail.vue'
+</script>
+
+<template>
+	<StyledEmail
+		title="Your password has been removed"
+		:manual-links="[{ link: 'https://support.modrinth.com', label: 'Support Portal' }]"
+	>
+		<Heading as="h1" class="mb-2 text-2xl font-bold"> Your password has been removed </Heading>
+
+		<Text class="text-muted text-base">Hi {user.name},</Text>
+		<Text class="text-muted text-base">
+			At your request, your password has been removed from your account. You must now use a linked
+			authentication provider (such as your {passremoved.provider} account) to log into your
+			Modrinth account.</Text
+		>
+		<Text class="text-muted text-base">
+			If you did not make this change, please contact us immediately by replying to this email or
+			<VLink href="https://support.modrinth.com" class="text-green underline"
+				>through our Support Portal</VLink
+			>.
+		</Text>
+	</StyledEmail>
+</template>
--- a/apps/frontend/src/emails/templates/account/PaymentFailed.vue
+++ b/apps/frontend/src/emails/templates/account/PaymentFailed.vue
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { Button, Heading, Link as VLink, Text } from '@vue-email/components'
+
+import StyledEmail from '@/emails/shared/StyledEmail.vue'
+</script>
+
+<template>
+	<StyledEmail
+		title="Payment failed for {paymentfailed.service}"
+		:manual-links="[{ link: '{billing.url}', label: 'Billing settings' }]"
+	>
+		<Heading as="h1" class="mb-2 text-2xl font-bold">
+			Payment failed for {paymentfailed.service}
+		</Heading>
+
+		<Text class="text-muted text-base">Hi {user.name},</Text>
+		<Text class="text-muted text-base">
+			Our attempt to collect payment for {paymentfailed.amount} from the payment card on file was
+			unsuccessful. Please update your billing settings to avoid suspension of your service.
+		</Text>
+		<Button
+			href="{billing.url}"
+			target="_blank"
+			class="text-accentContrast inline-block rounded-[12px] bg-brand pb-3 pl-4 pr-4 pt-3 text-[14px] font-bold"
+		>
+			Update billing settings
+		</Button>
+
+		<VLink href="{billing.url}">
+			<Text class="text-muted mt-2 break-words text-xs font-bold">{billing.url}</Text>
+		</VLink>
+	</StyledEmail>
+</template>
--- a/apps/frontend/src/emails/templates/account/PayoutAvailable.vue
+++ b/apps/frontend/src/emails/templates/account/PayoutAvailable.vue
@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import { Button, Heading, Link as VLink, Section, Text } from '@vue-email/components'
+
+import StyledEmail from '@/emails/shared/StyledEmail.vue'
+</script>
+
+<template>
+	<StyledEmail
+		title="Revenue available to withdraw!"
+		:manual-links="[
+			{ link: 'https://modrinth.com/dashboard/revenue', label: 'Revenue dashboard' },
+			{ link: 'https://support.modrinth.com', label: 'Support Portal' },
+		]"
+	>
+		<Heading as="h1" class="mb-2 text-2xl font-bold">Revenue available to withdraw!</Heading>
+
+		<Text class="text-base">Hi {user.name},</Text>
+
+		<Text class="text-base">
+			The ${payout.amount} earned during {payout.period} has been processed and is now available to
+			withdraw from your account.
+		</Text>
+
+		<Section class="mb-4 mt-4">
+			<Button
+				href="https://modrinth.com/dashboard/revenue"
+				target="_blank"
+				class="text-accentContrast inline-block rounded-[12px] bg-brand pb-3 pl-4 pr-4 pt-3 text-[14px] font-bold"
+			>
+				View revenue dashboard
+			</Button>
+		</Section>
+
+		<Text class="text-base">
+			If you have any questions about the creator rewards program, please contact support through
+			the
+			<VLink href="https://support.modrinth.com" class="text-green underline">Support Portal</VLink>
+			or by replying to this email.
+		</Text>
+
+		<Text class="text-base">Thank you for being a creator on Modrinth!</Text>
+	</StyledEmail>
+</template>
--- a/apps/frontend/src/emails/templates/account/ResetPassword.vue
+++ b/apps/frontend/src/emails/templates/account/ResetPassword.vue
@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import { Button, Heading, Link as VLink, Text } from '@vue-email/components'
+
+import StyledEmail from '@/emails/shared/StyledEmail.vue'
+</script>
+
+<template>
+	<StyledEmail
+		title="Reset your password"
+		:manual-links="[{ link: '{resetpassword.url}', label: 'Password reset link' }]"
+	>
+		<Heading as="h1" class="mb-2 text-2xl font-bold"> Reset your password </Heading>
+
+		<Text class="text-muted text-base">Hi {user.name},</Text>
+		<Text class="text-muted text-base">
+			Please visit the link below to reset your password. If you did not request for your password
+			to be reset, you can safely ignore this email.
+		</Text>
+
+		<Button
+			href="{resetpassword.url}"
+			target="_blank"
+			class="text-accentContrast inline-block rounded-[12px] bg-brand pb-3 pl-4 pr-4 pt-3 text-[14px] font-bold"
+		>
+			Reset password
+		</Button>
+
+		<VLink href="{resetpassword.url}">
+			<Text class="text-muted mt-2 break-words text-xs font-bold">{resetpassword.url}</Text>
+		</VLink>
+	</StyledEmail>
+</template>
--- a/apps/frontend/src/emails/templates/account/TwoFactorAdded.vue
+++ b/apps/frontend/src/emails/templates/account/TwoFactorAdded.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { Heading, Link as VLink, Text } from '@vue-email/components'
+
+import StyledEmail from '@/emails/shared/StyledEmail.vue'
+</script>
+
+<template>
+	<StyledEmail
+		title="Two-factor authentication enabled"
+		:manual-links="[{ link: 'https://support.modrinth.com', label: 'Support Portal' }]"
+	>
+		<Heading as="h1" class="mb-2 text-2xl font-bold"> Two-factor authentication enabled </Heading>
+
+		<Text class="text-muted text-base">Hi {user.name},</Text>
+		<Text class="text-muted text-base">
+			You've secured your account with two-factor authentication. Now, when signing in, you will
+			need to submit the code generated by your authenticator app.
+		</Text>
+		<Text class="text-muted text-base">
+			If you did not make this change, please contact us immediately by replying to this email or
+			<VLink href="https://support.modrinth.com" class="text-green underline"
+				>through our Support Portal</VLink
+			>.
+		</Text>
+	</StyledEmail>
+</template>
--- a/apps/frontend/src/emails/templates/account/TwoFactorRemoved.vue
+++ b/apps/frontend/src/emails/templates/account/TwoFactorRemoved.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { Heading, Link as VLink, Text } from '@vue-email/components'
+
+import StyledEmail from '@/emails/shared/StyledEmail.vue'
+</script>
+
+<template>
+	<StyledEmail
+		title="You've disabled two-factor authentication security on your account."
+		:manual-links="[{ link: 'https://support.modrinth.com', label: 'Support Portal' }]"
+	>
+		<Heading as="h1" class="mb-2 text-2xl font-bold">
+			You've disabled two-factor authentication security on your account.
+		</Heading>
+
+		<Text class="text-muted text-base">Hi {user.name},</Text>
+		<Text class="text-muted text-base">
+			At your request, we've removed two-factor authentication from your Modrinth account.
+		</Text>
+		<Text class="text-muted text-base">
+			If you did not make this change, please contact us immediately by replying to this email or
+			<VLink href="https://support.modrinth.com" class="text-green underline"
+				>through our Support Portal</VLink
+			>.
+		</Text>
+	</StyledEmail>
+</template>
--- a/apps/frontend/src/emails/templates/account/VerifyEmail.vue
+++ b/apps/frontend/src/emails/templates/account/VerifyEmail.vue
@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import { Button, Heading, Link as VLink, Text } from '@vue-email/components'
+
+import StyledEmail from '@/emails/shared/StyledEmail.vue'
+</script>
+
+<template>
+	<StyledEmail
+		title="Verify your Modrinth email"
+		:manual-links="[{ link: '{verifyemail.url}', label: 'Verification link' }]"
+	>
+		<Heading as="h1" class="mb-2 text-2xl font-bold"> Verify your email </Heading>
+
+		<Text class="text-muted text-base">Hi {user.name},</Text>
+		<Text class="text-muted text-base">
+			Please visit the link below to verify your email. If the button does not work, you can copy
+			the link and paste it into your browser. This link expires in 24 hours.
+		</Text>
+
+		<Button
+			href="{verifyemail.url}"
+			target="_blank"
+			class="text-accentContrast inline-block rounded-[12px] bg-brand pb-3 pl-4 pr-4 pt-3 text-[14px] font-bold"
+		>
+			Verify email
+		</Button>
+
+		<VLink href="{verifyemail.url}">
+			<Text class="text-muted mt-2 break-words text-xs font-bold">{verifyemail.url}</Text>
+		</VLink>
+	</StyledEmail>
+</template>
--- a/apps/frontend/src/emails/templates/moderation/ModerationThreadMessageReceived.vue
+++ b/apps/frontend/src/emails/templates/moderation/ModerationThreadMessageReceived.vue
@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import { Heading, Img, Link as VLink, Section, Text } from '@vue-email/components'
+
+import StyledEmail from '@/emails/shared/StyledEmail.vue'
+</script>
+
+<template>
+	<StyledEmail
+		title="New moderation message"
+		:manual-links="[
+			{ link: 'https://modrinth.com/legal/rules', label: 'Community Guidelines' },
+			{
+				link: 'https://modrinth.com/project/{project.id}/moderation',
+				label: 'Your project\'s moderation thread',
+			},
+			{ link: 'https://support.modrinth.com', label: 'Support Portal' },
+		]"
+	>
+		<Section class="mb-4 mt-2">
+			<Img
+				src="{project.icon_url}"
+				alt="project icon"
+				width="64"
+				height="64"
+				class="block h-auto"
+			/>
+		</Section>
+		<Heading as="h1" class="mb-2 text-2xl font-bold"
+			>New message from moderators on {project.name}</Heading
+		>
+
+		<Text class="text-base">Hi {user.name},</Text>
+
+		<Text class="text-base">
+			Modrinth's moderation team has left a message on your project,
+			<VLink
+				href="https://modrinth.com/project/{project.id}/moderation"
+				class="text-green underline"
+				>{project.name}</VLink
+			>.
+		</Text>
+
+		<Section class="bg-bg-super mb-4 mt-4 rounded-lg border border-divider pb-4 pl-4 pr-4 pt-4">
+			<Text class="m-0 text-base">
+				Please
+				<VLink
+					href="https://modrinth.com/project/{project.id}/moderation"
+					class="text-green underline"
+					>sign in to view the message</VLink
+				>
+				and reply if requested. It's important to address feedback from the moderation team
+				promptly.
+			</Text>
+		</Section>
+
+		<Text class="text-base">Thank you for publishing on Modrinth!</Text>
+	</StyledEmail>
+</template>
--- a/apps/frontend/src/emails/templates/moderation/ReportStatusUpdated.vue
+++ b/apps/frontend/src/emails/templates/moderation/ReportStatusUpdated.vue
@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import { Heading, Link as VLink, Text } from '@vue-email/components'
+
+import StyledEmail from '@/emails/shared/StyledEmail.vue'
+</script>
+
+<template>
+	<StyledEmail
+		title="Report of '{report.title}' has been updated"
+		:manual-links="[
+			{ link: 'https://modrinth.com/legal/rules', label: 'Community Guidelines' },
+			{
+				link: 'https://modrinth.com/dashboard/report/{report.id}',
+				label: 'View report in dashboard',
+			},
+			{ link: 'https://support.modrinth.com', label: 'Support Portal' },
+		]"
+	>
+		<Heading as="h1" class="mb-2 text-2xl font-bold"
+			>Report of '{report.title}' has been updated</Heading
+		>
+
+		<Text class="text-base">Hi {user.name},</Text>
+
+		<Text class="text-base"
+			>Your report of {report.title} from {report.date} has been updated by our moderation
+			team.</Text
+		>
+
+		<Text class="text-base">
+			You can
+			<VLink href="https://modrinth.com/dashboard/report/{report.id}" class="text-green underline"
+				>view the full report thread</VLink
+			>
+			to see the update. If you have more information to add, please reply in the report thread for
+			our moderators to review.
+		</Text>
+
+		<Text class="text-base"
+			>Thank you for helping keep Modrinth safe and welcoming for everyone.</Text
+		>
+	</StyledEmail>
+</template>
--- a/apps/frontend/src/emails/templates/moderation/ReportSubmitted.vue
+++ b/apps/frontend/src/emails/templates/moderation/ReportSubmitted.vue
@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import { Heading, Link as VLink, Text } from '@vue-email/components'
+
+import StyledEmail from '@/emails/shared/StyledEmail.vue'
+</script>
+
+<template>
+	<StyledEmail
+		title="Report of {report.title} has been submitted"
+		:manual-links="[
+			{ link: 'https://modrinth.com/legal/rules', label: 'Community Guidelines' },
+			{
+				link: 'https://modrinth.com/dashboard/report/{newreport.id}',
+				label: 'View report in dashboard',
+			},
+			{ link: 'https://support.modrinth.com', label: 'Support Portal' },
+		]"
+	>
+		<Heading as="h1" class="mb-2 text-2xl font-bold"
+			>Report of {report.title} has been submitted</Heading
+		>
+
+		<Text class="text-base">Hi {user.name},</Text>
+
+		<Text class="text-base">
+			We've received your report of {report.title} and our moderation team will review it shortly.
+		</Text>
+
+		<Text class="text-base">
+			Our team takes all reports seriously and will investigate according to our
+			<VLink href="https://modrinth.com/legal/rules" class="text-green underline"
+				>Content Rules</VLink
+			>, <VLink href="https://modrinth.com/legal/terms">Terms of Service</VLink> and
+			<VLink href="https://modrinth.com/legal/copyright">Copyright Policy</VLink>. You'll receive an
+			email update once we've completed our review.
+		</Text>
+
+		<Text class="text-base">
+			If you have any additional information about this report, you can
+			<VLink
+				href="https://modrinth.com/dashboard/report/{newreport.id}"
+				class="text-green underline"
+				>view it here</VLink
+			>.
+		</Text>
+
+		<Text class="text-base">
+			Thank you for helping keep Modrinth safe and welcoming for everyone.
+		</Text>
+	</StyledEmail>
+</template>
--- a/apps/frontend/src/emails/templates/organization/OrganizationInvited.vue
+++ b/apps/frontend/src/emails/templates/organization/OrganizationInvited.vue
@@ -0,0 +1,75 @@
+<script setup lang="ts">
+import { Button, Heading, Img, Link as VLink, Section, Text } from '@vue-email/components'
+
+import StyledEmail from '@/emails/shared/StyledEmail.vue'
+</script>
+
+<template>
+	<StyledEmail
+		title="You've been invited to an organization"
+		:manual-links="[
+			{ link: 'https://modrinth.com/organization/{organization.id}', label: 'Organization page' },
+			{ link: 'https://modrinth.com/dashboard/notifications', label: 'Notification dashboard' },
+			{ link: 'https://support.modrinth.com', label: 'Support Portal' },
+		]"
+	>
+		<Section class="mb-4 mt-2">
+			<Img
+				src="{organization.icon_url}"
+				alt="organization icon"
+				width="64"
+				height="64"
+				class="block h-auto rounded-lg"
+			/>
+		</Section>
+
+		<Heading as="h1" class="mb-2 text-2xl font-bold"
+			>You've been invited to an organization</Heading
+		>
+
+		<Text class="text-base">Hi {user.name},</Text>
+
+		<Text class="text-base"
+			>Modrinth user
+			<b
+				><VLink href="https://modrinth.com/user/{inviter.name}" class="text-green underline">
+					{inviter.name}
+				</VLink></b
+			>
+			has invited you to join the organization
+			<b
+				><VLink
+					href="https://modrinth.com/organization/{organization.id}"
+					class="text-green underline"
+				>
+					{organization.name}
+				</VLink></b
+			>
+			on Modrinth.
+		</Text>
+
+		<Section class="bg-bg-super mb-4 mt-4 rounded-lg border border-divider pb-4 pl-4 pr-4 pt-4">
+			<Text class="m-0 text-base">
+				As an organization member you may gain access to manage projects, teams, members, settings,
+				and other resources depending on the permissions assigned to you.
+			</Text>
+		</Section>
+
+		<Button
+			href="https://modrinth.com/dashboard/notifications"
+			target="_blank"
+			class="text-accentContrast inline-block rounded-[12px] bg-brand pb-3 pl-4 pr-4 pt-3 text-[14px] font-bold"
+		>
+			Review invitation
+		</Button>
+
+		<Text class="text-base">
+			If you were not expecting this invitation you should reject it. If you believe this was sent
+			in error or is abusive, please contact support
+			<VLink href="https://support.modrinth.com" class="text-green underline">
+				through the Support Portal</VLink
+			>
+			or by replying to this email.
+		</Text>
+	</StyledEmail>
+</template>
--- a/apps/frontend/src/emails/templates/project/ProjectInvited.vue
+++ b/apps/frontend/src/emails/templates/project/ProjectInvited.vue
@@ -0,0 +1,70 @@
+<script setup lang="ts">
+import { Button, Heading, Img, Link as VLink, Section, Text } from '@vue-email/components'
+
+import StyledEmail from '@/emails/shared/StyledEmail.vue'
+</script>
+
+<template>
+	<StyledEmail
+		title="You've been invited to a project"
+		:manual-links="[
+			{ link: 'https://modrinth.com/project/{project.id}', label: 'Project page' },
+			{ link: 'https://modrinth.com/dashboard/notifications', label: 'Notification dashboard' },
+			{ link: 'https://support.modrinth.com', label: 'Support Portal' },
+		]"
+	>
+		<Section class="mb-4 mt-2">
+			<Img
+				src="{project.icon_url}"
+				alt="project icon"
+				width="64"
+				height="64"
+				class="block h-auto rounded-lg"
+			/>
+		</Section>
+		<Heading as="h1" class="mb-2 text-2xl font-bold">You've been invited to a project</Heading>
+
+		<Text class="text-base">Hi {user.name},</Text>
+
+		<Text class="text-base">
+			Modrinth user
+			<b
+				><VLink href="https://modrinth.com/user/{inviter.name}" class="text-green underline">
+					{inviter.name}
+				</VLink></b
+			>
+			has invited you to join the project
+			<b>
+				<VLink href="https://modrinth.com/project/{project.id}" class="text-green underline">
+					{project.name}
+				</VLink>
+			</b>
+			on Modrinth.
+		</Text>
+
+		<Section class="bg-bg-super mb-4 mt-4 rounded-lg border border-divider pb-4 pl-4 pr-4 pt-4">
+			<Text class="m-0 text-base">
+				As a project member you may be able to manage versions, edit project details, configure
+				settings, and collaborate with other maintainers depending on the permissions assigned to
+				you.
+			</Text>
+		</Section>
+
+		<Button
+			href="https://modrinth.com/dashboard/notifications"
+			target="_blank"
+			class="text-accentContrast inline-block rounded-[12px] bg-brand pb-3 pl-4 pr-4 pt-3 text-[14px] font-bold"
+		>
+			Review invitation
+		</Button>
+
+		<Text class="text-base">
+			If you were not expecting this invitation you should reject the invitation. If you believe
+			this was sent in error or is abusive, please contact support
+			<VLink href="https://support.modrinth.com" class="text-green underline">
+				through the Support Portal</VLink
+			>
+			or by replying to this email.
+		</Text>
+	</StyledEmail>
+</template>
--- a/apps/frontend/src/emails/templates/project/ProjectStatusApproved.vue
+++ b/apps/frontend/src/emails/templates/project/ProjectStatusApproved.vue
@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import { Button, Heading, Img, Link as VLink, Section, Text } from '@vue-email/components'
+
+import StyledEmail from '@/emails/shared/StyledEmail.vue'
+</script>
+
+<template>
+	<StyledEmail
+		title="Your project, {project.name}, has been approved 🎉"
+		:manual-links="[
+			{ link: 'https://modrinth.com/project/{project.id}', label: 'Project page' },
+			{ link: 'https://modrinth.com/legal/rules', label: 'Community Guidelines' },
+			{ link: 'https://support.modrinth.com', label: 'Support Portal' },
+		]"
+	>
+		<Section class="mb-4 mt-2">
+			<Img
+				src="{project.icon_url}"
+				alt="project icon"
+				width="64"
+				height="64"
+				class="block h-auto rounded-lg"
+			/>
+		</Section>
+		<Heading as="h1" class="mb-2 text-2xl font-bold"
+			>Your project, {project.name}, has been approved 🎉</Heading
+		>
+
+		<Text class="text-base">Congratulations {user.name},</Text>
+
+		<Text class="text-base">
+			Your project
+			<VLink href="https://modrinth.com/project/{project.id}" class="text-green underline"
+				>{project.name}</VLink
+			>
+			has been <b>approved</b> by the moderation team!
+		</Text>
+
+		<Button
+			href="https://modrinth.com/project/{project.id}"
+			target="_blank"
+			class="text-accentContrast inline-block rounded-[12px] bg-brand pb-3 pl-4 pr-4 pt-3 text-[14px] font-bold"
+		>
+			View project
+		</Button>
+
+		<Text class="text-base">
+			If you have questions or believe something isn't correct, you can reply to this email or reach
+			out via the
+			<VLink href="https://support.modrinth.com" class="text-green underline">Support Portal</VLink
+			>.
+		</Text>
+
+		<Text class="text-base">Thank you for sharing your work with the Modrinth community!</Text>
+	</StyledEmail>
+</template>
--- a/apps/frontend/src/emails/templates/project/ProjectStatusUpdatedNeutral.vue
+++ b/apps/frontend/src/emails/templates/project/ProjectStatusUpdatedNeutral.vue
@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import { Button, Heading, Img, Link as VLink, Section, Text } from '@vue-email/components'
+
+import StyledEmail from '@/emails/shared/StyledEmail.vue'
+</script>
+
+<template>
+	<StyledEmail
+		title="Your project, {project.name}, status has been updated"
+		:manual-links="[
+			{ link: 'https://modrinth.com/legal/rules', label: 'Community Guidelines' },
+			{
+				link: 'https://modrinth.com/project/{project.id}/moderation',
+				label: 'Your project\'s moderation thread',
+			},
+			{ link: 'https://support.modrinth.com', label: 'Support Portal' },
+		]"
+	>
+		<Section class="mb-4 mt-2">
+			<Img
+				src="{project.icon_url}"
+				alt="project icon"
+				width="64"
+				height="64"
+				class="block h-auto rounded-lg"
+			/>
+		</Section>
+		<Heading as="h1" class="mb-2 text-2xl font-bold"
+			>Your project, {project.name}, status has been updated</Heading
+		>
+
+		<Text class="text-base">Hi {user.name},</Text>
+
+		<Text class="text-base">
+			Your project's status has been changed from <b>{project.oldstatus}</b> to
+			<b>{project.newstatus}</b> by the moderation team. Please review any messages left in the
+			<VLink
+				href="https://modrinth.com/project/{project.id}/moderation"
+				class="text-green underline"
+				>moderation thread</VLink
+			>
+			which might be relevant to why the status was changed.
+		</Text>
+
+		<Button
+			href="https://modrinth.com/project/{project.id}"
+			target="_blank"
+			class="text-accentContrast inline-block rounded-[12px] bg-brand pb-3 pl-4 pr-4 pt-3 text-[14px] font-bold"
+		>
+			View project
+		</Button>
+
+		<Text class="text-base">
+			If you believe this status was applied in error, you can reply in the moderation thread or
+			contact support through our
+			<VLink href="https://support.modrinth.com" class="text-green underline">Support Portal</VLink>
+			or by replying to this email.
+		</Text>
+
+		<Text class="text-base">Thank you for publishing on Modrinth!</Text>
+	</StyledEmail>
+</template>
--- a/apps/frontend/src/emails/templates/project/ProjectTransferred.vue
+++ b/apps/frontend/src/emails/templates/project/ProjectTransferred.vue
@@ -0,0 +1,60 @@
+<script setup lang="ts">
+import { Button, Heading, Img, Link as VLink, Section, Text } from '@vue-email/components'
+
+import StyledEmail from '@/emails/shared/StyledEmail.vue'
+</script>
+
+<template>
+	<StyledEmail
+		title="Project ownership transferred"
+		:manual-links="[
+			{ link: 'https://modrinth.com/project/{project.id}', label: 'Project page' },
+			{ link: 'https://modrinth.com/dashboard/notifications', label: 'Notification dashboard' },
+			{ link: 'https://support.modrinth.com', label: 'Support Portal' },
+		]"
+	>
+		<Section class="mb-4 mt-2">
+			<Img
+				src="{project.icon_url}"
+				alt="project icon"
+				width="64"
+				height="64"
+				class="block h-auto rounded-lg"
+			/>
+		</Section>
+		<Heading as="h1" class="mb-2 text-2xl font-bold">Project ownership transferred</Heading>
+
+		<Text class="text-base">Hi {user.name},</Text>
+
+		<Text class="text-base">
+			The ownership of
+			<b>
+				<VLink href="https://modrinth.com/project/{project.id}" class="text-green underline">
+					{project.name}
+				</VLink>
+			</b>
+			has been successfully transferred to the Modrinth {new_owner.type_capitalized}
+			<b
+				><VLink
+					href="https://modrinth.com/{new_owner.type}/{new_owner.name}"
+					class="text-green underline"
+					>{new_owner.name}</VLink
+				></b
+			>.
+		</Text>
+
+		<Button
+			href="https://modrinth.com/project/{project.id}"
+			target="_blank"
+			class="text-accentContrast inline-block rounded-[12px] bg-brand pb-3 pl-4 pr-4 pt-3 text-[14px] font-bold"
+		>
+			View project
+		</Button>
+
+		<Text class="text-base">
+			If you did not initiate this transfer, please contact support immediately through the
+			<VLink href="https://support.modrinth.com" class="text-green underline">Support Portal</VLink>
+			or by replying to this email.
+		</Text>
+	</StyledEmail>
+</template>
--- a/apps/frontend/src/pages/admin/emails.vue
+++ b/apps/frontend/src/pages/admin/emails.vue
@@ -0,0 +1,129 @@
+<script setup lang="ts">
+import { CopyIcon, LibraryIcon, PlayIcon, SearchIcon } from '@modrinth/assets'
+import { ButtonStyled, Card } from '@modrinth/ui'
+import { computed, onMounted, ref } from 'vue'
+
+import emails from '@/emails'
+
+const allTemplates = Object.keys(emails).sort()
+const query = ref('')
+const filtered = computed(() =>
+	allTemplates.filter((t) => t.toLowerCase().includes(query.value.toLowerCase().trim())),
+)
+
+function openAll() {
+	let offset = 0
+	for (const id of filtered.value) {
+		openPreview(id, offset)
+		offset++
+	}
+}
+
+function copy(id: string) {
+	navigator.clipboard?.writeText(`/email/${id}`).catch(() => {})
+}
+
+function openPreview(id: string, offset = 0) {
+	const width = 600
+	const height = 850
+	const left = window.screenX + (window.outerWidth - width) / 2 + ((offset * 28) % 320)
+	const top = window.screenY + (window.outerHeight - height) / 2 + ((offset * 28) % 320)
+	window.open(
+		`/email/${id}`,
+		`email-${id}`,
+		`popup=yes,width=${width},height=${height},left=${left},top=${top},resizable=yes,scrollbars=yes,menubar=no,toolbar=no,location=no,status=no`,
+	)
+}
+
+const counts = computed(() => ({
+	total: allTemplates.length,
+	shown: filtered.value.length,
+}))
+
+onMounted(() => {
+	document.getElementById('email-search')?.focus()
+})
+</script>
+
+<template>
+	<div class="normal-page no-sidebar">
+		<h1 class="mb-4 text-3xl font-extrabold text-heading">Email templates</h1>
+		<div class="normal-page__content">
+			<Card class="mb-6 flex flex-col gap-4">
+				<div class="flex flex-wrap items-center gap-3">
+					<div class="relative">
+						<SearchIcon
+							class="pointer-events-none absolute left-2 top-1/2 h-4 w-4 -translate-y-1/2 text-secondary"
+						/>
+						<input
+							id="email-search"
+							v-model="query"
+							type="text"
+							placeholder="Search templates..."
+							class="w-72 rounded-lg border border-divider bg-bg px-7 py-2 text-sm text-primary placeholder-secondary focus:border-green focus:outline-none"
+						/>
+					</div>
+
+					<ButtonStyled color="brand">
+						<button :disabled="filtered.length === 0" @click="openAll">
+							<LibraryIcon class="h-4 w-4" aria-hidden="true" />
+							Open all ({{ counts.shown }})
+						</button>
+					</ButtonStyled>
+
+					<span class="text-sm text-secondary">
+						Showing <span class="font-medium text-contrast">{{ counts.shown }}</span> of
+						<span class="font-medium text-contrast">{{ counts.total }}</span>
+					</span>
+				</div>
+
+				<div
+					v-if="filtered.length === 0"
+					class="rounded-lg border border-dashed border-divider px-6 py-10 text-center text-sm text-secondary"
+				>
+					No templates match your search.
+				</div>
+
+				<ul v-else class="grid gap-4 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
+					<li
+						v-for="id in filtered"
+						:key="id"
+						class="hover:border-green/70 group flex flex-col justify-between rounded-lg border border-divider bg-button-bg p-4 shadow-sm transition hover:shadow"
+					>
+						<div class="mb-3">
+							<div class="font-mono text-sm font-semibold tracking-tight text-contrast">
+								{{ id }}
+							</div>
+							<div class="mt-1 truncate text-xs text-secondary">/email/{{ id }}</div>
+						</div>
+
+						<div class="mt-auto flex gap-2">
+							<ButtonStyled color="brand" class="flex-1">
+								<button class="w-full justify-center" @click="openPreview(id)">
+									<PlayIcon class="h-4 w-4" aria-hidden="true" />
+									Preview
+								</button>
+							</ButtonStyled>
+
+							<ButtonStyled>
+								<button class="justify-center" title="Copy preview URL" @click="copy(id)">
+									<CopyIcon class="h-4 w-4" aria-hidden="true" />
+								</button>
+							</ButtonStyled>
+						</div>
+					</li>
+				</ul>
+			</Card>
+
+			<p class="mt-2 text-xs text-secondary">
+				All templates come from
+				<code class="rounded bg-code-bg px-1 py-0.5 text-[11px] text-code-text"
+					>src/emails/index.ts</code
+				>. Popouts render via
+				<code class="rounded bg-code-bg px-1 py-0.5 text-[11px] text-code-text"
+					>/email/[template]</code
+				>.
+			</p>
+		</div>
+	</div>
+</template>
--- a/apps/frontend/src/public/robots.txt
+++ b/apps/frontend/src/public/robots.txt
@@ -1,2 +1,2 @@
 User-agent: *
-Disallow:
+Disallow: /email/
--- a/apps/frontend/src/server/routes/email/[template].ts
+++ b/apps/frontend/src/server/routes/email/[template].ts
@@ -0,0 +1,28 @@
+import { render } from '@vue-email/render'
+import type { Component } from 'vue'
+
+import emails from '~/emails'
+
+export default defineEventHandler(async (event) => {
+	const template = event.context.params?.template as string
+	try {
+		const component = (await emails[template]()).default as Component | undefined
+
+		if (!component) {
+			throw createError({
+				statusCode: 404,
+				message: 'Email template not found',
+			})
+		}
+
+		const html = await render(component, {})
+
+		return html
+	} catch (error) {
+		console.error(`Error rendering email template ${template}:`, error)
+		throw createError({
+			statusCode: 500,
+			message: 'Failed to render email template',
+		})
+	}
+})