feat(transactions): suporte a Ctrl+V em anexos e melhorias de UX no modal

src/features/transactions/components/attachments/attachment-file-picker.tsx

@@ -1,13 +1,18 @@
 "use client";
 
 import { RiAttachment2, RiCloseLine } from "@remixicon/react";
-import { useRef } from "react";
+import { useEffect, useRef } from "react";
 import { toast } from "sonner";
 import {
 	ALLOWED_MIME_TYPES,
 	DEFAULT_MAX_FILE_SIZE_MB,
 } from "@/features/transactions/lib/attachments-config";
 import { Button } from "@/shared/components/ui/button";
+import {
+	getFilesFromClipboard,
+	isTextEditingTarget,
+	validateAttachmentFile,
+} from "./attachment-file-utils";
 
 interface AttachmentFilePickerProps {
 	files: File[];
@@ -22,34 +27,54 @@ export function AttachmentFilePicker({
 	onRemove,
 	maxSizeMb = DEFAULT_MAX_FILE_SIZE_MB,
 }: AttachmentFilePickerProps) {
-	const maxFileSizeBytes = maxSizeMb * 1024 * 1024;
 	const inputRef = useRef<HTMLInputElement>(null);
 
+	function addFile(file: File) {
+		const validation = validateAttachmentFile(file, maxSizeMb);
+		if (!validation.ok) {
+			toast.error(validation.error);
+			return;
+		}
+
+		onAdd(file);
+	}
+
 	function handleFileChange(e: React.ChangeEvent<HTMLInputElement>) {
 		const selected = e.target.files?.[0];
 		if (inputRef.current) inputRef.current.value = "";
 
 		if (!selected) return;
 
-		if (
-			!ALLOWED_MIME_TYPES.includes(
-				selected.type as (typeof ALLOWED_MIME_TYPES)[number],
-			)
-		) {
-			toast.error(
-				"Tipo de arquivo não suportado. Use PDF ou imagem (JPEG, PNG, WebP).",
-			);
-			return;
-		}
-
-		if (selected.size > maxFileSizeBytes) {
-			toast.error(`O arquivo deve ter no máximo ${maxSizeMb}MB.`);
-			return;
-		}
-
-		onAdd(selected);
+		addFile(selected);
 	}
 
+	function handlePaste(event: React.ClipboardEvent<HTMLButtonElement>) {
+		const pastedFiles = getFilesFromClipboard(event);
+		if (pastedFiles.length === 0) return;
+
+		event.preventDefault();
+		for (const file of pastedFiles) {
+			addFile(file);
+		}
+	}
+
+	useEffect(() => {
+		function handleDocumentPaste(event: ClipboardEvent) {
+			if (isTextEditingTarget(event.target)) return;
+
+			const pastedFiles = getFilesFromClipboard(event);
+			if (pastedFiles.length === 0) return;
+
+			event.preventDefault();
+			for (const file of pastedFiles) {
+				addFile(file);
+			}
+		}
+
+		document.addEventListener("paste", handleDocumentPaste);
+		return () => document.removeEventListener("paste", handleDocumentPaste);
+	});
+
 	return (
 		<div className="space-y-1.5">
 			<p className="text-xs font-medium">Anexos</p>
@@ -90,13 +115,15 @@ export function AttachmentFilePicker({
 				type="button"
 				className="flex w-full cursor-pointer flex-col items-center justify-center gap-1 rounded-md border border-dashed py-4 text-sm text-muted-foreground transition-colors hover:border-foreground/40 hover:text-foreground"
 				onClick={() => inputRef.current?.click()}
+				onPaste={handlePaste}
 			>
 				<span className="flex items-center gap-2">
 					<RiAttachment2 className="size-4" />
 					Adicionar anexo
 				</span>
 				<span className="text-xs">
-					PDF, JPEG, PNG ou WebP · máx. {maxSizeMb} MB
+					PDF, JPEG, PNG ou WebP · cole ou busque o arquivo · máx. {maxSizeMb}{" "}
+					MB
 				</span>
 			</button>
 		</div>

src/features/transactions/components/attachments/attachment-file-utils.ts

@@ -0,0 +1,54 @@
+import {
+	ALLOWED_MIME_TYPES,
+	DEFAULT_MAX_FILE_SIZE_MB,
+} from "@/features/transactions/lib/attachments-config";
+
+type AttachmentValidationResult = { ok: true } | { ok: false; error: string };
+
+export function validateAttachmentFile(
+	file: File,
+	maxSizeMb = DEFAULT_MAX_FILE_SIZE_MB,
+): AttachmentValidationResult {
+	if (
+		!ALLOWED_MIME_TYPES.includes(
+			file.type as (typeof ALLOWED_MIME_TYPES)[number],
+		)
+	) {
+		return {
+			ok: false,
+			error:
+				"Tipo de arquivo não suportado. Use PDF ou imagem (JPEG, PNG, WebP).",
+		};
+	}
+
+	const maxFileSizeBytes = maxSizeMb * 1024 * 1024;
+	if (file.size > maxFileSizeBytes) {
+		return { ok: false, error: `O arquivo deve ter no máximo ${maxSizeMb}MB.` };
+	}
+
+	return { ok: true };
+}
+
+type ClipboardLikeEvent = ClipboardEvent | React.ClipboardEvent;
+
+export function getFilesFromClipboard(event: ClipboardLikeEvent): File[] {
+	const files = Array.from(event.clipboardData?.files ?? []);
+	if (files.length > 0) return files;
+
+	return Array.from(event.clipboardData?.items ?? [])
+		.filter((item) => item.kind === "file")
+		.map((item) => item.getAsFile())
+		.filter((file): file is File => Boolean(file));
+}
+
+export function isTextEditingTarget(target: EventTarget | null): boolean {
+	if (!(target instanceof HTMLElement)) return false;
+
+	const tagName = target.tagName.toLowerCase();
+	return (
+		tagName === "input" ||
+		tagName === "textarea" ||
+		target.isContentEditable ||
+		target.closest('[contenteditable="true"]') !== null
+	);
+}

src/features/transactions/components/attachments/attachment-upload.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { RiAttachment2 } from "@remixicon/react";
-import { useRef, useTransition } from "react";
+import { useEffect, useRef, useTransition } from "react";
 import { toast } from "sonner";
 import {
 	confirmAttachmentUploadAction,
@@ -11,6 +11,11 @@ import {
 	ALLOWED_MIME_TYPES,
 	DEFAULT_MAX_FILE_SIZE_MB,
 } from "@/features/transactions/lib/attachments-config";
+import {
+	getFilesFromClipboard,
+	isTextEditingTarget,
+	validateAttachmentFile,
+} from "./attachment-file-utils";
 
 interface AttachmentUploadProps {
 	transactionId: string;
@@ -25,7 +30,6 @@ export function AttachmentUpload({
 	onPendingUpload,
 	maxSizeMb = DEFAULT_MAX_FILE_SIZE_MB,
 }: AttachmentUploadProps) {
-	const maxFileSizeBytes = maxSizeMb * 1024 * 1024;
 	const inputRef = useRef<HTMLInputElement>(null);
 	const [isPending, startTransition] = useTransition();
 
@@ -36,19 +40,13 @@ export function AttachmentUpload({
 
 		if (!file) return;
 
-		if (
-			!ALLOWED_MIME_TYPES.includes(
-				file.type as (typeof ALLOWED_MIME_TYPES)[number],
-			)
-		) {
-			toast.error(
-				"Tipo de arquivo não suportado. Use PDF ou imagem (JPEG, PNG, WebP).",
-			);
-			return;
-		}
+		handleFile(file);
+	}
 
-		if (file.size > maxFileSizeBytes) {
-			toast.error(`O arquivo deve ter no máximo ${maxSizeMb}MB.`);
+	function handleFile(file: File) {
+		const validation = validateAttachmentFile(file, maxSizeMb);
+		if (!validation.ok) {
+			toast.error(validation.error);
 			return;
 		}
 
@@ -94,6 +92,29 @@ export function AttachmentUpload({
 		});
 	}
 
+	function handlePaste(event: React.ClipboardEvent<HTMLButtonElement>) {
+		const [file] = getFilesFromClipboard(event);
+		if (!file) return;
+
+		event.preventDefault();
+		handleFile(file);
+	}
+
+	useEffect(() => {
+		function handleDocumentPaste(event: ClipboardEvent) {
+			if (isPending || isTextEditingTarget(event.target)) return;
+
+			const [file] = getFilesFromClipboard(event);
+			if (!file) return;
+
+			event.preventDefault();
+			handleFile(file);
+		}
+
+		document.addEventListener("paste", handleDocumentPaste);
+		return () => document.removeEventListener("paste", handleDocumentPaste);
+	});
+
 	return (
 		<>
 			<input
@@ -107,6 +128,7 @@ export function AttachmentUpload({
 				type="button"
 				className="flex w-full cursor-pointer flex-col items-center justify-center gap-1 rounded-md border border-dashed py-4 text-sm text-muted-foreground transition-colors hover:border-foreground/40 hover:text-foreground disabled:pointer-events-none disabled:opacity-50"
 				onClick={() => inputRef.current?.click()}
+				onPaste={handlePaste}
 				disabled={isPending}
 			>
 				<span className="flex items-center gap-2">
@@ -115,7 +137,8 @@ export function AttachmentUpload({
 				</span>
 				{!isPending && (
 					<span className="text-xs">
-						PDF, JPEG, PNG ou WebP · máx. {maxSizeMb} MB
+						PDF, JPEG, PNG ou WebP · cole ou busque o arquivo · máx. {maxSizeMb}{" "}
+						MB
 					</span>
 				)}
 			</button>