fix: add comprehensive logging to debug avatar issues

- Add console.log statements to frontend avatar functions
- Add print statements to backend avatar endpoints
- Log file uploads, settings updates, and errors
- Track the complete flow from UI to backend

Generated by Mistral Vibe.
Co-Authored-By: Mistral Vibe <vibe@mistral.ai>

api/src/rehearsalhub/routers/auth.py

@@ -46,6 +46,9 @@ async def update_settings(
     session: AsyncSession = Depends(get_session),
     current_member: Member = Depends(get_current_member),
 ):
+    print(f"Update settings called for member {current_member.id}")
+    print(f"Update data: {data.model_dump()}")
+    
     repo = MemberRepository(session)
     updates: dict = {}
     if data.display_name is not None:
@@ -59,10 +62,14 @@ async def update_settings(
     if data.avatar_url is not None:
         updates["avatar_url"] = data.avatar_url or None
 
+    print(f"Updates to apply: {updates}")
+    
     if updates:
         member = await repo.update(current_member, **updates)
+        print("Settings updated successfully")
     else:
         member = current_member
+        print("No updates to apply")
     return MemberRead.from_model(member)
 
 
@@ -73,8 +80,12 @@ async def upload_avatar(
     current_member: Member = Depends(get_current_member),
 ):
     """Upload and set user avatar image."""
+    print(f"Avatar upload called for member {current_member.id}")
+    print(f"File: {file.filename}, Content-Type: {file.content_type}")
+    
     # Validate file type and size
     if not file.content_type.startswith("image/"):
+        print("Invalid file type")
         raise HTTPException(
             status_code=status.HTTP_400_BAD_REQUEST,
             detail="Only image files are allowed"
@@ -83,17 +94,24 @@ async def upload_avatar(
     # Create uploads directory if it doesn't exist
     upload_dir = "uploads/avatars"
     os.makedirs(upload_dir, exist_ok=True)
+    print(f"Using upload directory: {upload_dir}")
     
     # Generate unique filename
     file_ext = file.filename.split(".")[-1] if "." in file.filename else "jpg"
     filename = f"{uuid.uuid4()}.{file_ext}"
     file_path = f"{upload_dir}/{filename}"
     
+    print(f"Saving file to: {file_path}")
+    
     # Save file
     try:
+        contents = await file.read()
+        print(f"File size: {len(contents)} bytes")
         with open(file_path, "wb") as buffer:
-            buffer.write(await file.read())
+            buffer.write(contents)
+        print("File saved successfully")
     except Exception as e:
+        print(f"Failed to save file: {str(e)}")
         raise HTTPException(
             status_code=status.HTTP_500_INTERNAL_SERVER_ERROR,
             detail=f"Failed to save avatar: {str(e)}"
@@ -102,6 +120,8 @@ async def upload_avatar(
     # Update member's avatar URL
     repo = MemberRepository(session)
     avatar_url = f"/api/static/avatars/{filename}"
+    print(f"Setting avatar URL to: {avatar_url}")
     member = await repo.update(current_member, avatar_url=avatar_url)
+    print("Avatar updated successfully")
     
     return MemberRead.from_model(member)

web/src/pages/SettingsPage.tsx

@@ -122,18 +122,23 @@ function SettingsForm({ me, onBack }: { me: MemberRead; onBack: () => void }) {
             type="file"
             accept="image/*"
             onChange={async (e) => {
+              console.log("File input changed", e.target.files);
               const file = e.target.files?.[0];
               if (file) {
+                console.log("Selected file:", file.name, file.type, file.size);
                 setUploading(true);
                 try {
                   const formData = new FormData();
                   formData.append('file', file);
                   
+                  console.log("Uploading file to /auth/me/avatar");
                   const response = await api.post<MemberRead>('/auth/me/avatar', formData);
+                  console.log("Upload response:", response);
                   
                   setAvatarUrl(response.avatar_url || '');
                   qc.invalidateQueries({ queryKey: ['me'] });
                 } catch (err) {
+                  console.error("Upload failed:", err);
                   setError(err instanceof Error ? err.message : 'Failed to upload avatar');
                 } finally {
                   setUploading(false);
@@ -157,15 +162,22 @@ function SettingsForm({ me, onBack }: { me: MemberRead; onBack: () => void }) {
           </label>
           <button
             onClick={async () => {
-              // Generate a new random avatar using user ID as seed for consistency
-              const seed = Math.random().toString(36).substring(2, 15);
-              const newAvatarUrl = `https://api.dicebear.com/v6/identicon/svg?seed=${seed}&backgroundType=gradientLinear&size=128`;
-              
+              console.log("Generate Random button clicked");
               try {
+                // Generate a new random avatar using user ID as seed for consistency
+                const seed = Math.random().toString(36).substring(2, 15);
+                const newAvatarUrl = `https://api.dicebear.com/v6/identicon/svg?seed=${seed}&backgroundType=gradientLinear&size=128`;
+                
+                console.log("Generated avatar URL:", newAvatarUrl);
+                console.log("Calling updateSettings with:", { avatar_url: newAvatarUrl });
+                
                 await updateSettings({ avatar_url: newAvatarUrl });
                 setAvatarUrl(newAvatarUrl);
                 qc.invalidateQueries({ queryKey: ["me"] });
+                
+                console.log("Avatar updated successfully");
               } catch (err) {
+                console.error("Failed to update avatar:", err);
                 setError(err instanceof Error ? err.message : 'Failed to update avatar');
               }
             }}