Merge pull request #76 from guplem/gdp-show-branch-in-repo-list

pol-rivero · web-flow · commit 8fd53d192108 · 2026-03-06T15:32:12.000+01:00
Show current branch name in the repository list
diff --git a/app/src/lib/app-state.ts b/app/src/lib/app-state.ts
@@ -394,6 +394,9 @@ export interface IAppState {
   /** Whether or not the user will see check marks indicating a line is included in the check in the diff */
   readonly showDiffCheckMarks: boolean
 
+  /** Whether or not to show the current branch name next to each repository in the repository list */
+  readonly showBranchNameInRepoList: boolean
+
   /**
    * Cached repo rulesets. Used to prevent repeatedly querying the same
    * rulesets to check their bypass status.
diff --git a/app/src/lib/stores/app-store.ts b/app/src/lib/stores/app-store.ts
@@ -481,6 +481,9 @@ export const underlineLinksDefault = true
 export const showDiffCheckMarksDefault = true
 export const showDiffCheckMarksKey = 'diff-check-marks-visible'
 
+export const showBranchNameInRepoListDefault = false
+export const showBranchNameInRepoListKey = 'show-branch-name-in-repo-list'
+
 const commitMessageGenerationDisclaimerLastSeenKey =
   'commit-message-generation-disclaimer-last-seen'
 
@@ -646,6 +649,8 @@ export class AppStore extends TypedBaseStore<IAppState> {
 
   private showDiffCheckMarks: boolean = showDiffCheckMarksDefault
 
+  private showBranchNameInRepoList: boolean = showBranchNameInRepoListDefault
+
   private cachedRepoRulesets = new Map<number, IAPIRepoRuleset>()
 
   private underlineLinks: boolean = underlineLinksDefault
@@ -1193,6 +1198,7 @@ export class AppStore extends TypedBaseStore<IAppState> {
       cachedRepoRulesets: this.cachedRepoRulesets,
       underlineLinks: this.underlineLinks,
       showDiffCheckMarks: this.showDiffCheckMarks,
+      showBranchNameInRepoList: this.showBranchNameInRepoList,
       updateState: updateStore.state,
       commitMessageGenerationDisclaimerLastSeen:
         this.commitMessageGenerationDisclaimerLastSeen,
@@ -2596,6 +2602,11 @@ export class AppStore extends TypedBaseStore<IAppState> {
       showDiffCheckMarksDefault
     )
 
+    this.showBranchNameInRepoList = getBoolean(
+      showBranchNameInRepoListKey,
+      showBranchNameInRepoListDefault
+    )
+
     this.commitMessageGenerationDisclaimerLastSeen =
       getNumber(commitMessageGenerationDisclaimerLastSeenKey) ?? null
 
@@ -3991,6 +4002,7 @@ export class AppStore extends TypedBaseStore<IAppState> {
     lookup.set(repository.id, {
       aheadBehind: status.branchAheadBehind || null,
       changedFilesCount: status.workingDirectory.files.length,
+      branchName: status.currentBranch,
     })
   }
   /**
@@ -4032,9 +4044,11 @@ export class AppStore extends TypedBaseStore<IAppState> {
       const existing = lookup.get(repository.id)
       lookup.set(repository.id, {
         aheadBehind: aheadBehind,
-        // We don't need to update changedFilesCount here since it was already
-        // set when calling `updateSidebarIndicator()` with the status object.
+        // We don't need to update changedFilesCount or branchName here since
+        // they were already set when calling `updateSidebarIndicator()` with
+        // the status object.
         changedFilesCount: existing?.changedFilesCount ?? 0,
+        branchName: existing?.branchName,
       })
       this.emitUpdate()
     }
@@ -9120,6 +9134,14 @@ export class AppStore extends TypedBaseStore<IAppState> {
     }
   }
 
+  public _updateShowBranchNameInRepoList(showBranchNameInRepoList: boolean) {
+    if (showBranchNameInRepoList !== this.showBranchNameInRepoList) {
+      this.showBranchNameInRepoList = showBranchNameInRepoList
+      setBoolean(showBranchNameInRepoListKey, showBranchNameInRepoList)
+      this.emitUpdate()
+    }
+  }
+
   public _updateFileListFilter(
     repository: Repository,
     filterUpdate: Partial<IFileListFilterState>
diff --git a/app/src/models/repository.ts b/app/src/models/repository.ts
@@ -220,6 +220,11 @@ export interface ILocalRepositoryState {
    * The number of uncommitted changes currently in the repository.
    */
   readonly changedFilesCount: number
+  /**
+   * The name of the currently checked out branch, or `undefined` if the
+   * branch name is not available (e.g. detached HEAD).
+   */
+  readonly branchName?: string
 }
 
 /**
diff --git a/app/src/ui/app.tsx b/app/src/ui/app.tsx
@@ -1644,6 +1644,7 @@ export class App extends React.Component<IAppProps, IAppState> {
             onEditGlobalGitConfig={this.editGlobalGitConfig}
             underlineLinks={this.state.underlineLinks}
             showDiffCheckMarks={this.state.showDiffCheckMarks}
+            showBranchNameInRepoList={this.state.showBranchNameInRepoList}
           />
         )
       case PopupType.RepositorySettings: {
@@ -3027,6 +3028,7 @@ export class App extends React.Component<IAppProps, IAppState> {
         externalEditorLabel={this.externalEditorLabel}
         shellLabel={useCustomShell ? undefined : selectedShell}
         dispatcher={this.props.dispatcher}
+        showBranchNameInRepoList={this.state.showBranchNameInRepoList}
       />
     )
   }
diff --git a/app/src/ui/dispatcher/dispatcher.ts b/app/src/ui/dispatcher/dispatcher.ts
@@ -4191,6 +4191,12 @@ export class Dispatcher {
     return this.appStore._updateShowDiffCheckMarks(diffCheckMarks)
   }
 
+  public setShowBranchNameInRepoList(showBranchNameInRepoList: boolean) {
+    return this.appStore._updateShowBranchNameInRepoList(
+      showBranchNameInRepoList
+    )
+  }
+
   public testPruneBranches() {
     return this.appStore._testPruneBranches()
   }
diff --git a/app/src/ui/preferences/appearance.tsx b/app/src/ui/preferences/appearance.tsx
@@ -24,6 +24,8 @@ interface IAppearanceProps {
   readonly onShowRecentRepositoriesChanged: (show: boolean) => void
   readonly showWorktrees: boolean
   readonly onShowWorktreesChanged: (show: boolean) => void
+  readonly showBranchNameInRepoList: boolean
+  readonly onShowBranchNameInRepoListChanged: (value: boolean) => void
 }
 
 interface IAppearanceState {
@@ -213,6 +215,12 @@ export class Appearance extends React.Component<
     )
   }
 
+  private onShowBranchNameInRepoListChanged = (
+    event: React.FormEvent<HTMLInputElement>
+  ) => {
+    this.props.onShowBranchNameInRepoListChanged(event.currentTarget.checked)
+  }
+
   private renderRepositoryList() {
     return (
       <div className="advanced-section">
@@ -227,6 +235,15 @@ export class Appearance extends React.Component<
           }
           onChange={this.onShowRecentRepositoriesChanged}
         />
+        <Checkbox
+          label="Show current branch name next to repository name"
+          value={
+            this.props.showBranchNameInRepoList
+              ? CheckboxValue.On
+              : CheckboxValue.Off
+          }
+          onChange={this.onShowBranchNameInRepoListChanged}
+        />
       </div>
     )
   }
diff --git a/app/src/ui/preferences/preferences.tsx b/app/src/ui/preferences/preferences.tsx
@@ -93,6 +93,7 @@ interface IPreferencesProps {
   readonly showRecentRepositories: boolean
   readonly showWorktrees: boolean
   readonly repositoryIndicatorsEnabled: boolean
+  readonly showBranchNameInRepoList: boolean
   readonly hideWindowOnQuit: boolean
   readonly onEditGlobalGitConfig: () => void
   readonly underlineLinks: boolean
@@ -144,6 +145,7 @@ interface IPreferencesState {
    */
   readonly existingLockFilePath?: string
   readonly repositoryIndicatorsEnabled: boolean
