etalon/BountyBoard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: public profile page + richer hover card with "See full profile"

Browse Source 
- New /users/{id} page renders a user's full profile from the card endpoint:
  avatar, roles, full bio, contact (location/phone), links and custom detail
  fields (internal extra keys hidden; link schemes sanitized).
- The hover user-card now shows a longer bio, phone, up to 3 links, and a
  "See full profile →" button linking to /users/{id}.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
etalon
2026-06-13 12:40:16 +02:00
parent 88fa5d19c8
commit 9a5e302a26
4 changed files with 84 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/static/js/shortcuts.js
+15 -2
View File
@@ -37,6 +37,14 @@ const esc = (s) => String(s ?? '').replace(/[&<>"']/g, (c) => ({
'&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;',
}[c]));
// allow only safe link schemes (block javascript:/data: etc.)
const safeUrl = (u) => {
const s = String(u ?? '').trim();
if (/^(https?:\/\/|mailto:)/i.test(s)) return s;
if (/^[a-z][a-z0-9+.-]*:/i.test(s)) return '#';
return s ? 'https://' + s : '#';
};
function hideCard() {
if (cardEl) { cardEl.remove(); cardEl = null; }
}
@@ -49,6 +57,7 @@ async function showCard(target, userId) {
cardEl = document.createElement('div');
cardEl.className = 'hovercard card';
const roles = ['admin', 'consultant', 'developer'].filter((r) => c.roles[r]);
const links = ((c.contact && c.contact.links) || []).filter(Boolean);
cardEl.innerHTML = `
<div class="spread">
${c.avatarFileId ? `<img class="avatar large" src="/files/${c.avatarFileId}" alt="">`
@@ -58,8 +67,12 @@ async function showCard(target, userId) {
${roles.map((r) => `<span class="badge">${r}</span>`).join(' ')}
</div>
</div>
${c.bio ? `<p class="muted">${esc(c.bio.slice(0, 160))}</p>` : ''}
${c.contact && c.contact.location ? `<p class="muted">📍 ${esc(c.contact.location)}</p>` : ''}`;
${c.bio ? `<p class="muted">${esc(c.bio.slice(0, 220))}${c.bio.length > 220 ? '…' : ''}</p>` : ''}
${c.contact && c.contact.location ? `<p class="muted">📍 ${esc(c.contact.location)}</p>` : ''}
${c.contact && c.contact.phone ? `<p class="muted">📞 ${esc(c.contact.phone)}</p>` : ''}
${links.length ? `<p class="muted">${links.slice(0, 3).map((l) =>
`<a href="${esc(safeUrl(l))}" target="_blank" rel="noopener">🔗 ${esc(l)}</a>`).join('<br>')}</p>` : ''}
<a class="btn small mt" href="/users/${encodeURIComponent(userId)}">See full profile →</a>`;
document.body.appendChild(cardEl);
const rect = target.getBoundingClientRect();
cardEl.style.left = Math.min(rect.left, window.innerWidth - 320) + 'px';