@nanocollective/roster 0.1.0-alpha.47 → 0.1.0-alpha.49

package/package.json

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

package/templates/portal/css/home.css

@@ -60,27 +60,16 @@
   .homerunwhat{grid-area:what}.homerunlog{grid-area:log}
 }
 
-.homerow{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;padding:8px 2px;
-         border-bottom:1px solid var(--line);font-size:13px}
-.homerow .homeopen{font-weight:500;font-size:13.5px}
-.homelist{display:grid;grid-template-columns:auto 1fr;align-items:start;gap:4px 12px}
-.homelist > .chip{margin-top:2px}
-.homelist .meta{margin-top:3px}
-.homeclick{cursor:pointer;border-radius:8px;padding-left:8px;padding-right:8px;margin:0 -8px}
-.homeclick:hover{background:var(--hover)}
-.homeclick:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
-.homeclosed{display:grid;grid-template-columns:1fr auto;align-items:center;gap:4px 14px}
-.homeclosed .meta{margin-top:3px}
 .homerest{margin-top:26px}
-.homecard.gone,.homerow.gone{opacity:0;transform:translateX(12px);
+.homecard.gone,.homeline.gone{opacity:0;transform:translateX(12px);
          transition:opacity .2s var(--ease),transform .2s var(--ease)}
 
 /* Activity you have not seen, as Trackers marks it: a blue edge and a bold title. Opening the
    thread marks it read, here and on GitHub. */
 .homecard.unread{box-shadow:inset 3px 0 0 var(--blue)}
-.homerow.unread{box-shadow:inset 3px 0 0 var(--blue);background:color-mix(in srgb,var(--blue) 6%,transparent)}
-.unread .homeopen{font-weight:700}
-.unread .homeopen::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;
+.homeline.unread{box-shadow:inset 3px 0 0 var(--blue);margin:0 -16px;padding-left:13px;padding-right:16px}
+.unread .homeopen,.unread .homerowtitle{font-weight:700}
+.unread .homeopen::before,.unread .homerowtitle::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;
          background:var(--blue);margin:0 7px 1px 0;vertical-align:middle}
 
 .homereports{display:flex;flex-direction:column;gap:14px;padding:14px 16px}
@@ -93,3 +82,12 @@
 @media (max-width:640px){
   .homehead{flex-wrap:wrap}
 }
+
+/* Rows in a list card (Unread, Your requests, Closed today) that open a thread. */
+.homeline{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;
+         padding:12px 0;font-size:13.5px;cursor:pointer}
+.homeline + .homeline{border-top:1px solid var(--line)}
+.homeline .homestate{min-width:64px;justify-content:center}
+.homeline:hover .homerowtitle{text-decoration:underline}
+.homeline:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
+.homerowtitle{font-weight:600;color:var(--ink)}

package/templates/portal/js/views/home.js

