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.

1 files changed, 10 insertions, 1 deletions

diff --git a/views/_nav.eta b/views/_nav.eta
index 338a6a6..e3fbdcf 100644
--- a/views/_nav.eta
+++ b/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);