Merge pull request #88 from kurtextrem/feature/branch-sorting

pol-rivero · web-flow · commit 3a33154d8577 · 2026-03-18T15:49:28.000+01:00
feat: add branch sorting option
diff --git a/app/src/lib/app-state.ts b/app/src/lib/app-state.ts
@@ -41,6 +41,7 @@ import { IStashEntry } from '../models/stash-entry'
 import { TutorialStep } from '../models/tutorial-step'
 import { UncommittedChangesStrategy } from '../models/uncommitted-changes-strategy'
 import { ShowBranchNameInRepoListSetting } from '../models/show-branch-name-in-repo-list'
+import { BranchSortOrder } from '../models/branch-sort-order'
 import { DragElement } from '../models/drag-drop'
 import { ILastThankYou } from '../models/last-thank-you'
 import {
@@ -398,6 +399,9 @@ export interface IAppState {
   /** Controls when to show the current branch name next to each repository in the repository list */
   readonly showBranchNameInRepoList: ShowBranchNameInRepoListSetting
 
+  /** Controls the sort order for branch lists in branch-selection views */
+  readonly branchSortOrder: BranchSortOrder
+
   /**
    * Cached repo rulesets. Used to prevent repeatedly querying the same
    * rulesets to check their bypass status.
diff --git a/app/src/lib/format-relative.ts b/app/src/lib/format-relative.ts
@@ -15,6 +15,10 @@ const getRelativeFormatter = mem(
 )
 
 export function formatRelative(ms: number) {
+  if (!Number.isFinite(ms)) {
+    return 'Invalid date'
+  }
+
   const formatter = getRelativeFormatter('en-US', { numeric: 'auto' })
 
   const sign = ms < 0 ? -1 : 1
diff --git a/app/src/lib/stores/app-store.ts b/app/src/lib/stores/app-store.ts
@@ -182,6 +182,10 @@ import {
   defaultShowBranchNameInRepoListSetting,
   ShowBranchNameInRepoListSetting,
 } from '../../models/show-branch-name-in-repo-list'
+import {
+  BranchSortOrder,
+  DEFAULT_BRANCH_SORT_ORDER,
+} from '../../models/branch-sort-order'
 import { WorkflowPreferences } from '../../models/workflow-preferences'
 import { TrashNameLabel } from '../../ui/lib/context-menu'
 import { getDefaultDir } from '../../ui/lib/default-dir'
@@ -494,6 +498,7 @@ export const showDiffCheckMarksDefault = true
 export const showDiffCheckMarksKey = 'diff-check-marks-visible'
 
 export const showBranchNameInRepoListKey = 'show-branch-name-in-repo-list'
+const branchSortOrderKey = 'branch-sort-order'
 
 const commitMessageGenerationDisclaimerLastSeenKey =
   'commit-message-generation-disclaimer-last-seen'
@@ -663,6 +668,8 @@ export class AppStore extends TypedBaseStore<IAppState> {
   private showBranchNameInRepoList: ShowBranchNameInRepoListSetting =
     defaultShowBranchNameInRepoListSetting
 
+  private branchSortOrder: BranchSortOrder = DEFAULT_BRANCH_SORT_ORDER
+
   private cachedRepoRulesets = new Map<number, IAPIRepoRuleset>()
 
   private underlineLinks: boolean = underlineLinksDefault
@@ -1212,6 +1219,7 @@ export class AppStore extends TypedBaseStore<IAppState> {
       underlineLinks: this.underlineLinks,
       showDiffCheckMarks: this.showDiffCheckMarks,
       showBranchNameInRepoList: this.showBranchNameInRepoList,
+      branchSortOrder: this.branchSortOrder,
       updateState: updateStore.state,
       commitMessageGenerationDisclaimerLastSeen:
         this.commitMessageGenerationDisclaimerLastSeen,
@@ -2619,6 +2627,9 @@ export class AppStore extends TypedBaseStore<IAppState> {
       getEnum(showBranchNameInRepoListKey, ShowBranchNameInRepoListSetting) ??
       defaultShowBranchNameInRepoListSetting
 
+    this.branchSortOrder =
+      getEnum(branchSortOrderKey, BranchSortOrder) ?? DEFAULT_BRANCH_SORT_ORDER
+
     this.commitMessageGenerationDisclaimerLastSeen =
       getNumber(commitMessageGenerationDisclaimerLastSeenKey) ?? null
 
@@ -9202,6 +9213,14 @@ export class AppStore extends TypedBaseStore<IAppState> {
     }
   }
 
+  public _updateBranchSortOrder(branchSortOrder: BranchSortOrder) {
+    if (branchSortOrder !== this.branchSortOrder) {
+      this.branchSortOrder = branchSortOrder
+      localStorage.setItem(branchSortOrderKey, branchSortOrder)
+      this.emitUpdate()
+    }
+  }
+
   public _updateFileListFilter(
     repository: Repository,
     filterUpdate: Partial<IFileListFilterState>
diff --git a/app/src/ui/app.tsx b/app/src/ui/app.tsx
@@ -1659,6 +1659,7 @@ export class App extends React.Component<IAppProps, IAppState> {
             underlineLinks={this.state.underlineLinks}
             showDiffCheckMarks={this.state.showDiffCheckMarks}
             showBranchNameInRepoList={this.state.showBranchNameInRepoList}
+            branchSortOrder={this.state.branchSortOrder}
           />
         )
       case PopupType.RepositorySettings: {
@@ -2280,6 +2281,7 @@ export class App extends React.Component<IAppProps, IAppState> {
             askForConfirmationOnForcePush={
               this.state.askForConfirmationOnForcePush
             }
+            branchSortOrder={this.state.branchSortOrder}
             accounts={this.state.accounts}
             cachedRepoRulesets={this.state.cachedRepoRulesets}
             openFileInExternalEditor={this.getOpenFileInExternalEditorHandler(
@@ -2522,6 +2524,7 @@ export class App extends React.Component<IAppProps, IAppState> {
             externalEditorLabel={externalEditorLabel}
             showSideBySideDiff={showSideBySideDiff}
             currentBranchHasPullRequest={currentBranchHasPullRequest}
+            branchSortOrder={this.state.branchSortOrder}
             onDismissed={onPopupDismissedFn}
             onOpenInExternalEditor={this.onOpenInExternalEditor}
           />
@@ -3457,6 +3460,7 @@ export class App extends React.Component<IAppProps, IAppState> {
         dispatcher={this.props.dispatcher}
         isOpen={isOpen}
         branchDropdownWidth={this.state.branchDropdownWidth}
+        branchSortOrder={this.state.branchSortOrder}
         onDropDownStateChanged={this.onBranchDropdownStateChanged}
         repository={repository}
         repositoryState={selection.state}
@@ -3635,6 +3639,7 @@ export class App extends React.Component<IAppProps, IAppState> {
           stashedFilesWidth={state.stashedFilesWidth}
           issuesStore={this.props.issuesStore}
           gitHubUserStore={this.props.gitHubUserStore}
+          branchSortOrder={state.branchSortOrder}
           onViewCommitOnGitHub={this.onViewCommitOnGitHub}
           imageDiffType={state.imageDiffType}
           hideWhitespaceInChangesDiff={state.hideWhitespaceInChangesDiff}
diff --git a/app/src/ui/branches/branch-list.tsx b/app/src/ui/branches/branch-list.tsx
@@ -58,6 +58,11 @@ interface IBranchListProps {
    */
   readonly allWorktrees: ReadonlyArray<WorktreeEntry>
 
+  /**
+   * The sort order for branch lists in the current user preferences.
+   */
+  readonly branchSortOrder: BranchSortOrder
+
   /**
    * The currently selected branch in the list, see the onSelectionChanged prop.
    */
@@ -179,7 +184,7 @@ export class BranchList extends React.Component<IBranchListProps> {
       this.props.allBranches,
       this.props.recentBranches,
       this.props.allWorktrees,
-      BranchSortOrder.LastModified
+      this.props.branchSortOrder
     )
   }
 
diff --git a/app/src/ui/branches/branch-renderer.tsx b/app/src/ui/branches/branch-renderer.tsx
@@ -46,6 +46,10 @@ export function getDefaultAriaLabelForBranch(item: IBranchListItem): string {
     return branch.name
   }
 
+  if (Number.isNaN(authorDate.getTime())) {
+    return branch.name
+  }
+
   const { relativeText } = getRelativeTimeInfoFromDate(authorDate, true)
   return `${item.branch.name} ${relativeText}`
 }
