feat: UI improvements, highlight file path

playground/src/App.vue

@@ -8,9 +8,14 @@ import { RouterLink, RouterView } from 'vue-router'
       <RouterLink to="/">
         Home
       </RouterLink>
+      <span px-1rem>|</span>
       <RouterLink to="/other">
         Other
       </RouterLink>
+      <span px-1rem>|</span>
+      <RouterLink to="/error">
+        Error
+      </RouterLink>
     </nav>
 
     <RouterView />

playground/src/router/index.ts

@@ -14,6 +14,11 @@ const router = createRouter({
       path: '/other',
       component: () => import('../views/Other.vue'),
     },
+    {
+      name: 'error',
+      path: '/error',
+      component: () => import('../views/Error.vue'),
+    },
   ],
 })
 

playground/src/views/Error.vue

@@ -0,0 +1,15 @@
+<script setup>
+import { onMounted, ref } from 'vue'
+
+const message = ref('Loading...')
+
+onMounted(() => {
+  import('virtual:slow:error').catch(err => message.value = err.message)
+})
+</script>
+
+<template>
+  <div>
+    <div>Slow Error Message: {{ message }}</div>
+  </div>
+</template>

playground/src/views/Other.vue

@@ -1,7 +1,17 @@
 <script setup>
+import { onMounted, ref } from 'vue'
 import message from 'virtual:hi'
+
+const message2 = ref('Loading...')
+
+onMounted(() => {
+  import('virtual:slow:2').then(m => message2.value = m.default)
+})
 </script>
 
 <template>
-  <div>Other: {{ message }}</div>
+  <div>
+    <div>Other: {{ message }}</div>
+    <div>Slow Message: {{ message2 }}</div>
+  </div>
 </template>

playground/src/vite-env.d.ts

@@ -2,3 +2,7 @@ declare module 'virtual:hi' {
   const value: string
   export default value
 }
+declare module 'virtual:slow:*' {
+  const value: string
+  export default value
+}

playground/vite.config.ts

@@ -19,6 +19,27 @@ export default defineConfig({
           return 'export default \'Hi!\''
       },
     },
