From 1511d2288c84b499ab51feaea0c1cf1c842f7013 Mon Sep 17 00:00:00 2001
From: Catalin Pit <catalinpit@gmail.com>
Date: Mon, 7 Jul 2025 15:28:52 +0300
Subject: [PATCH] chore: visual changes

---
 .../document-signing-attachments-dialog.tsx   | 62 +++++++++++++++++++
 .../document-signing-form.tsx                 | 38 +-----------
 .../document-signing-page-view.tsx            |  8 ++-
 .../document/document-attachment-form.tsx     |  2 +-
 .../template/template-attachment-form.tsx     |  2 +-
 .../t.$teamUrl+/documents.$id.edit.tsx        | 16 ++---
 6 files changed, 76 insertions(+), 52 deletions(-)
 create mode 100644 apps/remix/app/components/general/document-signing/document-signing-attachments-dialog.tsx

diff --git a/apps/remix/app/components/general/document-signing/document-signing-attachments-dialog.tsx b/apps/remix/app/components/general/document-signing/document-signing-attachments-dialog.tsx
new file mode 100644
index 000000000..a324bcf13
--- /dev/null
+++ b/apps/remix/app/components/general/document-signing/document-signing-attachments-dialog.tsx
@@ -0,0 +1,62 @@
+import { Trans } from '@lingui/react/macro';
+import { LinkIcon } from 'lucide-react';
+
+import type { DocumentAndSender } from '@documenso/lib/server-only/document/get-document-by-token';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@documenso/ui/primitives/dialog';
+
+export type DocumentSigningAttachmentsDialogProps = {
+  document: DocumentAndSender;
+};
+
+export const DocumentSigningAttachmentsDialog = ({
+  document,
+}: DocumentSigningAttachmentsDialogProps) => {
+  const attachments = document.attachments ?? [];
+
+  return (
+    <Dialog>
+      <DialogTrigger asChild>
+        <Button variant="outline">
+          <Trans>Attachments</Trans>
+        </Button>
+      </DialogTrigger>
+      <DialogContent position="center">
+        <DialogHeader>
+          <DialogTitle>
+            <Trans>Attachments</Trans>
+          </DialogTitle>
+          <DialogDescription>
+            <Trans>View all attachments for this document.</Trans>
+          </DialogDescription>
+        </DialogHeader>
+        <div className="mt-2 flex flex-col gap-2">
+          {attachments.length === 0 && (
+            <span className="text-muted-foreground text-sm">
+              <Trans>No attachments available.</Trans>
+            </span>
+          )}
+          {attachments.map((attachment, idx) => (
+            <a
+              key={attachment.id || idx}
+              href={attachment.url}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="hover:bg-muted/50 flex items-center gap-2 rounded px-2 py-1"
+            >
+              <LinkIcon className="h-4 w-4" />
+              <span className="truncate">{attachment.label}</span>
+            </a>
+          ))}
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+};
diff --git a/apps/remix/app/components/general/document-signing/document-signing-form.tsx b/apps/remix/app/components/general/document-signing/document-signing-form.tsx
index fa6983bf1..967c5d725 100644
--- a/apps/remix/app/components/general/document-signing/document-signing-form.tsx
+++ b/apps/remix/app/components/general/document-signing/document-signing-form.tsx
@@ -4,9 +4,8 @@ import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
 import { type Field, FieldType, type Recipient, RecipientRole } from '@prisma/client';
-import { Link as LinkIcon } from 'lucide-react';
 import { Controller, useForm } from 'react-hook-form';
-import { Link, useNavigate } from 'react-router';
+import { useNavigate } from 'react-router';
 
 import { useAnalytics } from '@documenso/lib/client-only/hooks/use-analytics';
 import { useOptionalSession } from '@documenso/lib/client-only/providers/session';
@@ -18,12 +17,6 @@ import type { RecipientWithFields } from '@documenso/prisma/types/recipient-with
 import { trpc } from '@documenso/trpc/react';
 import { FieldToolTip } from '@documenso/ui/components/field/field-tooltip';
 import { cn } from '@documenso/ui/lib/utils';
-import {
-  Accordion,
-  AccordionContent,
-  AccordionItem,
-  AccordionTrigger,
-} from '@documenso/ui/primitives/accordion';
 import { Button } from '@documenso/ui/primitives/button';
 import { Input } from '@documenso/ui/primitives/input';
 import { Label } from '@documenso/ui/primitives/label';
@@ -377,35 +370,6 @@ export const DocumentSigningForm = ({
                       />
                     </div>
 
-                    {document.attachments?.length > 0 && (
-                      <Accordion type="multiple" className="mt-2">
-                        <AccordionItem value="attachments" className="border-none">
-                          <AccordionTrigger className="text-foreground mb-2 rounded border px-3 py-2 text-left hover:bg-neutral-200/30 hover:no-underline">
-                            <Trans>Attachments</Trans>
-                          </AccordionTrigger>
-
-                          <AccordionContent className="-mx-1 px-1 pt-2 text-sm leading-relaxed">
-                            <div className="flex flex-col space-y-2">
-                              {document.attachments.map((attachment, index) => (
-                                <div key={index}>
-                                  <Link
-                                    to={attachment.url}
-                                    target="_blank"
-                                    rel="noopener noreferrer"
-                                  >
-                                    <div className="ml-2 flex flex-row items-center gap-2">
-                                      <LinkIcon className="h-4 w-4" />
-                                      {attachment.label}
-                                    </div>
-                                  </Link>
-                                </div>
-                              ))}
-                            </div>
-                          </AccordionContent>
-                        </AccordionItem>
-                      </Accordion>
-                    )}
-
                     {hasSignatureField && (
                       <div>
                         <Label htmlFor="Signature">
diff --git a/apps/remix/app/components/general/document-signing/document-signing-page-view.tsx b/apps/remix/app/components/general/document-signing/document-signing-page-view.tsx
index 98aa35893..027aad88f 100644
--- a/apps/remix/app/components/general/document-signing/document-signing-page-view.tsx
+++ b/apps/remix/app/components/general/document-signing/document-signing-page-view.tsx
@@ -24,6 +24,7 @@ import { Card, CardContent } from '@documenso/ui/primitives/card';
 import { ElementVisible } from '@documenso/ui/primitives/element-visible';
 import { PDFViewer } from '@documenso/ui/primitives/pdf-viewer';
 
+import { DocumentSigningAttachmentsDialog } from '~/components/general/document-signing/document-signing-attachments-dialog';
 import { DocumentSigningAutoSign } from '~/components/general/document-signing/document-signing-auto-sign';
 import { DocumentSigningCheckboxField } from '~/components/general/document-signing/document-signing-checkbox-field';
 import { DocumentSigningDateField } from '~/components/general/document-signing/document-signing-date-field';
@@ -83,7 +84,7 @@ export const DocumentSigningPageView = ({
           {document.title}
         </h1>
 
-        <div className="mt-2.5 flex flex-wrap items-center justify-between gap-x-6">
+        <div className="mt-2.5 flex flex-wrap items-center justify-between gap-x-6 gap-y-4">
           <div className="max-w-[50ch]">
             <span className="text-muted-foreground truncate" title={senderName}>
               {senderName} {senderEmail}
@@ -130,7 +131,10 @@ export const DocumentSigningPageView = ({
             </span>
           </div>
 
-          <DocumentSigningRejectDialog document={document} token={recipient.token} />
+          <div className="flex gap-2">
+            <DocumentSigningAttachmentsDialog document={document} />
+            <DocumentSigningRejectDialog document={document} token={recipient.token} />
+          </div>
         </div>
 
         <div className="mt-8 grid grid-cols-12 gap-y-8 lg:gap-x-8 lg:gap-y-0">
diff --git a/apps/remix/app/components/general/document/document-attachment-form.tsx b/apps/remix/app/components/general/document/document-attachment-form.tsx
index 774202446..458d0bee3 100644
--- a/apps/remix/app/components/general/document/document-attachment-form.tsx
+++ b/apps/remix/app/components/general/document/document-attachment-form.tsx
@@ -117,7 +117,7 @@ export const AttachmentForm = ({ documentId }: AttachmentFormProps) => {
   return (
     <Dialog>
       <DialogTrigger asChild>
-        <Button variant="outline">Add Attachment</Button>
+        <Button variant="outline">Attachments</Button>
       </DialogTrigger>
       <DialogContent position="center">
         <DialogHeader>
diff --git a/apps/remix/app/components/general/template/template-attachment-form.tsx b/apps/remix/app/components/general/template/template-attachment-form.tsx
index 6606284bd..9a85282a7 100644
--- a/apps/remix/app/components/general/template/template-attachment-form.tsx
+++ b/apps/remix/app/components/general/template/template-attachment-form.tsx
@@ -117,7 +117,7 @@ export const AttachmentForm = ({ templateId }: AttachmentFormProps) => {
   return (
     <Dialog>
       <DialogTrigger asChild>
-        <Button variant="outline">Add Attachment</Button>
+        <Button variant="outline">Attachments</Button>
       </DialogTrigger>
       <DialogContent position="center">
         <DialogHeader>
diff --git a/apps/remix/app/routes/_authenticated+/t.$teamUrl+/documents.$id.edit.tsx b/apps/remix/app/routes/_authenticated+/t.$teamUrl+/documents.$id.edit.tsx
index f1999fa4c..9d7983ceb 100644
--- a/apps/remix/app/routes/_authenticated+/t.$teamUrl+/documents.$id.edit.tsx
+++ b/apps/remix/app/routes/_authenticated+/t.$teamUrl+/documents.$id.edit.tsx
@@ -100,7 +100,7 @@ export default function DocumentEditPage() {
         <Trans>Documents</Trans>
       </Link>
 
-      <div className="mt-4 flex w-full items-end justify-between">
+      <div className="mt-4 flex w-full flex-col items-start justify-between gap-4 sm:flex-row sm:items-center">
         <div className="flex-1">
           <h1
             className="block max-w-[20rem] truncate text-2xl font-semibold md:max-w-[30rem] md:text-3xl"
@@ -134,17 +134,11 @@ export default function DocumentEditPage() {
           </div>
         </div>
 
-        <div>
-          {document.useLegacyFieldInsertion ? (
-            <div className="flex flex-col items-end gap-2 sm:flex-row sm:items-start">
-              <LegacyFieldWarningPopover type="document" documentId={document.id} />
-              <AttachmentForm documentId={document.id} />
-            </div>
-          ) : (
-            <div>
-              <AttachmentForm documentId={document.id} />
-            </div>
+        <div className={document.useLegacyFieldInsertion ? 'flex items-center gap-2' : undefined}>
+          {document.useLegacyFieldInsertion && (
+            <LegacyFieldWarningPopover type="document" documentId={document.id} />
           )}
+          <AttachmentForm documentId={document.id} />
         </div>
       </div>