From cfc9c822605ca85c49a821a5b392c3cdb160047a Mon Sep 17 00:00:00 2001 From: "google-labs-jules[bot]" <161369871+google-labs-jules[bot]@users.noreply.github.com> Date: Sat, 2 May 2026 22:16:14 +0000 Subject: [PATCH] feat: add actionable recovery path to empty states Added a "Clear Search" action button to the empty states when a search yields zero results. This allows users to easily clear their query and return to their recent history without having to manually backspace through their input. Co-authored-by: AhmmedSamier <17784876+AhmmedSamier@users.noreply.github.com> --- .jules/palette.md | 3 +++ vscode-extension/src/search-provider.ts | 30 +++++++++++++++++++++---- 2 files changed, 29 insertions(+), 4 deletions(-) create mode 100644 .jules/palette.md diff --git a/.jules/palette.md b/.jules/palette.md new file mode 100644 index 00000000..4e00c166 --- /dev/null +++ b/.jules/palette.md @@ -0,0 +1,3 @@ +## 2026-05-02 - Actionable Empty States +**Learning:** Empty states present an opportunity to lower user friction when a search yields zero results. Providing a "Clear Search" or "Switch Scope" directly in the empty state acts as an actionable recovery path, so users don't have to manually clear the input field or change settings themselves. +**Action:** When designing or refactoring empty state components, always provide an inline action button (such as "Clear Search", "Reset Filters", or "Back to Global Scope") directly within the empty state context to simplify recovery. diff --git a/vscode-extension/src/search-provider.ts b/vscode-extension/src/search-provider.ts index 21e2b6aa..ce67cf7d 100644 --- a/vscode-extension/src/search-provider.ts +++ b/vscode-extension/src/search-provider.ts @@ -69,6 +69,7 @@ export class SearchProvider { private readonly TOOLTIP_REVEAL = 'Reveal in File Explorer'; // Command IDs for empty state actions + private readonly CMD_CLEAR_SEARCH = 'command:clear-search'; private readonly CMD_NATIVE_SEARCH = 'command:native-search'; private readonly CMD_SWITCH_SCOPE = 'command:switch-scope-everything'; private readonly CMD_REBUILD_INDEX = 'command:rebuild-index'; @@ -1530,6 +1531,19 @@ export class SearchProvider { selected: SearchResultItem, quickPick: vscode.QuickPick, ): Promise { + if (selected.result.item.id === this.CMD_CLEAR_SEARCH) { + quickPick.value = ''; + // Programmatically changing QuickPick.value does not fire onDidChangeValue in VS Code + // We must manually trigger the query change logic to update the list + this.handleQueryChange( + quickPick, + '', + () => {}, + () => {}, + ); + return true; + } + if (selected.result.item.id === this.CMD_NATIVE_SEARCH) { await vscode.commands.executeCommand('workbench.action.findInFiles', { query: quickPick.value, @@ -1656,7 +1670,15 @@ export class SearchProvider { }); }; - // 3. Native Search Action + // 3. Clear Search Action + addCommandItem( + 'Clear Search', + 'Reset your search query', + new vscode.ThemeIcon('clear-all'), + this.CMD_CLEAR_SEARCH, + ); + + // 4. Native Search Action addCommandItem( 'Search in Files (Native)', "Use VS Code's native search", @@ -1664,13 +1686,13 @@ export class SearchProvider { this.CMD_NATIVE_SEARCH, ); - // 4. Rebuild Index Action + // 5. Rebuild Index Action addCommandItem('Rebuild Index', 'Fix missing files', new vscode.ThemeIcon('refresh'), this.CMD_REBUILD_INDEX); - // 5. Clear Cache Action + // 6. Clear Cache Action addCommandItem('Clear Index Cache', 'Fix corruption', new vscode.ThemeIcon('trash'), this.CMD_CLEAR_CACHE); - // 6. Settings Action + // 7. Settings Action addCommandItem( 'Configure Settings', 'Check exclusion rules',