feat: put vue devtools ui in a separate category

Author: antfu

packages/devtools-kit/src/_types/common.ts

@@ -1,6 +1,7 @@
 export type TabCategory =
   | 'pinned'
   | 'app'
+  | 'vue-devtools'
   | 'analyze'
   | 'server'
   | 'modules'

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': [],
   }
 }
 

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'))

packages/devtools/client/pages/modules/components-tree.vue 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) {

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"