profile settings

src/components/BottomNav.tsx

@@ -1,4 +1,5 @@
 import { useNavigate, useLocation } from 'react-router-dom'
+import { useState } from 'react'
 import { useAuth } from '../contexts/AuthContext'
 
 export default function BottomNav() {
@@ -6,7 +7,9 @@ export default function BottomNav() {
   const location = useLocation()
   const { user, mongoUser } = useAuth()
   const displayName = mongoUser?.displayName || user?.displayName || 'U'
-  const photoURL = (mongoUser && 'photoURL' in mongoUser) ? (mongoUser.photoURL || null) : (user?.photoURL || null)
+  const mongoPhoto = mongoUser && 'photoURL' in mongoUser ? mongoUser.photoURL : null
+  const photoURL = (mongoPhoto?.startsWith('data:')) ? mongoPhoto : (user?.photoURL || null)
+  const [imgError, setImgError] = useState(false)
 
   const isActive = (path: string) => location.pathname === path
 
@@ -54,8 +57,8 @@ export default function BottomNav() {
         onClick={() => navigate('/settings')}
         aria-label="Settings"
       >
-        {photoURL ? (
-          <img src={photoURL} alt={displayName} className="bottom-nav-avatar" />
+        {photoURL && !imgError ? (
+          <img src={photoURL} alt={displayName} className="bottom-nav-avatar" onError={() => setImgError(true)} />
         ) : (
           <div className="bottom-nav-avatar bottom-nav-avatar-placeholder">
             {displayName.charAt(0).toUpperCase()}