From 6694364c5d204fdea038669d0fae6f4538a45b8c Mon Sep 17 00:00:00 2001
From: Anthony Fu <github@antfu.me>
Date: Thu, 22 Aug 2024 17:18:18 +0200
Subject: [PATCH] feat: refactor components

---
 src/client/components.d.ts                |  2 ++
 src/client/components/ByteSizeDisplay.vue | 21 ++++++++++++++++++
 src/client/components/DurationDisplay.vue |  6 ++---
 src/client/components/ModuleId.vue        |  2 +-
 src/client/components/ModuleList.vue      | 27 +++++++++--------------
 src/client/components/NumberWithUnit.vue  | 12 ++++++++++
 6 files changed, 48 insertions(+), 22 deletions(-)
 create mode 100644 src/client/components/ByteSizeDisplay.vue
 create mode 100644 src/client/components/NumberWithUnit.vue

diff --git a/src/client/components.d.ts b/src/client/components.d.ts
index b06b6c0..3fe674e 100644
--- a/src/client/components.d.ts
+++ b/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']
diff --git a/src/client/components/ByteSizeDisplay.vue b/src/client/components/ByteSizeDisplay.vue
new file mode 100644
index 0000000..9b76ab4
--- /dev/null
+++ b/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>
diff --git a/src/client/components/DurationDisplay.vue b/src/client/components/DurationDisplay.vue
index c1901da..5e1c208 100644
--- a/src/client/components/DurationDisplay.vue
+++ b/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>
diff --git a/src/client/components/ModuleId.vue b/src/client/components/ModuleId.vue
index dc751ef..206c781 100644
--- a/src/client/components/ModuleId.vue
+++ b/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')
diff --git a/src/client/components/ModuleList.vue b/src/client/components/ModuleList.vue
index 712b138..b009dfe 100644
--- a/src/client/components/ModuleList.vue
+++ b/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>
diff --git a/src/client/components/NumberWithUnit.vue b/src/client/components/NumberWithUnit.vue
new file mode 100644
index 0000000..da1f252
--- /dev/null
+++ b/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>