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

frontend/src/components/Layout.tsx

@@ -6,6 +6,7 @@ interface User {
     username: string
     name: string | null
     role: string
+    avatar_url: string | null
 }
 
 interface LayoutProps {
@@ -67,10 +68,10 @@ export function Layout({ children }: LayoutProps) {
     const displayName = user.name || user.username
 
     const navItems = [
-        { path: '/', label: 'Dashboard', icon: '📊' },
-        { path: '/profile', label: 'Profile', icon: '👤' },
-        { path: '/insights', label: 'Insights', icon: '💡', disabled: true },
-        { path: '/sources', label: 'Sources', icon: '📄' },
+        { path: '/', label: 'Dashboard', icon: '/icons/healthcare/icons8-powerchart-50.png' },
+        { path: '/profile', label: 'Profile', icon: '/icons/general/icons8-user-50.png' },
+        { path: '/insights', label: 'Insights', icon: '/icons/general/icons8-idea-50.png', disabled: true },
+        { path: '/sources', label: 'Sources', icon: '/icons/general/icons8-document-50.png' },
     ]
 
     return (
@@ -90,7 +91,9 @@ export function Layout({ children }: LayoutProps) {
                             className={`sidebar-link ${location.pathname === item.path ? 'active' : ''} ${item.disabled ? 'disabled' : ''}`}
                             onClick={e => item.disabled && e.preventDefault()}
                         >
-                            <span className="sidebar-icon">{item.icon}</span>
+                            <span className="sidebar-icon">
+                                <img src={item.icon} alt={item.label} />
+                            </span>
                             <span className="sidebar-label">{item.label}</span>
                             {item.disabled && <span className="sidebar-badge">Soon</span>}
                         </Link>
@@ -105,7 +108,9 @@ export function Layout({ children }: LayoutProps) {
                             to="/admin"
                             className={`sidebar-link ${location.pathname === '/admin' ? 'active' : ''}`}
                         >
-                            <span className="sidebar-icon">⚙️</span>
+                            <span className="sidebar-icon">
+                                <img src="/icons/user/icons8-add-user-group-woman-man-50.png" alt="Admin" />
+                            </span>
                             <span className="sidebar-label">Manage Users</span>
                         </Link>
                     </div>
@@ -113,11 +118,20 @@ export function Layout({ children }: LayoutProps) {
 
                 <div className="sidebar-footer">
                     <div className="sidebar-user">
-                        <div className="sidebar-user-name">{displayName}</div>
-                        <div className="sidebar-user-role">
-                            <span className={`indicator indicator-${user.role === 'admin' ? 'warning' : 'info'}`}>
-                                {user.role}
-                            </span>
+                        <div className="sidebar-avatar">
+                            {user.avatar_url ? (
+                                <img src={user.avatar_url} alt={displayName} className="avatar-img" />
+                            ) : (
+                                <div className="avatar-placeholder">{displayName[0].toUpperCase()}</div>
+                            )}
+                        </div>
+                        <div className="sidebar-user-info">
+                            <div className="sidebar-user-name">{displayName}</div>
+                            <div className="sidebar-user-role">
+                                <span className={`indicator indicator-${user.role === 'admin' ? 'warning' : 'info'}`}>
+                                    {user.role}
+                                </span>
+                            </div>
                         </div>
                     </div>
                     <div className="sidebar-actions">
@@ -126,14 +140,18 @@ export function Layout({ children }: LayoutProps) {
                             onClick={toggleTheme}
                             title={theme === 'dark' ? 'Light mode' : 'Dark mode'}
                         >
-                            {theme === 'dark' ? '☀️' : '🌙'}
+                            {theme === 'dark' ? (
+                                <img src="/icons/general/icons8-sun-50.png" alt="Light" className="theme-icon" />
+                            ) : (
+                                <img src="/icons/general/icons8-waxing-crescent-50.png" alt="Dark" className="theme-icon" />
+                            )}
                         </button>
                         <button
                             className="sidebar-btn"
                             onClick={handleLogout}
                             title="Logout"
                         >
-                            🚪
+                            <img src="/icons/general/icons8-cancel-50.png" alt="Logout" className="theme-icon" />
                         </button>
                     </div>
                 </div>

frontend/src/index.css

@@ -549,6 +549,42 @@ select.input {
   display: flex;
   align-items: center;
   gap: var(--space-sm);
+  flex: 1;
+}
+
+.sidebar-avatar {
+  width: 32px;
+  height: 32px;
+  flex-shrink: 0;
+}
+
+.avatar-img {
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  object-fit: cover;
+  border: 1px solid var(--border);
+}
+
+.avatar-placeholder {
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  background: var(--accent);
+  color: white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 600;
+  font-size: 14px;
+}
+
+.sidebar-user-info {
+  min-width: 0;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: var(--space-xs);
 }
 
 .sidebar-user-name {
@@ -559,6 +595,43 @@ select.input {
   white-space: nowrap;
 }
 
+/* Avatar Picker in Profile */
+.avatar-picker {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
+  gap: var(--space-sm);
+  margin-top: var(--space-xs);
+}
+
+.avatar-option {
+  width: 60px;
+  height: 60px;
+  padding: 4px;
+  border: 2px solid transparent;
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  transition: border-color 0.2s, transform 0.1s;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.avatar-option:hover {
+  background: var(--bg-primary);
+  transform: scale(1.05);
+}
+
+.avatar-option.selected {
+  border-color: var(--accent);
+  background: var(--bg-primary);
+}
+
+.avatar-option img {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+
 .sidebar-actions {
   display: flex;
   gap: var(--space-xs);
@@ -578,6 +651,22 @@ select.input {
   background: var(--bg-primary);
 }
 
+.theme-icon {
+  width: 18px;
+  height: 18px;
+  display: block;
+}
+
+/* Invert icons in dark mode if they are dark-oriented */
+[data-theme='dark'] .theme-icon {
+  filter: invert(1) brightness(2);
+}
+
+.sidebar-icon img {
+  width: 20px;
+  height: 20px;
+}
+
 /* Main Content */
 .main-content {
   flex: 1;

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 */}