+  readonly showBranchNameInRepoList: boolean
   readonly hideWindowOnQuit: boolean
 
   readonly initiallySelectedTheme: ApplicationTheme
@@ -219,6 +221,7 @@ export class Preferences extends React.Component<
       showRecentRepositories: this.props.showRecentRepositories,
       showWorktrees: this.props.showWorktrees,
       repositoryIndicatorsEnabled: this.props.repositoryIndicatorsEnabled,
+      showBranchNameInRepoList: this.props.showBranchNameInRepoList,
       hideWindowOnQuit: this.props.hideWindowOnQuit,
       initiallySelectedTheme: this.props.selectedTheme,
       initiallySelectedTabSize: this.props.selectedTabSize,
@@ -552,6 +555,10 @@ export class Preferences extends React.Component<
             }
             showWorktrees={this.state.showWorktrees}
             onShowWorktreesChanged={this.onShowWorktreesChanged}
+            showBranchNameInRepoList={this.state.showBranchNameInRepoList}
+            onShowBranchNameInRepoListChanged={
+              this.onShowBranchNameInRepoListChanged
+            }
           />
         )
         break
@@ -797,6 +804,12 @@ export class Preferences extends React.Component<
     this.setState({ showDiffCheckMarks })
   }
 
+  private onShowBranchNameInRepoListChanged = (
+    showBranchNameInRepoList: boolean
+  ) => {
+    this.setState({ showBranchNameInRepoList })
+  }
+
   private onSelectedTabSizeChanged = (tabSize: number) => {
     this.props.dispatcher.setSelectedTabSize(tabSize)
   }
