feat: refactor components

src/client/components.d.ts

@@ -8,6 +8,7 @@ export {}
 declare module 'vue' {
   export interface GlobalComponents {
     Badge: typeof import('./components/Badge.vue')['default']
+    ByteSizeDisplay: typeof import('./components/ByteSizeDisplay.vue')['default']
     Container: typeof import('./components/Container.vue')['default']
     DiffEditor: typeof import('./components/DiffEditor.vue')['default']
     DurationDisplay: typeof import('./components/DurationDisplay.vue')['default']
@@ -18,6 +19,7 @@ declare module 'vue' {
     ModuleId: typeof import('./components/ModuleId.vue')['default']
     ModuleList: typeof import('./components/ModuleList.vue')['default']
     NavBar: typeof import('./components/NavBar.vue')['default']
+    NumberWithUnit: typeof import('./components/NumberWithUnit.vue')['default']
     PluginChart: typeof import('./components/PluginChart.vue')['default']
     PluginName: typeof import('./components/PluginName.vue')['default']
     RadioGroup: typeof import('./components/RadioGroup.vue')['default']

src/client/components/ByteSizeDisplay.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+const props = defineProps<{
+  bytes: number
+}>()
+
+function byteToHumanReadable(byte: number): [string | number, string] {
+  if (byte < 1024)
+    return [byte, 'B']
+  if (byte < 1024 * 1024)
+    return [(byte / 1024).toFixed(2), 'KB']
+  if (byte < 1024 * 1024 * 1024)
+    return [(byte / 1024 / 1024).toFixed(2), 'MB']
+  return [(byte / 1024 / 1024 / 1024).toFixed(2), 'GB']
+}
+
+const readable = computed(() => byteToHumanReadable(props.bytes))
+</script>
+
+<template>
+  <NumberWithUnit :number="readable[0]" :unit="readable[1]" />
+</template>

src/client/components/DurationDisplay.vue

@@ -30,7 +30,7 @@ function getDurationColor(duration: number | undefined) {
 
 const units = computed(() => {
   if (!props.duration)
-    return ['-', '']
+    return ['', '-']
   if (props.duration < 1)
     return ['<1', 'ms']
   if (props.duration < 1000)
@@ -42,7 +42,5 @@ const units = computed(() => {
 </script>
 
 <template>
-  <span block>
-    <span :class="getDurationColor(duration)">{{ units[0] }}</span><span ml-0.4 text-xs :class="getDurationColor(duration)" op75>{{ units[1] }}</span>
-  </span>
+  <NumberWithUnit :class="getDurationColor(duration)" :number="units[0]" :unit="units[1]" />
 </template>

src/client/components/ModuleId.vue

@@ -77,7 +77,7 @@ const HighlightedPath = defineComponent({
 
       if (type === 'query') {
         if (part === '?' || part === '&') {
-          _class.push('text-rose-5 dark:text-rose-4')
+          _class.push('text-orange-5 dark:text-orange-4')
         }
         else {
           _class.push('text-orange-9 dark:text-orange-2')

src/client/components/ModuleList.vue

@@ -12,16 +12,6 @@ const { list, containerProps, wrapperProps } = useVirtualList(
     itemHeight: listMode.value === 'detailed' ? 53 : 37,
   },
 )
-
-function byteToHumanReadable(byte: number) {
-  if (byte < 1024)
-    return `${byte}B`
-  if (byte < 1024 * 1024)
-    return `${(byte / 1024).toFixed(2)}KB`
-  if (byte < 1024 * 1024 * 1024)
-    return `${(byte / 1024 / 1024).toFixed(2)}MB`
-  return `${(byte / 1024 / 1024 / 1024).toFixed(2)}GB`
-}
 </script>
 
 <template>
@@ -59,22 +49,25 @@ function byteToHumanReadable(byte: number) {
               </span>
             </template>
             <template v-if="m.data.invokeCount > 2">
-              <span op40>·</span>
+              <span op40>|</span>
               <span
                 status-green
                 :title="`Transform invoked ${m.data.invokeCount} times`"
               >x{{ m.data.invokeCount }}</span>
             </template>
             <div flex-auto />
+            <template v-if="m.data.sourceSize && m.data.distSize">
+              <ByteSizeDisplay op75 :bytes="m.data.sourceSize" />
+              <span i-carbon-arrow-right op50 />
+              <ByteSizeDisplay
+                :class="m.data.distSize > m.data.sourceSize ? 'status-yellow' : 'status-green'"
+                :bytes="m.data.distSize"
+              />
+              <span op40>|</span>
+            </template>
             <span>
               <DurationDisplay :duration="m.data.totalTime" />
             </span>
-            <template v-if="m.data.sourceSize && m.data.distSize">
-              <span op40>·</span>
-              <span class="op75 dark:op50">{{ byteToHumanReadable(m.data.sourceSize) }}</span>
-              <span i-carbon-arrow-right op40 />
-              <span class="op100 dark:op-65" :class="m.data.distSize > m.data.sourceSize ? 'status-yellow' : 'status-green'">{{ byteToHumanReadable(m.data.distSize) }}</span>
-            </template>
           </div>
         </RouterLink>
       </div>

src/client/components/NumberWithUnit.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+defineProps<{
+  number: number | string
+  unit: string
+}>()
+</script>
+
+<template>
+  <span block>
+    <span>{{ number }}</span><span ml-0.4 text-xs op75>{{ unit }}</span>
+  </span>
+</template>