feat: add profile avatar selection and enhance sidebar UI with icons

frontend/src/pages/Profile.tsx

@@ -17,6 +17,7 @@ interface UserProfile {
     smoking: boolean | null
     alcohol: boolean | null
     diet: string | null
+    avatar_url: string | null
 }
 
 export function ProfilePage() {
@@ -35,6 +36,12 @@ export function ProfilePage() {
     const [smoking, setSmoking] = useState<boolean | null>(null)
     const [alcohol, setAlcohol] = useState<boolean | null>(null)
     const [dietId, setDietId] = useState<number | null>(null)
+    const [avatarUrl, setAvatarUrl] = useState<string | null>(null)
+
+    const avatarOptions = [
+        ...[1, 2, 3, 4, 5, 6, 7].map(i => `/icons/user/icons8-male-user-50${i === 1 ? '' : `-${i}`}.png`),
+        ...['', '-2', '-3', '-4', '-5', '-7', '-8'].map(s => `/icons/user/icons8-user-50${s}.png`),
+    ]
 
     useEffect(() => {
         // Fetch current user and diets (Layout already ensures auth)
@@ -61,9 +68,17 @@ export function ProfilePage() {
                         // Find diet ID from name
                         const diet = dietsData.find((d: Diet) => d.name === profile.diet)
                         setDietId(diet?.id || null)
+                        setAvatarUrl(profile.avatar_url)
                     })
             })
-            .finally(() => setLoading(false))
+            .finally(() => {
+                setLoading(false)
+                // Show success message if we just saved
+                if (localStorage.getItem('profileSaved') === 'true') {
+                    setMessage({ type: 'success', text: 'Profile updated successfully' })
+                    localStorage.removeItem('profileSaved')
+                }
+            })
     }, [])
 
     const handleSubmit = async (e: React.FormEvent) => {
@@ -86,11 +101,13 @@ export function ProfilePage() {
                     smoking,
                     alcohol,
                     diet_id: dietId,
+                    avatar_url: avatarUrl,
                 }),
             })
 
             if (res.ok) {
-                setMessage({ type: 'success', text: 'Profile updated successfully' })
+                localStorage.setItem('profileSaved', 'true')
+                window.location.reload()
             } else {
                 setMessage({ type: 'error', text: 'Failed to update profile' })
             }
@@ -131,6 +148,20 @@ export function ProfilePage() {
                             placeholder="Your full name"
                         />
                     </div>
+                    <div className="form-group">
+                        <label>Profile Avatar</label>
+                        <div className="avatar-picker">
+                            {avatarOptions.map(option => (
+                                <div
+                                    key={option}
+                                    className={`avatar-option ${avatarUrl === option ? 'selected' : ''}`}
+                                    onClick={() => setAvatarUrl(option)}
+                                >
+                                    <img src={option} alt="Avatar option" />
+                                </div>
+                            ))}
+                        </div>
+                    </div>
                 </div>
 
                 {/* Physical Info */}