@nanocollective/roster 0.1.0-alpha.5 → 0.1.0-alpha.50

package/templates/portal/js/views/inbox.js

@@ -1,9 +1,9 @@
 /* The inbox: everything open across the org, and the thread beside it. */
 
 import { getLabels, getPr, getThread, post, upload } from "../api.js";
-import { askText } from "../dialog.js";
+import { askText, askYes } from "../dialog.js";
 import { ago, el, esc, markCurrent, skeleton } from "../dom.js";
-import { icon, iconHTML } from "../icons.js";
+import { icon, iconHTML, staffIcon } from "../icons.js";
 import { mdlite } from "../md.js";
 import { attachMentions } from "../mention.js";
 import { ensureInbox, refreshAll, stampCounts } from "../refresh.js";
@@ -92,6 +92,10 @@ export function belongsTo(item, s) {
   return false;
 }
 
+/* Threads read so far, by repo#number, kept for the session. Each is reused while its
+   updatedAt matches the list's, so a thread is fetched again only when it has changed. */
+const THREADS = new Map();
+
 export const viewInbox = (m) => inboxScreen(m, {});
 
 /**
@@ -104,16 +108,36 @@ export const viewInbox = (m) => inboxScreen(m, {});
  */
 export const viewPrs = (m) => inboxScreen(m, { prs: true });
 
+/**
+ * One thread, drawn into `host` on its own: the header, its actions, the reply box and the
+ * conversation, with no list beside it. Home opens a card this way, in a side sheet.
+ *
+ * It is the same screen as Trackers, built off-page, with only its viewer kept. Replying,
+ * closing and merging repaint a list nobody can see and then reopen this thread, which is
+ * what they do on Trackers too.
+ */
+export function threadInto(host, ref) {
+  /* Read fresh. Home can be minutes behind GitHub, and the reason to open something is usually
+     to read the reply that made its row change. Reading it again also brings the row up to
+     date, so Home is right when the sheet closes. */
+  const item = (S.inbox?.items ?? []).find((i) => i.repo === ref.repo && i.number === ref.number);
+  if (item) {
+    THREADS.delete(item.repo + "#" + item.number);
+    item.partial = true;
+  }
+  host.append(inboxScreen(el("div"), { prs: ref.kind === "pr", only: ref }));
+}
+
 function inboxScreen(m, opts) {
   /* "Pending work", not "Pull requests". Every one of these is a piece of work a staff member
      has finished and cannot land on their own, which is the thing you are being asked about.
      That it arrives as a pull request is how it is delivered, not what it is. */
-  m.append(el("h1", { textContent: opts.prs ? "Pending work" : "Inbox" }));
+  m.append(el("h1", { textContent: opts.prs ? "Pending work" : "Trackers" }));
   const sub = el("p", {
     className: "sub",
     textContent: opts.prs
       ? "Work the staff have finished and cannot land themselves."
-      : "Everything open across the org. Pull requests are in Pending work.",
+      : "Every issue on each staff member's tracker and the product repos. What needs you is on Home.",
   });
   m.append(sub);
 
@@ -122,37 +146,25 @@ function inboxScreen(m, opts) {
     placeholder: "Filter by title, label, repo…",
     value: S.query,
   });
