fix: adjust UI

Author: antfu

packages/vite/src/app/components/display/HighlightedPackageName.ts

@@ -25,7 +25,7 @@ export default defineComponent({
         const [scope, name] = packageName.split('/')
         return [
           h('span', { style: `color: ${color}` }, scope),
-          h('span', { style: `color: ${color}` }, '/'),
+          h('span', { style: `color: ${color}`, class: 'op50' }, '/'),
           h('span', { style: `color: ${color}` }, name),
         ]
       }

packages/vite/src/app/components/packages/Importers.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import type { PackageInfo, SessionContext } from '~~/shared/types/data'
-import { DisplayNumberBadge } from '#components'
 import { computed } from 'vue'
 
 const props = defineProps<{
@@ -13,18 +12,18 @@ const importers = computed(() => [...new Set(props.package.files.filter(f => !!f
 </script>
 
 <template>
-  <div flex="~ row gap-1">
-    <div flex="~ row gap-1">
+  <div flex="~ row gap-1" of-hidden>
+    <div flex="~ row gap-1" ws-nowrap>
       <DisplayModuleId :id="importers[0]!.path" :session="session" link />
       <DisplayBadge v-if="importers[0]!.version && showVersion" :text="importers[0]!.version" as="span" />
     </div>
-    <VMenu v-if="importers.length > 1" :delay="{ show: 200, hide: 0 }">
-      <DisplayNumberBadge :number="importers.length" class="text-blue dark:text-blue" />
+    <VMenu v-if="importers.length > 1" :delay="{ show: 200, hide: 0 }" flex-none>
+      <DisplayBadge :text="`+${importers.length}`" :color="100" class="text-xs rounded px1" />
       <template #popper>
         <div p2 flex="~ col gap-1">
           <div v-for="importer of importers" :key="importer.path" flex="~ row gap-1 items-center nowrap" w-max>
             <DisplayModuleId :id="importer.path" :session="session" ws-nowrap flex-1 disable-tooltip link />
-            <DisplayBadge v-if="importer.version && showVersion" :text="importer.version" as="span" />
+            <DisplayBadge v-if="importer.version && showVersion" :text="`v${importer.version}`" as="span" />
           </div>
         </div>
       </template>

packages/vite/src/app/components/packages/Table.vue

@@ -25,28 +25,30 @@ function toggleSizeSortType() {
 </script>
 
 <template>
-  <div role="table" min-w-max border="~ base rounded">
+  <div role="table" min-w-max border="~ base rounded-xl">
     <div role="row" class="border-b border-base" flex="~ row">
-      <div :title="groupView ? 'Package' : 'Bundled packages'" role="columnheader" rounded-tl-2 bg-base flex-none ws-nowrap py1.5 px2 font-600 :class="[groupView ? 'min-w40' : 'min-w80']">
+      <div :title="groupView ? 'Package' : 'Bundled packages'" role="columnheader" rounded-tl-2 flex-none ws-nowrap py1.5 px2 font-600 :class="[groupView ? 'min-w40' : 'min-w80']">
         <template v-if="groupView">
-          <DisplayHighlightedPackageName :name="packages?.[0]?.name!" />
+          <div font-mono>
+            <DisplayHighlightedPackageName :name="packages?.[0]?.name!" />
+          </div>
         </template>
         <template v-else>
           Package
         </template>
       </div>
-      <div v-if="!groupView" title="Package version" role="columnheader" rounded-tr-2 bg-base flex-none min-w40 ws-nowrap text-left py1.5 px2 font-600>
+      <div v-if="!groupView" title="Package version" role="columnheader" rounded-tr-2 flex-none min-w40 ws-nowrap text-left py1.5 px2 font-600>
         Version
       </div>
-      <div title="Transformed code size" role="columnheader" rounded-tr-2 bg-base flex-none ws-nowrap py1.5 pl2 font-600 min-w40>
+      <div title="Transformed code size" role="columnheader" rounded-tr-2 flex-none ws-nowrap py1.5 pl2 font-600 min-w40>
         <button flex="~ row gap1 items-center justify-end" w-full relative pr2>
           Size
           <span v-if="!disableSizeSort" w-6 h-6 rounded-full cursor-pointer hover="bg-active" flex="~ items-center justify-center" @click="toggleSizeSortType">
             <i text-xs :class="[sizeSortType !== 'asc' ? 'i-ph-arrow-down-duotone' : 'i-ph-arrow-up-duotone', sizeSortType ? 'op100 text-primary' : 'op50']" />
           </span>
         </button>
       </div>
-      <div title="Importers" role="columnheader" rounded-tr-2 bg-base flex-none ws-nowrap py1.5 pl20 pr2 font-600 min-w50>
+      <div title="Importers" role="columnheader" rounded-tr-2 flex-none ws-nowrap py1.5 pl20 pr2 font-600 min-w50>
         Importers
       </div>
     </div>
@@ -64,11 +66,12 @@ function toggleSizeSortType() {
           class="border-base border-b-1 border-dashed"
           :class="[index === packages.length - 1 ? 'border-b-0' : '']"
         >
-          <div v-if="!groupView" role="cell" flex="~ items-center gap1" flex-none min-w80 py1.5 px2 ws-nowrap text-sm>
+          <div v-if="!groupView" role="cell" font-mono flex-none min-w80 py1.5 px2 ws-nowrap text-sm>
             <DisplayHighlightedPackageName :name="item.name" />
           </div>
           <div role="cell" flex="~ items-center" text-left flex-none font-mono py1.5 px2 text-sm min-w40 op80>
             {{ item.version }}
+            <!-- TODO: color this if the package is duplicated -->
           </div>
           <div role="cell" flex="~ items-center justify-end" flex-none font-mono py1.5 px2 text-sm min-w40 op80>
             <VMenu :delay="{ show: 200, hide: 0 }">

packages/vite/src/app/pages/session/[session]/packages.vue

@@ -67,7 +67,7 @@ const duplicatePackagesCount = computed(() => {
   }, {} as Record<string, number>)).filter(count => count > 1).length
 })
 
-const packageViewTpyes = computed(() => [
+const packageViewTypes = computed(() => [
   {
     label: 'Table',
     value: 'table',
@@ -150,7 +150,7 @@ watch(() => settings.value.packageViewType, () => {
         <div flex="~ gap-2 items-center" p2 border="t base">
           <span op50 pl2 text-sm>View as</span>
           <button
-            v-for="viewType of packageViewTpyes"
+            v-for="viewType of packageViewTypes"
             :key="viewType.value"
             btn-action
             :class="settings.packageViewType === viewType.value ? 'bg-active' : 'grayscale op50'"