feat: add public profiles

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

@@ -0,0 +1,36 @@
+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';
+import { NextAuthProvider } from '~/providers/next-auth';
+
+import { ProfileHeader } from './profile-header';
+
+type PublicProfileLayoutProps = {
+  children: React.ReactNode;
+};
+
+export default async function PublicProfileLayout({ children }: PublicProfileLayoutProps) {
+  const { user, session } = await getServerComponentSession();
+
+  let teams: GetTeamsResponse = [];
+
+  if (user && session) {
+    teams = await getTeams({ userId: user.id });
+  }
+
+  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>
+      </div>
+
+      <RefreshOnFocus />
+    </NextAuthProvider>
+  );
+}

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

@@ -0,0 +1,32 @@
+'use client';
+
+import Link from 'next/link';
+
+import { ChevronLeft } from 'lucide-react';
+
+import { Button } from '@documenso/ui/primitives/button';
+
+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>
+
+        <h1 className="mt-3 text-2xl font-bold md:text-3xl">Oops! Something went wrong.</h1>
+
+        <p className="text-muted-foreground mt-4 text-sm">
+          The profile you are looking for could not be found.
+        </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
+            </Link>
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,122 @@
+import Image from 'next/image';
+import Link from 'next/link';
+import { notFound, redirect } from 'next/navigation';
+
+import { FileIcon } from 'lucide-react';
+import { match } from 'ts-pattern';
+
+import { getPublicProfileByUrl } from '@documenso/lib/server-only/profile/get-public-profile-by-url';
+import { formatDirectTemplatePath } from '@documenso/lib/utils/templates';
+import { Avatar, AvatarFallback } from '@documenso/ui/primitives/avatar';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@documenso/ui/primitives/table';
+
+export type PublicProfilePageProps = {
+  params: {
+    url: string;
+  };
+};
+
+export default async function PublicProfilePage({ params }: PublicProfilePageProps) {
+  const { url: profileUrl } = params;
+
+  if (!profileUrl) {
+    redirect('/');
+  }
+
+  const publicProfile = await getPublicProfileByUrl({
+    profileUrl,
+  }).catch(() => null);
+
+  if (!publicProfile || !publicProfile.profile.enabled) {
+    notFound();
+  }
+
+  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 border-white">
+          <AvatarFallback className="text-xs text-gray-400">
+            {publicProfile.name.slice(0, 1).toUpperCase()}
+          </AvatarFallback>
+        </Avatar>
+
+        <div className="mt-4 flex flex-row items-center justify-center">
+          <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}
+            />
+          )}
+        </div>
+
+        <div className="text-muted-foreground mt-4 max-w-lg whitespace-pre-wrap break-all text-center">
+          {profile.bio}
+        </div>
+      </div>
+
+      {templates.length > 0 && (
+        <div className="mt-8 w-full max-w-3xl rounded-md border">
+          <Table className="w-full" overflowHidden>
+            <TableHeader>
+              <TableRow>
+                <TableHead className="w-full rounded-tl-md bg-neutral-50 dark:bg-neutral-700">
+                  Documents
+                </TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {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">
+                      <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>
+                          <p className="text-sm">{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"
+                          >
+                            Sign
+                          </Link>
+                        </Button>
+                      </div>
+                    </div>
+                  </TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </div>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,69 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+
+import Link from 'next/link';
+
+import { PlusIcon } from 'lucide-react';
+
+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';
+import { Button } from '@documenso/ui/primitives/button';
+
+import { Header as AuthenticatedHeader } from '~/components/(dashboard)/layout/header';
+import { Logo } from '~/components/branding/logo';
+
+type ProfileHeaderProps = {
+  user?: User | null;
+  teams?: GetTeamsResponse;
+};
+
+export const ProfileHeader = ({ user, teams = [] }: ProfileHeaderProps) => {
+  const [scrollY, setScrollY] = useState(0);
+
+  useEffect(() => {
+    const onScroll = () => {
+      setScrollY(window.scrollY);
+    };
+
+    window.addEventListener('scroll', onScroll);
+
+    return () => window.removeEventListener('scroll', onScroll);
+  }, []);
+
+  if (user) {
+    return <AuthenticatedHeader user={user} teams={teams} />;
+  }
+
+  return (
+    <header
+      className={cn(
+        'supports-backdrop-blur:bg-background/60 bg-background/95 sticky top-0 z-[60] flex h-16 w-full items-center border-b border-b-transparent backdrop-blur duration-200',
+        scrollY > 5 && 'border-b-border',
+      )}
+    >
+      <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"
+        >
+          <Logo className="h-6 w-auto" />
+        </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>
+
+          <Button asChild variant="secondary">
+            <Link href="/signup">
+              <PlusIcon className="mr-1 h-5 w-5" />
+              Create now
+            </Link>
+          </Button>
+        </div>
+      </div>
+    </header>
+  );
+};