-  const scope = el("select");
-  scope.append(
-    el("option", { value: "", textContent: "Everything" }),
-    el("option", { value: "mine", textContent: "On " + humanLabel() }),
-    // A decision is not a PR, so this one is only ever worth offering on the inbox.
-    ...(opts.prs ? [] : [el("option", { value: "decision", textContent: "Decisions" })]),
-  );
-  scope.value = opts.prs && S.inboxFilter !== "mine" ? "" : S.inboxFilter;
-
-  /* Open only by default. An inbox is what is waiting on somebody, and burying that under
-     five months of finished work would be answering a different question. */
-  const state = el("select", { title: "Which items to list" });
-  state.append(
-    el("option", { value: "", textContent: "Open" }),
-    el("option", { value: "closed", textContent: "Recently closed" }),
-    el("option", { value: "all", textContent: "Open and closed" }),
-  );
-  state.value = S.inboxState;
-
-  const whose = el("select", {
-    title: "Whose work: their brain repo, anything their bot wrote, and anything addressed to them",
-  });
-  whose.append(
-    el("option", { value: "", textContent: "Everyone" }),
-    ...S.data.staff.map((s) => el("option", { value: s.handle, textContent: s.name })),
-  );
-  whose.value = S.inboxStaff;
+  /* Open or closed, as a toggle. Who and what (a staff member, what is on you, decisions)
+     moved to the sidebar under Inbox, where a row of dropdowns used to be. */
+  if (S.inboxState === "all") S.inboxState = "";
+  const toggle = el("div", { className: "modes inboxstate" });
+  for (const [value, label] of [["", "Open"], ["closed", "Closed"]]) {
+    const b = el("button", { className: "mode", textContent: label });
+    b.classList.toggle("on", (S.inboxState || "") === value);
+    b.onclick = () => {
+      S.inboxState = value;
+      for (const x of toggle.children) x.classList.toggle("on", x === b);
+      writeHash(false);
+      paint();
+    };
+    toggle.append(b);
+  }
 
   const refresh = el("button", { className: "iconbtn", title: "Refresh from GitHub" });
   refresh.innerHTML = '<span class="sync">' + iconHTML("refresh") + "</span>";
-  const controls = [search, whose, state, scope, refresh];
+  const controls = [search, toggle, refresh];
   // A pull request comes from a branch, so there is nothing here that could open one.
   if (!opts.prs) {
     const newBtn = el("button", { className: "ghbtn", textContent: "New issue" });
@@ -162,7 +174,7 @@ function inboxScreen(m, opts) {
     };
     controls.push(newBtn);
   }
-  m.append(el("div", { className: "row", style: "margin-bottom:16px" }, controls));
+  m.append(el("div", { className: "row inboxbar", style: "margin-bottom:16px" }, controls));
 
   const split = el("div", { className: "split" });
   const list = el("div", { className: "tree" });
