hanna/fabrica

feat(web): branch switcher, commits tab, signature popover, squarer pills

9755dfe · hanna committed on 2026-07-25

Make Commits a repo tab (Code · Commits · Branches · Tags) and turn the
branch button into a no-JS dropdown that switches branches (new cheap
git::Repo::branch_names). Add a GitHub-style hover/focus popover on verified
commit-list badges (signer, key fingerprint, verified date). On the commit
view, drop the redundant Verified pill and move the short id / author / date
to the right of the title. Square off badges and tab pills to match the
buttons, and align the profile social-link icons.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Signed by hannaSSH key fingerprint: SHA256:4g9cWhkAAw8gwqhJUcVbSnGEvdGwklW+1Aa/fMUu59k

assets/base.css +126 −4

crates/git/src/repo.rs +24 −0

crates/web/src/icons.rs +6 −0

crates/web/src/repo.rs +136 −30

   gap: 0.25rem;
   padding: 0.05rem 0.45rem;
   font-size: 0.8em;
-  border-radius: 999px;
+  border-radius: var(--fb-radius);
   border: 1px solid var(--fb-border);
+}
 .badge-verified {
 .profile-pronouns {
   padding: 0.05rem 0.5rem;
   border: 1px solid var(--fb-border);
-  border-radius: 999px;
+  border-radius: var(--fb-radius);
   font-size: 0.82em;
+}
 .profile-bio {
   color: var(--fb-fg-muted);
+}
 .profile-links a {
-  color: var(--fb-accent);
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
   min-width: 0;
+  color: var(--fb-accent);
+}
+.profile-links a span {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   align-items: center;
   gap: 0.4rem;
   padding: 0.4rem 0.9rem;
-  border-radius: 999px;
+  border-radius: var(--fb-radius);
   color: var(--fb-fg-muted);
+}
 .repo-tabs a:hover,
   font-family: var(--fb-font-mono);
   font-size: 0.8em;
+}
+/* Branch switcher dropdown. */
+.branch-menu {
+  position: relative;
+}
+.branch-menu > summary {
+  list-style: none;
+  cursor: pointer;
+}
+.branch-menu > summary::-webkit-details-marker {
+  display: none;
+}
+.branch-menu > summary .icon:last-child {
+  margin-left: 0.1rem;
+}
+.branch-pop {
+  position: absolute;
+  left: 0;
+  top: calc(100% + 0.35rem);
+  z-index: 30;
+  width: 17rem;
+  max-width: 88vw;
+  max-height: 20rem;
+  overflow-y: auto;
+  padding: 0.35rem;
+  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
+}
+.branch-pop-head {
+  padding: 0.3rem 0.5rem;
+  font-size: 0.78em;
+  font-weight: 600;
+}
+.branch-pop a {
+  display: block;
+  padding: 0.35rem 0.5rem;
+  border-radius: var(--fb-radius);
+  color: var(--fb-fg);
+  font-family: var(--fb-font-mono);
+  font-size: 0.88em;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.branch-pop a:hover {
+  background: var(--fb-bg-inset);
+  text-decoration: none;
+}
+.branch-pop a[aria-current="page"] {
+  color: var(--fb-accent);
+  font-weight: 600;
+}
+.branch-pop-all {
+  margin-top: 0.25rem;
+  border-top: 1px solid var(--fb-border);
+  color: var(--fb-accent) !important;
+  font-family: var(--fb-font-sans) !important;
+}
 .breadcrumb {
   margin-bottom: 0.75rem;
   font-family: var(--fb-font-mono);
   height: 1.75rem;
+}
+/* Verified-signature hover popover in the commits list. */
+.sig-pop-wrap {
+  position: relative;
+  display: inline-flex;
+}
+.sig-pop {
+  position: absolute;
+  right: 0;
+  top: calc(100% + 0.35rem);
+  z-index: 40;
+  width: 21rem;
+  max-width: 88vw;
+  display: none;
+  text-align: left;
+  white-space: normal;
+  cursor: default;
+  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
+}
+.sig-pop-wrap:hover .sig-pop,
+.sig-pop-wrap:focus-within .sig-pop {
+  display: block;
+}
+.sig-pop-title {
+  font-weight: 600;
+  margin-bottom: 0.6rem;
+}
+.sig-pop-signer {
+  margin-bottom: 0.6rem;
+}
+.sig-pop-fp {
+  font-size: 0.85em;
+  color: var(--fb-fg-muted);
+  margin-bottom: 0.4rem;
+}
+.sig-pop-fp .mono {
+  display: block;
+  margin-top: 0.15rem;
+  color: var(--fb-fg);
+  word-break: break-all;
+}
+.sig-pop-when {
+  font-size: 0.85em;
+}
 /* Commit signature detail bar. */
 .sig-detail {
   display: flex;
 .commit-meta {
   margin-bottom: 1rem;
+}
+.commit-title-row {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 1rem;
+  flex-wrap: wrap;
+}
+.commit-title {
+  margin: 0;
+  min-width: 0;
+}
+.commit-title-meta {
+  margin: 0;
+  font-size: 0.85em;
+  text-align: right;
+}
 .commit-body {
   margin: 0.5rem 0;
   padding: 0.5rem 0.75rem;

         Ok(out)
+    }
+    /// The local branch names, default first then alphabetical. Cheaper than
+    /// [`Self::branches`] — it skips the ahead/behind graph walk, for the branch
+    /// switcher.
+    ///
+    /// # Errors
+    ///
+    /// Returns [`GitError::Libgit2`] on a libgit2 failure.
+    pub fn branch_names(&self) -> Result<Vec<String>, GitError> {
+        let default = self.head_branch()?;
+        let mut names: Vec<String> = Vec::new();
+        for branch in self.inner.branches(Some(BranchType::Local))? {
+            let (branch, _) = branch?;
+            if let Some(name) = branch.name()?.map(str::to_string) {
+                names.push(name);
+            }
+        }
+        names.sort_by(|a, b| {
+            let da = default.as_deref() == Some(a.as_str());
+            let db = default.as_deref() == Some(b.as_str());
+            db.cmp(&da).then_with(|| a.cmp(b))
+        });
+        Ok(names)
+    }
     /// The tags, peeled to the commit each ultimately points at, annotated tags
     /// carrying their message and tagger.
     ///

     Folder,
     File,
     GitBranch,
+    History,
+    ChevronDown,
     Search,
     Copy,
     Box,
             Icon::GitBranch => {
                 r#"<path d="M15 6a9 9 0 0 0-9 9V3"/><circle cx="18" cy="6" r="3"/><circle cx="6" cy="18" r="3"/>"#
+            }
+            Icon::History => {
+                r#"<path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/><path d="M3 3v5h5"/><path d="M12 7v5l4 2"/>"#
+            }
+            Icon::ChevronDown => r#"<path d="m6 9 6 6 6-6"/>"#,
             Icon::Search => r#"<path d="m21 21-4.34-4.34"/><circle cx="11" cy="11" r="8"/>"#,
             Icon::Copy => {
                 r#"<rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/>"#

 //! resolved once through [`auth::access`]; no access to a private repo renders
 //! `404`, never `403`, so existence never leaks.
+use std::collections::HashMap;
 use std::path::Path as FsPath;
 use axum::extract::{Path, Query, State};
 #[derive(Clone, Copy, PartialEq, Eq)]
 enum Tab {
     Code,
+    Commits,
     Branches,
     Tags,
     Search,
     .map_err(AppError::from)
+}
+/// The local branch names for the switcher, empty on any error (an empty repo or
+/// a failed read simply yields no dropdown).
+async fn branch_names(state: &AppState, repo_id: &str) -> Vec<String> {
+    git_read(state, repo_id, git::Repo::branch_names)
+        .await
+        .unwrap_or_default()
+}
 /// Resolve `(owner, path)` to a repo and check access, or `Ok(None)` if the owner
 /// or repo does not exist (so the caller can try a group listing).
 ///
         "branches" => branches_view(state, viewer, jar, uri, ctx).await,
         "tags" => tags_view(state, viewer, jar, uri, ctx).await,
         "search" => {
-            let header = repo_header(state, &ctx, Tab::Search, &ctx.repo.default_branch);
+            let branches = branch_names(state, &ctx.repo.id).await;
+            let header = repo_header(
+                state,
+                &ctx,
+                Tab::Search,
+                &ctx.repo.default_branch,
+                &branches,
+            );
             let raw_query = dq.q.clone().unwrap_or_default();
             crate::search::in_repo(state, viewer, jar, uri, &ctx, &raw_query, header).await
+        }
             })
             .await?;
             let readme = load_readme(state, &ctx.repo.id, &rev, &entries).await;
+            let branches = branch_names(state, &ctx.repo.id).await;
             let base = format!("/{}/{}", ctx.owner.username, ctx.repo.path);
             html! {
-                (repo_header(state, &ctx, Tab::Code, &rev_name))
+                (repo_header(state, &ctx, Tab::Code, &rev_name, &branches))
                 form class="search-row repo-codesearch" method="get" action=(format!("{base}/-/search")) {
                     input type="search" name="q" placeholder="Search this repository…"
                           aria-label="Search this repository";
 /// The "empty repository" landing with clone instructions.
 fn empty_repo_body(state: &AppState, ctx: &RepoCtx) -> Markup {
     html! {
-        (repo_header(state, ctx, Tab::Code, &ctx.repo.default_branch))
+        (repo_header(state, ctx, Tab::Code, &ctx.repo.default_branch, &[]))
         div class="card" {
             h2 { "This repository is empty" }
             p class="muted" { "Push a commit to get started:" }
     })
     .await?;
+    let branches = branch_names(state, &ctx.repo.id).await;
     let body = html! {
-        (repo_header(state, &ctx, Tab::Code, &rev_name))
+        (repo_header(state, &ctx, Tab::Code, &rev_name, &branches))
         (breadcrumb(&ctx.owner.username, &ctx.repo.path, &rev_name, &path))
         (tree_table(&ctx.owner.username, &ctx.repo.path, &rev_name, &path, &entries))
     };
         attr_lang.as_deref(),
         source_view,
     );
+    let branches = branch_names(state, &ctx.repo.id).await;
     let body = html! {
-        (repo_header(state, &ctx, Tab::Code, &rev_name))
+        (repo_header(state, &ctx, Tab::Code, &rev_name, &branches))
         (breadcrumb(&ctx.owner.username, &ctx.repo.path, &rev_name, &path))
         (content_body)
     };
     ctx: RepoCtx,
 ) -> AppResult<Response> {
     let branches = git_read(state, &ctx.repo.id, git::Repo::branches).await?;
+    let branch_list: Vec<String> = branches.iter().map(|b| b.name.clone()).collect();
     let body = html! {
-        (repo_header(state, &ctx, Tab::Branches, &ctx.repo.default_branch))
+        (repo_header(state, &ctx, Tab::Branches, &ctx.repo.default_branch, &branch_list))
         h2 { "Branches" }
         table class="list" {
             thead { tr { th { "Branch" } th { "Ahead" } th { "Behind" } th { "Updated" } } }
     ctx: RepoCtx,
 ) -> AppResult<Response> {
     let tags = git_read(state, &ctx.repo.id, git::Repo::tags).await?;
+    let branches = branch_names(state, &ctx.repo.id).await;
     let body = html! {
-        (repo_header(state, &ctx, Tab::Tags, &ctx.repo.default_branch))
+        (repo_header(state, &ctx, Tab::Tags, &ctx.repo.default_branch, &branches))
         h2 { "Tags" }
         table class="list" {
             thead { tr { th { "Tag" } th { "Commit" } th { "Kind" } } }
     })
     .await?;
+    // Resolve the usernames of verified signers for the hover popovers.
+    let mut signers: HashMap<String, String> = HashMap::new();
+    for s in &states {
+        if let git::SignatureState::Verified { user_id, .. } = s
+            && !signers.contains_key(user_id)
+            && let Ok(Some(u)) = state.store.user_by_id(user_id).await
+        {
+            signers.insert(user_id.clone(), u.username);
+        }
+    }
     let base = format!("/{}/{}", ctx.owner.username, ctx.repo.path);
     let now = crate::now_ms();
+    let branches = branch_names(state, &ctx.repo.id).await;
     let body = html! {
-        (repo_header(state, &ctx, Tab::Code, &rev_name))
+        (repo_header(state, &ctx, Tab::Commits, &rev_name, &branches))
         h2 { "Commits" }
         ul class="commit-list card" {
             @for (commit, sig) in commits.iter().zip(states.iter()) {
                 @let commit_url = format!("{base}/-/commit/{}", commit.oid);
+                @let signer = match sig {
+                    git::SignatureState::Verified { user_id, .. } => signers.get(user_id).map(String::as_str),
+                    _ => None,
+                };
                 li class="commit-row" {
                     div class="commit-row-body" {
                         a class="commit-row-msg" href=(commit_url) { (commit.summary) }
+                        }
+                    }
                     div class="commit-row-actions" {
-                        (signature_badge(sig))
+                        (commit_sig_cell(sig, signer, commit.author.time_ms))
                         a class="mono commit-sha-pill" href=(commit_url) { (commit.oid.short()) }
                         button class="icon-btn commit-copy" type="button"
                                data-clipboard=(commit.oid.to_string()) aria-label="Copy commit id" {
         (a + fa, d + fd)
     });
     let repo_base = format!("/{}/{}", ctx.owner.username, ctx.repo.path);
+    let branches = branch_names(state, &ctx.repo.id).await;
     let body = html! {
-        (repo_header(state, &ctx, Tab::Code, &ctx.repo.default_branch))
+        (repo_header(state, &ctx, Tab::Code, &ctx.repo.default_branch, &branches))
-        (commit_meta(&detail, &sig))
+        (commit_meta(&detail))
         (signature_detail(&sig, signer.as_deref()))
         div class="diff-toolbar" {
             span {
+    }
+}
-/// The commit metadata block: subject, signature badge, sha, author, and body.
+/// The commit metadata block: the subject with the short id, author, and commit
-fn commit_meta(detail: &git::CommitDetail, sig: &git::SignatureState) -> Markup {
+/// date to its right, and the body below.
+fn commit_meta(detail: &git::CommitDetail) -> Markup {
     let (subject, body) = detail
         .message
         .split_once("\n\n")
         .map_or((detail.message.as_str(), ""), |(s, b)| (s.trim(), b));
     html! {
         div class="commit-meta" {
-            h2 { (subject.lines().next().unwrap_or("")) " " (signature_badge(sig)) }
+            div class="commit-title-row" {
-            p class="muted" {
+                h2 class="commit-title" { (subject.lines().next().unwrap_or("")) }
-                span class="mono" { (detail.oid.short()) }
+                p class="commit-title-meta muted" {
-                " · " (detail.author.name)
+                    span class="mono" { (detail.oid.short()) }
-                " committed on " (fmt_date(detail.committer.time_ms))
+                    " · " (detail.author.name)
+                    " committed on " (fmt_date(detail.committer.time_ms))
+                }
+            }
             @if !body.trim().is_empty() {
                 pre class="commit-body" { (body.trim_end()) }
+}
 /// The repo sub-header: slug, description, and a tab strip sharing its line with
-/// the branch / commits / clone actions.
+/// the branch switcher and clone menu.
-fn repo_header(state: &AppState, ctx: &RepoCtx, active: Tab, rev: &str) -> Markup {
+fn repo_header(
+    state: &AppState,
+    ctx: &RepoCtx,
+    active: Tab,
+    rev: &str,
+    branches: &[String],
+) -> Markup {
     let base = format!("/{}/{}", ctx.owner.username, ctx.repo.path);
     let tab = |t: Tab, label: &str, glyph: Icon, href: String| {
         html! {
             div class="repo-nav" {
                 nav class="tabs repo-tabs" {
                     (tab(Tab::Code, "Code", Icon::File, base.clone()))
+                    (tab(Tab::Commits, "Commits", Icon::History, format!("{base}/-/commits/{rev}")))
                     (tab(Tab::Branches, "Branches", Icon::GitBranch, format!("{base}/-/branches")))
                     (tab(Tab::Tags, "Tags", Icon::Box, format!("{base}/-/tags")))
+                }
                 div class="repo-actions" {
-                    a class="btn" href=(format!("{base}/-/branches")) {
+                    (branch_menu(&base, rev, branches))
-                        (icon(Icon::GitBranch)) span { (rev) }
-                    }
-                    a class="btn" href=(format!("{base}/-/commits/{rev}")) { "Commits" }
                     (clone_menu(state, ctx))
+                }
+            }
+    }
+}
+/// The branch switcher: a no-JS `details` menu linking to each branch's tree.
+/// Falls back to a plain link to the branches page when the list is empty.
+fn branch_menu(base: &str, rev: &str, branches: &[String]) -> Markup {
+    html! {
+        @if branches.is_empty() {
+            a class="btn" href=(format!("{base}/-/branches")) {
+                (icon(Icon::GitBranch)) span { (rev) }
+            }
+        } @else {
+            details class="branch-menu" {
+                summary class="btn" { (icon(Icon::GitBranch)) span { (rev) } (icon(Icon::ChevronDown)) }
+                div class="branch-pop card" {
+                    div class="branch-pop-head muted" { "Switch branch" }
+                    @for name in branches {
+                        a href=(format!("{base}/-/tree/{name}"))
+                          aria-current=[(name == rev).then_some("page")] { (name) }
+                    }
+                    a class="branch-pop-all" href=(format!("{base}/-/branches")) { "View all branches" }
+                }
+            }
+        }
+    }
+}
 /// The Clone dropdown: a no-JS `details` menu offering the HTTPS and SSH URLs.
 fn clone_menu(state: &AppState, ctx: &RepoCtx) -> Markup {
     let https = clone_https(state, ctx);
+    }
+}
+/// The uppercase label for a key kind.
+fn key_kind_label(kind: model::KeyKind) -> &'static str {
+    match kind {
+        model::KeyKind::Ssh => "SSH",
+        model::KeyKind::Gpg => "GPG",
+    }
+}
+/// A commit's signature cell for the commits list: a verified signature gets a
+/// hover/focus popover with the signer, key fingerprint, and verified date; any
+/// other state falls back to the plain badge.
+fn commit_sig_cell(state: &git::SignatureState, signer: Option<&str>, time_ms: i64) -> Markup {
+    match state {
+        git::SignatureState::Verified {
+            kind,
+            fingerprint,
+            user_id,
+            ..
+        } => html! {
+            span class="sig-pop-wrap" tabindex="0" {
+                (signature_badge(state))
+                div class="sig-pop card" {
+                    div class="sig-pop-title" {
+                        "This commit was signed with a verified signature."
+                    }
+                    div class="sig-pop-signer" {
+                        "Signed by " strong { (signer.unwrap_or(user_id)) }
+                    }
+                    div class="sig-pop-fp" {
+                        (key_kind_label(*kind)) " key fingerprint:"
+                        span class="mono" { (fingerprint) }
+                    }
+                    div class="muted sig-pop-when" { "Verified on " (fmt_joined(time_ms)) }
+                }
+            }
+        },
+        _ => signature_badge(state),
+    }
+}
 /// A signature badge (green Verified / amber Unverified) with a descriptive title.
 fn signature_badge(state: &git::SignatureState) -> Markup {
     match state {
 /// The detail bar under a commit's metadata describing its signature: who signed
 /// it and with which key fingerprint. Renders nothing for an unsigned commit.
 fn signature_detail(state: &git::SignatureState, signer: Option<&str>) -> Markup {
-    let kind_label = |k: model::KeyKind| match k {
-        model::KeyKind::Ssh => "SSH",
-        model::KeyKind::Gpg => "GPG",
-    };
     match state {
         git::SignatureState::Unsigned => html! {},
         git::SignatureState::Verified {
                     "Signed by " strong { (signer.unwrap_or(user_id)) }
+                }
                 span class="sig-fp mono" {
-                    (kind_label(*kind)) " key fingerprint: " (fingerprint)
+                    (key_kind_label(*kind)) " key fingerprint: " (fingerprint)
+                }
+            }
         },
         git::SignatureState::UnknownKey { kind, fingerprint } => html! {
             div class="sig-detail sig-unverified" {
-                span { "Signed by an unregistered " (kind_label(*kind)) " key" }
+                span { "Signed by an unregistered " (key_kind_label(*kind)) " key" }
                 span class="sig-fp mono" { (fingerprint) }
+            }
         },