Change:
Testing I wonder how well it scales to show multiple tag icons, why not find a new icon that resembles multiple tags: !
I like that. Adding as that would require a new Codicon...
!
Or just show one tag in the row, but show all of them on hover like you do now.
How about showing one badge pert type (ex: branch, remote branch, tag) and a number indicating how many they are. That way there is no need create new icons that would cause further confusion.
I am actually not entirely sure what value there is to distinguish 1 tag from N tags? I would just show 1 icon if there is any tag.
Seems reasonable. Let's start with that and see how things go.

Discussion:
} } <ins> function compareSourceControlHistoryItemRef(ref1: SourceControlHistoryItemRef, ref2: SourceControlHistoryItemRef): number { const getOrder = (ref: SourceControlHistoryItemRef): number => { if (ref.id.startsWith('refs/heads/')) { return 1; } else if (ref.id.startsWith('refs/remotes/')) { return 2; } else if (ref.id.startsWith('refs/tags/')) { return 3; } return 99; }; const ref1Order = getOrder(ref1); const ref2Order = getOrder(ref2); if (ref1Order !== ref2Order) { return ref1Order - ref2Order; } return ref1.name.localeCompare(ref2.name); } </ins> export class GitHistoryProvider implements SourceControlHistoryProvider, FileDecorationProvider, IDisposable { private readonly _onDidChangeDecorations = new EventEmitter<Uri[]>(); readonly onDidChangeFileDecorations: Event<Uri[]> = this._onDidChangeDecorations.event;

icon: new ThemeIcon('target') }); break; <del> case ref.startsWith('tag: refs/tags/'): references.push({ id: ref.substring('tag: '.length), name: ref.substring('tag: refs/tags/'.length), revision: commit.hash, icon: new ThemeIcon('tag') }); break; </del> case ref.startsWith('refs/heads/'): references.push({ id: ref,

icon: new ThemeIcon('cloud') }); break; <ins> case ref.startsWith('tag: refs/tags/'): references.push({ id: ref.substring('tag: '.length), name: ref.substring('tag: refs/tags/'.length), revision: commit.hash, icon: new ThemeIcon('tag') }); break; </ins> } } <del> return references; </del> <ins> return references.sort(compareSourceControlHistoryItemRef); </ins> } private async resolveHEADMergeBase(): Promise<Branch | undefined> {

import { IStorageService, StorageScope, StorageTarget } from '../../../../platform/storage/common/storage.js'; import { INotificationService } from '../../../../platform/notification/common/notification.js'; import { IExtensionService } from '../../../services/extensions/common/extensions.js'; <ins> import { groupBy as groupBy2 } from '../../../../base/common/collections.js'; </ins> const PICK_REPOSITORY_ACTION_ID = 'workbench.scm.action.graph.pickRepository'; const PICK_HISTORY_ITEM_REFS_ACTION_ID = 'workbench.scm.action.graph.pickHistoryItemRefs';

private _renderBadges(historyItem: ISCMHistoryItem, templateData: HistoryItemTemplate): void { templateData.elementDisposables.add(autorun(reader => { const labelConfig = this._badgesConfig.read(reader); <ins> const firstColoredRef = historyItem.references?.find(ref => ref.color); </ins> templateData.labelContainer.textContent = ''; <del> const firstColoredRef = historyItem.references?.find(ref => ref.color); for (const ref of historyItem.references ?? []) { if (!ref.color && labelConfig === 'filter') { </del> <ins> // Group history item references by color const historyItemRefsByColor = groupBy2( (historyItem.references ?? []), ref => ref.color ? ref.color : ''); for (const [key, historyItemRefs] of Object.entries(historyItemRefsByColor)) { // Skip badges with no color if (key === '' && labelConfig !== 'all') { </ins> continue; } <del> if (ref.icon && ThemeIcon.isThemeIcon(ref.icon)) { const elements = h('div.label', { style: { color: ref.color ? asCssVariable(historyItemHoverLabelForeground) : asCssVariable(foreground), backgroundColor: ref.color ? asCssVariable(ref.color) : asCssVariable(historyItemHoverDefaultLabelBackground) } }, [ h('div.icon@icon'), h('div.description@description') ]); elements.icon.classList.add(...ThemeIcon.asClassNameArray(ref.icon)); elements.description.textContent = ref.name; elements.description.style.display = ref === firstColoredRef ? '' : 'none'; </del> <ins> // Group history item references by icon const historyItemRefByIconId = groupBy2(historyItemRefs, ref => ThemeIcon.isThemeIcon(ref.icon) ? ref.icon.id : ''); for (const [key, historyItemRefs] of Object.entries(historyItemRefByIconId)) { if (key === '' || historyItemRefs.length === 0) { continue; } </ins> <del> append(templateData.labelContainer, elements.root); </del> <ins> this._renderBadge(historyItemRefs[0], historyItemRefs[0] === firstColoredRef, templateData); </ins> } } })); } <ins> private _renderBadge(historyItemRef: ISCMHistoryItemRef, showDescription: boolean, templateData: HistoryItemTemplate): void { if (!ThemeIcon.isThemeIcon(historyItemRef.icon)) { return; } const elements = h('div.label', { style: { color: historyItemRef.color ? asCssVariable(historyItemHoverLabelForeground) : asCssVariable(foreground), backgroundColor: historyItemRef.color ? asCssVariable(historyItemRef.color) : asCssVariable(historyItemHoverDefaultLabelBackground) } }, [ h('div.icon@icon'), h('div.description@description') ]); elements.icon.classList.add(...ThemeIcon.asClassNameArray(historyItemRef.icon)); elements.description.textContent = historyItemRef.name; elements.description.style.display = showDescription ? '' : 'none'; append(templateData.labelContainer, elements.root); } </ins> private _getHoverActions(historyItem: ISCMHistoryItem) { return [ {

currentHistoryItemRemoteRef?: ISCMHistoryItemRef, currentHistoryItemBaseRef?: ISCMHistoryItemRef ): number { <del> const getHistoryItemRefPriority = (ref: ISCMHistoryItemRef) => { </del> <ins> const getHistoryItemRefOrder = (ref: ISCMHistoryItemRef) => { </ins> if (ref.id === currentHistoryItemRef?.id) { return 1; } else if (ref.id === currentHistoryItemRemoteRef?.id) {

return 99; }; <del> // Assign priority (current > remote > base > color > name) const ref1Priority = getHistoryItemRefPriority(ref1); const ref2Priority = getHistoryItemRefPriority(ref2); </del> <ins> // Assign order (current > remote > base > color) const ref1Order = getHistoryItemRefOrder(ref1); const ref2Order = getHistoryItemRefOrder(ref2); </ins> <del> if (ref1Priority !== ref2Priority) { return ref1Priority - ref2Priority; } else { return ref1.name.localeCompare(ref2.name); } </del> <ins> return ref1Order - ref2Order; </ins> }