thurview 0.5.1 → 0.6.0

package/dist/ui/app.js

@@ -1067,6 +1067,7 @@
       );
       return;
     }
+    root.appendChild(interfaceDelta(doc.interfaces));
     const layout = h("div", { class: "doc-layout" });
     const toc = h(
       "nav",
@@ -1138,6 +1139,102 @@
     );
     docEl.querySelectorAll(".block.heading").forEach((el) => io.observe(el));
   }
+  var DELTA_BLOCK = "interface-delta";
+  var DELTA_SHOWN = 12;
+  var CHANGE_CLASS = {
+    removed: "del",
+    changed: "warn",
+    added: "ok"
+  };
+  function interfaceDelta(delta) {
+    const wrap = h("div", { class: "block ifd", "data-block": DELTA_BLOCK });
+    const threads = threadsFor((t) => t.type === "document" && t.blockId === DELTA_BLOCK);
+    if (threads.length) wrap.classList.add("has-threads");
+    const actions = h(
+      "div",
+      { class: "block-actions" },
+      h(
+        "button",
+        {
+          class: threads.length ? "count" : "",
+          title: "Comment on the interface delta",
+          onclick: (e) => {
+            if (state.viewingRevision !== null) return;
+            popover(commentPopover({ type: "document", blockId: DELTA_BLOCK }), {
+              x: e.pageX + 10,
+              y: e.pageY
+            });
+          }
+        },
+        threads.length ? String(threads.length) : "+"
+      )
+    );
+    const body = h("div", { class: "ifd-body" });
+    const toggle = h("span", { class: "heading-toggle" }, "hide");
+    toggle.addEventListener("click", () => {
+      const hidden = body.hidden;
+      body.hidden = !hidden;
+      toggle.textContent = hidden ? "hide" : "show";
+    });
+    const counts = delta ? ["removed", "changed", "added"].map((c) => [c, delta.entries.filter((e) => e.change === c).length]).filter(([, n]) => n > 0) : [];
+    wrap.appendChild(
+      h(
+        "div",
+        { class: "ifd-head" },
+        h("span", { class: "t" }, "Interface delta"),
+        counts.map(([c, n]) => h("span", { class: `badge ${CHANGE_CLASS[c]}` }, `${n} ${c}`)),
+        h("span", { class: "spacer" }),
+        toggle,
+        actions
+      )
+    );
+    body.appendChild(
+      h(
+        "p",
+        { class: "ifd-verdict" },
+        delta ? delta.verdict : "Unavailable: the code graph could not be built for these commits."
+      )
+    );
+    const entries = delta?.entries ?? [];
+    const rest = entries.slice(DELTA_SHOWN);
+    for (const e of entries.slice(0, DELTA_SHOWN)) body.appendChild(interfaceRow(e));
+    if (rest.length) {
+      const more = h(
+        "button",
+        {
+          class: "small ghost",
+          onclick: () => {
+            more.replaceWith(...rest.map(interfaceRow));
+          }
+        },
+        `show ${rest.length} more`
+      );
+      body.appendChild(more);
+    }
+    wrap.appendChild(body);
+    if (threads.length)
+      wrap.appendChild(h("div", { class: "thread-pins" }, threads.map(threadPinRow)));
+    return wrap;
+  }
+  function interfaceRow(e) {
+    return h(
+      "div",
+      {
+        class: `ifd-entry ifd-${e.change}`,
+        title: "Open in Files",
+        onclick: () => navigate("files", { path: e.file, line: e.line, side: e.graph })
+      },
+      h("span", { class: `badge ${CHANGE_CLASS[e.change]}` }, e.change),
+      h(
+        "div",
+        { class: "ifd-what" },
+        e.was ? h("div", { class: "ifd-was" }, h("code", null, e.was)) : null,
+        h("code", { class: "ifd-name" }, e.name),
+        e.capability ? h("div", { class: "ifd-cap" }, e.capability) : null
+      ),
+      h("span", { class: "ifd-where mono" }, `${e.file}:${e.line}`)
+    );
+  }
   function scrollToBlock(id) {
     const el = document.querySelector(`[data-block="${id}"]`);
     if (!el) return;