feat: improve search state title, show matches count

Author: Simek

src/extension.ts

@@ -10,10 +10,12 @@ import {
   getCommandToRun,
   getCompatibilityList,
   getEntryTypeLabel,
+  getMatchesCountLabel,
   getPlatformsList,
   invertObject,
   numberFormatter,
-  openListWithSearch
+  openListWithSearch,
+  pluralize
 } from './utils';
 
 export async function activate(context: ExtensionContext) {
@@ -46,14 +48,30 @@ export async function activate(context: ExtensionContext) {
           .filter((keyword): keyword is ValidKeyword => keyword in VALID_KEYWORDS_MAP)
           .map((keyword) => VALID_KEYWORDS_MAP[keyword] as ValidKeyword);
 
+        const { libraries, total } = await fetchData(searchString, validKeywords);
+        packagesPick.items = libraries;
+
         if (validKeywords.length > 0) {
-          packagesPick.title = `Active filters: ${validKeywords.join(', ')}`;
+          if (searchString.trim().length > 0) {
+            packagesPick.title = `Query: ${searchString} • Filters: ${validKeywords.join(', ')} • ${getMatchesCountLabel(total)}`;
+          } else {
+            packagesPick.title = `Filters: ${validKeywords.join(', ')} • ${getMatchesCountLabel(total)}`;
+          }
         } else {
-          packagesPick.title = STRINGS.DEFAULT_TITLE;
+          if (searchString.trim().length > 0) {
+            packagesPick.title = `Query: ${searchString} • ${getMatchesCountLabel(total)}`;
+          } else {
+            packagesPick.title = STRINGS.DEFAULT_TITLE;
+          }
         }
-        packagesPick.items = await fetchData(searchString, validKeywords);
       } else {
-        packagesPick.items = await fetchData(value);
+        const { libraries, total } = await fetchData(value);
+        packagesPick.items = libraries;
+        if (value.trim().length > 0) {
+          packagesPick.title = `Query: ${value} • ${getMatchesCountLabel(total)}`;
+        } else {
+          packagesPick.title = STRINGS.DEFAULT_TITLE;
+        }
       }
 
       packagesPick.busy = false;
@@ -111,7 +129,7 @@ export async function activate(context: ExtensionContext) {
         },
         selectedEntry.github.stats.dependencies !== undefined && {
           label: ENTRY_OPTION.VIEW_DEPENDENCIES,
-          description: `$(package) ${numberFormatter.format(selectedEntry.github.stats.dependencies)} ${selectedEntry.github.stats.dependencies === 1 ? 'dependency' : 'dependencies'}`
+          description: `$(package) ${numberFormatter.format(selectedEntry.github.stats.dependencies)} ${pluralize('dependency', selectedEntry.github.stats.dependencies)}`
         },
         !selectedEntry.template && { label: ENTRY_OPTION.VIEW_BUNDLEPHOBIA },
         selectedEntry.nightlyProgram && { label: ENTRY_OPTION.VIEW_NIGHTLY_RESULTS },

src/types.ts

@@ -92,6 +92,11 @@ export type PackageData = {
   nightlyProgram?: boolean;
 };
 
+export type APIResponseData = {
+  libraries: DirectoryEntry[];
+  total?: number;
+};
+
 export type NpmRegistryData = {
   'dist-tags': Record<string, string>;
   versions: Record<

src/utils.ts

@@ -1,6 +1,6 @@
 import { QuickPick, window } from 'vscode';
 
-import { DirectoryEntry, PackageData, ValidKeyword } from './types';
+import { APIResponseData, DirectoryEntry, PackageData, ValidKeyword } from './types';
 import { BASE_API_URL, STRINGS } from './constants';
 
 export const numberFormatter = new Intl.NumberFormat('en-EN', { notation: 'compact' });
@@ -37,7 +37,12 @@ export function getCommandToRun({ dev, npmPkg }: DirectoryEntry, preferredManage
   }
 }
 
-export async function fetchData(query?: string, keywords?: ValidKeyword[]): Promise<DirectoryEntry[]> {
+const EMPTY_RESULT = {
+  libraries: [],
+  total: 0
+};
+
+export async function fetchData(query?: string, keywords?: ValidKeyword[]): Promise<APIResponseData> {
   try {
     const apiUrl = new URL(BASE_API_URL);
 
@@ -53,26 +58,29 @@ export async function fetchData(query?: string, keywords?: ValidKeyword[]): Prom
     const response = await fetch(apiUrl.href);
 
     if (response.ok) {
-      const data = (await response.json()) as object;
+      const data = (await response.json()) as APIResponseData;
 
       if ('libraries' in data && Array.isArray(data.libraries)) {
-        return data.libraries.map((item: PackageData) => ({
-          label: item.npmPkg,
-          description: item.github.description ?? 'No description',
-          detail: getDetailLabel(item),
-          alwaysShow: true,
-          ...item
-        }));
+        return {
+          libraries: data.libraries.map((item: PackageData) => ({
+            label: item.npmPkg,
+            description: item.github.description ?? 'No description',
+            detail: getDetailLabel(item),
+            alwaysShow: true,
+            ...item
+          })),
+          total: data.total ?? 0
+        };
       }
       window.showErrorMessage(`Invalid React Native Directory API response content`);
-      return [];
+      return EMPTY_RESULT;
     }
     window.showErrorMessage(`Invalid React Native Directory API response: ${response.status}`);
-    return [];
+    return EMPTY_RESULT;
   } catch (error) {
     console.error(error);
     window.showErrorMessage('Failed to fetch data from React Native Directory API');
-    return [];
+    return EMPTY_RESULT;
   }
 }
 
@@ -122,9 +130,10 @@ export async function openListWithSearch(
   }
 
   packagesPick.show();
-  packagesPick.items = await fetchData(query);
+  packagesPick.items = (await fetchData(query)).libraries;
 
   packagesPick.placeholder = STRINGS.PACKAGES_PLACEHOLDER;
+  packagesPick.title = STRINGS.DEFAULT_TITLE;
   packagesPick.busy = false;
 }
 
@@ -137,6 +146,26 @@ export function getEntryTypeLabel(entry: DirectoryEntry): string {
   return 'library';
 }
 
+export function getMatchesCountLabel(count: number = 0): string {
+  return `${numberFormatter.format(count)} ${pluralize('match', count)}`;
+}
+
 export function invertObject(obj: Record<string, string>): Record<string, string> {
   return Object.fromEntries(Object.entries(obj).map(([k, v]) => [v, k]));
 }
+
+export function pluralize(word: string, count: number) {
+  if (count === 1) {
+    return word;
+  }
+
+  if (/[^aeiou]y$/i.test(word)) {
+    return word.replace(/y$/i, 'ies');
+  }
+
+  if (/(s|sh|ch|x|z)$/i.test(word)) {
+    return `${word}es`;
+  }
+
+  return `${word}s`;
+}