Make the branch sorting work

6bdf18eea5616dd326c56236b7a13b1ec7491fd0

Tucker McKnight <tucker@pangolin.lan> | 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
75
76
77



78
79

80







81
82
83
84


85
86





87
88
})

const dropdownBranchesResults = document.getElementById('dropdown-branches-results')
⁣
⁣
⁣
document.getElementById('dropdownBranchSearch')?.addEventListener('input', (event) => {
  const searchTerm = event.target.value
⁣
  console.log(searchTerm)
⁣
⁣
⁣
⁣
⁣
⁣
⁣
  let branches = window.branchesWithHrefs.filter((branch) => {
    return branch.name.includes(searchTerm)
  })
  dropdownBranchesResults.innerHTML = branchesListItems(branches, window.defaultBranch, window.currentBranch)
⁣
⁣
})

⁣
⁣
⁣
⁣
⁣
const bootstrap = window.bootstrap
const jsVars = window.jsVars
window.popovers ||= []
After
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
})

const dropdownBranchesResults = document.getElementById('dropdown-branches-results')

const searchBox = document.getElementById('dropdownBranchSearch')

searchBox?.addEventListener('input', (event) => {
  const searchTerm = event.target.value
  let branches = window.branchesWithHrefs.filter((branch) => {
    return branch.name.includes(searchTerm)
  })
  dropdownBranchesResults.innerHTML = branchesListItems(branches, window.defaultBranch, window.currentBranch)
})

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)
  })
})

const bootstrap = window.bootstrap
const jsVars = window.jsVars
window.popovers ||= []
frontend/main.js:109
Before
108
109


    window.popovers.forEach(popover => popover.hide())
  }
⁣
⁣
})
After
108
109
110
111
    window.popovers.forEach(popover => popover.hide())
  }
})

showBranchesResults(searchBox.value)
js_templates/common/branchesListItems.ts:1
Before




0




1


2



3
4









5
6
7
e⁣
⁣
⁣
⁣
⁣
xport 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>`
  }).join('')
}
After
0
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
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>
    `
  }).join('')
}
js_templates/common/htmlPage.ts:70
Before
69
70
71
72
73
74
75
76
77
78
79
80
                              </div>
                              <div class="sortRadioButtons">
                                <div class="sortRadioButton pe-1">
                                  <input class="form-check-input" type="radio" name="branchSort" id="branchSortByDate" checked>
                                  <label class="form-check-label" for="branchSortByDate">
                                    Last commit
                                  </label>
                                </div>
                                <div class="sortRadioButton ps-1">
                                  <input class="form-check-input" type="radio" name="branchSort" id="branchSortByName">
                                  <label class="form-check-label" for="branchSortByName">
                                    Name
                                  </label>
After
69
70
71
72
73
74
75
76
77
78
79
80
                              </div>
                              <div class="sortRadioButtons">
                                <div class="sortRadioButton pe-1">
                                  <input class="form-check-input sort-filter" type="radio" name="branchSort" value='date' id="branchSortByDate" checked>
                                  <label class="form-check-label" for="branchSortByDate">
                                    Last commit
                                  </label>
                                </div>
                                <div class="sortRadioButton ps-1">
                                  <input class="form-check-input sort-filter" type="radio" name="branchSort" value='name' id="branchSortByName">
                                  <label class="form-check-label" for="branchSortByName">
                                    Name
                                  </label>
js_templates/common/htmlPage.ts:86
Before
85
86
87
88
89
90
                          </form>
                          <div class="dropdown-divider"></div>
                          <div id="dropdown-branches-results" class="dropdown-branches">
                            ${branchesListItems(branchesWithHrefs, repo.defaultBranch, branch.name)}
                          </div>
                        </div>
                      </div>
After
85
86
87
88
89
90
                          </form>
                          <div class="dropdown-divider"></div>
                          <div id="dropdown-branches-results" class="dropdown-branches">
                            ${branchesListItems(branchesWithHrefs, repo.defaultBranch, branch.name, 'date')}
                          </div>
                        </div>
                      </div>
templates/file.njk:37
Before
36
37
38
39
40
41
    {% set annotations = fileInfo.repoName | getFileLastTouchInfo(fileInfo.branchName, fileInfo.file) %}
    <code style="white-space: pre;"><pre class="language-text">
{%- for annotation in annotations -%}
<a href="{{reposPath}}/{{fileInfo.repoName | slugify}}/branches/{{fileInfo.branchName | slugify}}/patches/{{annotation.sha}}">{{ (annotation.sha | truncate(6, true, '')) }}</a> {{ annotation.author }}
{% endfor -%}
    </pre></code>
  </div>
After
36
37
38
39
40
41
    {% set annotations = fileInfo.repoName | getFileLastTouchInfo(fileInfo.branchName, fileInfo.file) %}
    <code style="white-space: pre;"><pre class="language-text">
{%- for annotation in annotations -%}
<a href="{{reposPath}}/{{fileInfo.repoName | slugify}}/branches/{{fileInfo.branchName | slugify}}/commits/{{annotation.sha}}">{{ (annotation.sha | truncate(6, true, '')) }}</a> {{ annotation.author }}
{% endfor -%}
    </pre></code>
  </div>