feat: add auto-generated pseudonyms and identicon avatars for users

js/components/app-header.js

@@ -2,6 +2,7 @@ import { i18n, t } from '../i18n.js'
 import { router } from '../router.js'
 import { auth } from '../services/auth.js'
 import { notificationsService } from '../services/notifications.js'
+import { generateAvatar } from '../services/identity.js'
 
 class AppHeader extends HTMLElement {
     constructor() {
@@ -188,17 +189,18 @@ class AppHeader extends HTMLElement {
                         </a>
                         <div class="dropdown" id="profile-dropdown">
                             <button 
-                                class="btn btn-icon btn-outline" 
+                                class="btn btn-icon btn-profile-avatar" 
                                 id="profile-toggle"
                                 aria-haspopup="menu"
                                 aria-expanded="${this.profileDropdownOpen}"
                                 aria-label="${t('header.profile')}"
                                 title="${t('header.profile')}"
                             >
+                                ${auth.currentUser?.id ? generateAvatar(auth.currentUser.id, 32) : `
                                 <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                     <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
                                     <circle cx="12" cy="7" r="4"></circle>
-                                </svg>
+                                </svg>`}
                             </button>
                             <div class="dropdown-menu dropdown-menu-right" role="menu">
                                 <a href="#/my-listings" class="dropdown-item" role="menuitem">