profile settings

src/pages/SettingsPage.tsx

@@ -77,8 +77,9 @@ export default function SettingsPage() {
   }
 
   const displayName = mongoUser?.displayName || user?.displayName || 'User'
-  // Prefer mongo photo; only fall back to Google photo if mongo has no photo set
-  const photoURL = (mongoUser && 'photoURL' in mongoUser) ? (mongoUser.photoURL || null) : (user?.photoURL || null)
+  // Use custom uploaded photo (base64) if set, otherwise always use Firebase's fresh Google URL
+  const mongoPhoto = mongoUser && 'photoURL' in mongoUser ? mongoUser.photoURL : null
+  const photoURL = (mongoPhoto?.startsWith('data:')) ? mongoPhoto : (user?.photoURL || null)
 
   const openEditModal = () => {
     setEditName(displayName)
@@ -206,9 +207,11 @@ export default function SettingsPage() {
       <main className="settings-container">
         {/* Profile Section */}
         <div id="tour-edit-profile" className="settings-profile">
-          <div className="settings-avatar">
+          <div className="settings-avatar" onClick={openEditModal} style={{ cursor: 'pointer' }}>
             {photoURL ? (
-              <img src={photoURL} alt={displayName} className="settings-avatar-img" />
+              <img src={photoURL} alt={displayName} className="settings-avatar-img"
+                onError={(e) => { (e.target as HTMLImageElement).style.display = 'none'; }}
+              />
             ) : (
               <div className="settings-avatar-placeholder" style={{ fontSize: '1.75rem' }}>
                 {displayName.charAt(0).toUpperCase()}
@@ -465,9 +468,18 @@ export default function SettingsPage() {
           <div className="confirm-modal" onClick={(e) => e.stopPropagation()}>
             <h3 className="edit-modal-title">Edit Profile</h3>
 
-            <div className="edit-modal-avatar" onClick={() => fileInputRef.current?.click()}>
+            <label className="edit-modal-avatar" style={{ cursor: 'pointer' }}>
+              <input
+                ref={fileInputRef}
+                type="file"
+                accept="image/*"
+                style={{ display: 'none' }}
+                onChange={handlePhotoSelect}
+              />
               {editPhotoPreview ? (
-                <img src={editPhotoPreview} alt="Preview" className="edit-modal-avatar-img" />
+                <img src={editPhotoPreview} alt="Preview" className="edit-modal-avatar-img"
+                  onError={(e) => { (e.target as HTMLImageElement).style.display = 'none' }}
+                />
               ) : (
                 <div className="edit-modal-avatar-placeholder">
                   {editName.charAt(0).toUpperCase() || 'U'}
@@ -479,14 +491,7 @@ export default function SettingsPage() {
                   <circle cx="12" cy="13" r="4" />
                 </svg>
               </div>
-              <input
-                ref={fileInputRef}
-                type="file"
-                accept="image/*"
-                style={{ display: 'none' }}
-                onChange={handlePhotoSelect}
-              />
-            </div>
+            </label>
             {editPhotoPreview && (
               <button
                 type="button"