From 5b566fbae4da751e044a8aec198cddd82aeacbc1 Mon Sep 17 00:00:00 2001
From: Anthony Fu <github@antfu.me>
Date: Thu, 9 Jan 2025 16:37:05 +0800
Subject: [PATCH] feat: put vue devtools ui in a separate category

---
 packages/devtools-kit/src/_types/common.ts        |  1 +
 .../devtools/client/composables/state-tabs.ts     | 15 ++++++++-------
 packages/devtools/client/pages/modules/pinia.vue  |  1 +
 .../{components-tree.vue => render-tree.vue}      |  5 +++--
 packages/devtools/client/pages/settings.vue       |  7 +++----
 5 files changed, 16 insertions(+), 13 deletions(-)
 rename packages/devtools/client/pages/modules/{components-tree.vue => render-tree.vue} (94%)

diff --git a/packages/devtools-kit/src/_types/common.ts b/packages/devtools-kit/src/_types/common.ts
index 531927d1a2..ffdd62b3b7 100644
--- a/packages/devtools-kit/src/_types/common.ts
+++ b/packages/devtools-kit/src/_types/common.ts
@@ -1,6 +1,7 @@
 export type TabCategory =
   | 'pinned'
   | 'app'
+  | 'vue-devtools'
   | 'analyze'
   | 'server'
   | 'modules'
diff --git a/packages/devtools/client/composables/state-tabs.ts b/packages/devtools/client/composables/state-tabs.ts
index 40fdd7729b..61a0227769 100644
--- a/packages/devtools/client/composables/state-tabs.ts
+++ b/packages/devtools/client/composables/state-tabs.ts
@@ -52,13 +52,14 @@ export function useAllTabs() {
 
 function getCategorizedRecord(): Record<TabCategory, (ModuleCustomTab | ModuleBuiltinTab)[]> {
   return {
-    pinned: [],
-    app: [],
-    analyze: [],
-    server: [],
-    modules: [],
-    documentation: [],
-    advanced: [],
+    'pinned': [],
+    'app': [],
+    'vue-devtools': [],
+    'analyze': [],
+    'server': [],
+    'modules': [],
+    'documentation': [],
+    'advanced': [],
   }
 }
 
diff --git a/packages/devtools/client/pages/modules/pinia.vue b/packages/devtools/client/pages/modules/pinia.vue
index 0539870049..9e2e3860f6 100644
--- a/packages/devtools/client/pages/modules/pinia.vue
+++ b/packages/devtools/client/pages/modules/pinia.vue
@@ -10,6 +10,7 @@ definePageMeta({
   icon: 'i-logos-pinia',
   title: 'Pinia',
   layout: 'full',
+  category: 'vue-devtools',
   show() {
     const configs = useServerConfig()
     return () => configs.value?.modules?.some(item => (item as string | Array<unknown>)?.includes('@pinia/nuxt'))
diff --git a/packages/devtools/client/pages/modules/components-tree.vue b/packages/devtools/client/pages/modules/render-tree.vue
similarity index 94%
rename from packages/devtools/client/pages/modules/components-tree.vue
rename to packages/devtools/client/pages/modules/render-tree.vue
index ca6b8fae80..8bbb771e07 100644
--- a/packages/devtools/client/pages/modules/components-tree.vue
+++ b/packages/devtools/client/pages/modules/render-tree.vue
@@ -11,13 +11,14 @@ const openInEditor = useOpenInEditor()
 
 definePageMeta({
   icon: 'i-carbon-category',
-  title: 'Components Tree',
+  title: 'Render Tree',
   layout: 'full',
   show: () => {
     const client = useClient()
     return () => !!client.value
   },
-  order: 3,
+  order: 1,
+  category: 'vue-devtools',
 })
 
 function togglePanel(status: boolean) {
diff --git a/packages/devtools/client/pages/settings.vue b/packages/devtools/client/pages/settings.vue
index 3b0767630f..0d4ae06f92 100644
--- a/packages/devtools/client/pages/settings.vue
+++ b/packages/devtools/client/pages/settings.vue
@@ -113,7 +113,7 @@ watchEffect(() => {
       icon="i-carbon-settings-adjust"
       text="DevTools Settings"
     />
-    <div grid="~ md:cols-2 gap-x-10 gap-y-3" max-w-300>
+    <div grid="~ lg:cols-2 gap-x-10 gap-y-3" max-w-300>
       <div flex="~ col gap-2">
         <h3 text-lg>
           Tabs
@@ -141,10 +141,9 @@ watchEffect(() => {
                 :model-value="!hiddenTabs.includes(tab.name)"
                 @update:model-value="(v: boolean) => toggleTab(tab.name, v)"
               >
-                <div flex="~ gap-2" flex-auto items-center justify-start pr-4 :class="hiddenTabs.includes(tab.name) ? 'op25' : ''">
+                <div flex="~ gap-2" flex-auto items-center justify-start of-hidden pr-4 :class="hiddenTabs.includes(tab.name) ? 'op25' : ''">
                   <TabIcon text-xl :icon="tab.icon" :title="tab.title" />
-                  <span>{{ tab.title }}</span>
-                  <div flex-auto />
+                  <span flex-auto overflow-hidden text-ellipsis ws-nowrap>{{ tab.title }}</span>
                   <template v-if="pinnedTabs.includes(tab.name)">
                     <NButton
                       icon="i-carbon-caret-up"