@@ -1002,6 +1015,8 @@ export class Preferences extends React.Component<
 
     dispatcher.setDiffCheckMarksSetting(this.state.showDiffCheckMarks)
 
+    dispatcher.setShowBranchNameInRepoList(this.state.showBranchNameInRepoList)
+
     this.props.onDismissed()
   }
 
diff --git a/app/src/ui/repositories-list/group-repositories.ts b/app/src/ui/repositories-list/group-repositories.ts
@@ -61,6 +61,7 @@ export interface IRepositoryListItem extends IFilterListItem {
   readonly needsDisambiguation: boolean
   readonly aheadBehind: IAheadBehind | null
   readonly changedFilesCount: number
+  readonly branchName?: string
 }
 
 const recentRepositoriesThreshold = 7
@@ -182,6 +183,7 @@ const toSortedListItems = (
           ((allNames.get(title) ?? 0) > 1 && group.kind === 'recent'),
         aheadBehind: repoState?.aheadBehind ?? null,
         changedFilesCount: repoState?.changedFilesCount ?? 0,
+        branchName: repoState?.branchName,
       }
     })
     .sort(({ repository: x }, { repository: y }) =>
diff --git a/app/src/ui/repositories-list/repositories-list.tsx b/app/src/ui/repositories-list/repositories-list.tsx
@@ -75,6 +75,9 @@ interface IRepositoriesListProps {
   readonly filterText: string
 
   readonly dispatcher: Dispatcher
+
+  /** Whether to show the branch name next to each repository */
+  readonly showBranchNameInRepoList: boolean
 }
 
 interface IRepositoriesListState {
@@ -165,6 +168,9 @@ export class RepositoriesList extends React.Component<
         matches={matches}
         aheadBehind={item.aheadBehind}
         changedFilesCount={item.changedFilesCount}
+        branchName={
+          this.props.showBranchNameInRepoList ? item.branchName : undefined
+        }
       />
     )
   }
