feat: improve panel layout

Author: antfu

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

@@ -113,7 +113,7 @@ const codeDisplay = computed(() => {
 </script>
 
 <template>
-  <div pt4 w-max>
+  <div pt4>
     <div v-if="info.importers?.length" text-sm>
       <div flex>
         <VMenu>
@@ -189,8 +189,8 @@ const codeDisplay = computed(() => {
         </VMenu>
       </template>
     </div>
-    <div w-full flex="~">
-      <div select-none flex-1>
+    <div flex="~ gap-10">
+      <div select-none w-max>
         <FlowmapExpandable
           :expandable="resolveIds.length > 0"
           :class-root-node="resolveIds.length === 0 ? 'border-dashed' : ''"
@@ -290,23 +290,30 @@ const codeDisplay = computed(() => {
       </div>
 
       <div
-        v-if="!!codeDisplay?.from || !!codeDisplay?.to"
-        border="~ base rounded-lg" bg-glass of-hidden max-h-120vh flex-1 m4
+        w-259
+        :class="codeDisplay?.from && codeDisplay?.to ? '' : 'border-dashed'"
+        border="~ base rounded-lg" of-hidden max-h-120vh m4 flex="~ col"
       >
-        <div pl4 p2 font-mono border="b base" flex="~ items-center gap-2" h-max-100vh>
-          <PluginName :name="codeDisplay.plugin_name" />
-          <span op50 text-xs>
-            {{ codeDisplay.type === 'load' ? 'Load' : 'Transform' }}
-          </span>
-          <div flex-auto />
-          <DisplayCloseButton @click="selected = null" />
-        </div>
-        <CodeDiffEditor
-          :from="codeDisplay.from ?? ''"
-          :to="codeDisplay.to ?? ''"
-          :diff="true"
-          :one-column="false"
-        />
+        <template v-if="codeDisplay?.from && codeDisplay?.to">
+          <div pl4 p2 font-mono border="b base" flex="~ items-center gap-2" h-max-100vh>
+            <PluginName :name="codeDisplay?.plugin_name ?? ''" />
+            <span v-if="codeDisplay?.type" op50 text-xs>
+              {{ codeDisplay?.type === 'load' ? 'Load' : 'Transform' }}
+            </span>
+            <div flex-auto />
+            <DisplayCloseButton @click="selected = null" />
+          </div>
+          <CodeDiffEditor
+            :from="codeDisplay?.from ?? ''"
+            :to="codeDisplay?.to ?? ''"
+            :diff="true"
+            :one-column="false"
+          />
+        </template>
+        <!-- TODO: show more info with selected node -->
+        <span v-else op50 italic ma>
+          Select a node to view
+        </span>
       </div>
     </div>
   </div>

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

@@ -84,7 +84,7 @@ const importterModule = computed(() => {
             v-if="'plugin_name' in item"
             :class="isDashed ? 'op50' : ''"
             :name="item.plugin_name"
-            class="font-mono text-sm"
+            class="font-mono text-sm ws-nowrap"
           />
         </slot>
       </button>

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

@@ -80,7 +80,7 @@ onMounted(async () => {
 
     <div
       v-if="route.query.module" fixed inset-0
-      backdrop-blur-5 z-panel-content
+      backdrop-blur-8 backdrop-brightness-95 z-panel-content
     >
       <div
         :key="(route.query.module as string)"
@@ -92,7 +92,6 @@ onMounted(async () => {
         <FlowmapModuleFlowLoader
           :module="(route.query.module as string)"
           :session="session"
-          w-max
         />
         <DisplayCloseButton
           absolute right-2 top-2

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

@@ -93,7 +93,7 @@ const dataTable = computed<DataTableItem[]>(() => {
     </div>
     <div flex="~ gap-2">
       <template v-for="item of sideNavItems" :key="item.to">
-        <NuxtLink v-if="item.category === 'session'" btn-action :to="{ path: item.to }" flex="~ col" min-w-40>
+        <NuxtLink v-if="item.category === 'session'" btn-action :to="{ path: item.to }" flex="~ col" min-w-40 p4>
           <div :class="item.icon" text-2xl />
           {{ item.title }}
         </NuxtLink>