BountyBoard/web/static/js/shortcuts.js

// 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) => ({
  '&': '&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; }
}

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]);
    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="">`
          : `<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, 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';
    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);
});