@@ -193,6 +199,9 @@ export class RepositoriesList extends React.Component<
     item: IRepositoryListItem
   ): JSX.Element | string | null => {
     const { repository, aheadBehind, changedFilesCount } = item
+    const branchName = this.props.showBranchNameInRepoList
+      ? item.branchName
+      : undefined
     const gitHubRepo =
       repository instanceof Repository ? repository.gitHubRepository : null
     const alias = repository instanceof Repository ? repository.alias : null
@@ -217,6 +226,12 @@ export class RepositoriesList extends React.Component<
           <div className="label">Path: </div>
           {repository.path}
         </div>
+        {branchName && (
+          <div>
+            <div className="label">Branch: </div>
+            {branchName}
+          </div>
+        )}
         {aheadBehindTooltip && (
           <div>
             <div className="label">
diff --git a/app/src/ui/repositories-list/repository-list-item.tsx b/app/src/ui/repositories-list/repository-list-item.tsx
@@ -27,6 +27,9 @@ interface IRepositoryListItemProps {
 
   /** Number of uncommitted changes */
   readonly changedFilesCount: number
+
+  /** The name of the current branch, if available */
+  readonly branchName?: string
 }
 
 /** A repository item. */
@@ -76,6 +79,13 @@ export class RepositoryListItem extends React.Component<
           />
         </div>
 
+        {this.props.branchName && (
+          <span className="branch-name">
+            <Octicon className="branch-icon" symbol={octicons.gitBranch} />
+            {this.props.branchName}
+          </span>
+        )}
+
         {repository instanceof Repository &&
           renderRepoIndicators({
             aheadBehind: this.props.aheadBehind,
@@ -98,6 +108,7 @@ export class RepositoryListItem extends React.Component<
           {alias && <> ({alias})</>}
         </div>
         <div>{repo.path}</div>
+        {this.props.branchName && <div>Branch: {this.props.branchName}</div>}
       </>
     )
   }
@@ -109,7 +120,8 @@ export class RepositoryListItem extends React.Component<
     ) {
       return (
         nextProps.repository.id !== this.props.repository.id ||
-        nextProps.matches !== this.props.matches
+        nextProps.matches !== this.props.matches ||
+        nextProps.branchName !== this.props.branchName
       )
     } else {
       return true
diff --git a/app/styles/_variables.scss b/app/styles/_variables.scss
@@ -338,6 +338,7 @@ $overlay-background-color: rgba(0, 0, 0, 0.4);
     */
   --list-item-badge-color: #{$gray-800};
   --list-item-badge-background-color: #{$gray-200};
+  --branch-pill-background-color: #{$gray-100};
   --list-item-selected-badge-color: #{$gray-900};
   --list-item-selected-badge-background-color: #{$gray-300};
   --list-item-selected-active-badge-color: #{$gray-900};
diff --git a/app/styles/themes/_dark.scss b/app/styles/themes/_dark.scss
@@ -265,6 +265,7 @@ body.theme-dark {
     */
   --list-item-badge-color: var(--text-color);
   --list-item-badge-background-color: #{$gray-600};
+  --branch-pill-background-color: #{$gray-800};
   --list-item-selected-badge-color: #{$white};
   --list-item-selected-badge-background-color: #{$gray-500};
   --list-item-selected-active-badge-color: #{$gray-900};
diff --git a/app/styles/ui/_repository-list.scss b/app/styles/ui/_repository-list.scss

Original file line number	Diff line number	Diff line change
`@@ -1644,6 +1644,7 @@ export class App extends React.Component<IAppProps, IAppState> {`
`1644`	`1644`	`onEditGlobalGitConfig={this.editGlobalGitConfig}`
`1645`	`1645`	`underlineLinks={this.state.underlineLinks}`
`1646`	`1646`	`showDiffCheckMarks={this.state.showDiffCheckMarks}`
	`1647`	`+ showBranchNameInRepoList={this.state.showBranchNameInRepoList}`
`1647`	`1648`	`/>`
`1648`	`1649`	`)`
`1649`	`1650`	`case PopupType.RepositorySettings: {`
`@@ -3027,6 +3028,7 @@ export class App extends React.Component<IAppProps, IAppState> {`
`3027`	`3028`	`externalEditorLabel={this.externalEditorLabel}`
`3028`	`3029`	`shellLabel={useCustomShell ? undefined : selectedShell}`
`3029`	`3030`	`dispatcher={this.props.dispatcher}`
	`3031`	`+ showBranchNameInRepoList={this.state.showBranchNameInRepoList}`
`3030`	`3032`	`/>`
`3031`	`3033`	`)`
`3032`	`3034`	`}`
Original file line number	Diff line number	Diff line change
`@@ -4191,6 +4191,12 @@ export class Dispatcher {`
`4191`	`4191`	`return this.appStore._updateShowDiffCheckMarks(diffCheckMarks)`
`4192`	`4192`	`}`
`4193`	`4193`
	`4194`	`+ public setShowBranchNameInRepoList(showBranchNameInRepoList: boolean) {`
	`4195`	`+ return this.appStore._updateShowBranchNameInRepoList(`
	`4196`	`+ showBranchNameInRepoList`
	`4197`	`+ )`
	`4198`	`+ }`
	`4199`	`+`
`4194`	`4200`	`public testPruneBranches() {`
`4195`	`4201`	`return this.appStore._testPruneBranches()`
`4196`	`4202`	`}`
Original file line number	Diff line number	Diff line change
`@@ -24,6 +24,8 @@ interface IAppearanceProps {`
`24`	`24`	`readonly onShowRecentRepositoriesChanged: (show: boolean) => void`
`25`	`25`	`readonly showWorktrees: boolean`
`26`	`26`	`readonly onShowWorktreesChanged: (show: boolean) => void`
	`27`	`+ readonly showBranchNameInRepoList: boolean`
	`28`	`+ readonly onShowBranchNameInRepoListChanged: (value: boolean) => void`
`27`	`29`	`}`
`28`	`30`
`29`	`31`	`interface IAppearanceState {`
`@@ -213,6 +215,12 @@ export class Appearance extends React.Component<`
`213`	`215`	`)`
`214`	`216`	`}`
`215`	`217`
	`218`	`+ private onShowBranchNameInRepoListChanged = (`
	`219`	`+ event: React.FormEvent<HTMLInputElement>`
	`220`	`+ ) => {`
	`221`	`+ this.props.onShowBranchNameInRepoListChanged(event.currentTarget.checked)`
	`222`	`+ }`
	`223`	`+`
`216`	`224`	`private renderRepositoryList() {`
`217`	`225`	`return (`
`218`	`226`	`<div className="advanced-section">`
`@@ -227,6 +235,15 @@ export class Appearance extends React.Component<`
`227`	`235`	`}`
`228`	`236`	`onChange={this.onShowRecentRepositoriesChanged}`
`229`	`237`	`/>`
	`238`	`+ <Checkbox`
	`239`	`+ label="Show current branch name next to repository name"`
	`240`	`+ value={`
	`241`	`+ this.props.showBranchNameInRepoList`
	`242`	`+ ? CheckboxValue.On`
	`243`	`+ : CheckboxValue.Off`
	`244`	`+ }`
	`245`	`+ onChange={this.onShowBranchNameInRepoListChanged}`
	`246`	`+ />`
`230`	`247`	`</div>`
`231`	`248`	`)`
`232`	`249`	`}`
Original file line number	Diff line number	Diff line change
`@@ -61,6 +61,7 @@ export interface IRepositoryListItem extends IFilterListItem {`
`61`	`61`	`readonly needsDisambiguation: boolean`
`62`	`62`	`readonly aheadBehind: IAheadBehind \| null`
`63`	`63`	`readonly changedFilesCount: number`
	`64`	`+ readonly branchName?: string`
`64`	`65`	`}`
`65`	`66`
`66`	`67`	`const recentRepositoriesThreshold = 7`
`@@ -182,6 +183,7 @@ const toSortedListItems = (`
`182`	`183`	`((allNames.get(title) ?? 0) > 1 && group.kind === 'recent'),`
`183`	`184`	`aheadBehind: repoState?.aheadBehind ?? null,`
`184`	`185`	`changedFilesCount: repoState?.changedFilesCount ?? 0,`
	`186`	`+ branchName: repoState?.branchName,`
`185`	`187`	`}`
`186`	`188`	`})`
`187`	`189`	`.sort(({ repository: x }, { repository: y }) =>`