@@ -75,7 +75,7 @@ export function viewHome(m) {
 
   if (h.unread.length) {
     page.append(section("Unread", h.unread.length));
-    for (const e of h.unread) page.append(unreadRow(e));
+    page.append(listBox(h.unread.map(unreadRow)));
   }
 
   page.append(section("Working now"));
@@ -83,12 +83,12 @@ export function viewHome(m) {
 
   if (h.requests.length) {
     page.append(section("Your requests", h.requests.length));
-    for (const e of h.requests) page.append(requestRow(e));
+    page.append(listBox(h.requests.map(requestRow)));
   }
 
   if (h.closedToday.length) {
     page.append(section("Closed today", h.closedToday.length));
-    for (const e of h.closedToday) page.append(closedRow(e));
+    page.append(listBox(h.closedToday.map(closedRow)));
   }
 
   page.append(rest(h));
@@ -247,7 +247,7 @@ async function act(note, actions, payload, ok) {
     await post(payload);
     note.textContent = ok;
     // Done is done: the card goes now, rather than when GitHub next answers.
-    const card = actions.closest?.(".homecard, .homerow");
+    const card = actions.closest?.(".homecard, .homeline");
     if (card) {
       card.classList.add("gone");
       setTimeout(() => card.remove(), 220);
@@ -373,7 +373,39 @@ function poll() {
 
 /* ------------------------------ your requests ---------------------------- */
 
-const STATUS = { waiting: "Waiting", working: "Being worked on", answered: "Answered" };
+/** A card of rows, laid out like Working now. */
+function listBox(rows) {
+  return el("div", { className: "card homeworking" }, rows);
+}
+
+/**
+ * One row in a list card: a status chip, the title with one line under it, and a button on the
+ * right. The whole row opens the thread, except the button.
+ */
+function listRow(e, { chip, tone = "", sub, action = null }) {
+  const row = el(
+    "div",
+    { className: "homeline homeclick" + (e.item.unread ? " unread" : ""), tabIndex: 0, role: "button" },
+    [
+      el("span", { className: "chip homestate " + tone, textContent: chip }),
+      el("div", { className: "homerunwhat" }, [
+        el("div", { className: "homerowtitle", textContent: e.item.title }),
+        el("div", { className: "homerunsub", textContent: `${whereOf(e)} · ${sub}` }),
+      ]),
+      el("div", { className: "homerunlog" }, action ? [action] : []),
+    ],
+  );
+  row.onclick = (ev) => {
+    if (!ev.target.closest("button, a")) openThread(e.item);
+  };
+  row.onkeydown = (ev) => {
+    if (ev.target === row && (ev.key === "Enter" || ev.key === " ")) {
+      ev.preventDefault();
+      openThread(e.item);
+    }
+  };
+  return row;
+}
 
 const WHY = {
   status: "Status",
@@ -386,58 +418,34 @@ const WHY = {
 
 /** Something on a staff member's tracker, or elsewhere, with activity you have not seen. */
 function unreadRow(e) {
-  return clickable(e.item, "homerow homelist", [
-    el("span", { className: "chip", textContent: WHY[e.why] ?? "Issue" }),
-    el("div", {}, [
-      openLink(e.item),
-      el("div", { className: "meta", textContent: whereOf(e) + " · " + ago(e.item.updatedAt) }),
-    ]),
-  ]);
+  return listRow(e, {
+    chip: WHY[e.why] ?? "Issue",
+    tone: "cool",
+    sub: ago(e.item.updatedAt),
+  });
 }
 
-function requestRow(e) {
-  return clickable(e.item, "homerow homelist", [
-    el("span", {
-      className: "chip " + (e.status === "answered" ? "cool" : e.status === "working" ? "warm" : ""),
-      textContent: STATUS[e.status],
-    }),
-    el("div", {}, [
-      openLink(e.item),
-      el("div", { className: "meta", textContent: whereOf(e) + " · " + ago(e.item.updatedAt) }),
-    ]),
-  ]);
-}
+const STATUS = { waiting: "Waiting", working: "Working", answered: "Answered" };
 
-/** A row that opens its thread from anywhere on it, except a button inside it. */
-function clickable(item, className, kids) {
-  const row = el(
-    "div",
-    { className: className + " homeclick" + (item.unread ? " unread" : ""), tabIndex: 0, role: "button" },
-    kids,
-  );
-  row.onclick = (ev) => {
-    if (!ev.target.closest("button, a")) openThread(item);
-  };
-  row.onkeydown = (ev) => {
-    if (ev.target === row && (ev.key === "Enter" || ev.key === " ")) {
-      ev.preventDefault();
-      openThread(item);
-    }
-  };
-  return row;
+function requestRow(e) {
+  return listRow(e, {
+    chip: STATUS[e.status],
+    tone: e.status === "answered" ? "cool" : e.status === "working" ? "ok" : "",
+    sub: ago(e.item.updatedAt),
+  });
 }
 
 function closedRow(e) {
   const note = el("span", { className: "meta" });
-  const reopen = button("Reopen", false, () => act(note, row, { action: "reopen", repo: e.item.repo, number: e.item.number }, "Reopened."));
-  const row = clickable(e.item, "homerow homeclosed", [
-    el("div", {}, [
-      openLink(e.item),
-      el("div", { className: "meta", textContent: whereOf(e) + " · " + (e.reason || "No reason given.") }),
-    ]),
-    el("div", { className: "row" }, [note, reopen]),
-  ]);
-  return row;
+  const reopen = button("Reopen", false, () =>
+    act(note, holder, { action: "reopen", repo: e.item.repo, number: e.item.number }, "Reopened."),
+  );
+  const holder = el("div", { className: "row" }, [note, reopen]);
+  return listRow(e, {
+    chip: "Closed",
+    sub: e.reason || "No reason given.",
+    action: holder,
+  });
 }
 
 /* --------------------------------- rest --------------------------------- */