schmidt1024/kashilo
1
0
Fork 0
Code Issues Pull Requests Releases Activity

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

Browse Source
This commit is contained in:
Schmidt
2026-02-11 07:20:06 +01:00
parent fc0ac5add2
commit 526036c907
12 changed files with 133 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
js/components/app-header.js
View File

@@ -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">

29
js/components/pages/page-listing.js
View File

@@ -9,6 +9,7 @@ import '../location-map.js'
import '../listing-card.js'
import { categoriesService } from '../../services/categories.js'
import { reputationService } from '../../services/reputation.js'
import { generatePseudonym, generateAvatar } from '../../services/identity.js'
class PageListing extends HTMLElement {
constructor() {
@@ -437,10 +438,10 @@ class PageListing extends HTMLElement {
<!-- Seller Card -->
<div class="sidebar-card seller-card">
<div class="seller-header">
<div class="seller-avatar">?</div>
<div class="seller-avatar">${this.listing?.user_created ? generateAvatar(this.listing.user_created, 48) : '?'}</div>
<div class="seller-info">
<strong>${t('listing.anonymousSeller')}</strong>
<span>${t('listing.memberSince')} 2024</span>
<strong>${this.listing?.user_created ? escapeHTML(generatePseudonym(this.listing.user_created)) : t('listing.anonymousSeller')}</strong>
<span class="seller-auto-label">${t('listing.autoGenerated')}</span>
</div>
</div>
${this.renderSellerReputation()}
@@ -517,7 +518,7 @@ class PageListing extends HTMLElement {
<div class="tab-content" id="tab-chat">
<chat-widget
listing-id="${this.listing?.id || ''}"
recipient-name="${t('listing.anonymousSeller')}"
recipient-name="${this.listing?.user_created ? escapeHTML(generatePseudonym(this.listing.user_created)) : t('listing.anonymousSeller')}"
seller-public-key="${this.listing?.contact_public_key || ''}"
></chat-widget>
</div>
@@ -980,14 +981,18 @@ style.textContent = /* css */`
page-listing .seller-avatar {
width: 48px;
height: 48px;
border-radius: 50%;
background: var(--color-primary);
color: white;
border-radius: var(--radius-full);
overflow: hidden;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
font-weight: var(--font-weight-bold);
font-size: var(--font-size-lg);
}
page-listing .seller-avatar svg {
width: 48px;
height: 48px;
display: block;
}
page-listing .seller-info {
@@ -1000,6 +1005,12 @@ style.textContent = /* css */`
color: var(--color-text-muted);
}
page-listing .seller-auto-label {
font-size: var(--font-size-xs);
color: var(--color-text-muted);
font-style: italic;
}
page-listing .seller-reputation {
padding: var(--space-sm) 0 0;
margin-top: var(--space-sm);