feat: avatar images

apps/web/src/app/(dashboard)/settings/profile/page.tsx

@@ -3,6 +3,7 @@ import type { Metadata } from 'next';
 import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-component-session';
 
 import { SettingsHeader } from '~/components/(dashboard)/settings/layout/header';
+import { AvatarImageForm } from '~/components/forms/avatar-image';
 import { ProfileForm } from '~/components/forms/profile';
 
 import { DeleteAccountDialog } from './delete-account-dialog';
@@ -18,6 +19,7 @@ export default async function ProfileSettingsPage() {
     <div>
       <SettingsHeader title="Profile" subtitle="Here you can edit your personal details." />
 
+      <AvatarImageForm className="mb-8 max-w-xl" user={user} />
       <ProfileForm className="mb-8 max-w-xl" user={user} />
 
       <hr className="my-4 max-w-xl" />

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

@@ -1,7 +1,6 @@
 import React from 'react';
 
 import { getServerComponentSession } from '@documenso/lib/next-auth/get-server-component-session';
-import type { GetTeamsResponse } from '@documenso/lib/server-only/team/get-teams';
 import { getTeams } from '@documenso/lib/server-only/team/get-teams';
 
 import { RefreshOnFocus } from '~/components/(dashboard)/refresh-on-focus/refresh-on-focus';
@@ -16,18 +15,15 @@ type PublicProfileLayoutProps = {
 export default async function PublicProfileLayout({ children }: PublicProfileLayoutProps) {
   const { user, session } = await getServerComponentSession();
 
-  let teams: GetTeamsResponse = [];
-
-  if (user && session) {
-    teams = await getTeams({ userId: user.id });
-  }
+  // I wouldn't typically do this but it's better than the `let` statement
+  const teams = user && session ? await getTeams({ userId: user.id }) : undefined;
 
   return (
     <NextAuthProvider session={session}>
       <div className="min-h-screen">
         <ProfileHeader user={user} teams={teams} />
 
-        <main className="mb-8 mt-8 px-4 md:mb-12 md:mt-12 md:px-8">{children}</main>
+        <main className="my-8 px-4 md:my-12 md:px-8">{children}</main>
       </div>
 
       <RefreshOnFocus />

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>

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

@@ -62,9 +62,9 @@ export const ProfileHeader = ({ user, teams = [] }: ProfileHeaderProps) => {
         </Link>
 
         <div className="flex flex-row items-center justify-center">
-          <p className="mr-4 text-neutral-400">
+          <p className="text-muted-foreground mr-4">
             <span className="text-sm sm:hidden">Want your own public profile?</span>
-            <span className="hidden sm:block">
+            <span className="hidden text-sm sm:block">
               Like to have your own public profile with agreements?
             </span>
           </p>

apps/web/src/app/(teams)/t/[teamUrl]/settings/page.tsx

@@ -13,6 +13,7 @@ import { AddTeamEmailDialog } from '~/components/(teams)/dialogs/add-team-email-
 import { DeleteTeamDialog } from '~/components/(teams)/dialogs/delete-team-dialog';
 import { TransferTeamDialog } from '~/components/(teams)/dialogs/transfer-team-dialog';
 import { UpdateTeamForm } from '~/components/(teams)/forms/update-team-form';
+import { AvatarImageForm } from '~/components/forms/avatar-image';
 
 import { TeamEmailDropdown } from './team-email-dropdown';
 import { TeamTransferStatus } from './team-transfer-status';
@@ -44,6 +45,8 @@ export default async function TeamsSettingsPage({ params }: TeamsSettingsPagePro
         transferVerification={team.transferVerification}
       />
 
+      <AvatarImageForm className="mb-8" team={team} user={session.user} />
+
       <UpdateTeamForm teamId={team.id} teamName={team.name} teamUrl={team.url} />
 
       <section className="mt-6 space-y-6">