feat: use server-actions for authoring flow

This change actually makes the authoring flow work for
the most part by tying in emailing and more.

We have also done a number of quality of life updates to
simplify the codebase overall making it easier to continue
work on the refresh.

apps/web/src/app/(dashboard)/documents/[id]/edit-document.tsx

@@ -0,0 +1,111 @@
+'use client';
+
+import { useState } from 'react';
+
+import dynamic from 'next/dynamic';
+
+import { Loader } from 'lucide-react';
+
+import { Document, Field, Recipient, User } from '@documenso/prisma/client';
+import { cn } from '@documenso/ui/lib/utils';
+import { Card, CardContent } from '@documenso/ui/primitives/card';
+
+import { AddFieldsFormPartial } from '~/components/forms/edit-document/add-fields';
+import { AddSignersFormPartial } from '~/components/forms/edit-document/add-signers';
+import { AddSubjectFormPartial } from '~/components/forms/edit-document/add-subject';
+
+const PDFViewer = dynamic(async () => import('~/components/(dashboard)/pdf-viewer/pdf-viewer'), {
+  ssr: false,
+  loading: () => (
+    <div className="dark:bg-background flex-col flex min-h-[80vh] items-center justify-center bg-white/50">
+      <Loader className="text-documenso h-12 w-12 animate-spin" />
+
+      <p className="text-muted-foreground mt-4">Loading document...</p>
+    </div>
+  ),
+});
+
+export type EditDocumentFormProps = {
+  className?: string;
+  user: User;
+  document: Document;
+  recipients: Recipient[];
+  fields: Field[];
+};
+
+export const EditDocumentForm = ({
+  className,
+  document,
+  recipients,
+  fields,
+  user: _user,
+}: EditDocumentFormProps) => {
+  const [step, setStep] = useState<'signers' | 'fields' | 'subject'>('signers');
+
+  const documentUrl = `data:application/pdf;base64,${document.document}`;
+
+  const onNextStep = () => {
+    if (step === 'signers') {
+      setStep('fields');
+    }
+
+    if (step === 'fields') {
+      setStep('subject');
+    }
+  };
+
+  const onPreviousStep = () => {
+    if (step === 'fields') {
+      setStep('signers');
+    }
+
+    if (step === 'subject') {
+      setStep('fields');
+    }
+  };
+
+  return (
+    <div className={cn('grid w-full grid-cols-12 gap-8', className)}>
+      <Card
+        className="col-span-12 rounded-xl before:rounded-xl lg:col-span-6 xl:col-span-7"
+        gradient
+      >
+        <CardContent className="p-2">
+          <PDFViewer document={documentUrl} />
+        </CardContent>
+      </Card>
+
+      <div className="col-span-12 lg:col-span-6 xl:col-span-5">
+        {step === 'signers' && (
+          <AddSignersFormPartial
+            recipients={recipients}
+            fields={fields}
+            document={document}
+            onContinue={onNextStep}
+            onGoBack={onPreviousStep}
+          />
+        )}
+
+        {step === 'fields' && (
+          <AddFieldsFormPartial
+            recipients={recipients}
+            fields={fields}
+            document={document}
+            onContinue={onNextStep}
+            onGoBack={onPreviousStep}
+          />
+        )}
+
+        {step === 'subject' && (
+          <AddSubjectFormPartial
+            recipients={recipients}
+            fields={fields}
+            document={document}
+            onContinue={onNextStep}
+            onGoBack={onPreviousStep}
+          />
+        )}
+      </div>
+    </div>
+  );
+};

apps/web/src/app/(dashboard)/documents/[id]/loadable-pdf-card.tsx