diff --git a/app/src/ui/branches/branch-select.tsx b/app/src/ui/branches/branch-select.tsx
@@ -4,6 +4,7 @@ import { Branch } from '../../models/branch'
 import { ClickSource } from '../lib/list'
 import { PopoverDropdown } from '../lib/popover-dropdown'
 import { BranchList } from './branch-list'
+import { BranchSortOrder } from '../../models/branch-sort-order'
 import {
   getDefaultAriaLabelForBranch,
   renderDefaultBranch,
@@ -37,6 +38,11 @@ interface IBranchSelectProps {
    */
   readonly recentBranches: ReadonlyArray<Branch>
 
+  /**
+   * The sort order for branch lists in the current user preferences.
+   */
+  readonly branchSortOrder: BranchSortOrder
+
   /** Called when the user changes the selected branch. */
   readonly onChange?: (branch: Branch) => void
 
@@ -115,6 +121,7 @@ export class BranchSelect extends React.Component<
           allBranches={allBranches}
           currentBranch={currentBranch}
           defaultBranch={defaultBranch}
+          branchSortOrder={this.props.branchSortOrder}
           recentBranches={recentBranches}
           allWorktrees={[]}
           filterText={filterText}
diff --git a/app/src/ui/branches/branches-container.tsx b/app/src/ui/branches/branches-container.tsx
@@ -24,6 +24,7 @@ import { Button } from '../lib/button'
 import { BranchList } from './branch-list'
 import { PullRequestList } from './pull-request-list'
 import { IBranchListItem } from './group-branches'
+import { BranchSortOrder } from '../../models/branch-sort-order'
 import {
   getDefaultAriaLabelForBranch,
   renderDefaultBranch,
@@ -53,6 +54,8 @@ interface IBranchesContainerProps {
   readonly onSetAsDefaultBranch: (branchName: string) => void
   readonly onDeleteBranch: (branchName: string) => void
 
+  readonly branchSortOrder: BranchSortOrder
+
   /** All worktrees in the repository. */
   readonly allWorktrees: ReadonlyArray<WorktreeEntry>
 
@@ -272,6 +275,7 @@ export class BranchesContainer extends React.Component<
             currentBranch={this.props.currentBranch}
             allBranches={this.props.allBranches}
             recentBranches={this.props.recentBranches}
+            branchSortOrder={this.props.branchSortOrder}
             allWorktrees={this.props.allWorktrees}
             onItemClick={this.onBranchItemClick}
             filterText={this.state.branchFilterText}
diff --git a/app/src/ui/dispatcher/dispatcher.ts b/app/src/ui/dispatcher/dispatcher.ts
@@ -103,6 +103,7 @@ import {
 } from '../../lib/stores/commit-status-store'
 import { MergeTreeResult } from '../../models/merge'
 import { UncommittedChangesStrategy } from '../../models/uncommitted-changes-strategy'
+import { BranchSortOrder } from '../../models/branch-sort-order'
 import { ShowBranchNameInRepoListSetting } from '../../models/show-branch-name-in-repo-list'
 import { IStashEntry } from '../../models/stash-entry'
 import { WorkflowPreferences } from '../../models/workflow-preferences'
@@ -4203,6 +4204,10 @@ export class Dispatcher {
     )
   }
 
+  public setBranchSortOrder(branchSortOrder: BranchSortOrder) {
+    return this.appStore._updateBranchSortOrder(branchSortOrder)
+  }
+
   public testPruneBranches() {
     return this.appStore._testPruneBranches()
   }
diff --git a/app/src/ui/history/compare.tsx b/app/src/ui/history/compare.tsx
@@ -29,6 +29,7 @@ import { DragType } from '../../models/drag-drop'
 import { PopupType } from '../../models/popup'
 import { getUniqueCoauthorsAsAuthors } from '../../lib/unique-coauthors-as-authors'
 import { getSquashedCommitDescription } from '../../lib/squash/squashed-commit-description'
+import { BranchSortOrder } from '../../models/branch-sort-order'
 import { doMergeCommitsExistAfterCommit } from '../../lib/git'
 import { KeyboardInsertionData } from '../lib/list'
 import { Account } from '../../models/account'
@@ -47,6 +48,7 @@ interface ICompareSidebarProps {
   readonly dispatcher: Dispatcher
   readonly currentBranch: Branch | null
   readonly selectedCommitShas: ReadonlyArray<string>
+  readonly branchSortOrder: BranchSortOrder
   readonly onRevertCommit: (commit: Commit) => void
   readonly onAmendCommit: (commit: Commit, isLocalCommit: boolean) => void
   readonly onViewCommitOnGitHub: (sha: string) => void
@@ -413,6 +415,7 @@ export class CompareSidebar extends React.Component<
         allBranches={branches}
         recentBranches={recentBranches}
         allWorktrees={[]}
+        branchSortOrder={this.props.branchSortOrder}
         filterText={filterText}
         textbox={this.textbox!}
         selectedBranch={this.state.focusedBranch}
diff --git a/app/src/ui/multi-commit-operation/base-multi-commit-operation.tsx b/app/src/ui/multi-commit-operation/base-multi-commit-operation.tsx
@@ -15,11 +15,15 @@ import { PopupType } from '../../models/popup'
 import { Account } from '../../models/account'
 import { IAPIRepoRuleset } from '../../lib/api'
 import { Emoji } from '../../lib/emoji'
+import { BranchSortOrder } from '../../models/branch-sort-order'
 
 export interface IMultiCommitOperationProps {
   readonly repository: Repository
   readonly dispatcher: Dispatcher
 
+  // eslint-disable-next-line react/no-unused-prop-types
+  readonly branchSortOrder: BranchSortOrder
+
   /** The current state of the multi commit operation */
   readonly state: IMultiCommitOperationState
 
diff --git a/app/src/ui/multi-commit-operation/cherry-pick.tsx b/app/src/ui/multi-commit-operation/cherry-pick.tsx
@@ -80,6 +80,7 @@ export abstract class CherryPick extends BaseMultiCommitOperation {
       <ChooseTargetBranchDialog
         key="choose-target-branch"
         repository={this.props.repository}
+        branchSortOrder={this.props.branchSortOrder}
         allBranches={allBranches}
         defaultBranch={defaultBranch}
         recentBranches={recentBranches}
diff --git a/app/src/ui/multi-commit-operation/choose-branch/base-choose-branch-dialog.tsx b/app/src/ui/multi-commit-operation/choose-branch/base-choose-branch-dialog.tsx
@@ -3,6 +3,7 @@ import { Branch } from '../../../models/branch'
 import { Repository } from '../../../models/repository'
 import { IMatches } from '../../../lib/fuzzy-find'
 import { Dialog, DialogContent, DialogFooter } from '../../dialog'
+import { BranchSortOrder } from '../../../models/branch-sort-order'
 import {
   BranchList,
   IBranchListItem,
@@ -88,6 +89,9 @@ export interface IBaseChooseBranchDialogProps {
    */
   readonly operation: MultiCommitOperationKind
 
+  /** The sort order for branch lists in the current user preferences. */
+  readonly branchSortOrder: BranchSortOrder
+
   /**
    * A function that's called when the dialog is dismissed by the user in the
    * ways described in the Dialog component's dismissable prop.
@@ -237,6 +241,7 @@ export class ChooseBranchDialog extends React.Component<
             defaultBranch={this.props.defaultBranch}
             recentBranches={this.props.recentBranches}
             allWorktrees={[]}
+            branchSortOrder={this.props.branchSortOrder}
             filterText={this.state.filterText}
             onFilterTextChanged={this.onFilterTextChanged}
             selectedBranch={selectedBranch}
diff --git a/app/src/ui/multi-commit-operation/choose-branch/choose-target-branch.tsx b/app/src/ui/multi-commit-operation/choose-branch/choose-target-branch.tsx
@@ -15,6 +15,7 @@ import {
 import { ClickSource } from '../../lib/list'
 import { getDefaultAriaLabelForBranch } from '../../branches/branch-renderer'
 import { Repository } from '../../../models/repository'
+import { BranchSortOrder } from '../../../models/branch-sort-order'
 
 interface IChooseTargetBranchDialogProps {
   readonly repository: Repository
@@ -59,6 +60,9 @@ interface IChooseTargetBranchDialogProps {
    * Call back to invoke create new branch dialog
    */
   readonly onCreateNewBranch: (targetBranchName: string) => void
+
+  /** The sort order for branch lists in the current user preferences. */
+  readonly branchSortOrder: BranchSortOrder
 }
 
 interface IChooseTargetBranchDialogState {
@@ -191,6 +195,7 @@ export class ChooseTargetBranchDialog extends React.Component<
             defaultBranch={this.props.defaultBranch}
             recentBranches={this.props.recentBranches}
             allWorktrees={[]}
+            branchSortOrder={this.props.branchSortOrder}
             filterText={this.state.filterText}
             onFilterTextChanged={this.onFilterTextChanged}
             onFilterListResultsChanged={this.onFilterListResultsChanged}
diff --git a/app/src/ui/multi-commit-operation/merge.tsx b/app/src/ui/multi-commit-operation/merge.tsx
@@ -123,6 +123,7 @@ export abstract class Merge extends BaseMultiCommitOperation {
             ? MultiCommitOperationKind.Squash
             : MultiCommitOperationKind.Merge
         }
+        branchSortOrder={this.props.branchSortOrder}
         onDismissed={this.onFlowEnded}
       />
     )
diff --git a/app/src/ui/multi-commit-operation/multi-commit-operation.tsx b/app/src/ui/multi-commit-operation/multi-commit-operation.tsx
@@ -29,6 +29,7 @@ export class MultiCommitOperation extends React.Component<IMultiCommitOperationP
             askForConfirmationOnForcePush={
               this.props.askForConfirmationOnForcePush
             }
+            branchSortOrder={this.props.branchSortOrder}
             accounts={this.props.accounts}
             cachedRepoRulesets={this.props.cachedRepoRulesets}
             openFileInExternalEditor={this.props.openFileInExternalEditor}
@@ -48,6 +49,7 @@ export class MultiCommitOperation extends React.Component<IMultiCommitOperationP
             askForConfirmationOnForcePush={
               this.props.askForConfirmationOnForcePush
             }
+            branchSortOrder={this.props.branchSortOrder}
             accounts={this.props.accounts}
             cachedRepoRulesets={this.props.cachedRepoRulesets}
             openFileInExternalEditor={this.props.openFileInExternalEditor}
@@ -67,6 +69,7 @@ export class MultiCommitOperation extends React.Component<IMultiCommitOperationP
             askForConfirmationOnForcePush={
               this.props.askForConfirmationOnForcePush
             }
+            branchSortOrder={this.props.branchSortOrder}
             accounts={this.props.accounts}
             cachedRepoRulesets={this.props.cachedRepoRulesets}
             openFileInExternalEditor={this.props.openFileInExternalEditor}
diff --git a/app/src/ui/multi-commit-operation/rebase.tsx b/app/src/ui/multi-commit-operation/rebase.tsx
@@ -63,6 +63,7 @@ export abstract class Rebase extends BaseRebase {
         currentBranch={currentBranch}
         initialBranch={initialBranch}
         operation={MultiCommitOperationKind.Rebase}
+        branchSortOrder={this.props.branchSortOrder}
         onDismissed={this.onFlowEnded}
       />
     )
diff --git a/app/src/ui/open-pull-request/open-pull-request-dialog.tsx b/app/src/ui/open-pull-request/open-pull-request-dialog.tsx
@@ -16,6 +16,7 @@ import {
 import { PullRequestFilesChanged } from './pull-request-files-changed'
 import { PullRequestMergeStatus } from './pull-request-merge-status'
 import { ComputedAction } from '../../models/computed-action'
+import { BranchSortOrder } from '../../models/branch-sort-order'
 
 interface IOpenPullRequestDialogProps {
   readonly repository: Repository
@@ -74,6 +75,8 @@ interface IOpenPullRequestDialogProps {
   /** Width to use for the files list pane in the files changed view */
   readonly fileListWidth: IConstrainedValue
 
+  readonly branchSortOrder: BranchSortOrder
+
   /** If the latest commit of the pull request is not local, this will contain
    * it's SHA  */
   readonly nonLocalCommitSHA: string | null
@@ -132,6 +135,7 @@ export class OpenPullRequestDialog extends React.Component<IOpenPullRequestDialo
         defaultBranch={defaultBranch}
         prBaseBranches={prBaseBranches}
         prRecentBaseBranches={prRecentBaseBranches}
+        branchSortOrder={this.props.branchSortOrder}
         commitCount={commitSHAs?.length ?? 0}
         changesetData={changesetData}
         onBranchChange={this.onBranchChange}
diff --git a/app/src/ui/open-pull-request/open-pull-request-header.tsx b/app/src/ui/open-pull-request/open-pull-request-header.tsx
diff --git a/app/src/ui/preferences/appearance.tsx b/app/src/ui/preferences/appearance.tsx
diff --git a/app/src/ui/preferences/preferences.tsx b/app/src/ui/preferences/preferences.tsx
diff --git a/app/src/ui/repository.tsx b/app/src/ui/repository.tsx
diff --git a/app/src/ui/toolbar/branch-dropdown.tsx b/app/src/ui/toolbar/branch-dropdown.tsx

Original file line number	Diff line number	Diff line change
`@@ -15,6 +15,10 @@ const getRelativeFormatter = mem(`
`15`	`15`	`)`
`16`	`16`
`17`	`17`	`export function formatRelative(ms: number) {`
	`18`	`+ if (!Number.isFinite(ms)) {`
	`19`	`+ return 'Invalid date'`
	`20`	`+ }`
	`21`	`+`
`18`	`22`	`const formatter = getRelativeFormatter('en-US', { numeric: 'auto' })`
`19`	`23`
`20`	`24`	`const sign = ms < 0 ? -1 : 1`
Original file line number	Diff line number	Diff line change
`@@ -46,6 +46,10 @@ export function getDefaultAriaLabelForBranch(item: IBranchListItem): string {`
`46`	`46`	`return branch.name`
`47`	`47`	`}`
`48`	`48`
	`49`	`+ if (Number.isNaN(authorDate.getTime())) {`
	`50`	`+ return branch.name`
	`51`	`+ }`
	`52`	`+`
`49`	`53`	`const { relativeText } = getRelativeTimeInfoFromDate(authorDate, true)`
`50`	`54`	return `${item.branch.name} ${relativeText}`
`51`	`55`	`}`
Original file line number	Diff line number	Diff line change
`@@ -103,6 +103,7 @@ import {`
`103`	`103`	`} from '../../lib/stores/commit-status-store'`
`104`	`104`	`import { MergeTreeResult } from '../../models/merge'`
`105`	`105`	`import { UncommittedChangesStrategy } from '../../models/uncommitted-changes-strategy'`
	`106`	`+import { BranchSortOrder } from '../../models/branch-sort-order'`
`106`	`107`	`import { ShowBranchNameInRepoListSetting } from '../../models/show-branch-name-in-repo-list'`
`107`	`108`	`import { IStashEntry } from '../../models/stash-entry'`
`108`	`109`	`import { WorkflowPreferences } from '../../models/workflow-preferences'`
`@@ -4203,6 +4204,10 @@ export class Dispatcher {`
`4203`	`4204`	`)`
`4204`	`4205`	`}`
`4205`	`4206`
	`4207`	`+ public setBranchSortOrder(branchSortOrder: BranchSortOrder) {`
	`4208`	`+ return this.appStore._updateBranchSortOrder(branchSortOrder)`
	`4209`	`+ }`
	`4210`	`+`
`4206`	`4211`	`public testPruneBranches() {`
`4207`	`4212`	`return this.appStore._testPruneBranches()`
`4208`	`4213`	`}`