feat: add profile tooltips

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

@@ -3,9 +3,10 @@ import Link from 'next/link';
 import { notFound, redirect } from 'next/navigation';
 
 import { FileIcon } from 'lucide-react';
-import { match } from 'ts-pattern';
+import { DateTime } from 'luxon';
 
 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 { Button } from '@documenso/ui/primitives/button';
@@ -17,6 +18,7 @@ import {
   TableHeader,
   TableRow,
 } from '@documenso/ui/primitives/table';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@documenso/ui/primitives/tooltip';
 
 export type PublicProfilePageProps = {
   params: {
@@ -24,6 +26,17 @@ export type PublicProfilePageProps = {
   };
 };
 
+const BADGE_DATA = {
+  Premium: {
+    imageSrc: '/static/premium-user-badge.svg',
+    name: 'Premium',
+  },
+  EarlySupporter: {
+    imageSrc: '/static/early-supporter-badge.svg',
+    name: 'Early supporter',
+  },
+};
+
 export default async function PublicProfilePage({ params }: PublicProfilePageProps) {
   const { url: profileUrl } = params;
 
@@ -44,9 +57,9 @@ export default async function PublicProfilePage({ params }: PublicProfilePagePro
   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 border-white">
+        <Avatar className="dark:border-border h-24 w-24 border-2 border-solid">
           <AvatarFallback className="text-xs text-gray-400">
-            {publicProfile.name.slice(0, 1).toUpperCase()}
+            {extractInitials(publicProfile.name)}
           </AvatarFallback>
         </Avatar>
 
@@ -54,20 +67,40 @@ export default async function PublicProfilePage({ params }: PublicProfilePagePro
           <h2 className="font-bold">{publicProfile.name}</h2>
 
           {publicProfile.badge && (
-            <Image
-              className="ml-2 flex items-center justify-center"
-              alt="Profile badge"
-              src={`/static/${match(publicProfile.badge)
-                .with('Premium', () => 'premium-user-badge.svg')
-                .with('EarlySupporter', () => 'early-supporter-badge.svg')
-                .exhaustive()}`}
-              height={24}
-              width={24}
-            />
+            <Tooltip>
+              <TooltipTrigger>
+                <Image
+                  className="ml-2 flex items-center justify-center"
+                  alt="Profile badge"
+                  src={BADGE_DATA[publicProfile.badge.type].imageSrc}
+                  height={24}
+                  width={24}
+                />
+              </TooltipTrigger>
+
+              <TooltipContent className="flex flex-row items-start py-2 !pl-3 !pr-3.5">
+                <Image
+                  className="mt-0.5"
+                  alt="Profile badge"
+                  src={BADGE_DATA[publicProfile.badge.type].imageSrc}
+                  height={24}
+                  width={24}
+                />
+
+                <div className="ml-2">
+                  <p className="text-foreground text-base font-bold">
+                    {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')}
+                  </p>
+                </div>
+              </TooltipContent>
+            </Tooltip>
           )}
         </div>
 
-        <div className="text-muted-foreground mt-4 max-w-lg whitespace-pre-wrap break-all text-center">
+        <div className="text-muted-foreground mt-4 max-w-lg whitespace-pre-wrap break-words text-center">
           {profile.bio}
         </div>
       </div>
@@ -94,17 +127,14 @@ export default async function PublicProfilePage({ params }: PublicProfilePagePro
 
                       <div className="flex flex-1 flex-col gap-4 overflow-hidden md:flex-row md:items-center md:justify-between">
                         <div>
-                          <p className="text-sm">{template.publicTitle}</p>
+                          <p className="text-sm font-bold">{template.publicTitle}</p>
                           <p className="line-clamp-3 max-w-[70ch] whitespace-normal text-xs text-neutral-400">
                             {template.publicDescription}
                           </p>
                         </div>
 
                         <Button asChild className="w-20">
-                          <Link
-                            href={formatDirectTemplatePath(template.directLink.token)}
-                            target="_blank"
-                          >
+                          <Link href={formatDirectTemplatePath(template.directLink.token)}>
                             Sign
                           </Link>
                         </Button>