feat: web i18n (#1286)

apps/web/src/app/(profile)/layout.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 
+import { setupI18nSSR } from '@documenso/lib/client-only/providers/i18n.server';
 import { getServerComponentSession } from '@documenso/lib/next-auth/get-server-component-session';
 import { getTeams } from '@documenso/lib/server-only/team/get-teams';
 
@@ -13,6 +14,8 @@ type PublicProfileLayoutProps = {
 };
 
 export default async function PublicProfileLayout({ children }: PublicProfileLayoutProps) {
+  setupI18nSSR();
+
   const { user, session } = await getServerComponentSession();
 
   // I wouldn't typically do this but it's better than the `let` statement

apps/web/src/app/(profile)/p/[url]/not-found.tsx

@@ -2,6 +2,7 @@
 
 import Link from 'next/link';
 
+import { Trans } from '@lingui/macro';
 import { ChevronLeft } from 'lucide-react';
 
 import { Button } from '@documenso/ui/primitives/button';
@@ -10,19 +11,23 @@ export default function NotFound() {
   return (
     <div className="mx-auto flex min-h-[80vh] w-full items-center justify-center py-32">
       <div>
-        <p className="text-muted-foreground font-semibold">404 Profile not found</p>
+        <p className="text-muted-foreground font-semibold">
+          <Trans>404 Profile not found</Trans>
+        </p>
 
-        <h1 className="mt-3 text-2xl font-bold md:text-3xl">Oops! Something went wrong.</h1>
+        <h1 className="mt-3 text-2xl font-bold md:text-3xl">
+          <Trans>Oops! Something went wrong.</Trans>
+        </h1>
 
         <p className="text-muted-foreground mt-4 text-sm">
-          The profile you are looking for could not be found.
+          <Trans>The profile you are looking for could not be found.</Trans>
         </p>
 
         <div className="mt-6 flex gap-x-2.5 gap-y-4 md:items-center">
           <Button asChild className="w-32">
             <Link href="/">
               <ChevronLeft className="mr-2 h-4 w-4" />
-              Go Back
+              <Trans>Go Back</Trans>
             </Link>
           </Button>
         </div>

apps/web/src/app/(profile)/p/[url]/page.tsx

@@ -2,9 +2,11 @@ import Image from 'next/image';
 import Link from 'next/link';
 import { notFound, redirect } from 'next/navigation';
 
+import { Trans } from '@lingui/macro';
 import { FileIcon } from 'lucide-react';
 import { DateTime } from 'luxon';
 
+import { setupI18nSSR } from '@documenso/lib/client-only/providers/i18n.server';
 import { NEXT_PUBLIC_WEBAPP_URL } from '@documenso/lib/constants/app';
 import { getServerComponentSession } from '@documenso/lib/next-auth/get-server-component-session';
 import { getPublicProfileByUrl } from '@documenso/lib/server-only/profile/get-public-profile-by-url';
@@ -40,6 +42,8 @@ const BADGE_DATA = {
 };
 
 export default async function PublicProfilePage({ params }: PublicProfilePageProps) {
+  setupI18nSSR();
+
   const { url: profileUrl } = params;
 
   if (!profileUrl) {
@@ -102,7 +106,9 @@ export default async function PublicProfilePage({ params }: PublicProfilePagePro
                     {BADGE_DATA[publicProfile.badge.type].name}
                   </p>
                   <p className="text-muted-foreground mt-0.5 text-sm">
-                    Since {DateTime.fromJSDate(publicProfile.badge.since).toFormat('LLL ‘yy')}
+                    <Trans>
+                      Since {DateTime.fromJSDate(publicProfile.badge.since).toFormat('LLL ‘yy')}
+                    </Trans>
                   </p>
                 </div>
               </TooltipContent>
@@ -125,20 +131,26 @@ export default async function PublicProfilePage({ params }: PublicProfilePagePro
       {templates.length === 0 && (
         <div className="mt-4 w-full max-w-xl border-t pt-4">
           <p className="text-muted-foreground max-w-[60ch] whitespace-pre-wrap break-words text-center text-sm leading-relaxed">
-            It looks like {publicProfile.name} hasn't added any documents to their profile yet.{' '}
+            <Trans>
+              It looks like {publicProfile.name} hasn't added any documents to their profile yet.
+            </Trans>{' '}
             {!user?.id && (
               <span className="mt-2 inline-block">
-                While waiting for them to do so you can create your own Documenso account and get
-                started with document signing right away.
+                <Trans>
+                  While waiting for them to do so you can create your own Documenso account and get
+                  started with document signing right away.
+                </Trans>
               </span>
             )}
             {'userId' in profile && user?.id === profile.userId && (
               <span className="mt-2 inline-block">
-                Go to your{' '}
-                <Link href="/settings/public-profile" className="underline">
-                  public profile settings
-                </Link>{' '}
-                to add documents.
+                <Trans>
+                  Go to your{' '}
+                  <Link href="/settings/public-profile" className="underline">
+                    public profile settings
+                  </Link>{' '}
+                  to add documents.
+                </Trans>
               </span>
             )}
           </p>
@@ -151,7 +163,7 @@ export default async function PublicProfilePage({ params }: PublicProfilePagePro
             <TableHeader>
               <TableRow>
                 <TableHead className="w-full rounded-tl-md bg-neutral-50 dark:bg-neutral-700">
-                  Documents
+                  <Trans>Documents</Trans>
                 </TableHead>
               </TableRow>
             </TableHeader>
@@ -177,7 +189,7 @@ export default async function PublicProfilePage({ params }: PublicProfilePagePro
 
                         <Button asChild className="w-20">
                           <Link href={formatDirectTemplatePath(template.directLink.token)}>
-                            Sign
+                            <Trans>Sign</Trans>
                           </Link>
                         </Button>
                       </div>

apps/web/src/app/(profile)/profile-header.tsx

@@ -5,6 +5,7 @@ import { useEffect, useState } from 'react';
 import Image from 'next/image';
 import Link from 'next/link';
 
+import { Trans } from '@lingui/macro';
 import { PlusIcon } from 'lucide-react';
 
 import LogoIcon from '@documenso/assets/logo_icon.png';
@@ -63,9 +64,11 @@ export const ProfileHeader = ({ user, teams = [] }: ProfileHeaderProps) => {
 
         <div className="flex flex-row items-center justify-center">
           <p className="text-muted-foreground mr-4">
-            <span className="text-sm sm:hidden">Want your own public profile?</span>
+            <span className="text-sm sm:hidden">
+              <Trans>Want your own public profile?</Trans>
+            </span>
             <span className="hidden text-sm sm:block">
-              Like to have your own public profile with agreements?
+              <Trans>Like to have your own public profile with agreements?</Trans>
             </span>
           </p>
 
@@ -73,10 +76,12 @@ export const ProfileHeader = ({ user, teams = [] }: ProfileHeaderProps) => {
             <Link href="/signup">
               <div className="hidden flex-row items-center sm:flex">
                 <PlusIcon className="mr-1 h-5 w-5" />
-                Create now
+                <Trans>Create now</Trans>
               </div>
 
-              <span className="sm:hidden">Create</span>
+              <span className="sm:hidden">
+                <Trans>Create</Trans>
+              </span>
             </Link>
           </Button>
         </div>