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>

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

@@ -2,10 +2,12 @@
 
 import { useEffect, useState } from 'react';
 
+import Image from 'next/image';
 import Link from 'next/link';
 
 import { PlusIcon } from 'lucide-react';
 
+import LogoIcon from '@documenso/assets/logo_icon.png';
 import type { GetTeamsResponse } from '@documenso/lib/server-only/team/get-teams';
 import type { User } from '@documenso/prisma/client';
 import { cn } from '@documenso/ui/lib/utils';
@@ -46,20 +48,35 @@ export const ProfileHeader = ({ user, teams = [] }: ProfileHeaderProps) => {
       <div className="mx-auto flex w-full max-w-screen-xl items-center justify-between gap-x-4 px-4 md:px-8">
         <Link
           href="/"
-          className="focus-visible:ring-ring ring-offset-background hidden rounded-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 md:inline"
+          className="focus-visible:ring-ring ring-offset-background rounded-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 md:inline"
         >
-          <Logo className="h-6 w-auto" />
+          <Logo className="hidden h-6 w-auto sm:block" />
+
+          <Image
+            src={LogoIcon}
+            alt="Documenso Logo"
+            width={48}
+            height={48}
+            className="h-10 w-auto dark:invert sm:hidden"
+          />
         </Link>
 
         <div className="flex flex-row items-center justify-center">
-          <p className="text-muted-foreground mr-4">
-            Like to have your own public profile with agreements?
+          <p className="mr-4 text-neutral-400">
+            <span className="text-sm sm:hidden">Want your own public profile?</span>
+            <span className="hidden sm:block">
+              Like to have your own public profile with agreements?
+            </span>
           </p>
 
           <Button asChild variant="secondary">
             <Link href="/signup">
-              <PlusIcon className="mr-1 h-5 w-5" />
-              Create now
+              <div className="hidden flex-row items-center sm:flex">
+                <PlusIcon className="mr-1 h-5 w-5" />
+                Create now
+              </div>
+
+              <span className="sm:hidden">Create</span>
             </Link>
           </Button>
         </div>