feat: improve data display for dev tools and templates

Author: Simek

src/extension.ts

@@ -9,6 +9,7 @@ import {
   fetchData,
   getCommandToRun,
   getCompatibilityList,
+  getEntryTypeLabel,
   getPlatformsList,
   KEYWORD_REGEX,
   numberFormatter,
@@ -98,7 +99,7 @@ export async function activate(context: ExtensionContext) {
             `$(eye) ${numberFormatter.format(selectedEntry.github.stats.subscribers)}`
           ].join(' ')
         },
-        {
+        !selectedEntry.template && {
           label: ENTRY_OPTION.VISIT_NPM,
           description: selectedEntry.npm?.downloads
             ? `$(arrow-circle-down) ${numberFormatter.format(selectedEntry.npm.downloads)}`
@@ -116,7 +117,7 @@ export async function activate(context: ExtensionContext) {
           label: ENTRY_OPTION.VIEW_DEPENDENCIES,
           description: `$(package) ${numberFormatter.format(selectedEntry.github.stats.dependencies)} ${selectedEntry.github.stats.dependencies === 1 ? 'dependency' : 'dependencies'}`
         },
-        { label: ENTRY_OPTION.VIEW_BUNDLEPHOBIA },
+        !selectedEntry.template && { label: ENTRY_OPTION.VIEW_BUNDLEPHOBIA },
         { label: 'details', kind: QuickPickItemKind.Separator },
         {
           label: ENTRY_OPTION.PLATFORMS,
@@ -132,15 +133,15 @@ export async function activate(context: ExtensionContext) {
         },
         ...examplesActions,
         { label: 'copy data', kind: QuickPickItemKind.Separator },
-        { label: ENTRY_OPTION.COPY_NAME },
+        !selectedEntry.template && { label: ENTRY_OPTION.COPY_NAME },
         { label: ENTRY_OPTION.COPY_REPO_URL },
-        { label: ENTRY_OPTION.COPY_NPM_URL },
+        !selectedEntry.template && { label: ENTRY_OPTION.COPY_NPM_URL },
         { label: '', kind: QuickPickItemKind.Separator },
         { label: ENTRY_OPTION.GO_BACK }
       ].filter((option) => !!option && typeof option === 'object');
 
       const optionPick = window.createQuickPick();
-      optionPick.title = `Actions for "${selectedEntry.label}"`;
+      optionPick.title = `Actions for "${selectedEntry.label}" ${getEntryTypeLabel(selectedEntry)}`;
       optionPick.placeholder = 'Select an action';
       optionPick.items = possibleActions;
       optionPick.show();

src/utils.ts

@@ -58,12 +58,16 @@ export const VALID_KEYWORDS_MAP = {
 export type ValidKeyword = keyof typeof VALID_KEYWORDS_MAP;
 
 function getDetailLabel(item: PackageData) {
+  const platforms = getPlatformsList(item);
   return [
     `$(star) ${numberFormatter.format(item.github.stats.stars)}`,
     `$(gist-fork) ${numberFormatter.format(item.github.stats.forks)}`,
     item.npm?.downloads && `$(arrow-circle-down) ${numberFormatter.format(item.npm.downloads)}`,
-    '•',
-    getPlatformsList(item).join(', '),
+    (item.dev || item.template) && '•',
+    item.dev && '$(tools) Dev Tool',
+    item.template && '$(folder-library) Template',
+    platforms.length && '•',
+    platforms.join(', '),
     (item.newArchitecture || item.expoGo || item.github.hasTypes) && '•',
     (item.newArchitecture || item.expoGo) &&
       `$(verified) New Architecture${item.newArchitecture === 'new-arch-only' ? ' only' : ''}`,
@@ -169,3 +173,12 @@ export async function openListWithSearch(packagesPick: QuickPick<DirectoryEntry>
   packagesPick.placeholder = STRINGS.PLACEHOLDER;
   packagesPick.busy = false;
 }
+
+export function getEntryTypeLabel(entry: DirectoryEntry): string {
+  if (entry.template) {
+    return ' template';
+  } else if (entry.dev) {
+    return ' development tool';
+  }
+  return 'library';
+}