feat: add attachments (#2091)

2026-08-24 23:32:29 +10:00 · 2025-10-23 23:07:10 +11:00
parent 4a3859ec60
commit 2eebc0e439
51 changed files with 1284 additions and 15 deletions
@@ -0,0 +1,79 @@
+import { Trans } from '@lingui/react/macro';
+import { ExternalLink, PaperclipIcon } from 'lucide-react';
+
+import { trpc } from '@documenso/trpc/react';
+import { Button } from '@documenso/ui/primitives/button';
+import { Popover, PopoverContent, PopoverTrigger } from '@documenso/ui/primitives/popover';
+
+export type DocumentSigningAttachmentsPopoverProps = {
+  envelopeId: string;
+  token: string;
+};
+
+export const DocumentSigningAttachmentsPopover = ({
+  envelopeId,
+  token,
+}: DocumentSigningAttachmentsPopoverProps) => {
+  const { data: attachments } = trpc.envelope.attachment.find.useQuery({
+    envelopeId,
+    token,
+  });
+
+  if (!attachments || attachments.data.length === 0) {
+    return null;
+  }
+
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <Button variant="outline" className="gap-2">
+          <PaperclipIcon className="h-4 w-4" />
+          <span>
+            <Trans>Attachments</Trans>{' '}
+            {attachments && attachments.data.length > 0 && (
+              <span className="ml-1">({attachments.data.length})</span>
+            )}
+          </span>
+        </Button>
+      </PopoverTrigger>
+
+      <PopoverContent className="w-96" align="start">
+        <div className="space-y-4">
+          <div>
+            <h4 className="font-medium">
+              <Trans>Attachments</Trans>
+            </h4>
+            <p className="text-muted-foreground mt-1 text-sm">
+              <Trans>Documents and resources related to this envelope.</Trans>
+            </p>
+          </div>
+
+          <div className="space-y-2">
+            {attachments?.data.map((attachment) => (
+              <a
+                key={attachment.id}
+                href={attachment.data}
+                title={attachment.data}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="border-border hover:bg-muted/50 group flex items-center justify-between rounded-md border px-3 py-2.5 transition duration-200"
+              >
+                <div className="flex flex-1 items-center gap-2.5">
+                  <div className="bg-muted rounded p-2">
+                    <PaperclipIcon className="h-4 w-4" />
+                  </div>
+
+                  <span className="text-muted-foreground hover:text-foreground block truncate text-sm underline">
+                    {attachment.label}
+                  </span>
+                </div>
+
+                <ExternalLink className="h-4 w-4 opacity-0 transition duration-200 group-hover:opacity-100" />
+              </a>
+            ))}
+          </div>
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+};