chore: use shadcn sheets

packages/lib/server-only/user/get-next-inbox-document.ts

@@ -11,7 +11,7 @@ export const getNextInboxDocument = async ({ email }: GetNextInboxDocumentOption
     throw new Error('User is required');
   }
 
-  return await prisma.document.findFirst({
+  return await prisma.document.findMany({
     where: {
       Recipient: {
         some: {
@@ -26,14 +26,17 @@ export const getNextInboxDocument = async ({ email }: GetNextInboxDocumentOption
       deletedAt: null,
     },
     select: {
+      id: true,
       createdAt: true,
       title: true,
+      status: true,
       Recipient: {
         where: {
           email,
         },
         select: {
           token: true,
+          role: true,
         },
       },
       documentMeta: true,

packages/lib/translations/de/common.po

@@ -124,7 +124,12 @@ msgstr "Erweiterte Einstellungen"
 msgid "After submission, a document will be automatically generated and added to your documents page. You will also receive a notification via email."
 msgstr "Nach der Übermittlung wird ein Dokument automatisch generiert und zu Ihrer Dokumentenseite hinzugefügt. Sie erhalten außerdem eine Benachrichtigung per E-Mail."
 
+#: packages/ui/components/document/document-status.tsx:46
+msgid "All"
+msgstr ""
+
 #: packages/lib/constants/recipient-roles.ts:8
+#: packages/ui/components/document/next-inbox-item-button.tsx:113
 msgid "Approve"
 msgstr "Genehmigen"
 
@@ -203,6 +208,10 @@ msgstr "Klicken, um das Feld einzufügen"
 msgid "Close"
 msgstr "Schließen"
 
+#: packages/ui/components/document/document-status.tsx:28
+msgid "Completed"
+msgstr ""
+
 #: packages/lib/constants/template.ts:12
 msgid "Configure Direct Recipient"
 msgstr "Direkten Empfänger konfigurieren"
@@ -220,7 +229,7 @@ msgstr "Fortsetzen"
 msgid "Copied to clipboard"
 msgstr "In die Zwischenablage kopiert"
 
-#: packages/ui/components/document/next-inbox-item-button.tsx:70
+#: packages/ui/components/document/next-inbox-item-button.tsx:93
 msgid "Created {0}"
 msgstr ""
 
@@ -248,14 +257,38 @@ msgstr "Empfänger des direkten Links"
 msgid "Document access"
 msgstr "Dokumentenzugriff"
 
+#: packages/ui/components/document/document-status.tsx:47
+msgid "Document All"
+msgstr ""
+
+#: packages/ui/components/document/document-status.tsx:29
+msgid "Document completed"
+msgstr ""
+
 #: packages/lib/constants/template.ts:20
 msgid "Document Creation"
 msgstr "Dokumenterstellung"
 
+#: packages/ui/components/document/document-status.tsx:35
+msgid "Document draft"
+msgstr ""
+
+#: packages/ui/components/document/document-status.tsx:41
+msgid "Document inbox"
+msgstr ""
+
+#: packages/ui/components/document/document-status.tsx:23
+msgid "Document pending"
+msgstr ""
+
 #: packages/ui/components/document/document-download-button.tsx:68
 msgid "Download"
 msgstr "Herunterladen"
 
+#: packages/ui/components/document/document-status.tsx:34
+msgid "Draft"
+msgstr ""
+
 #: packages/ui/primitives/document-dropzone.tsx:162
 msgid "Drag & drop your PDF here."
 msgstr "Ziehen Sie Ihr PDF hierher."
@@ -356,6 +389,10 @@ msgstr "Ich bin verpflichtet, eine Kopie dieses Dokuments zu erhalten"
 #~ msgid "I am required to recieve a copy of this document"
 #~ msgstr "I am required to recieve a copy of this document"
 
+#: packages/ui/components/document/document-status.tsx:40
+msgid "Inbox"
+msgstr ""
+
 #: packages/ui/components/recipient/recipient-action-auth-select.tsx:29
 #: packages/ui/components/recipient/recipient-action-auth-select.tsx:87
 msgid "Inherit authentication method"
@@ -465,6 +502,10 @@ msgstr "Seite {0} von {1}"
 msgid "Password Required"
 msgstr "Passwort erforderlich"
 
+#: packages/ui/components/document/document-status.tsx:22
+msgid "Pending"
+msgstr ""
+
 #: packages/ui/primitives/document-flow/field-items-advanced-settings/checkbox-field.tsx:154
 msgid "Pick a number"
 msgstr "Wählen Sie eine Zahl"
@@ -579,10 +620,11 @@ msgid "Show advanced settings"
 msgstr "Erweiterte Einstellungen anzeigen"
 
 #: packages/lib/constants/recipient-roles.ts:20
+#: packages/ui/components/document/next-inbox-item-button.tsx:107
 msgid "Sign"
 msgstr "Unterschreiben"
 
-#: packages/ui/components/document/next-inbox-item-button.tsx:58
+#: packages/ui/components/document/next-inbox-item-button.tsx:70
 msgid "Sign Next Document"
 msgstr ""
 
@@ -764,6 +806,7 @@ msgid "Value"
 msgstr "Wert"
 
 #: packages/lib/constants/recipient-roles.ts:26
+#: packages/ui/components/document/next-inbox-item-button.tsx:119
 msgid "View"
 msgstr "View"
 

packages/lib/translations/en/common.po

@@ -119,7 +119,12 @@ msgstr "Advanced settings"
 msgid "After submission, a document will be automatically generated and added to your documents page. You will also receive a notification via email."
 msgstr "After submission, a document will be automatically generated and added to your documents page. You will also receive a notification via email."
 
+#: packages/ui/components/document/document-status.tsx:46
+msgid "All"
+msgstr "All"
+
 #: packages/lib/constants/recipient-roles.ts:8
+#: packages/ui/components/document/next-inbox-item-button.tsx:113
 msgid "Approve"
 msgstr "Approve"
 
@@ -198,6 +203,10 @@ msgstr "Click to insert field"
 msgid "Close"
 msgstr "Close"
 
+#: packages/ui/components/document/document-status.tsx:28
+msgid "Completed"
+msgstr "Completed"
+
 #: packages/lib/constants/template.ts:12
 msgid "Configure Direct Recipient"
 msgstr "Configure Direct Recipient"
@@ -215,7 +224,7 @@ msgstr "Continue"
 msgid "Copied to clipboard"
 msgstr "Copied to clipboard"
 
-#: packages/ui/components/document/next-inbox-item-button.tsx:70
+#: packages/ui/components/document/next-inbox-item-button.tsx:93
 msgid "Created {0}"
 msgstr "Created {0}"
 
@@ -243,14 +252,38 @@ msgstr "Direct link receiver"
 msgid "Document access"
 msgstr "Document access"
 
+#: packages/ui/components/document/document-status.tsx:47
+msgid "Document All"
+msgstr "Document All"
+
+#: packages/ui/components/document/document-status.tsx:29
+msgid "Document completed"
+msgstr "Document completed"
+
 #: packages/lib/constants/template.ts:20
 msgid "Document Creation"
 msgstr "Document Creation"
 
+#: packages/ui/components/document/document-status.tsx:35
+msgid "Document draft"
+msgstr "Document draft"
+
+#: packages/ui/components/document/document-status.tsx:41
+msgid "Document inbox"
+msgstr "Document inbox"
+
+#: packages/ui/components/document/document-status.tsx:23
+msgid "Document pending"
+msgstr "Document pending"
+
 #: packages/ui/components/document/document-download-button.tsx:68
 msgid "Download"
 msgstr "Download"
 
+#: packages/ui/components/document/document-status.tsx:34
+msgid "Draft"
+msgstr "Draft"
+
 #: packages/ui/primitives/document-dropzone.tsx:162
 msgid "Drag & drop your PDF here."
 msgstr "Drag & drop your PDF here."
@@ -351,6 +384,10 @@ msgstr "I am required to receive a copy of this document"
 #~ msgid "I am required to recieve a copy of this document"
 #~ msgstr "I am required to recieve a copy of this document"
 
+#: packages/ui/components/document/document-status.tsx:40
+msgid "Inbox"
+msgstr "Inbox"
+
 #: packages/ui/components/recipient/recipient-action-auth-select.tsx:29
 #: packages/ui/components/recipient/recipient-action-auth-select.tsx:87
 msgid "Inherit authentication method"
@@ -460,6 +497,10 @@ msgstr "Page {0} of {1}"
 msgid "Password Required"
 msgstr "Password Required"
 
+#: packages/ui/components/document/document-status.tsx:22
+msgid "Pending"
+msgstr "Pending"
+
 #: packages/ui/primitives/document-flow/field-items-advanced-settings/checkbox-field.tsx:154
 msgid "Pick a number"
 msgstr "Pick a number"
@@ -574,10 +615,11 @@ msgid "Show advanced settings"
 msgstr "Show advanced settings"
 
 #: packages/lib/constants/recipient-roles.ts:20
+#: packages/ui/components/document/next-inbox-item-button.tsx:107
 msgid "Sign"
 msgstr "Sign"
 
-#: packages/ui/components/document/next-inbox-item-button.tsx:58
+#: packages/ui/components/document/next-inbox-item-button.tsx:70
 msgid "Sign Next Document"
 msgstr "Sign Next Document"
 
@@ -759,6 +801,7 @@ msgid "Value"
 msgstr "Value"
 
 #: packages/lib/constants/recipient-roles.ts:26
+#: packages/ui/components/document/next-inbox-item-button.tsx:119
 msgid "View"
 msgstr "View"
 

packages/lib/translations/fr/common.po

@@ -124,7 +124,12 @@ msgstr "Paramètres avancés"
 msgid "After submission, a document will be automatically generated and added to your documents page. You will also receive a notification via email."
 msgstr "Après soumission, un document sera automatiquement généré et ajouté à votre page de documents. Vous recevrez également une notification par email."
 
+#: packages/ui/components/document/document-status.tsx:46
+msgid "All"
+msgstr ""
+
 #: packages/lib/constants/recipient-roles.ts:8
+#: packages/ui/components/document/next-inbox-item-button.tsx:113
 msgid "Approve"
 msgstr "Approuver"
 
@@ -199,6 +204,10 @@ msgstr "Cliquez pour insérer un champ"
 msgid "Close"
 msgstr "Fermer"
 
+#: packages/ui/components/document/document-status.tsx:28
+msgid "Completed"
+msgstr ""
+
 #: packages/lib/constants/template.ts:12
 msgid "Configure Direct Recipient"
 msgstr "Configurer le destinataire direct"
@@ -216,7 +225,7 @@ msgstr "Continuer"
 msgid "Copied to clipboard"
 msgstr "Copié dans le presse-papiers"
 
-#: packages/ui/components/document/next-inbox-item-button.tsx:70
+#: packages/ui/components/document/next-inbox-item-button.tsx:93
 msgid "Created {0}"
 msgstr ""
 
@@ -244,14 +253,38 @@ msgstr "Receveur de lien direct"
 msgid "Document access"
 msgstr "Accès au document"
 
+#: packages/ui/components/document/document-status.tsx:47
+msgid "Document All"
+msgstr ""
+
+#: packages/ui/components/document/document-status.tsx:29
+msgid "Document completed"
+msgstr ""
+
 #: packages/lib/constants/template.ts:20
 msgid "Document Creation"
 msgstr "Création de document"
 
+#: packages/ui/components/document/document-status.tsx:35
+msgid "Document draft"
+msgstr ""
+
+#: packages/ui/components/document/document-status.tsx:41
+msgid "Document inbox"
+msgstr ""
+
+#: packages/ui/components/document/document-status.tsx:23
+msgid "Document pending"
+msgstr ""
+
 #: packages/ui/components/document/document-download-button.tsx:68
 msgid "Download"
 msgstr "Télécharger"
 
+#: packages/ui/components/document/document-status.tsx:34
+msgid "Draft"
+msgstr ""
+
 #: packages/ui/primitives/document-dropzone.tsx:162
 msgid "Drag & drop your PDF here."
 msgstr "Faites glisser et déposez votre PDF ici."
@@ -352,6 +385,10 @@ msgstr "Je dois recevoir une copie de ce document"
 #~ msgid "I am required to recieve a copy of this document"
 #~ msgstr "I am required to recieve a copy of this document"
 
+#: packages/ui/components/document/document-status.tsx:40
+msgid "Inbox"
+msgstr ""
+
 #: packages/ui/components/recipient/recipient-action-auth-select.tsx:29
 #: packages/ui/components/recipient/recipient-action-auth-select.tsx:87
 msgid "Inherit authentication method"
@@ -461,6 +498,10 @@ msgstr "Page {0} sur {1}"
 msgid "Password Required"
 msgstr "Mot de passe requis"
 
+#: packages/ui/components/document/document-status.tsx:22
+msgid "Pending"
+msgstr ""
+
 #: packages/ui/primitives/document-flow/field-items-advanced-settings/checkbox-field.tsx:154
 msgid "Pick a number"
 msgstr "Choisissez un numéro"
@@ -575,10 +616,11 @@ msgid "Show advanced settings"
 msgstr "Afficher les paramètres avancés"
 
 #: packages/lib/constants/recipient-roles.ts:20
+#: packages/ui/components/document/next-inbox-item-button.tsx:107
 msgid "Sign"
 msgstr "Signer"
 
-#: packages/ui/components/document/next-inbox-item-button.tsx:58
+#: packages/ui/components/document/next-inbox-item-button.tsx:70
 msgid "Sign Next Document"
 msgstr ""
 
@@ -760,6 +802,7 @@ msgid "Value"
 msgstr "Valeur"
 
 #: packages/lib/constants/recipient-roles.ts:26
+#: packages/ui/components/document/next-inbox-item-button.tsx:119
 msgid "View"
 msgstr "Vue"
 

packages/ui/components/document/document-status.tsx

@@ -0,0 +1,79 @@
+import type { HTMLAttributes } from 'react';
+
+import type { MessageDescriptor } from '@lingui/core';
+import { msg } from '@lingui/macro';
+import { useLingui } from '@lingui/react';
+import { CheckCircle2, Clock, File } from 'lucide-react';
+import type { LucideIcon } from 'lucide-react/dist/lucide-react';
+
+import type { ExtendedDocumentStatus } from '@documenso/prisma/types/extended-document-status';
+import { SignatureIcon } from '@documenso/ui/icons/signature';
+import { cn } from '@documenso/ui/lib/utils';
+
+type FriendlyStatus = {
+  label: MessageDescriptor;
+  labelExtended: MessageDescriptor;
+  icon?: LucideIcon;
+  color: string;
+};
+
+export const FRIENDLY_STATUS_MAP: Record<ExtendedDocumentStatus, FriendlyStatus> = {
+  PENDING: {
+    label: msg`Pending`,
+    labelExtended: msg`Document pending`,
+    icon: Clock,
+    color: 'text-blue-600 dark:text-blue-300',
+  },
+  COMPLETED: {
+    label: msg`Completed`,
+    labelExtended: msg`Document completed`,
+    icon: CheckCircle2,
+    color: 'text-green-500 dark:text-green-300',
+  },
+  DRAFT: {
+    label: msg`Draft`,
+    labelExtended: msg`Document draft`,
+    icon: File,
+    color: 'text-yellow-500 dark:text-yellow-200',
+  },
+  INBOX: {
+    label: msg`Inbox`,
+    labelExtended: msg`Document inbox`,
+    icon: SignatureIcon,
+    color: 'text-muted-foreground',
+  },
+  ALL: {
+    label: msg`All`,
+    labelExtended: msg`Document All`,
+    color: 'text-muted-foreground',
+  },
+};
+
+export type DocumentStatusProps = HTMLAttributes<HTMLSpanElement> & {
+  status: ExtendedDocumentStatus;
+  inheritColor?: boolean;
+};
+
+export const DocumentStatus = ({
+  className,
+  status,
+  inheritColor,
+  ...props
+}: DocumentStatusProps) => {
+  const { _ } = useLingui();
+
+  const { label, icon: Icon, color } = FRIENDLY_STATUS_MAP[status];
+
+  return (
+    <span className={cn('flex items-center', className)} {...props}>
+      {Icon && (
+        <Icon
+          className={cn('mr-2 inline-block h-4 w-4', {
+            [color]: !inheritColor,
+          })}
+        />
+      )}
+      {_(label)}
+    </span>
+  );
+};

packages/ui/components/document/next-inbox-item-button.tsx

@@ -5,25 +5,41 @@ import type { HTMLAttributes } from 'react';
 import Link from 'next/link';
 
 import { Trans } from '@lingui/macro';
+import { CheckCircle, EyeIcon, Pencil } from 'lucide-react';
 import { DateTime } from 'luxon';
+import { match } from 'ts-pattern';
 
-import type { DocumentData, Prisma } from '@documenso/prisma/client';
+import { type DocumentData, type Prisma, RecipientRole } from '@documenso/prisma/client';
 import { SignatureIcon } from '@documenso/ui/icons/signature';
 import { Button } from '@documenso/ui/primitives/button';
-import { Tooltip, TooltipContent, TooltipTrigger } from '@documenso/ui/primitives/tooltip';
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from '@documenso/ui/primitives/sheet';
 
-type GetNextInboxDocumentResult = Prisma.DocumentGetPayload<{
-  select: {
-    createdAt: true;
-    title: true;
-    Recipient: {
+import { DocumentStatus } from './document-status';
+
+type GetNextInboxDocumentResult =
+  | Prisma.DocumentGetPayload<{
       select: {
-        token: true;
+        id: true;
+        createdAt: true;
+        title: true;
+        status: true;
+        Recipient: {
+          select: {
+            token: true;
+            role: true;
+          };
+        };
+        documentMeta: true;
       };
-    };
-    documentMeta: true;
-  };
-}> | null;
+    }>[]
+  | null;
 
 export type NextInboxItemButtonProps = HTMLAttributes<HTMLButtonElement> & {
   disabled?: boolean;
@@ -40,38 +56,76 @@ export const NextInboxItemButton = ({
   disabled,
   ...props
 }: NextInboxItemButtonProps) => {
-  const recipientToken = nextInboxDocument?.Recipient[0]?.token ?? null;
-
   return (
-    <Tooltip>
-      <TooltipTrigger>
-        <Link href={'/sign/' + recipientToken}>
-          <Button
-            type="button"
-            variant="outline"
-            className={className}
-            disabled={disabled || !documentData || !userEmail}
-            {...props}
-          >
-            <SignatureIcon className="mr-2 h-5 w-5" />
-            <Trans>Sign Next Document</Trans>
-          </Button>
-        </Link>
-      </TooltipTrigger>
+    <Sheet>
+      <SheetTrigger asChild>
+        <Button
+          type="button"
+          variant="outline"
+          className={className}
+          disabled={disabled || !documentData || !userEmail}
+          {...props}
+        >
+          <SignatureIcon className="mr-2 h-5 w-5" />
+          <Trans>Sign Next Document</Trans>
+        </Button>
+      </SheetTrigger>
+      <SheetContent>
+        <SheetHeader>
+          <SheetTitle className="text-2xl">Inbox</SheetTitle>
+          <SheetDescription>Documents awaiting your signature or review</SheetDescription>
+        </SheetHeader>
 
-      <TooltipContent className="flex flex-row items-start gap-x-2 p-4">
-        <div className="gap-y-2">
-          <p className="text-foreground text-base font-semibold">{nextInboxDocument?.title}</p>
+        <div className="mt-8 space-y-6">
+          {nextInboxDocument?.map((document) => {
+            const recipient = document.Recipient[0];
 
-          {nextInboxDocument?.createdAt && (
-            <p className="text-muted-foreground text-sm">
-              <Trans>
-                Created {DateTime.fromJSDate(nextInboxDocument?.createdAt).toFormat('LLL ‘yy')}
-              </Trans>
-            </p>
-          )}
+            return (
+              <div key={document.id} className="flex items-center justify-between space-y-1">
+                <div>
+                  <p className="text-foreground text-lg font-semibold">{document.title}</p>
+
+                  <div className="flex items-center gap-x-2">
+                    <DocumentStatus status={document.status} />
+
+                    {document.createdAt && (
+                      <p className="text-muted-foreground">
+                        <Trans>
+                          Created {DateTime.fromJSDate(document.createdAt).toFormat('LLL ‘yy')}
+                        </Trans>
+                      </p>
+                    )}
+                  </div>
+                </div>
+
+                <Button asChild className="w-28">
+                  <Link href={`/sign/${recipient?.token}`}>
+                    {match(recipient?.role)
+                      .with(RecipientRole.SIGNER, () => (
+                        <>
+                          <Pencil className="-ml-1 mr-2 h-4 w-4" />
+                          <Trans>Sign</Trans>
+                        </>
+                      ))
+                      .with(RecipientRole.APPROVER, () => (
+                        <>
+                          <CheckCircle className="-ml-1 mr-2 h-4 w-4" />
+                          <Trans>Approve</Trans>
+                        </>
+                      ))
+                      .otherwise(() => (
+                        <>
+                          <EyeIcon className="-ml-1 mr-2 h-4 w-4" />
+                          <Trans>View</Trans>
+                        </>
+                      ))}
+                  </Link>
+                </Button>
+              </div>
+            );
+          })}
         </div>
-      </TooltipContent>
-    </Tooltip>
+      </SheetContent>
+    </Sheet>
   );
 };

packages/ui/package.json

@@ -78,6 +78,7 @@
     "tailwind-merge": "^1.12.0",
     "tailwindcss-animate": "^1.0.5",
     "ts-pattern": "^5.0.5",
+    "vaul": "^1.0.0",
     "zod": "^3.22.4"
   }
-}
+}