@nanocollective/roster 0.1.0-alpha.28 → 0.1.0-alpha.29

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nanocollective/roster",
-  "version": "0.1.0-alpha.28",
+  "version": "0.1.0-alpha.29",
   "description": "An agent-run org, powered by GitHub. Scaffold AI staff members whose brain is a repo.",
   "type": "module",
   "bin": {

package/templates/portal/index.html

@@ -35,6 +35,7 @@
       <span class="ic" data-icon="inbox"></span> Inbox
       <span class="n" id="inboxcount"></span>
     </button>
+    <div class="staffviews" id="inboxsub" hidden></div>
     <!-- "Pending work", not "Pull requests": what is behind it is finished work waiting on you,
          and the word for how it is delivered is not the word for what it is. -->
     <button class="nav" id="prsnav" data-view="prs" title="Finished work waiting on you to merge">

package/templates/portal/js/app.js

@@ -14,7 +14,7 @@ import {
   syncNotice,
 } from "./refresh.js";
 import { onRender } from "./router.js";
-import { ORG_WIDE, S, VIEWS, applyHash, readHash, writeHash } from "./state.js";
+import { ORG_WIDE, S, VIEWS, applyHash, humanLabel, readHash, writeHash } from "./state.js";
 import { viewBrain } from "./views/brain.js";
 import { viewChanged } from "./views/changed.js";
 import { viewDocs } from "./views/docs.js";
@@ -254,6 +254,7 @@ function initStaffFold() {
 }
 
 function paintSidebar() {
+  paintInboxLinks();
   const host = $("#stafflist");
   host.replaceChildren();
   paintedRoster = S.data.staff.map((s) => s.handle).join(" ");
@@ -315,7 +316,43 @@ function paintSidebar() {
 }
 
 /** Which rows are lit, and which staff member is unfolded. */
+/* The inbox's filters, as links under Inbox: everything, what is on you, decisions, then one
+   per staff member. They replaced two dropdowns on the Inbox screen itself. */
+function paintInboxLinks() {
+  const sub = $("#inboxsub");
+  if (!sub) return;
+  sub.replaceChildren();
+  const links = [
+    ["", "", "All"],
+    ["mine", "", "On " + humanLabel()],
+    ["decision", "", "Decisions"],
+    ...S.data.staff.map((s) => ["", s.handle, s.name]),
+  ];
+  for (const [filter, who, label] of links) {
+    const b = el("button", { className: "nav subnav inboxlink", textContent: label });
+    b.dataset.filter = filter;
+    b.dataset.who = who;
+    b.onclick = () => {
+      S.view = "inbox";
+      S.inboxFilter = filter;
+      S.inboxStaff = who;
+      S.inboxOpen = null;
+      render();
+    };
+    sub.append(b);
+  }
+}
+
 function markSidebar() {
+  const sub = $("#inboxsub");
+  if (sub) sub.hidden = S.view !== "inbox";
+  for (const b of document.querySelectorAll(".inboxlink")) {
+    const on =
+      S.view === "inbox" &&
+      b.dataset.filter === (S.inboxFilter || "") &&
+      b.dataset.who === (S.inboxStaff || "");
+    b.setAttribute("aria-current", String(on));
+  }
   for (const b of document.querySelectorAll(".nav")) {
     if (!b.dataset.view) continue;
     const mine = !b.dataset.staff || b.dataset.staff === S.staffHandle;

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

@@ -122,37 +122,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" });
@@ -171,9 +159,6 @@ 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);
@@ -245,7 +230,9 @@ 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;
+    const whoseStaff = staffPick ? 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. */
@@ -261,8 +248,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. */