Add basic coverage badge

Author: lsegal

src/coverage.css

@@ -75,6 +75,32 @@
   top: -1px;
 }
 
+.qlty-diff-badge {
+  display: inline-block;
+  vertical-align: middle;
+  border-radius: 6px;
+  color: #333;
+  font-size: 12px;
+  line-height: 1.5;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  padding: 6px;
+
+  .qlty-icon {
+    margin-right: 0;
+    width: 18px;
+    height: 18px;
+  }
+
+  &.qlty-diff-badge-pr {
+    order: 2;
+    padding: 4px;
+    .qlty-icon {
+      width: 16px;
+      height: 16px;
+    }
+  }
+}
+
 .qlty-toast .qlty-icon {
   display: inline-block;
   background-color: #fff;

src/github.ts

@@ -70,9 +70,16 @@ function tryInjectDiffPullRequestUIElement(
     });
 
   console.log("[qlty] injected diff PR UI");
+  addPRPageBadge();
   rootElement.classList.add("qlty-diff-ui");
 }
 
+function addPRPageBadge(): void {
+  const badge = createBadge("pr");
+  if (!badge) return;
+  document.querySelector(".gh-header-actions")?.prepend(badge);
+}
+
 function tryInjectDiffCommitUI(): void {
   const rootElement = document.getElementById("diff-content-parent");
   if (!rootElement) return;
@@ -103,9 +110,27 @@ function tryInjectDiffCommitUI(): void {
   });
 
   console.log("[qlty] injected diff commit UI");
+  addDiffPageBadge();
   rootElement.classList.add("qlty-diff-ui");
 }
 
+function addDiffPageBadge(): void {
+  const badge = createBadge("commit");
+  if (!badge) return;
+  document.querySelector("[data-component=PH_Actions] div")?.prepend(badge);
+}
+
+function createBadge(type: "pr" | "commit"): HTMLDivElement | null {
+  if (document.querySelector(".qlty-diff-badge")) {
+    return null;
+  }
+  const badge = document.createElement("div");
+  badge.classList.add("qlty-diff-badge");
+  badge.classList.add(`qlty-diff-badge-${type}`);
+  badge.appendChild(document.createElement("div")).classList.add("qlty-icon");
+  return badge;
+}
+
 async function injectIntoFileContainer(
   container: Element,
   path: string | null,