From 8378c345d1791caf7a4d0a0fd6ed02229f5a723f Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Mon, 29 Sep 2025 02:39:47 +0000
Subject: [PATCH] Refactor: Limit avatar upload size

---
 src/components/settings/AccountProfileTab.tsx |  1 +
 src/components/upload/PhotoUpload.tsx         | 16 +++++++++-------
 src/pages/Profile.tsx                         |  2 +-
 3 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/src/components/settings/AccountProfileTab.tsx b/src/components/settings/AccountProfileTab.tsx
index c4daba14..cc2b221e 100644
--- a/src/components/settings/AccountProfileTab.tsx
+++ b/src/components/settings/AccountProfileTab.tsx
@@ -154,6 +154,7 @@ export function AccountProfileTab() {
         <PhotoUpload
           variant="avatar"
           maxFiles={1}
+          maxSizeMB={1}
           existingPhotos={avatarUrl ? [avatarUrl] : []}
           onUploadComplete={handleAvatarUpload}
           currentImageId={avatarImageId}
diff --git a/src/components/upload/PhotoUpload.tsx b/src/components/upload/PhotoUpload.tsx
index c72ae185..db3e6584 100644
--- a/src/components/upload/PhotoUpload.tsx
+++ b/src/components/upload/PhotoUpload.tsx
@@ -25,6 +25,7 @@ interface PhotoUploadProps {
   variant?: 'default' | 'compact' | 'avatar';
   accept?: string;
   currentImageId?: string; // For cleanup of existing image
+  maxSizeMB?: number; // Custom max file size in MB
 }
 
 interface UploadedImage {
@@ -43,7 +44,8 @@ export function PhotoUpload({
   className,
   variant = 'default',
   accept = 'image/jpeg,image/png,image/webp',
-  currentImageId
+  currentImageId,
+  maxSizeMB = 10 // Default 10MB, but can be overridden
 }: PhotoUploadProps) {
   const [uploadedImages, setUploadedImages] = useState<UploadedImage[]>([]);
   const [uploading, setUploading] = useState(false);
@@ -59,10 +61,10 @@ export function PhotoUpload({
   const canUploadMore = totalImages < actualMaxFiles;
 
   const validateFile = (file: File): string | null => {
-    // Check file size (10MB limit)
-    const maxSize = 10 * 1024 * 1024;
+    // Check file size using configurable limit
+    const maxSize = maxSizeMB * 1024 * 1024;
     if (file.size > maxSize) {
-      return 'File size must be less than 10MB';
+      return `File size must be less than ${maxSizeMB}MB`;
     }
 
     // Check file type
@@ -307,7 +309,7 @@ export function PhotoUpload({
               {uploadedImages.length > 0 || existingPhotos.length > 0 ? 'Change Avatar' : 'Upload Avatar'}
             </Button>
             <p className="text-xs text-muted-foreground">
-              JPEG, PNG, WebP up to 10MB
+              JPEG, PNG, WebP up to {maxSizeMB}MB
             </p>
           </div>
         </div>
@@ -372,9 +374,9 @@ export function PhotoUpload({
                 </p>
                 <p className="text-sm text-muted-foreground">
                   {isAvatar ? (
-                    <>Drag & drop or click to browse<br />JPEG, PNG, WebP up to 10MB</>
+                    <>Drag & drop or click to browse<br />JPEG, PNG, WebP up to {maxSizeMB}MB</>
                   ) : canUploadMore ? (
-                    <>Drag & drop or click to browse<br />JPEG, PNG, WebP up to 10MB each</>
+                    <>Drag & drop or click to browse<br />JPEG, PNG, WebP up to {maxSizeMB}MB each</>
                   ) : (
                     `Maximum ${actualMaxFiles} ${actualMaxFiles === 1 ? 'photo' : 'photos'} allowed`
                   )}
diff --git a/src/pages/Profile.tsx b/src/pages/Profile.tsx
index 49ba27af..f6561864 100644
--- a/src/pages/Profile.tsx
+++ b/src/pages/Profile.tsx
@@ -349,7 +349,7 @@ export default function Profile() {
             <CardContent className="p-8">
               <div className="flex flex-col md:flex-row gap-6">
                 <div className="flex flex-col items-center md:items-start">
-                  <PhotoUpload variant="avatar" maxFiles={1} existingPhotos={profile.avatar_url ? [profile.avatar_url] : []} onUploadComplete={handleAvatarUpload} currentImageId={avatarImageId} onError={error => {
+                  <PhotoUpload variant="avatar" maxFiles={1} maxSizeMB={1} existingPhotos={profile.avatar_url ? [profile.avatar_url] : []} onUploadComplete={handleAvatarUpload} currentImageId={avatarImageId} onError={error => {
                   toast({
                     title: "Upload Error",
                     description: error,