Next.js Supabase V3 (#463)

Version 3 of the kit:
- Radix UI replaced with Base UI (using the Shadcn UI patterns)
- next-intl replaces react-i18next
- enhanceAction deprecated; usage moved to next-safe-action
- main layout now wrapped with [locale] path segment
- Teams only mode
- Layout updates
- Zod v4
- Next.js 16.2
- Typescript 6
- All other dependencies updated
- Removed deprecated Edge CSRF
- Dynamic Github Action runner

packages/email-templates/src/emails/account-delete.email.tsx

@@ -29,11 +29,11 @@ export async function renderAccountDeleteEmail(props: Props) {
     namespace,
   });
 
-  const previewText = t(`${namespace}:previewText`, {
+  const previewText = t(`previewText`, {
     productName: props.productName,
   });
 
-  const subject = t(`${namespace}:subject`, {
+  const subject = t(`subject`, {
     productName: props.productName,
   });
 
@@ -54,27 +54,27 @@ export async function renderAccountDeleteEmail(props: Props) {
 
             <EmailContent>
               <Text className="text-[16px] leading-[24px] text-[#242424]">
-                {t(`${namespace}:hello`)}
+                {t(`hello`)}
               </Text>
 
               <Text className="text-[16px] leading-[24px] text-[#242424]">
-                {t(`${namespace}:paragraph1`, {
+                {t(`paragraph1`, {
                   productName: props.productName,
                 })}
               </Text>
 
               <Text className="text-[16px] leading-[24px] text-[#242424]">
-                {t(`${namespace}:paragraph2`)}
+                {t(`paragraph2`)}
               </Text>
 
               <Text className="text-[16px] leading-[24px] text-[#242424]">
-                {t(`${namespace}:paragraph3`, {
+                {t(`paragraph3`, {
                   productName: props.productName,
                 })}
               </Text>
 
               <Text className="text-[16px] leading-[24px] text-[#242424]">
-                {t(`${namespace}:paragraph4`, {
+                {t(`paragraph4`, {
                   productName: props.productName,
                 })}
               </Text>

packages/email-templates/src/emails/invite.email.tsx

@@ -42,24 +42,25 @@ export async function renderInviteEmail(props: Props) {
   });
 
   const previewText = `Join ${props.invitedUserEmail} on ${props.productName}`;
-  const subject = t(`${namespace}:subject`);
+  const subject = t(`subject`);
 
-  const heading = t(`${namespace}:heading`, {
+  const heading = t(`heading`, {
     teamName: props.teamName,
     productName: props.productName,
   });
 
-  const hello = t(`${namespace}:hello`, {
+  const hello = t(`hello`, {
     invitedUserEmail: props.invitedUserEmail,
   });
 
-  const mainText = t(`${namespace}:mainText`, {
+  const mainText = t(`mainText`, {
     inviter: props.inviter,
     teamName: props.teamName,
     productName: props.productName,
+    strong: (chunks: string) => `<strong>${chunks}</strong>`,
   });
 
-  const joinTeam = t(`${namespace}:joinTeam`, {
+  const joinTeam = t(`joinTeam`, {
     teamName: props.teamName,
   });
 
@@ -108,7 +109,7 @@ export async function renderInviteEmail(props: Props) {
               </Section>
 
               <Text className="text-[16px] leading-[24px] text-[#242424]">
-                {t(`${namespace}:copyPasteLink`)}{' '}
+                {t(`copyPasteLink`)}{' '}
                 <Link href={props.link} className="text-blue-600 no-underline">
                   {props.link}
                 </Link>
@@ -117,7 +118,7 @@ export async function renderInviteEmail(props: Props) {
               <Hr className="mx-0 my-[26px] w-full border border-solid border-[#eaeaea]" />
 
               <Text className="text-[12px] leading-[24px] text-[#666666]">
-                {t(`${namespace}:invitationIntendedFor`, {
+                {t(`invitationIntendedFor`, {
                   invitedUserEmail: props.invitedUserEmail,
                 })}
               </Text>

packages/email-templates/src/emails/otp.email.tsx

@@ -32,22 +32,22 @@ export async function renderOtpEmail(props: Props) {
     namespace,
   });
 
-  const subject = t(`${namespace}:subject`, {
+  const subject = t(`subject`, {
     productName: props.productName,
   });
 
   const previewText = subject;
 
-  const heading = t(`${namespace}:heading`, {
+  const heading = t(`heading`, {
     productName: props.productName,
   });
 
-  const otpText = t(`${namespace}:otpText`, {
+  const otpText = t(`otpText`, {
     otp: props.otp,
   });
 
-  const mainText = t(`${namespace}:mainText`);
-  const footerText = t(`${namespace}:footerText`);
+  const mainText = t(`mainText`);
+  const footerText = t(`footerText`);
 
   const html = await render(
     <Html>