@@ -171,16 +183,18 @@ function inboxScreen(m, opts) {
   m.append(split);
 
   search.oninput = () => { S.query = search.value; writeHash(false); paint(); };
-  scope.onchange = () => { S.inboxFilter = scope.value; writeHash(false); paint(); };
-  whose.onchange = () => { S.inboxStaff = whose.value; writeHash(false); paint(); };
-  state.onchange = () => { S.inboxState = state.value; writeHash(false); paint(); };
   refresh.onclick = () => { refresh.classList.add("spin"); load(true); };
 
   if (S.inbox) { stampCounts(); paint(); restore(); } else load(false);
+  if (opts.only) return viewer;
 
   /** A `?t=` in the URL names a thread. It used to be read into the state and then never
       acted on, because only the already-loaded branch opened one. */
   function restore() {
+    if (opts.only) {
+      openThread(opts.only);
+      return;
+    }
     if (!S.inboxOpen) return;
     // The two screens share one open thread, and each holds half the org. Whatever was open on
     // the other one is not in this list, so it is dropped rather than opened beside it.
@@ -245,12 +259,22 @@ function inboxScreen(m, opts) {
     // "On you" is on any of the humans this org answers to, not only the first one.
     const onAHuman = (i) => (i.assignees ?? []).some(isHuman);
 
-    const whoseStaff = S.inboxStaff ? S.data.staff.find((s) => s.handle === S.inboxStaff) : null;
+    // The sidebar's filters are the inbox's. Pending work has no control for them, so it ignores them.
+    const staffPick = opts.prs ? "" : S.inboxStaff;
+    // "Issues" is the product repos: every repo a staff member works in.
+    const products = new Set(S.data.staff.flatMap((s) => s.worksIn ?? []));
+    const issuesOnly = staffPick === "@issues";
+    const unreadOnly = staffPick === "@unread";
+    const whoseStaff = staffPick && !issuesOnly ? S.data.staff.find((s) => s.handle === staffPick) : null;
     /* The two screens partition the org rather than overlap on it. Pending work is every pull
        request; the inbox is everything else. An inbox that also listed the PRs said the same
        thing twice and made the badge beside it a number you could not act on. */
     const mine = S.inbox.items
-      .filter((i) => belongsTo(i, whoseStaff))
+      /* A staff member's link is their tracker: what is in their repo, whoever filed it. Matching
+         on who filed or was named put an issue the CMO filed for the CTO under both of them. */
+      .filter((i) =>
+        unreadOnly ? Boolean(i.unread) : issuesOnly ? products.has(i.repo) : !whoseStaff || i.repo === whoseStaff.brain,
+      )
       .filter((i) => (i.kind === "pr") === !!opts.prs);
     const isOpen = (i) => i.state === "OPEN";
     const scoped = mine.filter(
@@ -261,8 +285,9 @@ function inboxScreen(m, opts) {
       (i) => !q || (i.title + " " + i.repo + " " + i.labels.join(" ") + " #" + i.number)
         .toLowerCase().includes(q),
     );
-    if (S.inboxFilter === "mine") items = items.filter(onAHuman);
-    else if (S.inboxFilter === "decision") items = items.filter((i) => i.labels.includes("decision"));
+    const filter = opts.prs ? "" : S.inboxFilter;
+    if (filter === "mine") items = items.filter(onAHuman);
+    else if (filter === "decision") items = items.filter((i) => i.labels.includes("decision"));
     /* `s=pr` was the inbox's "Open work (PRs)" scope, and Pending work is now that screen. An
        old bookmark carrying it is ignored rather than honoured into an empty list. */
 
@@ -298,9 +323,15 @@ function inboxScreen(m, opts) {
       list.append(el("div", { className: "tdir err", textContent: e }));
     }
 
-    // Newest first, flat. Grouping by repo buried a fresh comment under whichever project
-    // happened to sort first; the project moves onto the row instead.
-    items = items.slice().sort((a, b) => String(b.updatedAt).localeCompare(String(a.updatedAt)));
+    // Unread first, then newest first, flat. Grouping by repo buried a fresh comment under
+    // whichever project happened to sort first; the project moves onto the row instead.
+    items = items
+      .slice()
+      .sort(
+        (a, b) =>
+          Number(Boolean(b.unread)) - Number(Boolean(a.unread)) ||
+          String(b.updatedAt).localeCompare(String(a.updatedAt)),
+      );
     if (!items.length) {
       list.append(el("p", { className: "empty", textContent: "Nothing matches." }));
       return;
@@ -308,7 +339,7 @@ function inboxScreen(m, opts) {
 
     for (const i of items) {
       const shutState = i.state === "MERGED" ? "merged" : i.state === "OPEN" ? "" : "closed";
-      const b = el("button", { className: "irow" + (shutState ? " shut" : "") });
+      const b = el("button", { className: "irow" + (shutState ? " shut" : "") + (i.unread ? " unread" : "") });
       const yours = onAHuman(i);
       const chips = i.labels
         .slice(0, 3)
@@ -335,9 +366,9 @@ function inboxScreen(m, opts) {
             : "") +
           // How much conversation is on a thread, which is most of what tells a live one from
           // something that was filed and never answered.
-          (i.comments.length
-            ? '<span class="cc" title="' + i.comments.length + ' comments">' +
-              iconHTML("review") + i.comments.length + "</span>"
+          ((i.commentCount ?? i.comments.length)
+            ? '<span class="cc" title="' + (i.commentCount ?? i.comments.length) + ' comments">' +
+              iconHTML("review") + (i.commentCount ?? i.comments.length) + "</span>"
             : "") +
           chips +
           '<span class="when">' + ago(i.updatedAt) + "</span>" +
@@ -367,22 +398,63 @@ function inboxScreen(m, opts) {
     }
     const row = list.querySelector('[data-ref="' + item.repo + "#" + item.number + '"]');
     if (row) markCurrent(list, row);
+    // Opening it is reading it: cleared here at once, and on GitHub in the background.
+    if (item.unread) {
+      const thread = item.unread.thread;
+      item.unread = null;
+      row?.classList.remove("unread");
+      stampCounts();
+      post({ thread, ref: item.repo + "#" + item.number }, "/api/notifications/read").catch(() => {});
+    }
+
+    /* The list carries no bodies or timelines (carrying them cost most of an hour's GitHub
+       allowance per load), so a thread is read when it is opened, and kept until GitHub says
+       it has changed. Reopening one costs nothing. */
+    if (item.partial) {
+      const key = item.repo + "#" + item.number;
+      const kept = THREADS.get(key);
+      const keep = { role: item.role, unread: item.unread };
+      if (kept && kept.updatedAt === item.updatedAt) {
+        Object.assign(item, kept, keep, { partial: false });
+      } else {
+        viewer.dataset.want = key;
+        viewer.replaceChildren(...skeleton("head", 1), ...skeleton("line", 8));
+        getThread(item.repo, item.number, item.kind)
+          .then((fresh) => {
+            if (!fresh || fresh.error) throw new Error(fresh?.error ?? "could not read it");
+            THREADS.set(key, fresh);
+            Object.assign(item, fresh, keep, { partial: false });
+          })
+          .catch((e) => {
+            item.partial = false;
+            item.loadError = String(e.message || e);
+          })
+          .finally(() => {
+            // Somebody may have opened another thread while this one was loading.
+            if (viewer.dataset.want === key) openThread(ref);
+          });
+        return;
+      }
+    }
 
     const head = el("div", { className: "thead" });
     head.innerHTML =
       '<div class="meta">' + esc(item.repo) + " · " + (item.kind === "pr" ? "PR " : "") + "#" + item.number +
         ' · <span class="' + (item.state === "OPEN" ? "ok" : "") + '">' + esc(item.state) + "</span>" +
-        " · " + esc(item.author) + " · " + ago(item.updatedAt) + "</div>" +
+        " · " + esc(item.author) + " · " + ago(item.updatedAt) +
+        // The labels sit on this line, after the time, rather than taking a line of their own.
+        (item.labels.length
+          ? '<span class="tmetalabels">' +
+            item.labels.map((l) => '<span class="chip ' + tone(l) + '">' + esc(l) + "</span>").join("") +
+            "</span>"
+          : "") +
+        "</div>" +
       "<h3>" + esc(item.title) + "</h3>" +
       (item.mergeable === "CONFLICTING"
         ? '<p class="tconflict">This branch conflicts with its base and cannot be merged ' +
           "until someone rebases or merges the base into it.</p>"
         : "") +
-      (item.labels.length
-        ? '<div class="row tlabels">' +
-          item.labels.map((l) => '<span class="chip ' + tone(l) + '">' + esc(l) + "</span>").join("") +
-          "</div>"
-        : "");
+      "";
     head.append(threadActions(item));
     delete viewer.dataset.wait;
     viewer.replaceChildren(head);
@@ -393,6 +465,11 @@ function inboxScreen(m, opts) {
        for a wrapper that would only ever hold one thing. */
     const pane = item.kind === "pr" ? el("div") : viewer;
     if (item.kind === "pr") viewer.append(prTabs(item, pane), pane);
+    if (item.loadError) {
+      pane.append(el("p", { className: "err", textContent: "Couldn't load the conversation: " + item.loadError }));
+      delete item.loadError;
+      item.partial = true; // so opening it again tries again
+    }
     conversation(pane, item);
     viewer.scrollTop = 0;
   }
@@ -575,10 +652,11 @@ function inboxScreen(m, opts) {
       status.textContent = msg ?? "";
       status.className = "meta";
     };
+    // busy(false) clears the status line, so it goes first: the other way round wiped the
+    // error as it was written, and a refused merge looked like nothing happening at all.
     const failed = (e) => {
-      status.textContent = e.message;
-      status.className = "meta err";
       busy(false);
+      status.textContent = e.message;
       status.className = "meta err";
     };
 
@@ -673,7 +751,20 @@ function inboxScreen(m, opts) {
           body: body || undefined,
         });
         DRAFTS.delete(key);
-        await refreshAll(false);
+        /* What changed is known, so it is changed here rather than re-reading every repo,
+           which redrew the whole inbox for one issue. The next refresh confirms it. */
+        const me = humansOf()[0]?.github ?? "you";
+        const now = new Date().toISOString();
+        item.events = [
+          ...(item.events ?? []),
+          ...(body ? [{ type: "comment", actor: me, createdAt: now, body }] : []),
+          { type: closing ? "closed" : "reopened", actor: me, createdAt: now },
+        ];
+        item.state = closing ? "CLOSED" : "OPEN";
+        item.updatedAt = now;
+        stampCounts();
+        paint();
+        openThread({ repo: item.repo, number: item.number, kind: item.kind });
       } catch (e) { failed(e); }
     };
     buttons.push(closeBtn);
@@ -693,11 +784,20 @@ function inboxScreen(m, opts) {
         merge.title = "This branch conflicts with its base";
       }
       merge.onclick = async () => {
-        if (!confirm("Merge " + item.repo + " #" + item.number + " into its base branch?")) return;
+        const yes = await askYes({
+          title: "Merge " + item.repo + " #" + item.number + " into its base branch?",
+          confirm: "Merge",
+        });
+        if (!yes) return;
         busy(true, "merging…");
         try {
           await post({ action: "merge", repo: item.repo, number: item.number });
-          await refreshAll(false);
+          // As with closing: the change is known, so it is made here rather than re-reading every repo.
+          item.state = "MERGED";
+          item.updatedAt = new Date().toISOString();
+          stampCounts();
+          paint();
+          openThread({ repo: item.repo, number: item.number, kind: item.kind });
         } catch (e) { failed(e); }
       };
       buttons.push(merge);
@@ -727,7 +827,12 @@ function inboxScreen(m, opts) {
         const at = S.inbox.items.findIndex(
           (i) => i.repo === item.repo && i.number === item.number,
         );
-        if (at >= 0) S.inbox.items[at] = { ...S.inbox.items[at], ...fresh };
+        if (at >= 0) {
+          const old = S.inbox.items[at];
+          THREADS.set(item.repo + "#" + item.number, fresh);
+          // A single thread does not know which part of the org it is in, or whether it is unread.
+          S.inbox.items[at] = { ...old, ...fresh, role: old.role, unread: old.unread, partial: false };
+        }
       }
     } catch {
       /* the comment posted; a stale pane is not worth an error */
@@ -763,6 +868,19 @@ function inboxScreen(m, opts) {
  * you are still typing and the button has to stay as it was; once it closes there is a request
  * in flight against GitHub that can take seconds, and that is what needs saying.
  */
+/**
+ * Who a reply is for, by default: the staff member whose tracker the issue is on, or whose App
+ * opened it. They are only woken by an @mention, so a reply without one reached nobody.
+ */
+export function addressee(item) {
+  const staff = S.data?.staff ?? [];
+  const s =
+    staff.find((x) => x.brain === item.repo) ??
+    staff.find((x) => (x.soloBots ?? []).includes(item.author));
+  if (!s) return "";
+  return (s.mention || "@" + s.handle) + " ";
+}
+
 async function openReply(item, anchor, onSend) {
   const key = item.repo + "#" + item.number + (anchor ? " · " + anchor.path : "");
   let deaf = null;
@@ -771,7 +889,7 @@ async function openReply(item, anchor, onSend) {
     title: "Reply to " + item.repo + " #" + item.number,
     hint: anchor ? anchor.path : item.title,
     confirm: "Comment",
-    value: DRAFTS.get(key) ?? "",
+    value: DRAFTS.get(key) ?? addressee(item),
     /* It goes out through whoever's `gh` is signed in here, which is only knowably one person
        when the org has one. With two it would be a guess, and a wrong name on a reply box is
        worse than no name. */
@@ -782,6 +900,10 @@ async function openReply(item, anchor, onSend) {
         else DRAFTS.delete(key);
       };
       deaf = deafNote(ta, item, anchor);
+      // Typing starts after the @mention, not in front of it.
+      setTimeout(() => {
+        ta.selectionStart = ta.selectionEnd = ta.value.length;
+      }, 0);
       return el("div", {}, [attachBox(ta, () => item.repo).node, deaf.node]);
     },
   });
@@ -1050,15 +1172,36 @@ function xref(source, item, openThread) {
   return b;
 }
 
+/* Who wrote something, as a person would say it: a staff member by their role, with their
+   icon; one of the humans by name; anyone else by their login. */
+function whoWrote(login) {
+  const s = (S.data?.staff ?? []).find((x) => (x.soloBots ?? []).includes(login));
+  if (s) return { name: s.name, glyph: staffIcon(s), kind: "staff" };
+  if (isHuman(login)) {
+    const h = humansOf().find((x) => x.github === login);
+    return { name: h?.name ?? login, glyph: "person", kind: "human" };
+  }
+  return { name: login || "?", glyph: "person", kind: "other" };
+}
+
+/* A comment is a card: a header strip saying who and when, then what they said. As text
+   between thin rules, it was hard to see where one message ended and the next began. */
 function comment({ author, when, body, first, repo, badge, reactions }) {
-  const d = el("div", { className: "cmt" + (first ? " first" : "") });
-  const meta = el("div", { className: "meta" });
-  meta.append((author || "?") + " · " + new Date(when).toLocaleString());
-  if (badge) meta.append(el("span", { className: "pill", style: "margin-left:8px", textContent: badge }));
-  d.append(meta);
-  d.append(el("div", { className: "md cbody", innerHTML: mdlite(body || "_no description_", { repo }) }));
+  const who = whoWrote(author);
+  const d = el("div", { className: "cmt " + who.kind + (first ? " first" : "") });
+  const head = el("div", { className: "chead" });
+  head.append(icon(who.glyph, "ic"), el("b", { textContent: who.name }));
+  if (who.name !== author && author) head.append(el("span", { className: "clogin", textContent: author }));
+  if (badge) head.append(el("span", { className: "pill", textContent: badge }));
+  head.append(
+    el("span", { className: "cwhen", title: new Date(when).toLocaleString(), textContent: ago(when) }),
+  );
+  d.append(head);
+  const bodyEl = el("div", { className: "cbodywrap" });
+  bodyEl.append(el("div", { className: "md cbody", innerHTML: mdlite(body || "_no description_", { repo }) }));
   const marks = reactionRow(reactions);
-  if (marks) d.append(marks);
+  if (marks) bodyEl.append(marks);
+  d.append(bodyEl);
   return d;
 }
 
@@ -1206,9 +1349,22 @@ function newIssueForm(viewer) {
         body: body.value,
         labels: picked.chosen(),
       });
-      status.innerHTML =
-        'created · <a href="' + esc(r.url ?? "") + '" target="_blank" rel="noopener">open it</a>';
-      await refreshAll(true);
+      /* The form is done once GitHub has the issue. What you sent is shown as what it now is,
+         a thread in the inbox, open and selected, rather than a link out to github.com beside
+         a form still holding what you typed. The filters are set so its row is on the list. */
+      const number = Number(String(r.url ?? "").match(/\/issues\/(\d+)/)?.[1]);
+      S.inboxOpen = number ? { repo: s.brain, number, kind: "issue" } : null;
+      S.inboxState = "";
+      S.inboxFilter = "";
+      S.query = "";
+      if (S.inboxStaff && S.inboxStaff !== s.handle) S.inboxStaff = s.handle;
+      writeHash(false);
+      status.textContent = "sent · opening it…";
+      // It is sent either way. A refresh that fails must not read as a send that failed.
+      await refreshAll(false).catch(() => {
+        status.textContent = "sent · refresh to see it";
+      });
+      return;
     } catch (e) {
       status.textContent = e.message;
       status.className = "meta err";