feat(payers): upload de avatar via arquivo com redimensionamento client-side

- círculo de upload no final da grade de avatares abre seletor de arquivo
- imagem redimensionada para 200×200px via Canvas e salva como base64
- suporte a data URLs em next/image com prop unoptimized
- object-cover adicionado ao componente base Avatar

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

next.config.ts

@@ -10,7 +10,11 @@ const nextConfig: NextConfig = {
 	reactCompiler: true,
 
 	images: {
-		remotePatterns: [new URL("https://lh3.googleusercontent.com/**")],
+		remotePatterns: [
+			new URL("https://lh3.googleusercontent.com/**"),
+			{ protocol: "https", hostname: "**" },
+			{ protocol: "http", hostname: "**" },
+		],
 	},
 	devIndicators: {
 		position: "bottom-right",

src/features/payers/components/details/payer-header-card.tsx

@@ -52,6 +52,7 @@ export function PayerHeaderCard({
 	const [confirmOpen, setConfirmOpen] = useState(false);
 
 	const avatarSrc = getAvatarSrc(payer.avatarUrl);
+	const isDataUrl = avatarSrc.startsWith("data:");
 	const createdAtLabel = formatDate(payer.createdAt);
 	const isAdmin = payer.role === PAYER_ROLE_ADMIN;
 
@@ -109,6 +110,7 @@ export function PayerHeaderCard({
 					<div className="relative flex size-16 shrink-0 items-center justify-center overflow-hidden">
 						<Image
 							src={avatarSrc}
+							unoptimized={isDataUrl}
 							alt={`Avatar de ${payer.name}`}
 							width={64}
 							height={64}

src/features/payers/components/payer-card.tsx

@@ -24,6 +24,7 @@ interface PayerCardProps {
 export function PayerCard({ payer, onEdit, onRemove }: PayerCardProps) {
 	const avatarSrc = getAvatarSrc(payer.avatarUrl);
 	const isAdmin = payer.role === PAYER_ROLE_ADMIN;
+	const isDataUrl = avatarSrc.startsWith("data:");
 	const isReadOnly = !payer.canEdit;
 
 	return (
@@ -33,6 +34,7 @@ export function PayerCard({ payer, onEdit, onRemove }: PayerCardProps) {
 				<div className="relative mb-3 flex size-16 items-center justify-center overflow-hidden rounded-full  border-background bg-background shadow-lg">
 					<Image
 						src={avatarSrc}
+						unoptimized={isDataUrl}
 						alt={`Avatar de ${payer.name}`}
 						width={80}
 						height={80}

src/features/payers/components/payer-dialog.tsx

@@ -1,6 +1,7 @@
 "use client";
+import { RiImageAddLine } from "@remixicon/react";
 import Image from "next/image";
-import { useEffect, useMemo, useState, useTransition } from "react";
+import { useEffect, useMemo, useRef, useState, useTransition } from "react";
 import { toast } from "sonner";
 import {
 	createPayerAction,
@@ -37,6 +38,45 @@ import { getAvatarSrc } from "@/shared/lib/payers/utils";
 import { StatusSelectContent } from "./payer-select-items";
 import type { Payer, PayerFormValues } from "./types";
 
+const AVATAR_MAX_SIZE = 200;
+
+function resizeImageToBase64(file: File): Promise<string> {
+	return new Promise((resolve, reject) => {
+		const reader = new FileReader();
+		reader.onload = (e) => {
+			const img = new window.Image();
+			img.onload = () => {
+				let { width, height } = img;
+				if (width > height) {
+					if (width > AVATAR_MAX_SIZE) {
+						height = Math.round((height * AVATAR_MAX_SIZE) / width);
+						width = AVATAR_MAX_SIZE;
+					}
+				} else {
+					if (height > AVATAR_MAX_SIZE) {
+						width = Math.round((width * AVATAR_MAX_SIZE) / height);
+						height = AVATAR_MAX_SIZE;
+					}
+				}
+				const canvas = document.createElement("canvas");
+				canvas.width = width;
+				canvas.height = height;
+				const ctx = canvas.getContext("2d");
+				if (!ctx) {
+					reject(new Error("Canvas não disponível"));
+					return;
+				}
+				ctx.drawImage(img, 0, 0, width, height);
+				resolve(canvas.toDataURL("image/jpeg", 0.85));
+			};
+			img.onerror = () => reject(new Error("Falha ao carregar imagem"));
+			img.src = e.target?.result as string;
+		};
+		reader.onerror = () => reject(new Error("Falha ao ler arquivo"));
+		reader.readAsDataURL(file);
+	});
+}
+
 type PayerCreatePayload = Parameters<typeof createPayerAction>[0];
 
 interface PayerDialogProps {
@@ -77,8 +117,10 @@ export function PayerDialog({
 }: PayerDialogProps) {
 	const [errorMessage, setErrorMessage] = useState<string | null>(null);
 	const [isPending, startTransition] = useTransition();
+	const [uploadedAvatar, setUploadedAvatar] = useState<string | null>(null);
+	const [isProcessingImage, setIsProcessingImage] = useState(false);
+	const fileInputRef = useRef<HTMLInputElement>(null);
 
-	// Use controlled state hook for dialog open state
 	const [dialogOpen, setDialogOpen] = useControlledState(
 		open,
 		false,
@@ -90,26 +132,47 @@ export function PayerDialog({
 		[payer, avatarOptions],
 	);
 
-	// Use form state hook for form management
 	const { formState, resetForm, updateField } =
 		useFormState<PayerFormValues>(initialState);
 
+	// Avatares da biblioteca excluem data URLs (que ficam no círculo de upload)
 	const availableAvatars = useMemo(() => {
-		const set = new Set([
+		const set = new Set([...avatarOptions, DEFAULT_PAYER_AVATAR]);
-			...avatarOptions,
+		if (initialState.avatarUrl && !initialState.avatarUrl.startsWith("data:")) {
-			initialState.avatarUrl,
+			set.add(initialState.avatarUrl);
-			DEFAULT_PAYER_AVATAR,
+		}
-		]);
 		return Array.from(set).sort((a, b) =>
 			a.localeCompare(b, "pt-BR", { sensitivity: "base" }),
 		);
 	}, [avatarOptions, initialState.avatarUrl]);
 
-	// Reset form when dialog opens
+	const handleFileChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
+		const file = e.target.files?.[0];
+		if (!file) return;
+		setIsProcessingImage(true);
+		try {
+			const base64 = await resizeImageToBase64(file);
+			setUploadedAvatar(base64);
+			updateField("avatarUrl", base64);
+		} catch {
+			toast.error("Não foi possível processar a imagem.");
+		} finally {
+			setIsProcessingImage(false);
+			if (fileInputRef.current) fileInputRef.current.value = "";
+		}
+	};
+
 	useEffect(() => {
 		if (dialogOpen) {
 			resetForm(initialState);
 			setErrorMessage(null);
+			setIsProcessingImage(false);
+			// Se o avatar atual for um upload anterior, restaura no círculo
+			setUploadedAvatar(
+				initialState.avatarUrl.startsWith("data:")
+					? initialState.avatarUrl
+					: null,
+			);
 		}
 	}, [dialogOpen, initialState, resetForm]);
 
@@ -161,6 +224,9 @@ export function PayerDialog({
 	const submitLabel =
 		mode === "create" ? "Salvar pagador" : "Atualizar pagador";
 
+	const isUploadSelected =
+		uploadedAvatar !== null && formState.avatarUrl === uploadedAvatar;
+
 	return (
 		<Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
 			{trigger ? <DialogTrigger asChild>{trigger}</DialogTrigger> : null}
@@ -255,6 +321,7 @@ export function PayerDialog({
 								<div className="flex flex-wrap gap-3">
 									{availableAvatars.map((avatar) => {
 										const isSelected = avatar === formState.avatarUrl;
+										const src = getAvatarSrc(avatar);
 										return (
 											<button
 												type="button"
@@ -265,7 +332,8 @@ export function PayerDialog({
 												aria-pressed={isSelected}
 											>
 												<Image
-													src={getAvatarSrc(avatar)}
+													src={src}
+													unoptimized={src.startsWith("data:")}
 													alt={`Avatar ${avatar}`}
 													width={40}
 													height={40}
@@ -274,6 +342,43 @@ export function PayerDialog({
 											</button>
 										);
 									})}
+
+									{/* Círculo de upload — sempre o último */}
+									<input
+										ref={fileInputRef}
+										type="file"
+										accept="image/*"
+										className="hidden"
+										onChange={handleFileChange}
+									/>
+									<button
+										type="button"
+										onClick={() => fileInputRef.current?.click()}
+										disabled={isProcessingImage}
+										className="group relative flex items-center justify-center rounded-full p-0.5 transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40 data-[selected=true]:ring-2 data-[selected=true]:ring-primary"
+										data-selected={isUploadSelected}
+										aria-pressed={isUploadSelected}
+										aria-label="Fazer upload de foto"
+									>
+										{uploadedAvatar ? (
+											// eslint-disable-next-line @next/next/no-img-element
+											<img
+												src={uploadedAvatar}
+												alt="Avatar personalizado"
+												className="size-12 rounded-full object-cover hover:scale-110 transition-transform duration-200"
+											/>
+										) : (
+											<div className="size-12 rounded-full bg-muted border-2 border-dashed border-muted-foreground/20 flex items-center justify-center hover:scale-110 transition-transform duration-200">
+												{isProcessingImage ? (
+													<span className="text-[10px] text-muted-foreground animate-pulse">
+														...
+													</span>
+												) : (
+													<RiImageAddLine className="size-4 text-muted-foreground/50" />
+												)}
+											</div>
+										)}
+									</button>
 								</div>
 							</div>
 

src/shared/components/navigation/navbar/navbar-user.tsx

@@ -17,11 +17,6 @@ import { version } from "@/package.json";
 import { FeedbackDialogBody } from "@/shared/components/navigation/navbar/feedback-dialog";
 import { Badge } from "@/shared/components/ui/badge";
 import { Dialog, DialogTrigger } from "@/shared/components/ui/dialog";
-import {
-	Tooltip,
-	TooltipContent,
-	TooltipTrigger,
-} from "@/shared/components/ui/tooltip";
 import {
 	DropdownMenu,
 	DropdownMenuContent,
@@ -30,6 +25,11 @@ import {
 	DropdownMenuTrigger,
 } from "@/shared/components/ui/dropdown-menu";
 import { Spinner } from "@/shared/components/ui/spinner";
+import {
+	Tooltip,
+	TooltipContent,
+	TooltipTrigger,
+} from "@/shared/components/ui/tooltip";
 import { authClient } from "@/shared/lib/auth/client";
 import { getAvatarSrc } from "@/shared/lib/payers/utils";
 import type { UpdateCheckResult } from "@/shared/lib/version/check-update";
@@ -68,6 +68,7 @@ export function NavbarUser({
 	const avatarSrc = pagadorAvatarUrl
 		? getAvatarSrc(pagadorAvatarUrl)
 		: user.image || getAvatarSrc(null);
+	const isDataUrl = avatarSrc.startsWith("data:");
 
 	async function handleLogout() {
 		await authClient.signOut({
@@ -91,6 +92,7 @@ export function NavbarUser({
 							<div className="relative size-10 overflow-hidden rounded-full">
 								<Image
 									src={avatarSrc}
+									unoptimized={isDataUrl}
 									alt={`Avatar de ${user.name}`}
 									fill
 									sizes="40px"
@@ -112,6 +114,7 @@ export function NavbarUser({
 						<div className="relative size-9 shrink-0 overflow-hidden rounded-full">
 							<Image
 								src={avatarSrc}
+								unoptimized={isDataUrl}
 								alt={user.name}
 								fill
 								sizes="36px"
@@ -120,7 +123,9 @@ export function NavbarUser({
 						</div>
 						<div className="flex flex-col min-w-0">
 							<div className="flex items-center gap-1 min-w-0">
-								<span className="text-sm font-medium truncate">{user.name}</span>
+								<span className="text-sm font-medium truncate">
+									{user.name}
+								</span>
 								<Tooltip>
 									<TooltipTrigger asChild>
 										<button

src/shared/components/navigation/sidebar/nav-user.tsx

@@ -22,6 +22,7 @@ export function NavUser({ user, pagadorAvatarUrl }: NavUserProps) {
 	const avatarSrc = pagadorAvatarUrl
 		? getAvatarSrc(pagadorAvatarUrl)
 		: user.image || getAvatarSrc(null);
+	const isDataUrl = avatarSrc.startsWith("data:");
 
 	return (
 		<SidebarMenu>
@@ -33,6 +34,7 @@ export function NavUser({ user, pagadorAvatarUrl }: NavUserProps) {
 					<div className="relative size-8 shrink-0 overflow-hidden rounded-full">
 						<Image
 							src={avatarSrc}
+							unoptimized={isDataUrl}
 							alt={user.name}
 							fill
 							sizes="32px"

src/shared/components/ui/avatar.tsx

@@ -28,7 +28,7 @@ function AvatarImage({
 	return (
 		<AvatarPrimitive.Image
 			data-slot="avatar-image"
-			className={cn("aspect-square size-full", className)}
+			className={cn("aspect-square size-full object-cover", className)}
 			{...props}
 		/>
 	);