From 6240cf1c6b73b7ed34ff5816b53333382c229f5c Mon Sep 17 00:00:00 2001
From: Joe Mou <dev@mou.fo>
Date: Tue, 21 Jul 2026 17:46:58 -0400
Subject: Add async branch/tag dropdown and latest-commit bar

Adds two lazily-fetched UI pieces to match vanilla GitHub while keeping
initial page loads plain server-rendered HTML: a branch/tag selector
(native <dialog>, CSS anchor-positioned to its button, light-dismissed
via closedby="any") and a latest-commit bar above the file listing.
Both are populated by new /api/:owner/:repo/refs/:type and
/api/:owner/:repo/latest-commit/:branch/:path routes; the latter calls
GitHub's own /latest-commit JSON endpoint (the same one the React UI
uses) rather than scraping the full commit history page.
---
 cgithub/views/_latestCommit.eta | 16 ++++++++++++++++
 cgithub/views/_nav.eta          | 11 ++++++++++-
 cgithub/views/_refs.eta         | 17 +++++++++++++++++
 cgithub/views/_tree.eta         |  3 +++
 cgithub/views/layout.eta        |  1 +
 5 files changed, 47 insertions(+), 1 deletion(-)
 create mode 100644 cgithub/views/_latestCommit.eta
 create mode 100644 cgithub/views/_refs.eta

(limited to 'cgithub/views')

diff --git a/cgithub/views/_latestCommit.eta b/cgithub/views/_latestCommit.eta
new file mode 100644
index 0000000..18d22a1
--- /dev/null
+++ b/cgithub/views/_latestCommit.eta
@@ -0,0 +1,16 @@
+<div class="commit box">
+  <div>
+    <div>
+      <%~ it.commit.shortMessageHtml %>
+    </div>
+    <div class="commit-author">
+      <% for (const author of it.commit.authors) { %>
+        <a href="/<%= author.login %>"><%= author.login %></a>
+      <% } %>
+      <time class="timestamp" title="<%= it.commit.date %>"><%= it.commit.date.split("T")[0] %></time>
+    </div>
+  </div>
+  <div class="commit-sha">
+    <code><%= it.commit.oid.substring(0, 7) %></code>
+  </div>
+</div>
diff --git a/cgithub/views/_nav.eta b/cgithub/views/_nav.eta
index 338a6a6..e3fbdcf 100644
--- a/cgithub/views/_nav.eta
+++ b/cgithub/views/_nav.eta
@@ -1,5 +1,14 @@
 <section>
-  <div class="branch"><img src="/static/icons/git-branch.svg" alt="branch" class="icon"> <%= it.branch %></div>
+  <button type="button" class="ref-selector-button branch" command="show-modal" commandfor="ref-selector-menu">
+    <img src="/static/icons/git-branch.svg" alt="branch" class="icon"> <%= it.branch %> ▾
+  </button>
+  <dialog class="ref-selector-menu" id="ref-selector-menu" closedby="any" data-owner="<%= it.repo.owner %>" data-repo="<%= it.repo.name %>">
+    <div class="ref-selector-tabs">
+      <button type="button" class="active" data-ref-type="branches">Branches</button>
+      <button type="button" data-ref-type="tags">Tags</button>
+    </div>
+    <div class="ref-selector-list">Loading…</div>
+  </dialog>
   <% if (it.path && it.path !== "/") { %>
     <a href="/<%= it.repo.owner %>/<%= it.repo.name %>/tree/<%= it.branch %>">(top)</a><%
     const pathParts = it.path.split('/').filter(p => p);
diff --git a/cgithub/views/_refs.eta b/cgithub/views/_refs.eta
new file mode 100644
index 0000000..2450c4b
--- /dev/null
+++ b/cgithub/views/_refs.eta
@@ -0,0 +1,17 @@
+<% if (it.refs.length === 0) { %>
+  <div class="ref-selector-empty">No <%= it.type %> found.</div>
+<% } else { %>
+  <ul class="ref-selector-items">
+    <% for (const ref of it.refs) { %>
+      <li>
+        <a href="/<%= it.repo.owner %>/<%= it.repo.name %>/tree/<%= ref.name %>"><%= ref.name %></a>
+        <% if (ref.isDefault) { %><span class="ref-selector-badge">default</span><% } %>
+      </li>
+    <% } %>
+  </ul>
+<% } %>
+<% if (it.hasMore) { %>
+  <div class="ref-selector-more">
+    <a href="/<%= it.repo.owner %>/<%= it.repo.name %>/<%= it.type %>">View all <%= it.type %></a>
+  </div>
+<% } %>
diff --git a/cgithub/views/_tree.eta b/cgithub/views/_tree.eta
index ed6eee9..a0ecfab 100644
--- a/cgithub/views/_tree.eta
+++ b/cgithub/views/_tree.eta
@@ -1,5 +1,8 @@
 <%~ include("./_nav.eta", {...it, isTree: true}) %>
 
+<% const commitPath = it.path && it.path !== "/" ? it.path : ""; %>
+<div class="latest-commit-placeholder box" data-src="/api/<%= it.repo.owner %>/<%= it.repo.name %>/latest-commit/<%= it.branch %>/<%= commitPath %>">Loading latest commit…</div>
+
 <table>
   <% for (const item of it.items) { %>
     <tr>
diff --git a/cgithub/views/layout.eta b/cgithub/views/layout.eta
index dd523d1..a80bd1d 100644
--- a/cgithub/views/layout.eta
+++ b/cgithub/views/layout.eta
@@ -5,6 +5,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title><%= it.repo.owner %>/<%= it.repo.name %> - <%= it.path || '/' %></title>
   <link rel="stylesheet" href="/static/style.css">
+  <script src="/static/refs.js" defer></script>
 </head>
 <body>
   <div class="box">
-- 
cgit v1.3.1