feat: improve modules view

Author: antfu

packages/devtools/client/components/ModuleItem.vue

@@ -20,7 +20,7 @@ const terminalId = useCurrentTerminalId()
   <ModuleItemBase :mod="mod" :info="staticInfo">
     <template #items>
       <div v-if="mod.entryPath" flex="~ gap-2" title="Open on filesystem">
-        <span i-carbon-folder-move-to text-lg op50 />
+        <span i-carbon-folder-move-to flex-none text-lg op50 />
         <FilepathItem :filepath="mod.entryPath" text-sm op50 hover="text-primary op100" />
       </div>
 
@@ -33,7 +33,7 @@ const terminalId = useCurrentTerminalId()
             :to="id ? '/modules/terminals' : undefined"
             @click="id ? terminalId = id : undefined"
           >
-            <span i-carbon-circle-dash animate-spin text-lg op50 />
+            <span i-carbon-circle-dash flex-none animate-spin text-lg op50 />
             <code text-sm op50>Upgrading...</code>
           </NuxtLink>
           <div v-else-if="state === 'updated'" mx--2>
@@ -43,7 +43,7 @@ const terminalId = useCurrentTerminalId()
               items-center rounded bg-primary:10 px2 text-sm text-primary
               @click="restart"
             >
-              <span i-carbon-intent-request-active text-lg text-primary />
+              <span i-carbon-intent-request-active flex-none text-lg text-primary />
               <code text-xs>Update installed, click to restart</code>
             </button>
           </div>
@@ -53,14 +53,14 @@ const terminalId = useCurrentTerminalId()
               hover="bg-active"
               @click="update()"
             >
-              <span i-carbon-intent-request-upgrade text-lg op50 />
+              <span i-carbon-intent-request-upgrade flex-none text-lg op50 />
               <code op50>v{{ info.current }}</code>
               <div i-carbon-arrow-right op50 />
               <code text-green>v{{ info.latest }}</code>
             </button>
           </div>
           <div v-else-if="info?.latest" flex="~ gap-2" items-center title="NPM">
-            <span i-carbon-cube text-lg op50 />
+            <span i-carbon-cube flex-none text-lg op50 />
             <code text-sm op50>v{{ info.current }}</code>
           </div>
         </template>

packages/devtools/client/components/ModuleItemBase.vue

@@ -26,6 +26,11 @@ const avatarBase = 'https://api.nuxtjs.org/api/ipx/s_44,f_webp/gh_avatar/'
 const githubBase = 'https://github.com/'
 const npmBase = 'https://www.npmjs.com/package/'
 
+const { format: formatNumber } = Intl.NumberFormat(navigator.language || 'en', { notation: 'compact', maximumFractionDigits: 1 })
+
+const stars = computed(() => formatNumber(data.value.stats?.stars || 0))
+const downloads = computed(() => formatNumber(data.value.stats?.downloads || 0))
+
 const openInEditor = useOpenInEditor()
 </script>
 
@@ -67,7 +72,7 @@ const openInEditor = useOpenInEditor()
         <div flex-auto />
 
         <div v-if="data.website" flex="~ gap-2" title="Documentation">
-          <span i-carbon-link text-lg op50 />
+          <span i-carbon-link flex-none text-lg op50 />
           <NuxtLink
             :to="data.website"
             target="_blank"
@@ -78,7 +83,7 @@ const openInEditor = useOpenInEditor()
           </NuxtLink>
         </div>
         <div v-if="data.github" flex="~ gap-2">
-          <span i-carbon-logo-github text-lg op50 />
+          <span i-carbon-logo-github flex-none text-lg op50 />
           <NuxtLink
             :to="data.github"
             target="_blank"
@@ -93,16 +98,16 @@ const openInEditor = useOpenInEditor()
       <slot name="items" />
 
       <div v-if="data.stats" flex="~ gap-4 items-center">
-        <div flex="~ gap-2 items-center" op50>
-          <NIcon icon="carbon-star" text-lg />
+        <div v-if="data.stats.stars" flex="~ gap-2 items-center" op50>
+          <NIcon icon="carbon-star" flex-none text-lg />
           <span>
-            {{ data.stats.stars }}
+            {{ stars }}
           </span>
         </div>
-        <div flex="~ gap-2 items-center" op50>
-          <NIcon icon="carbon-download" text-lg />
+        <div v-if="data.stats.downloads" flex="~ gap-2 items-center" op50>
+          <NIcon icon="carbon-download" flex-none text-lg />
           <span>
-            {{ data.stats.downloads }}
+            {{ downloads }}
           </span>
         </div>
       </div>
@@ -115,7 +120,7 @@ const openInEditor = useOpenInEditor()
           :factor="0.5"
         >
           <template #before>
-            <NIcon icon="carbon-time" mr2 text-lg op50 />
+            <NIcon icon="carbon-time" mr2 flex-none text-lg op50 />
           </template>
         </DurationDisplay>
       </div>
@@ -127,7 +132,7 @@ const openInEditor = useOpenInEditor()
         h-20 w-20 flex flex-none rounded bg-gray:3 p4
       >
         <img v-if="data.icon" :src="iconBase + data.icon" :alt="mod.name" ma>
-        <div i-carbon-cube ma text-4xl op30 />
+        <div v-else i-carbon-cube ma flex-none text-4xl op30 />
       </div>
       <div v-if="data.maintainers?.length && maintainers" flex="~" mt2 flex-auto items-end justify-end>
         <NuxtLink

packages/devtools/client/pages/modules/modules.vue

@@ -119,7 +119,6 @@ registerCommands(() => [
           rounded-full text-xl :border="false"
           @click="installModuleOpen = false"
         />
-
         <ModuleInstallList @close="installModuleOpen = false" />
       </div>
     </Transition>