Deploy msgboard

src/msgboard/dashboard.html

@@ -124,6 +124,20 @@ a[data-internal] { font-weight: 600; }
 .rchip:disabled { cursor: default; }
 .rchip.radd { color: var(--ink-3); font: 14px/1 var(--mono); visibility: hidden; }
 .msg:hover .rchip.radd, .rchip.radd:focus-visible { visibility: visible; }
+.rchip[data-react] { -webkit-touch-callout: none; user-select: none; }
+.rchip.who-open { border-color: var(--ink); position: relative; z-index: 31; }
+.rchip.who-open.below { border-bottom-color: var(--bg); }
+.rchip.who-open.above { border-top-color: var(--bg); }
+/* a short neck joins the open chip to its list (covering the list's edge there), so the list clears the neighbouring chips */
+.rchip.who-open::after { content: ""; position: absolute; left: -1px; right: -1px; height: 7px; background: var(--bg); border: 1px solid var(--ink); border-width: 0 1px; }
+.rchip.who-open.below::after { top: 100%; }
+.rchip.who-open.above::after { bottom: 100%; }
+.who-pop { position: fixed; z-index: 30; width: max-content; min-width: 160px; max-width: min(260px, calc(100vw - 16px)); background: var(--bg); border: 1px solid var(--ink); box-shadow: 4px 4px 0 var(--rule); }
+.who-pop .wl { max-height: 264px; overflow-y: auto; padding: 4px 0; overscroll-behavior: contain; }
+.who-pop .person { display: flex; align-items: center; gap: 8px; padding: 4px 10px; width: 100%; border: 0; background: none; color: inherit; font: inherit; text-align: left; }
+.who-pop .person:hover, .who-pop .person:focus-visible { background: var(--hover); outline: none; box-shadow: inset 2px 0 0 var(--ink); }
+.who-pop .pname { display: flex; align-items: baseline; gap: 6px; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
+.who-pop .pname small { font: 11px var(--mono); color: var(--ink-3); }
 .react-pop { position: fixed; z-index: 30; width: min(320px, calc(100vw - 16px)); background: var(--bg); border: 1px solid var(--ink); box-shadow: 4px 4px 0 var(--rule); }
 .react-pop .rquick { display: flex; justify-content: space-between; padding: 6px; border-bottom: 1px solid var(--rule); }
 .react-pop .rquick button, .react-pop .emoji-grid button { width: 34px; height: 32px; border: 0; background: none; font-size: 20px; line-height: 1; padding: 0; }
@@ -778,6 +792,7 @@ dialog input[type=text] { width: 100%; margin: 4px 0 12px; }
     </div>
     <div class="side-foot">
       <div class="side-toggles">
+        <label class="show-private hidden" id="notify-row" title="A system notification when someone mentions you, replies in your threads or sends you a DM, while this board is open in a tab"><input type="checkbox" id="notify-on"> notify me in this browser</label>
         <label class="show-private hidden" id="show-archived-row" title="Archived channels are read-only; hide them from the sidebar"><input type="checkbox" id="show-archived"> show archived</label>
         <label class="show-private hidden" id="show-private-row" title="Admins can see private channels and DMs they are not part of"><input type="checkbox" id="show-private"> show private</label>
       </div>
@@ -1388,6 +1403,14 @@ async function loadPeople(force = false) {
   if (!state.people || force) state.people = (await api("GET", "/principals")).principals;
   return state.people;
 }
+// ids of a channel's members, for @ suggestions; dropped when someone joins, leaves or is added
+const memberIds = new Map(), knownMembers = new Map();
+async function loadMemberIds(c) {
+  if (!memberIds.has(c.id)) memberIds.set(c.id, api("GET", `/channels/${c.id}/members`)
+    .then((r) => { const ids = new Set(r.members.map((m) => m.id)); knownMembers.set(c.id, ids); return ids; },
+      () => { memberIds.delete(c.id); return knownMembers.get(c.id) || new Set(); }));   // on failure: the last list, or none
+  return memberIds.get(c.id);
+}
 async function pick(title, filterFn, onPick) {
   $("pick-title").textContent = title; $("pick-filter").value = ""; $("pick-error").classList.add("hidden");
   const people = (await loadPeople(true)).filter(filterFn);
@@ -1514,6 +1537,7 @@ async function boot() {
   $("show-private-row").classList.toggle("hidden", !can("manage"));
   $("show-private").checked = !!(state.me.prefs && state.me.prefs.show_private);
   await Promise.all([refreshChannels(), renderLibs]);
+  initNotify();
   if (location.hash === "#settings") return openSettings();
   if (location.hash === "#activity") return openActivity();
   if (location.hash === "#analytics" && canAnalytics()) return openAnalytics();
@@ -1533,6 +1557,93 @@ function renderMe() {
   $("me-avatar").innerHTML = avatar(state.me); hydrate($("me-avatar"));
 }
 
+// ------------------------------------------------------------------ browser notifications
+// While a tab is open, a system notification for what is for me: mentions, replies in my threads, DMs.
+// The switch is per browser (the permission is too); every open tab listens, and the shared tag keeps one per message.
+const baseTitle = document.title;
+let notifyCtrl = null;
+const notifyWanted = () => store.get("notify") === "on" && "Notification" in window && Notification.permission === "granted";
+function initNotify() {
+  if (!("Notification" in window)) return;
+  $("notify-row").classList.remove("hidden");
+  syncNotify();
+}
+function syncNotify() {   // on load, and when another tab flips the switch
+  $("notify-on").checked = notifyWanted();
+  if (notifyWanted()) { if (!notifyCtrl || notifyCtrl.signal.aborted) notifyLoop(); }
+  else if (notifyCtrl) notifyCtrl.abort();
+}
+function notifyOff(why) {
+  store.set("notify", "off"); $("notify-on").checked = false; if (notifyCtrl) notifyCtrl.abort();
+  if (why) alert(why);
+}
+const NO_NOTIFY = "This browser does not show notifications from web pages (most phone browsers only allow them for installed apps).";
+// which tab is in front, and on which channel: shared through localStorage, so a tab behind it stays quiet
+function noteFront() {
+  const front = document.visibilityState === "visible" && document.hasFocus() && state.view === "chat" && state.current;
+  if (front) store.set("notify-front", JSON.stringify({ channel: state.current.id, at: Date.now(), tab: tabId }));
+  else if (frontIsMe) {   // only clear the note if it is still ours: another tab may have come to the front meanwhile
+    try { if ((JSON.parse(store.get("notify-front") || "null") || {}).tab === tabId) store.del("notify-front"); } catch {}
+  }
+  frontIsMe = !!front;
+}
+let frontIsMe = false;
+const tabId = Math.random().toString(36).slice(2);
+["focus", "blur", "visibilitychange", "pagehide"].forEach((t) => window.addEventListener(t, () => setTimeout(noteFront)));
+setInterval(() => { if (frontIsMe) noteFront(); }, 30000);   // keep it fresh; a crashed tab's note goes stale after a minute
+function onScreenSomewhere(channelId) {
+  try {
+    const f = JSON.parse(store.get("notify-front") || "null");
+    return !!f && f.channel === channelId && Date.now() - f.at < 60000;
+  } catch { return false; }
+}
+window.addEventListener("storage", (e) => { if (e.key === "msgboard:notify") syncNotify(); });
+$("notify-on").onchange = async () => {
+  const box = $("notify-on");
+  if (!box.checked) { store.set("notify", "off"); if (notifyCtrl) notifyCtrl.abort(); return; }
+  let perm = Notification.permission;
+  if (perm === "default") { try { perm = await Notification.requestPermission(); } catch { perm = "denied"; } }
+  if (perm !== "granted") {
+    box.checked = false;
+    alert(window.top !== window
+      ? "Browsers block notifications for a board shown inside another page. Open the board at its own address and turn this on there."
+      : "Notifications are blocked for this site. Allow them in the browser's site settings (the icon left of the address), then try again.");
+    return;
+  }
+  try { new Notification("Notifications are on", { body: "You will hear about mentions, replies in your threads and DMs here.", tag: "msgboard-on" }); }
+  catch { return notifyOff(NO_NOTIFY); }
+  store.set("notify", "on"); notifyLoop();
+};
+async function notifyLoop() {
+  if (notifyCtrl) notifyCtrl.abort();
+  const ctrl = notifyCtrl = new AbortController();
+  let after = null, wait = 5000;
+  while (!ctrl.signal.aborted && notifyWanted()) {
+    try {
+      // no `channels`: only what is addressed to me. The first call returns a cursor meaning "now".
+      const page = await api("GET", after == null ? "/activity" : `/activity?after=${after}&wait=25`, { signal: ctrl.signal });
+      if (typeof page.next_cursor !== "number") throw new Error("no cursor");
+      if (after != null && notifyWanted() && !ctrl.signal.aborted) page.messages.forEach(notifyFor);   // the switch may have flipped meanwhile
+      after = page.next_cursor; wait = 5000;
+    } catch (e) {
+      if (ctrl.signal.aborted) return;
+      if (e.status === 401) return;
+      await sleep(wait + Math.random() * wait / 2); wait = Math.min(wait * 2, 300000);   // back off, up to 5 min
+    }
+  }
+}
+function notifyFor(m) {
+  if (!["mention", "reply", "dm"].includes(m.reason) || m.sender.id === state.me.id) return;
+  const looking = document.visibilityState === "visible" && document.hasFocus() && state.view === "chat" && state.current && state.current.id === m.channel.id;
+  if (looking || onScreenSomewhere(m.channel.id)) return;   // it is on screen already, in this tab or another
+  const where = m.channel.kind === "dm" ? "direct message" : m.reason === "reply" ? `replied in #${m.channel.name}` : `in #${m.channel.name}`;
+  const text = (m.body || "").replace(/\s+/g, " ").trim();
+  try {
+    const n = new Notification(`${nameOf(m.sender)} ${where}`, { body: text.length > 160 ? text.slice(0, 159) + "…" : text || "(attachment)", tag: "msgboard-" + m.id });
+    n.onclick = () => { window.focus(); n.close(); routeHash("#msg/" + m.id); };
+  } catch { notifyOff(); $("notify-row").title = NO_NOTIFY; }   // some browsers only allow them from a service worker
+}
+
 // ------------------------------------------------------------------ channels and DMs
 async function refreshChannels() {
   try { state.channels = (await api("GET", "/channels")).channels; }
@@ -1562,7 +1673,7 @@ const joinable = (c) => c.member === false && c.kind !== "dm" && !c.archived &&
 async function joinChannel(c) {
   try {
     await api("POST", `/channels/${c.id}/members`, { body: { principal_id: state.me.id } });
-    c.member = true; renderChannels(); updateMeta(true);
+    memberIds.delete(c.id); c.member = true; renderChannels(); updateMeta(true);
   } catch (e) { alert("Could not join: " + e.message); }
 }
 const showPrivate = () => !!(state.me && state.me.prefs && state.me.prefs.show_private);
@@ -1616,6 +1727,8 @@ async function saveChannelOrder(ids) {
 }
 function renderChannels() {
   const total = state.channels.reduce((n, c) => n + (c.for_me || 0), 0);
+  document.title = (total ? `(${total > 99 ? "99+" : total}) ` : "") + baseTitle;
+  noteFront();   // the channel on screen may have changed
   $("settings-open").classList.toggle("on", state.view === "settings");
   $("activity-open").className = (state.view === "activity" ? "active " : "") + (total ? "unread" : "");
   $("activity-open").innerHTML = $("activity-open").innerHTML.replace(/<span class="count">.*?<\/span>/, "") + (total ? `<span class="count">${total > 99 ? "99+" : total}</span>` : "");
@@ -1666,6 +1779,7 @@ function showChat() {
 async function openChannel(id) {
   const c = state.channels.find((x) => x.id === id);
   if (!c) return;
+  memberIds.delete(c.id);   // members change elsewhere too: fetch them fresh for each visit
   showChat();
   if (state.poll) state.poll.abort();
   if (state.panel && state.panel.type !== "profile") closePanel();
@@ -1791,9 +1905,9 @@ function reactionsHTML(m) {
   if (!list.length) return "";
   const writable = canWriteHere();
   return `<div class="reacts">` + list.map((r) => {
-    const who = r.by.map((b) => nameOf(b)).join(", ");
+    const names = r.by.slice(0, 10).map((b) => nameOf(b)).join(", ") + (r.by.length > 10 ? ` and ${r.by.length - 10} more` : "");
     return `<button class="rchip ${r.me ? "mine" : ""}" data-react="${esc(r.emoji)}" data-mid="${m.id}" ${writable ? "" : "disabled"}
-      title="${esc(who)} reacted with ${esc(r.emoji)}" aria-pressed="${r.me}"><span class="re">${esc(r.emoji)}</span><span class="rc">${r.count}</span></button>`;
+      aria-label="${esc(r.emoji)} ${r.count}: ${esc(names)}. Down arrow lists everyone." aria-haspopup="dialog" aria-pressed="${r.me}"><span class="re">${esc(r.emoji)}</span><span class="rc">${r.count}</span></button>`;
   }).join("") + (writable ? `<button class="rchip radd" data-react-pick="${m.id}" title="Add reaction" aria-label="Add reaction">+</button>` : "") + `</div>`;
 }
 async function toggleReaction(mid, emoji) {
@@ -1806,6 +1920,104 @@ async function toggleReaction(mid, emoji) {
     store.set("emoji-recent", JSON.stringify([emoji, ...recentEmoji().filter((x) => x !== emoji)].slice(0, 18)));
   } catch (e) { alert("Could not react: " + e.message); }
 }
+// who reacted: a list that opens on hover, keyboard focus or a long press; each name opens that profile
+let whoPop = null, whoTimer = 0, pressTimer = 0, pressedOpen = false, pressStart = [0, 0], quietChip = null;
+function reactionAt(chip) {
+  const m = state.byId.get(Number(chip.dataset.mid));
+  return m && (m.reactions || []).find((r) => r.emoji === chip.dataset.react);
+}
+function openWho(chip) {
+  clearTimeout(whoTimer);
+  const r = reactionAt(chip);
+  if (!r) return closeWho();
+  if (!whoPop) {
+    whoPop = document.createElement("div"); whoPop.className = "who-pop"; whoPop.setAttribute("role", "dialog");
+    whoPop.addEventListener("pointerenter", () => clearTimeout(whoTimer));
+    whoPop.addEventListener("pointerleave", (e) => { if (e.pointerType !== "touch") hideWhoSoon(); });
+    document.body.appendChild(whoPop);
+  }
+  const people = r.by.map((b) => (state.people || []).find((p) => p.id === b.id) || b);
+  const key = chip.dataset.mid + " " + r.emoji, old = whoPop.querySelector(".wl");
+  const keep = whoPop.key === key && old ? { top: old.scrollTop, focus: whoPop.contains(document.activeElement) && document.activeElement.dataset.profile } : null;
+  if (whoPop.chip && whoPop.chip !== chip) whoPop.chip.classList.remove("who-open", "below", "above");
+  whoPop.chip = chip; whoPop.key = key; whoPop.sig = r.by.map((b) => b.id).join(",");
+  whoPop.pane = chip.parentElement.closest("#messages, #panel-scroll") || document;   // the feed and a thread can show the same message
+  whoPop.setAttribute("aria-label", `Reacted with ${r.emoji}`);
+  whoPop.innerHTML = `<div class="wl">${people.map((p) => `<button type="button" class="person" data-profile="${p.id}">${avatar(p, "xs", false)}<span class="pname">${esc(nameOf(p))}<small>${esc(kindLabel(p))}</small></span></button>`).join("")}</div>`;
+  hydrate(whoPop);
+  // the list hangs off the chip itself, as if the chip grew open (above it when there is no room below)
+  const a = chip.getBoundingClientRect(), wl = whoPop.querySelector(".wl");
+  const room = { below: window.innerHeight - a.bottom - 14, above: a.top - 14 };   // fit short windows: shrink the list, it scrolls
+  wl.style.maxHeight = "";
+  let below = a.bottom + whoPop.offsetHeight + 14 < window.innerHeight || room.below >= room.above;
+  if (whoPop.offsetHeight > room[below ? "below" : "above"]) wl.style.maxHeight = Math.max(60, room[below ? "below" : "above"] - 2) + "px";
+  if (keep) { wl.scrollTop = keep.top; if (keep.focus) { const b = wl.querySelector(`[data-profile="${keep.focus}"]`); if (b) b.focus({ preventScroll: true }); } }
+  const w = whoPop.offsetWidth, h = whoPop.offsetHeight;
+  chip.classList.add("who-open"); chip.classList.toggle("below", below); chip.classList.toggle("above", !below);
+  whoPop.style.left = Math.max(8, Math.min(window.innerWidth - w - 8, a.left)) + "px";
+  whoPop.style.top = (below ? a.bottom + 5 : Math.max(8, a.top - h - 5)) + "px";
+}
+function closeWho(refocus) {
+  clearTimeout(whoTimer);
+  if (!whoPop) return;
+  const chip = whoPop.chip;
+  chip.classList.remove("who-open", "below", "above"); whoPop.remove(); whoPop = null;
+  if (refocus && chip.isConnected) { quietChip = chip; chip.focus(); }   // back on the reaction, without reopening its list
+}
+function hideWhoSoon() { clearTimeout(whoTimer); whoTimer = setTimeout(closeWho, 250); }   // time to move onto the list
+const chipAt = (t) => t && t.closest && t.closest(".rchip[data-react]");
+document.addEventListener("pointerover", (e) => {
+  const chip = e.pointerType !== "touch" && chipAt(e.target);
+  if (chip && (!whoPop || whoPop.chip !== chip)) openWho(chip); else if (chip) clearTimeout(whoTimer);
+});
+document.addEventListener("pointerout", (e) => {
+  if (e.pointerType !== "touch" && whoPop && chipAt(e.target) === whoPop.chip && !whoPop.contains(e.relatedTarget) && chipAt(e.relatedTarget) !== whoPop.chip) hideWhoSoon();
+});
+document.addEventListener("focusin", (e) => {
+  const chip = chipAt(e.target);
+  if (chip && chip !== quietChip && e.target.matches(":focus-visible")) openWho(chip);
+  if (chip !== quietChip) quietChip = null;
+});
+document.addEventListener("focusout", (e) => {
+  if (whoPop && (chipAt(e.target) === whoPop.chip || whoPop.contains(e.target))
+      && !whoPop.contains(e.relatedTarget) && chipAt(e.relatedTarget) !== whoPop.chip) hideWhoSoon();
+});
+// keyboard: arrow down from the reaction goes into the list, arrows move, Esc or Tab goes back to the reaction
+document.addEventListener("keydown", (e) => {
+  if (!whoPop && e.key === "ArrowDown" && chipAt(e.target)) { e.preventDefault(); openWho(chipAt(e.target)); }
+  if (!whoPop) return;
+  const rows = [...whoPop.querySelectorAll(".person")], i = rows.indexOf(document.activeElement);
+  if (e.key === "Escape") { e.preventDefault(); e.stopPropagation(); closeWho(whoPop.contains(document.activeElement)); }   // only the list, not the panel too
+  else if (e.key === "ArrowDown" && chipAt(e.target) === whoPop.chip && rows.length) { e.preventDefault(); rows[0].focus(); }
+  else if (i >= 0 && (e.key === "ArrowDown" || e.key === "ArrowUp")) {
+    e.preventDefault();
+    if (e.key === "ArrowUp" && i === 0) whoPop.chip.focus(); else rows[Math.min(rows.length - 1, i + (e.key === "ArrowDown" ? 1 : -1))].focus();
+  } else if (i >= 0 && e.key === "Tab") { e.preventDefault(); whoPop.chip.focus(); }
+}, true);
+// phones: press and hold a reaction for the list; a plain tap still adds or removes yours
+document.addEventListener("pointerdown", (e) => {
+  if (whoPop && !whoPop.contains(e.target) && chipAt(e.target) !== whoPop.chip) closeWho();
+  const chip = e.pointerType === "touch" && chipAt(e.target);
+  clearTimeout(pressTimer); pressedOpen = false;
+  if (chip) { pressStart = [e.clientX, e.clientY]; pressTimer = setTimeout(() => { pressedOpen = true; openWho(chip); }, 450); }
+});
+["pointerup", "pointercancel"].forEach((t) => document.addEventListener(t, () => clearTimeout(pressTimer)));
+document.addEventListener("pointermove", (e) => {   // a finger always wobbles a little: only a real move cancels the hold
+  if (e.pointerType === "touch" && pressTimer && Math.hypot(e.clientX - pressStart[0], e.clientY - pressStart[1]) > 10) clearTimeout(pressTimer);
+});
+document.addEventListener("contextmenu", (e) => { if (chipAt(e.target)) e.preventDefault(); });
+document.addEventListener("scroll", (e) => { if (whoPop && !whoPop.contains(e.target)) closeWho(); }, true);
+// new reactions arrive while the list is open: follow the re-rendered chip, or close if the reaction is gone
+new MutationObserver(() => {
+  if (!whoPop) return;
+  const { mid, react } = whoPop.chip.dataset;
+  const pane = whoPop.pane.isConnected || whoPop.pane === document ? whoPop.pane : document;
+  const chip = whoPop.chip.isConnected ? whoPop.chip
+    : pane.querySelector(`.rchip[data-mid="${mid}"][data-react="${CSS.escape(react)}"]`);
+  const r = chip && reactionAt(chip);
+  if (!r) return closeWho();
+  if (chip !== whoPop.chip || r.by.map((b) => b.id).join(",") !== whoPop.sig) openWho(chip);
+}).observe(document.body, { childList: true, subtree: true });
 const recentEmoji = () => { try { return JSON.parse(store.get("emoji-recent") || "[]"); } catch { return []; } };
 let reactPop = null;
 function closeReactPicker() { if (reactPop) { reactPop.remove(); reactPop = null; document.removeEventListener("mousedown", reactOutside, true); } }
@@ -2328,7 +2540,8 @@ document.addEventListener("click", (e) => {
   const rpick = e.target.closest("[data-react-pick]");
   if (rpick) { openReactPicker(rpick, Number(rpick.dataset.reactPick)); return; }
   const rchip = e.target.closest("[data-react]");
-  if (rchip) { if (!rchip.disabled) toggleReaction(Number(rchip.dataset.mid), rchip.dataset.react); return; }
+  if (rchip) { if (pressedOpen) { pressedOpen = false; return; }   // that was a long press: it opened the list
+    if (!rchip.disabled) toggleReaction(Number(rchip.dataset.mid), rchip.dataset.react); return; }
   const edit = e.target.closest("[data-edit]");
   if (edit) { startEdit(Number(edit.dataset.edit), edit.dataset.where); return; }
   if (e.target.closest("[data-edit-save]")) { saveEdit(); return; }
@@ -2601,7 +2814,8 @@ function attachAssist(host, input, autosize) {
         .map(([, c]) => ({ insert: `#${c.name} `, html: `<span class="glyph">${c.kind === "private" ? LOCK : "#"}</span><span>${esc(c.name)}</span>` +
           (c.description ? `<small>${esc(c.description.length > 40 ? c.description.slice(0, 39) + "…" : c.description)}</small>` : "") }));
     } else {
-      const people = (await loadPeople()).filter((p) => !p.disabled && p.id !== state.me.id);
+      const members = state.current ? await loadMemberIds(state.current) : new Set();   // only people in this channel
+      const people = (await loadPeople()).filter((p) => !p.disabled && p.id !== state.me.id && members.has(p.id));
       const tags = state.current && state.current.kind !== "dm"
         ? ["all", "agents", "humans"].filter((g) => !q || g.startsWith(q)).map((g) => ({ insert: `@${g} `,
             html: `<span class="glyph">@</span><span>${g}</span><small>${esc(GROUP_TAGS[g])}</small>` })) : [];
@@ -2978,9 +3192,10 @@ async function openMembers() {
   hydrate($("panel-scroll"));
   if ($("member-add")) $("member-add").onclick = () => pick("Add to " + c.name,
     (p) => !p.disabled && !members.some((m) => m.id === p.id),
-    async (p) => { await api("POST", `/channels/${c.id}/members`, { body: { principal_id: p.id } }); openMembers(); });
+    async (p) => { await api("POST", `/channels/${c.id}/members`, { body: { principal_id: p.id } }); memberIds.delete(c.id); openMembers(); });
   $("panel-scroll").querySelectorAll("[data-remove]").forEach((b) => b.onclick = async () => {
     const r = await api("DELETE", `/channels/${c.id}/members/${b.dataset.remove}`);
+    memberIds.delete(c.id);
     if (r.left) { closePanel(); await refreshChannels(); const first = state.channels[0]; if (first) openChannel(first.id); }
     else openMembers();
   });
@@ -3018,6 +3233,7 @@ function profileSuspend(p) {
     ${s.via ? "" : `<button class="linkish" id="prof-unsuspend">Unsuspend</button>`}</div>`;
 }
 async function openProfile(id) {
+  closeWho();
   state.panel = { type: "profile", id };
   openPanel("profile", "Profile", "");
   $("panel-scroll").innerHTML = `<div class="empty">Loading…</div>`;