@@ -16,7 +16,7 @@ export type LoadablePDFCard = PDFViewerProps & {
 const PDFViewer = dynamic(async () => import('~/components/(dashboard)/pdf-viewer/pdf-viewer'), {
   ssr: false,
   loading: () => (
-    <div className="flex min-h-[80vh] flex-col items-center justify-center bg-white/50">
+    <div className="flex-col flex min-h-[80vh] items-center justify-center bg-white/50">
       <Loader className="h-12 w-12 animate-spin text-slate-500" />
 
       <p className="mt-4 text-slate-500">Loading document...</p>

apps/web/src/app/(dashboard)/documents/[id]/loading.tsx

@@ -4,7 +4,7 @@ import { ChevronLeft, Loader } from 'lucide-react';
 
 export default function Loading() {
   return (
-    <div className="mx-auto -mt-4 flex w-full max-w-screen-xl flex-col px-4 md:px-8">
+    <div className="flex-col mx-auto -mt-4 flex w-full max-w-screen-xl px-4 md:px-8">
       <Link href="/documents" className="flex grow-0 items-center text-[#7AC455] hover:opacity-80">
         <ChevronLeft className="mr-2 inline-block h-5 w-5" />
         Documents
@@ -13,15 +13,15 @@ export default function Loading() {
         Loading Document...
       </h1>
       <div className="mt-8 grid min-h-[80vh] w-full grid-cols-12 gap-x-8">
-        <div className="dark:bg-background border-documenso col-span-7 rounded-xl border-2 bg-white/50 p-2 before:rounded-xl">
-          <div className="flex min-h-[80vh] flex-col items-center justify-center">
+        <div className="dark:bg-background border-border col-span-12 rounded-xl border-2 bg-white/50 p-2 before:rounded-xl lg:col-span-6 xl:col-span-7">
+          <div className="flex-col flex min-h-[80vh] items-center justify-center">
             <Loader className="text-documenso h-12 w-12 animate-spin" />
 
             <p className="text-muted-foreground mt-4">Loading document...</p>
           </div>
         </div>
 
-        <div className="bg-background border-documenso col-span-5  rounded-xl border-2 before:rounded-xl" />
+        <div className="bg-background border-border col-span-12 rounded-xl border-2  before:rounded-xl lg:col-span-6 xl:col-span-5" />
       </div>
     </div>
   );

apps/web/src/app/(dashboard)/documents/[id]/page.tsx

@@ -1,14 +1,15 @@
 import Link from 'next/link';
 import { redirect } from 'next/navigation';
 
-import { ChevronLeft } from 'lucide-react';
+import { ChevronLeft, Users2 } from 'lucide-react';
 
 import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-session';
 import { getDocumentById } from '@documenso/lib/server-only/document/get-document-by-id';
 import { getFieldsForDocument } from '@documenso/lib/server-only/field/get-fields-for-document';
 import { getRecipientsForDocument } from '@documenso/lib/server-only/recipient/get-recipients-for-document';
 
-import { EditDocumentForm } from '~/components/forms/edit-document';
+import { EditDocumentForm } from '~/app/(dashboard)/documents/[id]/edit-document';
+import { DocumentStatus } from '~/components/formatter/document-status';
 
 export type DocumentPageProps = {
   params: {
@@ -61,6 +62,18 @@ export default async function DocumentPage({ params }: DocumentPageProps) {
         {document.title}
       </h1>
 
+      <div className="mt-2.5 flex items-center gap-x-6">
+        <DocumentStatus inheritColor status={document.status} className="text-muted-foreground" />
+
+        {recipients.length > 0 && (
+          <div className="text-muted-foreground flex items-center">
+            <Users2 className="mr-2 h-5 w-5" />
+
+            <span>{recipients.length} Recipient(s)</span>
+          </div>
+        )}
+      </div>
+
       <EditDocumentForm
         className="mt-8"
         document={document}

apps/web/src/app/(dashboard)/documents/[id]/sent/page.tsx

@@ -0,0 +1,18 @@
+import Link from 'next/link';
+
+import { ChevronLeft } from 'lucide-react';
+
+export default function DocumentSentPage() {
+  return (
+    <div className="flex-col mx-auto -mt-4 flex w-full max-w-screen-xl px-4 md:px-8">
+      <Link href="/documents" className="flex grow-0 items-center text-[#7AC455] hover:opacity-80">
+        <ChevronLeft className="mr-2 inline-block h-5 w-5" />
+        Documents
+      </Link>
+
+      <h1 className="mt-4 max-w-xs grow-0 truncate text-2xl font-semibold md:text-3xl">
+        Loading Document...
+      </h1>
+    </div>
+  );
+}

apps/web/src/app/layout.tsx

@@ -2,6 +2,7 @@ import { Inter } from 'next/font/google';
 
 import { TrpcProvider } from '@documenso/trpc/react';
 import { Toaster } from '@documenso/ui/primitives/toaster';
+import { TooltipProvider } from '@documenso/ui/primitives/tooltip';
 
 import { ThemeProvider } from '~/providers/next-theme';
 import { PlausibleProvider } from '~/providers/plausible';
@@ -47,7 +48,9 @@ export default function RootLayout({ children }: { children: React.ReactNode })
       <body>
         <PlausibleProvider>
           <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
-            <TrpcProvider>{children}</TrpcProvider>
+            <TooltipProvider>
+              <TrpcProvider>{children}</TrpcProvider>
+            </TooltipProvider>
           </ThemeProvider>
         </PlausibleProvider>
         <Toaster />