2 files changed, 122 insertions, 0 deletions
diff --git a/cgithub/public/static/refs.js b/cgithub/public/static/refs.js
new file mode 100644
index 0000000..28b8373
--- /dev/null
+++ b/cgithub/public/static/refs.js
@@ -0,0 +1,60 @@
+// Progressive enhancement for two bits of data GitHub itself loads lazily:
+// the branch/tag dropdown and the latest-commit bar above a file listing.
+// Both degrade gracefully without JS: the button's command/commandfor still
+// opens the (empty) dialog natively; the commit placeholder just never fills
+// in.
+document.addEventListener("DOMContentLoaded", () => {
+  const dialog = document.querySelector(".ref-selector-menu");
+  if (dialog) {
+    const list = dialog.querySelector(".ref-selector-list");
+    const { owner, repo } = dialog.dataset;
+    const cache = {};
+
+    async function load(type) {
+      if (Object.prototype.hasOwnProperty.call(cache, type)) {
+        list.innerHTML = cache[type];
+        return;
+      }
+      list.textContent = "Loading…";
+      try {
+        const res = await fetch(`/api/${owner}/${repo}/refs/${type}`);
+        const html = res.ok ? await res.text() : "";
+        cache[type] = html || "Failed to load.";
+        list.innerHTML = cache[type];
+      } catch {
+        list.textContent = "Failed to load.";
+      }
+    }
+
+    let opened = false;
+    dialog.addEventListener("toggle", () => {
+      if (dialog.open && !opened) {
+        opened = true;
+        load("branches");
+      }
+    });
+
+    for (const tab of dialog.querySelectorAll("[data-ref-type]")) {
+      tab.addEventListener("click", () => {
+        for (const other of dialog.querySelectorAll("[data-ref-type]")) {
+          other.classList.toggle("active", other === tab);
+        }
+        load(tab.dataset.refType);
+      });
+    }
+  }
+
+  const commitPlaceholder = document.querySelector(".latest-commit-placeholder");
+  if (commitPlaceholder) {
+    fetch(commitPlaceholder.dataset.src)
+      .then((res) => (res.ok ? res.text() : ""))
+      .then((html) => {
+        if (html.trim()) {
+          commitPlaceholder.outerHTML = html;
+        } else {
+          commitPlaceholder.remove();
+        }
+      })
+      .catch(() => commitPlaceholder.remove());
+  }
+});
diff --git a/cgithub/public/static/style.css b/cgithub/public/static/style.css
index e698993..983cb86 100644
--- a/cgithub/public/static/style.css
+++ b/cgithub/public/static/style.css
@@ -160,6 +160,68 @@ body > footer {
   border: 1px solid var(--border-color);
 }
 
+.ref-selector-button {
+  anchor-name: --ref-selector-anchor;
+}
+
+.ref-selector-menu {
+  position: absolute;
+  position-anchor: --ref-selector-anchor;
+  position-area: bottom span-right;
+  width: 16rem;
+  max-height: 20rem;
+  overflow-y: auto;
+  overflow-wrap: break-word;
+  background: var(--body-background);
+  border: 1px solid var(--border-color);
+  padding: 0.5rem;
+
+  &::backdrop {
+    background: transparent;
+  }
+}
+
+.ref-selector-tabs {
+  display: flex;
+  margin-bottom: 0.5rem;
+
+  button {
+    flex: 1;
+    padding: 0.25rem;
+    cursor: pointer;
+    &.active {
+      font-weight: bold;
+      border-bottom: 2px solid var(--link-color);
+    }
+  }
+}
+
+.ref-selector-items {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+
+  li {
+    padding: 0.2rem 0;
+  }
+}
+
+.ref-selector-badge {
+  margin-left: 0.3rem;
+  font-size: 0.75rem;
+  opacity: 0.7;
+}
+
+.ref-selector-empty,
+.ref-selector-more {
+  padding: 0.2rem 0;
+  font-size: 0.85rem;
+}
+
+.latest-commit-placeholder {
+  opacity: 0.7;
+}
+
 .repo-info {
   .description {
     margin-bottom: .2rem;