Add remove button to Command Palette recently used commands (#278276)

* Add remove button for recently used commands in Command Palette

Co-authored-by: jruales <[email protected]>

* Fix button order and TypeScript compilation errors

Co-authored-by: jruales <[email protected]>

* Simplify by using isInHistory instead of isRecentlyUsedSection

Co-authored-by: jruales <[email protected]>

---------

Co-authored-by: copilot-swe-agent[bot] <[email protected]>
Co-authored-by: jruales <[email protected]>

Author: Copilot

src/vs/platform/quickinput/browser/commandsQuickAccess.ts

@@ -5,12 +5,14 @@
 
 import { WorkbenchActionExecutedClassification, WorkbenchActionExecutedEvent } from '../../../base/common/actions.js';
 import { CancellationToken } from '../../../base/common/cancellation.js';
+import { Codicon } from '../../../base/common/codicons.js';
 import { toErrorMessage } from '../../../base/common/errorMessage.js';
 import { isCancellationError } from '../../../base/common/errors.js';
 import { IMatch, matchesBaseContiguousSubString, matchesWords, or } from '../../../base/common/filters.js';
 import { createSingleCallFunction } from '../../../base/common/functional.js';
 import { Disposable, DisposableStore, IDisposable } from '../../../base/common/lifecycle.js';
 import { LRUCache } from '../../../base/common/map.js';
+import { ThemeIcon } from '../../../base/common/themables.js';
 import { TfIdfCalculator, normalizeTfIdfScores } from '../../../base/common/tfIdf.js';
 import { localize } from '../../../nls.js';
 import { ILocalizedString } from '../../action/common/action.js';
@@ -20,9 +22,9 @@ import { IDialogService } from '../../dialogs/common/dialogs.js';
 import { IInstantiationService } from '../../instantiation/common/instantiation.js';
 import { IKeybindingService } from '../../keybinding/common/keybinding.js';
 import { ILogService } from '../../log/common/log.js';
-import { FastAndSlowPicks, IPickerQuickAccessItem, IPickerQuickAccessProviderOptions, PickerQuickAccessProvider, Picks } from './pickerQuickAccess.js';
+import { FastAndSlowPicks, IPickerQuickAccessItem, IPickerQuickAccessProviderOptions, PickerQuickAccessProvider, Picks, TriggerAction } from './pickerQuickAccess.js';
 import { IQuickAccessProviderRunOptions } from '../common/quickAccess.js';
-import { IQuickPickSeparator } from '../common/quickInput.js';
+import { IKeyMods, IQuickPickSeparator } from '../common/quickInput.js';
 import { IStorageService, StorageScope, StorageTarget, WillSaveStateReason } from '../../storage/common/storage.js';
 import { ITelemetryService } from '../../telemetry/common/telemetry.js';
 import { Categories } from '../../action/common/actionCommonCategories.js';
@@ -215,9 +217,10 @@ export abstract class AbstractCommandsQuickAccessProvider extends PickerQuickAcc
 		let addCommonlyUsedSeparator = !!this.options.suggestedCommandIds;
 		for (let i = 0; i < filteredCommandPicks.length; i++) {
 			const commandPick = filteredCommandPicks[i];
+			const isInHistory = !!this.commandsHistory.peek(commandPick.commandId);
 
 			// Separator: recently used
-			if (i === 0 && this.commandsHistory.peek(commandPick.commandId)) {
+			if (i === 0 && isInHistory) {
 				commandPicks.push({ type: 'separator', label: localize('recentlyUsed', "recently used") });
 				addOtherSeparator = true;
 			}
@@ -228,20 +231,20 @@ export abstract class AbstractCommandsQuickAccessProvider extends PickerQuickAcc
 			}
 
 			// Separator: commonly used
-			if (addCommonlyUsedSeparator && commandPick.tfIdfScore === undefined && !this.commandsHistory.peek(commandPick.commandId) && this.options.suggestedCommandIds?.has(commandPick.commandId)) {
+			if (addCommonlyUsedSeparator && commandPick.tfIdfScore === undefined && !isInHistory && this.options.suggestedCommandIds?.has(commandPick.commandId)) {
 				commandPicks.push({ type: 'separator', label: localize('commonlyUsed', "commonly used") });
 				addOtherSeparator = true;
 				addCommonlyUsedSeparator = false;
 			}
 
 			// Separator: other commands
-			if (addOtherSeparator && commandPick.tfIdfScore === undefined && !this.commandsHistory.peek(commandPick.commandId) && !this.options.suggestedCommandIds?.has(commandPick.commandId)) {
+			if (addOtherSeparator && commandPick.tfIdfScore === undefined && !isInHistory && !this.options.suggestedCommandIds?.has(commandPick.commandId)) {
 				commandPicks.push({ type: 'separator', label: localize('morecCommands', "other commands") });
 				addOtherSeparator = false;
 			}
 
 			// Command
-			commandPicks.push(this.toCommandPick(commandPick, runOptions));
+			commandPicks.push(this.toCommandPick(commandPick, runOptions, isInHistory));
 		}
 
 		if (!this.hasAdditionalCommandPicks(filter, token)) {
@@ -267,7 +270,7 @@ export abstract class AbstractCommandsQuickAccessProvider extends PickerQuickAcc
 		};
 	}
 
-	private toCommandPick(commandPick: ICommandQuickPick | IQuickPickSeparator, runOptions?: IQuickAccessProviderRunOptions): ICommandQuickPick | IQuickPickSeparator {
+	private toCommandPick(commandPick: ICommandQuickPick | IQuickPickSeparator, runOptions?: IQuickAccessProviderRunOptions, isRecentlyUsed: boolean = false): ICommandQuickPick | IQuickPickSeparator {
 		if (commandPick.type === 'separator') {
 			return commandPick;
 		}
@@ -277,11 +280,22 @@ export abstract class AbstractCommandsQuickAccessProvider extends PickerQuickAcc
 			localize('commandPickAriaLabelWithKeybinding', "{0}, {1}", commandPick.label, keybinding.getAriaLabel()) :
 			commandPick.label;
 
+		// Add remove button for recently used items (as the last button, to the right)
+		const existingButtons = commandPick.buttons || [];
+		const buttons = isRecentlyUsed ? [
+			...existingButtons,
+			{
+				iconClass: ThemeIcon.asClassName(Codicon.close),
+				tooltip: localize('removeFromRecentlyUsed', "Remove from Recently Used")
+			}
+		] : commandPick.buttons;
+
 		return {
 			...commandPick,
 			ariaLabel,
 			detail: this.options.showAlias && commandPick.commandAlias !== commandPick.label ? commandPick.commandAlias : undefined,
 			keybinding,
+			buttons,
 			accept: async () => {
 
 				// Add to history
@@ -303,7 +317,20 @@ export abstract class AbstractCommandsQuickAccessProvider extends PickerQuickAcc
 						this.dialogService.error(localize('canNotRun', "Command '{0}' resulted in an error", commandPick.label), toErrorMessage(error));
 					}
 				}
-			}
+			},
+			trigger: isRecentlyUsed ? (buttonIndex: number, keyMods: IKeyMods): TriggerAction | Promise<TriggerAction> => {
+				// The remove button is now the last button
+				const removeButtonIndex = existingButtons.length;
+				if (buttonIndex === removeButtonIndex) {
+					this.commandsHistory.remove(commandPick.commandId);
+					return TriggerAction.REMOVE_ITEM;
+				}
+				// Handle other buttons (e.g., configure keybinding button)
+				if (commandPick.trigger) {
+					return commandPick.trigger(buttonIndex, keyMods);
+				}
+				return TriggerAction.NO_ACTION;
+			} : commandPick.trigger
 		};
 	}
 
@@ -429,6 +456,15 @@ export class CommandsHistory extends Disposable {
 		return CommandsHistory.cache?.peek(commandId);
 	}
 
+	remove(commandId: string): void {
+		if (!CommandsHistory.cache) {
+			return;
+		}
+
+		CommandsHistory.cache.delete(commandId);
+		CommandsHistory.hasChanges = true;
+	}
+
 	private saveState(): void {
 		if (!CommandsHistory.cache) {
 			return;