feat: avatar images

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

@@ -5,10 +5,12 @@ import { notFound, redirect } from 'next/navigation';
 import { FileIcon } from 'lucide-react';
 import { DateTime } from 'luxon';
 
+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';
 import { extractInitials } from '@documenso/lib/utils/recipient-formatter';
 import { formatDirectTemplatePath } from '@documenso/lib/utils/templates';
-import { Avatar, AvatarFallback } from '@documenso/ui/primitives/avatar';
+import { Avatar, AvatarFallback, AvatarImage } from '@documenso/ui/primitives/avatar';
 import { Button } from '@documenso/ui/primitives/button';
 import {
   Table,
@@ -52,19 +54,27 @@ export default async function PublicProfilePage({ params }: PublicProfilePagePro
     notFound();
   }
 
+  const { user } = await getServerComponentSession();
+
   const { profile, templates } = publicProfile;
 
   return (
     <div className="flex flex-col items-center justify-center py-4 sm:py-32">
       <div className="flex flex-col items-center">
         <Avatar className="dark:border-border h-24 w-24 border-2 border-solid">
+          {publicProfile.avatarImageId && (
+            <AvatarImage
+              src={`${NEXT_PUBLIC_WEBAPP_URL()}/api/avatar/${publicProfile.avatarImageId}`}
+            />
+          )}
+
           <AvatarFallback className="text-sm text-gray-400">
             {extractInitials(publicProfile.name)}
           </AvatarFallback>
         </Avatar>
 
         <div className="mt-4 flex flex-row items-center justify-center">
-          <h2 className="font-bold">{publicProfile.name}</h2>
+          <h2 className="text-xl font-semibold md:text-2xl">{publicProfile.name}</h2>
 
           {publicProfile.badge && (
             <Tooltip>
@@ -88,7 +98,7 @@ export default async function PublicProfilePage({ params }: PublicProfilePagePro
                 />
 
                 <div className="ml-2">
-                  <p className="text-foreground text-base font-bold">
+                  <p className="text-foreground text-base font-semibold">
                     {BADGE_DATA[publicProfile.badge.type].name}
                   </p>
                   <p className="text-muted-foreground mt-0.5 text-sm">
@@ -100,13 +110,43 @@ export default async function PublicProfilePage({ params }: PublicProfilePagePro
           )}
         </div>
 
-        <div className="text-muted-foreground mt-4 max-w-lg whitespace-pre-wrap break-words text-center">
-          {profile.bio}
+        <div className="text-muted-foreground mt-4 space-y-1">
+          {(profile.bio ?? '').split('\n').map((line, index) => (
+            <p
+              key={index}
+              className="max-w-[60ch] whitespace-pre-wrap break-words text-center text-sm"
+            >
+              {line}
+            </p>
+          ))}
         </div>
       </div>
 
+      {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.{' '}
+            {!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.
+              </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.
+              </span>
+            )}
+          </p>
+        </div>
+      )}
+
       {templates.length > 0 && (
-        <div className="mt-8 w-full max-w-3xl rounded-md border">
+        <div className="mt-8 w-full max-w-xl rounded-md border">
           <Table className="w-full" overflowHidden>
             <TableHeader>
               <TableRow>
@@ -119,16 +159,18 @@ export default async function PublicProfilePage({ params }: PublicProfilePagePro
               {templates.map((template) => (
                 <TableRow key={template.id}>
                   <TableCell className="text-muted-foreground flex flex-col justify-between overflow-hidden text-sm sm:flex-row">
-                    <div className="flex flex-1 items-start gap-2">
+                    <div className="flex flex-1 items-start justify-start gap-2">
                       <FileIcon
                         className="text-muted-foreground/40 h-8 w-8 flex-shrink-0"
                         strokeWidth={1.5}
                       />
 
-                      <div className="flex flex-1 flex-col gap-4 overflow-hidden md:flex-row md:items-center md:justify-between">
+                      <div className="flex flex-1 flex-col gap-4 overflow-hidden md:flex-row md:items-start md:justify-between">
                         <div>
-                          <p className="text-sm font-bold">{template.publicTitle}</p>
-                          <p className="line-clamp-3 max-w-[70ch] whitespace-normal text-xs text-neutral-400">
+                          <p className="text-foreground text-sm font-semibold leading-none">
+                            {template.publicTitle}
+                          </p>
+                          <p className="text-muted-foreground mt-1 line-clamp-3 max-w-[70ch] whitespace-normal text-xs">
                             {template.publicDescription}
                           </p>
                         </div>