+    {
+      name: 'custom-slow-loader',
+      // for testing purpose, don't change it
+      enforce: 'post',
+      resolveId(id) {
+        return id.startsWith('virtual:slow:') ? `\0${id}` : undefined
+      },
+      async load(id) {
+        if (!id.startsWith('\0virtual:slow:'))
+          return
+
+        const matcher = /^\0virtual:slow:(\d)$/.exec(id)
+        if (matcher) {
+          const timeout = +matcher[1]
+          await new Promise(resolve => setTimeout(resolve, timeout * 1000))
+          return `export default 'Hi after ${timeout} seconds!'`
+        }
+
+        throw new Error('Invalid timeout!')
+      },
+    },
     Inspect({
       build: true,
       open: true,

src/client/components/DurationDisplay.vue

@@ -15,16 +15,16 @@ function getDurationColor(duration: number | undefined) {
   if (!props.color)
     return ''
   if (duration == null)
-    return 'text-gray:75'
+    return ''
   duration = duration * props.factor
   if (duration < 1)
-    return 'text-gray:75'
+    return ''
   if (duration > 1000)
-    return 'text-red-400'
+    return 'status-red'
   if (duration > 500)
-    return 'text-orange-400'
+    return 'status-yellow'
   if (duration > 200)
-    return 'text-yellow-400'
+    return 'status-green'
   return ''
 }
 
@@ -42,7 +42,22 @@ const units = computed(() => {
 </script>
 
 <template>
-  <div :class="getDurationColor(duration)">
-    {{ units[0] }}<span ml-0.4 text-xs op50>{{ units[1] }}</span>
-  </div>
+  <span block :class="getDurationColor(duration)">
+    <span>{{ units[0] }}</span><span ml-0.4 text-xs>{{ units[1] }}</span>
+  </span>
 </template>
+
+<style scoped>
+span:not(.status-red) > span:first-of-type {
+  @apply op80 dark:op65;
+}
+span:not(.status-red) > span:last-of-type {
+  @apply op75 dark:op50;
+}
+span.status-red > span:first-of-type {
+  @apply op80 dark:op95;
+}
+span.status-red > span:last-of-type {
+  @apply op75 dark:op90;
+}
+</style>

src/client/components/ErrorDisplay.vue

@@ -14,15 +14,15 @@ function normalizeFilename(filename?: string) {
 
 <template>
   <div of-auto p4 font-mono flex="~ col gap-4">
-    <div text-xl text-red7 dark:text-red flex="~ gap-2 items-center">
+    <div text-xl status-red flex="~ gap-2 items-center">
       <div i-carbon:warning-square />
       Error
     </div>
-    <pre text-sm text-red7 dark:text-red>{{ error.message }}</pre>
+    <pre text-sm status-red>{{ error.message }}</pre>
     <div border="t main" h-1px w-full />
     <div class="text-xs" mt2 grid="~ cols-[max-content_1fr] gap-x-4 gap-y-1" font-mono>
-      <template v-for="item, idx of error.stack" :key="idx">
-        <div text-right op50>
+      <template v-for="(item, idx) of error.stack" :key="idx">
+        <div text-right op72 dark:op50>
           {{ item.functionName || `(anonymous)` }}
         </div>
         <div ws-nowrap>

src/client/components/FilepathItem.vue

@@ -22,8 +22,8 @@ const display = computed(() => {
 
 <template>
   <button flex="~" hover="underline" @click="openInEditor">
-    <span>{{ display[0] }}</span>
-    <span op60>{{ display[1] }}</span>
-    <span v-if="props.line != null && props.column != null" op50>:{{ props.line }}:{{ props.column }}</span>
+    <span fw-600 dark:fw-unset>{{ display[0] }}</span>
+    <span op72 dark:op50>{{ display[1] }}</span>
+    <span v-if="props.line != null && props.column != null" op72 dark:op50>:{{ props.line }}:{{ props.column }}</span>
   </button>
 </template>

src/client/components/ModuleId.vue

@@ -1,33 +1,74 @@
 <script setup lang="ts">
-import { computed } from 'vue'
 import { list, root } from '../logic'
 
 const props = withDefaults(
   defineProps<{
     id?: string
     icon?: boolean
+    module?: boolean
   }>(),
   {
     icon: true,
   },
 )
 
 const isVirtual = computed(() => list.value?.modules.find(i => i.id === props.id)?.virtual)
+const moduleName = computed(() =>
+  props.id?.startsWith(root.value)
+    ? props.id.slice(root.value.length)
+    : props.id ?? '',
+)
+const gridStyles = computed(() => {
+  if (!props.module)
+    return ''
+
+  const gridColumns: string[] = []
+  if (props.icon)
+    gridColumns.push('min-content')
+
+  if (props.module)
+    gridColumns.push('minmax(0,1fr)')
+  else
+    gridColumns.push('100%')
+
+  // todo: handle slot, not being used
+
+  if (isVirtual.value)
+    gridColumns.push('min-content')
+
+  return `grid-template-columns: ${gridColumns.join(' ')};`
+})
+const containerClass = computed(() => {
+  return props.module
+    ? 'grid grid-rows-1 items-center gap-1'
+    : 'flex items-center'
+})
 </script>
 
 <template>
-  <div v-if="id" my-auto text-sm font-mono flex="~ items-center">
+  <div
+    v-if="id"
+    v-tooltip.bottom-start="{
+      content: moduleName,
+      triggers: ['hover', 'focus'],
+      disabled: !module,
+    }"
+    my-auto text-sm font-mono
+    :class="containerClass"
+    :style="gridStyles"
+  >
     <FileIcon v-if="icon" :filename="id" mr1.5 />
-    <template v-if="id.startsWith(root)">
-      <span class="op50">.</span>
-      <span>{{ id.slice(root.length) }}</span>
-    </template>
-    <span v-else>{{ id }}</span>
+    <span :class="{ 'overflow-hidden': module }">
+      <template v-if="id.startsWith(root)">
+        <span class="op50">.</span>
+      </template>
+      <span :class="{ 'text-truncate': module }">{{ moduleName }}</span>
+    </span>
     <slot />
 
     <Badge
       v-if="isVirtual"
-      class="ml1 bg-teal-400:10 text-green-700 dark:text-teal-400"
+      class="ml1 badge-virtual"
       v-text="'virtual'"
     />
   </div>

src/client/components/ModuleList.vue

@@ -54,26 +54,26 @@ function byteToHumanReadable(byte: number) {
               :key="i"
             >
               <span v-if="idx !== 0" op20>|</span>
-              <span op50>
+              <span>
                 <PluginName :name="i.name" :hide="true" />
               </span>
             </template>
             <template v-if="m.data.invokeCount > 2">
               <span op40>·</span>
               <span
-                text-green
+                status-green
                 :title="`Transform invoked ${m.data.invokeCount} times`"
               >x{{ m.data.invokeCount }}</span>
             </template>
             <div flex-auto />
-            <span op75>
+            <span>
               <DurationDisplay :duration="m.data.totalTime" />
             </span>
             <template v-if="m.data.sourceSize && m.data.distSize">
               <span op40>·</span>
-              <span op50>{{ byteToHumanReadable(m.data.sourceSize) }}</span>
+              <span class="op75 dark:op50">{{ byteToHumanReadable(m.data.sourceSize) }}</span>
               <span i-carbon-arrow-right op40 />
-              <span op50 :class="m.data.distSize > m.data.sourceSize ? 'text-orange' : 'text-green'">{{ byteToHumanReadable(m.data.distSize) }}</span>
+              <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>

src/client/components/NavBar.vue

@@ -7,7 +7,7 @@ import { isStaticMode, refetch, toggleDark } from '../logic'
     <slot />
     <slot name="actions">
       <button v-if="!isStaticMode" class="text-lg icon-btn" title="Refetch" @click="refetch()">
-        <div i-carbon-renew />
+        <span i-carbon-renew block />
       </button>
       <div h-full w-1 border="r main" />
       <a
@@ -18,7 +18,7 @@ import { isStaticMode, refetch, toggleDark } from '../logic'
         <div i-carbon-logo-github />
       </a>
       <button class="text-lg icon-btn" title="Toggle Dark Mode" @click="toggleDark()">
-        <div i-carbon-sun dark:i-carbon-moon />
+        <span i-carbon-sun dark:i-carbon-moon block />
       </button>
     </slot>
   </nav>

src/client/components/PluginName.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 const props = defineProps<{
   name: string
+  colored?: boolean
   hide?: boolean
 }>()
 
@@ -21,13 +22,16 @@ const parts = computed(() => {
   }
   return ['', props.name]
 })
+const opacity = computed(() => {
+  return props.colored ? 'op100 dark:op-65' : 'op75 dark:op50'
+})
 </script>
 
 <template>
-  <span v-if="parts[0] && !hide" class="op50">
+  <span v-if="parts[0] && !hide" :class="opacity">
     {{ parts[0] }}
   </span>
-  <span>
+  <span :class="opacity">
     {{ parts[1] }}
   </span>
 </template>

src/client/main.ts

@@ -2,6 +2,7 @@
 import { createApp } from 'vue'
 import { createRouter, createWebHashHistory } from 'vue-router'
 import routes from 'virtual:generated-pages'
+import FloatingVue from 'floating-vue'
 import App from './App.vue'
 
 import '@unocss/reset/tailwind.css'
@@ -10,9 +11,9 @@ import './styles/cm.css'
 import 'uno.css'
 
 const app = createApp(App)
-const router = createRouter({
+app.use(FloatingVue)
+app.use(createRouter({
   history: createWebHashHistory(),
   routes,
-})
-app.use(router)
+}))
 app.mount('#app')

src/client/pages/index.vue

@@ -23,27 +23,27 @@ onMounted(() => {
         @click="toggleSort()"
       >
         <template v-if="searchText">
-          <div i-carbon-search />
-          <div i-carbon-arrow-down text-sm op70 />
+          <span i-carbon-search block />
+          <span i-carbon-arrow-down block text-sm op70 />
         </template>
         <template v-else-if="sortMode === 'time-asc'">
-          <div i-carbon-time />
-          <div i-carbon-arrow-down text-sm op70 />
+          <span i-carbon-time block />
+          <span i-carbon-arrow-down block text-sm op70 />
         </template>
         <template v-else-if="sortMode === 'time-desc'">
-          <div i-carbon-time />
-          <div i-carbon-arrow-up text-sm op70 />
+          <span i-carbon-time block />
+          <span i-carbon-arrow-up block text-sm op70 />
         </template>
         <template v-else>
-          <div i-carbon-menu />
-          <div i-carbon-chevron-sort text-sm op70 />
+          <span i-carbon-menu block />
+          <span i-carbon-chevron-sort block text-sm op70 />
         </template>
       </button>
     </template>
     <button text-lg icon-btn title="View Mode" @click="toggleMode()">
-      <div v-if="listMode === 'detailed'" i-carbon-list-boxes />
-      <div v-else-if="listMode === 'list'" i-carbon-list />
-      <div v-else i-carbon-network-4 />
+      <span v-if="listMode === 'detailed'" i-carbon-list-boxes block />
+      <span v-else-if="listMode === 'list'" i-carbon-list block />
+      <span v-else i-carbon-network-4 block />
     </button>
     <div h-full w-1 border="r main" />
     <RouterLink text-lg icon-btn to="/metric" title="Metrics">