fix: avatar/logo display diagnostics and upload error handling

Add error logging to silent catch blocks in avatar/logo URL generation,
show user avatar on admin member detail page, and surface specific error
messages for upload failures (CORS/network issues) instead of generic errors.

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

src/components/shared/avatar-upload.tsx

@@ -139,16 +139,23 @@ export function AvatarUpload({
       })
 
       // Upload cropped blob directly to storage
-      const uploadResponse = await fetch(uploadUrl, {
-        method: 'PUT',
-        body: croppedBlob,
-        headers: {
-          'Content-Type': 'image/jpeg',
-        },
-      })
+      let uploadResponse: Response
+      try {
+        uploadResponse = await fetch(uploadUrl, {
+          method: 'PUT',
+          body: croppedBlob,
+          headers: {
+            'Content-Type': 'image/jpeg',
+          },
+        })
+      } catch (fetchError) {
+        console.error('Avatar upload network error (possible CORS issue):', fetchError)
+        throw new Error('Network error uploading file. The storage server may not be reachable.')
+      }
 
       if (!uploadResponse.ok) {
-        throw new Error('Failed to upload file')
+        console.error('Avatar upload failed:', uploadResponse.status, uploadResponse.statusText)
+        throw new Error(`Upload failed (${uploadResponse.status}). Please try again.`)
       }
 
       // Confirm upload

src/components/shared/logo-upload.tsx

@@ -142,16 +142,23 @@ export function LogoUpload({
       })
 
       // Upload cropped blob directly to storage
-      const uploadResponse = await fetch(uploadUrl, {
-        method: 'PUT',
-        body: croppedBlob,
-        headers: {
-          'Content-Type': 'image/png',
-        },
-      })
+      let uploadResponse: Response
+      try {
+        uploadResponse = await fetch(uploadUrl, {
+          method: 'PUT',
+          body: croppedBlob,
+          headers: {
+            'Content-Type': 'image/png',
+          },
+        })
+      } catch (fetchError) {
+        console.error('Logo upload network error (possible CORS issue):', fetchError)
+        throw new Error('Network error uploading file. The storage server may not be reachable.')
+      }
 
       if (!uploadResponse.ok) {
-        throw new Error('Failed to upload file')
+        console.error('Logo upload failed:', uploadResponse.status, uploadResponse.statusText)
+        throw new Error(`Upload failed (${uploadResponse.status}). Please try again.`)
       }
 
       // Confirm upload with the provider type that was used

src/components/shared/project-logo-upload.tsx

@@ -128,14 +128,21 @@ export function ProjectLogoUpload({
         contentType: 'image/png',
       })
 
-      const uploadResponse = await fetch(uploadUrl, {
-        method: 'PUT',
-        body: croppedBlob,
-        headers: { 'Content-Type': 'image/png' },
-      })
+      let uploadResponse: Response
+      try {
+        uploadResponse = await fetch(uploadUrl, {
+          method: 'PUT',
+          body: croppedBlob,
+          headers: { 'Content-Type': 'image/png' },
+        })
+      } catch (fetchError) {
+        console.error('Logo upload network error (possible CORS issue):', fetchError)
+        throw new Error('Network error uploading file. The storage server may not be reachable.')
+      }
 
       if (!uploadResponse.ok) {
-        throw new Error('Failed to upload file')
+        console.error('Logo upload failed:', uploadResponse.status, uploadResponse.statusText)
+        throw new Error(`Upload failed (${uploadResponse.status}). Please try again.`)
       }
 
       await confirmUpload.mutateAsync({ projectId, key, providerType })