feat: add branch sorting option

Author: kurtextrem

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.

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>

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: {
@@ -3457,6 +3458,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 +3637,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}

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 ?? BranchSortOrder.LastModified
     )
   }
 

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}

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

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}

app/src/ui/preferences/appearance.tsx

@@ -14,6 +14,8 @@ import { tabSizeDefault } from '../../lib/stores/app-store'
 import { Checkbox, CheckboxValue } from '../lib/checkbox'
 import { ShowBranchNameInRepoListSetting } from '../../models/show-branch-name-in-repo-list'
 import { parseEnumValue } from '../../lib/enum'
+import { assertNever } from '../../lib/fatal-error'
+import { BranchSortOrder } from '../../models/branch-sort-order'
 
 interface IAppearanceProps {
   readonly selectedTheme: ApplicationTheme
@@ -30,6 +32,8 @@ interface IAppearanceProps {
   readonly onShowBranchNameInRepoListChanged: (
     value: ShowBranchNameInRepoListSetting
   ) => void
+  readonly branchSortOrder: BranchSortOrder
+  readonly onBranchSortOrderChanged: (sortOrder: BranchSortOrder) => void
 }
 
 interface IAppearanceState {
@@ -231,6 +235,45 @@ export class Appearance extends React.Component<
     }
   }
 
+  private onBranchSortOrderChanged = (branchSortOrder: BranchSortOrder) => {
+    this.props.onBranchSortOrderChanged(branchSortOrder)
+  }
+
+  private renderBranchSortOrder() {
+    const { branchSortOrder } = this.props
+
+    return (
+      <div className="advanced-section">
+        <h2 id="branch-sort-order-heading">Sort branches</h2>
+
+        <RadioGroup<BranchSortOrder>
+          ariaLabelledBy="branch-sort-order-heading"
+          selectedKey={branchSortOrder}
+          radioButtonKeys={[
+            BranchSortOrder.Alphabetical,
+            BranchSortOrder.LastModified,
+          ]}
+          onSelectionChanged={this.onBranchSortOrderChanged}
+          renderRadioButtonLabelContents={this.renderBranchSortOptionLabel}
+        />
+      </div>
+    )
+  }
+
+  private renderBranchSortOptionLabel = (branchSortOrder: BranchSortOrder) => {
+    switch (branchSortOrder) {
+      case BranchSortOrder.Alphabetical:
+        return 'Alphabetical'
+      case BranchSortOrder.LastModified:
+        return 'Last modified'
+      default:
+        return assertNever(
+          branchSortOrder,
+          `Unknown branch sort order: ${branchSortOrder}`
+        )
+    }
+  }
+
   private renderRepositoryList() {
     return (
       <div className="advanced-section">
@@ -303,6 +346,7 @@ export class Appearance extends React.Component<
       <DialogContent>
         {this.renderSelectedTheme()}
         {this.renderRepositoryList()}
+        {this.renderBranchSortOrder()}
         {this.renderWorktreeVisibility()}
         {this.renderSelectedTabSize()}
         {this.renderTitleBarStyleDropdown()}

app/src/ui/preferences/preferences.tsx

@@ -24,6 +24,7 @@ import { ApplicationTheme } from '../lib/application-theme'
 import { TitleBarStyle } from '../lib/title-bar-style'
 import { OkCancelButtonGroup } from '../dialog/ok-cancel-button-group'
 import { Integrations } from './integrations'
+import { BranchSortOrder } from '../../models/branch-sort-order'
 import {
   UncommittedChangesStrategy,
   defaultUncommittedChangesStrategy,
@@ -95,6 +96,7 @@ interface IPreferencesProps {
   readonly showWorktrees: boolean
   readonly repositoryIndicatorsEnabled: boolean
   readonly showBranchNameInRepoList: ShowBranchNameInRepoListSetting
+  readonly branchSortOrder: BranchSortOrder
   readonly hideWindowOnQuit: boolean
   readonly onEditGlobalGitConfig: () => void
   readonly underlineLinks: boolean
@@ -147,6 +149,7 @@ interface IPreferencesState {
   readonly existingLockFilePath?: string
   readonly repositoryIndicatorsEnabled: boolean
   readonly showBranchNameInRepoList: ShowBranchNameInRepoListSetting
+  readonly branchSortOrder: BranchSortOrder
   readonly hideWindowOnQuit: boolean
 
   readonly initiallySelectedTheme: ApplicationTheme
@@ -223,6 +226,7 @@ export class Preferences extends React.Component<
       showWorktrees: this.props.showWorktrees,
       repositoryIndicatorsEnabled: this.props.repositoryIndicatorsEnabled,
       showBranchNameInRepoList: this.props.showBranchNameInRepoList,
+      branchSortOrder: this.props.branchSortOrder,
       hideWindowOnQuit: this.props.hideWindowOnQuit,
       initiallySelectedTheme: this.props.selectedTheme,
       initiallySelectedTabSize: this.props.selectedTabSize,
@@ -560,6 +564,8 @@ export class Preferences extends React.Component<
             onShowBranchNameInRepoListChanged={
               this.onShowBranchNameInRepoListChanged
             }
+            branchSortOrder={this.state.branchSortOrder}
+            onBranchSortOrderChanged={this.onBranchSortOrderChanged}
           />
         )
         break
@@ -811,6 +817,10 @@ export class Preferences extends React.Component<
     this.setState({ showBranchNameInRepoList })
   }
 
+  private onBranchSortOrderChanged = (branchSortOrder: BranchSortOrder) => {
+    this.setState({ branchSortOrder })
+  }
+
   private onSelectedTabSizeChanged = (tabSize: number) => {
     this.props.dispatcher.setSelectedTabSize(tabSize)
   }
@@ -1017,6 +1027,7 @@ export class Preferences extends React.Component<
     dispatcher.setDiffCheckMarksSetting(this.state.showDiffCheckMarks)
 
     dispatcher.setShowBranchNameInRepoList(this.state.showBranchNameInRepoList)
+    dispatcher.setBranchSortOrder(this.state.branchSortOrder)
 
     this.props.onDismissed()
   }

app/src/ui/repository.tsx

@@ -38,6 +38,7 @@ import { clamp } from '../lib/clamp'
 import { Emoji } from '../lib/emoji'
 import { PopupType } from '../models/popup'
 import { Branch } from '../models/branch'
+import { BranchSortOrder } from '../models/branch-sort-order'
 
 interface IRepositoryViewProps {
   readonly repository: Repository
@@ -113,6 +114,8 @@ interface IRepositoryViewProps {
     sourceBranch?: Branch
   ) => void
 
+  readonly branchSortOrder: BranchSortOrder
+
   /** The user's preference of pull request suggested next action to use **/
   readonly pullRequestSuggestedNextAction?: PullRequestSuggestedNextAction
 
@@ -417,6 +420,7 @@ export class RepositoryView extends React.Component<
         repository={repository}
         isLocalRepository={remote === null}
         compareState={compareState}
+        branchSortOrder={this.props.branchSortOrder}
         selectedCommitShas={shas}
         shasToHighlight={compareState.shasToHighlight}
         currentBranch={currentBranch}
@@ -473,6 +477,7 @@ export class RepositoryView extends React.Component<
         repository={repository}
         isLocalRepository={remote === null}
         compareState={compareState}
+        branchSortOrder={this.props.branchSortOrder}
         selectedCommitShas={shas}
         shasToHighlight={compareState.shasToHighlight}
         currentBranch={currentBranch}