fix: consistent folder styles

Author: antfu

packages/devtools/src/app/components/display/TreeNode.vue

@@ -6,14 +6,20 @@ import { NuxtLink } from '#components'
 const props = withDefaults(defineProps<{
   node: ModuleTreeNode
   icon?: string
+  iconOpen?: string
   link?: string | boolean
+  padding?: number
+  open?: boolean
 }>(), {
-  icon: 'i-carbon-folder',
+  icon: 'i-catppuccin:folder catppuccin',
+  iconOpen: 'i-catppuccin:folder-open catppuccin',
+  padding: 0,
 })
 
 const emit = defineEmits<{
   (e: 'select', node: ModuleDest): void
 }>()
+const open = defineModel<boolean>('open', { required: false, default: true })
 const route = useRoute()
 const location = window.location
 function select(node: ModuleDest) {
@@ -24,40 +30,48 @@ function select(node: ModuleDest) {
 </script>
 
 <template>
-  <details open>
+  <details :open="open" @toggle="e => open = (e.target as HTMLDetailsElement)?.open">
     <summary
       cursor-default
       select-none
       text-sm
       truncate
-      p="y1"
+      :style="{ paddingLeft: `${padding + 0.5}rem` }"
+      flex="~ gap-1"
+      px2 py1 rounded
+      hover="bg-active "
     >
-      <div :class="icon" inline-block vertical-text-bottom />
-      {{ node.name }}
+      <div class="i-ph:caret-right-duotone transition op50" :class="open ? 'rotate-90' : ''" />
+      <div :class="open ? iconOpen || icon : icon" inline-block vertical-text-bottom />
+      <div font-mono>
+        <DisplayHighlightedPath :path="node.name || ''" />
+      </div>
     </summary>
 
-    <DisplayTreeNode v-for="e of Object.entries(node.children)" :key="e[0]" ml4 :node="e[1]" :link="link" />
-    <div
-      v-for="i of node.items"
-      :key="i.full"
-      ml4
-      ws-nowrap
-    >
-      <component
-        :is="link ? NuxtLink : 'div'"
-        :to="link ? (typeof link === 'string' ? link : { path: route.path, query: { ...route.query, module: i.full }, hash: location.hash }) : undefined"
-        block
-        text-sm
-        p="x2 y1"
-        ml1
-        rounded
-        @click="select(i)"
-      >
-        <DisplayFileIcon :filename="i.full" inline-block vertical-text-bottom />
-        <span ml-1>
-          {{ i.path.split('/').pop() }}
-        </span>
-      </component>
-    </div>
+    <template v-if="open">
+      <DisplayTreeNode
+        v-for="e of Object.entries(node.children)"
+        :key="e[0]" :node="e[1]" :link="link"
+        :padding="padding + 1"
+      />
+      <template v-for="i of node.items" :key="i.full">
+        <component
+          :is="link ? NuxtLink : 'div'"
+          :to="link ? (typeof link === 'string' ? link : { path: route.path, query: { ...route.query, module: i.full }, hash: location.hash }) : undefined"
+          text-sm
+          ws-nowrap
+          flex="~ gap-1"
+          px2 py1 rounded
+          hover="bg-active"
+          :style="{ paddingLeft: `${padding + 2.7}rem` }"
+          @click="select(i)"
+        >
+          <DisplayFileIcon :filename="i.full" />
+          <div font-mono>
+            <DisplayHighlightedPath :path="i.path.split('/').pop() || ''" />
+          </div>
+        </component>
+      </template>
+    </template>
   </details>
 </template>

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

@@ -63,23 +63,34 @@ const moduleTree = computed(() => {
         v-if="Object.keys(moduleTree.workspace.children).length"
         :node="moduleTree.workspace"
         p="l3"
-        icon="i-carbon-portfolio"
-        :link="true"
-      />
-      <DisplayTreeNode
-        v-if="Object.keys(moduleTree.nodeModules.children).length"
-        :node="moduleTree.nodeModules"
-        p="l3"
-        icon="i-carbon-categories"
-        :link="true"
-      />
-      <DisplayTreeNode
-        v-if="Object.keys(moduleTree.virtual.children).length"
-        :node="moduleTree.virtual"
-        p="l3"
-        icon="i-codicon:file-symlink-directory"
+        icon="i-catppuccin:folder-dist catppuccin"
+        icon-open="i-catppuccin:folder-dist-open catppuccin"
         :link="true"
       />
+
+      <template v-if="Object.keys(moduleTree.nodeModules.children).length">
+        <div w-full h-1px border="t base" />
+        <DisplayTreeNode
+          :node="moduleTree.nodeModules"
+          p="l3"
+          icon="i-catppuccin:folder-node catppuccin"
+          icon-open="i-catppuccin:folder-node-open catppuccin"
+          :link="true"
+          :open="false"
+        />
+      </template>
+
+      <template v-if="Object.keys(moduleTree.virtual.children).length">
+        <div w-full h-1px border="t base" />
+        <DisplayTreeNode
+          :node="moduleTree.virtual"
+          p="l3"
+          icon="i-catppuccin:folder-components catppuccin"
+          icon-open="i-catppuccin:folder-components-open catppuccin"
+          :link="true"
+          :open="false"
+        />
+      </template>
     </div>
   </div>
 </template>