Make the branch sorting work

6bdf18eea5616dd326c56236b7a13b1ec7491fd0

Tucker McKnight | Tue Dec 30 2025

Make the branch sorting work

Also preserve the user's choice across page loads. (Call the function
again at the bottom of the main.js file.)

Also rename "patches" to "commits" on commits page.
frontend/main.js:76
Before
76
77
document.getElementById('dropdownBranchSearch')?.addEventListener('input', (event) => {
  console.log(searchTerm)
After
76
77

const searchBox = document.getElementById('dropdownBranchSearch')

searchBox?.addEventListener('input', (event) => {
let sortDirection = document.querySelector("[name=branchSort]:checked").value || 'date'

const showBranchesResults = (searchTerm) => {
  let branches = window.branchesWithHrefs.filter((branch) => {
    return branch.name.includes(searchTerm)
  })
  dropdownBranchesResults.innerHTML = branchesListItems(branches, window.defaultBranch, window.currentBranch, sortDirection)
}

document.querySelectorAll('.sort-filter').forEach((element) => {
  element.addEventListener('change', (event) => {
    sortDirection = event.target.value
    showBranchesResults(searchBox.value)
  })
})
frontend/main.js:109
Before
109
After
109

showBranchesResults(searchBox.value)
js_templates/common/branchesListItems.ts:1
Before
1
2
3
4
5
export default (branches: Array<{name: string, href: string, date: string}>, defaultBranch: string, currentBranch: string): string => {
  return branches.map((branch) => {
    const currentBadge = currentBranch === branch.name ? '<div class="badge rounded-pill bg-secondary mx-1">current</div>' : ''
    const defaultBadge = defaultBranch === branch.name ? '<div class="badge rounded-pill bg-info text-dark mx-1">default</div>' : ''
    return `<a href='${branch.href}' class='dropdown-item my-1'><span class="branch-dropdown-branch-name me-1">${branch.name}</span>${currentBadge}${defaultBadge}<span class="text-body d-block ms-2">updated ${branch.date}</span></a>`
After
1
2
3
4
5
export default (
  branches: Array<{name: string, href: string, date: string}>,
  defaultBranch: string,
  currentBranch: string,
  sortBy: 'name' | 'date',
): string => {
  return branches.toSorted((a, b) => {
    if (a[sortBy] < b[sortBy]) { return -1 }
    if (a[sortBy] > b[sortBy]) { return 1 }
    return 0
  }).map((branch) => {
    const currentBadge = currentBranch === branch.name
      ? '<div class="badge rounded-pill bg-secondary mx-1">current</div>'
      : ''
    const defaultBadge = defaultBranch === branch.name
      ? '<div class="badge rounded-pill bg-info text-dark mx-1">default</div>'
      : ''

    return `
      <a href='${branch.href}' class='dropdown-item my-1'>
        <span class="branch-dropdown-branch-name me-1">
          ${branch.name}
        </span>${currentBadge}${defaultBadge}
        <span class="text-body d-block ms-2">
          updated ${branch.date}
        </span>
      </a>
    `
js_templates/common/htmlPage.ts:70
Before
70
71
                                  <input class="form-check-input" type="radio" name="branchSort" id="branchSortByDate" checked>
                                  <input class="form-check-input" type="radio" name="branchSort" id="branchSortByName">
After
70
71
                                  <input class="form-check-input sort-filter" type="radio" name="branchSort" value='date' id="branchSortByDate" checked>
                                  <input class="form-check-input sort-filter" type="radio" name="branchSort" value='name' id="branchSortByName">
js_templates/common/htmlPage.ts:86
Before
86
                            ${branchesListItems(branchesWithHrefs, repo.defaultBranch, branch.name)}
After
86
                            ${branchesListItems(branchesWithHrefs, repo.defaultBranch, branch.name, 'date')}
templates/file.njk:37
Before
37
<a href="{{reposPath}}/{{fileInfo.repoName | slugify}}/branches/{{fileInfo.branchName | slugify}}/patches/{{annotation.sha}}">{{ (annotation.sha | truncate(6, true, '')) }}</a> {{ annotation.author }}
After
37
<a href="{{reposPath}}/{{fileInfo.repoName | slugify}}/branches/{{fileInfo.branchName | slugify}}/commits/{{annotation.sha}}">{{ (annotation.sha | truncate(6, true, '')) }}</a> {{ annotation.author }}