feat: adjust ui

Author: antfu

packages/devtools/src/app/components/flowmap/ModuleFlow.vue

@@ -106,31 +106,37 @@ const codeDisplay = computed(() => {
 
 <template>
   <div of-auto pt4>
-    <div v-if="info.importers?.length" flex="~ gap-2" pb4 text-sm>
-      <VMenu>
-        <FlowmapNode :lines="{ bottom: true }" :active="selected != null" class-node-outer="border-dashed">
-          <template #inner>
-            <div flex="~ items-center gap-1" text-sm text-blue px3 py1>
-              <div i-ph-arrows-merge-duotone rotate-270 />
-              {{ info.importers?.length }} importers
+    <div v-if="info.importers?.length" text-sm>
+      <div flex>
+        <VMenu>
+          <FlowmapNode class-node-outer="border-dashed">
+            <template #inner>
+              <div flex="~ items-center gap-1" text-sm text-blue px3 py1>
+                <div i-ph-arrows-merge-duotone rotate-270 />
+                {{ info.importers?.length }} importers
+              </div>
+            </template>
+          </FlowmapNode>
+          <template #popper="{ hide }">
+            <div p2 flex="~ col gap-1">
+              <DisplayModuleId
+                v-for="importer of info.importers"
+                :id="importer"
+                :key="importer"
+                :session="session"
+                :link="true"
+                class="hover:bg-active"
+                px2 py1 rounded
+                @click="hide"
+              />
             </div>
           </template>
-        </FlowmapNode>
-        <template #popper="{ hide }">
-          <div p2 flex="~ col gap-1">
-            <DisplayModuleId
-              v-for="importer of info.importers"
-              :id="importer"
-              :key="importer"
-              :session="session"
-              :link="true"
-              class="hover:bg-active"
-              px2 py1 rounded
-              @click="hide"
-            />
-          </div>
-        </template>
-      </VMenu>
+        </VMenu>
+      </div>
+      <div
+        pl-10 border="r" h-4 w-1px z-flowmap-line
+        class="border-flow-line border-dashed"
+      />
     </div>
     <div flex="~">
       <FlowmapNode
@@ -149,7 +155,7 @@ const codeDisplay = computed(() => {
       <template v-if="info.imports?.length">
         <div w-10 border="t base dashed" mya />
         <VMenu mya>
-          <FlowmapNode :active="selected != null" class-node-outer="border-dashed">
+          <FlowmapNode class-node-outer="border-dashed">
             <template #inner>
               <div flex="~ items-center gap-1" text-sm text-orange px3 py1>
                 <div i-ph-arrows-split-duotone rotate-270 />

packages/devtools/src/app/components/modules/list.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import type { ModuleListItem, SessionContext } from '../../types/data'
+
+defineProps<{
+  session: SessionContext
+  modules: ModuleListItem[]
+}>()
+</script>
+
+<template>
+  <div flex="~ col gap-2" p4>
+    <template v-for="mod of modules" :key="mod">
+      <DisplayModuleId
+        :id="mod.id"
+        :session
+        hover="bg-active" block px2 p1
+        border="~ base rounded"
+        :link="true"
+      />
+    </template>
+  </div>
+</template>

packages/devtools/src/app/pages/session/[session]/index.vue

@@ -152,15 +152,10 @@ const searched = computed(() => {
       <!-- TODO: should we add filters for node_modules? -->
       <!-- {{ allNodeModules }} -->
     </div>
-    <template v-for="mod of searched" :key="mod">
-      <DisplayModuleId
-        :id="mod.id"
-        :session
-        hover="bg-active" block px2 p1
-        border="~ base rounded"
-        :link="true"
-      />
-    </template>
+    <ModulesList
+      :session="session"
+      :modules="searched"
+    />
     <div text-center text-xs op50 m4>
       {{ filtered.length }} of {{ session.modulesList.length }}
     </div>

packages/devtools/src/app/styles/global.css

@@ -72,15 +72,19 @@ summary::-webkit-details-marker {
 .v-popper--theme-tooltip .v-popper__arrow-inner,
 .v-popper--theme-dropdown .v-popper__arrow-inner {
   visibility: visible;
-  --at-apply: border-white dark:border-#111;
+  --at-apply: border-solid border-white dark:border-#111;
 }
 
 .v-popper--theme-tooltip .v-popper__arrow-outer,
 .v-popper--theme-dropdown .v-popper__arrow-outer {
-  --at-apply: border-base;
+  --at-apply: border-solid border-base;
 }
 
 .v-popper--theme-tooltip.v-popper--shown,
 .v-popper--theme-tooltip.v-popper--shown * {
   transition: none !important;
 }
+
+.v-popper__popper--shown {
+  overflow: visible !important;
+}

packages/devtools/src/node/rolldown/events-manager.ts

@@ -28,6 +28,8 @@ export class RolldownEventsManager {
     if (event.action === 'ModuleGraphReady') {
       for (const module of event.modules) {
         this.modules.set(module.id, module)
+        module.importers = Array.from(new Set(module.importers || [])).sort((a, b) => a.localeCompare(b))
+        module.imports = Array.from(new Set(module.imports || [])).sort((a, b) => a.localeCompare(b))
       }
     }