etalon
b232b4b3d3
- Mentions now insert a span carrying the user id (handles names with spaces): the sanitizer permits <span class="mention" data-user-card="ULID">, comment and chat notifications resolve by id and only fire for users with access, and mentions render as clickable chips with the shared hover user-card. - Messages composer inserts an atomic, non-editable mention chip so the trailing space no longer collapses while typing. - Links inside chat messages and task comments are underlined/accented so they read as clickable. - Atomization: hold Ctrl/Cmd while dragging an effort slider to rebalance the sibling coefficients proportionally (sum stays ~1.00); added a hint. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
92 lines
3.3 KiB
JavaScript
92 lines
3.3 KiB
JavaScript
// Global keyboard shortcuts (§10): g b → board, g m → messages, / → search.
|
|
// Plus profile hover cards (§11.13) for any [data-user-card] element.
|
|
import { api } from '/static/js/api.js';
|
|
|
|
let pendingG = false;
|
|
let gTimer = null;
|
|
|
|
function typingTarget(e) {
|
|
const t = e.target;
|
|
return t.isContentEditable || ['INPUT', 'TEXTAREA', 'SELECT'].includes(t.tagName);
|
|
}
|
|
|
|
document.addEventListener('keydown', (e) => {
|
|
if (typingTarget(e) || e.ctrlKey || e.metaKey || e.altKey) return;
|
|
if (e.key === '/') {
|
|
const search = document.querySelector('input[type=search]');
|
|
if (search) { e.preventDefault(); search.focus(); }
|
|
return;
|
|
}
|
|
if (pendingG) {
|
|
pendingG = false;
|
|
clearTimeout(gTimer);
|
|
const map = { b: '/board', m: '/messages', h: '/', t: '/my-tasks', a: '/consultant/board' };
|
|
if (map[e.key]) { e.preventDefault(); window.location.href = map[e.key]; }
|
|
return;
|
|
}
|
|
if (e.key === 'g') {
|
|
pendingG = true;
|
|
gTimer = setTimeout(() => { pendingG = false; }, 1200);
|
|
}
|
|
});
|
|
|
|
// ---- hover cards ----
|
|
let cardEl = null;
|
|
let hideTimer = null;
|
|
const esc = (s) => String(s ?? '').replace(/[&<>"']/g, (c) => ({
|
|
'&': '&', '<': '<', '>': '>', '"': '"', "'": ''',
|
|
}[c]));
|
|
|
|
function hideCard() {
|
|
if (cardEl) { cardEl.remove(); cardEl = null; }
|
|
}
|
|
|
|
async function showCard(target, userId) {
|
|
try {
|
|
const res = await api('GET', `/api/v1/users/${userId}/card`);
|
|
const c = res.card;
|
|
hideCard();
|
|
cardEl = document.createElement('div');
|
|
cardEl.className = 'hovercard card';
|
|
const roles = ['admin', 'consultant', 'developer'].filter((r) => c.roles[r]);
|
|
cardEl.innerHTML = `
|
|
<div class="spread">
|
|
${c.avatarFileId ? `<img class="avatar large" src="/files/${c.avatarFileId}" alt="">`
|
|
: `<span class="avatar large">${esc(c.name.slice(0, 1).toUpperCase())}</span>`}
|
|
<div>
|
|
<strong>${esc(c.name)}</strong><br>
|
|
${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>` : ''}`;
|
|
document.body.appendChild(cardEl);
|
|
const rect = target.getBoundingClientRect();
|
|
cardEl.style.left = Math.min(rect.left, window.innerWidth - 320) + 'px';
|
|
cardEl.style.top = (rect.bottom + window.scrollY + 6) + 'px';
|
|
cardEl.addEventListener('mouseenter', () => clearTimeout(hideTimer));
|
|
cardEl.addEventListener('mouseleave', () => { hideTimer = setTimeout(hideCard, 200); });
|
|
} catch (e) { /* card is best-effort */ }
|
|
}
|
|
|
|
document.addEventListener('mouseover', (e) => {
|
|
const target = e.target.closest('[data-user-card]');
|
|
if (!target) return;
|
|
clearTimeout(hideTimer);
|
|
hideTimer = setTimeout(() => showCard(target, target.dataset.userCard), 350);
|
|
});
|
|
document.addEventListener('mouseout', (e) => {
|
|
if (e.target.closest('[data-user-card]')) {
|
|
clearTimeout(hideTimer);
|
|
hideTimer = setTimeout(hideCard, 250);
|
|
}
|
|
});
|
|
// click a mention (or any user-card target) to open its card immediately
|
|
document.addEventListener('click', (e) => {
|
|
const target = e.target.closest('[data-user-card]');
|
|
if (!target) return;
|
|
e.preventDefault();
|
|
clearTimeout(hideTimer);
|
|
showCard(target, target.dataset.userCard);
|
|
});
|